@kopexa/tiptap 17.6.18 → 17.7.0

package/dist/chunk-L5RDMV3H.mjs

@@ -1,216 +0,0 @@
-"use client";
-import {
-  calculateStartPosition
-} from "./chunk-CNVACBGT.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-import {
-  useFloatingElement
-} from "./chunk-KK4K43WM.mjs";
-import {
-  useMenuNavigation
-} from "./chunk-42HKGCOO.mjs";
-
-// src/ui/suggestion-menu/suggestion-menu.tsx
-import { FloatingPortal, flip, offset, shift, size } from "@floating-ui/react";
-import { PluginKey } from "@tiptap/pm/state";
-import {
-  Suggestion,
-  SuggestionPluginKey
-} from "@tiptap/suggestion";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var SuggestionMenu = ({
-  editor: providedEditor,
-  floatingOptions,
-  selector = "tiptap-suggestion-menu",
-  children,
-  maxHeight = 384,
-  pluginKey = SuggestionPluginKey,
-  ...internalSuggestionProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = React.useState(false);
-  const [internalClientRect, setInternalClientRect] = React.useState(null);
-  const [internalCommand, setInternalCommand] = React.useState(null);
-  const [internalItems, setInternalItems] = React.useState(
-    []
-  );
-  const [internalQuery, setInternalQuery] = React.useState("");
-  const [, setInternalRange] = React.useState(null);
-  const { ref, style, getFloatingProps, isMounted } = useFloatingElement(
-    show,
-    internalClientRect,
-    1e3,
-    {
-      placement: "bottom-start",
-      middleware: [
-        offset(10),
-        flip({
-          mainAxis: true,
-          crossAxis: false
-        }),
-        shift(),
-        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 = React.useRef(internalSuggestionProps);
-  React.useEffect(() => {
-    internalSuggestionPropsRef.current = internalSuggestionProps;
-  }, [internalSuggestionProps]);
-  const closePopup = React.useCallback(() => {
-    setShow(false);
-  }, []);
-  React.useEffect(() => {
-    if (!editor || editor.isDestroyed) {
-      return;
-    }
-    const existingPlugin = editor.state.plugins.find(
-      (plugin) => plugin.spec.key === pluginKey
-    );
-    if (existingPlugin) {
-      editor.unregisterPlugin(pluginKey);
-    }
-    const suggestion = Suggestion({
-      pluginKey: pluginKey instanceof PluginKey ? pluginKey : new 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 = React.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__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ 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
-      })
-    }
-  ) });
-};
-
-export {
-  SuggestionMenu
-};

package/dist/chunk-LNVWG34E.mjs

@@ -1,165 +0,0 @@
-"use client";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/mark-button/index.tsx
-import { isMarkInSchema, isNodeTypeSelected } from "@kopexa/editor-utils";
-import {
-  BoldIcon,
-  CodeIcon,
-  ItalicIcon,
-  StrikeIcon,
-  SubscriptIcon,
-  SuperscriptIcon,
-  UnderlineIcon
-} from "@kopexa/icons";
-import { ToolbarButton } from "@kopexa/toolbar";
-import { isNodeSelection } from "@tiptap/react";
-import { useCallback, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-var markIcons = {
-  bold: BoldIcon,
-  italic: ItalicIcon,
-  underline: UnderlineIcon,
-  strike: StrikeIcon,
-  code: CodeIcon,
-  superscript: SuperscriptIcon,
-  subscript: SubscriptIcon
-};
-var markShortcutKeys = {
-  bold: "mod+b",
-  italic: "mod+i",
-  underline: "mod+u",
-  strike: "mod+shift+s",
-  code: "mod+e",
-  superscript: "mod+.",
-  subscript: "mod+,"
-};
-function canToggleMark(editor, type) {
-  if (!editor || !editor.isEditable) return false;
-  if (!isMarkInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
-    return false;
-  return editor.can().toggleMark(type);
-}
-function isMarkActive(editor, type) {
-  if (!editor) return false;
-  return editor.isActive(type);
-}
-function toggleMark(editor, type) {
-  if (!editor) return;
-  editor.chain().focus().toggleMark(type).run();
-}
-function isMarkButtonDisabled(editor, type, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (editor.isActive("codeBlock")) return true;
-  if (!canToggleMark(editor, type)) return true;
-  return false;
-}
-function shouldShowMarkButton(params) {
-  const { editor, type, hideWhenUnavailable, markInSchema } = params;
-  if (!markInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if (isNodeSelection(editor.state.selection) || !canToggleMark(editor, type)) {
-      return false;
-    }
-  }
-  return true;
-}
-function getFormattedMarkName(type) {
-  return type.charAt(0).toUpperCase() + type.slice(1);
-}
-function useMarkState(editor, type, disabled = false) {
-  const markInSchema = isMarkInSchema(type, editor);
-  const isDisabled = isMarkButtonDisabled(editor, type, disabled);
-  const isActive = isMarkActive(editor, type);
-  const Icon = markIcons[type];
-  const shortcutKey = markShortcutKeys[type];
-  const formattedName = getFormattedMarkName(type);
-  return {
-    markInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  };
-}
-var MarkButton = ({
-  editor: providedEditor,
-  type,
-  text,
-  hideWhenUnavailable = false,
-  className = "",
-  disabled,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    markInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useMarkState(editor, type, disabled);
-  const handleClick = useCallback(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleMark(editor, type);
-      }
-    },
-    [onClick, isDisabled, editor, type]
-  );
-  const show = useMemo(() => {
-    return shouldShowMarkButton({
-      editor,
-      type,
-      hideWhenUnavailable,
-      markInSchema
-    });
-  }, [editor, type, hideWhenUnavailable, markInSchema]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
-      tabIndex: -1,
-      "aria-label": type,
-      "aria-pressed": isActive,
-      title: formattedName,
-      shortcutKeys: shortcutKey,
-      onClick: handleClick,
-      isIconOnly: true,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx(Icon, {})
-    }
-  );
-};
-
-export {
-  markIcons,
-  markShortcutKeys,
-  canToggleMark,
-  isMarkActive,
-  toggleMark,
-  isMarkButtonDisabled,
-  shouldShowMarkButton,
-  getFormattedMarkName,
-  useMarkState,
-  MarkButton
-};

package/dist/chunk-LVNUU67N.mjs

@@ -1 +0,0 @@
-"use client";

package/dist/chunk-MNTOOEHA.mjs

@@ -1 +0,0 @@
-"use client";

package/dist/chunk-N3JE67CS.mjs

@@ -1,81 +0,0 @@
-"use client";
-import {
-  ImageUploadNodeView
-} from "./chunk-EAAQE5ZV.mjs";
-
-// src/extensions/image-upload/index.ts
-import { Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-var ImageUploadNode = Node.create({
-  name: "imageUpload",
-  group: "block",
-  atom: true,
-  draggable: true,
-  selectable: true,
-  addOptions() {
-    return {
-      accept: "image/*",
-      maxSize: 0,
-      HTMLAttributes: {}
-    };
-  },
-  addAttributes() {
-    return {
-      // Upload state tracking
-      uploadState: {
-        default: null,
-        rendered: false
-      },
-      uploadProgress: {
-        default: null,
-        rendered: false
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'div[data-type="image-upload"]'
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return ["div", { ...HTMLAttributes, "data-type": "image-upload" }];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer(ImageUploadNodeView);
-  },
-  addCommands() {
-    return {
-      setImageUpload: () => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name
-        });
-      }
-    };
-  },
-  addKeyboardShortcuts() {
-    return {
-      Enter: ({ editor }) => {
-        const { selection } = editor.state;
-        const { $from } = selection;
-        const node = $from.nodeAfter;
-        if ((node == null ? void 0 : node.type.name) === "imageUpload" && editor.isActive("imageUpload")) {
-          const nodeEl = editor.view.nodeDOM($from.pos);
-          if (nodeEl instanceof HTMLElement) {
-            const input = nodeEl.querySelector('input[type="file"]');
-            if (input instanceof HTMLElement) {
-              input.click();
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-    };
-  }
-});
-
-export {
-  ImageUploadNode
-};

package/dist/chunk-N4CT5RNC.mjs

@@ -1,123 +0,0 @@
-"use client";
-import {
-  messages
-} from "./chunk-JCV5SEKN.mjs";
-
-// src/extensions/callout/callout-settings.tsx
-import { Button, IconButton } from "@kopexa/button";
-import { Dialog } from "@kopexa/dialog";
-import { SettingsIcon } from "@kopexa/icons";
-import { Input } from "@kopexa/input";
-import { Label } from "@kopexa/label";
-import { Select } from "@kopexa/select";
-import { useCallback, useEffect, useState } from "react";
-import { useIntl } from "react-intl";
-import { Fragment, jsx, jsxs } from "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 = useIntl();
-  const [isOpen, setIsOpen] = useState(false);
-  const [localAttrs, setLocalAttrs] = useState(attrs);
-  useEffect(() => {
-    if (isOpen) {
-      setLocalAttrs(attrs);
-    }
-  }, [isOpen, attrs]);
-  const handleSave = 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 = useCallback(() => {
-    setLocalAttrs(attrs);
-    setIsOpen(false);
-  }, [attrs]);
-  const handleVariantChange = useCallback((value) => {
-    setLocalAttrs((prev) => ({
-      ...prev,
-      variant: String(value)
-    }));
-  }, []);
-  const handleTitleChange = useCallback(
-    (e) => {
-      const value = e.target.value;
-      setLocalAttrs((prev) => ({
-        ...prev,
-        title: value || null
-      }));
-    },
-    []
-  );
-  if (!editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        size: "sm",
-        variant: "ghost",
-        "aria-label": intl.formatMessage(messages.settings),
-        onClick: (e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          setIsOpen(true);
-        },
-        children: /* @__PURE__ */ jsx(SettingsIcon, { className: "size-3.5" })
-      }
-    ),
-    /* @__PURE__ */ jsx(Dialog.Root, { open: isOpen, onOpenChange: setIsOpen, size: "sm", children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
-      /* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: intl.formatMessage(messages.settings) }) }),
-      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: intl.formatMessage(messages.variant) }),
-          /* @__PURE__ */ jsxs(
-            Select,
-            {
-              size: "sm",
-              value: localAttrs.variant,
-              onValueChange: handleVariantChange,
-              children: [
-                /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, {}) }),
-                /* @__PURE__ */ jsx(Select.Content, { children: VARIANTS.map((v) => /* @__PURE__ */ jsx(Select.Item, { value: v.value, children: intl.formatMessage(messages[v.messageKey]) }, v.value)) })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: intl.formatMessage(messages.title) }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              size: "sm",
-              value: localAttrs.title || "",
-              onChange: handleTitleChange,
-              placeholder: intl.formatMessage(messages.title_placeholder)
-            }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
-      ] })
-    ] }) })
-  ] });
-}
-
-export {
-  CalloutSettings
-};

