@kopexa/tiptap 17.6.17 → 17.7.0

package/dist/chunk-7FDDRVUE.mjs

@@ -1,143 +0,0 @@
-"use client";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/reset-all-formatting-button/use-reset-all-formatting.ts
-import { RotateCcwIcon } from "@kopexa/icons";
-import { useIsMobile } from "@kopexa/use-is-mobile";
-import * as React from "react";
-import { useHotkeys } from "react-hotkeys-hook";
-var RESET_ALL_FORMATTING_SHORTCUT_KEY = "mod+r";
-function removeAllMarksExcept(tr, skip = []) {
-  const { selection } = tr;
-  const { empty, ranges } = selection;
-  if (empty) return tr;
-  ranges.forEach((range) => {
-    const from = range.$from.pos;
-    const to = range.$to.pos;
-    tr.doc.nodesBetween(from, to, (node, pos) => {
-      if (!node.isInline) return true;
-      node.marks.forEach((mark) => {
-        if (!skip.includes(mark.type.name)) {
-          tr.removeMark(pos, pos + node.nodeSize, mark.type);
-        }
-      });
-      return true;
-    });
-  });
-  return tr;
-}
-function canResetMarks(tr, skip = []) {
-  const { selection } = tr;
-  const { empty, ranges } = selection;
-  if (empty) return false;
-  for (const range of ranges) {
-    const from = range.$from.pos;
-    const to = range.$to.pos;
-    let hasRemovableMarks = false;
-    tr.doc.nodesBetween(from, to, (node) => {
-      if (!node.isInline) return true;
-      for (const mark of node.marks) {
-        if (!skip.includes(mark.type.name)) {
-          hasRemovableMarks = true;
-          return false;
-        }
-      }
-      return true;
-    });
-    if (hasRemovableMarks) {
-      return true;
-    }
-  }
-  return false;
-}
-function canResetFormatting(editor, preserveMarks) {
-  if (!editor || !editor.isEditable) return false;
-  const tr = editor.state.tr;
-  return canResetMarks(tr, preserveMarks);
-}
-function resetFormatting(editor, preserveMarks) {
-  if (!editor || !editor.isEditable) return false;
-  try {
-    const { view, state } = editor;
-    const { tr } = state;
-    const transaction = removeAllMarksExcept(tr, preserveMarks);
-    view.dispatch(transaction);
-    editor.commands.focus();
-    return true;
-  } catch {
-    return false;
-  }
-}
-function shouldShowButton(props) {
-  const { editor, hideWhenUnavailable, preserveMarks } = props;
-  if (!editor || !editor.isEditable) return false;
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canResetFormatting(editor, preserveMarks);
-  }
-  return true;
-}
-function useResetAllFormatting(config) {
-  const {
-    editor: providedEditor,
-    preserveMarks,
-    hideWhenUnavailable = false,
-    onResetAllFormatting
-  } = config || {};
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = useIsMobile();
-  const [isVisible, setIsVisible] = React.useState(true);
-  const canReset = canResetFormatting(editor, preserveMarks);
-  React.useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setIsVisible(
-        shouldShowButton({ editor, hideWhenUnavailable, preserveMarks })
-      );
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable, preserveMarks]);
-  const handleResetFormatting = React.useCallback(() => {
-    if (!editor) return false;
-    const success = resetFormatting(editor, preserveMarks);
-    if (success) {
-      onResetAllFormatting == null ? void 0 : onResetAllFormatting();
-    }
-    return success;
-  }, [editor, onResetAllFormatting, preserveMarks]);
-  useHotkeys(
-    RESET_ALL_FORMATTING_SHORTCUT_KEY,
-    (event) => {
-      event.preventDefault();
-      handleResetFormatting();
-    },
-    {
-      enabled: isVisible && canReset,
-      enableOnContentEditable: !isMobile,
-      enableOnFormTags: true
-    }
-  );
-  return {
-    isVisible,
-    handleResetFormatting,
-    canReset,
-    label: "Reset formatting",
-    shortcutKeys: RESET_ALL_FORMATTING_SHORTCUT_KEY,
-    Icon: RotateCcwIcon
-  };
-}
-
-export {
-  RESET_ALL_FORMATTING_SHORTCUT_KEY,
-  removeAllMarksExcept,
-  canResetMarks,
-  canResetFormatting,
-  resetFormatting,
-  shouldShowButton,
-  useResetAllFormatting
-};

package/dist/chunk-7VGROP26.mjs

