@kopexa/tiptap 17.6.18 → 17.7.0

package/dist/chunk-Q5FK7SFY.mjs

@@ -1,75 +0,0 @@
-"use client";
-
-// src/extensions/variable/messages.ts
-import { defineMessages } from "react-intl";
-var messages = defineMessages({
-  title: {
-    id: "editor.variable.title",
-    defaultMessage: "Variables",
-    description: "Title for the variables section"
-  },
-  insert: {
-    id: "editor.variable.insert",
-    defaultMessage: "Insert variable",
-    description: "Insert variable button label"
-  },
-  empty_state: {
-    id: "editor.variable.empty_state",
-    defaultMessage: "No variables available",
-    description: "Empty state when no variables are defined"
-  },
-  hint: {
-    id: "editor.variable.hint",
-    defaultMessage: "Type {{ to insert a variable",
-    description: "Hint for inserting variables"
-  },
-  save: {
-    id: "editor.variable.save",
-    defaultMessage: "Save",
-    description: "Save button label"
-  },
-  cancel: {
-    id: "editor.variable.cancel",
-    defaultMessage: "Cancel",
-    description: "Cancel button label"
-  },
-  category_company: {
-    id: "editor.variable.category.company",
-    defaultMessage: "Company",
-    description: "Company variables category"
-  },
-  category_user: {
-    id: "editor.variable.category.user",
-    defaultMessage: "User",
-    description: "User variables category"
-  },
-  category_date: {
-    id: "editor.variable.category.date",
-    defaultMessage: "Date",
-    description: "Date variables category"
-  },
-  category_document: {
-    id: "editor.variable.category.document",
-    defaultMessage: "Document",
-    description: "Document variables category"
-  },
-  category_other: {
-    id: "editor.variable.category.other",
-    defaultMessage: "Other",
-    description: "Other variables category"
-  },
-  filler_title: {
-    id: "editor.variable.filler.title",
-    defaultMessage: "Fill in Variables",
-    description: "Title for the variable filler dialog"
-  },
-  filler_filled: {
-    id: "editor.variable.filler.filled",
-    defaultMessage: "filled",
-    description: "Label for filled count"
-  }
-});
-
-export {
-  messages
-};

package/dist/chunk-Q7DFJ5NI.mjs

@@ -1,153 +0,0 @@
-"use client";
-import {
-  ListButton,
-  canToggleList,
-  isListActive,
-  listOptions
-} from "./chunk-IOB3REX6.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-
-// src/ui/list-dropdown-menu/index.tsx
-import { Button } from "@kopexa/button";
-import { DropdownMenu } from "@kopexa/dropdown-menu";
-import { isNodeInSchema } from "@kopexa/editor-utils";
-import { ChevronDownIcon, ListIcon } from "@kopexa/icons";
-import { isNodeSelection } from "@tiptap/react";
-import { useCallback, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function canToggleAnyList(editor, listTypes) {
-  if (!editor) return false;
-  return listTypes.some((type) => canToggleList(editor, type));
-}
-function isAnyListActive(editor, listTypes) {
-  if (!editor) return false;
-  return listTypes.some((type) => isListActive(editor, type));
-}
-function getFilteredListOptions(availableTypes) {
-  return listOptions.filter(
-    (option) => !option.type || availableTypes.includes(option.type)
-  );
-}
-function shouldShowListDropdown(params) {
-  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
-  if (!listInSchema || !editor) {
-    return false;
-  }
-  if (hideWhenUnavailable) {
-    if (isNodeSelection(editor.state.selection) || !canToggleAny) {
-      return false;
-    }
-  }
-  return true;
-}
-function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = useState(false);
-  const listInSchema = availableTypes.some(
-    (type) => isNodeInSchema(type, editor)
-  );
-  const filteredLists = useMemo(
-    () => getFilteredListOptions(availableTypes),
-    [availableTypes]
-  );
-  const canToggleAny = canToggleAnyList(editor, availableTypes);
-  const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = useCallback(
-    (open, callback) => {
-      setIsOpen(open);
-      callback == null ? void 0 : callback(open);
-    },
-    []
-  );
-  return {
-    isOpen,
-    setIsOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  };
-}
-function useActiveListIcon(editor, filteredLists) {
-  return useCallback(() => {
-    const activeOption = filteredLists.find(
-      (option) => isListActive(editor, option.type)
-    );
-    return activeOption ? /* @__PURE__ */ jsx(activeOption.icon, {}) : /* @__PURE__ */ jsx(ListIcon, {});
-  }, [editor, filteredLists]);
-}
-function ListDropdownMenu({
-  editor: providedEditor,
-  types = ["bulletList", "orderedList", "taskList"],
-  hideWhenUnavailable = false,
-  onOpenChange,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const {
-    isOpen,
-    listInSchema,
-    filteredLists,
-    canToggleAny,
-    isAnyActive,
-    handleOpenChange
-  } = useListDropdownState(editor, types);
-  const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = useMemo(() => {
-    return shouldShowListDropdown({
-      editor,
-      listTypes: types,
-      hideWhenUnavailable,
-      listInSchema,
-      canToggleAny
-    });
-  }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = useCallback(
-    (open) => handleOpenChange(open, onOpenChange),
-    [handleOpenChange, onOpenChange]
-  );
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: "ghost",
-        color: "default",
-        "data-active-state": isAnyActive ? "on" : "off",
-        tabIndex: -1,
-        "aria-label": "List options",
-        tooltip: "List",
-        endContent: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
-        ...props,
-        children: getActiveIcon()
-      }
-    ) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Content, { children: /* @__PURE__ */ jsx(DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ jsx(DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ jsx(
-      ListButton,
-      {
-        editor,
-        type: option.type,
-        text: option.label,
-        hideWhenUnavailable,
-        tooltip: "",
-        fullWidth: true,
-        spacing: "start"
-      }
-    ) }, option.type)) }) })
-  ] });
-}
-
-export {
-  canToggleAnyList,
-  isAnyListActive,
-  getFilteredListOptions,
-  shouldShowListDropdown,
-  useListDropdownState,
-  useActiveListIcon,
-  ListDropdownMenu
-};

