@kopexa/tiptap 17.3.0 → 17.5.0

package/dist/extensions/variable/variable-suggestion.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/react';
+
+interface VariableDefinition {
+    /** The variable key/name */
+    name: string;
+    /** Display label for the variable */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Category for grouping */
+    category?: string;
+    /** Default/fallback value */
+    fallback?: string;
+}
+interface VariableSuggestionProps {
+    editor?: Editor | null;
+    /**
+     * List of available variables to suggest
+     */
+    variables: VariableDefinition[];
+}
+/**
+ * Variable Suggestion Menu
+ *
+ * A suggestion popup triggered by typing `{{` that shows available
+ * template variables for insertion.
+ */
+declare function VariableSuggestion({ editor, variables, }: VariableSuggestionProps): react_jsx_runtime.JSX.Element;
+
+export { type VariableDefinition, VariableSuggestion, type VariableSuggestionProps };

package/dist/extensions/variable/variable-suggestion.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Editor } from '@tiptap/react';
+
+interface VariableDefinition {
+    /** The variable key/name */
+    name: string;
+    /** Display label for the variable */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Category for grouping */
+    category?: string;
+    /** Default/fallback value */
+    fallback?: string;
+}
+interface VariableSuggestionProps {
+    editor?: Editor | null;
+    /**
+     * List of available variables to suggest
+     */
+    variables: VariableDefinition[];
+}
+/**
+ * Variable Suggestion Menu
+ *
+ * A suggestion popup triggered by typing `{{` that shows available
+ * template variables for insertion.
+ */
+declare function VariableSuggestion({ editor, variables, }: VariableSuggestionProps): react_jsx_runtime.JSX.Element;
+
+export { type VariableDefinition, VariableSuggestion, type VariableSuggestionProps };

package/dist/extensions/variable/variable-suggestion.js

