@kopexa/tiptap 17.0.17 → 17.2.0

package/dist/extensions/callout/callout-view.js

@@ -0,0 +1,273 @@
+"use client";
+"use strict";
+"use client";
+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/callout/callout-view.tsx
+var callout_view_exports = {};
+__export(callout_view_exports, {
+  CalloutNodeView: () => CalloutNodeView,
+  default: () => callout_view_default
+});
+module.exports = __toCommonJS(callout_view_exports);
+var import_icons2 = require("@kopexa/icons");
+var import_theme = require("@kopexa/theme");
+var import_react2 = require("@tiptap/react");
+var import_react3 = require("react");
+
+// src/extensions/callout/callout-settings.tsx
+var import_button = require("@kopexa/button");
+var import_dialog = require("@kopexa/dialog");
+var import_icons = require("@kopexa/icons");
+var import_input = require("@kopexa/input");
+var import_label = require("@kopexa/label");
+var import_select = require("@kopexa/select");
+var import_react = require("react");
+var import_react_intl2 = require("react-intl");
+
+// src/extensions/callout/messages.ts
+var import_react_intl = require("react-intl");
+var messages = (0, import_react_intl.defineMessages)({
+  settings: {
+    id: "editor.callout.settings",
+    defaultMessage: "Settings",
+    description: "Settings button label"
+  },
+  variant: {
+    id: "editor.callout.variant",
+    defaultMessage: "Variant",
+    description: "Variant setting label"
+  },
+  variant_default: {
+    id: "editor.callout.variant_default",
+    defaultMessage: "Default",
+    description: "Default variant option"
+  },
+  variant_info: {
+    id: "editor.callout.variant_info",
+    defaultMessage: "Info",
+    description: "Info variant option"
+  },
+  variant_success: {
+    id: "editor.callout.variant_success",
+    defaultMessage: "Success",
+    description: "Success variant option"
+  },
+  variant_warning: {
+    id: "editor.callout.variant_warning",
+    defaultMessage: "Warning",
+    description: "Warning variant option"
+  },
+  variant_destructive: {
+    id: "editor.callout.variant_destructive",
+    defaultMessage: "Error",
+    description: "Destructive/Error variant option"
+  },
+  title: {
+    id: "editor.callout.title",
+    defaultMessage: "Title",
+    description: "Title input label"
+  },
+  title_placeholder: {
+    id: "editor.callout.title_placeholder",
+    defaultMessage: "Optional title...",
+    description: "Title input placeholder"
+  },
+  save: {
+    id: "editor.callout.save",
+    defaultMessage: "Save",
+    description: "Save button label"
+  },
+  cancel: {
+    id: "editor.callout.cancel",
+    defaultMessage: "Cancel",
+    description: "Cancel button label"
+  }
+});
+
+// src/extensions/callout/callout-settings.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANTS = [
+  { value: "default", messageKey: "variant_default" },
+  { value: "info", messageKey: "variant_info" },
+  { value: "success", messageKey: "variant_success" },
+  { value: "warning", messageKey: "variant_warning" },
+  { value: "destructive", messageKey: "variant_destructive" }
+];
+function CalloutSettings({
+  editor,
+  attrs,
+  getPos
+}) {
+  const intl = (0, import_react_intl2.useIntl)();
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react.useState)(attrs);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+      setLocalAttrs(attrs);
+    }
+  }, [isOpen, attrs]);
+  const handleSave = (0, import_react.useCallback)(() => {
+    const pos = getPos();
+    if (pos === void 0) return;
+    editor.view.dispatch(
+      editor.state.tr.setNodeMarkup(pos, void 0, localAttrs)
+    );
+    setIsOpen(false);
+  }, [editor, localAttrs, getPos]);
+  const handleCancel = (0, import_react.useCallback)(() => {
+    setLocalAttrs(attrs);
+    setIsOpen(false);
+  }, [attrs]);
+  const handleVariantChange = (0, import_react.useCallback)((value) => {
+    setLocalAttrs((prev) => ({
+      ...prev,
+      variant: String(value)
+    }));
+  }, []);
+  const handleTitleChange = (0, import_react.useCallback)(
+    (e) => {
+      const value = e.target.value;
+      setLocalAttrs((prev) => ({
+        ...prev,
+        title: value || null
+      }));
+    },
+    []
+  );
+  if (!editor.isEditable) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.IconButton,
+      {
+        size: "sm",
+        variant: "ghost",
+        "aria-label": intl.formatMessage(messages.settings),
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          setIsOpen(true);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SettingsIcon, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Title, { children: intl.formatMessage(messages.settings) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.variant) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_select.Select,
+            {
+              size: "sm",
+              value: localAttrs.variant,
+              onValueChange: handleVariantChange,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Value, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Content, { children: VARIANTS.map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: v.value, children: intl.formatMessage(messages[v.messageKey]) }, v.value)) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.Label, { className: "text-sm", children: intl.formatMessage(messages.title) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Input,
+            {
+              size: "sm",
+              value: localAttrs.title || "",
+              onChange: handleTitleChange,
+              placeholder: intl.formatMessage(messages.title_placeholder)
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Footer, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/extensions/callout/callout-view.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function getVariantIcon(variant, iconClass) {
+  switch (variant) {
+    case "info":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.InfoIcon, { className: iconClass });
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CheckCirleIcon, { className: iconClass });
+    case "warning":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.AlertIcon, { className: iconClass });
+    case "destructive":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.AlertCircleIcon, { className: iconClass });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.ShellIcon, { className: iconClass });
+  }
+}
+function CalloutNodeView({ editor, node, getPos }) {
+  const attrs = node.attrs;
+  const { variant = "info", title } = attrs;
+  const isEditable = (0, import_react2.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a;
+      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
+    }
+  });
+  const styles = (0, import_react3.useMemo)(
+    () => (0, import_theme.callout)({
+      variant,
+      radius: "md",
+      size: "md"
+    }),
+    [variant]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_react2.NodeViewWrapper,
+    {
+      className: styles.root(),
+      "data-type": "callout",
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.iconContainer(), children: getVariantIcon(variant, styles.icon()) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.content(), children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.title(), children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.NodeViewContent, { className: "callout-content" })
+        ] }),
+        isEditable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          CalloutSettings,
+          {
+            editor,
+            attrs,
+            getPos
+          }
+        ) })
+      ]
+    }
+  );
+}
+var callout_view_default = CalloutNodeView;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalloutNodeView
+});

