Merge pull request #32 from hunghg255/feat-export-word

docs/.vitepress/locale.ts

@@ -236,6 +236,14 @@ export function getLocaleConfig(lang: string) {
           text: 'ExportPdf',
           link: '/extensions/ExportPdf/index.md',
         },
+        {
+          text: 'ImportWord',
+          link: '/extensions/ImportWord/index.md',
+        },
+        {
+          text: 'ExportWord',
+          link: '/extensions/ExportWord/index.md',
+        },
       ],
     },
   ]

docs/extensions/ExportPdf/index.md

@@ -1,5 +1,9 @@
 ---
 description: Export PDF
+
+next:
+  text: Import Word
+  link: /extensions/ImportWord/index.md
 ---
 
 # Export PDF

docs/extensions/ExportWord/index.md

@@ -0,0 +1,19 @@
+---
+description: Export Word
+---
+
+# Export Word
+
+- Export Word Extension for Tiptap Editor.
+
+## Usage
+
+```tsx
+import { ExportWord } from 'reactjs-tiptap-editor'; // [!code ++]
+
+const extensions = [
+  ...,
+  // Import Extensions Here
+   ExportWord, // [!code ++]
+];
+```

docs/extensions/ImportWord/index.md

@@ -0,0 +1,23 @@
+---
+description: Import Word
+
+next:
+  text: ExportWord
+  link: /extensions/ExportWord/index.md
+---
+
+# Import Word
+
+- Import Word Extension for Tiptap Editor.
+
+## Usage
+
+```tsx
+import { ImportWord } from 'reactjs-tiptap-editor'; // [!code ++]
+
+const extensions = [
+  ...,
+  // Import Extensions Here
+   ImportWord, // [!code ++]
+];
+```

package.json

@@ -110,10 +110,13 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "deep-equal": "^2.2.3",
+    "docx": "^8.5.0",
     "echo-drag-handle-plugin": "^0.0.2",
+    "file-saver": "^2.0.5",
     "katex": "^0.16.11",
     "lodash-unified": "^1.0.3",
     "lucide-react": "^0.427.0",
+    "prosemirror-docx": "^0.2.0",
     "react-colorful": "^5.6.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "shiki": "^1.13.0",
@@ -125,6 +128,7 @@
     "@eslint-react/eslint-plugin": "^1.10.1",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/deep-equal": "^1.0.4",
+    "@types/file-saver": "^2.0.7",
     "@types/katex": "^0.16.7",
     "@types/node": "^22.3.0",
     "@types/react": "^18.3.3",

playground/src/App.tsx

@@ -12,6 +12,7 @@ import RichTextEditor, {
   ColumnToolbar,
   Emoji,
   ExportPdf,
+  ExportWord,
   FontFamily,
   FontSize,
   FormatPainter,
@@ -22,6 +23,7 @@ import RichTextEditor, {
   Iframe,
   Image,
   ImageUpload,
+  ImportWord,
   Indent,
   Italic,
   Katex,
@@ -65,6 +67,8 @@ const extensions = [
   Underline,
   Strike,
   MoreMark,
+  Katex,
+  Emoji,
   Color.configure({ spacer: true }),
   Highlight,
   BulletList,
@@ -108,10 +112,18 @@ const extensions = [
   CodeBlock.configure({ defaultTheme: 'dracula' }),
   ColumnToolbar,
   Table,
-  Iframe.configure({ spacer: true }),
-  Emoji,
-  Katex,
-  ExportPdf,
+  Iframe,
+  ExportPdf.configure({ spacer: true }),
+  ImportWord.configure({
+    upload: (files: File[]) => {
+      const f = files.map(file => ({
+        src: URL.createObjectURL(file),
+        alt: file.name,
+      }))
+      return Promise.resolve(f)
+    },
+  }),
+  ExportWord,
 ]
 
 const DEFAULT = `<h1 style="text-align: center">Rich Text Editor</h1><p>A modern WYSIWYG rich text editor based on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/scrumpy/tiptap">tiptap</a> and <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> for Reactjs</p><p></p><p style="text-align: center"></p><p style="text-align: center"><img height="auto" src="https://picsum.photos/1920/1080.webp?t=1" width="500"></p><p></p><div data-type="horizontalRule"><hr></div><h2>Demo</h2><p>👉<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://reactjs-tiptap-editor.vercel.app/">Demo</a></p><h2>Features</h2><ul><li><p>Use <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> components</p></li><li><p>Markdown support</p></li><li><p>TypeScript support</p></li><li><p>I18n support</p></li><li><p>React support</p></li><li><p>Slash Commands</p></li><li><p>Multi Column</p></li><li><p>TailwindCss</p></li><li><p>Support emoji</p></li><li><p>Support iframe</p></li></ul><h2>Installation</h2><pre><code  class="language-bash">pnpm add reactjs-tiptap-editor</code></pre><p></p>`