@@ -1,262 +0,0 @@
-"use client";
-import {
-  useLinkPopover
-} from "./chunk-VTKJPVNM.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/link-popover/link-popover.tsx
-import { IconButton } from "@kopexa/button";
-import {
-  CheckIcon,
-  EditIcon,
-  ExternalLinkIcon,
-  LinkIcon,
-  TrashIcon
-} from "@kopexa/icons";
-import { Input } from "@kopexa/input";
-import { Popover } from "@kopexa/popover";
-import { ToolbarButton } from "@kopexa/toolbar";
-import { useCallback, useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      type: "button",
-      className,
-      variant: "ghost",
-      color: "default",
-      tabIndex: -1,
-      "aria-label": "Link",
-      title: "Link",
-      isIconOnly: !children,
-      ...props,
-      children: children || /* @__PURE__ */ jsx(LinkIcon, {})
-    }
-  );
-};
-var LinkMain = ({
-  url,
-  setUrl,
-  setLink,
-  removeLink,
-  openLink,
-  isActive,
-  onSave
-}) => {
-  const [isEditing, setIsEditing] = useState(!isActive || !url);
-  useEffect(() => {
-    setIsEditing(!isActive || !url);
-  }, [isActive, url]);
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      setLink();
-      setIsEditing(false);
-      onSave == null ? void 0 : onSave();
-    } else if (event.key === "Escape") {
-      event.preventDefault();
-      setIsEditing(false);
-    }
-  };
-  const handleSave = () => {
-    setLink();
-    setIsEditing(false);
-    onSave == null ? void 0 : onSave();
-  };
-  const handleEdit = () => {
-    setIsEditing(true);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "url",
-          placeholder: "Enter URL...",
-          value: url,
-          onChange: (e) => setUrl(e.target.value),
-          onKeyDown: handleKeyDown,
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoCapitalize: "off",
-          className: "flex-1 h-8 text-sm",
-          autoFocus: true
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleSave,
-          "aria-label": "Save link",
-          disabled: !url,
-          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-        onClick: (e) => {
-          e.preventDefault();
-          openLink();
-        },
-        children: url
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: openLink,
-          "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: handleEdit,
-          "aria-label": "Edit link",
-          children: /* @__PURE__ */ jsx(EditIcon, { className: "size-4" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          onClick: removeLink,
-          "aria-label": "Remove link",
-          children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
-        }
-      )
-    ] })
-  ] });
-};
-var LinkContent = ({ editor }) => {
-  const linkPopover = useLinkPopover({
-    editor
-  });
-  return /* @__PURE__ */ jsx(LinkMain, { ...linkPopover });
-};
-function LinkPopover({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  onSetLink,
-  onOpenChange,
-  autoOpenOnLinkActive = true,
-  onClick,
-  children,
-  ...buttonProps
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = useState(false);
-  const {
-    isVisible,
-    canSet,
-    isActive,
-    url,
-    setUrl,
-    setLink,
-    removeLink,
-    openLink,
-    label
-  } = useLinkPopover({
-    editor,
-    hideWhenUnavailable,
-    onSetLink
-  });
-  const handleOnOpenChange = useCallback(
-    (nextIsOpen) => {
-      setIsOpen(nextIsOpen);
-      onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
-    },
-    [onOpenChange]
-  );
-  const handleSetLink = useCallback(() => {
-    setLink();
-    setIsOpen(false);
-  }, [setLink]);
-  const handleClick = useCallback(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      setIsOpen(!isOpen);
-    },
-    [onClick, isOpen]
-  );
-  useEffect(() => {
-    if (autoOpenOnLinkActive && isActive) {
-      setIsOpen(true);
-    }
-  }, [autoOpenOnLinkActive, isActive]);
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Popover.Root,
-    {
-      open: isOpen,
-      onOpenChange: handleOnOpenChange,
-      spacing: "dense",
-      children: [
-        /* @__PURE__ */ jsx(
-          Popover.Trigger,
-          {
-            render: /* @__PURE__ */ jsx(
-              LinkButton,
-              {
-                "data-disabled": !canSet,
-                disabled: !canSet,
-                "data-active-state": isActive ? "on" : "off",
-                "aria-label": label,
-                "aria-pressed": isActive,
-                onClick: handleClick,
-                ...buttonProps
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(
-          LinkMain,
-          {
-            url,
-            setUrl,
-            setLink: handleSetLink,
-            removeLink,
-            openLink,
-            isActive,
-            onSave: () => setIsOpen(false)
-          }
-        ) })
-      ]
-    }
-  );
-}
-LinkButton.displayName = "LinkButton";
-
-export {
-  LinkButton,
-  LinkMain,
-  LinkContent,
-  LinkPopover
-};

package/dist/chunk-7VW67NVL.mjs

@@ -1,80 +0,0 @@
-"use client";
-import {
-  InlineMathView
-} from "./chunk-BXHPO3T7.mjs";
-
-// src/extensions/math/inline-math.ts
-import { InputRule, mergeAttributes, Node } from "@tiptap/core";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-var InlineMath = Node.create({
-  name: "inlineMath",
-  group: "inline",
-  inline: true,
-  atom: true,
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
-  },
-  addAttributes() {
-    return {
-      latex: {
-        default: "",
-        parseHTML: (element) => element.getAttribute("data-latex") || "",
-        renderHTML: (attributes) => ({
-          "data-latex": attributes.latex
-        })
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: 'span[data-type="inline-math"]'
-      }
-    ];
-  },
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "span",
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
-        "data-type": "inline-math"
-      })
-    ];
-  },
-  addNodeView() {
-    return ReactNodeViewRenderer(InlineMathView, {
-      as: "span"
-    });
-  },
-  addCommands() {
-    return {
-      insertInlineMath: (latex = "") => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: { latex }
-        });
-      }
-    };
-  },
-  addInputRules() {
-    return [
-      // Inline math with $...$
-      new InputRule({
-        // Match $...$ but not $$...$$
-        find: /(?<!\$)\$([^$]+)\$(?!\$)/,
-        handler: ({ state, range, match }) => {
-          const latex = match[1];
-          const { tr } = state;
-          tr.replaceWith(range.from, range.to, this.type.create({ latex }));
-        }
-      })
-    ];
-  }
-});
-var inline_math_default = InlineMath;
-
-export {
-  InlineMath,
-  inline_math_default
-};

