@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

package/dist/esm/components/rich-text/RichTextEditor.js

@@ -0,0 +1,244 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useEffect, useImperativeHandle } from 'react';
+import { useEditor, useEditorState, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { selectToolbarState, DEFAULT_TOOLBAR, RichTextToolbar } from './RichTextToolbar.js';
+
+var _excluded = ["id", "className", "editorClassName", "label", "error", "helperText", "required", "disabled", "readOnly", "placeholder", "value", "defaultValue", "onChange", "outputFormat", "onFocus", "onBlur", "toolbar", "toolbarLabel", "minHeight", "maxHeight", "autoFocus", "extensions", "aria-label", "aria-describedby"];
+// Tailwind's preflight strips list bullets, heading sizes, etc. These arbitrary
+// variants restore readable defaults inside the editable area only.
+var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-gray-900 focus:outline-none dark:text-gray-100", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
+var toCss = function toCss(v) {
+  return typeof v === "number" ? "".concat(v, "px") : v;
+};
+function sameContent(editor, value) {
+  if (typeof value === "string") return value === editor.getHTML();
+  return JSON.stringify(value) === JSON.stringify(editor.getJSON());
+}
+var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref2;
+  var id = _ref.id,
+    className = _ref.className,
+    editorClassName = _ref.editorClassName,
+    label = _ref.label,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    placeholder = _ref.placeholder,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$outputFormat = _ref.outputFormat,
+    outputFormat = _ref$outputFormat === void 0 ? "html" : _ref$outputFormat,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    _ref$toolbar = _ref.toolbar,
+    toolbar = _ref$toolbar === void 0 ? DEFAULT_TOOLBAR : _ref$toolbar,
+    _ref$toolbarLabel = _ref.toolbarLabel,
+    toolbarLabel = _ref$toolbarLabel === void 0 ? "Formatting" : _ref$toolbarLabel,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 120 : _ref$minHeight,
+    maxHeight = _ref.maxHeight,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    extensions = _ref.extensions,
+    ariaLabel = _ref["aria-label"],
+    ariaDescribedBy = _ref["aria-describedby"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var reactId = useId();
+  var editorId = id || "rich-text-".concat(reactId);
+  var labelId = "".concat(editorId, "-label");
+  var errorId = "".concat(editorId, "-error");
+  var helperId = "".concat(editorId, "-helper");
+  var editable = !disabled && !readOnly;
+  var rootRef = useRef(null);
+  var callbacks = useLatestRef({
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    outputFormat: outputFormat
+  });
+  var describedBy = [error ? errorId : null, helperText ? helperId : null, ariaDescribedBy].filter(Boolean).join(" ") || undefined;
+  var attributes = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    id: editorId,
+    role: "textbox",
+    "aria-multiline": "true"
+  }, label ? {
+    "aria-labelledby": labelId
+  } : {
+    "aria-label": ariaLabel || placeholder || "Rich text editor"
+  }), describedBy ? {
+    "aria-describedby": describedBy
+  } : {}), error ? {
+    "aria-invalid": "true"
+  } : {}), required ? {
+    "aria-required": "true"
+  } : {}), readOnly ? {
+    "aria-readonly": "true"
+  } : {}), disabled ? {
+    "aria-disabled": "true"
+  } : {}), placeholder ? {
+    "aria-placeholder": placeholder
+  } : {}), {}, {
+    "class": cn(CONTENT_CLASSES, editorClassName)
+  });
+  var attributesKey = JSON.stringify(attributes);
+  var editor = useEditor({
+    extensions: [StarterKit.configure({
+      link: {
+        openOnClick: false,
+        autolink: true,
+        defaultProtocol: "https"
+      }
+    })].concat(_toConsumableArray(extensions || [])),
+    content: (_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : "",
+    editable: editable,
+    autofocus: autoFocus,
+    // Render on the client after mount: safe for SSR / Next.js hydration.
+    immediatelyRender: false,
+    editorProps: {
+      attributes: attributes
+    },
+    onUpdate: function onUpdate(_ref3) {
+      var instance = _ref3.editor;
+      var _callbacks$current = callbacks.current,
+        cb = _callbacks$current.onChange,
+        format = _callbacks$current.outputFormat;
+      cb === null || cb === void 0 || cb(format === "json" ? instance.getJSON() : instance.getHTML(), instance);
+    },
+    onFocus: function onFocus(_ref4) {
+      var _callbacks$current$on, _callbacks$current2;
+      var event = _ref4.event;
+      return (_callbacks$current$on = (_callbacks$current2 = callbacks.current).onFocus) === null || _callbacks$current$on === void 0 ? void 0 : _callbacks$current$on.call(_callbacks$current2, event);
+    },
+    onBlur: function onBlur(_ref5) {
+      var _callbacks$current$on2, _callbacks$current3;
+      var event = _ref5.event;
+      return (_callbacks$current$on2 = (_callbacks$current3 = callbacks.current).onBlur) === null || _callbacks$current$on2 === void 0 ? void 0 : _callbacks$current$on2.call(_callbacks$current3, event);
+    }
+  });
+  var watched = useEditorState({
+    editor: editor,
+    selector: function selector(_ref6) {
+      var instance = _ref6.editor;
+      return selectToolbarState(instance);
+    }
+  });
+  // useEditorState only re-selects on the next transaction after the editor
+  // mounts, so read the state directly until then.
+  var state = watched !== null && watched !== void 0 ? watched : selectToolbarState(editor);
+  useEffect(function () {
+    if (editor && value !== undefined && value !== null && !sameContent(editor, value)) {
+      editor.commands.setContent(value, {
+        emitUpdate: false
+      });
+    }
+  }, [editor, value]);
+  useEffect(function () {
+    if (editor && editor.isEditable !== editable) editor.setEditable(editable, false);
+  }, [editor, editable]);
+  useEffect(function () {
+    if (editor) editor.setOptions({
+      editorProps: {
+        attributes: JSON.parse(attributesKey)
+      }
+    });
+  }, [editor, attributesKey]);
+  useImperativeHandle(ref, function () {
+    return {
+      editor: editor,
+      element: rootRef.current,
+      focus: function focus() {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.focus();
+      },
+      clear: function clear() {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.clearContent(true);
+      },
+      getHTML: function getHTML() {
+        return editor ? editor.getHTML() : "";
+      },
+      getJSON: function getJSON() {
+        return editor ? editor.getJSON() : null;
+      },
+      setContent: function setContent(content) {
+        return editor === null || editor === void 0 ? void 0 : editor.commands.setContent(content);
+      }
+    };
+  }, [editor]);
+  var focusEditor = function focusEditor() {
+    if (editable) editor === null || editor === void 0 || editor.commands.focus();
+  };
+  var items = Array.isArray(toolbar) ? toolbar : toolbar === false ? [] : DEFAULT_TOOLBAR;
+  var showToolbar = !readOnly && items.length > 0;
+  var showPlaceholder = placeholder && (state ? state.isEmpty : !(value !== null && value !== void 0 ? value : defaultValue));
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: rootRef,
+    className: cn("w-full", className),
+    "data-disabled": disabled || undefined
+  }, rest), {}, {
+    children: [label && jsxs("label", {
+      id: labelId,
+      onClick: focusEditor,
+      className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200",
+      children: [label, required && jsx("span", {
+        className: "ml-1 text-error-500",
+        "aria-hidden": "true",
+        children: "*"
+      })]
+    }), jsxs("div", {
+      className: cn("overflow-hidden rounded-md border bg-white dark:bg-gray-900", error ? "border-error-500" : "border-gray-300 dark:border-gray-600", disabled && "cursor-not-allowed opacity-50"),
+      children: [showToolbar && jsx(RichTextToolbar, {
+        editor: editor,
+        state: state,
+        items: items,
+        disabled: disabled,
+        controlsId: editorId,
+        label: toolbarLabel
+      }), jsxs("div", {
+        className: cn("relative overflow-y-auto focus-within:ring-2 focus-within:ring-inset", error ? "focus-within:ring-error-500" : "focus-within:ring-primary-500"),
+        style: {
+          minHeight: toCss(minHeight),
+          maxHeight: toCss(maxHeight)
+        },
+        onMouseDown: function onMouseDown(e) {
+          if (e.target === e.currentTarget) {
+            e.preventDefault();
+            focusEditor();
+          }
+        },
+        children: [showPlaceholder && jsx("div", {
+          className: "pointer-events-none absolute left-3 top-3 select-none text-sm text-gray-400 dark:text-gray-500",
+          "aria-hidden": "true",
+          children: placeholder
+        }), jsx(EditorContent, {
+          editor: editor
+        })]
+      })]
+    }), error && jsxs("p", {
+      id: errorId,
+      className: "mt-1 flex items-center gap-1 text-sm text-error-600 dark:text-error-400",
+      "aria-live": "polite",
+      children: [jsx(AlertCircle, {
+        className: "h-4 w-4 shrink-0",
+        "aria-hidden": "true"
+      }), error]
+    }), helperText && jsx("p", {
+      id: helperId,
+      className: "mt-1 text-sm text-gray-500 dark:text-gray-400",
+      children: helperText
+    })]
+  }));
+});
+RichTextEditor.displayName = "RichTextEditor";
+
+export { RichTextEditor as default };

