@namroodinc/liquid-editorial 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,38 +1,39 @@
 import { n as e, r as t, t as n } from "./chunks/Icon-CGY1FNXT.js";
 import { Button as r } from "./components/Button/index.js";
 import { ButtonGroup as i } from "./components/ButtonGroup/index.js";
-import { RichTextEditor as a } from "./components/RichTextEditor/index.js";
-import { Board as o, BoardCard as s, BoardColumn as c } from "./components/Board/index.js";
-import { SortableList as l, SortableListItem as u } from "./components/SortableList/index.js";
-import { Drawer as d } from "./components/Drawer/index.js";
-import { Badge as f } from "./components/Badge/index.js";
-import { Avatar as p, AvatarGroup as m } from "./components/Avatar/index.js";
-import { Field as h } from "./components/Field/index.js";
-import { TextArea as g, TextField as _ } from "./components/TextField/index.js";
-import { Grid as v, GridItem as y, Stack as b } from "./components/Grid/index.js";
-import { Checkbox as x, ChoiceGroup as S, Radio as C } from "./components/Choice/index.js";
-import { Table as w, TableBody as T, TableCell as E, TableEmpty as D, TableFrame as O, TableHead as k, TableHeaderCell as A, TableRow as j, TableToolbar as M } from "./components/Table/index.js";
-import { Popover as N } from "./components/Popover/index.js";
-import { Menu as P, MenuItem as F, MenuLabel as I, MenuSeparator as L } from "./components/Menu/index.js";
-import { Modal as R } from "./components/Modal/index.js";
-import { Toast as z, ToastProvider as B, useToast as V } from "./components/Toast/index.js";
-import { Skeleton as H, SkeletonText as U } from "./components/Skeleton/index.js";
-import { SideNav as W, SideNavFooter as G, SideNavHeader as K, SideNavItem as q, SideNavSection as J, useSideNavCollapsed as Y } from "./components/SideNav/index.js";
-import { TopNav as X, TopNavItem as Z } from "./components/TopNav/index.js";
-import { SubNav as Q, SubNavButton as $, SubNavItem as ee } from "./components/SubNav/index.js";
-import { CheckboxCard as te, RadioCard as ne, SelectionCardGroup as re } from "./components/SelectionCard/index.js";
-import { Stepper as ie } from "./components/Stepper/index.js";
-import { AssetGrid as ae, AssetGridEmpty as oe, AssetTile as se, AssetTileSkeleton as ce } from "./components/AssetGrid/index.js";
-import { ImageCropper as le, cropRatios as ue, cropToBlob as de } from "./components/ImageCropper/index.js";
-import { Container as fe } from "./components/Container/index.js";
-import { Select as pe } from "./components/Select/index.js";
-import { FieldAffix as me } from "./components/FieldAffix/index.js";
-import { NumberField as he, NumberRangeField as ge } from "./components/NumberField/index.js";
-import { RangeSlider as _e, Slider as ve } from "./components/Slider/index.js";
-import { Switch as ye } from "./components/Switch/index.js";
-import { SearchField as be } from "./components/SearchField/index.js";
-import { Calendar as xe, DateField as Se, DateRangeField as Ce, formatIsoDate as we } from "./components/DatePicker/index.js";
-import { TagsInput as Te } from "./components/TagsInput/index.js";
-import { EntryPicker as Ee } from "./components/EntryPicker/index.js";
-import { Time as De, formatAbsoluteDate as Oe, formatAbsoluteTime as ke, formatRelativeTime as Ae } from "./components/Time/index.js";
-export { ae as AssetGrid, oe as AssetGridEmpty, se as AssetTile, ce as AssetTileSkeleton, p as Avatar, m as AvatarGroup, f as Badge, o as Board, s as BoardCard, c as BoardColumn, r as Button, i as ButtonGroup, xe as Calendar, x as Checkbox, te as CheckboxCard, S as ChoiceGroup, fe as Container, Se as DateField, Ce as DateRangeField, d as Drawer, Ee as EntryPicker, h as Field, me as FieldAffix, v as Grid, y as GridItem, n as Icon, le as ImageCropper, P as Menu, F as MenuItem, I as MenuLabel, L as MenuSeparator, R as Modal, he as NumberField, ge as NumberRangeField, N as Popover, C as Radio, ne as RadioCard, _e as RangeSlider, a as RichTextEditor, be as SearchField, pe as Select, re as SelectionCardGroup, W as SideNav, G as SideNavFooter, K as SideNavHeader, q as SideNavItem, J as SideNavSection, H as Skeleton, U as SkeletonText, ve as Slider, l as SortableList, u as SortableListItem, b as Stack, ie as Stepper, Q as SubNav, $ as SubNavButton, ee as SubNavItem, ye as Switch, w as Table, T as TableBody, E as TableCell, D as TableEmpty, O as TableFrame, k as TableHead, A as TableHeaderCell, j as TableRow, M as TableToolbar, Te as TagsInput, g as TextArea, _ as TextField, De as Time, z as Toast, B as ToastProvider, X as TopNav, Z as TopNavItem, ue as cropRatios, de as cropToBlob, Oe as formatAbsoluteDate, ke as formatAbsoluteTime, we as formatIsoDate, Ae as formatRelativeTime, e as iconNames, t as icons, Y as useSideNavCollapsed, V as useToast };
+import { t as a } from "./chunks/RichTextEditor-DRt-kibg.js";
+import { Badge as o } from "./components/Badge/index.js";
+import { Modal as s } from "./components/Modal/index.js";
+import { FieldAffix as c } from "./components/FieldAffix/index.js";
+import { SearchField as l } from "./components/SearchField/index.js";
+import { SortableList as u, SortableListItem as d } from "./components/SortableList/index.js";
+import { EntryPicker as f } from "./components/EntryPicker/index.js";
+import { Field as p } from "./components/Field/index.js";
+import { NumberField as m, NumberRangeField as h } from "./components/NumberField/index.js";
+import { Switch as g } from "./components/Switch/index.js";
+import { TextArea as _, TextField as v } from "./components/TextField/index.js";
+import { n as y, t as b } from "./chunks/EntryEditor-BF808OZR.js";
+import { Board as x, BoardCard as S, BoardColumn as C } from "./components/Board/index.js";
+import { Drawer as w } from "./components/Drawer/index.js";
+import { Avatar as T, AvatarGroup as E } from "./components/Avatar/index.js";
+import { Grid as D, GridItem as O, Stack as k } from "./components/Grid/index.js";
+import { Checkbox as A, ChoiceGroup as j, Radio as M } from "./components/Choice/index.js";
+import { Table as N, TableBody as P, TableCell as F, TableEmpty as I, TableFrame as L, TableHead as R, TableHeaderCell as z, TableRow as B, TableToolbar as V } from "./components/Table/index.js";
+import { Popover as H } from "./components/Popover/index.js";
+import { Menu as U, MenuItem as W, MenuLabel as G, MenuSeparator as K } from "./components/Menu/index.js";
+import { Toast as q, ToastProvider as J, useToast as Y } from "./components/Toast/index.js";
+import { Skeleton as X, SkeletonText as Z } from "./components/Skeleton/index.js";
+import { SideNav as Q, SideNavFooter as $, SideNavHeader as ee, SideNavItem as te, SideNavSection as ne, useSideNavCollapsed as re } from "./components/SideNav/index.js";
+import { TopNav as ie, TopNavItem as ae } from "./components/TopNav/index.js";
+import { SubNav as oe, SubNavButton as se, SubNavItem as ce } from "./components/SubNav/index.js";
+import { CheckboxCard as le, RadioCard as ue, SelectionCardGroup as de } from "./components/SelectionCard/index.js";
+import { Stepper as fe } from "./components/Stepper/index.js";
+import { AssetGrid as pe, AssetGridEmpty as me, AssetTile as he, AssetTileSkeleton as ge } from "./components/AssetGrid/index.js";
+import { ImageCropper as _e, cropRatios as ve, cropToBlob as ye } from "./components/ImageCropper/index.js";
+import { Container as be } from "./components/Container/index.js";
+import { Select as xe } from "./components/Select/index.js";
+import { RangeSlider as Se, Slider as Ce } from "./components/Slider/index.js";
+import { Calendar as we, DateField as Te, DateRangeField as Ee, formatIsoDate as De } from "./components/DatePicker/index.js";
+import { TagsInput as Oe } from "./components/TagsInput/index.js";
+import { Time as ke, formatAbsoluteDate as Ae, formatAbsoluteTime as je, formatRelativeTime as Me } from "./components/Time/index.js";
+export { pe as AssetGrid, me as AssetGridEmpty, he as AssetTile, ge as AssetTileSkeleton, T as Avatar, E as AvatarGroup, o as Badge, x as Board, S as BoardCard, C as BoardColumn, r as Button, i as ButtonGroup, we as Calendar, A as Checkbox, le as CheckboxCard, j as ChoiceGroup, be as Container, Te as DateField, Ee as DateRangeField, w as Drawer, b as EntryEditor, f as EntryPicker, p as Field, c as FieldAffix, D as Grid, O as GridItem, n as Icon, _e as ImageCropper, U as Menu, W as MenuItem, G as MenuLabel, K as MenuSeparator, s as Modal, m as NumberField, h as NumberRangeField, H as Popover, M as Radio, ue as RadioCard, Se as RangeSlider, a as RichTextEditor, l as SearchField, xe as Select, de as SelectionCardGroup, Q as SideNav, $ as SideNavFooter, ee as SideNavHeader, te as SideNavItem, ne as SideNavSection, X as Skeleton, Z as SkeletonText, Ce as Slider, u as SortableList, d as SortableListItem, k as Stack, fe as Stepper, oe as SubNav, se as SubNavButton, ce as SubNavItem, g as Switch, N as Table, P as TableBody, F as TableCell, I as TableEmpty, L as TableFrame, R as TableHead, z as TableHeaderCell, B as TableRow, V as TableToolbar, Oe as TagsInput, _ as TextArea, v as TextField, ke as Time, q as Toast, J as ToastProvider, ie as TopNav, ae as TopNavItem, ve as cropRatios, ye as cropToBlob, Ae as formatAbsoluteDate, je as formatAbsoluteTime, De as formatIsoDate, Me as formatRelativeTime, e as iconNames, t as icons, re as useSideNavCollapsed, Y as useToast, y as validateEntryValues };

