refactor: Add EditorCore for isomorphic react-editor-js (#178)

Author: Jungwoo-An

.pnp.cjs

@@ -60,7 +60,7 @@ Allow all options of [editor-js](https://github.com/codex-team/editor.js/blob/ma
 | ------------------ | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | defaulltValue | OutputData                                                                         | Initial data when using editor js as [uncontrolled component](https://ko.reactjs.org/docs/uncontrolled-components.html). highly recommend it                                                                                                         |
 | value | OutputData                                                                         | data when using editor js as [controlled component](https://ko.reactjs.org/docs/forms.html#controlled-components). <br> ⚠️ Don't use it with onChange prop. Infinite loops can occur.                                                                                                         |
-| onInitialize            | (editorJS?: EditorJS) => void                                                   | Call after editor-js is initialized                                                                                       |
+| onInitialize            | (editorCore?: EditorCore) => void                                                   | Call after editor-js is initialized                                                                                       |
 
 ## 🧐 FAQ
 
@@ -148,17 +148,30 @@ It's simpleeeee
 
 ### How to access editor-js instance?
 
-You can access using instanceRef
+The editor-js instance is inaccessible. However, you can access the abstracted editor-js for isomorphic react-editor-js.
+
+```ts
+// abstracted editor-js interface
+interface EditorCore {
+  destroy(): Promise<void>
+
+  clear(): Promise<void>
+
+  save(): Promise<OutputData>
+
+  render(data: OutputData): Promise<void>
+}
+```
 
 ```tsx
-const editorJS = React.useRef(null)
+const editorCore = React.useRef(null)
 
 const handleInitialize = React.useCallback((instance) => {
-  editorJS.current = instance
+  editorCore.current = instance
 }, [])
 
 const handleSave = React.useCallback(() => {
-  const savedData = await editorJS.current.save();
+  const savedData = await editorCore.current.save();
 }, [])
 
 <ReactEditorJS onInitialize={handleInitialize} defaultValue={blocks} />

.yarn/install-state.gz

@@ -14,15 +14,18 @@
   },
   "peerDependencies": {
     "@editorjs/editorjs": "*",
+    "@editorjs/paragraph": "*",
     "react": "*"
   },
   "dependencies": {
     "@react-editor-js/core": "2.0.5"
   },
   "devDependencies": {
     "@editorjs/editorjs": "*",
+    "@editorjs/paragraph": "*",
     "@types/react": "*",
     "react": "*",
+    "tslib": "^2.3.1",
     "typescript": "^4.3.5"
   }
 }

README.md

@@ -4,12 +4,16 @@ import {
   ReactEditorJS,
 } from '@react-editor-js/core'
 
-import { ClientEditorJSFactory } from './ClientEditorJSFactory'
+import { ClientEditorCore } from './client-editor-core'
+import { EditorConfig } from '@editorjs/editorjs'
 
 export type Props = Omit<ReactEditorJSProps, 'factory'>
 
 function ReactEditorJSClient(props: Props) {
-  const factory = React.useMemo(() => new ClientEditorJSFactory(), [])
+  const factory = React.useCallback(
+    (config: EditorConfig) => new ClientEditorCore(config),
+    []
+  )
 
   return <ReactEditorJS factory={factory} {...props} />
 }

packages/@react-editor-js/client/package.json

@@ -0,0 +1,39 @@
+import EditorJS, { EditorConfig, OutputData } from '@editorjs/editorjs'
+import Paragraph from '@editorjs/paragraph'
+import { EditorCore } from '@react-editor-js/core'
+
+export class ClientEditorCore implements EditorCore {
+  private _editorJS: EditorJS
+
+  constructor({ tools, ...config }: EditorConfig) {
+    const extendTools = {
+      // default tools
+      paragraph: {
+        class: Paragraph,
+        inlineToolbar: true,
+      },
+      ...tools,
+    }
+
+    this._editorJS = new EditorJS({
+      tools: extendTools,
+      ...config,
+    })
+  }
+
+  public async clear() {
+    await this._editorJS.clear()
+  }
+
+  public async save() {
+    return this._editorJS.save()
+  }
+
+  public async destroy() {
+    await this._editorJS.destroy()
+  }
+
+  public async render(data: OutputData) {
+    await this._editorJS.render(data)
+  }
+}

packages/@react-editor-js/client/src/ClientEditorJSFactory.ts

@@ -14,12 +14,10 @@
   },
   "peerDependencies": {
     "@editorjs/editorjs": "*",
-    "@editorjs/paragraph": "*",
     "react": "*"
   },
   "devDependencies": {
     "@editorjs/editorjs": "*",
-    "@editorjs/paragraph": "*",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.3",
     "@types/react": "*",

packages/@react-editor-js/client/src/ReactEditorJSClient.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
-import { Props } from '@react-editor-js/core'
-import EditorJS from '@editorjs/editorjs'
-import Paragraph from '@editorjs/paragraph'
+
+import { Props } from './component-types'
+import { EditorCore } from './editor-core'
 
 function ReactEditorJS({
   factory,
   holder,
-  tools,
   defaultValue,
   children,
   value,
@@ -18,20 +17,10 @@ function ReactEditorJS({
     holder ?? `react-editor-js-${Date.now().toString(16)}`
   )
 
-  const editorJS = React.useRef<EditorJS | null>(null)
+  const editorJS = React.useRef<EditorCore | null>(null)
 
   React.useEffect(() => {
-    const extendTools = {
-      // default tools
-      paragraph: {
-        class: Paragraph,
-        inlineToolbar: true,
-      },
-      ...tools,
-    }
-
-    editorJS.current = factory.create({
-      tools: extendTools,
+    editorJS.current = factory({
       holder: memoizedHolder.current,
       ...(defaultValue && { data: defaultValue }),
       ...restProps,
@@ -46,7 +35,7 @@ function ReactEditorJS({
 
   React.useEffect(() => {
     if (value) {
-      editorJS.current?.blocks.render(value)
+      editorJS.current?.render(value)
     }
   }, [value])
 

packages/@react-editor-js/client/src/client-editor-core.ts

@@ -1,15 +1,16 @@
 import React from 'react'
-import EditorJS, { EditorConfig } from '@editorjs/editorjs'
+import { EditorConfig } from '@editorjs/editorjs'
 
-import { EditorJSFactory } from './factory'
+import { EditorCoreFactory } from './factory'
+import { EditorCore } from './editor-core'
 
 export interface Props extends Omit<EditorConfig, 'data'> {
-  factory: EditorJSFactory
+  factory: EditorCoreFactory
 
   holder?: string
   children?: React.ReactElement
   value?: EditorConfig['data']
   defaultValue?: EditorConfig['data']
 
-  onInitialize?: (editorJS: EditorJS) => void
+  onInitialize?: (core: EditorCore) => void
 }