package/dist/esm/components/rich-text/RichTextToolbar.js

@@ -0,0 +1,397 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect } from 'react';
+import { Redo, Undo, Link, SquareCode, Quote, ListOrdered, List, Heading3, Heading2, Heading1, Code, Strikethrough, Italic, Bold } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || "");
+var shortcutLabel = function shortcutLabel(keys) {
+  return keys.replace("Mod", isMac ? "⌘" : "Ctrl").replace(/-/g, "+");
+};
+/** Every toolbar control, keyed by the name consumers pass in `toolbar`. */
+var TOOLBAR_ITEMS = {
+  bold: {
+    label: "Bold",
+    icon: Bold,
+    group: "marks",
+    shortcut: "Mod-B",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleBold();
+    }
+  },
+  italic: {
+    label: "Italic",
+    icon: Italic,
+    group: "marks",
+    shortcut: "Mod-I",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleItalic();
+    }
+  },
+  strike: {
+    label: "Strikethrough",
+    icon: Strikethrough,
+    group: "marks",
+    shortcut: "Mod-Shift-S",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleStrike();
+    }
+  },
+  code: {
+    label: "Inline code",
+    icon: Code,
+    group: "marks",
+    shortcut: "Mod-E",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleCode();
+    }
+  },
+  heading1: {
+    label: "Heading 1",
+    icon: Heading1,
+    group: "blocks",
+    shortcut: "Mod-Alt-1",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleHeading({
+        level: 1
+      });
+    }
+  },
+  heading2: {
+    label: "Heading 2",
+    icon: Heading2,
+    group: "blocks",
+    shortcut: "Mod-Alt-2",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleHeading({
+        level: 2
+      });
+    }
+  },
+  heading3: {
+    label: "Heading 3",
+    icon: Heading3,
+    group: "blocks",
+    shortcut: "Mod-Alt-3",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleHeading({
+        level: 3
+      });
+    }
+  },
+  bulletList: {
+    label: "Bulleted list",
+    icon: List,
+    group: "blocks",
+    shortcut: "Mod-Shift-8",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleBulletList();
+    }
+  },
+  orderedList: {
+    label: "Numbered list",
+    icon: ListOrdered,
+    group: "blocks",
+    shortcut: "Mod-Shift-7",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleOrderedList();
+    }
+  },
+  blockquote: {
+    label: "Quote",
+    icon: Quote,
+    group: "blocks",
+    shortcut: "Mod-Shift-B",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleBlockquote();
+    }
+  },
+  codeBlock: {
+    label: "Code block",
+    icon: SquareCode,
+    group: "blocks",
+    shortcut: "Mod-Alt-C",
+    toggle: true,
+    run: function run(c) {
+      return c.toggleCodeBlock();
+    }
+  },
+  link: {
+    label: "Link",
+    icon: Link,
+    group: "insert",
+    toggle: true
+  },
+  undo: {
+    label: "Undo",
+    icon: Undo,
+    group: "history",
+    shortcut: "Mod-Z",
+    run: function run(c) {
+      return c.undo();
+    }
+  },
+  redo: {
+    label: "Redo",
+    icon: Redo,
+    group: "history",
+    shortcut: "Mod-Shift-Z",
+    run: function run(c) {
+      return c.redo();
+    }
+  }
+};
+var DEFAULT_TOOLBAR = ["bold", "italic", "strike", "code", "heading2", "heading3", "bulletList", "orderedList", "blockquote", "link", "undo", "redo"];
+/** Toolbar state derived from the editor on every transaction (via useEditorState). */
+function selectToolbarState(editor) {
+  if (!editor) return null;
+  return {
+    isEmpty: editor.isEmpty,
+    bold: editor.isActive("bold"),
+    italic: editor.isActive("italic"),
+    strike: editor.isActive("strike"),
+    code: editor.isActive("code"),
+    heading1: editor.isActive("heading", {
+      level: 1
+    }),
+    heading2: editor.isActive("heading", {
+      level: 2
+    }),
+    heading3: editor.isActive("heading", {
+      level: 3
+    }),
+    bulletList: editor.isActive("bulletList"),
+    orderedList: editor.isActive("orderedList"),
+    blockquote: editor.isActive("blockquote"),
+    codeBlock: editor.isActive("codeBlock"),
+    link: editor.isActive("link"),
+    undo: editor.can().undo(),
+    redo: editor.can().redo()
+  };
+}
+var SAFE_URL = /^(https?:|mailto:|tel:|\/|#)/i;
+var HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+/** Normalises a typed URL; returns null for schemes we refuse (javascript:, data:, …). */
+function normalizeUrl(raw) {
+  var url = String(raw || "").trim();
+  if (!url) return "";
+  if (SAFE_URL.test(url)) return url;
+  if (HAS_SCHEME.test(url)) return null;
+  return "https://".concat(url);
+}
+function LinkForm(_ref) {
+  var editor = _ref.editor,
+    onClose = _ref.onClose;
+  var _useState = useState(function () {
+      return editor.getAttributes("link").href || "";
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    href = _useState2[0],
+    setHref = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    invalid = _useState4[0],
+    setInvalid = _useState4[1];
+  var inputRef = useRef(null);
+  useEffect(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, []);
+  var close = function close() {
+    onClose();
+    editor.commands.focus();
+  };
+  var apply = function apply() {
+    var url = normalizeUrl(href);
+    if (url === null) {
+      setInvalid(true);
+      return;
+    }
+    var chain = editor.chain().focus().extendMarkRange("link");
+    if (!url) chain.unsetLink().run();else if (editor.state.selection.empty && !editor.isActive("link")) {
+      chain.insertContent({
+        type: "text",
+        text: url,
+        marks: [{
+          type: "link",
+          attrs: {
+            href: url
+          }
+        }]
+      }).run();
+    } else chain.setLink({
+      href: url
+    }).run();
+    onClose();
+  };
+  var remove = function remove() {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  };
+  return jsxs("div", {
+    className: "flex flex-wrap items-center gap-2 border-b border-gray-200 px-2 py-2 dark:border-gray-700",
+    children: [jsx("input", {
+      ref: inputRef,
+      type: "url",
+      value: href,
+      "aria-label": "Link URL",
+      "aria-invalid": invalid || undefined,
+      placeholder: "https://example.com",
+      onChange: function onChange(e) {
+        setHref(e.target.value);
+        setInvalid(false);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          apply();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          close();
+        }
+      },
+      className: cn("h-8 min-w-0 flex-1 rounded-md border bg-white px-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", invalid ? "border-error-500" : "border-gray-300 dark:border-gray-600")
+    }), jsx("button", {
+      type: "button",
+      onClick: apply,
+      className: formButton,
+      children: "Apply"
+    }), editor.isActive("link") && jsx("button", {
+      type: "button",
+      onClick: remove,
+      className: formButton,
+      children: "Remove link"
+    }), jsx("button", {
+      type: "button",
+      onClick: close,
+      className: formButton,
+      children: "Cancel"
+    }), invalid && jsx("p", {
+      className: "w-full text-xs text-error-600 dark:text-error-400",
+      role: "alert",
+      children: "Use an http(s), mailto: or tel: link."
+    })]
+  });
+}
+var formButton = "h-8 rounded-md px-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-200 dark:hover:bg-gray-800";
+/**
+ * A WAI-ARIA toolbar: one tab stop, arrow keys / Home / End move between the
+ * buttons (roving tabindex), toggles report `aria-pressed`.
+ */
+function RichTextToolbar(_ref2) {
+  var editor = _ref2.editor,
+    state = _ref2.state,
+    items = _ref2.items,
+    disabled = _ref2.disabled,
+    controlsId = _ref2.controlsId,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "Formatting" : _ref2$label;
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusIndex = _useState6[0],
+    setFocusIndex = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    linkOpen = _useState8[0],
+    setLinkOpen = _useState8[1];
+  var buttons = useRef([]);
+  var keys = items.filter(function (k) {
+    return TOOLBAR_ITEMS[k];
+  });
+  var moveFocus = function moveFocus(i) {
+    var _buttons$current$next;
+    var next = (i + keys.length) % keys.length;
+    setFocusIndex(next);
+    (_buttons$current$next = buttons.current[next]) === null || _buttons$current$next === void 0 || _buttons$current$next.focus();
+  };
+  var onKeyDown = function onKeyDown(e) {
+    var map = {
+      ArrowRight: focusIndex + 1,
+      ArrowLeft: focusIndex - 1,
+      Home: 0,
+      End: keys.length - 1
+    };
+    if (!(e.key in map)) return;
+    e.preventDefault();
+    moveFocus(map[e.key]);
+  };
+  var activate = function activate(key) {
+    if (!editor) return;
+    if (key === "link") {
+      setLinkOpen(function (open) {
+        return !open;
+      });
+      return;
+    }
+    var item = TOOLBAR_ITEMS[key];
+    if (!item.toggle && state && !state[key]) return;
+    item.run(editor.chain().focus()).run();
+  };
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      role: "toolbar",
+      "aria-label": label,
+      "aria-controls": controlsId,
+      "aria-orientation": "horizontal",
+      onKeyDown: onKeyDown,
+      className: "flex flex-wrap items-center gap-0.5 border-b border-gray-200 bg-gray-50 px-1 py-1 dark:border-gray-700 dark:bg-gray-800/60",
+      children: keys.map(function (key, i) {
+        var item = TOOLBAR_ITEMS[key];
+        var Icon = item.icon;
+        var pressed = item.toggle ? Boolean(state === null || state === void 0 ? void 0 : state[key]) || key === "link" && linkOpen : undefined;
+        var unavailable = !item.toggle && state ? !state[key] : false;
+        var newGroup = i > 0 && TOOLBAR_ITEMS[keys[i - 1]].group !== item.group;
+        return jsxs(React.Fragment, {
+          children: [newGroup && jsx("span", {
+            className: "mx-1 h-5 w-px bg-gray-300 dark:bg-gray-600",
+            "aria-hidden": "true"
+          }), jsx("button", {
+            ref: function ref(node) {
+              buttons.current[i] = node;
+            },
+            type: "button",
+            tabIndex: i === focusIndex ? 0 : -1,
+            "aria-label": item.label,
+            "aria-pressed": pressed,
+            "aria-disabled": unavailable || undefined,
+            "aria-keyshortcuts": item.shortcut ? item.shortcut.replace("Mod", isMac ? "Meta" : "Control").replace(/-/g, "+") : undefined,
+            title: item.shortcut ? "".concat(item.label, " (").concat(shortcutLabel(item.shortcut), ")") : item.label,
+            disabled: disabled || !editor,
+            onFocus: function onFocus() {
+              return setFocusIndex(i);
+            },
+            onMouseDown: function onMouseDown(e) {
+              return e.preventDefault();
+            },
+            onClick: function onClick() {
+              return activate(key);
+            },
+            className: cn("inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-600 transition-colors", "hover:bg-gray-200 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", pressed && "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300", unavailable && "opacity-40"),
+            children: jsx(Icon, {
+              className: "h-4 w-4",
+              "aria-hidden": "true"
+            })
+          })]
+        }, key);
+      })
+    }), linkOpen && editor && jsx(LinkForm, {
+      editor: editor,
+      onClose: function onClose() {
+        return setLinkOpen(false);
+      }
+    })]
+  });
+}
+
+export { DEFAULT_TOOLBAR, RichTextToolbar, TOOLBAR_ITEMS, normalizeUrl, selectToolbarState };