@namroodinc/liquid-editorial 0.1.0 → 0.1.1

package/dist/components/RichTextEditor/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["StarterKit","Link","Placeholder","GROUPS","RichTextEditor","forwardRef","isFocused","setIsFocused","useState","editor","useEditor","isDisabled","defaultValue","label","onChange","state","useEditorState","toggleLink","useCallback","href","className","isInvalid","ButtonGroup","i","group","Button","tool","toolbarExtra","size","EditorContent"],"sources":["../../../src/components/RichTextEditor/index.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState, type ReactNode } from \"react\";\nimport { EditorContent, useEditor, useEditorState, type Editor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport Link from \"@tiptap/extension-link\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport type { IconName } from \"../Icon/icons\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nexport type RichTextEditorSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface RichTextEditorProps {\n  /** Initial HTML. The editor is uncontrolled: read changes from `onChange`. */\n  defaultValue?: string;\n  /** Fired with the document's HTML on every change. */\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  size?: RichTextEditorSize;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  /** Accessible name for the editing surface. */\n  label?: string;\n  className?: string;\n  /** Extra controls appended to the toolbar, e.g. a word count. */\n  toolbarExtra?: ReactNode;\n}\n\ninterface ToolItem {\n  id: string;\n  icon: IconName;\n  label: string;\n  run: (editor: Editor) => void;\n  active?: (editor: Editor) => boolean;\n}\n\nconst GROUPS: ToolItem[][] = [\n  [\n    {\n      id: \"bold\",\n      icon: \"bold\",\n      label: \"Bold\",\n      run: (e) => e.chain().focus().toggleBold().run(),\n      active: (e) => e.isActive(\"bold\"),\n    },\n    {\n      id: \"italic\",\n      icon: \"italic\",\n      label: \"Italic\",\n      run: (e) => e.chain().focus().toggleItalic().run(),\n      active: (e) => e.isActive(\"italic\"),\n    },\n    {\n      id: \"strike\",\n      icon: \"strikethrough\",\n      label: \"Strikethrough\",\n      run: (e) => e.chain().focus().toggleStrike().run(),\n      active: (e) => e.isActive(\"strike\"),\n    },\n    {\n      id: \"code\",\n      icon: \"code\",\n      label: \"Inline code\",\n      run: (e) => e.chain().focus().toggleCode().run(),\n      active: (e) => e.isActive(\"code\"),\n    },\n  ],\n  [\n    {\n      id: \"h2\",\n      icon: \"heading-2\",\n      label: \"Heading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 2 }),\n    },\n    {\n      id: \"h3\",\n      icon: \"heading-3\",\n      label: \"Subheading\",\n      run: (e) => e.chain().focus().toggleHeading({ level: 3 }).run(),\n      active: (e) => e.isActive(\"heading\", { level: 3 }),\n    },\n    {\n      id: \"quote\",\n      icon: \"quote\",\n      label: \"Quote\",\n      run: (e) => e.chain().focus().toggleBlockquote().run(),\n      active: (e) => e.isActive(\"blockquote\"),\n    },\n  ],\n  [\n    {\n      id: \"ul\",\n      icon: \"list\",\n      label: \"Bulleted list\",\n      run: (e) => e.chain().focus().toggleBulletList().run(),\n      active: (e) => e.isActive(\"bulletList\"),\n    },\n    {\n      id: \"ol\",\n      icon: \"list-ordered\",\n      label: \"Numbered list\",\n      run: (e) => e.chain().focus().toggleOrderedList().run(),\n      active: (e) => e.isActive(\"orderedList\"),\n    },\n  ],\n  [\n    {\n      id: \"undo\",\n      icon: \"undo\",\n      label: \"Undo\",\n      run: (e) => e.chain().focus().undo().run(),\n    },\n    {\n      id: \"redo\",\n      icon: \"redo\",\n      label: \"Redo\",\n      run: (e) => e.chain().focus().redo().run(),\n    },\n  ],\n];\n\n/**\n * The editorial writing surface. Rich text plus links — the same field skin,\n * radius and states as `TextField`, with the toolbar inside the frame.\n */\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  function RichTextEditor(\n    {\n      defaultValue = \"\",\n      onChange,\n      placeholder = \"Write something…\",\n      size = \"md\",\n      isDisabled = false,\n      isInvalid = false,\n      label = \"Rich text editor\",\n      className,\n      toolbarExtra,\n    },\n    ref,\n  ) {\n    const [isFocused, setIsFocused] = useState(false);\n\n    const editor = useEditor({\n      immediatelyRender: false,\n      editable: !isDisabled,\n      content: defaultValue,\n      extensions: [\n        StarterKit.configure({ link: false }),\n        Link.configure({ openOnClick: false, autolink: true }),\n        Placeholder.configure({ placeholder }),\n      ],\n      editorProps: {\n        attributes: { role: \"textbox\", \"aria-label\": label, \"aria-multiline\": \"true\" },\n      },\n      onFocus: () => setIsFocused(true),\n      onBlur: () => setIsFocused(false),\n      onUpdate: ({ editor: e }) => onChange?.(e.getHTML()),\n    });\n\n    const state = useEditorState({\n      editor,\n      selector: ({ editor: e }) =>\n        e\n          ? {\n              active: Object.fromEntries(\n                GROUPS.flat().map((t) => [t.id, t.active?.(e) ?? false]),\n              ),\n              linkActive: e.isActive(\"link\"),\n            }\n          : null,\n    });\n\n    const toggleLink = useCallback(() => {\n      if (!editor) return;\n      if (editor.isActive(\"link\")) {\n        editor.chain().focus().unsetLink().run();\n        return;\n      }\n      const href = window.prompt(\"Link to\");\n      if (!href) return;\n      editor.chain().focus().extendMarkRange(\"link\").setLink({ href }).run();\n    }, [editor]);\n\n    return (\n      <div\n        ref={ref}\n        className={[\"ds-rte\", className].filter(Boolean).join(\" \")}\n        data-focused={isFocused || undefined}\n        data-disabled={isDisabled || undefined}\n        aria-invalid={isInvalid || undefined}\n      >\n        <div className=\"ds-rte__toolbar\" role=\"toolbar\" aria-label={`${label} formatting`}>\n          {GROUPS.map((group, i) => (\n            <ButtonGroup key={i} aria-label={`Formatting ${i + 1}`}>\n              {group.map((tool) => (\n                <Button\n                  key={tool.id}\n                  size=\"sm\"\n                  isIconOnly\n                  iconStart={tool.icon}\n                  aria-label={tool.label}\n                  title={tool.label}\n                  aria-pressed={tool.active ? state?.active[tool.id] : undefined}\n                  variant={state?.active[tool.id] ? \"active\" : \"neutral\"}\n                  isDisabled={isDisabled || !editor}\n                  onClick={() => editor && tool.run(editor)}\n                />\n              ))}\n            </ButtonGroup>\n          ))}\n          <ButtonGroup aria-label=\"Link\">\n            <Button\n              size=\"sm\"\n              isIconOnly\n              iconStart={state?.linkActive ? \"link-off\" : \"link\"}\n              aria-label={state?.linkActive ? \"Remove link\" : \"Add link\"}\n              title={state?.linkActive ? \"Remove link\" : \"Add link\"}\n              variant={state?.linkActive ? \"active\" : \"neutral\"}\n              isDisabled={isDisabled || !editor}\n              onClick={toggleLink}\n            />\n          </ButtonGroup>\n          {toolbarExtra}\n        </div>\n        <div className=\"ds-rte__content\" data-size={size}>\n          <EditorContent editor={editor} />\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}