@kopexa/tiptap 17.3.0 → 17.4.0

package/dist/chunk-QIELBKP3.mjs

@@ -0,0 +1,104 @@
+"use client";
+import {
+  messages
+} from "./chunk-Q5FK7SFY.mjs";
+
+// src/extensions/variable/variable-filler-dialog.tsx
+import { Button } from "@kopexa/button";
+import { Dialog } from "@kopexa/dialog";
+import { Input } from "@kopexa/input";
+import { Label } from "@kopexa/label";
+import * as React from "react";
+import { useIntl } from "react-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+function VariableFillerDialog({
+  open,
+  onOpenChange,
+  variables,
+  values,
+  onSave,
+  title,
+  description
+}) {
+  const intl = useIntl();
+  const [localValues, setLocalValues] = React.useState(
+    {}
+  );
+  React.useEffect(() => {
+    if (open) {
+      setLocalValues({ ...values });
+    }
+  }, [open, values]);
+  const handleChange = React.useCallback((name, value) => {
+    setLocalValues((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  }, []);
+  const handleSave = React.useCallback(() => {
+    onSave(localValues);
+    onOpenChange(false);
+  }, [localValues, onSave, onOpenChange]);
+  const handleCancel = React.useCallback(() => {
+    setLocalValues({ ...values });
+    onOpenChange(false);
+  }, [values, onOpenChange]);
+  const groupedVariables = React.useMemo(() => {
+    return variables.reduce(
+      (acc, v) => {
+        const cat = v.category || intl.formatMessage(messages.category_other);
+        if (!acc[cat]) acc[cat] = [];
+        acc[cat].push(v);
+        return acc;
+      },
+      {}
+    );
+  }, [variables, intl]);
+  const filledCount = React.useMemo(() => {
+    return variables.filter((v) => {
+      var _a;
+      return (_a = localValues[v.name]) == null ? void 0 : _a.trim();
+    }).length;
+  }, [variables, localValues]);
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, size: "md", children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: title || intl.formatMessage(messages.filler_title) }),
+      description && /* @__PURE__ */ jsx(Dialog.Description, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: Object.entries(groupedVariables).map(([category, vars]) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3", children: category }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: vars.map((v) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxs(Label, { htmlFor: `var-${v.name}`, className: "text-sm", children: [
+          v.label,
+          v.description && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground font-normal", children: v.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `var-${v.name}`,
+            placeholder: v.fallback || `{{${v.name}}}`,
+            value: localValues[v.name] || "",
+            onChange: (e) => handleChange(v.name, e.target.value)
+          }
+        )
+      ] }, v.name)) })
+    ] }, category)) }) }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        filledCount,
+        " / ",
+        variables.length,
+        " ",
+        intl.formatMessage(messages.filler_filled)
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
+      ] })
+    ] })
+  ] }) });
+}
+
+export {
+  VariableFillerDialog
+};

package/dist/extensions/variable/extract-variables.d.mts

@@ -0,0 +1,16 @@
+import { JSONContent } from '@tiptap/core';
+import { VariableDefinition } from './variable-suggestion.mjs';
+import 'react/jsx-runtime';
+import '@tiptap/react';
+
+/**
+ * Extracts all variable nodes from a TipTap document.
+ *
+ * Recursively scans the document content and returns unique variables.
+ *
+ * @param content - The TipTap JSONContent to scan
+ * @returns Array of unique variable definitions found in the document
+ */
+declare function extractVariablesFromContent(content: JSONContent | undefined): VariableDefinition[];
+
+export { extractVariablesFromContent };

package/dist/extensions/variable/extract-variables.d.ts

@@ -0,0 +1,16 @@
+import { JSONContent } from '@tiptap/core';
+import { VariableDefinition } from './variable-suggestion.js';
+import 'react/jsx-runtime';
+import '@tiptap/react';
+
+/**
+ * Extracts all variable nodes from a TipTap document.
+ *
+ * Recursively scans the document content and returns unique variables.
+ *
+ * @param content - The TipTap JSONContent to scan
+ * @returns Array of unique variable definitions found in the document
+ */
+declare function extractVariablesFromContent(content: JSONContent | undefined): VariableDefinition[];
+
+export { extractVariablesFromContent };

package/dist/extensions/variable/extract-variables.js

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/extensions/variable/extract-variables.ts
+var extract_variables_exports = {};
+__export(extract_variables_exports, {
+  extractVariablesFromContent: () => extractVariablesFromContent
+});
+module.exports = __toCommonJS(extract_variables_exports);
+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();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  extractVariablesFromContent
+});

package/dist/extensions/variable/extract-variables.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  extractVariablesFromContent
+} from "../../chunk-552JLRNB.mjs";
+export {
+  extractVariablesFromContent
+};

package/dist/extensions/variable/index.d.mts

