v-notion-editor 0.0.8 → 0.1.0

package/README.md

@@ -1,12 +1,13 @@
 # Vue Notion Editor
 
-A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It delivers a complete editing experience with slash commands, context menus, drag-and-drop support, advanced formatting, enhanced tables, and image upload capabilities.
+A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It delivers a complete editing experience with slash commands, context menus, drag-and-drop support, advanced formatting, enhanced tables, Masonry Grids and image upload capabilities.
 
 ## 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
 -  **Image Resizing & Alignment**: Smoothly resize images with interactive handles and align them left, right, or center.
@@ -126,10 +127,13 @@ A comprehensive toolbar component with formatting options.
 | Prop              | Type       | Default   | Description                       |
 | ----------------- | ---------- | --------- | --------------------------------- |
 | `visibleToolbars` | `string[]` | All tools | Array of toolbar items to display |
+| `slashCommand`    | `boolean`  | true      | Enables the slash command menu    |
+| `showBubbleMenu`  | `boolean`  | true      | Enables the bubble menu           |
+| `showDragHandle`  | `boolean`  | true      | Enables the drag handle           |
 
 #### Available Toolbar Items
 
-`headings`, `bold`, `italic`, `underline`, `strike`, `code`, `color`, `link`, `bulletList`, `orderedList`, `taskList`, `blockquote`, `table`, `align`, `image`, `divider`, `undo`, `redo`
+`headings`, `bold`, `italic`, `underline`, `strike`, `code`, `color`, `link`, `bulletList`, `orderedList`, `taskList`, `blockquote`, `table`, `grid`, `align`, `image`, `divider`, `undo`, `redo`
 
 ## Usage Examples
 
@@ -274,6 +278,7 @@ Customize the editor appearance using CSS variables:
    --editor-content-color-primary-dark-light: #007bff;
    --editor-content-color-border: #c8c8c6;
    --editor-content-color-border-dark: #d0d0ce;
+   --editor-selection-color: #ecebe7d1;
 
    /* Content Background Colors */
    --editor-content-bg-default: rgba(55, 53, 47, 0.12);

package/components/NotionEditor.vue.d.ts

@@ -8,9 +8,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     imageUploadOptions?: ImageUploadOptions;
     showDragHandle?: boolean;
     showBubbleMenu?: boolean;
+    slashCommand?: boolean;
+    extensions?: any;
 }>, {
     showDragHandle: boolean;
     showBubbleMenu: boolean;
+    slashCommand: boolean;
+    extensions: () => any[];
 }>>, {
     editor: import('vue').ShallowRef<import('@tiptap/vue-3').Editor, import('@tiptap/vue-3').Editor>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -25,9 +29,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     imageUploadOptions?: ImageUploadOptions;
     showDragHandle?: boolean;
     showBubbleMenu?: boolean;
+    slashCommand?: boolean;
+    extensions?: any;
 }>, {
     showDragHandle: boolean;
     showBubbleMenu: boolean;
+    slashCommand: boolean;
+    extensions: () => any[];
 }>>> & Readonly<{
     onOnFocus?: () => any;
     onOnBlur?: () => any;
@@ -35,6 +43,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>, {
     showDragHandle: boolean;
     showBubbleMenu: boolean;
+    slashCommand: boolean;
+    extensions: any;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;