@cgboiler/biz-basic 1.0.53 → 1.0.55

package/es/rich-text-editor/menu-system/hooks/use-blockquote.js

@@ -0,0 +1,140 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition
+} from "../utils/tiptap-utils";
+import { BlockquoteIcon } from "../icons";
+const BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
+function canToggleBlockquote(editor, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isNodeInSchema("blockquote", editor) || isNodeTypeSelected(editor, ["image"]))
+    return false;
+  if (!turnInto) {
+    return editor.can().toggleWrap("blockquote");
+  }
+  try {
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof TextSelection) {
+      const pos = (_a = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition(pos))
+        return false;
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function toggleBlockquote(editor) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canToggleBlockquote(editor))
+    return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = (_a = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition(pos))
+        return false;
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof NodeSelection) {
+      chain = chain.clearNodes();
+    }
+    const toggle = editor.isActive("blockquote") ? chain.lift("blockquote") : chain.wrapIn("blockquote");
+    toggle.run();
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function shouldShowButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isNodeInSchema("blockquote", editor))
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleBlockquote(editor);
+  }
+  return true;
+}
+function useBlockquote(config) {
+  const { hideWhenUnavailable = false, onToggled } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canToggle = ref(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggle.value = false;
+      return;
+    }
+    isActive.value = editor.isActive("blockquote");
+    canToggle.value = canToggleBlockquote(editor);
+    isVisible.value = shouldShowButton({ editor, hideWhenUnavailable });
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      onBeforeUnmount(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleToggle = () => {
+    const editor = getEditor();
+    if (toggleBlockquote(editor)) {
+      onToggled == null ? void 0 : onToggled();
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: "Blockquote",
+    shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
+    Icon: BlockquoteIcon
+  };
+}
+export {
+  BLOCKQUOTE_SHORTCUT_KEY,
+  canToggleBlockquote,
+  shouldShowButton,
+  toggleBlockquote,
+  useBlockquote
+};

package/es/rich-text-editor/menu-system/hooks/use-code-block.d.ts

@@ -0,0 +1,34 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
+export interface UseCodeBlockConfig {
+    editor: any;
+    hideWhenUnavailable?: boolean;
+    onToggled?: () => void;
+}
+export declare function canToggle(editor: Editor | null, turnInto?: boolean): boolean;
+export declare function toggleCodeBlock(editor: Editor | null): boolean;
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+export declare function useCodeBlock(config: UseCodeBlockConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleToggle: () => void;
+    canToggle: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        className: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/es/rich-text-editor/menu-system/hooks/use-code-block.js

@@ -0,0 +1,140 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition
+} from "../utils/tiptap-utils";
+import { CodeBlockIcon } from "../icons";
+const CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
+function canToggle(editor, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isNodeInSchema("codeBlock", editor) || isNodeTypeSelected(editor, ["image"]))
+    return false;
+  if (!turnInto) {
+    return editor.can().toggleNode("codeBlock", "paragraph");
+  }
+  try {
+    const view = editor.view;
+    const state = view.state;
+    const selection = state.selection;
+    if (selection.empty || selection instanceof TextSelection) {
+      const pos = (_a = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition(pos))
+        return false;
+    }
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function toggleCodeBlock(editor) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canToggle(editor))
+    return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = (_a = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })) == null ? void 0 : _a.pos;
+      if (!isValidPosition(pos))
+        return false;
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof NodeSelection) {
+      chain = chain.clearNodes();
+    }
+    const toggle = editor.isActive("codeBlock") ? chain.setNode("paragraph") : chain.toggleNode("codeBlock", "paragraph");
+    toggle.run();
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function shouldShowButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isNodeInSchema("codeBlock", editor))
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggle(editor);
+  }
+  return true;
+}
+function useCodeBlock(config) {
+  const { hideWhenUnavailable = false, onToggled } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canToggleState = ref(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggleState.value = false;
+      return;
+    }
+    isActive.value = editor.isActive("codeBlock");
+    canToggleState.value = canToggle(editor);
+    isVisible.value = shouldShowButton({ editor, hideWhenUnavailable });
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      onBeforeUnmount(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleToggle = () => {
+    const editor = getEditor();
+    if (toggleCodeBlock(editor)) {
+      onToggled == null ? void 0 : onToggled();
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: "Code Block",
+    shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
+    Icon: CodeBlockIcon
+  };
+}
+export {
+  CODE_BLOCK_SHORTCUT_KEY,
+  canToggle,
+  shouldShowButton,
+  toggleCodeBlock,
+  useCodeBlock
+};

package/es/rich-text-editor/menu-system/hooks/use-color-highlight.d.ts

@@ -0,0 +1,46 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
+export declare const HIGHLIGHT_COLORS: {
+    label: string;
+    value: string;
+    border: string;
+}[];
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number];
+export declare function canColorHighlight(editor: Editor | null): boolean;
+export declare function isColorHighlightActive(editor: Editor | null, highlightColor?: string): boolean;
+export declare function removeHighlight(editor: Editor | null): boolean;
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+export declare function useColorHighlight(config: {
+    editor: any;
+    label?: string;
+    highlightColor?: string;
+    hideWhenUnavailable?: boolean;
+    onApplied?: (params: {
+        color: string;
+        label: string;
+    }) => void;
+}): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleColorHighlight: () => void;
+    handleRemoveHighlight: () => void;
+    canHighlight: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        className: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/es/rich-text-editor/menu-system/hooks/use-color-highlight.js

@@ -0,0 +1,166 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { isMarkInSchema, isNodeTypeSelected } from "../utils/tiptap-utils";
+import { HighlighterIcon } from "../icons";
+const COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
+const 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 canColorHighlight(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isMarkInSchema("highlight", editor) || 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 (!isMarkInSchema("highlight", editor))
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorHighlight(editor);
+  }
+  return true;
+}
+function useColorHighlight(config) {
+  const { label, highlightColor, hideWhenUnavailable = false, onApplied } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canHighlight = ref(false);
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canHighlight.value = false;
+      return;
+    }
+    isActive.value = isColorHighlightActive(editor, highlightColor);
+    canHighlight.value = canColorHighlight(editor);
+    isVisible.value = shouldShowButton({ editor, hideWhenUnavailable });
+  };
+  watch(
+    () => getEditor(),
+    (editor) => {
+      if (!editor)
+        return;
+      updateState();
+      editor.on("selectionUpdate", updateState);
+      editor.on("transaction", updateState);
+      onBeforeUnmount(() => {
+        editor.off("selectionUpdate", updateState);
+        editor.off("transaction", updateState);
+      });
+    },
+    { immediate: true }
+  );
+  const handleColorHighlight = () => {
+    const editor = getEditor();
+    if (!editor || !canHighlight.value || !highlightColor || !label)
+      return;
+    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 });
+      }
+    }, 0);
+  };
+  const handleRemoveHighlight = () => {
+    const editor = getEditor();
+    const success = removeHighlight(editor);
+    if (success) {
+      onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canHighlight,
+    label: label || "Highlight",
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon
+  };
+}
+export {
+  COLOR_HIGHLIGHT_SHORTCUT_KEY,
+  HIGHLIGHT_COLORS,
+  canColorHighlight,
+  isColorHighlightActive,
+  removeHighlight,
+  shouldShowButton,
+  useColorHighlight
+};