package/dist/styles.css

@@ -11,6 +11,7 @@
 @import "./components/DatePicker/style.css";
 @import "./components/Drawer/style.css";
 @import "./components/EntryPicker/style.css";
+@import "./components/EntryEditor/style.css";
 @import "./components/Field/style.css";
 @import "./components/FieldAffix/style.css";
 @import "./components/Grid/style.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namroodinc/liquid-editorial",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A bold, accessible React component library for editorial products.",
   "author": "Namrood Inc",
   "license": "MIT",
@@ -10,14 +10,28 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "components/*": ["dist/components/*/index.d.ts"],
-      "styles.css": ["dist/styles.css.d.ts"],
-      "tokens.css": ["dist/tokens.css.d.ts"],
-      "reset.css": ["dist/reset.css.d.ts"]
+      "components/*": [
+        "dist/components/*/index.d.ts"
+      ],
+      "styles.css": [
+        "dist/styles.css.d.ts"
+      ],
+      "tokens.css": [
+        "dist/tokens.css.d.ts"
+      ],
+      "reset.css": [
+        "dist/reset.css.d.ts"
+      ]
     }
   },
-  "files": ["dist", "README.md", "LICENSE"],
-  "sideEffects": ["**/*.css"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": {
@@ -57,10 +71,20 @@
     "type": "git",
     "url": "git+https://github.com/namroodinc/liquid-editorial.git"
   },