package/dist/chunk-OEVR5N7X.mjs

@@ -1,65 +0,0 @@
-"use client";
-import {
-  useCodeBlock
-} from "./chunk-BEV5U2DK.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/codeblock-button/code-block-button.tsx
-import { CodeblockIcon } from "@kopexa/icons";
-import { ToolbarButton } from "@kopexa/toolbar";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-var CodeBlockButton = ({
-  editor: providedEditor,
-  text,
-  hideWhenUnavailable = false,
-  onToggled,
-  showShortcut = false,
-  onClick,
-  children,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const { isVisible, canToggle, isActive, handleToggle, label, shortcutKeys } = useCodeBlock({
-    editor,
-    hideWhenUnavailable,
-    onToggled
-  });
-  const handleClick = useCallback(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleToggle();
-    },
-    [handleToggle, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      type: "button",
-      variant: "ghost",
-      color: "default",
-      disabled: !canToggle,
-      "data-disabled": !canToggle,
-      "data-active-state": isActive ? "on" : "off",
-      tabIndex: -1,
-      "aria-label": "codeBlock",
-      "aria-pressed": isActive,
-      title: label,
-      shortcutKeys,
-      onClick: handleClick,
-      isIconOnly: true,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx(CodeblockIcon, {})
-    }
-  );
-};
-
-export {
-  CodeBlockButton
-};

package/dist/chunk-P55PLOHR.mjs

@@ -1,34 +0,0 @@
-"use client";
-
-// src/hooks/use-tiptap-editor.ts
-import { useCurrentEditor, useEditorState } from "@tiptap/react";
-import { useMemo } from "react";
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = useCurrentEditor();
-  const mainEditor = useMemo(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = 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 };
-}
-
-export {
-  useTiptapEditor
-};