@kopexa/tiptap 17.6.17 → 17.7.0

package/dist/ui/color-highlight-popover/color-highlight-popover.js

@@ -1,590 +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/ui/color-highlight-popover/color-highlight-popover.tsx
-var color_highlight_popover_exports = {};
-__export(color_highlight_popover_exports, {
-  ColorHighlightPopover: () => ColorHighlightPopover,
-  ColorHighlightPopoverButton: () => ColorHighlightPopoverButton,
-  ColorHighlightPopoverContent: () => ColorHighlightPopoverContent
-});
-module.exports = __toCommonJS(color_highlight_popover_exports);
-var import_button = require("@kopexa/button");
-var import_icons2 = require("@kopexa/icons");
-var import_popover = require("@kopexa/popover");
-var import_toolbar2 = require("@kopexa/toolbar");
-var import_react4 = require("react");
-
-// src/hooks/use-menu-navigation.ts
-var React = __toESM(require("react"));
-function useMenuNavigation({
-  editor,
-  containerRef,
-  query,
-  items,
-  onSelect,
-  onClose,
-  orientation = "vertical",
-  autoSelectFirstItem = true
-}) {
-  const [selectedIndex, setSelectedIndex] = React.useState(
-    autoSelectFirstItem ? 0 : -1
-  );
-  React.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
-  ]);
-  React.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_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/color-highlight-button/color-highlight-button.tsx
-var import_theme = require("@kopexa/theme");
-var import_toolbar = require("@kopexa/toolbar");
-var import_react3 = require("react");
-
-// src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils = require("@kopexa/editor-utils");
-var import_icons = require("@kopexa/icons");
-var import_use_is_mobile = require("@kopexa/use-is-mobile");
-var React2 = __toESM(require("react"));
-var import_react_hotkeys_hook = require("react-hotkeys-hook");
-var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
-var HIGHLIGHT_COLORS = [
-  {
-    label: "Default background",
-    value: "var(--tt-bg-color)",
-    border: "var(--tt-bg-color-contrast)"
-  },
-  {
-    label: "Gray background",
-    value: "var(--tt-color-highlight-gray)",
-    border: "var(--tt-color-highlight-gray-contrast)"
-  },
-  {
-    label: "Brown background",
-    value: "var(--tt-color-highlight-brown)",
-    border: "var(--tt-color-highlight-brown-contrast)"
-  },
-  {
-    label: "Orange background",
-    value: "var(--tt-color-highlight-orange)",
-    border: "var(--tt-color-highlight-orange-contrast)"
-  },
-  {
-    label: "Yellow background",
-    value: "var(--tt-color-highlight-yellow)",
-    border: "var(--tt-color-highlight-yellow-contrast)"
-  },
-  {
-    label: "Green background",
-    value: "var(--tt-color-highlight-green)",
-    border: "var(--tt-color-highlight-green-contrast)"
-  },
-  {
-    label: "Blue background",
-    value: "var(--tt-color-highlight-blue)",
-    border: "var(--tt-color-highlight-blue-contrast)"
-  },
-  {
-    label: "Purple background",
-    value: "var(--tt-color-highlight-purple)",
-    border: "var(--tt-color-highlight-purple-contrast)"
-  },
-  {
-    label: "Pink background",
-    value: "var(--tt-color-highlight-pink)",
-    border: "var(--tt-color-highlight-pink-contrast)"
-  },
-  {
-    label: "Red background",
-    value: "var(--tt-color-highlight-red)",
-    border: "var(--tt-color-highlight-red-contrast)"
-  }
-];
-function pickHighlightColorsByValue(values) {
-  const colorMap = new Map(
-    HIGHLIGHT_COLORS.map((color) => [color.value, color])
-  );
-  return values.map((value) => colorMap.get(value)).filter((color) => !!color);
-}
-function canColorHighlight(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils.isMarkInSchema)("highlight", editor) || (0, import_editor_utils.isNodeTypeSelected)(editor, ["image"]))
-    return false;
-  return editor.can().setMark("highlight");
-}
-function isColorHighlightActive(editor, highlightColor) {
-  if (!editor || !editor.isEditable) return false;
-  return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
-}
-function removeHighlight(editor) {
-  if (!editor || !editor.isEditable) return false;
-  if (!canColorHighlight(editor)) return false;
-  return editor.chain().focus().unsetMark("highlight").run();
-}
-function shouldShowButton(props) {
-  const { editor, hideWhenUnavailable } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils.isMarkInSchema)("highlight", editor)) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canColorHighlight(editor);
-  }
-  return true;
-}
-function useColorHighlight(config) {
-  const {
-    editor: providedEditor,
-    label,
-    highlightColor,
-    hideWhenUnavailable = false,
-    onApplied
-  } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = (0, import_use_is_mobile.useIsMobile)();
-  const [isVisible, setIsVisible] = React2.useState(true);
-  const canColorHighlightState = canColorHighlight(editor);
-  const isActive = isColorHighlightActive(editor, highlightColor);
-  React2.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  const handleColorHighlight = React2.useCallback(() => {
-    if (!editor || !canColorHighlightState || !highlightColor || !label)
-      return false;
-    if (editor.state.storedMarks) {
-      const highlightMarkType = editor.schema.marks.highlight;
-      if (highlightMarkType) {
-        editor.view.dispatch(
-          editor.state.tr.removeStoredMark(highlightMarkType)
-        );
-      }
-    }
-    setTimeout(() => {
-      const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
-      if (success) {
-        onApplied == null ? void 0 : onApplied({ color: highlightColor, label });
-      }
-      return success;
-    }, 0);
-  }, [canColorHighlightState, highlightColor, editor, label, onApplied]);
-  const handleRemoveHighlight = React2.useCallback(() => {
-    const success = removeHighlight(editor);
-    if (success) {
-      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
-    }
-    return success;
-  }, [editor, onApplied]);
-  (0, import_react_hotkeys_hook.useHotkeys)(
-    COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleColorHighlight();
-    },
-    {
-      enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
-    }
-  );
-  return {
-    isVisible,
-    isActive,
-    handleColorHighlight,
-    handleRemoveHighlight,
-    canColorHighlight: canColorHighlightState,
-    label: label || `Highlight`,
-    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
-    Icon: import_icons.HighlighterIcon
-  };
-}
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var ColorHighlightButton = ({
-  editor: providedEditor,
-  highlightColor,
-  text,
-  hideWhenUnavailable = false,
-  onApplied,
-  showShortcut = false,
-  onClick,
-  children,
-  style,
-  className,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    canColorHighlight: canColorHighlight2,
-    isActive,
-    handleColorHighlight,
-    label,
-    shortcutKeys
-  } = useColorHighlight({
-    editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
-    hideWhenUnavailable,
-    onApplied
-  });
-  const handleClick = (0, import_react3.useCallback)(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleColorHighlight();
-    },
-    [handleColorHighlight, onClick]
-  );
-  const buttonStyle = (0, import_react3.useMemo)(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  const styles = (0, import_theme.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_toolbar.ToolbarButton,
-    {
-      type: "button",
-      disabled: !canColorHighlight2,
-      "data-disabled": !canColorHighlight2,
-      variant: "ghost",
-      color: "default",
-      "data-active-state": isActive ? "on" : "off",
-      tabIndex: -1,
-      "aria-label": label,
-      shortcutKeys,
-      "aria-pressed": isActive,
-      onClick: handleClick,
-      style: buttonStyle,
-      className: styles.button({ className }),
-      isIconOnly: true,
-      ...buttonProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
-    }
-  );
-};
-
-// src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ColorHighlightPopoverButton = ({
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  import_button.IconButton,
-  {
-    type: "button",
-    className,
-    variant: "ghost",
-    color: "default",
-    tabIndex: -1,
-    "aria-label": "Highlight text",
-    tooltip: "Highlight",
-    isIconOnly: !children,
-    ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.HighlighterIcon, {})
-  }
-);
-function ColorHighlightPopoverContent({
-  editor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ])
-}) {
-  const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react4.useRef)(null);
-  const menuItems = (0, import_react4.useMemo)(
-    () => [...colors, { label: "Remove highlight", value: "none" }],
-    [colors]
-  );
-  const { selectedIndex } = useMenuNavigation({
-    containerRef,
-    items: menuItems,
-    orientation: "both",
-    onSelect: (item) => {
-      if (!containerRef.current) return false;
-      const highlightedElement = containerRef.current.querySelector(
-        '[data-highlighted="true"]'
-      );
-      if (highlightedElement) highlightedElement.click();
-      if (item.value === "none") handleRemoveHighlight();
-    },
-    autoSelectFirstItem: false
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        className: "flex items-center gap-1 outline-none",
-        "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          ColorHighlightButton,
-          {
-            editor,
-            highlightColor: color.value,
-            "aria-label": `${color.label} highlight color`,
-            tabIndex: index === selectedIndex ? 0 : -1,
-            "data-highlighted": selectedIndex === index
-          },
-          color.value
-        ))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_toolbar2.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_button.IconButton,
-      {
-        onClick: handleRemoveHighlight,
-        "aria-label": "Remove highlight",
-        tabIndex: selectedIndex === colors.length ? 0 : -1,
-        type: "button",
-        role: "menuitem",
-        variant: "ghost",
-        color: "default",
-        "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.BanIcon, {})
-      }
-    ) })
-  ] });
-}
-function ColorHighlightPopover({
-  editor: providedEditor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ]),
-  hideWhenUnavailable = false,
-  onApplied,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
-  const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
-    editor,
-    hideWhenUnavailable,
-    onApplied
-  });
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_popover.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_popover.Popover.Trigger,
-      {
-        render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          ColorHighlightPopoverButton,
-          {
-            disabled: !canColorHighlight2,
-            "data-disabled": !canColorHighlight2,
-            "data-active-state": isActive ? "on" : "off",
-            "aria-pressed": isActive,
-            "aria-label": label,
-            title: label,
-            ...props
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_popover.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ColorHighlightPopover,
-  ColorHighlightPopoverButton,
-  ColorHighlightPopoverContent
-});

