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

package/dist/_chunks/{RichTextInput-BlxoJMa2.js → RichTextInput-Wc2q__HY.js}

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const designSystem = require("@strapi/design-system");
 const react = require("@tiptap/react");
 const styled = require("styled-components");
-const React = require("react");
 const admin = require("@strapi/strapi/admin");
-const StarterKit = require("@tiptap/starter-kit");
 const icons = require("@strapi/icons");
 const transform = require("@tiptap/pm/transform");
 const commands = require("@tiptap/pm/commands");
@@ -15,16 +14,17 @@ const model = require("@tiptap/pm/model");
 const schemaList = require("@tiptap/pm/schema-list");
 const view = require("@tiptap/pm/view");
 require("@tiptap/pm/keymap");
+const StarterKit = require("@tiptap/starter-kit");
 const Superscript = require("@tiptap/extension-superscript");
 const Subscript = require("@tiptap/extension-subscript");
 const extensionTable = require("@tiptap/extension-table");
+const TextAlign = require("@tiptap/extension-text-align");
 const dropcursor = require("@tiptap/pm/dropcursor");
 const gapcursor = require("@tiptap/pm/gapcursor");
 const history = require("@tiptap/pm/history");
-const TextAlign = require("@tiptap/extension-text-align");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const React__default = /* @__PURE__ */ _interopDefault(React);
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const StarterKit__default = /* @__PURE__ */ _interopDefault(StarterKit);
 const Superscript__default = /* @__PURE__ */ _interopDefault(Superscript);
 const Subscript__default = /* @__PURE__ */ _interopDefault(Subscript);
