@etus/ui 0.1.0

package/src/components/advanced/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,651 @@
+import type {
+  RichTextBubbleMenuProps,
+  RichTextEditorProps,
+  RichTextEditorRef,
+  RichTextFloatingMenuProps,
+  RichTextToolbarProps,
+} from "./RichTextEditor.types"
+
+import Highlight from "@tiptap/extension-highlight"
+import Image from "@tiptap/extension-image"
+import Link from "@tiptap/extension-link"
+import Placeholder from "@tiptap/extension-placeholder"
+import { Table } from "@tiptap/extension-table"
+import { TableCell } from "@tiptap/extension-table-cell"
+import { TableHeader } from "@tiptap/extension-table-header"
+import { TableRow } from "@tiptap/extension-table-row"
+import TaskItem from "@tiptap/extension-task-item"
+import TaskList from "@tiptap/extension-task-list"
+import TextAlign from "@tiptap/extension-text-align"
+import Underline from "@tiptap/extension-underline"
+import { EditorContent, useEditor } from "@tiptap/react"
+import { BubbleMenu, FloatingMenu } from "@tiptap/react/menus"
+import StarterKit from "@tiptap/starter-kit"
+import {
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  BoldIcon,
+  CodeIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  HighlighterIcon,
+  ImageIcon,
+  ItalicIcon,
+  LinkIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  MinusIcon,
+  QuoteIcon,
+  RedoIcon,
+  StrikethroughIcon,
+  TableIcon,
+  UnderlineIcon,
+  UndoIcon,
+} from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { Divider } from "../../primitives/Divider"
+import { Toggle } from "../../primitives/Toggle"
+
+function RichTextToolbar({ className, editor }: RichTextToolbarProps) {
+  const addLink = React.useCallback(() => {
+    if (!editor) return
+    const previousUrl = editor.getAttributes("link")["href"] as string | undefined
+    const url = window.prompt("URL", previousUrl)
+
+    if (url === null) return
+
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run()
+      return
+    }
+
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run()
+  }, [editor])
+
+  const addImage = React.useCallback(() => {
+    if (!editor) return
+    const url = window.prompt("Image URL")
+
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run()
+    }
+  }, [editor])
+
+  const insertTable = React.useCallback(() => {
+    if (!editor) return
+    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+  }, [editor])
+
+  if (!editor) return null
+
+  return (
+    <div
+      className={cn(
+        "bg-muted flex flex-wrap items-center gap-1 rounded-t-md border-b p-1",
+        className
+      )}
+      aria-label="Text formatting"
+      data-slot="rich-text-toolbar"
+      role="toolbar"
+    >
+      {/* History */}
+      <Toggle
+        aria-label="Undo"
+        disabled={!editor.can().undo()}
+        pressed={false}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().undo().run()}
+      >
+        <UndoIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Redo"
+        disabled={!editor.can().redo()}
+        pressed={false}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().redo().run()}
+      >
+        <RedoIcon className="size-4" />
+      </Toggle>
+
+      <Divider className="mx-1 h-6" orientation="vertical" />
+
+      {/* Text formatting */}
+      <Toggle
+        aria-label="Bold"
+        pressed={editor.isActive("bold")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleBold().run()}
+      >
+        <BoldIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Italic"
+        pressed={editor.isActive("italic")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <ItalicIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Underline"
+        pressed={editor.isActive("underline")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
+      >
+        <UnderlineIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Strikethrough"
+        pressed={editor.isActive("strike")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleStrike().run()}
+      >
+        <StrikethroughIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Inline code"
+        pressed={editor.isActive("code")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleCode().run()}
+      >
+        <CodeIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Highlight"
+        pressed={editor.isActive("highlight")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
+      >
+        <HighlighterIcon className="size-4" />
+      </Toggle>
+
+      <Divider className="mx-1 h-6" orientation="vertical" />
+
+      {/* Headings */}
+      <Toggle
+        aria-label="Heading 1"
+        pressed={editor.isActive("heading", { level: 1 })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+      >
+        <Heading1Icon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Heading 2"
+        pressed={editor.isActive("heading", { level: 2 })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+      >
+        <Heading2Icon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Heading 3"
+        pressed={editor.isActive("heading", { level: 3 })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+      >
+        <Heading3Icon className="size-4" />
+      </Toggle>
+
+      <Divider className="mx-1 h-6" orientation="vertical" />
+
+      {/* Lists */}
+      <Toggle
+        aria-label="Bullet list"
+        pressed={editor.isActive("bulletList")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <ListIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Ordered list"
+        pressed={editor.isActive("orderedList")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrderedIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Task list"
+        pressed={editor.isActive("taskList")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleTaskList().run()}
+      >
+        <ListTodoIcon className="size-4" />
+      </Toggle>
+
+      <Divider className="mx-1 h-6" orientation="vertical" />
+
+      {/* Alignment */}
+      <Toggle
+        aria-label="Align left"
+        pressed={editor.isActive({ textAlign: "left" })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
+      >
+        <AlignLeftIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Align center"
+        pressed={editor.isActive({ textAlign: "center" })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
+      >
+        <AlignCenterIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Align right"
+        pressed={editor.isActive({ textAlign: "right" })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
+      >
+        <AlignRightIcon className="size-4" />
+      </Toggle>
+
+      <Divider className="mx-1 h-6" orientation="vertical" />
+
+      {/* Blocks */}
+      <Toggle
+        aria-label="Blockquote"
+        pressed={editor.isActive("blockquote")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <QuoteIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Horizontal rule"
+        pressed={false}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().setHorizontalRule().run()}
+      >
+        <MinusIcon className="size-4" />
+      </Toggle>
+
+      <Divider className="mx-1 h-6" orientation="vertical" />
+
+      {/* Media & Links */}
+      <Toggle
+        aria-label="Insert link"
+        pressed={editor.isActive("link")}
+        size="sm"
+        onPressedChange={addLink}
+      >
+        <LinkIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Insert image"
+        pressed={false}
+        size="sm"
+        onPressedChange={addImage}
+      >
+        <ImageIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Insert table"
+        pressed={false}
+        size="sm"
+        onPressedChange={insertTable}
+      >
+        <TableIcon className="size-4" />
+      </Toggle>
+    </div>
+  )
+}
+
+function RichTextBubbleMenuContent({ className, editor }: RichTextBubbleMenuProps) {
+  const addLink = React.useCallback(() => {
+    if (!editor) return
+    const previousUrl = editor.getAttributes("link")["href"] as string | undefined
+    const url = window.prompt("URL", previousUrl)
+
+    if (url === null) return
+
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run()
+      return
+    }
+
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run()
+  }, [editor])
+
+  if (!editor) return null
+
+  return (
+    <div
+      className={cn(
+        "bg-popover text-popover-foreground flex items-center gap-0.5 rounded-md border p-1 shadow-md",
+        className
+      )}
+      aria-label="Selection formatting"
+      data-slot="rich-text-bubble-menu"
+      role="toolbar"
+    >
+      <Toggle
+        aria-label="Bold"
+        pressed={editor.isActive("bold")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleBold().run()}
+      >
+        <BoldIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Italic"
+        pressed={editor.isActive("italic")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleItalic().run()}
+      >
+        <ItalicIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Underline"
+        pressed={editor.isActive("underline")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
+      >
+        <UnderlineIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Strikethrough"
+        pressed={editor.isActive("strike")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleStrike().run()}
+      >
+        <StrikethroughIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Inline code"
+        pressed={editor.isActive("code")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleCode().run()}
+      >
+        <CodeIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Highlight"
+        pressed={editor.isActive("highlight")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
+      >
+        <HighlighterIcon className="size-4" />
+      </Toggle>
+      <Divider className="mx-1 h-4" orientation="vertical" />
+      <Toggle
+        aria-label="Insert link"
+        pressed={editor.isActive("link")}
+        size="sm"
+        onPressedChange={addLink}
+      >
+        <LinkIcon className="size-4" />
+      </Toggle>
+    </div>
+  )
+}
+
+function RichTextFloatingMenuContent({ className, editor }: RichTextFloatingMenuProps) {
+  if (!editor) return null
+
+  return (
+    <div
+      className={cn(
+        "bg-popover text-popover-foreground flex items-center gap-0.5 rounded-md border p-1 shadow-md",
+        className
+      )}
+      aria-label="Block formatting"
+      data-slot="rich-text-floating-menu"
+      role="toolbar"
+    >
+      <Toggle
+        aria-label="Heading 1"
+        pressed={editor.isActive("heading", { level: 1 })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+      >
+        <Heading1Icon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Heading 2"
+        pressed={editor.isActive("heading", { level: 2 })}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+      >
+        <Heading2Icon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Bullet list"
+        pressed={editor.isActive("bulletList")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
+      >
+        <ListIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Ordered list"
+        pressed={editor.isActive("orderedList")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
+      >
+        <ListOrderedIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Task list"
+        pressed={editor.isActive("taskList")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleTaskList().run()}
+      >
+        <ListTodoIcon className="size-4" />
+      </Toggle>
+      <Toggle
+        aria-label="Blockquote"
+        pressed={editor.isActive("blockquote")}
+        size="sm"
+        onPressedChange={() => editor.chain().focus().toggleBlockquote().run()}
+      >
+        <QuoteIcon className="size-4" />
+      </Toggle>
+    </div>
+  )
+}
+
+function RichTextEditor({
+  "aria-label": ariaLabel = "Rich text editor",
+  autofocus = false,
+  className,
+  content,
+  defaultContent,
+  editable = true,
+  extensions = [],
+  onBlur,
+  onChange,
+  onFocus,
+  onUpdate,
+  placeholder = "Start writing...",
+  ref,
+  showBubbleMenu = true,
+  showFloatingMenu = false,
+  showToolbar = true,
+  toolbarPosition = "top",
+}: RichTextEditorProps & { ref?: React.Ref<RichTextEditorRef> }) {
+  const editor = useEditor({
+    autofocus,
+    content: content ?? defaultContent ?? "",
+    editable,
+    editorProps: {
+      attributes: {
+        "aria-label": ariaLabel,
+        role: "textbox",
+      },
+    },
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3, 4, 5, 6],
+        },
+      }),
+      Placeholder.configure({
+        placeholder,
+      }),
+      Link.configure({
+        HTMLAttributes: {
+          class: "text-primary underline underline-offset-4 cursor-pointer",
+        },
+        openOnClick: false,
+      }),
+      Image.configure({
+        HTMLAttributes: {
+          class: "max-w-full h-auto rounded-md",
+        },
+      }),
+      Underline,
+      TextAlign.configure({
+        types: ["heading", "paragraph"],
+      }),
+      Highlight.configure({
+        HTMLAttributes: {
+          class: "bg-yellow-200 dark:bg-yellow-800",
+        },
+        multicolor: false,
+      }),
+      TaskList,
+      TaskItem.configure({
+        nested: true,
+      }),
+      Table.configure({
+        HTMLAttributes: {
+          class: "border-collapse table-auto w-full",
+        },
+        resizable: true,
+      }),
+      TableRow,
+      TableCell.configure({
+        HTMLAttributes: {
+          class: "border border-border p-2",
+        },
+      }),
+      TableHeader.configure({
+        HTMLAttributes: {
+          class: "border border-border p-2 bg-muted font-semibold",
+        },
+      }),
+      ...extensions,
+    ],
+    onBlur: ({ editor: currentEditor }) => {
+      onBlur?.({ editor: currentEditor })
+    },
+    onFocus: ({ editor: currentEditor }) => {
+      onFocus?.({ editor: currentEditor })
+    },
+    onUpdate: ({ editor: currentEditor }) => {
+      onChange?.(currentEditor.getJSON())
+      onUpdate?.({ editor: currentEditor })
+    },
+  })
+
+  // Sync content prop changes
+  // Note: useEditor returns Editor | null, but ESLint infers it as always truthy after initialization
+  /* eslint-disable @typescript-eslint/no-unnecessary-condition, react-you-might-not-need-an-effect/no-pass-data-to-parent */
+  React.useEffect(() => {
+    if (editor && content !== undefined) {
+      const currentContent = editor.getJSON()
+      const newContent = typeof content === "string" ? content : JSON.stringify(content)
+      const currentContentStr = JSON.stringify(currentContent)
+
+      if (newContent !== currentContentStr) {
+        editor.commands.setContent(content)
+      }
+    }
+  }, [editor, content])
+
+  // Sync editable prop
+  React.useEffect(() => {
+    if (editor) {
+      editor.setEditable(editable)
+    }
+  }, [editor, editable])
+  /* eslint-enable @typescript-eslint/no-unnecessary-condition, react-you-might-not-need-an-effect/no-pass-data-to-parent */
+
+  // Expose ref methods - editor can be null before initialization
+  /* eslint-disable @typescript-eslint/no-unnecessary-condition */
+  React.useImperativeHandle(ref, () => ({
+    blur: () => {
+      editor?.commands.blur()
+    },
+    editor,
+    focus: () => {
+      editor?.commands.focus()
+    },
+    getHTML: () => editor?.getHTML() ?? "",
+    getJSON: () => editor?.getJSON() ?? { type: "doc", content: [] },
+    getText: () => editor?.getText() ?? "",
+    setContent: (newContent) => {
+      editor?.commands.setContent(newContent)
+    },
+  }))
+  /* eslint-enable @typescript-eslint/no-unnecessary-condition */
+
+  const showTopToolbar = showToolbar && toolbarPosition === "top"
+  const showBottomToolbar = showToolbar && toolbarPosition === "bottom"
+
+  return (
+    <div
+      className={cn(
+        "bg-background text-foreground border rounded-md",
+        className
+      )}
+      data-slot="rich-text-editor"
+    >
+      {showTopToolbar && <RichTextToolbar editor={editor} />}
+
+      <div className="relative">
+        {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- editor can be null */}
+        {showBubbleMenu && editor && (
+          <BubbleMenu
+            className="rich-text-bubble-menu"
+            editor={editor}
+          >
+            <RichTextBubbleMenuContent editor={editor} />
+          </BubbleMenu>
+        )}
+
+        {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- editor can be null */}
+        {showFloatingMenu && editor && (
+          <FloatingMenu
+            className="rich-text-floating-menu"
+            editor={editor}
+          >
+            <RichTextFloatingMenuContent editor={editor} />
+          </FloatingMenu>
+        )}
+
+        <EditorContent
+          className={cn(
+            "prose prose-sm dark:prose-invert max-w-none",
+            "focus-within:outline-none",
+            "[&_.ProseMirror]:min-h-[150px] [&_.ProseMirror]:p-4 [&_.ProseMirror]:focus:outline-none",
+            "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground [&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left [&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0 [&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none",
+            "[&_.ProseMirror_ul[data-type='taskList']]:list-none [&_.ProseMirror_ul[data-type='taskList']]:pl-0",
+            "[&_.ProseMirror_ul[data-type='taskList']_li]:flex [&_.ProseMirror_ul[data-type='taskList']_li]:items-start [&_.ProseMirror_ul[data-type='taskList']_li]:gap-2",
+            "[&_.ProseMirror_ul[data-type='taskList']_li_input]:mt-1"
+          )}
+          editor={editor}
+        />
+      </div>
+
+      {showBottomToolbar && <RichTextToolbar className="rounded-t-none rounded-b-md border-t border-b-0" editor={editor} />}
+    </div>
+  )
+}
+
+export {
+  RichTextBubbleMenuContent as RichTextBubbleMenu,
+  RichTextEditor,
+  RichTextFloatingMenuContent as RichTextFloatingMenu,
+  RichTextToolbar,
+}