feat: image inline, refactor video upload

docs/.vitepress/locale.ts

@@ -136,10 +136,6 @@ export function getLocaleConfig(lang: string) {
           text: 'Image',
           link: '/extensions/Image/index.md',
         },
-        {
-          text: 'ImageUpload',
-          link: '/extensions/ImageUpload/index.md',
-        },
         {
           text: 'Indent',
           link: '/extensions/Indent/index.md',
@@ -216,10 +212,6 @@ export function getLocaleConfig(lang: string) {
           text: 'Video',
           link: '/extensions/Video/index.md',
         },
-        {
-          text: 'VideoUpload',
-          link: '/extensions/VideoUpload/index.md',
-        },
         {
           text: 'Search And Replace',
           link: '/extensions/SearchAndReplace/index.md',

docs/extensions/Image/index.md

@@ -2,8 +2,8 @@
 description: Image
 
 next:
-  text: ImageUpload
-  link: /extensions/ImageUpload/index.md
+  text: Indent
+  link: /extensions/Indent/index.md
 ---
 
 # Image
@@ -18,7 +18,15 @@ import { Image } from 'reactjs-tiptap-editor'; // [!code ++]
 const extensions = [
   ...,
   // Import Extensions Here
-  Image // [!code ++]
+  Image.configure({// [!code ++]
+    upload: (files: File) => {// [!code ++]
+      return new Promise((resolve) => {// [!code ++]
+        setTimeout(() => {// [!code ++]
+          resolve(URL.createObjectURL(files))// [!code ++]
+        }, 500)// [!code ++]
+      })// [!code ++]
+    },// [!code ++]
+  }),// [!code ++]
 ];
 ```
 

docs/extensions/Video/index.md

@@ -2,8 +2,8 @@
 description: Video
 
 next:
-  text: VideoUpload
-  link: /extensions/VideoUpload/index.md
+  text: SearchAndReplace
+  link: /extensions/SearchAndReplace/index.md
 ---
 
 # Video
@@ -18,6 +18,14 @@ import { Video } from 'reactjs-tiptap-editor'; // [!code ++]
 const extensions = [
   ...,
   // Import Extensions Here
-  Video // [!code ++]
+  Video.configure({// [!code ++]
+    upload: (files: File[]) => {// [!code ++]
+      const f = files.map(file => ({// [!code ++]
+        src: URL.createObjectURL(file),// [!code ++]
+        alt: file.name,// [!code ++]
+      }))// [!code ++]
+      return Promise.resolve(f)// [!code ++]
+    },// [!code ++]
+  }), // [!code ++]
 ];
 ```

package.json

@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "^0.17.6",
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
@@ -129,7 +130,8 @@
     "shiki": "^1.22.0",
     "svg64": "^2.0.0",
     "tippy.js": "^6.3.7",
-    "valtio": "^1.13.2"
+    "valtio": "^1.13.2",
+    "y-prosemirror": "^1.2.12"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.27.3",

playground/src/App.tsx

@@ -25,7 +25,6 @@ import RichTextEditor, {
   Iframe,
   Image,
   ImageGif,
-  ImageUpload,
   ImportWord,
   Indent,
   Italic,
@@ -46,7 +45,6 @@ import RichTextEditor, {
   TextDirection,
   Underline,
   Video,
-  VideoUpload,
   locale,
 } from 'reactjs-tiptap-editor'
 
@@ -102,8 +100,7 @@ const extensions = [
     },
   }),
   Link,
-  Image,
-  ImageUpload.configure({
+  Image.configure({
     upload: (files: File) => {
       return new Promise((resolve) => {
         setTimeout(() => {
@@ -112,8 +109,7 @@ const extensions = [
       })
     },
   }),
-  Video,
-  VideoUpload.configure({
+  Video.configure({
     upload: (files: File[]) => {
       const f = files.map(file => ({
         src: URL.createObjectURL(file),
@@ -179,7 +175,7 @@ const extensions = [
   }),
 ]
 
-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><div style="text-align: center;" class="image"><img height="auto" src="https://picsum.photos/1920/1080.webp?t=1" align="center" width="500"></div><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 (vi, en, zh, pt)</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>`
+const DEFAULT = ``
 
 function debounce(func: any, wait: number) {
   let timeout: NodeJS.Timeout