@kopexa/tiptap 17.2.4 → 17.4.0

package/dist/chunk-4HO7BWDC.mjs

@@ -0,0 +1,89 @@
+"use client";
+import {
+  VariableNodeView
+} from "./chunk-JVSH5T4B.mjs";
+
+// src/extensions/variable/index.ts
+import { mergeAttributes, Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+var VariableNode = Node.create({
+  name: "variable",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      name: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-name"),
+        renderHTML: (attributes) => ({
+          "data-name": attributes.name
+        })
+      },
+      fallback: {
+        default: void 0,
+        parseHTML: (element) => element.getAttribute("data-fallback"),
+        renderHTML: (attributes) => {
+          if (!attributes.fallback) return {};
+          return {
+            "data-fallback": attributes.fallback
+          };
+        }
+      },
+      category: {
+        default: void 0,
+        parseHTML: (element) => element.getAttribute("data-category"),
+        renderHTML: (attributes) => {
+          if (!attributes.category) return {};
+          return {
+            "data-category": attributes.category
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-type="variable"]'
+      }
+    ];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const attrs = node.attrs;
+    return [
+      "span",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": "variable",
+        class: "variable-node"
+      }),
+      `{{${attrs.name}}}`
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(VariableNodeView);
+  },
+  addCommands() {
+    return {
+      insertVariable: (attrs) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs
+        });
+      }
+    };
+  }
+});
+var variable_default = VariableNode;
+
+export {
+  VariableNode,
+  variable_default
+};

package/dist/chunk-552JLRNB.mjs

@@ -0,0 +1,35 @@
+"use client";
+
+// src/extensions/variable/extract-variables.ts
+function extractVariablesFromContent(content) {
+  if (!content) return [];
+  const variables = /* @__PURE__ */ new Map();
+  function scan(node) {
+    var _a;
+    if (node.type === "variable" && ((_a = node.attrs) == null ? void 0 : _a.name)) {
+      const name = node.attrs.name;
+      if (!variables.has(name)) {
+        variables.set(name, {
+          name,
+          label: formatVariableName(name),
+          category: node.attrs.category || void 0,
+          fallback: node.attrs.fallback || void 0
+        });
+      }
+    }
+    if (node.content && Array.isArray(node.content)) {
+      for (const child of node.content) {
+        scan(child);
+      }
+    }
+  }
+  scan(content);
+  return Array.from(variables.values());
+}
+function formatVariableName(name) {
+  return name.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()).replace(/\s+/g, " ").trim();
+}
+
+export {
+  extractVariablesFromContent
+};

package/dist/chunk-5SMDMQDF.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+// src/extensions/variable/variable-context.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var VariableContext = React.createContext(null);
+function VariableProvider({
+  children,
+  variables,
+  resolveVariable
+}) {
+  const value = React.useMemo(
+    () => ({
+      variables,
+      resolveVariable
+    }),
+    [variables, resolveVariable]
+  );
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value, children });
+}
+function useVariables() {
+  return React.useContext(VariableContext);
+}
+function useVariablesWithFallback(fallbackVariables = []) {
+  var _a;
+  const context = React.useContext(VariableContext);
+  return (_a = context == null ? void 0 : context.variables) != null ? _a : fallbackVariables;
+}
+
+export {
+  VariableProvider,
+  useVariables,
+  useVariablesWithFallback
+};

package/dist/{chunk-XKWTI3MA.mjs → chunk-DQK6PA4U.mjs}

@@ -2,6 +2,9 @@
 import {
   TrailingNode
 } from "./chunk-H6LC4LDQ.mjs";
+import {
+  VariableNode
+} from "./chunk-4HO7BWDC.mjs";
 import {
   MathBlock
 } from "./chunk-2U5CQUZH.mjs";