package/dist/chunk-QIELBKP3.mjs

@@ -1,104 +0,0 @@
-"use client";
-import {
-  messages
-} from "./chunk-Q5FK7SFY.mjs";
-
-// src/extensions/variable/variable-filler-dialog.tsx
-import { Button } from "@kopexa/button";
-import { Dialog } from "@kopexa/dialog";
-import { Input } from "@kopexa/input";
-import { Label } from "@kopexa/label";
-import * as React from "react";
-import { useIntl } from "react-intl";
-import { jsx, jsxs } from "react/jsx-runtime";
-function VariableFillerDialog({
-  open,
-  onOpenChange,
-  variables,
-  values,
-  onSave,
-  title,
-  description
-}) {
-  const intl = useIntl();
-  const [localValues, setLocalValues] = React.useState(
-    {}
-  );
-  React.useEffect(() => {
-    if (open) {
-      setLocalValues({ ...values });
-    }
-  }, [open, values]);
-  const handleChange = React.useCallback((name, value) => {
-    setLocalValues((prev) => ({
-      ...prev,
-      [name]: value
-    }));
-  }, []);
-  const handleSave = React.useCallback(() => {
-    onSave(localValues);
-    onOpenChange(false);
-  }, [localValues, onSave, onOpenChange]);
-  const handleCancel = React.useCallback(() => {
-    setLocalValues({ ...values });
-    onOpenChange(false);
-  }, [values, onOpenChange]);
-  const groupedVariables = React.useMemo(() => {
-    return variables.reduce(
-      (acc, v) => {
-        const cat = v.category || intl.formatMessage(messages.category_other);
-        if (!acc[cat]) acc[cat] = [];
-        acc[cat].push(v);
-        return acc;
-      },
-      {}
-    );
-  }, [variables, intl]);
-  const filledCount = React.useMemo(() => {
-    return variables.filter((v) => {
-      var _a;
-      return (_a = localValues[v.name]) == null ? void 0 : _a.trim();
-    }).length;
-  }, [variables, localValues]);
-  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, size: "md", children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
-    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
-      /* @__PURE__ */ jsx(Dialog.Title, { children: title || intl.formatMessage(messages.filler_title) }),
-      description && /* @__PURE__ */ jsx(Dialog.Description, { children: description })
-    ] }),
-    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: Object.entries(groupedVariables).map(([category, vars]) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3", children: category }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: vars.map((v) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxs(Label, { htmlFor: `var-${v.name}`, className: "text-sm", children: [
-          v.label,
-          v.description && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground font-normal", children: v.description })
-        ] }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: `var-${v.name}`,
-            placeholder: v.fallback || `{{${v.name}}}`,
-            value: localValues[v.name] || "",
-            onChange: (e) => handleChange(v.name, e.target.value)
-          }
-        )
-      ] }, v.name)) })
-    ] }, category)) }) }),
-    /* @__PURE__ */ jsxs(Dialog.Footer, { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        filledCount,
-        " / ",
-        variables.length,
-        " ",
-        intl.formatMessage(messages.filler_filled)
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages.cancel) }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleSave, children: intl.formatMessage(messages.save) })
-      ] })
-    ] })
-  ] }) });
-}
-
-export {
-  VariableFillerDialog
-};