-  "bugs": { "url": "https://github.com/namroodinc/liquid-editorial/issues" },
+  "bugs": {
+    "url": "https://github.com/namroodinc/liquid-editorial/issues"
+  },
   "homepage": "https://github.com/namroodinc/liquid-editorial#readme",
-  "keywords": ["react", "components", "design-system", "editorial", "typescript"],
-  "publishConfig": { "access": "public" },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "editorial",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "clean": "node scripts/clean.mjs",
     "dev": "storybook dev -p 6006",
@@ -128,5 +152,7 @@
     "vite": "^8.0.16",
     "vitest": "^4.0.0"
   },
-  "engines": { "node": ">=22" }
+  "engines": {
+    "node": ">=22"
+  }
 }

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useState","useEditor","StarterKit","Link","Placeholder","useEditorState","useCallback","ButtonGroup","Button","EditorContent","__create","__defProp","__getOwnPropDesc","__getOwnPropNames","__getProtoOf","__hasOwnProp","__copyProps","from","keys","i","n","key","to","except","k","desc","__toESM","mod","isNodeMode","target","require_components_Button_index","require_components_ButtonGroup_index","react","react_jsx_runtime","_tiptap_react","_tiptap_starter_kit","_tiptap_extension_link","_tiptap_extension_placeholder","GROUPS","RichTextEditor","isFocused","setIsFocused","editor","isDisabled","defaultValue","label","onChange","state","toggleLink","href","className","isInvalid","group","tool","toolbarExtra","size"],"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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"}

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