@@ -68,6 +71,7 @@ var useCreateEditor = ({
   enableControls = false,
   controlResolver,
   fileHandler: fileHandlerProp,
+  enableVariables = false,
   ...options
 }) => {
   const fileHandlerFromContext = useEditorFile();
@@ -78,7 +82,8 @@ var useCreateEditor = ({
       placeholder,
       enableControls,
       controlResolver,
-      fileHandler
+      fileHandler,
+      enableVariables
     })
   );
   const editor = useEditor({
@@ -112,7 +117,8 @@ function getExtensions({
   placeholder,
   enableControls = false,
   controlResolver,
-  fileHandler
+  fileHandler,
+  enableVariables = false
 }) {
   const extensions = [
     StarterKit.configure({
@@ -178,6 +184,9 @@ function getExtensions({
   if (enableControls) {
     extensions.push(ControlKit.configure({ resolver: controlResolver }));
   }
+  if (enableVariables) {
+    extensions.push(VariableNode);
+  }
   if (fileHandler) {
     extensions.push(
       FileHandler.configure({

package/dist/{chunk-3ZPLSXTZ.mjs → chunk-ERPGWXFK.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6552DQWB.mjs";
 import {
   SuggestionMenu
-} from "./chunk-ZYFCSR3E.mjs";
+} from "./chunk-L5RDMV3H.mjs";
 import {
   filterSuggestionItems
 } from "./chunk-CNVACBGT.mjs";

package/dist/{chunk-NJZK5DRT.mjs → chunk-GDDWW2IQ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   SlashDropdownMenu
-} from "./chunk-3ZPLSXTZ.mjs";
+} from "./chunk-ERPGWXFK.mjs";
 import {
   useScrollToHash
 } from "./chunk-DZLGLP7R.mjs";
@@ -10,10 +10,13 @@ import {
 } from "./chunk-XNDXYI2N.mjs";
 import {
   BubbleMenu
-} from "./chunk-NSYSECKW.mjs";
+} from "./chunk-GL3RTIER.mjs";
+import {
+  VariableSuggestion
+} from "./chunk-H7MS2UMO.mjs";
 import {
   EditorHeader
-} from "./chunk-FDPXD6VC.mjs";
+} from "./chunk-RFWNKE7D.mjs";
 import {
   useUiEditorState
 } from "./chunk-BXJYNSWQ.mjs";
@@ -22,7 +25,10 @@ import {
 } from "./chunk-REJEJXOZ.mjs";
 import {
   useCreateEditor
-} from "./chunk-XKWTI3MA.mjs";
+} from "./chunk-DQK6PA4U.mjs";
+import {
+  VariableProvider
+} from "./chunk-5SMDMQDF.mjs";
 
 // src/presets/basic/index.tsx
 import {
@@ -33,27 +39,42 @@ import {
   EditorContent,
   EditorContext
 } from "@tiptap/react";
-import { useContext } from "react";
+import { useCallback, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var BasicEditor = ({
   variant,
   bordered,
   content,
+  variables,
+  variableValues,
   ...options
 }) => {
-  const editor = useCreateEditor({ content, ...options });
+  const editor = useCreateEditor({
+    content,
+    enableVariables: !!(variables == null ? void 0 : variables.length),
+    ...options
+  });
   const styles = editorBasic({ variant, bordered });
+  const resolveVariable = useCallback(
+    (name) => variableValues == null ? void 0 : variableValues[name],
+    [variableValues]
+  );
   if (!editor) {
     return /* @__PURE__ */ jsx(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
-  return /* @__PURE__ */ jsx(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ jsx("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ jsxs(EditorContext.Provider, { value: { editor }, children: [
+  const hasVariables = variables && variables.length > 0;
+  const editorContent = /* @__PURE__ */ jsx(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ jsx("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ jsxs(EditorContext.Provider, { value: { editor }, children: [
     !isBottomToolbar && /* @__PURE__ */ jsx(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ jsx(EditorContentArea, { variant }),
+    /* @__PURE__ */ jsx(EditorContentArea, { variant, variables }),
     isBottomToolbar && /* @__PURE__ */ jsx(EditorHeader, { editor, variant })
   ] }) }) });
+  if (hasVariables) {
+    return /* @__PURE__ */ jsx(VariableProvider, { variables, resolveVariable, children: editorContent });
+  }
+  return editorContent;
 };
-var EditorContentArea = ({ variant }) => {
+var EditorContentArea = ({ variant, variables }) => {
   const styles = editorBasic({ variant });
   const { editor } = useContext(EditorContext);
   const { isDragging } = useUiEditorState(editor);
@@ -61,8 +82,9 @@ var EditorContentArea = ({ variant }) => {
   if (!editor) {
     return null;
   }
+  const isEditable = editor.isEditable;
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       EditorContent,
       {
         editor,
@@ -71,11 +93,14 @@ var EditorContentArea = ({ variant }) => {
         style: {
           cursor: isDragging ? "grabbing" : "auto"
         },
-        children: /* @__PURE__ */ jsx(SlashDropdownMenu, {})
+        children: [
+          isEditable && /* @__PURE__ */ jsx(SlashDropdownMenu, {}),
+          isEditable && variables && variables.length > 0 && /* @__PURE__ */ jsx(VariableSuggestion, { editor, variables })
+        ]
       }
     ),
-    /* @__PURE__ */ jsx(BubbleMenu, { editor }),
-    /* @__PURE__ */ jsx(LinkBubble, { editor })
+    isEditable && /* @__PURE__ */ jsx(BubbleMenu, { editor }),
+    isEditable && /* @__PURE__ */ jsx(LinkBubble, { editor })
   ] });
 };
 function LoadingSpinner({ text = "Connecting..." }) {

package/dist/{chunk-NSYSECKW.mjs → chunk-GL3RTIER.mjs}

@@ -24,6 +24,7 @@ function BubbleMenu({ editor }) {
         if (empty) return false;
         if (e.isActive("codeBlock")) return false;
         if (e.isActive("link")) return false;
+        if (e.isActive("variable")) return false;
         if (!e.isEditable) return false;
         return true;
       },

package/dist/chunk-H7MS2UMO.mjs

@@ -0,0 +1,168 @@
+"use client";
+import {
+  SuggestionMenu
+} from "./chunk-L5RDMV3H.mjs";
+
+// src/extensions/variable/variable-suggestion.tsx
+import { getElementOverflowPosition } from "@kopexa/editor-utils";
+import { slashDropdownMenu } from "@kopexa/theme";
+import { PluginKey } from "@tiptap/pm/state";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VariableSuggestionPluginKey = new PluginKey("variableSuggestion");
+function VariableSuggestion({
+  editor,
+  variables
+}) {
+  const getItems = React.useCallback(
+    ({ query }) => {
+      const normalizedQuery = query.toLowerCase().trim();
+      const items = [];
+      const matchingVariables = variables.filter((variable) => {
+        var _a, _b;
+        if (!normalizedQuery) return true;
+        return variable.name.toLowerCase().includes(normalizedQuery) || variable.label.toLowerCase().includes(normalizedQuery) || ((_a = variable.category) == null ? void 0 : _a.toLowerCase().includes(normalizedQuery)) || ((_b = variable.description) == null ? void 0 : _b.toLowerCase().includes(normalizedQuery));
+      });
+      for (const variable of matchingVariables) {
+        items.push({
+          title: variable.label,
+          subtext: variable.name,
+          group: variable.category,
+          keywords: [variable.name, variable.label, variable.category].filter(
+            Boolean
+          ),
+          onSelect: ({ editor: editor2 }) => {
+            const attrs = {
+              name: variable.name,
+              fallback: variable.fallback,
+              category: variable.category
+            };
+            editor2.chain().focus().insertVariable(attrs).run();
+          }
+        });
+      }
+      if (normalizedQuery && !variables.some((v) => v.name.toLowerCase() === normalizedQuery)) {
+        items.push({
+          title: `Neue Variable "${query}"`,
+          subtext: query,
+          group: "Neu",
+          onSelect: ({ editor: editor2 }) => {
+            const attrs = {
+              name: query
+            };
+            editor2.chain().focus().insertVariable(attrs).run();
+          }
+        });
+      }
+      return items;
+    },
+    [variables]
+  );
+  return /* @__PURE__ */ jsx(
+    SuggestionMenu,
+    {
+      editor,
+      pluginKey: VariableSuggestionPluginKey,
+      char: "{{",
+      items: getItems,
+      allowSpaces: false,
+      selector: "tiptap-variable-suggestion-menu",
+      children: (props) => /* @__PURE__ */ jsx(VariableList, { ...props })
+    }
+  );
+}
+var VariableItem = ({
+  item,
+  isSelected,
+  onSelect
+}) => {
+  const itemRef = React.useRef(null);
+  React.useEffect(() => {
+    const selector = document.querySelector(
+      '[data-selector="tiptap-variable-suggestion-menu"]'
+    );
+    if (!itemRef.current || !isSelected || !selector) return;
+    const overflow = getElementOverflowPosition(itemRef.current, selector);
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: itemRef,
+      type: "button",
+      "data-active-state": isSelected ? "on" : "off",
+      onClick: onSelect,
+      className: "w-full flex items-center justify-between gap-3 px-2 py-1.5 text-sm rounded-sm outline-none hover:bg-muted data-[active-state=on]:bg-muted",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium truncate", children: item.title }),
+        /* @__PURE__ */ jsx("code", { className: "text-xs text-muted-foreground font-mono shrink-0", children: item.subtext })
+      ]
+    }
+  );
+};
+var VariableList = ({
+  items,
+  selectedIndex,
+  onSelect
+}) => {
+  const styles = slashDropdownMenu();
+  const renderedItems = React.useMemo(() => {
+    const rendered = [];
+    const groups = {};
+    items.forEach((item, index) => {
+      const groupLabel = item.group || "";
+      if (!groups[groupLabel]) {
+        groups[groupLabel] = { items: [], indices: [] };
+      }
+      groups[groupLabel].items.push(item);
+      groups[groupLabel].indices.push(index);
+    });
+    Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
+      const groupItems = groupData.items.map((item, itemIndex) => {
+        const originalIndex = groupData.indices[itemIndex];
+        return /* @__PURE__ */ jsx(
+          VariableItem,
+          {
+            item,
+            isSelected: originalIndex === selectedIndex,
+            onSelect: () => onSelect(item)
+          },
+          `item-${originalIndex}-${item.title}`
+        );
+      });
+      if (groupLabel) {
+        rendered.push(
+          /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: groupLabel }),
+            groupItems
+          ] }, `group-${groupIndex}-${groupLabel}`)
+        );
+      } else {
+        rendered.push(...groupItems);
+      }
+    });
+    return rendered;
+  }, [items, selectedIndex, onSelect]);
+  if (!renderedItems.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.card(),
+      style: {
+        maxHeight: "var(--suggestion-menu-max-height)",
+        minWidth: "240px"
+      },
+      children: /* @__PURE__ */ jsx("div", { className: styles.body(), children: renderedItems })
+    }
+  );
+};
+
+export {
+  VariableSuggestion
+};

package/dist/chunk-JVSH5T4B.mjs

@@ -0,0 +1,72 @@
+"use client";
+import {
+  useVariables
+} from "./chunk-5SMDMQDF.mjs";
+
+// src/extensions/variable/variable-view.tsx
+import { variableNode } from "@kopexa/theme";
+import {
+  NodeViewWrapper,
+  useEditorState
+} from "@tiptap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VariableNodeView({ node, editor }) {
+  var _a;
+  const attrs = node.attrs;
+  const { name, fallback, category } = attrs;
+  const context = useVariables();
+  const isEditable = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a2;
+      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : true;
+    }
+  });
+  const resolvedValue = (_a = context == null ? void 0 : context.resolveVariable) == null ? void 0 : _a.call(context, name);
+  const hasValue = resolvedValue !== void 0 && resolvedValue !== "";
+  const displayValue = resolvedValue || fallback;
+  const styles = variableNode({ resolved: hasValue });
+  if (!isEditable && hasValue) {
+    return /* @__PURE__ */ jsx(
+      NodeViewWrapper,
+      {
+        as: "span",
+        "data-type": "variable",
+        "data-name": name,
+        style: { userSelect: "text" },
+        children: displayValue
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NodeViewWrapper,
+    {
+      as: "span",
+      className: styles.wrapper(),
+      "data-type": "variable",
+      "data-name": name,
+      "data-category": category,
+      "data-resolved": hasValue ? "true" : "false",
+      children: hasValue ? /* @__PURE__ */ jsx("span", { className: styles.chip(), title: `{{${name}}}`, children: /* @__PURE__ */ jsx("span", { className: styles.value(), children: displayValue }) }) : /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: styles.chip(),
+          title: fallback ? `Fallback: ${fallback}` : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ jsx("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ jsx("span", { className: styles.name(), children: name }),
+            /* @__PURE__ */ jsx("span", { className: styles.bracket(), children: "}" }),
+            /* @__PURE__ */ jsx("span", { className: styles.bracket(), children: "}" })
+          ]
+        }
+      )
+    }
+  );
+}
+var variable_view_default = VariableNodeView;
+
+export {
+  VariableNodeView,
+  variable_view_default
+};

