@elia-ori/editor 0.1.24 → 0.1.26

package/README.md

@@ -45,12 +45,34 @@ function MyEditor() {
 }
 ```
 
+### 儲存格式
+
+編輯器支援 HTML 和 JSON 兩種格式：
+
+```tsx
+// 儲存為 JSON 格式（推薦）
+<EliaEditor
+  content={content}
+  onChange={(html, json) => {
+    setContent(json)  // 儲存 JSON，支援多平台渲染
+  }}
+/>
+
+// 儲存為 HTML 格式（向後相容）
+<EliaEditor
+  content={content}
+  onChange={(html) => {
+    setContent(html)  // 只用第一個參數
+  }}
+/>
+```
+
 ## Props
 
 | Prop | 類型 | 預設值 | 說明 |
 |------|------|--------|------|
 | `content` | `string` | `''` | HTML 內容 |
-| `onChange` | `(html: string) => void` | - | 內容變更回調 |
+| `onChange` | `(html: string, json: JSONContent) => void` | - | 內容變更時的回調，同時提供 HTML 和 JSON 格式 |
 | `placeholder` | `string` | `'開始寫作...'` | 佔位文字 |
 | `toolbar` | `ToolbarItem[]` | 全部 | 工具列項目 |
 | `onImageUpload` | `UploadFunction` | - | **必要** - 圖片上傳函數 |

package/dist/index.cjs

@@ -32,7 +32,9 @@ var index_exports = {};
 __export(index_exports, {
   Callout: () => Callout,
   EliaEditor: () => EliaEditor,
-  SimpleEditor: () => EliaEditor
+  SimpleEditor: () => EliaEditor,
+  contentExtensions: () => contentExtensions,
+  generateEditorHTML: () => generateEditorHTML
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -6210,7 +6212,7 @@ function EliaEditor({
   const handleUpdate = (0, import_react86.useCallback)(
     ({ editor: editor2 }) => {
       isInternalUpdate.current = true;
-      onChange?.(editor2.getHTML());
+      onChange?.(editor2.getHTML(), editor2.getJSON());
     },
     [onChange]
   );
@@ -6341,10 +6343,53 @@ function EliaEditor({
     }
   );
 }
+
+// src/utils/content-renderer.ts
+var import_core2 = require("@tiptap/core");
+var import_starter_kit2 = __toESM(require("@tiptap/starter-kit"), 1);
+var import_extension_text_align2 = require("@tiptap/extension-text-align");
+var import_extension_list2 = require("@tiptap/extension-list");
+var import_extension_highlight2 = require("@tiptap/extension-highlight");
+var import_extension_typography2 = require("@tiptap/extension-typography");
+var import_extension_superscript2 = require("@tiptap/extension-superscript");
+var import_extension_subscript2 = require("@tiptap/extension-subscript");
+var import_extension_text_style2 = require("@tiptap/extension-text-style");
+var import_extension_color2 = require("@tiptap/extension-color");
+var import_extension_table2 = require("@tiptap/extension-table");
+var import_extension_table_row2 = require("@tiptap/extension-table-row");
+var import_extension_table_header2 = require("@tiptap/extension-table-header");
+var import_extension_table_cell2 = require("@tiptap/extension-table-cell");
+var import_tiptap_extension_resize_image2 = __toESM(require("tiptap-extension-resize-image"), 1);
+var contentExtensions = [
+  import_starter_kit2.default.configure({
+    horizontalRule: false
+  }),
+  HorizontalRule,
+  import_extension_text_align2.TextAlign.configure({ types: ["heading", "paragraph"] }),
+  import_extension_list2.TaskList,
+  import_extension_list2.TaskItem.configure({ nested: true }),
+  import_extension_highlight2.Highlight.configure({ multicolor: true }),
+  import_extension_typography2.Typography,
+  import_extension_superscript2.Superscript,
+  import_extension_subscript2.Subscript,
+  import_extension_text_style2.TextStyle,
+  import_extension_color2.Color,
+  import_extension_table2.Table.configure({ resizable: true }),
+  import_extension_table_row2.TableRow,
+  import_extension_table_header2.TableHeader,
+  import_extension_table_cell2.TableCell,
+  import_tiptap_extension_resize_image2.default.configure({ allowBase64: true }),
+  Callout
+];
+function generateEditorHTML(content) {
+  return (0, import_core2.generateHTML)(content, contentExtensions);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Callout,
   EliaEditor,
-  SimpleEditor
+  SimpleEditor,
+  contentExtensions,
+  generateEditorHTML
 });
 //# sourceMappingURL=index.cjs.map