@kopexa/tiptap 17.6.18 → 17.7.0

package/dist/ui/heading-dropdown-menu/index.d.ts

@@ -1,14 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@kopexa/button';
-import { Editor } from '@tiptap/react';
-import { Level } from '../heading-button/utils.js';
-
-interface HeadingDropdownMenuProps extends Omit<ButtonProps, "type"> {
-    editor?: Editor | null;
-    levels?: Level[];
-    hideWhenUnavailable?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-}
-declare function HeadingDropdownMenu({ editor: providedEditor, levels, hideWhenUnavailable, onOpenChange, ...props }: HeadingDropdownMenuProps): react_jsx_runtime.JSX.Element | null;
-
-export { HeadingDropdownMenu, type HeadingDropdownMenuProps };

package/dist/ui/heading-dropdown-menu/index.js

@@ -1,308 +0,0 @@
-"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/ui/heading-dropdown-menu/index.tsx
-var heading_dropdown_menu_exports = {};
-__export(heading_dropdown_menu_exports, {
-  HeadingDropdownMenu: () => HeadingDropdownMenu
-});
-module.exports = __toCommonJS(heading_dropdown_menu_exports);
-var import_button2 = require("@kopexa/button");
-var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_editor_utils2 = require("@kopexa/editor-utils");
-var import_icons2 = require("@kopexa/icons");
-var import_react4 = require("@tiptap/react");
-var React2 = __toESM(require("react"));
-
-// src/hooks/use-tiptap-editor.ts
-var import_react = require("@tiptap/react");
-var import_react2 = require("react");
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react.useCurrentEditor)();
-  const mainEditor = (0, import_react2.useMemo)(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = (0, import_react.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/heading-button/index.tsx
-var import_button = require("@kopexa/button");
-var import_editor_utils = require("@kopexa/editor-utils");
-var import_icons = require("@kopexa/icons");
-var React = __toESM(require("react"));
-
-// src/ui/heading-button/utils.ts
-var import_react3 = require("@tiptap/react");
-var headingShortcutKeys = {
-  1: "Ctrl-Alt-1",
-  2: "Ctrl-Alt-2",
-  3: "Ctrl-Alt-3",
-  4: "Ctrl-Alt-4",
-  5: "Ctrl-Alt-5",
-  6: "Ctrl-Alt-6"
-};
-function canToggleHeading(editor, level) {
-  if (!editor) return false;
-  try {
-    return editor.can().toggleNode("heading", "paragraph", { level });
-  } catch {
-    return false;
-  }
-}
-function isHeadingActive(editor, level) {
-  if (!editor) return false;
-  return editor.isActive("heading", { level });
-}
-function toggleHeading(editor, level) {
-  if (!editor) return;
-  if (editor.isActive("heading", { level })) {
-    editor.chain().focus().setNode("paragraph").run();
-  } else {
-    editor.chain().focus().toggleNode("heading", "paragraph", { level }).run();
-  }
-}
-function isHeadingButtonDisabled(editor, level, userDisabled = false) {
-  if (!editor) return true;
-  if (userDisabled) return true;
-  if (!canToggleHeading(editor, level)) return true;
-  return false;
-}
-function shouldShowHeadingButton(params) {
-  const { editor, hideWhenUnavailable, headingInSchema } = params;
-  if (!headingInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if ((0, import_react3.isNodeSelection)(editor.state.selection)) {
-      return false;
-    }
-  }
-  return true;
-}
-function getFormattedHeadingName(level) {
-  return `Heading ${level}`;
-}
-
-// src/ui/heading-button/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var headingIcons = {
-  1: import_icons.HeadingOneIcon,
-  2: import_icons.HeadingTwoIcon,
-  3: import_icons.HeadingThreeIcon,
-  4: import_icons.HeadingFourIcon,
-  5: import_icons.HeadingFiveIcon,
-  6: import_icons.HeadingSixIcon
-};
-function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = (0, import_editor_utils.isNodeInSchema)("heading", editor);
-  const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
-  const isActive = isHeadingActive(editor, level);
-  const Icon = headingIcons[level];
-  const shortcutKey = headingShortcutKeys[level];
-  const formattedName = getFormattedHeadingName(level);
-  return {
-    headingInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  };
-}
-var HeadingButton = ({
-  editor: providedEditor,
-  level,
-  text,
-  hideWhenUnavailable = false,
-  className = "",
-  disabled,
-  onClick,
-  children,
-  ref,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    headingInSchema,
-    isDisabled,
-    isActive,
-    Icon,
-    shortcutKey,
-    formattedName
-  } = useHeadingState(editor, level, disabled);
-  const handleClick = React.useCallback(
-    (e) => {
-      onClick == null ? void 0 : onClick(e);
-      if (!e.defaultPrevented && !isDisabled && editor) {
-        toggleHeading(editor, level);
-      }
-    },
-    [onClick, isDisabled, editor, level]
-  );
-  const show = React.useMemo(() => {
-    return shouldShowHeadingButton({
-      editor,
-      level,
-      hideWhenUnavailable,
-      headingInSchema
-    });
-  }, [editor, level, hideWhenUnavailable, headingInSchema]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_button.Button,
-    {
-      type: "button",
-      className: className.trim(),
-      disabled: isDisabled,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      "data-disabled": isDisabled,
-      tabIndex: -1,
-      "aria-label": formattedName,
-      "aria-pressed": isActive,
-      tooltip: formattedName,
-      shortcutKeys: shortcutKey,
-      onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
-      ...buttonProps,
-      ref,
-      children: children || text
-    }
-  );
-};
-
-// src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function HeadingDropdownMenu({
-  editor: providedEditor,
-  levels = [1, 2, 3, 4, 5, 6],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  var _a;
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const { editor } = useTiptapEditor(providedEditor);
-  const headingInSchema = (0, import_editor_utils2.isNodeInSchema)("heading", editor);
-  const handleOnOpenChange = React2.useCallback(
-    (open) => {
-      setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
-    },
-    [onOpenChange]
-  );
-  const getActiveIcon = React2.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.HeadingIcon, {});
-    const activeLevel = levels.find(
-      (level) => editor.isActive("heading", { level })
-    );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.HeadingIcon, {});
-    const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActiveIcon, {});
-  }, [editor, levels]);
-  const canToggleAnyHeading = React2.useCallback(() => {
-    if (!editor) return false;
-    return levels.some(
-      (level) => editor.can().toggleNode("heading", "paragraph", { level })
-    );
-  }, [editor, levels]);
-  const isDisabled = !canToggleAnyHeading();
-  const isAnyHeadingActive = (_a = editor == null ? void 0 : editor.isActive("heading")) != null ? _a : false;
-  const show = React2.useMemo(() => {
-    if (!headingInSchema || !editor) {
-      return false;
-    }
-    if (hideWhenUnavailable) {
-      if ((0, import_react4.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
-        return false;
-      }
-    }
-    return true;
-  }, [headingInSchema, editor, hideWhenUnavailable, canToggleAnyHeading]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_button2.Button,
-      {
-        type: "button",
-        disabled: isDisabled,
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyHeadingActive ? "on" : "off",
-        "data-disabled": isDisabled,
-        tabIndex: -1,
-        "aria-label": "Format text as heading",
-        "aria-pressed": isAnyHeadingActive,
-        tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      HeadingButton,
-      {
-        editor,
-        level,
-        text: getFormattedHeadingName(level),
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, `heading-${level}`)) }) })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  HeadingDropdownMenu
-});