@@ -0,0 +1,615 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/extensions/variable/variable-suggestion.tsx
+var variable_suggestion_exports = {};
+__export(variable_suggestion_exports, {
+  VariableSuggestion: () => VariableSuggestion
+});
+module.exports = __toCommonJS(variable_suggestion_exports);
+var import_editor_utils = require("@kopexa/editor-utils");
+var import_theme = require("@kopexa/theme");
+var import_state2 = require("@tiptap/pm/state");
+var React4 = __toESM(require("react"));
+
+// src/ui/suggestion-menu/suggestion-menu.tsx
+var import_react4 = require("@floating-ui/react");
+var import_state = require("@tiptap/pm/state");
+var import_suggestion = require("@tiptap/suggestion");
+var React3 = __toESM(require("react"));
+
+// src/hooks/use-floating-element.ts
+var import_react = require("@floating-ui/react");
+var React = __toESM(require("react"));
+function useFloatingElement(show, referencePos, zIndex, options) {
+  const { dismissOptions, ...floatingOptions } = options || {};
+  const { refs, update, context, floatingStyles } = (0, import_react.useFloating)({
+    open: show,
+    ...floatingOptions
+  });
+  const { isMounted, styles } = (0, import_react.useTransitionStyles)(context);
+  const dismiss = (0, import_react.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react.useInteractions)([dismiss]);
+  React.useEffect(() => {
+    update();
+  }, [referencePos, update]);
+  React.useEffect(() => {
+    if (referencePos === null) {
+      return;
+    }
+    refs.setReference({
+      getBoundingClientRect: () => referencePos
+    });
+  }, [referencePos, refs]);
+  return React.useMemo(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      style: {
+        ...styles,
+        ...floatingStyles,
+        zIndex
+      },
+      update,
+      getFloatingProps,
+      getReferenceProps
+    }),
+    [
+      floatingStyles,
+      isMounted,
+      refs.setFloating,
+      styles,
+      update,
+      zIndex,
+      getFloatingProps,
+      getReferenceProps
+    ]
+  );
+}
+
+// src/hooks/use-menu-navigation.ts
+var React2 = __toESM(require("react"));
+function useMenuNavigation({
+  editor,
+  containerRef,
+  query,
+  items,
+  onSelect,
+  onClose,
+  orientation = "vertical",
+  autoSelectFirstItem = true
+}) {
+  const [selectedIndex, setSelectedIndex] = React2.useState(
+    autoSelectFirstItem ? 0 : -1
+  );
+  React2.useEffect(() => {
+    const handleKeyboardNavigation = (event) => {
+      if (!items.length) return false;
+      const moveNext = () => setSelectedIndex((currentIndex) => {
+        if (currentIndex === -1) return 0;
+        return (currentIndex + 1) % items.length;
+      });
+      const movePrev = () => setSelectedIndex((currentIndex) => {
+        if (currentIndex === -1) return items.length - 1;
+        return (currentIndex - 1 + items.length) % items.length;
+      });
+      switch (event.key) {
+        case "ArrowUp": {
+          if (orientation === "horizontal") return false;
+          event.preventDefault();
+          movePrev();
+          return true;
+        }
+        case "ArrowDown": {
+          if (orientation === "horizontal") return false;
+          event.preventDefault();
+          moveNext();
+          return true;
+        }
+        case "ArrowLeft": {
+          if (orientation === "vertical") return false;
+          event.preventDefault();
+          movePrev();
+          return true;
+        }
+        case "ArrowRight": {
+          if (orientation === "vertical") return false;
+          event.preventDefault();
+          moveNext();
+          return true;
+        }
+        case "Tab": {
+          event.preventDefault();
+          if (event.shiftKey) {
+            movePrev();
+          } else {
+            moveNext();
+          }
+          return true;
+        }
+        case "Home": {
+          event.preventDefault();
+          setSelectedIndex(0);
+          return true;
+        }
+        case "End": {
+          event.preventDefault();
+          setSelectedIndex(items.length - 1);
+          return true;
+        }
+        case "Enter": {
+          if (event.isComposing) return false;
+          event.preventDefault();
+          if (selectedIndex !== -1 && items[selectedIndex]) {
+            onSelect == null ? void 0 : onSelect(items[selectedIndex]);
+          }
+          return true;
+        }
+        case "Escape": {
+          event.preventDefault();
+          onClose == null ? void 0 : onClose();
+          return true;
+        }
+        default:
+          return false;
+      }
+    };
+    let targetElement = null;
+    if (editor) {
+      targetElement = editor.view.dom;
+    } else if (containerRef == null ? void 0 : containerRef.current) {
+      targetElement = containerRef.current;
+    }
+    if (targetElement) {
+      targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
+      return () => {
+        targetElement == null ? void 0 : targetElement.removeEventListener(
+          "keydown",
+          handleKeyboardNavigation,
+          true
+        );
+      };
+    }
+    return void 0;
+  }, [
+    editor,
+    containerRef,
+    items,
+    selectedIndex,
+    onSelect,
+    onClose,
+    orientation
+  ]);
+  React2.useEffect(() => {
+    if (query) {
+      setSelectedIndex(autoSelectFirstItem ? 0 : -1);
+    }
+  }, [query, autoSelectFirstItem]);
+  return {
+    selectedIndex: items.length ? selectedIndex : void 0,
+    setSelectedIndex
+  };
+}
+
+// src/hooks/use-tiptap-editor.ts
+var import_react2 = require("@tiptap/react");
+var import_react3 = require("react");
+function useTiptapEditor(providedEditor) {
+  const { editor: coreEditor } = (0, import_react2.useCurrentEditor)();
+  const mainEditor = (0, import_react3.useMemo)(
+    () => providedEditor || coreEditor,
+    [providedEditor, coreEditor]
+  );
+  const editorState = (0, import_react2.useEditorState)({
+    editor: mainEditor,
+    selector(context) {
+      if (!context.editor) {
+        return {
+          editor: null,
+          editorState: void 0,
+          canCommand: void 0
+        };
+      }
+      return {
+        editor: context.editor,
+        editorState: context.editor.state,
+        canCommand: context.editor.can
+      };
+    }
+  });
+  return editorState || { editor: null };
+}
+
+// src/ui/suggestion-menu/suggestion-menu-utils.ts
+function calculateStartPosition(cursorPosition, previousNode, triggerChar) {
+  if (!(previousNode == null ? void 0 : previousNode.text) || !triggerChar) {
+    return cursorPosition;
+  }
+  const commandText = previousNode.text;
+  const triggerCharIndex = commandText.lastIndexOf(triggerChar);
+  if (triggerCharIndex === -1) {
+    return cursorPosition;
+  }
+  const textLength = commandText.substring(triggerCharIndex).length;
+  return cursorPosition - textLength;
+}
+
+// src/ui/suggestion-menu/suggestion-menu.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SuggestionMenu = ({
+  editor: providedEditor,
+  floatingOptions,
+  selector = "tiptap-suggestion-menu",
+  children,
+  maxHeight = 384,
+  pluginKey = import_suggestion.SuggestionPluginKey,
+  ...internalSuggestionProps
+}) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const [show, setShow] = React3.useState(false);
+  const [internalClientRect, setInternalClientRect] = React3.useState(null);
+  const [internalCommand, setInternalCommand] = React3.useState(null);
+  const [internalItems, setInternalItems] = React3.useState(
+    []
+  );
+  const [internalQuery, setInternalQuery] = React3.useState("");
+  const [, setInternalRange] = React3.useState(null);
+  const { ref, style, getFloatingProps, isMounted } = useFloatingElement(
+    show,
+    internalClientRect,
+    1e3,
+    {
+      placement: "bottom-start",
+      middleware: [
+        (0, import_react4.offset)(10),
+        (0, import_react4.flip)({
+          mainAxis: true,
+          crossAxis: false
+        }),
+        (0, import_react4.shift)(),
+        (0, import_react4.size)({
+          apply({ availableHeight, elements }) {
+            if (elements.floating) {
+              const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
+              elements.floating.style.setProperty(
+                "--suggestion-menu-max-height",
+                `${maxHeightValue}px`
+              );
+            }
+          }
+        })
+      ],
+      onOpenChange(open) {
+        if (!open) {
+          setShow(false);
+        }
+      },
+      ...floatingOptions
+    }
+  );
+  const internalSuggestionPropsRef = React3.useRef(internalSuggestionProps);
+  React3.useEffect(() => {
+    internalSuggestionPropsRef.current = internalSuggestionProps;
+  }, [internalSuggestionProps]);
+  const closePopup = React3.useCallback(() => {
+    setShow(false);
+  }, []);
+  React3.useEffect(() => {
+    if (!editor || editor.isDestroyed) {
+      return;
+    }
+    const existingPlugin = editor.state.plugins.find(
+      (plugin) => plugin.spec.key === pluginKey
+    );
+    if (existingPlugin) {
+      editor.unregisterPlugin(pluginKey);
+    }
+    const suggestion = (0, import_suggestion.Suggestion)({
+      pluginKey: pluginKey instanceof import_state.PluginKey ? pluginKey : new import_state.PluginKey(pluginKey),
+      editor,
+      command({ editor: editor2, range, props }) {
+        var _a, _b;
+        if (!range) {
+          return;
+        }
+        const { view, state } = editor2;
+        const { selection } = state;
+        const isMention = editor2.extensionManager.extensions.some(
+          (extension) => {
+            var _a2, _b2;
+            const name = extension.name;
+            return name === "mention" && ((_b2 = (_a2 = extension.options) == null ? void 0 : _a2.suggestion) == null ? void 0 : _b2.char) === internalSuggestionPropsRef.current.char;
+          }
+        );
+        if (!isMention) {
+          const cursorPosition = selection.$from.pos;
+          const previousNode = (_a = selection.$head) == null ? void 0 : _a.nodeBefore;
+          const startPosition = previousNode ? calculateStartPosition(
+            cursorPosition,
+            previousNode,
+            internalSuggestionPropsRef.current.char
+          ) : selection.$from.start();
+          const transaction = state.tr.deleteRange(
+            startPosition,
+            cursorPosition
+          );
+          view.dispatch(transaction);
+        }
+        const nodeAfter = view.state.selection.$to.nodeAfter;
+        const overrideSpace = (_b = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _b.startsWith(" ");
+        const rangeToUse = { ...range };
+        if (overrideSpace) {
+          rangeToUse.to += 1;
+        }
+        props.onSelect({ editor: editor2, range: rangeToUse, context: props.context });
+      },
+      render: () => {
+        return {
+          onStart: (props) => {
+            var _a, _b;
+            setInternalCommand(() => props.command);
+            setInternalItems(props.items);
+            setInternalQuery(props.query);
+            setInternalRange(props.range);
+            setInternalClientRect((_b = (_a = props.clientRect) == null ? void 0 : _a.call(props)) != null ? _b : null);
+            setShow(true);
+          },
+          onUpdate: (props) => {
+            var _a, _b;
+            setInternalCommand(() => props.command);
+            setInternalItems(props.items);
+            setInternalQuery(props.query);
+            setInternalRange(props.range);
+            setInternalClientRect((_b = (_a = props.clientRect) == null ? void 0 : _a.call(props)) != null ? _b : null);
+          },
+          onKeyDown: (props) => {
+            if (props.event.key === "Escape") {
+              closePopup();
+              return true;
+            }
+            return false;
+          },
+          onExit: () => {
+            setInternalCommand(null);
+            setInternalItems([]);
+            setInternalQuery("");
+            setInternalRange(null);
+            setInternalClientRect(null);
+            setShow(false);
+          }
+        };
+      },
+      ...internalSuggestionPropsRef.current
+    });
+    editor.registerPlugin(suggestion);
+    return () => {
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
+      }
+    };
+  }, [editor, pluginKey, closePopup]);
+  const onSelect = React3.useCallback(
+    (item) => {
+      closePopup();
+      if (internalCommand) {
+        internalCommand(item);
+      }
+    },
+    [closePopup, internalCommand]
+  );
+  const { selectedIndex } = useMenuNavigation({
+    editor,
+    query: internalQuery,
+    items: internalItems,
+    onSelect
+  });
+  if (!isMounted || !show || !editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      style,
+      ...getFloatingProps(),
+      "data-selector": selector,
+      className: "tiptap-suggestion-menu",
+      role: "listbox",
+      "aria-label": "Suggestions",
+      onPointerDown: (e) => e.preventDefault(),
+      children: children({
+        items: internalItems,
+        selectedIndex,
+        onSelect
+      })
+    }
+  ) });
+};
+
+// src/extensions/variable/variable-suggestion.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var VariableSuggestionPluginKey = new import_state2.PluginKey("variableSuggestion");
+function VariableSuggestion({
+  editor,
+  variables
+}) {
+  const getItems = React4.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__ */ (0, import_jsx_runtime2.jsx)(
+    SuggestionMenu,
+    {
+      editor,
+      pluginKey: VariableSuggestionPluginKey,
+      char: "{{",
+      items: getItems,
+      allowSpaces: false,
+      selector: "tiptap-variable-suggestion-menu",
+      children: (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(VariableList, { ...props })
+    }
+  );
+}
+var VariableItem = ({
+  item,
+  isSelected,
+  onSelect
+}) => {
+  const itemRef = React4.useRef(null);
+  React4.useEffect(() => {
+    const selector = document.querySelector(
+      '[data-selector="tiptap-variable-suggestion-menu"]'
+    );
+    if (!itemRef.current || !isSelected || !selector) return;
+    const overflow = (0, import_editor_utils.getElementOverflowPosition)(itemRef.current, selector);
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium truncate", children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: "text-xs text-muted-foreground font-mono shrink-0", children: item.subtext })
+      ]
+    }
+  );
+};
+var VariableList = ({
+  items,
+  selectedIndex,
+  onSelect
+}) => {
+  const styles = (0, import_theme.slashDropdownMenu)();
+  const renderedItems = React4.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__ */ (0, import_jsx_runtime2.jsx)(
+          VariableItem,
+          {
+            item,
+            isSelected: originalIndex === selectedIndex,
+            onSelect: () => onSelect(item)
+          },
+          `item-${originalIndex}-${item.title}`
+        );
+      });
+      if (groupLabel) {
+        rendered.push(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "py-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: styles.card(),
+      style: {
+        maxHeight: "var(--suggestion-menu-max-height)",
+        minWidth: "240px"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.body(), children: renderedItems })
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariableSuggestion
+});

package/dist/extensions/variable/variable-suggestion.mjs

@@ -0,0 +1,14 @@
+"use client";
+"use client";
+import {
+  VariableSuggestion
+} from "../../chunk-H7MS2UMO.mjs";
+import "../../chunk-HLLA2HRV.mjs";
+import "../../chunk-L5RDMV3H.mjs";
+import "../../chunk-CNVACBGT.mjs";
+import "../../chunk-P55PLOHR.mjs";
+import "../../chunk-KK4K43WM.mjs";
+import "../../chunk-42HKGCOO.mjs";
+export {
+  VariableSuggestion
+};

package/dist/extensions/variable/variable-view.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NodeViewProps } from '@tiptap/react';
+
+/**
+ * Variable NodeView Component
+ *
+ * Renders a template variable as an inline chip.
+ * Shows resolved value if available, otherwise shows variable name.
+ * In read-only mode with a resolved value, renders as plain text.
+ */
+declare function VariableNodeView({ node, editor }: NodeViewProps): react_jsx_runtime.JSX.Element;
+
+export { VariableNodeView, VariableNodeView as default };