package/dist/extensions/callout/callout-view.mjs

@@ -0,0 +1,12 @@
+"use client";
+"use client";
+import {
+  CalloutNodeView,
+  callout_view_default
+} from "../../chunk-VF3G2URZ.mjs";
+import "../../chunk-N4CT5RNC.mjs";
+import "../../chunk-JCV5SEKN.mjs";
+export {
+  CalloutNodeView,
+  callout_view_default as default
+};

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

@@ -0,0 +1,44 @@
+import { Node } from '@tiptap/core';
+
+type CalloutVariant = "default" | "info" | "success" | "warning" | "destructive";
+interface CalloutNodeAttrs {
+    /**
+     * Visual variant of the callout
+     * @default "info"
+     */
+    variant: CalloutVariant;
+    /**
+     * Optional title for the callout
+     * @default null
+     */
+    title: string | null;
+}
+interface CalloutOptions {
+    /**
+     * Custom HTML attributes for the Callout wrapper element.
+     */
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        calloutNode: {
+            /**
+             * Insert a callout node
+             */
+            insertCallout: (variant?: CalloutVariant) => ReturnType;
+            /**
+             * Update callout settings
+             */
+            updateCalloutSettings: (attrs: Partial<CalloutNodeAttrs>) => ReturnType;
+        };
+    }
+}
+/**
+ * Callout Node Extension
+ *
+ * Inserts a callout block with different variants (info, warning, success, error)
+ * Supports editable content inside the callout.
+ */
+declare const CalloutNode: Node<CalloutOptions, any>;
+
+export { type CalloutNodeAttrs as CalloutAttrs, CalloutNode, type CalloutNodeAttrs, type CalloutOptions, type CalloutVariant, CalloutNode as default };

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

@@ -0,0 +1,44 @@
+import { Node } from '@tiptap/core';
+
+type CalloutVariant = "default" | "info" | "success" | "warning" | "destructive";
+interface CalloutNodeAttrs {
+    /**
+     * Visual variant of the callout
+     * @default "info"
+     */
+    variant: CalloutVariant;
+    /**
+     * Optional title for the callout
+     * @default null
+     */
+    title: string | null;
+}
+interface CalloutOptions {
+    /**
+     * Custom HTML attributes for the Callout wrapper element.
+     */
+    HTMLAttributes: Record<string, unknown>;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        calloutNode: {
+            /**
+             * Insert a callout node
+             */
+            insertCallout: (variant?: CalloutVariant) => ReturnType;
+            /**
+             * Update callout settings
+             */
+            updateCalloutSettings: (attrs: Partial<CalloutNodeAttrs>) => ReturnType;
+        };
+    }
+}
+/**
+ * Callout Node Extension
+ *
+ * Inserts a callout block with different variants (info, warning, success, error)
+ * Supports editable content inside the callout.
+ */
+declare const CalloutNode: Node<CalloutOptions, any>;
+
+export { type CalloutNodeAttrs as CalloutAttrs, CalloutNode, type CalloutNodeAttrs, type CalloutOptions, type CalloutVariant, CalloutNode as default };