package/dist/ui/heading-dropdown-menu/index.mjs

@@ -1,10 +0,0 @@
-"use client";
-import {
-  HeadingDropdownMenu
-} from "../../chunk-V6TAZMQN.mjs";
-import "../../chunk-EHY2NAW7.mjs";
-import "../../chunk-33QD5PYJ.mjs";
-import "../../chunk-P55PLOHR.mjs";
-export {
-  HeadingDropdownMenu
-};

package/dist/ui/link-bubble/index.d.mts

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Editor } from '@tiptap/react';
-
-interface LinkBubbleProps {
-    editor: Editor | null;
-}
-/**
- * LinkBubble appears when the cursor is on a link.
- * Shows URL preview with edit, open, and remove actions.
- */
-declare function LinkBubble({ editor }: LinkBubbleProps): react_jsx_runtime.JSX.Element | null;
-
-export { LinkBubble, type LinkBubbleProps, LinkBubble as default };

package/dist/ui/link-bubble/index.d.ts

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Editor } from '@tiptap/react';
-
-interface LinkBubbleProps {
-    editor: Editor | null;
-}
-/**
- * LinkBubble appears when the cursor is on a link.
- * Shows URL preview with edit, open, and remove actions.
- */
-declare function LinkBubble({ editor }: LinkBubbleProps): react_jsx_runtime.JSX.Element | null;
-
-export { LinkBubble, type LinkBubbleProps, LinkBubble as default };

package/dist/ui/link-bubble/index.js

