v-notion-editor 0.2.6 → 0.2.8

package/README.md

@@ -4,26 +4,28 @@ A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It
 
 ## Features
 
--  **Rich Text Formatting**: Bold, italic, underline, strikethrough, code, and color formatting
--  **Advanced Block Types**: Headings, blockquotes, code blocks, lists, and task lists
--  **Table Support**: Create, edit, and manipulate tables with advanced cell & row operations, including interactive drag-to-add/remove rows.
--  **Masonry Grid Support**: Design and control masonry grids with column resizing, grid controls, and item-level customization.
--  **Image Handling**: Drag-and-drop image uploads with customizable upload functions.
--  **File Handler**: Smart paste handling for images and rich content
--  **Embed Handling**: Embed videos OR websites supports YouTube, Vimeo, Google Maps, Facebook, and more.
--  **Math Rendering**: Inline and block math support with KaTeX
--  **CSV Import**: Import CSV files data into tables
--  **Image Resizing & Alignment**: Smoothly resize images with interactive handles and align them left, right, or center.
--  **Responsive Design**: Optimized for screen sizes, including responsive tables and smart masonry grid layouts for tablets and mobile devices.
--  **Drag & Drop**: Reorder content blocks with visual drag handles
--  **Slash Commands**: Quick content insertion with "/" command menu
--  **Link Management**: Smart link insertion and editing with bubble menu
--  **Text Alignment**: Left, center, right, and justify alignment options
--  **Bubble Menu**: Context-sensitive formatting toolbar
--  **Undo/Redo**: Full history management with keyboard shortcuts
--  **Task Lists**: Interactive checkboxes and task management
--  **Customizable**: Flexible styling with CSS variables and custom themes
--  **TypeScript Support**: Fully typed for enhanced developer experience
+- **Rich Text Formatting**: Bold, italic, underline, strikethrough, code, and color formatting
+- **Advanced Block Types**: Headings, blockquotes, code blocks, lists, and task lists
+- **Table Support**: Create, edit, and manipulate tables with advanced cell & row operations, including interactive drag-to-add/remove rows.
+- **Masonry Grid Support**: Design and control masonry grids with column resizing, grid controls, and item-level customization.
+- **Tabs Support**: Organizes content into multiple tabs for easy navigation.
+- **Image Handling**: Drag-and-drop image uploads with customizable upload functions.
+- **File Handler**: Smart paste handling for images and rich content
+- **Embed Handling**: Embed videos OR websites supports YouTube, Vimeo, Google Maps, Facebook, and more.
+- **Math Rendering**: Inline and block math support with KaTeX
+- **CSV Import**: Import CSV files data into tables
+- **Markdown Import**: Import content from a .md file
+- **Image Resizing & Alignment**: Smoothly resize images with interactive handles and align them left, right, or center.
+- **Responsive Design**: Optimized for screen sizes, including responsive tables and smart masonry grid layouts for tablets and mobile devices.
+- **Drag & Drop**: Reorder content blocks with visual drag handles
+- **Slash Commands**: Quick content insertion with "/" command menu
+- **Link Management**: Smart link insertion and editing with bubble menu
+- **Text Alignment**: Left, center, right, and justify alignment options
+- **Bubble Menu**: Context-sensitive formatting toolbar
+- **Undo/Redo**: Full history management with keyboard shortcuts
+- **Task Lists**: Interactive checkboxes and task management
+- **Customizable**: Flexible styling with CSS variables and custom themes
+- **TypeScript Support**: Fully typed for enhanced developer experience
 
 ## Demo
 

package/components/NotionEditor.vue.d.ts

@@ -1,7 +1,15 @@
 import { ImageUploadOptions } from '../types/index';
 
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string;
+declare function __VLS_template(): {
+    "color-picker"?(_: {
+        editor: import('@tiptap/vue-3').Editor;
+    }): any;
+    "heading-selector"?(_: {
+        editor: import('@tiptap/vue-3').Editor;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string | object;
     className?: string;
     styles?: any;
     wrapperClass?: string;
@@ -10,19 +18,33 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     showBubbleMenu?: boolean;
     slashCommand?: boolean;
     extensions?: any;
+    isCanvas?: boolean;
+    outputFormat?: "html" | "json";
+    zoom?: number;
+    bubbleManuAppendTo?: any;
+    /** Debounce delay for content updates (ms). Set to 0 to disable. */
+    updateDebounceMs?: number;
+    /** Enable performance optimizations for large documents */
+    enablePerformanceMode?: boolean;
 }>, {
     showDragHandle: boolean;
     showBubbleMenu: boolean;
     slashCommand: boolean;
     extensions: () => any[];
+    isCanvas: boolean;
+    outputFormat: string;
+    zoom: number;
+    updateDebounceMs: number;
+    enablePerformanceMode: boolean;
 }>>, {
     editor: import('vue').ShallowRef<import('@tiptap/vue-3').Editor, import('@tiptap/vue-3').Editor>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     onFocus: () => void;
     onBlur: () => void;
-    "update:modelValue": (value: string) => void;
+    onCreate: (editor: any) => void;
+    "update:modelValue": (value: string | object) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string;
+    modelValue: string | object;
     className?: string;
     styles?: any;
     wrapperClass?: string;
@@ -31,21 +53,41 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     showBubbleMenu?: boolean;
     slashCommand?: boolean;
     extensions?: any;
+    isCanvas?: boolean;
+    outputFormat?: "html" | "json";
+    zoom?: number;
+    bubbleManuAppendTo?: any;
+    /** Debounce delay for content updates (ms). Set to 0 to disable. */
+    updateDebounceMs?: number;
+    /** Enable performance optimizations for large documents */
+    enablePerformanceMode?: boolean;
 }>, {
     showDragHandle: boolean;
     showBubbleMenu: boolean;
     slashCommand: boolean;
     extensions: () => any[];
+    isCanvas: boolean;
+    outputFormat: string;
+    zoom: number;
+    updateDebounceMs: number;
+    enablePerformanceMode: boolean;
 }>>> & Readonly<{
     onOnFocus?: () => any;
     onOnBlur?: () => any;
-    "onUpdate:modelValue"?: (value: string) => any;
+    onOnCreate?: (editor: any) => any;
+    "onUpdate:modelValue"?: (value: string | object) => any;
 }>, {
+    isCanvas: boolean;
+    extensions: any;
+    updateDebounceMs: number;
     showDragHandle: boolean;
     showBubbleMenu: boolean;
     slashCommand: boolean;
-    extensions: any;
+    outputFormat: "html" | "json";
+    zoom: number;
+    enablePerformanceMode: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -64,3 +106,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};