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>

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

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

web/components/la-editor/extensions/bullet-list/index.ts

@@ -0,0 +1 @@
+export * from "./bullet-list"

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

web/components/la-editor/extensions/code-block-lowlight/index.ts

@@ -0,0 +1 @@
+export * from "./code-block-lowlight"

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

web/components/la-editor/extensions/code/index.ts

@@ -0,0 +1 @@
+export * from "./code"

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

web/components/la-editor/extensions/dropcursor/index.ts

@@ -0,0 +1 @@
+export * from "./dropcursor"

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

web/components/la-editor/extensions/heading/index.ts

@@ -0,0 +1 @@
+export * from "./heading"

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

web/components/la-editor/extensions/horizontal-rule/index.ts

@@ -0,0 +1 @@
+export * from "./horizontal-rule"

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

web/components/la-editor/extensions/link/index.ts

@@ -0,0 +1 @@
+export * from "./link"

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

web/components/la-editor/extensions/ordered-list/index.ts

@@ -0,0 +1 @@
+export * from "./ordered-list"

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

web/components/la-editor/extensions/paragraph/index.ts

@@ -0,0 +1 @@
+export * from "./paragraph"

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

web/components/la-editor/extensions/selection/index.ts

@@ -0,0 +1 @@
+export * from "./selection"

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

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

web/components/la-editor/extensions/slash-command/index.ts

@@ -0,0 +1 @@
+export * from "./slash-command"

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

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

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
+}

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

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

web/components/la-editor/extensions/task-item/index.ts

@@ -0,0 +1 @@
+export * from "./task-item"

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"
+		})
+	}
+})

web/components/la-editor/extensions/task-list/index.ts

@@ -0,0 +1 @@
+export * from "./task-list"

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"
+			}
+		}
+	}
+})