@notum-cz/strapi-plugin-tiptap-editor 1.0.1

package/dist/_chunks/RichTextInput-DgT88AkO.mjs

@@ -0,0 +1,1175 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { t as toolbarButton, N as Node3, b as textblockTypeInputRule, m as mergeAttributes, E as Extension, c as callOrReturn, g as getExtensionField, i as isNodeEmpty, d as isNodeSelection, u as useTiptapEditor, e as useAccentCursive, B as BaseTiptapInput, s as spacer, A as AccentCursiveMark } from "./AccentCursive-CpAPpH9C.mjs";
+import StarterKit from "@tiptap/starter-kit";
+import { useEditorState } from "@tiptap/react";
+import { Quotes, Code, NumberList, BulletList, StrikeThrough, Underline, Italic, Bold, Link, GridNine } from "@strapi/icons";
+import React, { useState, useRef, useEffect, forwardRef } from "react";
+import { Dialog, Field, TextInput, Button, SingleSelect, SingleSelectOption, Flex } from "@strapi/design-system";
+import Superscript from "@tiptap/extension-superscript";
+import Subscript from "@tiptap/extension-subscript";
+import { TableKit } from "@tiptap/extension-table";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { dropCursor } from "@tiptap/pm/dropcursor";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+import { gapCursor } from "@tiptap/pm/gapcursor";
+import { history, redo, undo } from "@tiptap/pm/history";
+import TextAlign from "@tiptap/extension-text-align";
+function useStarterKit(editor, props = { disabled: false }) {
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isBold: ctx.editor.isActive("bold") ?? false,
+        canBold: ctx.editor.can().chain().toggleBold().run() ?? false,
+        isItalic: ctx.editor.isActive("italic") ?? false,
+        canItalic: ctx.editor.can().chain().toggleItalic().run() ?? false,
+        isUnderline: ctx.editor.isActive("underline") ?? false,
+        canUnderline: ctx.editor.can().chain().toggleUnderline().run() ?? false,
+        isStrike: ctx.editor.isActive("strike") ?? false,
+        canStrike: ctx.editor.can().chain().toggleStrike().run() ?? false,
+        isCode: ctx.editor.isActive("code") ?? false,
+        canCode: ctx.editor.can().chain().toggleCode().run() ?? false,
+        isBulletList: ctx.editor.isActive("bulletList") ?? false,
+        canToggleBulletList: ctx.editor.can().chain().toggleBulletList().run() ?? false,
+        isOrderedList: ctx.editor.isActive("orderedList") ?? false,
+        canToggleOrderedList: ctx.editor.can().chain().toggleOrderedList().run() ?? false,
+        isBlockquote: ctx.editor.isActive("blockquote") ?? false,
+        canToggleBlockquote: ctx.editor.can().chain().toggleBlockquote().run() ?? false
+      };
+    }
+  });
+  const toggleBold = () => editor?.chain().focus().toggleBold().run();
+  const toggleItalic = () => editor?.chain().focus().toggleItalic().run();
+  const toggleUnderline = () => editor?.chain().focus().toggleUnderline().run();
+  const toggleStrike = () => editor?.chain().focus().toggleStrike().run();
+  const toggleCode = () => editor?.chain().focus().toggleCode().run();
+  const toggleBulletList = () => editor?.chain().focus().toggleBulletList().run();
+  const toggleOrderedList = () => editor?.chain().focus().toggleOrderedList().run();
+  const toggleBlockquote = () => editor?.chain().focus().toggleBlockquote().run();
+  return {
+    boldButton: toolbarButton("bold", {
+      onClick: toggleBold,
+      icon: /* @__PURE__ */ jsx(Bold, {}),
+      active: editorState.isBold,
+      disabled: props.disabled || !editor || !editorState.canBold,
+      tooltip: "Bold"
+    }),
+    italicButton: toolbarButton("italic", {
+      onClick: toggleItalic,
+      icon: /* @__PURE__ */ jsx(Italic, {}),
+      active: editorState.isItalic,
+      disabled: props.disabled || !editor || !editorState.canItalic,
+      tooltip: "Italic"
+    }),
+    underlineButton: toolbarButton("underline", {
+      onClick: toggleUnderline,
+      icon: /* @__PURE__ */ jsx(Underline, {}),
+      active: editorState.isUnderline,
+      disabled: props.disabled || !editor || !editorState.canUnderline,
+      tooltip: "Underline"
+    }),
+    strikeButton: toolbarButton("strike", {
+      onClick: toggleStrike,
+      icon: /* @__PURE__ */ jsx(StrikeThrough, {}),
+      active: editorState.isStrike,
+      disabled: props.disabled || !editor || !editorState.canStrike,
+      tooltip: "Strikethrough"
+    }),
+    bulletButton: toolbarButton("bullet", {
+      onClick: toggleBulletList,
+      icon: /* @__PURE__ */ jsx(BulletList, {}),
+      active: editorState.isBulletList,
+      disabled: props.disabled || !editor || !editorState.canToggleBulletList,
+      tooltip: "Bullet list"
+    }),
+    orderedButton: toolbarButton("ordered", {
+      onClick: toggleOrderedList,
+      icon: /* @__PURE__ */ jsx(NumberList, {}),
+      active: editorState.isOrderedList,
+      disabled: props.disabled || !editor || !editorState.canToggleOrderedList,
+      tooltip: "Numbered list"
+    }),
+    codeButton: toolbarButton("code", {
+      onClick: toggleCode,
+      icon: /* @__PURE__ */ jsx(Code, {}),
+      active: editorState.isCode,
+      disabled: props.disabled || !editor || !editorState.canCode,
+      tooltip: "Inline code"
+    }),
+    blockquoteButton: toolbarButton("quote", {
+      onClick: toggleBlockquote,
+      icon: /* @__PURE__ */ jsx(Quotes, {}),
+      active: editorState.isBlockquote,
+      disabled: props.disabled || !editor || !editorState.canToggleBlockquote,
+      tooltip: "Quote"
+    })
+  };
+}
+const LinkDialog = ({
+  open,
+  url,
+  mode,
+  onClose,
+  onSave,
+  onRemove
+}) => {
+  const [value, setValue] = React.useState(url || "");
+  React.useEffect(() => {
+    if (open) {
+      setValue(url || "");
+    }
+  }, [open, url, mode]);
+  const handleSave = () => {
+    onSave({ url: value.trim() });
+  };
+  const isSaveDisabled = mode === "add" ? value.trim() === "" : false;
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (v) => {
+        if (!v) onClose();
+      },
+      children: open && /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+        /* @__PURE__ */ jsx(Dialog.Header, { children: mode === "add" ? "Add link" : "Edit link" }),
+        /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Field.Root, { width: "100%", children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "URL" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "link-url",
+              placeholder: "https://example.com",
+              value,
+              onChange: (e) => setValue(e.target.value)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+          /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", fullWidth: true, onClick: onClose, children: "Cancel" }) }),
+          mode === "edit" && /* @__PURE__ */ jsx(Button, { variant: "danger-light", fullWidth: true, onClick: onRemove, children: "Remove link" }),
+          /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              fullWidth: true,
+              variant: "success-light",
+              onClick: handleSave,
+              disabled: isSaveDisabled,
+              children: "Save"
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+};
+function useLink(editor, props = { disabled: false }) {
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isLink: ctx.editor.isActive("link") ?? false,
+        canSetLink: ctx.editor.can().setLink?.({ href: "https://example.com" }) ?? true
+      };
+    }
+  });
+  const [showLinkDialog, setShowLinkDialog] = useState(false);
+  const [currentLinkUrl, setCurrentLinkUrl] = useState("");
+  const [linkDialogMode, setLinkDialogMode] = useState("add");
+  const selectionRef = useRef(null);
+  const openAddLinkDialog = () => {
+    if (!editor) return;
+    const { from, to } = editor.state.selection;
+    selectionRef.current = { from, to };
+    setCurrentLinkUrl("");
+    setLinkDialogMode("add");
+    setShowLinkDialog(true);
+  };
+  const openEditLinkDialog = () => {
+    if (!editor) return;
+    const { from, to } = editor.state.selection;
+    selectionRef.current = { from, to };
+    const currentHref = editor.getAttributes("link").href || "";
+    setCurrentLinkUrl(currentHref);
+    setLinkDialogMode("edit");
+    setShowLinkDialog(true);
+  };
+  const toggleLink = () => {
+    if (!editor) return;
+    if (editorState.isLink) {
+      openEditLinkDialog();
+    } else {
+      openAddLinkDialog();
+    }
+  };
+  const restoreSelection = () => {
+    if (!editor) return;
+    const sel = selectionRef.current;
+    if (sel) {
+      editor.chain().setTextSelection({ from: sel.from, to: sel.to }).run();
+    }
+  };
+  const handleSaveEditedLink = ({ url }) => {
+    if (!editor) return;
+    restoreSelection();
+    const chain = editor.chain().focus().extendMarkRange("link");
+    if (url === "") {
+      chain.unsetLink().run();
+    } else {
+      chain.updateAttributes("link", { href: url }).run();
+    }
+    setShowLinkDialog(false);
+  };
+  const handleRemoveLink = () => {
+    if (!editor) return;
+    restoreSelection();
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    setShowLinkDialog(false);
+  };
+  const handleSaveNewLink = ({ url }) => {
+    if (!editor) return;
+    restoreSelection();
+    editor.chain().focus().setLink({ href: url }).run();
+    setShowLinkDialog(false);
+  };
+  return {
+    linkButton: toolbarButton("link", {
+      onClick: toggleLink,
+      icon: /* @__PURE__ */ jsx(Link, {}),
+      active: editorState.isLink,
+      disabled: props.disabled || !editor || !editorState.canSetLink,
+      tooltip: editorState.isLink ? "Edit or remove link" : "Add link"
+    }),
+    linkDialog: /* @__PURE__ */ jsx(
+      LinkDialog,
+      {
+        open: showLinkDialog,
+        url: currentLinkUrl,
+        mode: linkDialogMode,
+        onClose: () => setShowLinkDialog(false),
+        onSave: linkDialogMode === "add" ? handleSaveNewLink : handleSaveEditedLink,
+        onRemove: handleRemoveLink
+      }
+    )
+  };
+}
+var Heading = Node3.create({
+  name: "heading",
+  addOptions() {
+    return {
+      levels: [1, 2, 3, 4, 5, 6],
+      HTMLAttributes: {}
+    };
+  },
+  content: "inline*",
+  group: "block",
+  defining: true,
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return this.options.levels.map((level) => ({
+      tag: `h${level}`,
+      attrs: { level }
+    }));
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const hasLevel = this.options.levels.includes(node.attrs.level);
+    const level = hasLevel ? node.attrs.level : this.options.levels[0];
+    return [`h${level}`, mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  parseMarkdown: (token, helpers) => {
+    return helpers.createNode("heading", { level: token.depth || 1 }, helpers.parseInline(token.tokens || []));
+  },
+  renderMarkdown: (node, h) => {
+    var _a;
+    const level = ((_a = node.attrs) == null ? void 0 : _a.level) ? parseInt(node.attrs.level, 10) : 1;
+    const headingChars = "#".repeat(level);
+    if (!node.content) {
+      return "";
+    }
+    return `${headingChars} ${h.renderChildren(node.content)}`;
+  },
+  addCommands() {
+    return {
+      setHeading: (attributes) => ({ commands }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands.setNode(this.name, attributes);
+      },
+      toggleHeading: (attributes) => ({ commands }) => {
+        if (!this.options.levels.includes(attributes.level)) {
+          return false;
+        }
+        return commands.toggleNode(this.name, "paragraph", attributes);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return this.options.levels.reduce(
+      (items, level) => ({
+        ...items,
+        ...{
+          [`Mod-Alt-${level}`]: () => this.editor.commands.toggleHeading({ level })
+        }
+      }),
+      {}
+    );
+  },
+  addInputRules() {
+    return this.options.levels.map((level) => {
+      return textblockTypeInputRule({
+        find: new RegExp(`^(#{${Math.min(...this.options.levels)},${level}})\\s$`),
+        type: this.type,
+        getAttributes: {
+          level
+        }
+      });
+    });
+  }
+});
+var index_default = Heading;
+const HeadingWithSEOTag = index_default.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      // must cast to any to avoid TS error
+      tag: { default: null }
+    };
+  }
+}).configure({ levels: [1, 2, 3, 4] });
+function useHeading(editor, props = { disabled: false }) {
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        headingLevel: ctx.editor.getAttributes("heading").level,
+        headingTag: ctx.editor.getAttributes("heading").tag,
+        isParagraph: ctx.editor.isActive("paragraph") ?? false
+      };
+    }
+  });
+  const onChangeHeading = (value) => {
+    if (!editor) return;
+    editor.chain().focus();
+    if (value === "p") {
+      editor.chain().focus().setParagraph().run();
+      return;
+    }
+    const level = Number(value[1]);
+    editor.chain().focus().setHeading({ level }).run();
+    if (!editorState.headingTag) {
+      editor.chain().focus().updateAttributes("heading", { tag: `h${level}` }).run();
+    }
+  };
+  const onChangeHeadingTag = (value) => {
+    if (!editor) return;
+    if (!editorState.headingLevel) return;
+    editor.chain().focus().updateAttributes("heading", { tag: value }).run();
+  };
+  return {
+    headingSelect: /* @__PURE__ */ jsxs(
+      SingleSelect,
+      {
+        placeholder: "Style",
+        "aria-label": "Text style",
+        value: editorState.headingLevel ? `h${editorState.headingLevel}` : "p",
+        onChange: (v) => v && onChangeHeading(v),
+        disabled: !editor || props.disabled,
+        size: "S",
+        children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "p", children: "Paragraph" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "Heading 1" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "Heading 2" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "Heading 3" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "Heading 4" })
+        ]
+      }
+    ),
+    headingTagSelect: /* @__PURE__ */ jsxs(
+      SingleSelect,
+      {
+        placeholder: "SEO Tag",
+        "aria-label": "Heading's HTML tag for SEO purposes",
+        value: editorState.headingTag,
+        onChange: (v) => v && onChangeHeadingTag(v),
+        disabled: !editor || props.disabled || !editorState.headingLevel,
+        size: "S",
+        children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h1", children: "h1" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h2", children: "h2" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h3", children: "h3" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h4", children: "h4" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h5", children: "h5" }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "h6", children: "h6" })
+        ]
+      }
+    )
+  };
+}
+function useScript(editor, props = { disabled: false }) {
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isSuperscript: ctx.editor.isActive("superscript") ?? false,
+        canToggleSuperscript: ctx.editor.can().chain().toggleSuperscript().run() ?? false,
+        isSubscript: ctx.editor.isActive("subscript") ?? false,
+        canToggleSubscript: ctx.editor.can().chain().toggleSubscript().run() ?? false
+      };
+    }
+  });
+  const toggleSuperscript = () => {
+    editor?.chain().focus().toggleSuperscript().run();
+  };
+  const toggleSubscript = () => {
+    editor?.chain().focus().toggleSubscript().run();
+  };
+  return {
+    superscriptButton: toolbarButton("superscript", {
+      onClick: toggleSuperscript,
+      icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "x",
+        /* @__PURE__ */ jsx("sup", { children: "2" })
+      ] }),
+      active: editorState.isSuperscript,
+      disabled: props.disabled || !editor || !editorState.canToggleSuperscript,
+      tooltip: "Superscript"
+    }),
+    subscriptButton: toolbarButton("subscript", {
+      onClick: toggleSubscript,
+      icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "x",
+        /* @__PURE__ */ jsx("sub", { children: "2" })
+      ] }),
+      active: editorState.isSubscript,
+      disabled: props.disabled || !editor || !editorState.canToggleSubscript,
+      tooltip: "Subscript"
+    })
+  };
+}
+Extension.create({
+  name: "characterCount",
+  addOptions() {
+    return {
+      limit: null,
+      mode: "textSize",
+      textCounter: (text) => text.length,
+      wordCounter: (text) => text.split(" ").filter((word) => word !== "").length
+    };
+  },
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0
+    };
+  },
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      const mode = (options == null ? void 0 : options.mode) || this.options.mode;
+      if (mode === "textSize") {
+        const text = node.textBetween(0, node.content.size, void 0, " ");
+        return this.options.textCounter(text);
+      }
+      return node.nodeSize;
+    };
+    this.storage.words = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, " ", " ");
+      return this.options.wordCounter(text);
+    };
+  },
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+    return [
+      new Plugin({
+        key: new PluginKey("characterCount"),
+        appendTransaction: (transactions, oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+          const limit = this.options.limit;
+          if (limit === null || limit === void 0 || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+            console.warn(
+              `[CharacterCount] Initial content exceeded limit of ${limit} characters. Content was automatically trimmed.`
+            );
+            const tr = newState.tr.deleteRange(from, to);
+            initialEvaluationDone = true;
+            return tr;
+          }
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const limit = this.options.limit;
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === void 0) {
+            return true;
+          }
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+          if (newSize <= limit) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+          const isPaste = transaction.getMeta("paste");
+          if (!isPaste) {
+            return false;
+          }
+          const pos = transaction.selection.$head.pos;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+          transaction.deleteRange(from, to);
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+          if (updatedSize > limit) {
+            return false;
+          }
+          return true;
+        }
+      })
+    ];
+  }
+});
+Extension.create({
+  name: "dropCursor",
+  addOptions() {
+    return {
+      color: "currentColor",
+      width: 1,
+      class: void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    return [dropCursor(this.options)];
+  }
+});
+Extension.create({
+  name: "focus",
+  addOptions() {
+    return {
+      className: "has-focus",
+      mode: "all"
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("focus"),
+        props: {
+          decorations: ({ doc, selection }) => {
+            const { isEditable, isFocused } = this.editor;
+            const { anchor } = selection;
+            const decorations = [];
+            if (!isEditable || !isFocused) {
+              return DecorationSet.create(doc, []);
+            }
+            let maxLevels = 0;
+            if (this.options.mode === "deepest") {
+              doc.descendants((node, pos) => {
+                if (node.isText) {
+                  return;
+                }
+                const isCurrent = anchor >= pos && anchor <= pos + node.nodeSize - 1;
+                if (!isCurrent) {
+                  return false;
+                }
+                maxLevels += 1;
+              });
+            }
+            let currentLevel = 0;
+            doc.descendants((node, pos) => {
+              if (node.isText) {
+                return false;
+              }
+              const isCurrent = anchor >= pos && anchor <= pos + node.nodeSize - 1;
+              if (!isCurrent) {
+                return false;
+              }
+              currentLevel += 1;
+              const outOfScope = this.options.mode === "deepest" && maxLevels - currentLevel > 0 || this.options.mode === "shallowest" && currentLevel > 1;
+              if (outOfScope) {
+                return this.options.mode === "deepest";
+              }
+              decorations.push(
+                Decoration.node(pos, pos + node.nodeSize, {
+                  class: this.options.className
+                })
+              );
+            });
+            return DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+var Gapcursor = Extension.create({
+  name: "gapCursor",
+  addProseMirrorPlugins() {
+    return [gapCursor()];
+  },
+  extendNodeSchema(extension) {
+    var _a;
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage
+    };
+    return {
+      allowGapCursor: (_a = callOrReturn(getExtensionField(extension, "allowGapCursor", context))) != null ? _a : null
+    };
+  }
+});
+var DEFAULT_DATA_ATTRIBUTE = "placeholder";
+function preparePlaceholderAttribute(attr) {
+  return attr.replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/^[0-9-]+/, "").replace(/^-+/, "").toLowerCase();
+}
+Extension.create({
+  name: "placeholder",
+  addOptions() {
+    return {
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty",
+      dataAttribute: DEFAULT_DATA_ATTRIBUTE,
+      placeholder: "Write something …",
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+      includeChildren: false
+    };
+  },
+  addProseMirrorPlugins() {
+    const dataAttribute = this.options.dataAttribute ? `data-${preparePlaceholderAttribute(this.options.dataAttribute)}` : `data-${DEFAULT_DATA_ATTRIBUTE}`;
+    return [
+      new Plugin({
+        key: new PluginKey("placeholder"),
+        props: {
+          decorations: ({ doc, selection }) => {
+            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable;
+            const { anchor } = selection;
+            const decorations = [];
+            if (!active) {
+              return null;
+            }
+            const isEmptyDoc = this.editor.isEmpty;
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
+              const isEmpty = !node.isLeaf && isNodeEmpty(node);
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
+                const classes = [this.options.emptyNodeClass];
+                if (isEmptyDoc) {
+                  classes.push(this.options.emptyEditorClass);
+                }
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                  class: classes.join(" "),
+                  [dataAttribute]: typeof this.options.placeholder === "function" ? this.options.placeholder({
+                    editor: this.editor,
+                    node,
+                    pos,
+                    hasAnchor
+                  }) : this.options.placeholder
+                });
+                decorations.push(decoration);
+              }
+              return this.options.includeChildren;
+            });
+            return DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+Extension.create({
+  name: "selection",
+  addOptions() {
+    return {
+      className: "selection"
+    };
+  },
+  addProseMirrorPlugins() {
+    const { editor, options } = this;
+    return [
+      new Plugin({
+        key: new PluginKey("selection"),
+        props: {
+          decorations(state) {
+            if (state.selection.empty || editor.isFocused || !editor.isEditable || isNodeSelection(state.selection) || editor.view.dragging) {
+              return null;
+            }
+            return DecorationSet.create(state.doc, [
+              Decoration.inline(state.selection.from, state.selection.to, {
+                class: options.className
+              })
+            ]);
+          }
+        }
+      })
+    ];
+  }
+});
+function nodeEqualsType({ types, node }) {
+  return node && Array.isArray(types) && types.includes(node.type) || (node == null ? void 0 : node.type) === types;
+}
+Extension.create({
+  name: "trailingNode",
+  addOptions() {
+    return {
+      node: void 0,
+      notAfter: []
+    };
+  },
+  addProseMirrorPlugins() {
+    var _a;
+    const plugin = new PluginKey(this.name);
+    const defaultNode = this.options.node || ((_a = this.editor.schema.topNodeType.contentMatch.defaultType) == null ? void 0 : _a.name) || "paragraph";
+    const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => (this.options.notAfter || []).concat(defaultNode).includes(node.name));
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state;
+          const shouldInsertNodeAtEnd = plugin.getState(state);
+          const endPosition = doc.content.size;
+          const type = schema.nodes[defaultNode];
+          if (!shouldInsertNodeAtEnd) {
+            return;
+          }
+          return tr.insert(endPosition, type.create());
+        },
+        state: {
+          init: (_, state) => {
+            const lastNode = state.tr.doc.lastChild;
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value;
+            }
+            if (tr.getMeta("__uniqueIDTransaction")) {
+              return value;
+            }
+            const lastNode = tr.doc.lastChild;
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          }
+        }
+      })
+    ];
+  }
+});
+Extension.create({
+  name: "undoRedo",
+  addOptions() {
+    return {
+      depth: 100,
+      newGroupDelay: 500
+    };
+  },
+  addCommands() {
+    return {
+      undo: () => ({ state, dispatch }) => {
+        return undo(state, dispatch);
+      },
+      redo: () => ({ state, dispatch }) => {
+        return redo(state, dispatch);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [history(this.options)];
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-z": () => this.editor.commands.undo(),
+      "Shift-Mod-z": () => this.editor.commands.redo(),
+      "Mod-y": () => this.editor.commands.redo(),
+      // Russian keyboard layouts
+      "Mod-я": () => this.editor.commands.undo(),
+      "Shift-Mod-я": () => this.editor.commands.redo()
+    };
+  }
+});
+const clamp = (val, min, max) => Math.max(min, Math.min(max, val));
+const parseNum = (value, fallback) => {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+const TableSizeDialog = ({
+  open,
+  defaultRows = 3,
+  defaultCols = 3,
+  onClose,
+  onSave
+}) => {
+  const [rows, setRows] = useState(defaultRows);
+  const [cols, setCols] = useState(defaultCols);
+  useEffect(() => {
+    if (open) {
+      setRows(defaultRows);
+      setCols(defaultCols);
+    }
+  }, [open, defaultRows, defaultCols]);
+  const min = 1;
+  const max = 10;
+  const isValid = rows >= min && rows <= max && cols >= min && cols <= max;
+  const handleSave = () => {
+    if (!isValid) return;
+    onSave(clamp(rows, min, max), clamp(cols, min, max));
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (v) => {
+        if (!v) onClose();
+      },
+      children: open && /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+        /* @__PURE__ */ jsx(Dialog.Header, { children: "Insert table" }),
+        /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "flex-end", children: [
+          /* @__PURE__ */ jsxs(Field.Root, { width: "100%", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Rows" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "table-rows",
+                type: "number",
+                value: String(rows),
+                onChange: (e) => setRows(clamp(parseNum(e.target.value, rows), min, max)),
+                placeholder: String(defaultRows)
+              }
+            ),
+            /* @__PURE__ */ jsxs(Field.Hint, { children: [
+              "Min ",
+              min,
+              ", max ",
+              max
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Field.Root, { width: "100%", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Columns" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "table-cols",
+                type: "number",
+                value: String(cols),
+                onChange: (e) => setCols(clamp(parseNum(e.target.value, cols), min, max)),
+                placeholder: String(defaultCols)
+              }
+            ),
+            /* @__PURE__ */ jsxs(Field.Hint, { children: [
+              "Min ",
+              min,
+              ", max ",
+              max
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+          /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", fullWidth: true, onClick: onClose, children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "success-light", onClick: handleSave, disabled: !isValid, children: "Insert" }) })
+        ] })
+      ] })
+    }
+  );
+};
+function useTable(editor, props = { disabled: false }) {
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isTable: ctx.editor.isActive("table") ?? false,
+        canInsertTable: ctx.editor.can().chain().insertTable().run() ?? false,
+        canAddColumn: ctx.editor.can().chain().addColumnAfter().run() ?? false,
+        canDeleteColumn: ctx.editor.can().chain().deleteColumn().run() ?? false,
+        canAddRow: ctx.editor.can().chain().addRowAfter().run() ?? false,
+        canDeleteRow: ctx.editor.can().chain().deleteRow().run() ?? false
+      };
+    }
+  });
+  const [open, setOpen] = useState(false);
+  const handleOpenDialog = () => {
+    if (!editor) return;
+    setOpen(true);
+  };
+  const handleInsert = (rows, cols) => {
+    if (!editor) return;
+    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+    setOpen(false);
+  };
+  const addColumn = () => editor?.chain().focus().addColumnAfter().run();
+  const removeColumn = () => editor?.chain().focus().deleteColumn().run();
+  const addRow = () => editor?.chain().focus().addRowAfter().run();
+  const removeRow = () => editor?.chain().focus().deleteRow().run();
+  return {
+    tableButton: toolbarButton("table", {
+      onClick: handleOpenDialog,
+      icon: /* @__PURE__ */ jsx(GridNine, {}),
+      active: editorState.isTable,
+      disabled: props.disabled || !editor || !editorState.canInsertTable,
+      tooltip: "Table"
+    }),
+    // Adding table manipulation buttons
+    addColumnButton: toolbarButton("tableAddColumn", {
+      onClick: addColumn,
+      icon: /* @__PURE__ */ jsx(Fragment, { children: "+Col" }),
+      active: false,
+      hidden: props.disabled || !editor || !editorState.canAddColumn,
+      tooltip: "Add column (to the right)"
+    }),
+    removeColumnButton: toolbarButton("tableRemoveColumn", {
+      onClick: removeColumn,
+      icon: /* @__PURE__ */ jsx(Fragment, { children: "-Col" }),
+      active: false,
+      hidden: props.disabled || !editor || !editorState.canDeleteColumn,
+      tooltip: "Remove column"
+    }),
+    addRowButton: toolbarButton("tableAddRow", {
+      onClick: addRow,
+      icon: /* @__PURE__ */ jsx(Fragment, { children: "+Row" }),
+      active: false,
+      hidden: props.disabled || !editor || !editorState.canAddRow,
+      tooltip: "Add row (below)"
+    }),
+    removeRowButton: toolbarButton("tableRemoveRow", {
+      onClick: removeRow,
+      icon: /* @__PURE__ */ jsx(Fragment, { children: "-Row" }),
+      active: false,
+      hidden: props.disabled || !editor || !editorState.canDeleteRow,
+      tooltip: "Remove row"
+    }),
+    tableDialog: /* @__PURE__ */ jsx(
+      TableSizeDialog,
+      {
+        open,
+        onClose: () => setOpen(false),
+        onSave: handleInsert,
+        defaultRows: 3,
+        defaultCols: 3
+      }
+    )
+  };
+}
+function TextAlignLeft(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 10H16M3 14H21M3 18H16M3 6H21",
+          stroke: "#000000",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+function TextAlignJustify(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 10H21M3 14H21M3 18H21M3 6H21",
+          stroke: "#000000",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+function TextAlignRight(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M8 10H21M3 14H21M8 18H21M3 6H21",
+          stroke: "#000000",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+function TextAlignCenter(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 6H21M3 14H21M17 10H7M17 18H7",
+          stroke: "#000000",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+function useTextAlign(editor, props = { disabled: false }) {
+  const editorState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isTextAlignLeft: ctx.editor.isActive({ textAlign: "left" }) ?? false,
+        isTextAlignRight: ctx.editor.isActive({ textAlign: "right" }) ?? false,
+        isTextAlignCenter: ctx.editor.isActive({ textAlign: "center" }) ?? false,
+        isTextAlignJustify: ctx.editor.isActive({ textAlign: "justify" }) ?? false,
+        canToggleAlign: ctx.editor.can().chain().setTextAlign("left").run() ?? false
+      };
+    }
+  });
+  const setTextAlign = (alignment) => {
+    editor.chain().focus().setTextAlign(alignment).run();
+  };
+  return {
+    textAlignLeftButton: toolbarButton("text-align-left", {
+      onClick: () => setTextAlign("left"),
+      icon: /* @__PURE__ */ jsx(TextAlignLeft, {}),
+      active: editorState.isTextAlignLeft,
+      disabled: props.disabled || !editor || !editorState.canToggleAlign,
+      tooltip: "Text Align Left"
+    }),
+    textAlignCenterButton: toolbarButton("text-align-center", {
+      onClick: () => setTextAlign("center"),
+      icon: /* @__PURE__ */ jsx(TextAlignCenter, {}),
+      active: editorState.isTextAlignCenter,
+      disabled: props.disabled || !editor || !editorState.canToggleAlign,
+      tooltip: "Text Align Center"
+    }),
+    textAlignRightButton: toolbarButton("text-align-right", {
+      onClick: () => setTextAlign("right"),
+      icon: /* @__PURE__ */ jsx(TextAlignRight, {}),
+      active: editorState.isTextAlignRight,
+      disabled: props.disabled || !editor || !editorState.canToggleAlign,
+      tooltip: "Text Align Right"
+    }),
+    textAlignJustifyButton: toolbarButton("text-align-justify", {
+      onClick: () => setTextAlign("justify"),
+      icon: /* @__PURE__ */ jsx(TextAlignJustify, {}),
+      active: editorState.isTextAlignJustify,
+      disabled: props.disabled || !editor || !editorState.canToggleAlign,
+      tooltip: "Text Align Justify"
+    })
+  };
+}
+const extensions = [
+  StarterKit.configure({
+    heading: false,
+    // disable default so we can use our custom version
+    link: {
+      openOnClick: false
+    }
+  }),
+  HeadingWithSEOTag,
+  AccentCursiveMark,
+  Superscript,
+  Subscript,
+  Gapcursor,
+  // cursor for resizing tables
+  TableKit.configure({
+    table: { resizable: true }
+  }),
+  TextAlign.configure({
+    types: ["heading", "paragraph"]
+  })
+];
+const RichTextInput = forwardRef((props, forwardedRef) => {
+  const { editor, field } = useTiptapEditor(props.name, "", extensions);
+  const starterKit = useStarterKit(editor, { disabled: props.disabled });
+  const heading = useHeading(editor, { disabled: props.disabled });
+  const accentCursive = useAccentCursive(editor, { disabled: props.disabled });
+  const link = useLink(editor, { disabled: props.disabled });
+  const script = useScript(editor, { disabled: props.disabled });
+  const table = useTable(editor, { disabled: props.disabled });
+  const textAlign = useTextAlign(editor, { disabled: props.disabled });
+  return /* @__PURE__ */ jsxs(BaseTiptapInput, { editor, field, ...props, ref: forwardedRef, children: [
+    heading.headingSelect,
+    heading.headingTagSelect,
+    spacer(8),
+    starterKit.boldButton,
+    starterKit.italicButton,
+    accentCursive.button,
+    starterKit.underlineButton,
+    starterKit.strikeButton,
+    script.superscriptButton,
+    script.subscriptButton,
+    spacer(8),
+    textAlign.textAlignLeftButton,
+    textAlign.textAlignCenterButton,
+    textAlign.textAlignRightButton,
+    textAlign.textAlignJustifyButton,
+    spacer(8),
+    starterKit.bulletButton,
+    starterKit.orderedButton,
+    spacer(8),
+    starterKit.codeButton,
+    starterKit.blockquoteButton,
+    link.linkButton,
+    link.linkDialog,
+    spacer(8),
+    table.tableButton,
+    table.addColumnButton,
+    table.removeColumnButton,
+    table.addRowButton,
+    table.removeRowButton,
+    table.tableDialog
+  ] });
+});
+export {
+  RichTextInput as default
+};
+//# sourceMappingURL=RichTextInput-DgT88AkO.mjs.map