package/dist/{chunk-ZYFCSR3E.mjs → chunk-L5RDMV3H.mjs}

@@ -13,7 +13,7 @@ import {
 } from "./chunk-42HKGCOO.mjs";
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-import { flip, offset, shift, size } from "@floating-ui/react";
+import { FloatingPortal, flip, offset, shift, size } from "@floating-ui/react";
 import { PluginKey } from "@tiptap/pm/state";
 import {
   Suggestion,
@@ -191,7 +191,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -208,7 +208,7 @@ var SuggestionMenu = ({
         onSelect
       })
     }
-  );
+  ) });
 };
 
 export {

package/dist/chunk-Q5FK7SFY.mjs

@@ -0,0 +1,75 @@
+"use client";
+
+// src/extensions/variable/messages.ts
+import { defineMessages } from "react-intl";
+var messages = defineMessages({
+  title: {
+    id: "editor.variable.title",
+    defaultMessage: "Variables",
+    description: "Title for the variables section"
+  },
+  insert: {
+    id: "editor.variable.insert",
+    defaultMessage: "Insert variable",
+    description: "Insert variable button label"
+  },
+  empty_state: {
+    id: "editor.variable.empty_state",
+    defaultMessage: "No variables available",
+    description: "Empty state when no variables are defined"
+  },
+  hint: {
+    id: "editor.variable.hint",
+    defaultMessage: "Type {{ to insert a variable",
+    description: "Hint for inserting variables"
+  },
+  save: {
+    id: "editor.variable.save",
+    defaultMessage: "Save",
+    description: "Save button label"
+  },
+  cancel: {
+    id: "editor.variable.cancel",
+    defaultMessage: "Cancel",
+    description: "Cancel button label"
+  },
+  category_company: {
+    id: "editor.variable.category.company",
+    defaultMessage: "Company",
+    description: "Company variables category"
+  },
+  category_user: {
+    id: "editor.variable.category.user",
+    defaultMessage: "User",
+    description: "User variables category"
+  },
+  category_date: {
+    id: "editor.variable.category.date",
+    defaultMessage: "Date",
+    description: "Date variables category"
+  },
+  category_document: {
+    id: "editor.variable.category.document",
+    defaultMessage: "Document",
+    description: "Document variables category"
+  },
+  category_other: {
+    id: "editor.variable.category.other",
+    defaultMessage: "Other",
+    description: "Other variables category"
+  },
+  filler_title: {
+    id: "editor.variable.filler.title",
+    defaultMessage: "Fill in Variables",
+    description: "Title for the variable filler dialog"
+  },
+  filler_filled: {
+    id: "editor.variable.filler.filled",
+    defaultMessage: "filled",
+    description: "Label for filled count"
+  }
+});
+
+export {
+  messages
+};