@cgboiler/biz-basic 1.0.52 → 1.0.54

package/es/rich-text-editor/menu-system/hooks/use-image-upload.d.ts

@@ -0,0 +1,35 @@
+import type { Editor } from '@tiptap/vue-3';
+export declare const IMAGE_UPLOAD_SHORTCUT_KEY = "mod+shift+i";
+export interface UseImageUploadConfig {
+    editor: any;
+    hideWhenUnavailable?: boolean;
+    onInserted?: () => void;
+}
+export declare function canInsertImage(editor: Editor | null): boolean;
+export declare function isImageActive(editor: Editor | null): boolean;
+export declare function insertImage(editor: Editor | null): boolean;
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    hideWhenUnavailable: boolean;
+}): boolean;
+export declare function useImageUpload(config: UseImageUploadConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleImage: () => void;
+    canInsert: 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-image-upload.js

@@ -0,0 +1,103 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { isExtensionAvailable, isNodeTypeSelected } from "../utils/tiptap-utils";
+import { PlusSquareIcon } from "../icons";
+const IMAGE_UPLOAD_SHORTCUT_KEY = "mod+shift+i";
+function canInsertImage(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  const extensionName = isExtensionAvailable(editor, "imageUpload") ? "imageUpload" : "image";
+  if (!isExtensionAvailable(editor, extensionName) || isNodeTypeSelected(editor, ["image"]))
+    return false;
+  return editor.can().insertContent({ type: extensionName });
+}
+function isImageActive(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return editor.isActive("imageUpload") || editor.isActive("image");
+}
+function insertImage(editor) {
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canInsertImage(editor))
+    return false;
+  const extensionName = isExtensionAvailable(editor, "imageUpload") ? "imageUpload" : "image";
+  try {
+    return editor.chain().focus().insertContent({
+      type: extensionName
+    }).run();
+  } catch (e) {
+    return false;
+  }
+}
+function shouldShowButton(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable)
+    return false;
+  const hasExtension = isExtensionAvailable(editor, "imageUpload") || isExtensionAvailable(editor, "image");
+  if (!hasExtension)
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canInsertImage(editor);
+  }
+  return true;
+}
+function useImageUpload(config) {
+  const { hideWhenUnavailable = false, onInserted } = config;
+  const isVisible = ref(true);
+  const isActive = ref(false);
+  const canInsert = 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;
+      canInsert.value = false;
+      return;
+    }
+    isActive.value = isImageActive(editor);
+    canInsert.value = canInsertImage(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 handleImage = () => {
+    const editor = getEditor();
+    if (insertImage(editor)) {
+      onInserted == null ? void 0 : onInserted();
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleImage,
+    canInsert,
+    label: "Add image",
+    shortcutKeys: IMAGE_UPLOAD_SHORTCUT_KEY,
+    Icon: PlusSquareIcon
+  };
+}
+export {
+  IMAGE_UPLOAD_SHORTCUT_KEY,
+  canInsertImage,
+  insertImage,
+  isImageActive,
+  shouldShowButton,
+  useImageUpload
+};

package/es/rich-text-editor/menu-system/hooks/use-link-popover.d.ts

@@ -0,0 +1,10 @@
+export interface UseLinkPopoverConfig {
+    editor: any;
+    onLinkAdded?: (url: string, inNewTab: boolean) => void;
+}
+export declare function useLinkPopover(config: UseLinkPopoverConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    linkUrl: import("vue").Ref<string, string>;
+    inNewTab: import("vue").Ref<boolean, boolean>;
+    handleSetLink: (url: string, newTab: boolean) => void;
+};

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

@@ -0,0 +1,62 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+function useLinkPopover(config) {
+  const isVisible = ref(false);
+  const linkUrl = ref("");
+  const inNewTab = 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;
+      return;
+    }
+    isVisible.value = editor.can().setLink({ href: "" }) || editor.isActive("link");
+    if (editor.isActive("link")) {
+      const attrs = editor.getAttributes("link");
+      linkUrl.value = attrs.href || "";
+      inNewTab.value = attrs.target === "_blank";
+    } else {
+      linkUrl.value = "";
+      inNewTab.value = false;
+    }
+  };
+  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 handleSetLink = (url, newTab) => {
+    var _a;
+    const editor = getEditor();
+    if (!editor)
+      return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: url, target: newTab ? "_blank" : null }).run();
+    }
+    (_a = config.onLinkAdded) == null ? void 0 : _a.call(config, url, newTab);
+  };
+  return {
+    isVisible,
+    linkUrl,
+    inNewTab,
+    handleSetLink
+  };
+}
+export {
+  useLinkPopover
+};

package/es/rich-text-editor/menu-system/hooks/use-list-dropdown-menu.d.ts