package/dist/ui/color-highlight-popover/color-highlight-popover.mjs

@@ -1,17 +0,0 @@
-"use client";
-"use client";
-import {
-  ColorHighlightPopover,
-  ColorHighlightPopoverButton,
-  ColorHighlightPopoverContent
-} from "../../chunk-C5RQWJKE.mjs";
-import "../../chunk-2Z2QVW67.mjs";
-import "../../chunk-B7WJOQ3X.mjs";
-import "../../chunk-UJ4BNZ63.mjs";
-import "../../chunk-P55PLOHR.mjs";
-import "../../chunk-42HKGCOO.mjs";
-export {
-  ColorHighlightPopover,
-  ColorHighlightPopoverButton,
-  ColorHighlightPopoverContent
-};

package/dist/ui/color-highlight-popover/index.d.mts

@@ -1,6 +0,0 @@
-export { ColorHighlightPopover, ColorHighlightPopoverButton, ColorHighlightPopoverContent, ColorHighlightPopoverContentProps, ColorHighlightPopoverProps } from './color-highlight-popover.mjs';
-import 'react/jsx-runtime';
-import '@kopexa/button';
-import '@tiptap/react';
-import '../color-highlight-button/use-color-highlight.mjs';
-import '@kopexa/icons';

package/dist/ui/color-highlight-popover/index.d.ts

@@ -1,6 +0,0 @@
-export { ColorHighlightPopover, ColorHighlightPopoverButton, ColorHighlightPopoverContent, ColorHighlightPopoverContentProps, ColorHighlightPopoverProps } from './color-highlight-popover.js';
-import 'react/jsx-runtime';
-import '@kopexa/button';
-import '@tiptap/react';
-import '../color-highlight-button/use-color-highlight.js';
-import '@kopexa/icons';