feat(multiple-editor): ability to add multiple editor in one page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@van-ons/block-editor",
-  "version": "1.0.0",
-  "description": "A standalone implementation of the WordPress Block Editor",
+  "version": "1.0.0-dev",
+  "description": "A standalone implementation of the WordPress Block Editor with ability to create multi editor in one page",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "keywords": [
@@ -10,7 +10,7 @@
     "gutenberg",
     "block-editor"
   ],
-  "author": "Maurice Wijnia",
+  "author": "Ferry Stephanus Suwita",
   "license": "GPL-2.0-or-later",
   "types": "dist/index.d.ts",
   "files": [
@@ -24,42 +24,44 @@
     "prebuild": "npm run clean",
     "build": "npm run build:ts && npm run build:sass",
     "build:sass": "sass src/styles.scss dist/styles.css",
-    "build:ts": "tsc"
+    "build:ts": "tsc",
+    "prepare": "npm run build"
   },
   "dependencies": {
-    "@wordpress/api-fetch": "^6.6.0",
-    "@wordpress/base-styles": "^4.5.0",
-    "@wordpress/block-editor": "^9.1.0",
-    "@wordpress/block-library": "^7.6.0",
-    "@wordpress/blocks": "^11.8.0",
-    "@wordpress/components": "^19.11.0",
-    "@wordpress/data": "^6.9.0",
-    "@wordpress/element": "^4.7.0",
-    "@wordpress/format-library": "^3.7.0",
-    "@wordpress/hooks": "^3.9.0",
-    "@wordpress/keyboard-shortcuts": "^3.7.0",
-    "@wordpress/server-side-render": "^3.7.0",
-    "axios": "^0.21.1",
-    "uuid": "^8.3.2"
+    "@wordpress/api-fetch": "~6.48.0",
+    "@wordpress/base-styles": "~4.42.0",
+    "@wordpress/block-editor": "~12.19.0",
+    "@wordpress/block-library": "~8.28.0",
+    "@wordpress/blocks": "~12.28.0",
+    "@wordpress/components": "~26.0.0",
+    "@wordpress/data": "~9.21.0",
+    "@wordpress/element": "~5.28.0",
+    "@wordpress/format-library": "~4.28.0",
+    "@wordpress/hooks": "~3.51.0",
+    "@wordpress/keyboard-shortcuts": "~4.28.0",
+    "@wordpress/server-side-render": "~4.28.0",
+    "axios": "~1.6.7",
+    "immer": "~10.0.3",
+    "uuid": "~9.0.1"
   },
   "devDependencies": {
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.1.4",
-    "mini-css-extract-plugin": "^2.4.5",
-    "sass": "^1.43.4",
-    "sass-loader": "^12.3.0",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.5.2",
-    "vite": "^2.9.9",
-    "webpack": "^5.64.2",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-merge": "^5.8.0"
+    "css-loader": "~6.10.0",
+    "css-minimizer-webpack-plugin": "~6.0.0",
+    "mini-css-extract-plugin": "~2.8.0",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.1.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "webpack": "^5.90.1",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.10.0"
   },
   "peerDependencies": {
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
   },
   "repository": {
     "type": "git",

playground/index.html

@@ -21,15 +21,12 @@ <h1>Edit</h1>
     <form id="form">
         <input type="hidden" name="content" id="content">
         <br>
+        <input type="hidden" name="content2" id="content2">
+        <br>
         <button class="button">Save</button>
     </form>
 </div>
-<div id="app"></div>
-<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
-<script>
-    window.global = window
-</script>
+
 <script type="module" src="/main.js"></script>
 </body>
 </html>

playground/main.js

@@ -1,44 +1,49 @@
 import '../src/styles.scss'
 import * as BlockEditor from '../src/index'
 
-const { hooks } = BlockEditor.wordpress
-
+const {hooks} = BlockEditor.wordpress
 hooks.addFilter('blocks.registerBlockType', 'block-editor', (settings, blockName) => {
-    return settings
+  return settings
 })
 
 document.addEventListener('block-editor/init', e => {
-    console.log(e)
+  console.log('init', e)
 })
 
 const form = document.getElementById('form')
 form.addEventListener('submit', (e) => {
-    e.preventDefault()
-    console.log('submit', e)
+  e.preventDefault()
+  console.log('submit', e)
 })
 
 const element = document.getElementById('content');
 element.addEventListener('change', (e) => {
-    console.log(e.target.value)
+  console.log('element1 changed', e.target.value)
 })
 
 const settings = {
-    mediaUpload: ({filesList, onFileChange}) => {
-        const files = Array.from(filesList).map(window.URL.createObjectURL)
-
-        onFileChange(files)
-
-        setTimeout(() => {
-            const uploadedFiles = Array.from(filesList).map(file => {
-                return {
-                    id: file.name,
-                    name: file.name,
-                    url: `https://dummyimage.com/600x400/000/fff&text=${file.name}`
-                }
-            })
-            onFileChange(uploadedFiles)
-        }, 1000)
-    }
+  mediaUpload: ({filesList, onFileChange}) => {
+    const files = Array.from(filesList).map(window.URL.createObjectURL)
+
+    onFileChange(files)
+
+    setTimeout(() => {
+      const uploadedFiles = Array.from(filesList).map(file => {
+        return {
+          id: file.name,
+          name: file.name,
+          url: `https://dummyimage.com/600x400/000/fff&text=${file.name}`
+        }
+      })
+      onFileChange(uploadedFiles)
+    }, 1000)
+  }
 }
 BlockEditor.initializeEditor(element, settings);
 
+const element2 = document.getElementById('content2');
+element2.addEventListener('change', (e) => {
+  console.log('element2 changed', e.target.value)
+})
+
+BlockEditor.initializeEditor(element2, settings);

src/components/BlockEditor.tsx

@@ -41,7 +41,7 @@ const BlockEditor = ({ settings, onChange, blocks, undo, redo, canUndo, canRedo
 
         inputTimeout.current = setTimeout(() => {
             onChange(blocks)
-        }, 500)
+        }, 100)
     }
 
     const handleChange = (blocks: Block[]) => {