@@ -216,7 +216,7 @@ const TiptapInputStyles = styled__default.default.div`
   }
 `;
 const BaseTiptapInput = React.forwardRef(
-  ({ hint, disabled = false, labelAction, label, name, required = false, editor, field, children }, forwardedRef) => {
+  ({ hint, disabled = false, labelAction, label, name, required = false, editor, field, children, noPresetConfigured }, forwardedRef) => {
     const borderColor = field.error ? "danger600" : "neutral200";
     const background = disabled ? "neutral200" : "neutral100";
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, id: name, hint, error: field.error, required, children: [
@@ -233,6 +233,7 @@ const BaseTiptapInput = React.forwardRef(
           paddingLeft: 0,
           paddingRight: 0,
           children: [
+            noPresetConfigured && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Status, { variant: "secondary", showBullet: false, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "No editor preset configured — showing minimal editor" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { className: "editor-toolbar", paddingLeft: 2, paddingRight: 2, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 1, wrap: "wrap", children }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               designSystem.Box,
@@ -254,6 +255,71 @@ const BaseTiptapInput = React.forwardRef(
     ] });
   }
 );
+class EditorErrorBoundary extends React.Component {
+  state = { hasError: false, error: null };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[TiptapEditor] Editor crashed:", error, errorInfo);
+  }
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "danger100", hasRadius: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "danger700", children: "The editor encountered an error and could not render." }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", size: "S", onClick: this.handleRetry, children: "Retry" }) })
+      ] });
+    }
+    return this.props.children;
+  }
+}
+const MINIMAL_PRESET_CONFIG = {
+  bold: true,
+  italic: true
+};
+const isPlainObject$1 = (value) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
+const isFeatureEnabled = (value) => {
+  if (value === void 0) {
+    return true;
+  }
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (!isPlainObject$1(value)) {
+    return false;
+  }
+  const obj = value;
+  if (typeof obj.enabled === "boolean") {
+    return obj.enabled;
+  }
+  if (typeof obj.disabled === "boolean") {
+    return !obj.disabled;
+  }
+  return true;
+};
+const getFeatureOptions = (value, defaults) => {
+  if (value === false) {
+    return null;
+  }
+  if (!isPlainObject$1(value)) {
+    return defaults;
+  }
+  const { enabled: _e, disabled: _d, ...rest } = value;
+  return { ...defaults, ...rest };
+};
+function FeatureGuard({ featureValue, children }) {
+  if (!isFeatureEnabled(featureValue)) {
+    return null;
+  }
+  return children;
+}
 function tiptapContent(text) {
   return {
     type: "doc",
@@ -284,10 +350,10 @@ function parseJSONContent(value, defaultValue) {
         `);
   }
 }
-function useTiptapEditor(name, defaultValue = "", extensions2 = []) {
+function useTiptapEditor(name, defaultValue = "", extensions = []) {
   const field = admin.useField(name);
   const editor = react.useEditor({
-    extensions: extensions2,
+    extensions,
     content: parseJSONContent(field.value, defaultValue),
     onUpdate: ({ editor: editor2 }) => {
       const json = editor2.getJSON();
@@ -1679,10 +1745,10 @@ function callOrReturn(value, context = void 0, ...props) {
   }
   return value;
 }
-function splitExtensions(extensions2) {
-  const baseExtensions = extensions2.filter((extension) => extension.type === "extension");
-  const nodeExtensions = extensions2.filter((extension) => extension.type === "node");
-  const markExtensions = extensions2.filter((extension) => extension.type === "mark");
+function splitExtensions(extensions) {
+  const baseExtensions = extensions.filter((extension) => extension.type === "extension");
+  const nodeExtensions = extensions.filter((extension) => extension.type === "node");
+  const markExtensions = extensions.filter((extension) => extension.type === "mark");
   return {
     baseExtensions,
     nodeExtensions,
@@ -1871,8 +1937,8 @@ function isMarkActive(state2, typeOrName, attributes = {}) {
   const range = matchedRange > 0 ? matchedRange + excludedRange : matchedRange;
   return range >= selectionRange;
 }
-function isList(name, extensions2) {
-  const { nodeExtensions } = splitExtensions(extensions2);
+function isList(name, extensions) {
+  const { nodeExtensions } = splitExtensions(extensions);
   const extension = nodeExtensions.find((item) => item.name === name);
   if (!extension) {
     return false;
@@ -2258,7 +2324,7 @@ var joinListForwards = (tr, listType) => {
   return true;
 };
 var toggleList = (listTypeOrName, itemTypeOrName, keepMarks, attributes = {}) => ({ editor, tr, state: state2, dispatch, chain, commands: commands2, can }) => {
-  const { extensions: extensions2, splittableMarks } = editor.extensionManager;
+  const { extensions, splittableMarks } = editor.extensionManager;
   const listType = getNodeType(listTypeOrName, state2.schema);
   const itemType = getNodeType(itemTypeOrName, state2.schema);
   const { selection, storedMarks } = state2;
@@ -2268,12 +2334,12 @@ var toggleList = (listTypeOrName, itemTypeOrName, keepMarks, attributes = {}) =>
   if (!range) {
     return false;
   }
-  const parentList = findParentNode((node) => isList(node.type.name, extensions2))(selection);
+  const parentList = findParentNode((node) => isList(node.type.name, extensions))(selection);
   if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
     if (parentList.node.type === listType) {
       return commands2.liftListItem(itemType);
     }
-    if (isList(parentList.node.type.name, extensions2) && listType.validContent(parentList.node.content) && dispatch) {
+    if (isList(parentList.node.type.name, extensions) && listType.validContent(parentList.node.content) && dispatch) {
       return chain().command(() => {
         tr.setNodeMarkup(parentList.pos, listType);
         return true;
@@ -3608,7 +3674,7 @@ var Heading = Node3.create({
   }
 });
 var index_default = Heading;
-const HeadingWithSEOTag = index_default.extend({
+const BaseHeadingWithSEOTag = index_default.extend({
   addAttributes() {
     return {
       ...this.parent?.(),
@@ -3616,7 +3682,8 @@ const HeadingWithSEOTag = index_default.extend({
       tag: { default: null }
     };
   }
-}).configure({ levels: [1, 2, 3, 4] });
+});
+BaseHeadingWithSEOTag.configure({ levels: [1, 2, 3, 4] });
 function useHeading(editor, props = { disabled: false }) {
   const editorState = react.useEditorState({
     editor,
@@ -3735,425 +3802,72 @@ function useScript(editor, props = { disabled: false }) {
     )
   };
 }
-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 state.Plugin({
-        key: new state.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, state2) => {
-          const limit = this.options.limit;
-          if (!transaction.docChanged || limit === 0 || limit === null || limit === void 0) {
-            return true;
-          }
-          const oldSize = this.storage.characters({ node: state2.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.dropCursor(this.options)];
-  }
-});
-Extension.create({
-  name: "focus",
-  addOptions() {
-    return {
-      className: "has-focus",
-      mode: "all"
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      new state.Plugin({
-        key: new state.PluginKey("focus"),
-        props: {
-          decorations: ({ doc, selection }) => {
-            const { isEditable, isFocused } = this.editor;
-            const { anchor } = selection;
-            const decorations = [];
-            if (!isEditable || !isFocused) {
-              return view.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;
+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] = React.useState(defaultRows);
+  const [cols, setCols] = React.useState(defaultCols);
+  React.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__ */ jsxRuntime.jsx(
+    designSystem.Dialog.Root,
+    {
+      open,
+      onOpenChange: (v) => {
+        if (!v) onClose();
+      },
+      children: open && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Header, { children: "Insert table" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "flex-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Rows" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                name: "table-rows",
+                type: "number",
+                value: String(rows),
+                onChange: (e) => setRows(clamp(parseNum(e.target.value, rows), min, max)),
+                placeholder: String(defaultRows)
               }
-              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(
-                view.Decoration.node(pos, pos + node.nodeSize, {
-                  class: this.options.className
-                })
-              );
-            });
-            return view.DecorationSet.create(doc, decorations);
-          }
-        }
-      })
-    ];
-  }
-});
-var Gapcursor = Extension.create({
-  name: "gapCursor",
-  addProseMirrorPlugins() {
-    return [gapcursor.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 state.Plugin({
-        key: new state.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 = view.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 view.DecorationSet.create(doc, decorations);
-          }
-        }
-      })
-    ];
-  }
-});
-Extension.create({
-  name: "selection",
-  addOptions() {
-    return {
-      className: "selection"
-    };
-  },
-  addProseMirrorPlugins() {
-    const { editor, options } = this;
-    return [
-      new state.Plugin({
-        key: new state.PluginKey("selection"),
-        props: {
-          decorations(state2) {
-            if (state2.selection.empty || editor.isFocused || !editor.isEditable || isNodeSelection(state2.selection) || editor.view.dragging) {
-              return null;
-            }
-            return view.DecorationSet.create(state2.doc, [
-              view.Decoration.inline(state2.selection.from, state2.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 state.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 state.Plugin({
-        key: plugin,
-        appendTransaction: (_, __, state2) => {
-          const { doc, tr, schema } = state2;
-          const shouldInsertNodeAtEnd = plugin.getState(state2);
-          const endPosition = doc.content.size;
-          const type = schema.nodes[defaultNode];
-          if (!shouldInsertNodeAtEnd) {
-            return;
-          }
-          return tr.insert(endPosition, type.create());
-        },
-        state: {
-          init: (_, state2) => {
-            const lastNode = state2.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: state2, dispatch }) => {
-        return history.undo(state2, dispatch);
-      },
-      redo: () => ({ state: state2, dispatch }) => {
-        return history.redo(state2, dispatch);
-      }
-    };
-  },
-  addProseMirrorPlugins() {
-    return [history.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] = React.useState(defaultRows);
-  const [cols, setCols] = React.useState(defaultCols);
-  React.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__ */ jsxRuntime.jsx(
-    designSystem.Dialog.Root,
-    {
-      open,
-      onOpenChange: (v) => {
-        if (!v) onClose();
-      },
-      children: open && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Dialog.Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Header, { children: "Insert table" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "flex-end", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { width: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Rows" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
-              {
-                name: "table-rows",
-                type: "number",
-                value: String(rows),
-                onChange: (e) => setRows(clamp(parseNum(e.target.value, rows), min, max)),
-                placeholder: String(defaultRows)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Hint, { children: [
-              "Min ",
-              min,
-              ", max ",
-              max
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { width: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Columns" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
-              {
-                name: "table-cols",
-                type: "number",
-                value: String(cols),
-                onChange: (e) => setCols(clamp(parseNum(e.target.value, cols), min, max)),
-                placeholder: String(defaultCols)
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Hint, { children: [
+              "Min ",
+              min,
+              ", max ",
+              max
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Columns" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                name: "table-cols",
+                type: "number",
+                value: String(cols),
+                onChange: (e) => setCols(clamp(parseNum(e.target.value, cols), min, max)),
+                placeholder: String(defaultCols)
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Hint, { children: [
@@ -4311,140 +4025,597 @@ function TextAlignJustify(props) {
           "stroke-linecap": "round",
           "stroke-linejoin": "round"
         }
-      )
-    }
-  );
-}
-function TextAlignRight(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M8 10H21M3 14H21M8 18H21M3 6H21",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
+      )
+    }
+  );
+}
+function TextAlignRight(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M8 10H21M3 14H21M8 18H21M3 6H21",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+function TextAlignCenter(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3 6H21M3 14H21M17 10H7M17 18H7",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }
+      )
+    }
+  );
+}
+function useTextAlign(editor, props = { disabled: false }) {
+  const editorState = react.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: /* @__PURE__ */ jsxRuntime.jsx(
+      ToolbarButton,
+      {
+        onClick: () => setTextAlign("left"),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignLeft, {}),
+        active: editorState.isTextAlignLeft,
+        disabled: props.disabled || !editor || !editorState.canToggleAlign,
+        tooltip: "Text Align Left"
+      },
+      "text-align-left"
+    ),
+    textAlignCenterButton: /* @__PURE__ */ jsxRuntime.jsx(
+      ToolbarButton,
+      {
+        onClick: () => setTextAlign("center"),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignCenter, {}),
+        active: editorState.isTextAlignCenter,
+        disabled: props.disabled || !editor || !editorState.canToggleAlign,
+        tooltip: "Text Align Center"
+      },
+      "text-align-center"
+    ),
+    textAlignRightButton: /* @__PURE__ */ jsxRuntime.jsx(
+      ToolbarButton,
+      {
+        onClick: () => setTextAlign("right"),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignRight, {}),
+        active: editorState.isTextAlignRight,
+        disabled: props.disabled || !editor || !editorState.canToggleAlign,
+        tooltip: "Text Align Right"
+      },
+      "text-align-right"
+    ),
+    textAlignJustifyButton: /* @__PURE__ */ jsxRuntime.jsx(
+      ToolbarButton,
+      {
+        onClick: () => setTextAlign("justify"),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignJustify, {}),
+        active: editorState.isTextAlignJustify,
+        disabled: props.disabled || !editor || !editorState.canToggleAlign,
+        tooltip: "Text Align Justify"
+      },
+      "text-align-justify"
+    )
+  };
+}
+function usePresetConfig(presetName) {
+  const { get } = admin.useFetchClient();
+  const normalizedPresetName = React.useMemo(
+    () => presetName?.trim() || void 0,
+    [presetName]
+  );
+  const [config, setConfig] = React.useState(
+    normalizedPresetName ? null : MINIMAL_PRESET_CONFIG
+  );
+  const [isLoading, setIsLoading] = React.useState(Boolean(normalizedPresetName));
+  React.useEffect(() => {
+    let mounted = true;
+    if (!normalizedPresetName) {
+      setConfig(MINIMAL_PRESET_CONFIG);
+      setIsLoading(false);
+      return;
+    }
+    const fetchPreset = async () => {
+      setIsLoading(true);
+      try {
+        const response = await get(
+          `/api/tiptap-editor/presets/${normalizedPresetName}`
+        );
+        if (!mounted) return;
+        setConfig(response.data || MINIMAL_PRESET_CONFIG);
+      } catch (error) {
+        console.warn(
+          "[TiptapEditor] Failed to fetch preset config:",
+          error
+        );
+        if (!mounted) return;
+        setConfig(MINIMAL_PRESET_CONFIG);
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+    fetchPreset();
+    return () => {
+      mounted = false;
+    };
+  }, [get, normalizedPresetName]);
+  return { config, isLoading };
+}
+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 state.Plugin({
+        key: new state.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, state2) => {
+          const limit = this.options.limit;
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === void 0) {
+            return true;
+          }
+          const oldSize = this.storage.characters({ node: state2.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.dropCursor(this.options)];
+  }
+});
+Extension.create({
+  name: "focus",
+  addOptions() {
+    return {
+      className: "has-focus",
+      mode: "all"
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new state.Plugin({
+        key: new state.PluginKey("focus"),
+        props: {
+          decorations: ({ doc, selection }) => {
+            const { isEditable, isFocused } = this.editor;
+            const { anchor } = selection;
+            const decorations = [];
+            if (!isEditable || !isFocused) {
+              return view.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(
+                view.Decoration.node(pos, pos + node.nodeSize, {
+                  class: this.options.className
+                })
+              );
+            });
+            return view.DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+var Gapcursor = Extension.create({
+  name: "gapCursor",
+  addProseMirrorPlugins() {
+    return [gapcursor.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 state.Plugin({
+        key: new state.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 = view.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 view.DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+Extension.create({
+  name: "selection",
+  addOptions() {
+    return {
+      className: "selection"
+    };
+  },
+  addProseMirrorPlugins() {
+    const { editor, options } = this;
+    return [
+      new state.Plugin({
+        key: new state.PluginKey("selection"),
+        props: {
+          decorations(state2) {
+            if (state2.selection.empty || editor.isFocused || !editor.isEditable || isNodeSelection(state2.selection) || editor.view.dragging) {
+              return null;
+            }
+            return view.DecorationSet.create(state2.doc, [
+              view.Decoration.inline(state2.selection.from, state2.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;
 }
-function TextAlignCenter(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M3 6H21M3 14H21M17 10H7M17 18H7",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
+Extension.create({
+  name: "trailingNode",
+  addOptions() {
+    return {
+      node: void 0,
+      notAfter: []
+    };
+  },
+  addProseMirrorPlugins() {
+    var _a;
+    const plugin = new state.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 state.Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state2) => {
+          const { doc, tr, schema } = state2;
+          const shouldInsertNodeAtEnd = plugin.getState(state2);
+          const endPosition = doc.content.size;
+          const type = schema.nodes[defaultNode];
+          if (!shouldInsertNodeAtEnd) {
+            return;
+          }
+          return tr.insert(endPosition, type.create());
+        },
+        state: {
+          init: (_, state2) => {
+            const lastNode = state2.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 });
+          }
         }
-      )
-    }
-  );
-}
-function useTextAlign(editor, props = { disabled: false }) {
-  const editorState = react.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: /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
-      {
-        onClick: () => setTextAlign("left"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignLeft, {}),
-        active: editorState.isTextAlignLeft,
-        disabled: props.disabled || !editor || !editorState.canToggleAlign,
-        tooltip: "Text Align Left"
-      },
-      "text-align-left"
-    ),
-    textAlignCenterButton: /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
-      {
-        onClick: () => setTextAlign("center"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignCenter, {}),
-        active: editorState.isTextAlignCenter,
-        disabled: props.disabled || !editor || !editorState.canToggleAlign,
-        tooltip: "Text Align Center"
-      },
-      "text-align-center"
-    ),
-    textAlignRightButton: /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
-      {
-        onClick: () => setTextAlign("right"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignRight, {}),
-        active: editorState.isTextAlignRight,
-        disabled: props.disabled || !editor || !editorState.canToggleAlign,
-        tooltip: "Text Align Right"
-      },
-      "text-align-right"
-    ),
-    textAlignJustifyButton: /* @__PURE__ */ jsxRuntime.jsx(
-      ToolbarButton,
-      {
-        onClick: () => setTextAlign("justify"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(TextAlignJustify, {}),
-        active: editorState.isTextAlignJustify,
-        disabled: props.disabled || !editor || !editorState.canToggleAlign,
-        tooltip: "Text Align Justify"
+      })
+    ];
+  }
+});
+Extension.create({
+  name: "undoRedo",
+  addOptions() {
+    return {
+      depth: 100,
+      newGroupDelay: 500
+    };
+  },
+  addCommands() {
+    return {
+      undo: () => ({ state: state2, dispatch }) => {
+        return history.undo(state2, dispatch);
       },
-      "text-align-justify"
-    )
-  };
-}
-const extensions = [
-  StarterKit__default.default.configure({
+      redo: () => ({ state: state2, dispatch }) => {
+        return history.redo(state2, dispatch);
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [history.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 starterKitFeatureValue = (value) => {
+  if (!isFeatureEnabled(value)) {
+    return false;
+  }
+  return getFeatureOptions(value, {}) ?? {};
+};
+function buildExtensions(config) {
+  const starterKitConfig = {
     heading: false,
-    // disable default so we can use our custom version
-    link: {
-      openOnClick: false
+    // ALWAYS false — heading handled separately via BaseHeadingWithSEOTag
+    bold: starterKitFeatureValue(config.bold),
+    italic: starterKitFeatureValue(config.italic),
+    strike: starterKitFeatureValue(config.strike),
+    code: starterKitFeatureValue(config.code),
+    codeBlock: starterKitFeatureValue(config.codeBlock),
+    blockquote: starterKitFeatureValue(config.blockquote),
+    bulletList: starterKitFeatureValue(config.bulletList),
+    orderedList: starterKitFeatureValue(config.orderedList),
+    hardBreak: starterKitFeatureValue(config.hardBreak),
+    horizontalRule: starterKitFeatureValue(config.horizontalRule),
+    history: starterKitFeatureValue(config.history),
+    link: !isFeatureEnabled(config.link) ? false : {
+      openOnClick: false,
+      ...getFeatureOptions(config.link, {})
     }
-  }),
-  HeadingWithSEOTag,
-  Superscript__default.default,
-  Subscript__default.default,
-  Gapcursor,
-  // cursor for resizing tables
-  extensionTable.TableKit.configure({
-    table: { resizable: true }
-  }),
-  TextAlign__default.default.configure({
-    types: ["heading", "paragraph"]
-  })
-];
+  };
+  const extensions = [
+    StarterKit__default.default.configure(starterKitConfig)
+  ];
+  if (isFeatureEnabled(config.heading)) {
+    const headingConfig = getFeatureOptions(config.heading, {
+      levels: [1, 2, 3, 4]
+    });
+    const levels = headingConfig?.levels || [1, 2, 3, 4];
+    extensions.push(BaseHeadingWithSEOTag.configure({ levels }));
+  }
+  if (isFeatureEnabled(config.superscript)) {
+    extensions.push(Superscript__default.default);
+  }
+  if (isFeatureEnabled(config.subscript)) {
+    extensions.push(Subscript__default.default);
+  }
+  if (isFeatureEnabled(config.table)) {
+    extensions.push(
+      extensionTable.TableKit.configure({
+        table: {
+          resizable: true,
+          ...getFeatureOptions(config.table, {})
+        }
+      })
+    );
+  }
+  if (isFeatureEnabled(config.textAlign)) {
+    const textAlignConfig = getFeatureOptions(config.textAlign, {
+      types: ["heading", "paragraph"],
+      alignments: ["left", "center", "right", "justify"]
+    });
+    extensions.push(
+      TextAlign__default.default.configure({
+        types: textAlignConfig?.types || ["heading", "paragraph"],
+        alignments: textAlignConfig?.alignments || [
+          "left",
+          "center",
+          "right",
+          "justify"
+        ]
+      })
+    );
+  }
+  extensions.push(Gapcursor);
+  return extensions;
+}
 const RichTextInput = React.forwardRef((props, forwardedRef) => {
+  const attribute = props.attribute;
+  const presetName = attribute?.options?.preset;
+  const { config, isLoading } = usePresetConfig(presetName);
+  const extensions = React.useMemo(() => {
+    if (!config) return [];
+    return buildExtensions(config);
+  }, [presetName]);
   const { editor, field } = useTiptapEditor(props.name, "", extensions);
   const starterKit = useStarterKit(editor, { disabled: props.disabled });
   const heading = useHeading(editor, { disabled: props.disabled });
@@ -4452,37 +4623,56 @@ const RichTextInput = React.forwardRef((props, forwardedRef) => {
   const script = useScript(editor, { disabled: props.disabled });
   const table = useTable(editor, { disabled: props.disabled });
   const textAlign = useTextAlign(editor, { disabled: props.disabled });
-  return /* @__PURE__ */ jsxRuntime.jsxs(BaseTiptapInput, { editor, field, ...props, ref: forwardedRef, children: [
-    heading.headingSelect,
-    heading.headingTagSelect,
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
-    starterKit.boldButton,
-    starterKit.italicButton,
-    starterKit.underlineButton,
-    starterKit.strikeButton,
-    script.superscriptButton,
-    script.subscriptButton,
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
-    textAlign.textAlignLeftButton,
-    textAlign.textAlignCenterButton,
-    textAlign.textAlignRightButton,
-    textAlign.textAlignJustifyButton,
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
-    starterKit.bulletButton,
-    starterKit.orderedButton,
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
-    starterKit.codeButton,
-    starterKit.blockquoteButton,
-    link.linkButton,
-    link.linkDialog,
-    /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
-    table.tableButton,
-    table.addColumnButton,
-    table.removeColumnButton,
-    table.addRowButton,
-    table.removeRowButton,
-    table.tableDialog
-  ] });
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: "Loading editor..." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    BaseTiptapInput,
+    {
+      editor,
+      field,
+      ...props,
+      ref: forwardedRef,
+      noPresetConfigured: !presetName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FeatureGuard, { featureValue: config?.heading, children: [
+          heading.headingSelect,
+          heading.headingTagSelect,
+          /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 })
+        ] }),
+        starterKit.boldButton,
+        starterKit.italicButton,
+        starterKit.underlineButton,
+        starterKit.strikeButton,
+        script.superscriptButton,
+        script.subscriptButton,
+        /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(FeatureGuard, { featureValue: config?.textAlign, children: [
+          textAlign.textAlignLeftButton,
+          textAlign.textAlignCenterButton,
+          textAlign.textAlignRightButton,
+          textAlign.textAlignJustifyButton,
+          /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 })
+        ] }),
+        starterKit.bulletButton,
+        starterKit.orderedButton,
+        /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
+        starterKit.codeButton,
+        starterKit.blockquoteButton,
+        link.linkButton,
+        link.linkDialog,
+        /* @__PURE__ */ jsxRuntime.jsxs(FeatureGuard, { featureValue: config?.table, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Spacer, { width: 8 }),
+          table.tableButton,
+          table.addColumnButton,
+          table.removeColumnButton,
+          table.addRowButton,
+          table.removeRowButton,
+          table.tableDialog
+        ] })
+      ]
+    }
+  ) });
 });
 exports.default = RichTextInput;
-//# sourceMappingURL=RichTextInput-BlxoJMa2.js.map
+//# sourceMappingURL=RichTextInput-Wc2q__HY.js.map