Setup (#112)

* wip * wip * wip3 * chore: utils * feat: add command * wip * fix: key duplicate * fix: move and check * fix: use react-use instead * fix: sidebar * chore: make dynamic * chore: tablet mode * chore: fix padding * chore: link instead of inbox * fix: use dnd kit * feat: add select component * chore: use atom * refactor: remove dnd provider * feat: disabled drag when sort is not manual * search route * . * feat: accessibility * fix: search * . * . * . * fix: sidebar collapsed * ai search layout * . * . * . * . * ai responsible content * . * . * . * . * . * global topic route * global topic correct route * topic buttons * sidebar search navigation * ai * Update jazz * . * . * . * . * . * learning status * . * . * chore: content header * fix: pointer none when dragging. prevent auto click after drag end * fix: confirm * fix: prevent drag when editing * chore: remove unused fn * fix: check propagation * chore: list * chore: tweak sonner * chore: update stuff * feat: add badge * chore: close edit when create * chore: escape on manage form * refactor: remove learn path * css: responsive item * chore: separate pages and topic * reafactor: remove new-schema * feat(types): extend jazz type so it can be nullable * chore: use new types * fix: missing deps * fix: link * fix: sidebar in layout * fix: quotes * css: use medium instead semi * Actual streaming and rendering markdown response * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * . * chore: metadata * feat: la-editor * . * fix: editor and page * . * . * . * . * . * . * fix: remove link * chore: page sidebar * fix: remove 'replace with learning status' * fix: link * fix: link * chore: update schema * chore: use new schema * fix: instead of showing error, just do unique slug * feat: create slug * refactor apply * update package json * fix: schema personal page * chore: editor * feat: pages * fix: metadata * fix: jazz provider * feat: handling data * feat: page detail * chore: server page to id * chore: use id instead of slug * chore: update content header * chore: update link header implementation * refactor: global.css * fix: la editor use animation frame * fix: editor export ref * refactor: page detail * chore: tidy up schema * chore: adapt to new schema * fix: wrap using settimeout * fix: wrap using settimeout * . * . --------- Co-authored-by: marshennikovaolga <marshennikova@gmail.com> Co-authored-by: Nikita <github@nikiv.dev> Co-authored-by: Anselm <anselm.eickhoff@gmail.com> Co-authored-by: Damian Tarnawski <gthetarnav@gmail.com>
2026-01-12 12:20:23 +01:00 · 2024-08-08 00:57:22 +07:00
parent 228faf226a
commit 36e0e19212
143 changed files with 6967 additions and 101 deletions
--- a/web/components/la-editor/components/bubble-menu/bubble-menu.tsx
+++ b/web/components/la-editor/components/bubble-menu/bubble-menu.tsx
@@ -0,0 +1,60 @@
+import { useTextmenuCommands } from "../../hooks/use-text-menu-commands"
+import { PopoverWrapper } from "../ui/popover-wrapper"
+import { useTextmenuStates } from "../../hooks/use-text-menu-states"
+import { BubbleMenu as TiptapBubbleMenu, Editor } from "@tiptap/react"
+import { ToolbarButton } from "../ui/toolbar-button"
+import { Icon } from "../ui/icon"
+import * as React from "react"
+
+export type BubbleMenuProps = {
+	editor: Editor
+}
+
+export const BubbleMenu = ({ editor }: BubbleMenuProps) => {
+	const commands = useTextmenuCommands(editor)
+	const states = useTextmenuStates(editor)
+
+	return (
+		<TiptapBubbleMenu
+			tippyOptions={{
+				// duration: [0, 999999],
+				popperOptions: { placement: "top-start" }
+			}}
+			editor={editor}
+			pluginKey="textMenu"
+			shouldShow={states.shouldShow}
+			updateDelay={100}
+		>
+			<PopoverWrapper className="flex items-center overflow-x-auto p-1">
+				<div className="space-x-1">
+					<ToolbarButton value="bold" aria-label="Bold" onPressedChange={commands.onBold} isActive={states.isBold}>
+						<Icon name="Bold" strokeWidth={2.5} />
+					</ToolbarButton>
+					<ToolbarButton value="italic" aria-label="Italic" onClick={commands.onItalic}>
+						<Icon name="Italic" strokeWidth={2.5} />
+					</ToolbarButton>
+					<ToolbarButton value="strikethrough" aria-label="Strikethrough" onClick={commands.onStrike}>
+						<Icon name="Strikethrough" strokeWidth={2.5} />
+					</ToolbarButton>
+					{/* <ToolbarButton value="link" aria-label="Link">
+            <Icon name="Link" strokeWidth={2.5} />
+          </ToolbarButton> */}
+					<ToolbarButton value="quote" aria-label="Quote" onClick={commands.onCode}>
+						<Icon name="Quote" strokeWidth={2.5} />
+					</ToolbarButton>
+					<ToolbarButton value="inline code" aria-label="Inline code" onClick={commands.onCode}>
+						<Icon name="Braces" strokeWidth={2.5} />
+					</ToolbarButton>
+					<ToolbarButton value="code block" aria-label="Code block" onClick={commands.onCodeBlock}>
+						<Icon name="Code" strokeWidth={2.5} />
+					</ToolbarButton>
+					{/* <ToolbarButton value="list" aria-label="List">
+            <Icon name="List" strokeWidth={2.5} />
+          </ToolbarButton> */}
+				</div>
+			</PopoverWrapper>
+		</TiptapBubbleMenu>
+	)
+}
+
+export default BubbleMenu
--- a/web/components/la-editor/components/bubble-menu/index.ts
+++ b/web/components/la-editor/components/bubble-menu/index.ts
@@ -0,0 +1 @@
+export * from "./bubble-menu"
--- a/web/components/la-editor/components/ui/icon.tsx
+++ b/web/components/la-editor/components/ui/icon.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { icons } from "lucide-react"
+
+export type IconProps = {
+	name: keyof typeof icons
+	className?: string
+	strokeWidth?: number
+	[key: string]: any
+}
+
+export const Icon = React.memo(({ name, className, size, strokeWidth, ...props }: IconProps) => {
+	const IconComponent = icons[name]
+
+	if (!IconComponent) {
+		return null
+	}
+
+	return <IconComponent className={cn(!size ? "size-4" : size, className)} strokeWidth={strokeWidth || 2} {...props} />
+})
+
+Icon.displayName = "Icon"
--- a/web/components/la-editor/components/ui/popover-wrapper.tsx
+++ b/web/components/la-editor/components/ui/popover-wrapper.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type PopoverWrapperProps = React.HTMLProps<HTMLDivElement>
+
+export const PopoverWrapper = React.forwardRef<HTMLDivElement, PopoverWrapperProps>(
+	({ children, className, ...props }, ref) => {
+		return (
+			<div
+				className={cn("bg-popover text-popover-foreground rounded-lg border shadow-sm", className)}
+				{...props}
+				ref={ref}
+			>
+				{children}
+			</div>
+		)
+	}
+)
+
+PopoverWrapper.displayName = "PopoverWrapper"
--- a/web/components/la-editor/components/ui/shortcut.tsx
+++ b/web/components/la-editor/components/ui/shortcut.tsx
@@ -0,0 +1,45 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { getShortcutKey } from "../../lib/utils"
+
+export interface ShortcutKeyWrapperProps extends React.HTMLAttributes<HTMLSpanElement> {
+	ariaLabel: string
+}
+
+const ShortcutKeyWrapper = React.forwardRef<HTMLSpanElement, ShortcutKeyWrapperProps>(
+	({ className, ariaLabel, children, ...props }, ref) => {
+		return (
+			<span aria-label={ariaLabel} className={cn("inline-flex items-center gap-0.5", className)} {...props} ref={ref}>
+				{children}
+			</span>
+		)
+	}
+)
+
+ShortcutKeyWrapper.displayName = "ShortcutKeyWrapper"
+
+export interface ShortcutKeyProps extends React.HTMLAttributes<HTMLSpanElement> {
+	shortcut: string
+}
+
+const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(({ className, shortcut, ...props }, ref) => {
+	return (
+		<kbd
+			className={cn(
+				"inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]",
+				className
+			)}
+			{...props}
+			ref={ref}
+		>
+			{getShortcutKey(shortcut)}
+		</kbd>
+	)
+})
+
+ShortcutKey.displayName = "ShortcutKey"
+
+export const Shortcut = {
+	Wrapper: ShortcutKeyWrapper,
+	Key: ShortcutKey
+}
--- a/web/components/la-editor/components/ui/toolbar-button.tsx
+++ b/web/components/la-editor/components/ui/toolbar-button.tsx
@@ -0,0 +1,49 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Toggle } from "@/components/ui/toggle"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import type { TooltipContentProps } from "@radix-ui/react-tooltip"
+
+interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Toggle> {
+	isActive?: boolean
+	tooltip?: string
+	tooltipOptions?: TooltipContentProps
+}
+
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(function ToolbarButton(
+	{ isActive, children, tooltip, className, tooltipOptions, ...props },
+	ref
+) {
+	return (
+		<TooltipProvider delayDuration={0}>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Toggle
+						size="sm"
+						ref={ref}
+						className={cn(
+							"size-7 rounded-md p-0",
+							{
+								"bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary": isActive
+							},
+							className
+						)}
+						{...props}
+					>
+						{children}
+					</Toggle>
+				</TooltipTrigger>
+				{tooltip && (
+					<TooltipContent {...tooltipOptions}>
+						<div className="flex flex-col items-center text-center">{tooltip}</div>
+					</TooltipContent>
+				)}
+			</Tooltip>
+		</TooltipProvider>
+	)
+})
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export { ToolbarButton }
--- a/web/components/la-editor/extensions/blockquote/blockquote.ts
+++ b/web/components/la-editor/extensions/blockquote/blockquote.ts
@@ -0,0 +1,13 @@
+/*
+ * Add block-node class to blockquote element
+ */
+import { mergeAttributes } from "@tiptap/core"
+import { Blockquote as TiptapBlockquote } from "@tiptap/extension-blockquote"
+
+export const Blockquote = TiptapBlockquote.extend({
+	renderHTML({ HTMLAttributes }) {
+		return ["blockquote", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { class: "block-node" }), 0]
+	}
+})
+
+export default Blockquote
--- a/web/components/la-editor/extensions/blockquote/index.ts
+++ b/web/components/la-editor/extensions/blockquote/index.ts
--- a/web/components/la-editor/extensions/bullet-list/bullet-list.ts
+++ b/web/components/la-editor/extensions/bullet-list/bullet-list.ts
@@ -0,0 +1,14 @@
+import { BulletList as TiptapBulletList } from "@tiptap/extension-bullet-list"
+
+export const BulletList = TiptapBulletList.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			HTMLAttributes: {
+				class: "list-node"
+			}
+		}
+	}
+})
+
+export default BulletList
--- a/web/components/la-editor/extensions/bullet-list/index.ts
+++ b/web/components/la-editor/extensions/bullet-list/index.ts
@@ -0,0 +1 @@
+export * from "./bullet-list"
--- a/web/components/la-editor/extensions/code-block-lowlight/code-block-lowlight.ts
+++ b/web/components/la-editor/extensions/code-block-lowlight/code-block-lowlight.ts
@@ -0,0 +1,17 @@
+import { CodeBlockLowlight as TiptapCodeBlockLowlight } from "@tiptap/extension-code-block-lowlight"
+import { common, createLowlight } from "lowlight"
+
+export const CodeBlockLowlight = TiptapCodeBlockLowlight.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			lowlight: createLowlight(common),
+			defaultLanguage: null,
+			HTMLAttributes: {
+				class: "block-node"
+			}
+		}
+	}
+})
+
+export default CodeBlockLowlight
--- a/web/components/la-editor/extensions/code-block-lowlight/index.ts
+++ b/web/components/la-editor/extensions/code-block-lowlight/index.ts
@@ -0,0 +1 @@
+export * from "./code-block-lowlight"
--- a/web/components/la-editor/extensions/code/code.ts
+++ b/web/components/la-editor/extensions/code/code.ts
@@ -0,0 +1,15 @@
+import { Code as TiptapCode } from "@tiptap/extension-code"
+
+export const Code = TiptapCode.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			HTMLAttributes: {
+				class: "inline",
+				spellCheck: "false"
+			}
+		}
+	}
+})
+
+export default Code
--- a/web/components/la-editor/extensions/code/index.ts
+++ b/web/components/la-editor/extensions/code/index.ts
@@ -0,0 +1 @@
+export * from "./code"
--- a/web/components/la-editor/extensions/dropcursor/dropcursor.ts
+++ b/web/components/la-editor/extensions/dropcursor/dropcursor.ts
@@ -0,0 +1,13 @@
+import { Dropcursor as TiptapDropcursor } from "@tiptap/extension-dropcursor"
+
+export const Dropcursor = TiptapDropcursor.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			width: 2,
+			class: "ProseMirror-dropcursor border"
+		}
+	}
+})
+
+export default Dropcursor
--- a/web/components/la-editor/extensions/dropcursor/index.ts
+++ b/web/components/la-editor/extensions/dropcursor/index.ts
@@ -0,0 +1 @@
+export * from "./dropcursor"
--- a/web/components/la-editor/extensions/heading/heading.ts
+++ b/web/components/la-editor/extensions/heading/heading.ts
@@ -0,0 +1,29 @@
+/*
+ * Add heading level validation. decimal (0-9)
+ * Add heading class to heading element
+ */
+import { mergeAttributes } from "@tiptap/core"
+import TiptapHeading from "@tiptap/extension-heading"
+import type { Level } from "@tiptap/extension-heading"
+
+export const Heading = TiptapHeading.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			levels: [1, 2, 3] as Level[],
+			HTMLAttributes: {
+				class: "heading-node"
+			}
+		}
+	},
+
+	renderHTML({ node, HTMLAttributes }) {
+		const nodeLevel = parseInt(node.attrs.level, 10) as Level
+		const hasLevel = this.options.levels.includes(nodeLevel)
+		const level = hasLevel ? nodeLevel : this.options.levels[0]
+
+		return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+	}
+})
+
+export default Heading
--- a/web/components/la-editor/extensions/heading/index.ts
+++ b/web/components/la-editor/extensions/heading/index.ts
@@ -0,0 +1 @@
+export * from "./heading"
--- a/web/components/la-editor/extensions/horizontal-rule/horizontal-rule.ts
+++ b/web/components/la-editor/extensions/horizontal-rule/horizontal-rule.ts
@@ -0,0 +1,18 @@
+/*
+ * Wrap the horizontal rule in a div element.
+ * Also add a keyboard shortcut to insert a horizontal rule.
+ */
+import { HorizontalRule as TiptapHorizontalRule } from "@tiptap/extension-horizontal-rule"
+
+export const HorizontalRule = TiptapHorizontalRule.extend({
+	addKeyboardShortcuts() {
+		return {
+			"Mod-Alt--": () =>
+				this.editor.commands.insertContent({
+					type: this.name
+				})
+		}
+	}
+})
+
+export default HorizontalRule
--- a/web/components/la-editor/extensions/horizontal-rule/index.ts
+++ b/web/components/la-editor/extensions/horizontal-rule/index.ts
@@ -0,0 +1 @@
+export * from "./horizontal-rule"
--- a/web/components/la-editor/extensions/index.ts
+++ b/web/components/la-editor/extensions/index.ts
@@ -0,0 +1,43 @@
+import { StarterKit } from "./starter-kit"
+import { TaskList } from "./task-list"
+import { TaskItem } from "./task-item"
+import { HorizontalRule } from "./horizontal-rule"
+import { Blockquote } from "./blockquote/blockquote"
+import { SlashCommand } from "./slash-command"
+import { Heading } from "./heading"
+import { Link } from "./link"
+import { CodeBlockLowlight } from "./code-block-lowlight"
+import { Selection } from "./selection"
+import { Code } from "./code"
+import { Paragraph } from "./paragraph"
+import { BulletList } from "./bullet-list"
+import { OrderedList } from "./ordered-list"
+import { Dropcursor } from "./dropcursor"
+
+export interface ExtensionOptions {
+	placeholder?: string
+}
+
+export const createExtensions = ({ placeholder = "Start typing..." }: ExtensionOptions) => [
+	Heading,
+	Code,
+	Link,
+	TaskList,
+	TaskItem,
+	Selection,
+	Paragraph,
+	Dropcursor,
+	Blockquote,
+	BulletList,
+	OrderedList,
+	SlashCommand,
+	HorizontalRule,
+	CodeBlockLowlight,
+	StarterKit.configure({
+		placeholder: {
+			placeholder: () => placeholder
+		}
+	})
+]
+
+export default createExtensions
--- a/web/components/la-editor/extensions/link/index.ts
+++ b/web/components/la-editor/extensions/link/index.ts
@@ -0,0 +1 @@
+export * from "./link"
--- a/web/components/la-editor/extensions/link/link.ts
+++ b/web/components/la-editor/extensions/link/link.ts
@@ -0,0 +1,90 @@
+import { mergeAttributes } from "@tiptap/core"
+import TiptapLink from "@tiptap/extension-link"
+import { EditorView } from "@tiptap/pm/view"
+import { getMarkRange } from "@tiptap/core"
+import { Plugin, TextSelection } from "@tiptap/pm/state"
+
+export const Link = TiptapLink.extend({
+	/*
+	 * Determines whether typing next to a link automatically becomes part of the link.
+	 * In this case, we dont want any characters to be included as part of the link.
+	 */
+	inclusive: false,
+
+	/*
+	 * Match all <a> elements that have an href attribute, except for:
+	 * - <a> elements with a data-type attribute set to button
+	 * - <a> elements with an href attribute that contains 'javascript:'
+	 */
+	parseHTML() {
+		return [{ tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])' }]
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+	},
+
+	addOptions() {
+		return {
+			...this.parent?.(),
+			openOnClick: false,
+			HTMLAttributes: {
+				class: "link"
+			}
+		}
+	},
+
+	addProseMirrorPlugins() {
+		const { editor } = this
+
+		return [
+			...(this.parent?.() || []),
+			new Plugin({
+				props: {
+					handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
+						const { selection } = editor.state
+
+						/*
+						 * Handles the 'Escape' key press when there's a selection within the link.
+						 * This will move the cursor to the end of the link.
+						 */
+						if (event.key === "Escape" && selection.empty !== true) {
+							console.log("Link handleKeyDown")
+							editor.commands.focus(selection.to, { scrollIntoView: false })
+						}
+
+						return false
+					},
+					handleClick(view, pos) {
+						/*
+						 * Marks the entire link when the user clicks on it.
+						 */
+
+						const { schema, doc, tr } = view.state
+						const range = getMarkRange(doc.resolve(pos), schema.marks.link)
+
+						if (!range) {
+							return
+						}
+
+						const { from, to } = range
+						const start = Math.min(from, to)
+						const end = Math.max(from, to)
+
+						if (pos < start || pos > end) {
+							return
+						}
+
+						const $start = doc.resolve(start)
+						const $end = doc.resolve(end)
+						const transaction = tr.setSelection(new TextSelection($start, $end))
+
+						view.dispatch(transaction)
+					}
+				}
+			})
+		]
+	}
+})
+
+export default Link
--- a/web/components/la-editor/extensions/ordered-list/index.ts
+++ b/web/components/la-editor/extensions/ordered-list/index.ts
@@ -0,0 +1 @@
+export * from "./ordered-list"
--- a/web/components/la-editor/extensions/ordered-list/ordered-list.ts
+++ b/web/components/la-editor/extensions/ordered-list/ordered-list.ts
@@ -0,0 +1,14 @@
+import { OrderedList as TiptapOrderedList } from "@tiptap/extension-ordered-list"
+
+export const OrderedList = TiptapOrderedList.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			HTMLAttributes: {
+				class: "list-node"
+			}
+		}
+	}
+})
+
+export default OrderedList
--- a/web/components/la-editor/extensions/paragraph/index.ts
+++ b/web/components/la-editor/extensions/paragraph/index.ts
@@ -0,0 +1 @@
+export * from "./paragraph"
--- a/web/components/la-editor/extensions/paragraph/paragraph.ts
+++ b/web/components/la-editor/extensions/paragraph/paragraph.ts
@@ -0,0 +1,14 @@
+import { Paragraph as TiptapParagraph } from "@tiptap/extension-paragraph"
+
+export const Paragraph = TiptapParagraph.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			HTMLAttributes: {
+				class: "text-node"
+			}
+		}
+	}
+})
+
+export default Paragraph
--- a/web/components/la-editor/extensions/selection/index.ts
+++ b/web/components/la-editor/extensions/selection/index.ts
@@ -0,0 +1 @@
+export * from "./selection"
--- a/web/components/la-editor/extensions/selection/selection.ts
+++ b/web/components/la-editor/extensions/selection/selection.ts
@@ -0,0 +1,36 @@
+import { Extension } from "@tiptap/core"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
+import { Decoration, DecorationSet } from "@tiptap/pm/view"
+
+export const Selection = Extension.create({
+	name: "selection",
+
+	addProseMirrorPlugins() {
+		const { editor } = this
+
+		return [
+			new Plugin({
+				key: new PluginKey("selection"),
+				props: {
+					decorations(state) {
+						if (state.selection.empty) {
+							return null
+						}
+
+						if (editor.isFocused === true) {
+							return null
+						}
+
+						return DecorationSet.create(state.doc, [
+							Decoration.inline(state.selection.from, state.selection.to, {
+								class: "selection"
+							})
+						])
+					}
+				}
+			})
+		]
+	}
+})
+
+export default Selection
--- a/web/components/la-editor/extensions/slash-command/groups.ts
+++ b/web/components/la-editor/extensions/slash-command/groups.ts
@@ -0,0 +1,122 @@
+import { Group } from "./types"
+
+export const GROUPS: Group[] = [
+	{
+		name: "format",
+		title: "Format",
+		commands: [
+			{
+				name: "heading1",
+				label: "Heading 1",
+				iconName: "Heading1",
+				description: "High priority section title",
+				aliases: ["h1"],
+				shortcuts: ["mod", "alt", "1"],
+				action: editor => {
+					editor.chain().focus().setHeading({ level: 1 }).run()
+				}
+			},
+			{
+				name: "heading2",
+				label: "Heading 2",
+				iconName: "Heading2",
+				description: "Medium priority section title",
+				aliases: ["h2"],
+				shortcuts: ["mod", "alt", "2"],
+				action: editor => {
+					editor.chain().focus().setHeading({ level: 2 }).run()
+				}
+			},
+			{
+				name: "heading3",
+				label: "Heading 3",
+				iconName: "Heading3",
+				description: "Low priority section title",
+				aliases: ["h3"],
+				shortcuts: ["mod", "alt", "3"],
+				action: editor => {
+					editor.chain().focus().setHeading({ level: 3 }).run()
+				}
+			}
+		]
+	},
+	{
+		name: "list",
+		title: "List",
+		commands: [
+			{
+				name: "bulletList",
+				label: "Bullet List",
+				iconName: "List",
+				description: "Unordered list of items",
+				aliases: ["ul"],
+				shortcuts: ["mod", "shift", "8"],
+				action: editor => {
+					editor.chain().focus().toggleBulletList().run()
+				}
+			},
+			{
+				name: "numberedList",
+				label: "Numbered List",
+				iconName: "ListOrdered",
+				description: "Ordered list of items",
+				aliases: ["ol"],
+				shortcuts: ["mod", "shift", "7"],
+				action: editor => {
+					editor.chain().focus().toggleOrderedList().run()
+				}
+			},
+			{
+				name: "taskList",
+				label: "Task List",
+				iconName: "ListTodo",
+				description: "Task list with todo items",
+				aliases: ["todo"],
+				shortcuts: ["mod", "shift", "8"],
+				action: editor => {
+					editor.chain().focus().toggleTaskList().run()
+				}
+			}
+		]
+	},
+	{
+		name: "insert",
+		title: "Insert",
+		commands: [
+			{
+				name: "codeBlock",
+				label: "Code Block",
+				iconName: "SquareCode",
+				description: "Code block with syntax highlighting",
+				shortcuts: ["mod", "alt", "c"],
+				shouldBeHidden: editor => editor.isActive("columns"),
+				action: editor => {
+					editor.chain().focus().setCodeBlock().run()
+				}
+			},
+			{
+				name: "horizontalRule",
+				label: "Divider",
+				iconName: "Divide",
+				description: "Insert a horizontal divider",
+				aliases: ["hr"],
+				shortcuts: ["mod", "shift", "-"],
+				action: editor => {
+					editor.chain().focus().setHorizontalRule().run()
+				}
+			},
+			{
+				name: "blockquote",
+				label: "Blockquote",
+				iconName: "Quote",
+				description: "Element for quoting",
+				shortcuts: ["mod", "shift", "b"],
+				action: editor => {
+					editor.chain().focus().setBlockquote().run()
+				}
+			}
+		]
+	}
+]
+
+export default GROUPS
--- a/web/components/la-editor/extensions/slash-command/index.ts
+++ b/web/components/la-editor/extensions/slash-command/index.ts
@@ -0,0 +1 @@
+export * from "./slash-command"
--- a/web/components/la-editor/extensions/slash-command/menu-list.tsx
+++ b/web/components/la-editor/extensions/slash-command/menu-list.tsx
@@ -0,0 +1,155 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+
+import { Command, MenuListProps } from "./types"
+import { getShortcutKeys } from "../../lib/utils"
+import { Icon } from "../../components/ui/icon"
+import { PopoverWrapper } from "../../components/ui/popover-wrapper"
+import { Shortcut } from "../../components/ui/shortcut"
+
+export const MenuList = React.forwardRef((props: MenuListProps, ref) => {
+	const scrollContainer = React.useRef<HTMLDivElement>(null)
+	const activeItem = React.useRef<HTMLButtonElement>(null)
+	const [selectedGroupIndex, setSelectedGroupIndex] = React.useState(0)
+	const [selectedCommandIndex, setSelectedCommandIndex] = React.useState(0)
+
+	// Anytime the groups change, i.e. the user types to narrow it down, we want to
+	// reset the current selection to the first menu item
+	React.useEffect(() => {
+		setSelectedGroupIndex(0)
+		setSelectedCommandIndex(0)
+	}, [props.items])
+
+	const selectItem = React.useCallback(
+		(groupIndex: number, commandIndex: number) => {
+			const command = props.items[groupIndex].commands[commandIndex]
+			props.command(command)
+		},
+		[props]
+	)
+
+	React.useImperativeHandle(ref, () => ({
+		onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {
+			if (event.key === "ArrowDown") {
+				if (!props.items.length) {
+					return false
+				}
+
+				const commands = props.items[selectedGroupIndex].commands
+
+				let newCommandIndex = selectedCommandIndex + 1
+				let newGroupIndex = selectedGroupIndex
+
+				if (commands.length - 1 < newCommandIndex) {
+					newCommandIndex = 0
+					newGroupIndex = selectedGroupIndex + 1
+				}
+
+				if (props.items.length - 1 < newGroupIndex) {
+					newGroupIndex = 0
+				}
+
+				setSelectedCommandIndex(newCommandIndex)
+				setSelectedGroupIndex(newGroupIndex)
+
+				return true
+			}
+
+			if (event.key === "ArrowUp") {
+				if (!props.items.length) {
+					return false
+				}
+
+				let newCommandIndex = selectedCommandIndex - 1
+				let newGroupIndex = selectedGroupIndex
+
+				if (newCommandIndex < 0) {
+					newGroupIndex = selectedGroupIndex - 1
+					newCommandIndex = props.items[newGroupIndex]?.commands.length - 1 || 0
+				}
+
+				if (newGroupIndex < 0) {
+					newGroupIndex = props.items.length - 1
+					newCommandIndex = props.items[newGroupIndex].commands.length - 1
+				}
+
+				setSelectedCommandIndex(newCommandIndex)
+				setSelectedGroupIndex(newGroupIndex)
+
+				return true
+			}
+
+			if (event.key === "Enter") {
+				if (!props.items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
+					return false
+				}
+
+				selectItem(selectedGroupIndex, selectedCommandIndex)
+
+				return true
+			}
+
+			return false
+		}
+	}))
+
+	React.useEffect(() => {
+		if (activeItem.current && scrollContainer.current) {
+			const offsetTop = activeItem.current.offsetTop
+			const offsetHeight = activeItem.current.offsetHeight
+
+			scrollContainer.current.scrollTop = offsetTop - offsetHeight
+		}
+	}, [selectedCommandIndex, selectedGroupIndex])
+
+	const createCommandClickHandler = React.useCallback(
+		(groupIndex: number, commandIndex: number) => {
+			return () => {
+				selectItem(groupIndex, commandIndex)
+			}
+		},
+		[selectItem]
+	)
+
+	if (!props.items.length) {
+		return null
+	}
+
+	return (
+		<PopoverWrapper ref={scrollContainer} className="flex max-h-[min(80vh,24rem)] flex-col overflow-auto p-1">
+			{props.items.map((group, groupIndex: number) => (
+				<React.Fragment key={group.title}>
+					{group.commands.map((command: Command, commandIndex: number) => (
+						<Button
+							key={command.label}
+							variant="ghost"
+							onClick={createCommandClickHandler(groupIndex, commandIndex)}
+							className={cn("relative w-full justify-between gap-2 px-3.5 py-1.5 font-normal", {
+								"bg-accent text-accent-foreground":
+									selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex
+							})}
+						>
+							<Icon name={command.iconName} />
+							<span className="truncate text-sm">{command.label}</span>
+							<div className="flex flex-auto flex-row"></div>
+							<Shortcut.Wrapper ariaLabel={getShortcutKeys(command.shortcuts)}>
+								{command.shortcuts.map(shortcut => (
+									<Shortcut.Key shortcut={shortcut} key={shortcut} />
+								))}
+							</Shortcut.Wrapper>
+						</Button>
+					))}
+					{groupIndex !== props.items.length - 1 && <Separator className="my-1.5" />}
+				</React.Fragment>
+			))}
+		</PopoverWrapper>
+	)
+})
+
+MenuList.displayName = "MenuList"
+
+export default MenuList
--- a/web/components/la-editor/extensions/slash-command/slash-command.ts
+++ b/web/components/la-editor/extensions/slash-command/slash-command.ts
@@ -0,0 +1,234 @@
+import { Editor, Extension } from "@tiptap/core"
+import { ReactRenderer } from "@tiptap/react"
+import Suggestion, { SuggestionProps, SuggestionKeyDownProps } from "@tiptap/suggestion"
+import { PluginKey } from "@tiptap/pm/state"
+import tippy from "tippy.js"
+
+import { GROUPS } from "./groups"
+import { MenuList } from "./menu-list"
+
+const EXTENSION_NAME = "slashCommand"
+
+let popup: any
+
+export const SlashCommand = Extension.create({
+	name: EXTENSION_NAME,
+	priority: 200,
+
+	onCreate() {
+		popup = tippy("body", {
+			interactive: true,
+			trigger: "manual",
+			placement: "bottom-start",
+			theme: "slash-command",
+			maxWidth: "16rem",
+			offset: [16, 8],
+			popperOptions: {
+				strategy: "fixed",
+				modifiers: [{ name: "flip", enabled: false }]
+			}
+		})
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			Suggestion({
+				editor: this.editor,
+				char: "/",
+				allowSpaces: true,
+				startOfLine: true,
+				pluginKey: new PluginKey(EXTENSION_NAME),
+
+				allow: ({ state, range }) => {
+					const $from = state.doc.resolve(range.from)
+					const isRootDepth = $from.depth === 1
+					const isParagraph = $from.parent.type.name === "paragraph"
+					const isStartOfNode = $from.parent.textContent?.charAt(0) === "/"
+					const isInColumn = this.editor.isActive("column")
+
+					const afterContent = $from.parent.textContent?.substring($from.parent.textContent?.indexOf("/"))
+					const isValidAfterContent = !afterContent?.endsWith("  ")
+
+					return (
+						((isRootDepth && isParagraph && isStartOfNode) || (isInColumn && isParagraph && isStartOfNode)) &&
+						isValidAfterContent
+					)
+				},
+
+				command: ({ editor, props }: { editor: Editor; props: any }) => {
+					const { view, state } = editor
+					const { $head, $from } = view.state.selection
+
+					const end = $from.pos
+					const from = $head?.nodeBefore
+						? end - ($head.nodeBefore.text?.substring($head.nodeBefore.text?.indexOf("/")).length ?? 0)
+						: $from.start()
+
+					const tr = state.tr.deleteRange(from, end)
+					view.dispatch(tr)
+
+					props.action(editor)
+					view.focus()
+				},
+
+				items: ({ query }: { query: string }) => {
+					return GROUPS.map(group => ({
+						...group,
+						commands: group.commands
+							.filter(item => {
+								const labelNormalized = item.label.toLowerCase().trim()
+								const queryNormalized = query.toLowerCase().trim()
+
+								if (item.aliases) {
+									const aliases = item.aliases.map(alias => alias.toLowerCase().trim())
+									return labelNormalized.includes(queryNormalized) || aliases.includes(queryNormalized)
+								}
+
+								return labelNormalized.includes(queryNormalized)
+							})
+							.filter(command => (command.shouldBeHidden ? !command.shouldBeHidden(this.editor) : true))
+							.map(command => ({
+								...command,
+								isEnabled: true
+							}))
+					})).filter(group => group.commands.length > 0)
+				},
+
+				render: () => {
+					let component: any
+					let scrollHandler: (() => void) | null = null
+
+					return {
+						onStart: (props: SuggestionProps) => {
+							component = new ReactRenderer(MenuList, {
+								props,
+								editor: props.editor
+							})
+
+							const { view } = props.editor
+							const editorNode = view.dom as HTMLElement
+
+							const getReferenceClientRect = () => {
+								if (!props.clientRect) {
+									return props.editor.storage[EXTENSION_NAME].rect
+								}
+
+								const rect = props.clientRect()
+
+								if (!rect) {
+									return props.editor.storage[EXTENSION_NAME].rect
+								}
+
+								let yPos = rect.y
+
+								if (rect.top + component.element.offsetHeight + 40 > window.innerHeight) {
+									const diff = rect.top + component.element.offsetHeight - window.innerHeight + 40
+									yPos = rect.y - diff
+								}
+
+								const editorXOffset = editorNode.getBoundingClientRect().x
+								return new DOMRect(rect.x, yPos, rect.width, rect.height)
+							}
+
+							scrollHandler = () => {
+								popup?.[0].setProps({
+									getReferenceClientRect
+								})
+							}
+
+							view.dom.parentElement?.addEventListener("scroll", scrollHandler)
+
+							popup?.[0].setProps({
+								getReferenceClientRect,
+								appendTo: () => document.body,
+								content: component.element
+							})
+
+							popup?.[0].show()
+						},
+
+						onUpdate(props: SuggestionProps) {
+							component.updateProps(props)
+
+							const { view } = props.editor
+							const editorNode = view.dom as HTMLElement
+
+							const getReferenceClientRect = () => {
+								if (!props.clientRect) {
+									return props.editor.storage[EXTENSION_NAME].rect
+								}
+
+								const rect = props.clientRect()
+
+								if (!rect) {
+									return props.editor.storage[EXTENSION_NAME].rect
+								}
+
+								return new DOMRect(rect.x, rect.y, rect.width, rect.height)
+							}
+
+							let scrollHandler = () => {
+								popup?.[0].setProps({
+									getReferenceClientRect
+								})
+							}
+
+							view.dom.parentElement?.addEventListener("scroll", scrollHandler)
+
+							props.editor.storage[EXTENSION_NAME].rect = props.clientRect
+								? getReferenceClientRect()
+								: {
+										width: 0,
+										height: 0,
+										left: 0,
+										top: 0,
+										right: 0,
+										bottom: 0
+									}
+							popup?.[0].setProps({
+								getReferenceClientRect
+							})
+						},
+
+						onKeyDown(props: SuggestionKeyDownProps) {
+							if (props.event.key === "Escape") {
+								popup?.[0].hide()
+								return true
+							}
+
+							if (!popup?.[0].state.isShown) {
+								popup?.[0].show()
+							}
+
+							return component.ref?.onKeyDown(props)
+						},
+
+						onExit(props) {
+							popup?.[0].hide()
+							if (scrollHandler) {
+								const { view } = props.editor
+								view.dom.parentElement?.removeEventListener("scroll", scrollHandler)
+							}
+							component.destroy()
+						}
+					}
+				}
+			})
+		]
+	},
+
+	addStorage() {
+		return {
+			rect: {
+				width: 0,
+				height: 0,
+				left: 0,
+				top: 0,
+				right: 0,
+				bottom: 0
+			}
+		}
+	}
+})
+
+export default SlashCommand
--- a/web/components/la-editor/extensions/slash-command/types.ts
+++ b/web/components/la-editor/extensions/slash-command/types.ts
@@ -0,0 +1,26 @@
+import { Editor } from "@tiptap/core"
+
+import { icons } from "lucide-react"
+
+export interface Group {
+	name: string
+	title: string
+	commands: Command[]
+}
+
+export interface Command {
+	name: string
+	label: string
+	description: string
+	aliases?: string[]
+	shortcuts: string[]
+	iconName: keyof typeof icons
+	action: (editor: Editor) => void
+	shouldBeHidden?: (editor: Editor) => boolean
+}
+
+export interface MenuListProps {
+	editor: Editor
+	items: Group[]
+	command: (command: Command) => void
+}
--- a/web/components/la-editor/extensions/starter-kit.ts
+++ b/web/components/la-editor/extensions/starter-kit.ts
@@ -0,0 +1,153 @@
+import { Extension } from "@tiptap/core"
+import { Bold, BoldOptions } from "@tiptap/extension-bold"
+import { Document } from "@tiptap/extension-document"
+import { Gapcursor } from "@tiptap/extension-gapcursor"
+import { HardBreak, HardBreakOptions } from "@tiptap/extension-hard-break"
+import { Italic, ItalicOptions } from "@tiptap/extension-italic"
+import { ListItem, ListItemOptions } from "@tiptap/extension-list-item"
+import { Strike, StrikeOptions } from "@tiptap/extension-strike"
+import { Text } from "@tiptap/extension-text"
+import { FocusClasses, FocusOptions } from "@tiptap/extension-focus"
+import { Typography, TypographyOptions } from "@tiptap/extension-typography"
+import { Placeholder, PlaceholderOptions } from "@tiptap/extension-placeholder"
+import { History, HistoryOptions } from "@tiptap/extension-history"
+
+export interface StarterKitOptions {
+	/**
+	 * If set to false, the bold extension will not be registered
+	 * @example bold: false
+	 */
+	bold: Partial<BoldOptions> | false
+
+	/**
+	 * If set to false, the document extension will not be registered
+	 * @example document: false
+	 */
+	document: false
+
+	/**
+	 * If set to false, the gapcursor extension will not be registered
+	 * @example gapcursor: false
+	 */
+	gapcursor: false
+
+	/**
+	 * If set to false, the hardBreak extension will not be registered
+	 * @example hardBreak: false
+	 */
+	hardBreak: Partial<HardBreakOptions> | false
+
+	/**
+	 * If set to false, the history extension will not be registered
+	 * @example history: false
+	 */
+	history: Partial<HistoryOptions> | false
+
+	/**
+	 * If set to false, the italic extension will not be registered
+	 * @example italic: false
+	 */
+	italic: Partial<ItalicOptions> | false
+
+	/**
+	 * If set to false, the listItem extension will not be registered
+	 * @example listItem: false
+	 */
+	listItem: Partial<ListItemOptions> | false
+
+	/**
+	 * If set to false, the strike extension will not be registered
+	 * @example strike: false
+	 */
+	strike: Partial<StrikeOptions> | false
+
+	/**
+	 * If set to false, the text extension will not be registered
+	 * @example text: false
+	 */
+	text: false
+
+	/**
+	 * If set to false, the typography extension will not be registered
+	 * @example typography: false
+	 */
+	typography: Partial<TypographyOptions> | false
+
+	/**
+	 * If set to false, the placeholder extension will not be registered
+	 * @example placeholder: false
+	 */
+
+	placeholder: Partial<PlaceholderOptions> | false
+
+	/**
+	 * If set to false, the focus extension will not be registered
+	 * @example focus: false
+	 */
+	focus: Partial<FocusOptions> | false
+}
+
+/**
+ * The starter kit is a collection of essential editor extensions.
+ *
+ * It’s a good starting point for building your own editor.
+ */
+export const StarterKit = Extension.create<StarterKitOptions>({
+	name: "starterKit",
+
+	addExtensions() {
+		const extensions = []
+
+		if (this.options.bold !== false) {
+			extensions.push(Bold.configure(this.options?.bold))
+		}
+
+		if (this.options.document !== false) {
+			extensions.push(Document.configure(this.options?.document))
+		}
+
+		if (this.options.gapcursor !== false) {
+			extensions.push(Gapcursor.configure(this.options?.gapcursor))
+		}
+
+		if (this.options.hardBreak !== false) {
+			extensions.push(HardBreak.configure(this.options?.hardBreak))
+		}
+
+		if (this.options.history !== false) {
+			extensions.push(History.configure(this.options?.history))
+		}
+
+		if (this.options.italic !== false) {
+			extensions.push(Italic.configure(this.options?.italic))
+		}
+
+		if (this.options.listItem !== false) {
+			extensions.push(ListItem.configure(this.options?.listItem))
+		}
+
+		if (this.options.strike !== false) {
+			extensions.push(Strike.configure(this.options?.strike))
+		}
+
+		if (this.options.text !== false) {
+			extensions.push(Text.configure(this.options?.text))
+		}
+
+		if (this.options.typography !== false) {
+			extensions.push(Typography.configure(this.options?.typography))
+		}
+
+		if (this.options.placeholder !== false) {
+			extensions.push(Placeholder.configure(this.options?.placeholder))
+		}
+
+		if (this.options.focus !== false) {
+			extensions.push(FocusClasses.configure(this.options?.focus))
+		}
+
+		return extensions
+	}
+})
+
+export default StarterKit
--- a/web/components/la-editor/extensions/task-item/components/task-item-view.tsx
+++ b/web/components/la-editor/extensions/task-item/components/task-item-view.tsx
@@ -0,0 +1,50 @@
+import { NodeViewContent, Editor, NodeViewWrapper } from "@tiptap/react"
+import { Icon } from "../../../components/ui/icon"
+import { useCallback } from "react"
+import { Node as ProseMirrorNode } from "@tiptap/pm/model"
+import { Node } from "@tiptap/core"
+
+interface TaskItemProps {
+	editor: Editor
+	node: ProseMirrorNode
+	updateAttributes: (attrs: Record<string, any>) => void
+	extension: Node
+}
+
+export const TaskItemView: React.FC<TaskItemProps> = ({ node, updateAttributes, editor, extension }) => {
+	const handleChange = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			const checked = event.target.checked
+
+			if (!editor.isEditable && !extension.options.onReadOnlyChecked) {
+				return
+			}
+
+			if (editor.isEditable) {
+				updateAttributes({ checked })
+			} else if (extension.options.onReadOnlyChecked) {
+				if (!extension.options.onReadOnlyChecked(node, checked)) {
+					event.target.checked = !checked
+				}
+			}
+		},
+		[editor.isEditable, extension.options, node, updateAttributes]
+	)
+
+	return (
+		<NodeViewWrapper as="li" data-type="taskItem" data-checked={node.attrs.checked}>
+			<div className="taskItem-checkbox-container">
+				<Icon name="GripVertical" data-drag-handle className="taskItem-drag-handle" />
+
+				<label>
+					<input type="checkbox" checked={node.attrs.checked} onChange={handleChange} className="taskItem-checkbox" />
+				</label>
+			</div>
+			<div className="taskItem-content">
+				<NodeViewContent />
+			</div>
+		</NodeViewWrapper>
+	)
+}
+
+export default TaskItemView
--- a/web/components/la-editor/extensions/task-item/index.ts
+++ b/web/components/la-editor/extensions/task-item/index.ts
@@ -0,0 +1 @@
+export * from "./task-item"
--- a/web/components/la-editor/extensions/task-item/task-item.ts
+++ b/web/components/la-editor/extensions/task-item/task-item.ts
@@ -0,0 +1,64 @@
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { mergeAttributes } from "@tiptap/core"
+import { TaskItemView } from "./components/task-item-view"
+import { TaskItem as TiptapTaskItem } from "@tiptap/extension-task-item"
+
+export const TaskItem = TiptapTaskItem.extend({
+	name: "taskItem",
+
+	draggable: true,
+
+	addOptions() {
+		return {
+			...this.parent?.(),
+			nested: true
+		}
+	},
+
+	addAttributes() {
+		return {
+			checked: {
+				default: false,
+				keepOnSplit: false,
+				parseHTML: element => {
+					const dataChecked = element.getAttribute("data-checked")
+					return dataChecked === "" || dataChecked === "true"
+				},
+				renderHTML: attributes => ({
+					"data-checked": attributes.checked
+				})
+			}
+		}
+	},
+
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			"li",
+			mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+				"data-type": this.name
+			}),
+			[
+				"div",
+				{ class: "taskItem-checkbox-container" },
+				[
+					"label",
+					[
+						"input",
+						{
+							type: "checkbox",
+							checked: node.attrs.checked ? "checked" : null,
+							class: "taskItem-checkbox"
+						}
+					]
+				]
+			],
+			["div", { class: "taskItem-content" }, 0]
+		]
+	},
+
+	addNodeView() {
+		return ReactNodeViewRenderer(TaskItemView, {
+			as: "span"
+		})
+	}
+})
--- a/web/components/la-editor/extensions/task-list/index.ts
+++ b/web/components/la-editor/extensions/task-list/index.ts
@@ -0,0 +1 @@
+export * from "./task-list"
--- a/web/components/la-editor/extensions/task-list/task-list.ts
+++ b/web/components/la-editor/extensions/task-list/task-list.ts
@@ -0,0 +1,12 @@
+import { TaskList as TiptapTaskList } from "@tiptap/extension-task-list"
+
+export const TaskList = TiptapTaskList.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			HTMLAttributes: {
+				class: "list-node"
+			}
+		}
+	}
+})
--- a/web/components/la-editor/hooks/use-text-menu-commands.ts
+++ b/web/components/la-editor/hooks/use-text-menu-commands.ts
@@ -0,0 +1,30 @@
+import { Editor } from "@tiptap/react"
+import { useCallback } from "react"
+
+export const useTextmenuCommands = (editor: Editor) => {
+	const onBold = useCallback(() => editor.chain().focus().toggleBold().run(), [editor])
+	const onItalic = useCallback(() => editor.chain().focus().toggleItalic().run(), [editor])
+	const onStrike = useCallback(() => editor.chain().focus().toggleStrike().run(), [editor])
+	const onCode = useCallback(() => editor.chain().focus().toggleCode().run(), [editor])
+	const onCodeBlock = useCallback(() => editor.chain().focus().toggleCodeBlock().run(), [editor])
+	const onQuote = useCallback(() => editor.chain().focus().toggleBlockquote().run(), [editor])
+	const onLink = useCallback(
+		(url: string, inNewTab?: boolean) =>
+			editor
+				.chain()
+				.focus()
+				.setLink({ href: url, target: inNewTab ? "_blank" : "" })
+				.run(),
+		[editor]
+	)
+
+	return {
+		onBold,
+		onItalic,
+		onStrike,
+		onCode,
+		onCodeBlock,
+		onQuote,
+		onLink
+	}
+}
--- a/web/components/la-editor/hooks/use-text-menu-states.ts
+++ b/web/components/la-editor/hooks/use-text-menu-states.ts
@@ -0,0 +1,34 @@
+import { Editor } from "@tiptap/react"
+import { useCallback } from "react"
+import { ShouldShowProps } from "../types"
+import { isCustomNodeSelected, isTextSelected } from "../lib/utils"
+
+export const useTextmenuStates = (editor: Editor) => {
+	const shouldShow = useCallback(
+		({ view, from }: ShouldShowProps) => {
+			if (!view) {
+				return false
+			}
+
+			const domAtPos = view.domAtPos(from || 0).node as HTMLElement
+			const nodeDOM = view.nodeDOM(from || 0) as HTMLElement
+			const node = nodeDOM || domAtPos
+
+			if (isCustomNodeSelected(editor, node)) {
+				return false
+			}
+
+			return isTextSelected({ editor })
+		},
+		[editor]
+	)
+
+	return {
+		isBold: editor.isActive("bold"),
+		isItalic: editor.isActive("italic"),
+		isStrike: editor.isActive("strike"),
+		isUnderline: editor.isActive("underline"),
+		isCode: editor.isActive("code"),
+		shouldShow
+	}
+}
--- a/web/components/la-editor/index.ts
+++ b/web/components/la-editor/index.ts
@@ -0,0 +1 @@
+export * from "./la-editor"
--- a/web/components/la-editor/la-editor.tsx
+++ b/web/components/la-editor/la-editor.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import * as React from "react"
+import { EditorContent, useEditor } from "@tiptap/react"
+import { Editor, Content } from "@tiptap/core"
+import { useThrottleFn } from "react-use"
+import { BubbleMenu } from "./components/bubble-menu"
+import { createExtensions } from "./extensions"
+import "./styles/index.css"
+import { cn } from "@/lib/utils"
+import { getOutput } from "./lib/utils"
+
+export interface LAEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, "value"> {
+	initialContent?: any
+	output?: "html" | "json" | "text"
+	placeholder?: string
+	editorClassName?: string
+	onUpdate?: (content: Content) => void
+	onBlur?: (content: Content) => void
+	onNewBlock?: (content: Content) => void
+	value?: Content
+	throttleDelay?: number
+}
+
+export interface LAEditorRef {
+	focus: () => void
+}
+
+interface CustomEditor extends Editor {
+	previousBlockCount?: number
+}
+
+export const LAEditor = React.forwardRef<LAEditorRef, LAEditorProps>(
+	(
+		{
+			initialContent,
+			value,
+			placeholder,
+			output = "html",
+			editorClassName,
+			className,
+			onUpdate,
+			onBlur,
+			onNewBlock,
+			throttleDelay = 1000,
+			...props
+		},
+		ref
+	) => {
+		const [content, setContent] = React.useState<Content | undefined>(value)
+		const throttledContent = useThrottleFn(defaultContent => defaultContent, throttleDelay, [content])
+		const [lastThrottledContent, setLastThrottledContent] = React.useState(throttledContent)
+
+		const handleUpdate = React.useCallback(
+			(editor: Editor) => {
+				const newContent = getOutput(editor, output)
+				setContent(newContent)
+
+				const customEditor = editor as CustomEditor
+				const json = customEditor.getJSON()
+
+				if (json.content && Array.isArray(json.content)) {
+					const currentBlockCount = json.content.length
+
+					if (
+						typeof customEditor.previousBlockCount === "number" &&
+						currentBlockCount > customEditor.previousBlockCount
+					) {
+						requestAnimationFrame(() => {
+							onNewBlock?.(newContent)
+						})
+					}
+
+					customEditor.previousBlockCount = currentBlockCount
+				}
+			},
+			[output, onNewBlock]
+		)
+
+		const editor = useEditor({
+			autofocus: false,
+			extensions: createExtensions({ placeholder }),
+			editorProps: {
+				attributes: {
+					autocomplete: "off",
+					autocorrect: "off",
+					autocapitalize: "off",
+					class: editorClassName || ""
+				}
+			},
+			onCreate: ({ editor }) => {
+				if (editor.isEmpty && value) {
+					editor.commands.setContent(value)
+				}
+			},
+			onUpdate: ({ editor }) => handleUpdate(editor),
+			onBlur: ({ editor }) => {
+				requestAnimationFrame(() => {
+					onBlur?.(getOutput(editor, output))
+				})
+			}
+		})
+
+		React.useEffect(() => {
+			if (editor && initialContent) {
+				// https://github.com/ueberdosis/tiptap/issues/3764
+				setTimeout(() => {
+					editor.commands.setContent(initialContent)
+				})
+			}
+		}, [editor, initialContent])
+
+		React.useEffect(() => {
+			if (lastThrottledContent !== throttledContent) {
+				setLastThrottledContent(throttledContent)
+
+				requestAnimationFrame(() => {
+					onUpdate?.(throttledContent!)
+				})
+			}
+		}, [throttledContent, lastThrottledContent, onUpdate])
+
+		React.useImperativeHandle(
+			ref,
+			() => ({
+				focus: () => editor?.commands.focus()
+			}),
+			[editor]
+		)
+
+		if (!editor) {
+			return null
+		}
+
+		return (
+			<div className={cn("la-editor relative flex h-full w-full grow flex-col", className)} {...props}>
+				<EditorContent editor={editor} />
+				<BubbleMenu editor={editor} />
+			</div>
+		)
+	}
+)
+
+LAEditor.displayName = "LAEditor"
+
+export default LAEditor
--- a/web/components/la-editor/lib/utils/index.ts
+++ b/web/components/la-editor/lib/utils/index.ts
@@ -0,0 +1,14 @@
+import { Editor } from "@tiptap/core"
+import { LAEditorProps } from "../../la-editor"
+
+export function getOutput(editor: Editor, output: LAEditorProps["output"]) {
+	if (output === "html") return editor.getHTML()
+	if (output === "json") return editor.getJSON()
+	if (output === "text") return editor.getText()
+	return ""
+}
+
+export * from "./keyboard"
+export * from "./platform"
+export * from "./isCustomNodeSelected"
+export * from "./isTextSelected"
--- a/web/components/la-editor/lib/utils/isCustomNodeSelected.ts
+++ b/web/components/la-editor/lib/utils/isCustomNodeSelected.ts
@@ -0,0 +1,28 @@
+import { Editor } from "@tiptap/react"
+import { Link } from "@/components/la-editor/extensions/link"
+import { HorizontalRule } from "@/components/la-editor/extensions/horizontal-rule"
+
+export const isTableGripSelected = (node: HTMLElement) => {
+	let container = node
+
+	while (container && !["TD", "TH"].includes(container.tagName)) {
+		container = container.parentElement!
+	}
+
+	const gripColumn = container && container.querySelector && container.querySelector("a.grip-column.selected")
+	const gripRow = container && container.querySelector && container.querySelector("a.grip-row.selected")
+
+	if (gripColumn || gripRow) {
+		return true
+	}
+
+	return false
+}
+
+export const isCustomNodeSelected = (editor: Editor, node: HTMLElement) => {
+	const customNodes = [HorizontalRule.name, Link.name]
+
+	return customNodes.some(type => editor.isActive(type)) || isTableGripSelected(node)
+}
+
+export default isCustomNodeSelected
--- a/web/components/la-editor/lib/utils/isTextSelected.ts
+++ b/web/components/la-editor/lib/utils/isTextSelected.ts
@@ -0,0 +1,25 @@
+import { isTextSelection } from "@tiptap/core"
+import { Editor } from "@tiptap/react"
+
+export const isTextSelected = ({ editor }: { editor: Editor }) => {
+	const {
+		state: {
+			doc,
+			selection,
+			selection: { empty, from, to }
+		}
+	} = editor
+
+	// Sometime check for `empty` is not enough.
+	// Doubleclick an empty paragraph returns a node size of 2.
+	// So we check also for an empty text size.
+	const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(selection)
+
+	if (empty || isEmptyTextBlock || !editor.isEditable) {
+		return false
+	}
+
+	return true
+}
+
+export default isTextSelected
--- a/web/components/la-editor/lib/utils/keyboard.ts
+++ b/web/components/la-editor/lib/utils/keyboard.ts
@@ -0,0 +1,25 @@
+import { isMacOS } from "./platform"
+
+export const getShortcutKey = (key: string) => {
+	const lowercaseKey = key.toLowerCase()
+	const macOS = isMacOS()
+
+	switch (lowercaseKey) {
+		case "mod":
+			return macOS ? "⌘" : "Ctrl"
+		case "alt":
+			return macOS ? "⌥" : "Alt"
+		case "shift":
+			return macOS ? "⇧" : "Shift"
+		default:
+			return key
+	}
+}
+
+export const getShortcutKeys = (keys: string | string[], separator: string = "") => {
+	const keyArray = Array.isArray(keys) ? keys : keys.split(/\s+/)
+	const shortcutKeys = keyArray.map(getShortcutKey)
+	return shortcutKeys.join(separator)
+}
+
+export default { getShortcutKey, getShortcutKeys }
--- a/web/components/la-editor/lib/utils/platform.ts
+++ b/web/components/la-editor/lib/utils/platform.ts
@@ -0,0 +1,46 @@
+export interface NavigatorWithUserAgentData extends Navigator {
+	userAgentData?: {
+		brands: { brand: string; version: string }[]
+		mobile: boolean
+		platform: string
+		getHighEntropyValues: (hints: string[]) => Promise<{
+			platform: string
+			platformVersion: string
+			uaFullVersion: string
+		}>
+	}
+}
+
+let isMac: boolean | undefined
+
+const getPlatform = () => {
+	const nav = navigator as NavigatorWithUserAgentData
+	if (nav.userAgentData) {
+		if (nav.userAgentData.platform) {
+			return nav.userAgentData.platform
+		}
+
+		nav.userAgentData
+			.getHighEntropyValues(["platform"])
+			.then(highEntropyValues => {
+				if (highEntropyValues.platform) {
+					return highEntropyValues.platform
+				}
+			})
+			.catch(() => {
+				return navigator.platform || ""
+			})
+	}
+
+	return navigator.platform || ""
+}
+
+export const isMacOS = () => {
+	if (isMac === undefined) {
+		isMac = getPlatform().toLowerCase().includes("mac")
+	}
+
+	return isMac
+}
+
+export default isMacOS
--- a/web/components/la-editor/styles/index.css
+++ b/web/components/la-editor/styles/index.css
@@ -0,0 +1,140 @@
+:root {
+	--la-font-size-regular: 0.9375rem;
+
+	--la-code-background: rgba(8, 43, 120, 0.047);
+	--la-code-color: rgb(212, 212, 212);
+	--la-secondary: rgb(157, 157, 159);
+	--la-pre-background: rgb(236, 236, 236);
+	--la-pre-border: rgb(224, 224, 224);
+	--la-pre-color: rgb(47, 47, 49);
+	--la-hr: rgb(220, 220, 220);
+	--la-drag-handle-hover: rgb(92, 92, 94);
+
+	--hljs-string: rgb(170, 67, 15);
+	--hljs-title: rgb(176, 136, 54);
+	--hljs-comment: rgb(153, 153, 153);
+	--hljs-keyword: rgb(12, 94, 177);
+	--hljs-attr: rgb(58, 146, 188);
+	--hljs-literal: rgb(200, 43, 15);
+	--hljs-name: rgb(37, 151, 146);
+	--hljs-selector-tag: rgb(200, 80, 15);
+	--hljs-number: rgb(61, 160, 103);
+}
+
+.dark .ProseMirror {
+	--la-code-background: rgba(255, 255, 255, 0.075);
+	--la-code-color: rgb(44, 46, 51);
+	--la-secondary: rgb(89, 90, 92);
+	--la-pre-background: rgb(8, 8, 8);
+	--la-pre-border: rgb(35, 37, 42);
+	--la-pre-color: rgb(227, 228, 230);
+	--la-hr: rgb(38, 40, 45);
+	--la-drag-handle-hover: rgb(150, 151, 153);
+
+	--hljs-string: rgb(218, 147, 107);
+	--hljs-title: rgb(241, 213, 157);
+	--hljs-comment: rgb(170, 170, 170);
+	--hljs-keyword: rgb(102, 153, 204);
+	--hljs-attr: rgb(144, 202, 232);
+	--hljs-literal: rgb(242, 119, 122);
+	--hljs-name: rgb(95, 192, 160);
+	--hljs-selector-tag: rgb(232, 199, 133);
+	--hljs-number: rgb(182, 231, 182);
+}
+
+.la-editor .ProseMirror {
+	@apply flex max-w-full flex-1 cursor-text flex-col;
+	@apply z-0 outline-0;
+}
+
+.la-editor .ProseMirror > div.editor {
+	@apply block flex-1 whitespace-pre-wrap;
+}
+
+.la-editor .ProseMirror .block-node:not(:last-child),
+.la-editor .ProseMirror .list-node:not(:last-child),
+.la-editor .ProseMirror .text-node:not(:last-child) {
+	@apply mb-2.5;
+}
+
+.la-editor .ProseMirror ol,
+.la-editor .ProseMirror ul {
+	@apply pl-6;
+}
+
+.la-editor .ProseMirror blockquote,
+.la-editor .ProseMirror dl,
+.la-editor .ProseMirror ol,
+.la-editor .ProseMirror p,
+.la-editor .ProseMirror pre,
+.la-editor .ProseMirror ul {
+	@apply m-0;
+}
+
+.la-editor .ProseMirror li {
+	@apply leading-7;
+}
+
+.la-editor .ProseMirror p {
+	@apply break-words;
+}
+
+.la-editor .ProseMirror li .text-node:has(+ .list-node),
+.la-editor .ProseMirror li > .list-node,
+.la-editor .ProseMirror li > .text-node,
+.la-editor .ProseMirror li p {
+	@apply mb-0;
+}
+
+.la-editor .ProseMirror blockquote {
+	@apply relative pl-3.5;
+}
+
+.la-editor .ProseMirror blockquote::before,
+.la-editor .ProseMirror blockquote.is-empty::before {
+	@apply bg-accent absolute bottom-0 left-0 top-0 h-full w-1 rounded-sm content-[''];
+}
+
+.la-editor .ProseMirror hr {
+	@apply my-3 h-0.5 w-full border-none bg-[var(--la-hr)];
+}
+
+.la-editor .ProseMirror-focused hr.ProseMirror-selectednode {
+	@apply outline-muted-foreground rounded-full outline outline-2 outline-offset-1;
+}
+
+.la-editor .ProseMirror .ProseMirror-gapcursor {
+	@apply pointer-events-none absolute hidden;
+}
+
+.la-editor .ProseMirror .ProseMirror-hideselection {
+	@apply caret-transparent;
+}
+
+.la-editor .ProseMirror.resize-cursor {
+	@apply cursor-col-resize;
+}
+
+.la-editor .ProseMirror .selection {
+	@apply inline-block;
+}
+
+.la-editor .ProseMirror .selection,
+.la-editor .ProseMirror *::selection,
+::selection {
+	@apply bg-primary/40;
+}
+
+/* Override native selection when custom selection is present */
+.la-editor .ProseMirror .selection::selection {
+	background: transparent;
+}
+
+[data-theme="slash-command"] {
+	width: 1000vw;
+}
+
+@import "./partials/code.css";
+@import "./partials/placeholder.css";
+@import "./partials/lists.css";
+@import "./partials/typography.css";
--- a/web/components/la-editor/styles/partials/code.css
+++ b/web/components/la-editor/styles/partials/code.css
@@ -0,0 +1,86 @@
+.la-editor .ProseMirror code.inline {
+	@apply rounded border border-[var(--la-code-color)] bg-[var(--la-code-background)] px-1 py-0.5 text-sm;
+}
+
+.la-editor .ProseMirror pre {
+	@apply relative overflow-auto rounded border font-mono text-sm;
+	@apply border-[var(--la-pre-border)] bg-[var(--la-pre-background)] text-[var(--la-pre-color)];
+	@apply hyphens-none whitespace-pre text-left;
+}
+
+.la-editor .ProseMirror code {
+	@apply break-words leading-[1.7em];
+}
+
+.la-editor .ProseMirror pre code {
+	@apply block overflow-x-auto p-3.5;
+}
+
+.la-editor .ProseMirror pre {
+	.hljs-keyword,
+	.hljs-operator,
+	.hljs-function,
+	.hljs-built_in,
+	.hljs-builtin-name {
+		color: var(--hljs-keyword);
+	}
+
+	.hljs-attr,
+	.hljs-symbol,
+	.hljs-property,
+	.hljs-attribute,
+	.hljs-variable,
+	.hljs-template-variable,
+	.hljs-params {
+		color: var(--hljs-attr);
+	}
+
+	.hljs-name,
+	.hljs-regexp,
+	.hljs-link,
+	.hljs-type,
+	.hljs-addition {
+		color: var(--hljs-name);
+	}
+
+	.hljs-string,
+	.hljs-bullet {
+		color: var(--hljs-string);
+	}
+
+	.hljs-title,
+	.hljs-subst,
+	.hljs-section {
+		color: var(--hljs-title);
+	}
+
+	.hljs-literal,
+	.hljs-type,
+	.hljs-deletion {
+		color: var(--hljs-literal);
+	}
+
+	.hljs-selector-tag,
+	.hljs-selector-id,
+	.hljs-selector-class {
+		color: var(--hljs-selector-tag);
+	}
+
+	.hljs-number {
+		color: var(--hljs-number);
+	}
+
+	.hljs-comment,
+	.hljs-meta,
+	.hljs-quote {
+		color: var(--hljs-comment);
+	}
+
+	.hljs-emphasis {
+		@apply italic;
+	}
+
+	.hljs-strong {
+		@apply font-bold;
+	}
+}
--- a/web/components/la-editor/styles/partials/lists.css
+++ b/web/components/la-editor/styles/partials/lists.css
@@ -0,0 +1,82 @@
+.la-editor div.tiptap p {
+	@apply text-[var(--la-font-size-regular)];
+}
+
+.la-editor .ProseMirror ol {
+	@apply list-decimal;
+}
+
+.la-editor .ProseMirror ol ol {
+	list-style: lower-alpha;
+}
+
+.la-editor .ProseMirror ol ol ol {
+	list-style: lower-roman;
+}
+
+.la-editor .ProseMirror ul {
+	list-style: disc;
+}
+
+.la-editor .ProseMirror ul ul {
+	list-style: circle;
+}
+
+.la-editor .ProseMirror ul ul ul {
+	list-style: square;
+}
+
+.la-editor .ProseMirror ul[data-type="taskList"] {
+	@apply list-none pl-1;
+}
+
+.la-editor .ProseMirror ul[data-type="taskList"] p {
+	@apply m-0;
+}
+
+.la-editor .ProseMirror ul[data-type="taskList"] li > label {
+	@apply mr-2 mt-0.5 flex-none select-none;
+}
+
+.la-editor .ProseMirror li[data-type="taskItem"] {
+	@apply flex flex-row items-start;
+}
+
+.la-editor .ProseMirror li[data-type="taskItem"] .taskItem-checkbox-container {
+	@apply relative pr-2;
+}
+
+.la-editor .ProseMirror .taskItem-drag-handle {
+	@apply absolute -left-5 top-1.5 h-[18px] w-[18px] cursor-move pl-0.5 text-[var(--la-secondary)] opacity-0;
+}
+
+.la-editor
+	.ProseMirror
+	li[data-type="taskItem"]:hover:not(:has(li:hover))
+	> .taskItem-checkbox-container
+	> .taskItem-drag-handle {
+	@apply opacity-100;
+}
+
+.la-editor .ProseMirror .taskItem-drag-handle:hover {
+	@apply text-[var(--la-drag-handle-hover)];
+}
+
+.la-editor .ProseMirror .taskItem-checkbox {
+	fill-opacity: 0;
+	@apply h-3.5 w-3.5 flex-shrink-0 cursor-pointer select-none appearance-none rounded border border-solid border-[var(--la-secondary)] bg-transparent bg-[1px_2px] p-0.5 align-middle transition-colors duration-75 ease-out;
+}
+
+.la-editor .ProseMirror .taskItem-checkbox:checked {
+	@apply border-primary bg-primary bg-no-repeat;
+	background-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E");
+}
+
+.la-editor .ProseMirror .taskItem-content {
+	@apply min-w-0 flex-1;
+}
+
+.la-editor .ProseMirror li[data-checked="true"] .taskItem-content > :not([data-type="taskList"]),
+.la-editor .ProseMirror li[data-checked="true"] .taskItem-content .taskItem-checkbox {
+	@apply opacity-75;
+}
--- a/web/components/la-editor/styles/partials/placeholder.css
+++ b/web/components/la-editor/styles/partials/placeholder.css
@@ -0,0 +1,12 @@
+.la-editor .ProseMirror .is-empty::before {
+	@apply pointer-events-none float-left h-0 w-full text-[var(--la-secondary)];
+}
+
+.la-editor .ProseMirror.ProseMirror-focused > p.has-focus.is-empty::before {
+	content: "Type / for commands...";
+}
+
+.la-editor .ProseMirror > p.is-editor-empty::before {
+	content: attr(data-placeholder);
+	@apply pointer-events-none float-left h-0 text-[var(--la-secondary)];
+}
--- a/web/components/la-editor/styles/partials/typography.css
+++ b/web/components/la-editor/styles/partials/typography.css
@@ -0,0 +1,27 @@
+.la-editor .ProseMirror .heading-node {
+	@apply relative font-semibold;
+}
+
+.la-editor .ProseMirror .heading-node:first-child {
+	@apply mt-0;
+}
+
+.la-editor .ProseMirror h1 {
+	@apply mb-4 mt-[46px] text-[1.375rem] leading-7 tracking-[-0.004375rem];
+}
+
+.la-editor .ProseMirror h2 {
+	@apply mb-3.5 mt-8 text-[1.1875rem] leading-7 tracking-[0.003125rem];
+}
+
+.la-editor .ProseMirror h3 {
+	@apply mb-3 mt-6 text-[1.0625rem] leading-6 tracking-[0.00625rem];
+}
+
+.la-editor .ProseMirror a.link {
+	@apply text-primary cursor-pointer;
+}
+
+.la-editor .ProseMirror a.link:hover {
+	@apply underline;
+}
--- a/web/components/la-editor/types.ts
+++ b/web/components/la-editor/types.ts
@@ -0,0 +1,20 @@
+import React from "react"
+import { Editor as CoreEditor } from "@tiptap/core"
+import { Editor } from "@tiptap/react"
+import { EditorState } from "@tiptap/pm/state"
+import { EditorView } from "@tiptap/pm/view"
+
+export interface MenuProps {
+	editor: Editor
+	appendTo?: React.RefObject<any>
+	shouldHide?: boolean
+}
+
+export interface ShouldShowProps {
+	editor?: CoreEditor
+	view: EditorView
+	state?: EditorState
+	oldState?: EditorState
+	from?: number
+	to?: number
+}