@@ -0,0 +1,38 @@
+import { Node } from '@tiptap/core';
+
+interface VariableNodeAttrs {
+    /** The variable name/key (e.g., "companyName") */
+    name: string;
+    /** Optional fallback value if variable is not resolved */
+    fallback?: string;
+    /** Optional category for grouping (e.g., "company", "user", "date") */
+    category?: string;
+}
+interface VariableOptions {
+    /**
+     * HTML attributes to add to the variable element.
+     */
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        variable: {
+            /**
+             * Insert a variable node
+             */
+            insertVariable: (attrs: VariableNodeAttrs) => ReturnType;
+        };
+    }
+}
+/**
+ * VariableNode Extension
+ *
+ * Allows inserting template variables like {{companyName}} into documents.
+ * Variables are rendered as inline chips and can be resolved when rendering
+ * the final document.
+ *
+ * Triggered by typing `{{` which opens a suggestion menu.
+ */
+declare const VariableNode: Node<VariableOptions, any>;
+
+export { VariableNode, type VariableNodeAttrs, type VariableOptions, VariableNode as default };

package/dist/extensions/variable/index.d.ts

@@ -0,0 +1,38 @@
+import { Node } from '@tiptap/core';
+
+interface VariableNodeAttrs {
+    /** The variable name/key (e.g., "companyName") */
+    name: string;
+    /** Optional fallback value if variable is not resolved */
+    fallback?: string;
+    /** Optional category for grouping (e.g., "company", "user", "date") */
+    category?: string;
+}
+interface VariableOptions {
+    /**
+     * HTML attributes to add to the variable element.
+     */
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        variable: {
+            /**
+             * Insert a variable node
+             */
+            insertVariable: (attrs: VariableNodeAttrs) => ReturnType;
+        };
+    }
+}
+/**
+ * VariableNode Extension
+ *
+ * Allows inserting template variables like {{companyName}} into documents.
+ * Variables are rendered as inline chips and can be resolved when rendering
+ * the final document.
+ *
+ * Triggered by typing `{{` which opens a suggestion menu.
+ */
+declare const VariableNode: Node<VariableOptions, any>;
+
+export { VariableNode, type VariableNodeAttrs, type VariableOptions, VariableNode as default };

package/dist/extensions/variable/index.js

@@ -0,0 +1,190 @@
+"use client";
+"use strict";
+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/index.ts
+var variable_exports = {};
+__export(variable_exports, {
+  VariableNode: () => VariableNode,
+  default: () => variable_default
+});
+module.exports = __toCommonJS(variable_exports);
+var import_core = require("@tiptap/core");
+var import_react2 = require("@tiptap/react");
+
+// src/extensions/variable/variable-view.tsx
+var import_theme = require("@kopexa/theme");
+var import_react = require("@tiptap/react");
+
+// src/extensions/variable/variable-context.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var VariableContext = React.createContext(null);
+function useVariables() {
+  return React.useContext(VariableContext);
+}
+
+// src/extensions/variable/variable-view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function VariableNodeView({ node, editor }) {
+  var _a;
+  const attrs = node.attrs;
+  const { name, fallback, category } = attrs;
+  const context = useVariables();
+  const isEditable = (0, import_react.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 = (0, import_theme.variableNode)({ resolved: hasValue });
+  if (!isEditable && hasValue) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react.NodeViewWrapper,
+      {
+        as: "span",
+        "data-type": "variable",
+        "data-name": name,
+        style: { userSelect: "text" },
+        children: displayValue
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react.NodeViewWrapper,
+    {
+      as: "span",
+      className: styles.wrapper(),
+      "data-type": "variable",
+      "data-name": name,
+      "data-category": category,
+      "data-resolved": hasValue ? "true" : "false",
+      children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.chip(), title: `{{${name}}}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.value(), children: displayValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "span",
+        {
+          className: styles.chip(),
+          title: fallback ? `Fallback: ${fallback}` : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.name(), children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.bracket(), children: "}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.bracket(), children: "}" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/extensions/variable/index.ts
+var VariableNode = import_core.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",
+      (0, import_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": "variable",
+        class: "variable-node"
+      }),
+      `{{${attrs.name}}}`
+    ];
+  },
+  addNodeView() {
+    return (0, import_react2.ReactNodeViewRenderer)(VariableNodeView);
+  },
+  addCommands() {
+    return {
+      insertVariable: (attrs) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs
+        });
+      }
+    };
+  }
+});
+var variable_default = VariableNode;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariableNode
+});

package/dist/extensions/variable/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  VariableNode,
+  variable_default
+} from "../../chunk-4HO7BWDC.mjs";
+import "../../chunk-JVSH5T4B.mjs";
+import "../../chunk-5SMDMQDF.mjs";
+export {
+  VariableNode,
+  variable_default as default
+};

package/dist/extensions/variable/messages.d.mts

@@ -0,0 +1,69 @@
+declare const messages: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insert: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    empty_state: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    hint: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    save: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_company: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_user: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_date: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_document: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_other: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    filler_title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    filler_filled: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+
+export { messages };

package/dist/extensions/variable/messages.d.ts

@@ -0,0 +1,69 @@
+declare const messages: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insert: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    empty_state: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    hint: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    save: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    cancel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_company: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_user: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_date: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_document: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    category_other: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    filler_title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    filler_filled: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+
+export { messages };