@@ -0,0 +1,34 @@
+import type { Editor } from '@tiptap/vue-3';
+import { type ListType } from './use-list';
+export interface UseListDropdownMenuConfig {
+    editor: any;
+    types?: ListType[];
+    hideWhenUnavailable?: boolean;
+}
+export interface ListOption {
+    label: string;
+    type: ListType;
+    icon: any;
+}
+export declare const listOptions: ListOption[];
+export declare function canToggleAnyList(editor: Editor | null, listTypes: ListType[]): boolean;
+export declare function isAnyListActive(editor: Editor | null, listTypes: ListType[]): boolean;
+export declare function getFilteredListOptions(availableTypes: ListType[]): typeof listOptions;
+export declare function shouldShowListDropdown(params: {
+    editor: Editor | null;
+    listTypes: ListType[];
+    hideWhenUnavailable: boolean;
+    listInSchema: boolean;
+    canToggleAny: boolean;
+}): boolean;
+export declare function getActiveListType(editor: Editor | null, availableTypes: ListType[]): ListType | undefined;
+export declare function useListDropdownMenu(config: UseListDropdownMenuConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    activeType: import("vue").Ref<ListType | undefined, ListType | undefined>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    canToggle: import("vue").Ref<boolean, boolean>;
+    types: ListType[];
+    filteredLists: ListOption[];
+    label: string;
+    Icon: import("vue").ComputedRef<any>;
+};

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

@@ -0,0 +1,121 @@
+import { ref, watch, onBeforeUnmount, computed } from "vue";
+import { isNodeInSchema } from "../utils/tiptap-utils";
+import { canToggleList, isListActive, listIcons } from "./use-list";
+import { ListIcon, ListOrderedIcon } from "../icons";
+const listOptions = [
+  {
+    label: "Bullet List",
+    type: "bulletList",
+    icon: ListIcon
+  },
+  {
+    label: "Ordered List",
+    type: "orderedList",
+    icon: ListOrderedIcon
+  }
+  // {
+  //   label: 'Task List',
+  //   type: 'taskList',
+  //   icon: ListTodoIcon,
+  // },
+];
+function canToggleAnyList(editor, listTypes) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return listTypes.some((type) => canToggleList(editor, type));
+}
+function isAnyListActive(editor, listTypes) {
+  if (!editor || !editor.isEditable)
+    return false;
+  return listTypes.some((type) => isListActive(editor, type));
+}
+function getFilteredListOptions(availableTypes) {
+  return listOptions.filter((option) => availableTypes.includes(option.type));
+}
+function shouldShowListDropdown(params) {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params;
+  if (!listInSchema || !editor) {
+    return false;
+  }
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleAny;
+  }
+  return true;
+}
+function getActiveListType(editor, availableTypes) {
+  if (!editor || !editor.isEditable)
+    return void 0;
+  return availableTypes.find((type) => isListActive(editor, type));
+}
+function useListDropdownMenu(config) {
+  const { types = ["bulletList", "orderedList", "taskList"], hideWhenUnavailable = false } = config;
+  const isVisible = ref(false);
+  const isActive = ref(false);
+  const canToggleState = ref(false);
+  const activeType = ref();
+  const getEditor = () => {
+    const editor = config.editor;
+    return editor && "value" in editor ? editor.value : editor;
+  };
+  const listInSchema = computed(() => {
+    const editor = getEditor();
+    return types.some((type) => isNodeInSchema(type, editor));
+  });
+  const filteredLists = getFilteredListOptions(types);
+  const updateState = () => {
+    const editor = getEditor();
+    if (!editor || !editor.isEditable) {
+      isVisible.value = false;
+      isActive.value = false;
+      canToggleState.value = false;
+      activeType.value = void 0;
+      return;
+    }
+    canToggleState.value = canToggleAnyList(editor, types);
+    isActive.value = isAnyListActive(editor, types);
+    activeType.value = getActiveListType(editor, types);
+    isVisible.value = shouldShowListDropdown({
+      editor,
+      listTypes: types,
+      hideWhenUnavailable,
+      listInSchema: listInSchema.value,
+      canToggleAny: canToggleState.value
+    });
+  };
+  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 activeOption = computed(() => filteredLists.find((opt) => opt.type === activeType.value));
+  const Icon = computed(() => activeOption.value ? listIcons[activeOption.value.type] : ListIcon);
+  return {
+    isVisible,
+    activeType,
+    isActive,
+    canToggle: canToggleState,
+    types,
+    filteredLists,
+    label: "List",
+    Icon
+  };
+}
+export {
+  canToggleAnyList,
+  getActiveListType,
+  getFilteredListOptions,
+  isAnyListActive,
+  listOptions,
+  shouldShowListDropdown,
+  useListDropdownMenu
+};

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