package/dist/chunk-AAV7ZNBP.mjs

@@ -1,83 +0,0 @@
-"use client";
-import {
-  RESET_ALL_FORMATTING_SHORTCUT_KEY,
-  useResetAllFormatting
-} from "./chunk-7FDDRVUE.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/reset-all-formatting-button/reset-all-formatting-button.tsx
-import { Button } from "@kopexa/button";
-import { Chip } from "@kopexa/chip";
-import { parseShortcutKeys } from "@kopexa/shared-utils";
-import { useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-function ResetAllFormattingShortcutBadge({
-  shortcutKeys = RESET_ALL_FORMATTING_SHORTCUT_KEY
-}) {
-  return /* @__PURE__ */ jsx(Chip, { children: parseShortcutKeys({ shortcutKeys }) });
-}
-var ResetAllFormattingButton = ({
-  editor: providedEditor,
-  text,
-  hideWhenUnavailable = false,
-  preserveMarks = ["inlineThread"],
-  onResetAllFormatting,
-  showShortcut = false,
-  onClick,
-  children,
-  ref,
-  ...buttonProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isVisible,
-    canReset,
-    handleResetFormatting,
-    label,
-    shortcutKeys,
-    Icon
-  } = useResetAllFormatting({
-    editor,
-    preserveMarks,
-    hideWhenUnavailable,
-    onResetAllFormatting
-  });
-  const handleClick = useCallback(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleResetFormatting();
-    },
-    [handleResetFormatting, onClick]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      type: "button",
-      variant: "ghost",
-      color: "default",
-      disabled: !canReset,
-      "data-disabled": !canReset,
-      "data-active-state": "off",
-      tabIndex: -1,
-      "aria-label": label,
-      tooltip: "Reset formatting",
-      onClick: handleClick,
-      startContent: /* @__PURE__ */ jsx(Icon, {}),
-      endContent: showShortcut ? /* @__PURE__ */ jsx(ResetAllFormattingShortcutBadge, { shortcutKeys }) : null,
-      ...buttonProps,
-      ref,
-      children: text
-    }
-  );
-};
-
-export {
-  ResetAllFormattingShortcutBadge,
-  ResetAllFormattingButton
-};

package/dist/chunk-ATRHILCH.mjs

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

package/dist/chunk-B7WJOQ3X.mjs

@@ -1,103 +0,0 @@
-"use client";
-import {
-  useColorHighlight
-} from "./chunk-UJ4BNZ63.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/color-highlight-button/color-highlight-button.tsx
-import { colorHighlightButton } from "@kopexa/theme";
-import { ToolbarButton } from "@kopexa/toolbar";
-import { useCallback, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "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,
-    isActive,
-    handleColorHighlight,
-    label,
-    shortcutKeys
-  } = useColorHighlight({
-    editor,
-    highlightColor,
-    label: text || `Toggle highlight (${highlightColor})`,
-    hideWhenUnavailable,
-    onApplied
-  });
-  const handleClick = useCallback(
-    (event) => {
-      onClick == null ? void 0 : onClick(event);
-      if (event.defaultPrevented) return;
-      handleColorHighlight();
-    },
-    [handleColorHighlight, onClick]
-  );
-  const buttonStyle = useMemo(
-    () => ({
-      ...style,
-      "--highlight-color": highlightColor
-    }),
-    [highlightColor, style]
-  );
-  if (!isVisible) {
-    return null;
-  }
-  const styles = colorHighlightButton();
-  return /* @__PURE__ */ jsxs(
-    ToolbarButton,
-    {
-      type: "button",
-      disabled: !canColorHighlight,
-      "data-disabled": !canColorHighlight,
-      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__ */ jsx(
-          "span",
-          {
-            "data-active-state": isActive ? "on" : "off",
-            className: styles.mark()
-          }
-        ),
-        children || /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: { "--highlight-color": highlightColor }
-            }
-          ),
-          text
-        ] })
-      ]
-    }
-  );
-};
-
-export {
-  ColorHighlightButton
-};