v-notion-editor 0.1.7 → 0.1.9

package/README.md

@@ -11,6 +11,8 @@ A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It
 -  **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.
+-  **Embed Handling**: Embed videos OR websites supports YouTube, Vimeo, Google Maps, Facebook, and more.
+-  **Math Rendering**: Inline and block math support with KaTeX
 -  **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
@@ -192,10 +194,11 @@ const getEditorContent = () => {
 
 ### 3. Read-Only Content Display
 
-To display editor content with the same styling in read-only mode, wrap your content with the `v-notion-editor` class:
+To display editor content with the same styling and functionality (like syntax highlighting and math rendering) in read-only mode, use the NotionReadMode component:
 
 ```vue
 <script setup>
+import { NotionReadMode } from 'v-notion-editor'
 import 'v-notion-editor/style.css'
 
 const savedContent = ref(`
@@ -207,9 +210,7 @@ const savedContent = ref(`
 
 <template>
    <!-- Read-only content with editor styling -->
-   <div class="v-notion-editor">
-      <div v-html="savedContent" class="read-mode" />
-   </div>
+   <NotionReadMode :content="savedContent" />
 </template>
 ```
 

package/index.d.ts

@@ -1,4 +1,5 @@
 import { default as NotionEditor } from './components/NotionEditor.vue';
 import { default as NotionToolbar } from './components/NotionToolbar/NotionToolbar.vue';
+import { default as NotionReadMode } from './components/NotionReadMode.vue';
 
-export { NotionEditor, NotionToolbar };
+export { NotionEditor, NotionToolbar, NotionReadMode };