v-notion-editor 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -11,6 +11,9 @@ A powerful, feature-rich Vue 3 rich text editor component inspired by Notion, It
11
11
  - **Image Handling**: Drag-and-drop image uploads with customizable upload functions.
12
12
  - **File Handler**: Smart paste handling for images and rich content
13
13
  - **Image Resizing & Alignment**: Smoothly resize images with interactive handles and align them left, right, or center.
14
+ - **Embed Handling**: Embed videos OR websites supports YouTube, Vimeo, Google Maps, Facebook, and more.
15
+ - **Math Rendering**: Inline and block math support with KaTeX
16
+ - **CSV Import**: Import CSV files data into tables
14
17
  - **Drag & Drop**: Reorder content blocks with visual drag handles
15
18
  - **Slash Commands**: Quick content insertion with "/" command menu
16
19
  - **Link Management**: Smart link insertion and editing with bubble menu
@@ -192,10 +195,11 @@ const getEditorContent = () => {
192
195
 
193
196
  ### 3. Read-Only Content Display
194
197
 
195
- To display editor content with the same styling in read-only mode, wrap your content with the `v-notion-editor` class:
198
+ To display editor content with the same styling and functionality (like syntax highlighting and math rendering) in read-only mode, use the NotionReadMode component:
196
199
 
197
200
  ```vue
198
201
  <script setup>
202
+ import { NotionReadMode } from 'v-notion-editor'
199
203
  import 'v-notion-editor/style.css'
200
204
 
201
205
  const savedContent = ref(`
@@ -207,9 +211,7 @@ const savedContent = ref(`
207
211
 
208
212
  <template>
209
213
  <!-- Read-only content with editor styling -->
210
- <div class="v-notion-editor">
211
- <div v-html="savedContent" class="read-mode" />
212
- </div>
214
+ <NotionReadMode :content="savedContent" />
213
215
  </template>
214
216
  ```
215
217