package/dist/chunk-R2GM4A3T.mjs

@@ -1,71 +0,0 @@
-"use client";
-import {
-  useWindowSize
-} from "./chunk-DT7ML2P4.mjs";
-
-// src/hooks/use-cursor-visibility.ts
-import * as React from "react";
-function useCursorVisibility({
-  editor,
-  overlayHeight = 0,
-  elementRef = null
-}) {
-  const { height: windowHeight } = useWindowSize();
-  const [rect, setRect] = React.useState({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const updateRect = React.useCallback(() => {
-    var _a;
-    const element = (_a = elementRef == null ? void 0 : elementRef.current) != null ? _a : document.body;
-    const { x, y, width, height } = element.getBoundingClientRect();
-    setRect({ x, y, width, height });
-  }, [elementRef]);
-  React.useEffect(() => {
-    var _a;
-    const element = (_a = elementRef == null ? void 0 : elementRef.current) != null ? _a : document.body;
-    updateRect();
-    const resizeObserver = new ResizeObserver(() => {
-      window.requestAnimationFrame(updateRect);
-    });
-    resizeObserver.observe(element);
-    window.addEventListener("scroll", updateRect, { passive: true });
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updateRect);
-    };
-  }, [elementRef, updateRect]);
-  React.useEffect(() => {
-    const ensureCursorVisibility = () => {
-      if (!editor) return;
-      const { state, view } = editor;
-      if (!view.hasFocus()) return;
-      const { from } = state.selection;
-      const cursorCoords = view.coordsAtPos(from);
-      if (windowHeight < rect.height) {
-        if (cursorCoords) {
-          const availableSpace = windowHeight - cursorCoords.top - overlayHeight > 0;
-          if (!availableSpace) {
-            const targetScrollY = (
-              // TODO: Needed?
-              //   window.scrollY + (cursorCoords.top - windowHeight / 2)
-              cursorCoords.top - windowHeight / 2
-            );
-            window.scrollTo({
-              top: targetScrollY,
-              behavior: "smooth"
-            });
-          }
-        }
-      }
-    };
-    ensureCursorVisibility();
-  }, [editor, overlayHeight, windowHeight, rect.height]);
-  return rect;
-}
-
-export {
-  useCursorVisibility
-};

package/dist/chunk-REJEJXOZ.mjs

@@ -1,10 +0,0 @@
-"use client";
-
-// src/context/editor-context.ts
-import { createContext } from "@kopexa/react-utils";
-var [EditorUIProvider, useEditorUIContext] = createContext();
-
-export {
-  EditorUIProvider,
-  useEditorUIContext
-};

package/dist/chunk-RFWNKE7D.mjs