package/es/rich-text-editor/menu-system/hooks/use-cursor-visibility.d.ts

@@ -0,0 +1,7 @@
+import { type Ref } from 'vue';
+import type { Editor } from '@tiptap/vue-3';
+export interface CursorVisibilityOptions {
+    editor?: Editor | null | Ref<Editor | null | undefined>;
+    overlayHeight?: number | Ref<number>;
+}
+export declare function useCursorVisibility(options: CursorVisibilityOptions): Ref<import("./use-element-rect").RectState, import("./use-element-rect").RectState>;

package/es/rich-text-editor/menu-system/hooks/use-cursor-visibility.js

@@ -0,0 +1,46 @@
+import { watch } from "vue";
+import { useWindowSizeStore } from "./use-window-size";
+import { useBodyRect } from "./use-element-rect";
+function useCursorVisibility(options) {
+  const windowSize = useWindowSizeStore();
+  const rect = useBodyRect({
+    enabled: true,
+    throttleMs: 100,
+    useResizeObserver: true
+  });
+  const ensureCursorVisibility = () => {
+    const editor = typeof options.editor === "function" ? options.editor() : options.editor && "value" in options.editor ? options.editor.value : options.editor;
+    const overlayHeight = options.overlayHeight && "value" in options.overlayHeight ? options.overlayHeight.value : options.overlayHeight || 0;
+    if (!editor)
+      return;
+    const { state, view } = editor;
+    if (!view.hasFocus())
+      return;
+    const { from } = state.selection;
+    const cursorCoords = view.coordsAtPos(from);
+    if (windowSize.value.height < rect.value.height && cursorCoords) {
+      const availableSpace = windowSize.value.height - cursorCoords.top;
+      if (availableSpace < overlayHeight) {
+        const targetCursorY = Math.max(windowSize.value.height / 2, overlayHeight);
+        const currentScrollY = window.scrollY;
+        const cursorAbsoluteY = cursorCoords.top + currentScrollY;
+        const newScrollY = cursorAbsoluteY - targetCursorY;
+        window.scrollTo({
+          top: Math.max(0, newScrollY),
+          behavior: "smooth"
+        });
+      }
+    }
+  };
+  watch(
+    [windowSize, rect, () => options.overlayHeight, () => options.editor],
+    () => {
+      ensureCursorVisibility();
+    },
+    { deep: true }
+  );
+  return rect;
+}
+export {
+  useCursorVisibility
+};

package/es/rich-text-editor/menu-system/hooks/use-element-rect.d.ts

@@ -0,0 +1,10 @@
+import { type Ref } from 'vue';
+export type RectState = Omit<DOMRect, 'toJSON'>;
+export interface ElementRectOptions {
+    element?: Element | Ref<Element | null> | string | null;
+    enabled?: boolean;
+    throttleMs?: number;
+    useResizeObserver?: boolean;
+}
+export declare function useElementRect(options?: ElementRectOptions): Ref<RectState>;
+export declare function useBodyRect(options?: Omit<ElementRectOptions, 'element'>): Ref<RectState>;