@@ -1,183 +0,0 @@
-"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/ui/link-bubble/index.tsx
-var link_bubble_exports = {};
-__export(link_bubble_exports, {
-  LinkBubble: () => LinkBubble,
-  default: () => link_bubble_default
-});
-module.exports = __toCommonJS(link_bubble_exports);
-var import_button = require("@kopexa/button");
-var import_icons = require("@kopexa/icons");
-var import_input = require("@kopexa/input");
-var import_menus = require("@tiptap/react/menus");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react.useState)(false);
-  const [url, setUrl] = (0, import_react.useState)("");
-  const getCurrentUrl = (0, import_react.useCallback)(() => {
-    if (!editor) return "";
-    const attrs = editor.getAttributes("link");
-    return attrs.href || "";
-  }, [editor]);
-  (0, import_react.useEffect)(() => {
-    const isLinkActive = editor == null ? void 0 : editor.isActive("link");
-    if (isLinkActive) {
-      setUrl(getCurrentUrl());
-      setIsEditing(false);
-    }
-  }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react.useCallback)(() => {
-    const href = getCurrentUrl();
-    if (href) {
-      window.open(href, "_blank", "noopener,noreferrer");
-    }
-  }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react.useCallback)(() => {
-    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
-  }, [editor]);
-  const handleEdit = (0, import_react.useCallback)(() => {
-    setUrl(getCurrentUrl());
-    setIsEditing(true);
-  }, [getCurrentUrl]);
-  const handleSave = (0, import_react.useCallback)(() => {
-    if (url) {
-      editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-    } else {
-      editor == null ? void 0 : editor.chain().focus().unsetLink().run();
-    }
-    setIsEditing(false);
-  }, [editor, url]);
-  const handleKeyDown = (0, import_react.useCallback)(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        handleSave();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        setIsEditing(false);
-        setUrl(getCurrentUrl());
-      }
-    },
-    [handleSave, getCurrentUrl]
-  );
-  if (!editor) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_menus.BubbleMenu,
-    {
-      editor,
-      pluginKey: "linkBubbleMenu",
-      shouldShow: ({ editor: e, view }) => {
-        if (!view.hasFocus()) return false;
-        return e.isActive("link") && e.isEditable;
-      },
-      options: {
-        placement: "bottom-start",
-        offset: 8
-      },
-      className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_input.Input,
-          {
-            type: "url",
-            value: url,
-            onChange: (e) => setUrl(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: "Enter URL...",
-            className: "flex-1 h-8 text-sm",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_button.IconButton,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            onClick: handleSave,
-            "aria-label": "Save link",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EditIcon, { className: "size-4" })
-          }
-        )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "a",
-          {
-            href: getCurrentUrl(),
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-            onClick: (e) => {
-              e.preventDefault();
-              handleOpenLink();
-            },
-            children: getCurrentUrl()
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_button.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleOpenLink,
-              "aria-label": "Open link in new tab",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ExternalLinkIcon, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_button.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleEdit,
-              "aria-label": "Edit link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.EditIcon, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_button.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleRemoveLink,
-              "aria-label": "Remove link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.TrashIcon, { className: "size-4" })
-            }
-          )
-        ] })
-      ] }) })
-    }
-  );
-}
-var link_bubble_default = LinkBubble;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LinkBubble
-});

package/dist/ui/link-bubble/index.mjs

@@ -1,10 +0,0 @@
-"use client";
-"use client";
-import {
-  LinkBubble,
-  link_bubble_default
-} from "../../chunk-XGAABDMW.mjs";
-export {
-  LinkBubble,
-  link_bubble_default as default
-};

package/dist/ui/link-popover/index.d.mts

@@ -1,7 +0,0 @@
-export { LinkButton, LinkContent, LinkMain, LinkMainProps, LinkPopover, LinkPopoverProps } from './link-popover.mjs';
-export { LinkHandlerProps, UseLinkPopoverConfig, canSetLink, isLinkActive, shouldShowLinkButton, useLinkHandler, useLinkPopover, useLinkState } from './use-link-popover.mjs';
-import 'react/jsx-runtime';
-import '@kopexa/button';
-import '@tiptap/react';
-import '@kopexa/icons';
-import 'react';

package/dist/ui/link-popover/index.d.ts

@@ -1,7 +0,0 @@
-export { LinkButton, LinkContent, LinkMain, LinkMainProps, LinkPopover, LinkPopoverProps } from './link-popover.js';
-export { LinkHandlerProps, UseLinkPopoverConfig, canSetLink, isLinkActive, shouldShowLinkButton, useLinkHandler, useLinkPopover, useLinkState } from './use-link-popover.js';
-import 'react/jsx-runtime';
-import '@kopexa/button';
-import '@tiptap/react';
-import '@kopexa/icons';
-import 'react';