@halo-dev/richtext-editor 2.21.0 → 2.23.0

package/dist/types/index.d.ts

@@ -1,67 +1,139 @@
-import { EditorState, EditorView, Node, ResolvedPos, Selection, Slice } from '../tiptap/pm';
-import { Editor, Range } from '../tiptap/vue-3';
+import { arrow, autoPlacement, flip, hide, inline, offset, shift, size, VirtualElement } from '@floating-ui/dom';
 import { Component } from 'vue';
+import { Editor, EditorState, EditorView, PluginKey, PMNode, Range, ResolvedPos } from '../tiptap';
 export interface ToolbarItemType {
     priority: number;
     component: Component;
-    props: {
+    props: Omit<ToolbarItemComponentProps, "children"> & Record<string, unknown>;
+    children?: ToolbarItemType[];
+}
+export interface ToolbarItemComponentProps {
+    editor: Editor;
+    isActive: boolean;
+    disabled?: boolean;
+    icon?: Component;
+    title?: string;
+    action?: () => void;
+    children?: ToolbarItemType[];
+}
+export interface BubbleMenuOptions {
+    strategy?: "absolute" | "fixed";
+    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    offset?: Parameters<typeof offset>[0] | boolean;
+    flip?: Parameters<typeof flip>[0] | boolean;
+    shift?: Parameters<typeof shift>[0] | boolean;
+    arrow?: Parameters<typeof arrow>[0] | false;
+    size?: Parameters<typeof size>[0] | boolean;
+    autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
+    hide?: Parameters<typeof hide>[0] | boolean;
+    inline?: Parameters<typeof inline>[0] | boolean;
+    onShow?: () => void;
+    onHide?: () => void;
+    onUpdate?: () => void;
+    onDestroy?: () => void;
+    /**
+     * The scrollable element that should be listened to when updating the position of the bubble menu.
+     * If not provided, the window will be used.
+     * @type {HTMLElement | Window}
+     */
+    scrollTarget?: HTMLElement | Window;
+}
+export interface DragButtonItemProps {
+    extendsKey?: string;
+    priority?: number;
+    title?: string | (({ editor, node, pos, }: {
+        editor: Editor;
+        node: PMNode | null;
+        pos: number;
+    }) => string);
+    icon?: Component;
+    key?: string;
+    action?: ({ editor, node, pos, close, }: {
         editor: Editor;
-        isActive: boolean;
-        disabled?: boolean;
-        icon?: Component;
-        title?: string;
-        action?: () => void;
+        node: PMNode | null;
+        pos: number;
+        close: () => void;
+    }) => Component | boolean | void | Promise<Component | boolean | void>;
+    iconStyle?: string;
+    class?: string;
+    visible?: ({ editor, node, pos, }: {
+        editor: Editor;
+        node: PMNode | null;
+        pos: number;
+    }) => boolean;
+    isActive?: ({ editor, node, pos, }: {
+        editor: Editor;
+        node: PMNode | null;
+        pos: number;
+    }) => boolean;
+    disabled?: ({ editor, node, pos, }: {
+        editor: Editor;
+        node: PMNode | null;
+        pos: number;
+    }) => boolean;
+    keyboard?: string;
+    component?: Component;
+    [key: string]: unknown;
+}
+export interface DragButtonType extends DragButtonItemProps {
+    children?: {
+        component?: Component;
+        items?: DragButtonItemProps[];
     };
-    children?: ToolbarItemType[];
 }
-interface BubbleMenuProps {
-    pluginKey?: string;
+export interface BubbleMenuProps {
+    pluginKey?: string | PluginKey;
     editor?: Editor;
-    shouldShow: (props: {
+    shouldShow?: (props: {
         editor: Editor;
+        element: HTMLElement;
+        view: EditorView;
         state: EditorState;
-        node?: HTMLElement;
-        view?: EditorView;
         oldState?: EditorState;
-        from?: number;
-        to?: number;
+        from: number;
+        to: number;
     }) => boolean;
-    tippyOptions?: Record<string, unknown>;
-    getRenderContainer?: (node: HTMLElement) => HTMLElement;
-    defaultAnimation?: boolean;
+    appendTo?: HTMLElement | (() => HTMLElement) | undefined;
+    getReferencedVirtualElement?: () => VirtualElement | null;
+    options?: BubbleMenuOptions | null;
 }
 export interface NodeBubbleMenuType extends BubbleMenuProps {
     component?: Component;
     items?: BubbleItemType[];
+    extendsKey?: string | PluginKey;
 }
 export interface BubbleItemType {
     priority: number;
     component?: Component;
-    props?: {
-        isActive?: ({ editor }: {
-            editor: Editor;
-        }) => boolean;
-        visible?: ({ editor }: {
-            editor: Editor;
-        }) => boolean;
-        icon?: Component;
-        iconStyle?: string;
-        title?: string;
-        action?: ({ editor }: {
-            editor: Editor;
-        }) => Component | void;
-    };
+    key?: string;
+    props?: Omit<BubbleItemComponentProps, "editor"> & Record<string, unknown>;
+}
+export interface BubbleItemComponentProps {
+    editor: Editor;
+    isActive?: ({ editor }: {
+        editor: Editor;
+    }) => boolean;
+    visible?: ({ editor }: {
+        editor: Editor;
+    }) => boolean;
+    icon?: Component;
+    iconStyle?: string;
+    title?: string;
+    action?: ({ editor }: {
+        editor: Editor;
+    }) => Component | boolean | void;
 }
 export interface ToolboxItemType {
     priority: number;
     component: Component;
-    props: {
-        editor: Editor;
-        icon?: Component;
-        title?: string;
-        description?: string;
-        action?: () => void;
-    };
+    props: ToolboxItemComponentProps & Record<string, unknown>;
+}
+export interface ToolboxItemComponentProps {
+    editor: Editor;
+    icon?: Component;
+    title?: string;
+    description?: string;
+    action?: () => void;
 }
 export interface ExtensionOptions {
     getToolbarItems?: ({ editor, }: {
@@ -74,9 +146,9 @@ export interface ExtensionOptions {
     getToolboxItems?: ({ editor, }: {
         editor: Editor;
     }) => ToolboxItemType | ToolboxItemType[];
-    getDraggable?: ({ editor, }: {
+    getDraggableMenuItems?: ({ editor, }: {
         editor: Editor;
-    }) => DraggableItemType | boolean;
+    }) => DragButtonType | DragButtonType[];
 }
 export interface CommandMenuItemType {
     priority: number;
@@ -90,7 +162,7 @@ export interface CommandMenuItemType {
 }
 export interface DragSelectionNodeType {
     $pos?: ResolvedPos;
-    node?: Node;
+    node?: PMNode;
     el: HTMLElement;
     nodeOffset?: number;
     dragDomOffset?: {
@@ -98,19 +170,3 @@ export interface DragSelectionNodeType {
         y?: number;
     };
 }
-export interface DraggableItemType {
-    getRenderContainer?: ({ dom, view, }: {
-        dom: HTMLElement;
-        view: EditorView;
-    }) => DragSelectionNodeType;
-    handleDrop?: ({ view, event, slice, insertPos, node, selection, }: {
-        view: EditorView;
-        event: DragEvent;
-        slice: Slice;
-        insertPos: number;
-        node: Node;
-        selection: Selection;
-    }) => boolean | void;
-    allowPropagationDownward?: boolean;
-}
-export {};

package/dist/utils/attachment.d.ts

@@ -0,0 +1,3 @@
+import { AttachmentLike } from '@halo-dev/ui-shared';
+import { Editor, Content } from '../tiptap';
+export declare function convertToMediaContents(editor: Editor, attachments: AttachmentLike[]): Content[];

package/dist/utils/clipboard.d.ts

@@ -0,0 +1,9 @@
+import { Editor, VueEditor } from '../tiptap';
+/**
+ * Copy the selected content from the editor to the clipboard
+ * Supports both HTML and plain text formats
+ *
+ * @param editor - TipTap editor instance
+ * @returns Promise<boolean> - Whether the copy operation was successful
+ */
+export declare function copySelectionToClipboard(editor: Editor | VueEditor): Promise<boolean>;

package/dist/utils/delete-node.d.ts

@@ -1,4 +1,4 @@
+import { Editor } from '../tiptap';
 import { Transaction, ResolvedPos } from '../tiptap/pm';
-import { Editor } from '../tiptap/vue-3';
 export declare const deleteNodeByPos: ($pos: ResolvedPos) => (tr: Transaction) => boolean;
 export declare const deleteNode: (nodeType: string, editor: Editor) => boolean;

package/dist/utils/filter-duplicate-extensions.d.ts

@@ -0,0 +1,2 @@
+import { AnyExtension, Extensions } from '../tiptap';
+export declare const filterDuplicateExtensions: (extensions: Extensions | undefined) => AnyExtension[] | undefined;

package/dist/utils/index.d.ts

@@ -1,2 +1,10 @@
 export * from './anchor';
+export * from './attachment';
+export * from './clipboard';
 export * from './delete-node';
+export * from './filter-duplicate-extensions';
+export * from './is-allowed-uri';
+export * from './is-list-active';
+export * from './is-node-empty';
+export * from './keyboard';
+export * from './upload';

package/dist/utils/{isListActive.d.ts → is-list-active.d.ts}

@@ -1,4 +1,4 @@
-import { CoreEditor } from '../tiptap';
+import { Editor } from '../tiptap';
 /**
  * Check if a list is active
  *
@@ -9,4 +9,4 @@ import { CoreEditor } from '../tiptap';
  * const isActive = isListActive(editor.state);
  * ```
  **/
-export declare const isListActive: (editor: CoreEditor) => boolean;
+export declare const isListActive: (editor: Editor) => boolean;

package/dist/utils/is-node-empty.d.ts

@@ -0,0 +1,6 @@
+import { Node } from '@tiptap/pm/model';
+export declare const isEmpty: (node: Node) => boolean;
+export declare const isNodeDefault: (node: Node) => boolean;
+export declare const isNodeContentEmpty: (node: Node) => boolean;
+export declare const isParagraphEmpty: (node: Node) => boolean;
+export declare const isBlockEmpty: (node: Node) => boolean;

package/dist/utils/keyboard.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Keyboard shortcut utilities
+ * Reference: tiptap keyboard shortcuts format https://tiptap.dev/docs/editor/core-concepts/keyboard-shortcuts
+ */
+interface ParsedShortcut {
+    key: string;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+}
+/**
+ * Parse shortcut string
+ * Supported formats:
+ * - Mod-l (Mac: Cmd+L, Others: Ctrl+L)
+ * - Control-Shift-Enter
+ * - Shift-Tab
+ * - Alt-1
+ *
+ * @param shortcut - Shortcut string
+ * @returns Parsed shortcut object
+ */
+export declare function parseShortcut(shortcut: string): ParsedShortcut;
+/**
+ * Check if a keyboard event matches a shortcut
+ * @param event - Keyboard event
+ * @param shortcut - Shortcut string
+ * @returns Whether the event matches the shortcut
+ */
+export declare function matchShortcut(event: KeyboardEvent, shortcut: string): boolean;
+/**
+ * Format shortcut to display text
+ * @param shortcut - Shortcut string
+ * @returns Formatted display text
+ */
+export declare function formatShortcut(shortcut: string): string;
+export {};

package/dist/utils/upload.d.ts

@@ -0,0 +1,78 @@
+import { Attachment } from '@halo-dev/api-client';
+import { AxiosRequestConfig } from 'axios';
+import { Editor, PMNode } from '../tiptap';
+export interface FileProps {
+    file: File;
+    editor: Editor;
+}
+/**
+ * Creates an editor node from a file.
+ *
+ * @param editor - Editor instance
+ * @param file - File to be uploaded
+ * @returns - Editor node
+ */
+export declare const createEditorNodeFormFile: (editor: Editor, file: File) => PMNode | undefined;
+/**
+ * Handles file events, determining if the file is an image and triggering the appropriate upload process.
+ *
+ * @param {FileProps} { file, editor } - File and editor instances
+ * @returns {boolean} - True if a file is handled, otherwise false
+ */
+export declare const handleFileEvent: (editor: Editor, files: File[]) => false | undefined;
+/**
+ * Uploads an image file and inserts it into the editor.
+ *
+ * @param editor - Editor instance
+ * @param file - File to be uploaded
+ */
+export declare const uploadImage: (editor: Editor, file: File) => PMNode;
+/**
+ * Uploads a video file and inserts it into the editor.
+ *
+ * @param editor - Editor instance
+ * @param file - File to be uploaded
+ */
+export declare const uploadVideo: (editor: Editor, file: File) => PMNode;
+/**
+ * Uploads an audio file and inserts it into the editor.
+ *
+ * @param editor - Editor instance
+ * @param file - File to be uploaded
+ */
+export declare const uploadAudio: (editor: Editor, file: File) => PMNode;
+export interface UploadFetchResponse {
+    controller: AbortController;
+    onUploadProgress: (progress: number) => void;
+    onFinish: (attachment?: Attachment) => void;
+    onError: (error: Error) => void;
+}
+/**
+ * Uploads a file with progress monitoring, cancellation support, and callbacks for completion and errors.
+ *
+ * @param {File} file - File to be uploaded
+ * @param {Function} upload - Function to handle the file upload, should return a Promise
+ * @returns {Promise<UploadFetchResponse>} - Returns an object with control and callback methods
+ */
+export declare const uploadFile: (file: File, upload: (file: File, options?: AxiosRequestConfig) => Promise<Attachment>, uploadResponse: UploadFetchResponse) => Promise<void>;
+/**
+ * Converts a file to a Base64 string.
+ *
+ * @param {File} file - File to be converted
+ * @returns {Promise<string>} - A promise that resolves with the Base64 string
+ */
+export declare function fileToBase64(file: File): Promise<string>;
+export declare function containsFileClipboardIdentifier(types: readonly string[]): boolean;
+export declare function batchUploadExternalLink(editor: Editor, nodes: {
+    node: PMNode;
+    pos: number;
+    index: number;
+    parent: PMNode | null;
+}[]): Promise<void>;
+export declare function uploadExternalLink(editor: Editor, nodeWithPos: {
+    node: PMNode;
+    pos: number;
+    index: number;
+    parent: PMNode | null;
+}): Promise<void>;
+export declare function isExternalAsset(src: string): boolean;

package/package.json

@@ -1,95 +1,83 @@
 {
   "name": "@halo-dev/richtext-editor",
-  "version": "2.21.0",
+  "version": "2.23.0",
   "description": "Default editor for Halo",
   "homepage": "https://github.com/halo-dev/halo/tree/main/ui/packages/editor#readme",
   "bugs": {
     "url": "https://github.com/halo-dev/halo/issues"
   },
+  "license": "GPL-3.0",
+  "author": "@halo-dev",
   "repository": {
     "type": "git",
     "url": "https://github.com/halo-dev/halo.git",
     "directory": "ui/packages/editor"
   },
-  "license": "GPL-3.0",
-  "author": "@halo-dev",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.iife.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "unpkg": "./dist/index.iife.js",
+  "jsdelivr": "./dist/index.iife.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/rich-text-editor.es.js"
+      "import": "./dist/index.es.js"
     },
     "./dist/style.css": "./dist/style.css"
   },
-  "main": "./dist/rich-text-editor.iife.js",
-  "jsdelivr": "./dist/rich-text-editor.iife.js",
-  "unpkg": "./dist/rich-text-editor.iife.js",
-  "module": "./dist/rich-text-editor.es.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "dependencies": {
-    "@ckpack/vue-color": "^1.5.0",
-    "@tiptap/core": "^2.11.2",
-    "@tiptap/extension-blockquote": "^2.11.2",
-    "@tiptap/extension-bold": "^2.11.2",
-    "@tiptap/extension-bullet-list": "^2.11.2",
-    "@tiptap/extension-code": "^2.11.2",
-    "@tiptap/extension-code-block": "^2.11.2",
-    "@tiptap/extension-color": "^2.11.2",
-    "@tiptap/extension-document": "^2.11.2",
-    "@tiptap/extension-dropcursor": "^2.11.2",
-    "@tiptap/extension-hard-break": "^2.11.2",
-    "@tiptap/extension-heading": "^2.11.2",
-    "@tiptap/extension-highlight": "^2.11.2",
-    "@tiptap/extension-history": "^2.11.2",
-    "@tiptap/extension-horizontal-rule": "^2.11.2",
-    "@tiptap/extension-image": "^2.11.2",
-    "@tiptap/extension-italic": "^2.11.2",
-    "@tiptap/extension-link": "^2.11.2",
-    "@tiptap/extension-list-item": "^2.11.2",
-    "@tiptap/extension-list-keymap": "^2.11.2",
-    "@tiptap/extension-ordered-list": "^2.11.2",
-    "@tiptap/extension-paragraph": "^2.11.2",
-    "@tiptap/extension-placeholder": "^2.11.2",
-    "@tiptap/extension-strike": "^2.11.2",
-    "@tiptap/extension-subscript": "^2.11.2",
-    "@tiptap/extension-superscript": "^2.11.2",
-    "@tiptap/extension-table": "^2.11.2",
-    "@tiptap/extension-table-row": "^2.11.2",
-    "@tiptap/extension-task-item": "^2.11.2",
-    "@tiptap/extension-task-list": "^2.11.2",
-    "@tiptap/extension-text": "^2.11.2",
-    "@tiptap/extension-text-align": "^2.11.2",
-    "@tiptap/extension-text-style": "^2.11.2",
-    "@tiptap/extension-underline": "^2.11.2",
-    "@tiptap/pm": "^2.11.2",
-    "@tiptap/suggestion": "^2.11.2",
-    "@tiptap/vue-3": "^2.11.2",
-    "floating-vue": "^5.2.2",
+    "@floating-ui/dom": "^1.7.4",
+    "@tiptap/core": "^3.17.1",
+    "@tiptap/extension-blockquote": "^3.17.1",
+    "@tiptap/extension-bold": "^3.17.1",
+    "@tiptap/extension-code": "^3.17.1",
+    "@tiptap/extension-code-block": "^3.17.1",
+    "@tiptap/extension-color": "^3.17.1",
+    "@tiptap/extension-details": "^3.17.1",
+    "@tiptap/extension-document": "^3.17.1",
+    "@tiptap/extension-drag-handle": "^3.17.1",
+    "@tiptap/extension-drag-handle-vue-3": "^3.17.1",
+    "@tiptap/extension-hard-break": "^3.17.1",
+    "@tiptap/extension-heading": "^3.17.1",
+    "@tiptap/extension-highlight": "^3.17.1",
+    "@tiptap/extension-horizontal-rule": "^3.17.1",
+    "@tiptap/extension-image": "^3.17.1",
+    "@tiptap/extension-italic": "^3.17.1",
+    "@tiptap/extension-link": "^3.17.1",
+    "@tiptap/extension-list": "^3.17.1",
+    "@tiptap/extension-paragraph": "^3.17.1",
+    "@tiptap/extension-strike": "^3.17.1",
+    "@tiptap/extension-subscript": "^3.17.1",
+    "@tiptap/extension-superscript": "^3.17.1",
+    "@tiptap/extension-table": "^3.17.1",
+    "@tiptap/extension-text": "^3.17.1",
+    "@tiptap/extension-text-align": "^3.17.1",
+    "@tiptap/extension-text-style": "^3.17.1",
+    "@tiptap/extension-underline": "^3.17.1",
+    "@tiptap/extensions": "^3.17.1",
+    "@tiptap/pm": "^3.17.1",
+    "@tiptap/suggestion": "^3.17.1",
+    "@tiptap/vue-3": "^3.17.1",
     "github-markdown-css": "^5.2.0",
     "linkifyjs": "^4.1.3",
     "scroll-into-view-if-needed": "^3.1.0",
-    "tippy.js": "^6.3.7"
+    "@halo-dev/api-client": "2.23.0",
+    "@halo-dev/components": "2.23.0",
+    "@halo-dev/ui-shared": "2.23.0"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.117",
-    "@types/linkifyjs": "^2.1.7",
-    "release-it": "^16.1.5",
-    "vite-plugin-dts": "^4.2.2"
+    "@types/linkifyjs": "^2.1.7"
   },
   "peerDependencies": {
-    "vue": "^3.5.16"
+    "vue": "^3.5.x"
   },
   "scripts": {
-    "build": "vite build --config ./vite.lib.config.ts",
-    "dev": "vite",
-    "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
-    "release": "release-it",
-    "test:unit:coverage": "vitest run --environment jsdom --coverage",
-    "test:unit:ui": "vitest --environment jsdom --watch --ui",
-    "test:unit:watch": "vitest --environment jsdom --watch",
+    "build": "vite build",
+    "dev": "vite build --watch --mode development",
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   }
 }

package/dist/components/block/BlockActionInput.vue.d.ts

@@ -1,15 +0,0 @@
-declare const _default: import('vue').DefineComponent<{
-    tooltip?: string;
-    modelValue?: string;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "update:modelValue": (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    tooltip?: string;
-    modelValue?: string;
-}> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {
-    tooltip: string;
-    modelValue: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/block/BlockCard.vue.d.ts

@@ -1,30 +0,0 @@
-import { Editor } from '../../tiptap/vue-3';
-declare function __VLS_template(): {
-    slots: {
-        content?(_: {}): any;
-        actions?(_: {}): any;
-    };
-    refs: {};
-    attrs: Partial<{}>;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{
-    selected: boolean;
-    editor: Editor;
-    getPos: () => number;
-    deleteNode: () => void;
-}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-    selected: boolean;
-    editor: Editor;
-    getPos: () => number;
-    deleteNode: () => void;
-}> & Readonly<{}>, {
-    selected: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};