@@ -1,238 +0,0 @@
-"use client";
-import {
-  TextAlignButton
-} from "./chunk-GYIYX2JH.mjs";
-import {
-  canSetTextAlign
-} from "./chunk-IQERE7KP.mjs";
-import {
-  UndoRedoButton
-} from "./chunk-2SI7MRAE.mjs";
-import {
-  TableButton
-} from "./chunk-VX3HSJ76.mjs";
-import {
-  ListDropdownMenu
-} from "./chunk-Q7DFJ5NI.mjs";
-import {
-  HeadingDropdownMenu
-} from "./chunk-V6TAZMQN.mjs";
-import {
-  MarkButton,
-  canToggleMark
-} from "./chunk-LNVWG34E.mjs";
-import {
-  LinkPopover
-} from "./chunk-7VGROP26.mjs";
-import {
-  CodeBlockButton
-} from "./chunk-OEVR5N7X.mjs";
-import {
-  ColorHighlightPopover
-} from "./chunk-C5RQWJKE.mjs";
-import {
-  BlockquoteButton
-} from "./chunk-W2FLOOJ6.mjs";
-import {
-  useTiptapEditor
-} from "./chunk-P55PLOHR.mjs";
-import {
-  useEditorUIContext
-} from "./chunk-REJEJXOZ.mjs";
-import {
-  useCursorVisibility
-} from "./chunk-R2GM4A3T.mjs";
-import {
-  useWindowSize
-} from "./chunk-DT7ML2P4.mjs";
-
-// src/presets/basic/editor-header.tsx
-import { MoreVerticalIcon } from "@kopexa/icons";
-import { Popover } from "@kopexa/popover";
-import {
-  Toolbar,
-  ToolbarButton,
-  ToolbarGroup,
-  ToolbarSeparator
-} from "@kopexa/toolbar";
-import { useIsMobile } from "@kopexa/use-is-mobile";
-import { useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var EditorHeader = ({
-  editor: providedEditor,
-  variant
-}) => {
-  var _a, _b;
-  const { editor } = useTiptapEditor(providedEditor);
-  const isMobile = useIsMobile();
-  const windowSize = useWindowSize();
-  const { styles } = useEditorUIContext();
-  const toolbarRef = useRef(null);
-  const bodyRect = useCursorVisibility({
-    editor,
-    overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
-  });
-  if (!(editor == null ? void 0 : editor.isEditable)) {
-    return null;
-  }
-  const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ jsx("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ jsx(
-    Toolbar,
-    {
-      sticky: true,
-      radius: "none",
-      border: "none",
-      style: isMobile ? {
-        bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
-      } : {},
-      className: styles.toolbar(),
-      children: /* @__PURE__ */ jsx(ToolbarContent, {})
-    }
-  ) });
-};
-var MainToolbarContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-    /* @__PURE__ */ jsx(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ jsx(UndoRedoButton, { action: "redo" })
-  ] }),
-  /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-  /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-    /* @__PURE__ */ jsx(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ jsx(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ jsx(BlockquoteButton, {}),
-    /* @__PURE__ */ jsx(CodeBlockButton, {})
-  ] }),
-  /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-  /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-    /* @__PURE__ */ jsx(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "code" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ jsx(ColorHighlightPopover, {}),
-    /* @__PURE__ */ jsx(LinkPopover, {})
-  ] }),
-  /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-  /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(TableButton, {}) }),
-  /* @__PURE__ */ jsx(MoreOptions, { hideWhenUnavailable: true })
-] });
-var CommentToolbarContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-    /* @__PURE__ */ jsx(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ jsx(MarkButton, { type: "code" })
-  ] }),
-  /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-  /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-    /* @__PURE__ */ jsx(LinkPopover, {}),
-    /* @__PURE__ */ jsx(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
-  ] })
-] });
-var FieldToolbarContent = () => /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-  /* @__PURE__ */ jsx(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ jsx(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ jsx(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ jsx(LinkPopover, {})
-] });
-function MoreOptions({
-  editor: providedEditor,
-  hideWhenUnavailable = false,
-  ...props
-}) {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = useState(false);
-  useEffect(() => {
-    if (!editor) return;
-    const handleSelectionUpdate = () => {
-      setShow(
-        shouldShowMoreOptions({
-          editor,
-          hideWhenUnavailable
-        })
-      );
-    };
-    handleSelectionUpdate();
-    editor.on("selectionUpdate", handleSelectionUpdate);
-    return () => {
-      editor.off("selectionUpdate", handleSelectionUpdate);
-    };
-  }, [editor, hideWhenUnavailable]);
-  if (!show || !editor || !editor.isEditable) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-    /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsxs(Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ jsx(
-        Popover.Trigger,
-        {
-          render: /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              type: "button",
-              variant: "ghost",
-              color: "default",
-              tabIndex: -1,
-              size: "md",
-              "aria-label": "More options",
-              title: "More options",
-              isIconOnly: true,
-              ...props,
-              children: /* @__PURE__ */ jsx(MoreVerticalIcon, {})
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Popover.Content,
-        {
-          side: "top",
-          align: "end",
-          alignOffset: 4,
-          sideOffset: 4,
-          children: /* @__PURE__ */ jsxs(Toolbar, { children: [
-            /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-              /* @__PURE__ */ jsx(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ jsx(MarkButton, { type: "subscript" })
-            ] }),
-            /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-            /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-              /* @__PURE__ */ jsx(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ jsx(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ jsx(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ jsx(TextAlignButton, { align: "justify" })
-            ] })
-          ] })
-        }
-      )
-    ] }) })
-  ] });
-}
-function canMoreOptions(editor) {
-  if (!editor) {
-    return false;
-  }
-  const canTextAlignAny = ["left", "center", "right", "justify"].some(
-    (align) => canSetTextAlign(editor, align)
-  );
-  const canMarkAny = ["superscript", "subscript"].some(
-    (type) => canToggleMark(editor, type)
-  );
-  return canMarkAny || canTextAlignAny;
-}
-function shouldShowMoreOptions(params) {
-  const { editor, hideWhenUnavailable } = params;
-  if (!editor) {
-    return false;
-  }
-  if (hideWhenUnavailable && !editor.isActive("code")) {
-    return canMoreOptions(editor);
-  }
-  return Boolean(editor == null ? void 0 : editor.isEditable);
-}
-
-export {
-  EditorHeader,
-  MoreOptions
-};