@@ -0,0 +1,28 @@
+import type { Editor } from '@tiptap/vue-3';
+export type ListType = 'bulletList' | 'orderedList' | 'taskList';
+export interface UseListConfig {
+    editor: any;
+    type: ListType;
+    hideWhenUnavailable?: boolean;
+    onToggled?: () => void;
+}
+export declare const listIcons: any;
+export declare const listLabels: Record<ListType, string>;
+export declare const LIST_SHORTCUT_KEYS: Record<ListType, string>;
+export declare function canToggleList(editor: Editor | null, type: ListType, turnInto?: boolean): boolean;
+export declare function isListActive(editor: Editor | null, type: ListType): boolean;
+export declare function toggleList(editor: Editor | null, type: ListType): boolean;
+export declare function shouldShowButton(props: {
+    editor: Editor | null;
+    type: ListType;
+    hideWhenUnavailable: boolean;
+}): boolean;
+export declare function useList(config: UseListConfig): {
+    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: any;
+};

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

@@ -0,0 +1,191 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition
+} from "../utils/tiptap-utils";
+import { ListIcon, ListOrderedIcon, ListTodoIcon } from "../icons";
+const listIcons = {
+  bulletList: ListIcon,
+  orderedList: ListOrderedIcon,
+  taskList: ListTodoIcon
+};
+const listLabels = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List"
+};
+const LIST_SHORTCUT_KEYS = {
+  bulletList: "mod+shift+8",
+  orderedList: "mod+shift+7",
+  taskList: "mod+shift+9"
+};
+function canToggleList(editor, type, turnInto = true) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isNodeInSchema(type, editor) || isNodeTypeSelected(editor, ["image"]))
+    return false;
+  if (!turnInto) {
+    switch (type) {
+      case "bulletList":
+        return editor.can().toggleBulletList();
+      case "orderedList":
+        return editor.can().toggleOrderedList();
+      case "taskList":
+        return editor.can().toggleList("taskList", "taskItem");
+      default:
+        return false;
+    }
+  }
+  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 isListActive(editor, type) {
+  if (!editor || !editor.isEditable)
+    return false;
+  switch (type) {
+    case "bulletList":
+      return editor.isActive("bulletList");
+    case "orderedList":
+      return editor.isActive("orderedList");
+    case "taskList":
+      return editor.isActive("taskList");
+    default:
+      return false;
+  }
+}
+function toggleList(editor, type) {
+  var _a;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!canToggleList(editor, type))
+    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();
+    }
+    if (editor.isActive(type)) {
+      chain.liftListItem("listItem").lift("bulletList").lift("orderedList").lift("taskList").run();
+    } else {
+      const toggleMap = {
+        bulletList: () => chain.toggleBulletList(),
+        orderedList: () => chain.toggleOrderedList(),
+        taskList: () => chain.toggleList("taskList", "taskItem")
+      };
+      const toggle = toggleMap[type];
+      if (!toggle)
+        return false;
+      toggle().run();
+    }
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function shouldShowButton(props) {
+  const { editor, type, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable)
+    return false;
+  if (!isNodeInSchema(type, editor))
+    return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleList(editor, type);
+  }
+  return true;
+}
+function useList(config) {
+  const { type, 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 = isListActive(editor, type);
+    canToggleState.value = canToggleList(editor, type);
+    isVisible.value = shouldShowButton({ editor, type, 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 (toggleList(editor, type)) {
+      onToggled == null ? void 0 : onToggled();
+    }
+  };
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggleState,
+    label: listLabels[type],
+    shortcutKeys: LIST_SHORTCUT_KEYS[type],
+    Icon: listIcons[type]
+  };
+}
+export {
+  LIST_SHORTCUT_KEYS,
+  canToggleList,
+  isListActive,
+  listIcons,
+  listLabels,
+  shouldShowButton,
+  toggleList,
+  useList
+};

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

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/vue-3';
+export type Mark = 'bold' | 'italic' | 'strike' | 'code' | 'underline' | 'superscript' | 'subscript';
+export interface UseMarkConfig {
+    editor: any;
+    type: Mark;
+    hideWhenUnavailable?: boolean;
+    onToggled?: () => void;
+}
+export declare const markIcons: any;
+export declare const MARK_SHORTCUT_KEYS: Record<Mark, string>;
+export declare function canToggleMark(editor: Editor | null, type: Mark): boolean;
+export declare function isMarkActive(editor: Editor | null, type: Mark): boolean;
+export declare function toggleMark(editor: Editor | null, type: Mark): boolean;
+export declare function useMark(config: UseMarkConfig): {
+    isVisible: import("vue").Ref<boolean, boolean>;
+    isActive: import("vue").Ref<boolean, boolean>;
+    handleMark: () => boolean;
+    canToggle: import("vue").Ref<boolean, boolean>;
+    label: string;
+    shortcutKeys: string;
+    Icon: any;
+};