@kopexa/tiptap 17.6.18 → 17.7.2

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

@@ -1,615 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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 };

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

@@ -1,13 +0,0 @@
-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 };