EditorCore API extension

README.md

@@ -7,34 +7,36 @@
 <div>
 
 [![npm version](https://badge.fury.io/js/react-editor-js.svg)](https://badge.fury.io/js/react-editor-js)
+
 ![LICENSE](https://img.shields.io/npm/l/react-editor-js?color=blue)
+
 [![Github Build Status](https://github.com/Jungwoo-An/react-editor-js/workflows/release/badge.svg)](https://github.com/Jungwoo-An/react-editor-js/actions)
 [![Semantic Release enabled](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 </div>
 
 ## 🍞 DEMO
 
-- [CodeSandbox](https://codesandbox.io/s/react-editor-js-v2-34bfl)
+* [CodeSandbox](https://codesandbox.io/s/react-editor-js-v2-34bfl)
 
 ## 🍀 Supported Official Plugin
 
-- [x] Paragraph (default)
-- [x] Embed
-- [x] Table
-- [x] List
-- [x] Warning
-- [x] Code
-- [x] Link
-- [x] Image
-- [x] Raw
-- [x] Header
-- [x] Quote
-- [x] Marker
-- [x] CheckList
-- [x] Delimiter
-- [x] InlineCode
-- [x] SimpleImage
+* [x] Paragraph (default)
+* [x] Embed
+* [x] Table
+* [x] List
+* [x] Warning
+* [x] Code
+* [x] Link
+* [x] Image
+* [x] Raw
+* [x] Header
+* [x] Quote
+* [x] Marker
+* [x] CheckList
+* [x] Delimiter
+* [x] InlineCode
+* [x] SimpleImage
 
 ## 🤟🏻 Getting Started
 
@@ -68,7 +70,7 @@ Allow all options of [editor-js](https://github.com/codex-team/editor.js/blob/ma
 
 There is an only Paragraph block already included in Editor.js. Probably you want to use several Block Tools that should be installed and connected.
 
-To add more Block Tools, simply add them to your repo and pass them as `tools`-property to your editor:
+To add more Block Tools, simply add them to your repo and pass them as `tools` -property to your editor:
 
 ```
 npm install --save-dev @editorjs/checklist
@@ -160,6 +162,26 @@ interface EditorCore {
   save(): Promise<OutputData>
 
   render(data: OutputData): Promise<void>
+
+  toggleReadOnly(): Promise<boolean>
+
+  insertBlock(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean): Promise<void>
+
+  updateBlock(id?: string, data?: BlockToolData): Promise<void>
+
+  deleteBlock(index?: number): Promise<void>
+
+  setToFirstBlock(position: string, offset: number): Promise<boolean>
+
+  setToLastBlock(position: string, offset: number): Promise<boolean>
+
+  setToBlock(index: number, position: string, offset: number): Promise<boolean>
+
+  focus(atEnd: boolean): Promise<void>
+
+  openToolbar(): Promise<void>
+
+  closeToolbar(): Promise<void>
 }
 ```
 

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

@@ -1,4 +1,4 @@
-import EditorJS, { EditorConfig, OutputData } from '@editorjs/editorjs'
+import EditorJS, { EditorConfig, OutputData, BlockToolData, ToolConfig } from '@editorjs/editorjs'
 import Paragraph from '@editorjs/paragraph'
 import { EditorCore } from '@react-editor-js/core'
 
@@ -36,4 +36,44 @@ export class ClientEditorCore implements EditorCore {
   public async render(data: OutputData) {
     await this._editorJS.render(data)
   }
+
+  public async toggleReadOnly() {
+    return this._editorJS.readOnly.toggle()
+  }
+
+  public async insertBlock(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean) {
+    return this._editorJS.blocks.insert(type, data, config, index, needToFocus)
+  }
+
+  public async updateBlock(id?: string, data?: BlockToolData) {
+    return this._editorJS.blocks.update(id, data)
+  }
+
+  public async deleteBlock(index?: number) {
+    return this._editorJS.blocks.delete(index)
+  }
+
+  public async setToFirstBlock(position: string = this._editorJS.Caret.positions.DEFAULT, offset: number = 0) {
+    return this._editorJS.caret.setToFirstBlock(position, offset)
+  }
+
+  public async setToLastBlock(position: string = this._editorJS.Caret.positions.DEFAULT, offset: number = 0) {
+    return this._editorJS.caret.setToLastBlock(position, offset)
+  }
+
+  public async setToBlock(index: number, position: string = this._editorJS.Caret.positions.DEFAULT, offset: number = 0) {
+    return this._editorJS.caret.setToBlock(index, position, offset)
+  }
+
+  public async focus(atEnd: boolean = false) {
+    return this._editorJS.caret.focus(atEnd)
+  }
+
+  public async openToolbar() {
+    return this._editorJS.toolbar.open()
+  }
+
+  public async closeToolbar() {
+    return this._editorJS.toolbar.close()
+  }
 }

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

@@ -1,4 +1,4 @@
-import { OutputData } from '@editorjs/editorjs'
+import { OutputData, BlockToolData, ToolConfig } from '@editorjs/editorjs'
 
 export interface EditorCore {
   destroy(): Promise<void>
@@ -8,4 +8,24 @@ export interface EditorCore {
   save(): Promise<OutputData>
 
   render(data: OutputData): Promise<void>
+
+  toggleReadOnly(): Promise<boolean>
+
+  insertBlock(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean): Promise<void>
+
+  updateBlock(id?: string, data?: BlockToolData): Promise<void>
+
+  deleteBlock(index?: number): Promise<void>
+
+  setToFirstBlock(position: string, offset: number): Promise<boolean>
+
+  setToLastBlock(position: string, offset: number): Promise<boolean>
+
+  setToBlock(index: number, position: string, offset: number): Promise<boolean>
+
+  focus(atEnd: boolean): Promise<void>
+
+  openToolbar(): Promise<void>
+
+  closeToolbar(): Promise<void>
 }

packages/@react-editor-js/core/tests/TestEditorCore.ts

@@ -5,12 +5,18 @@ import { EditorCore } from '../src'
 export class TestEditorCore implements EditorCore {
   private _data: OutputData | null = null
 
+  private _readOnly: boolean = false
+
   constructor() {}
 
   public get data() {
     return this._data
   }
 
+  public get readOnly() {
+    return this._readOnly
+  }
+
   public async clear() {}
 
   public async save() {
@@ -24,4 +30,33 @@ export class TestEditorCore implements EditorCore {
   public async render(data: OutputData) {
     this._data = data
   }
+
+  public async toggleReadOnly() {
+    this._readOnly = !this._readOnly
+    return this._readOnly
+  }
+
+  public async insertBlock() {}
+
+  public async updateBlock() {}
+
+  public async deleteBlock() {}
+
+  public async setToFirstBlock() {
+    return false
+  }
+
+  public async setToLastBlock() {
+    return false
+  }
+
+  public async setToBlock() {
+    return false
+  }
+
+  public async focus() {}
+
+  public async openToolbar() {}
+
+  public async closeToolbar() {}
 }

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

@@ -19,4 +19,32 @@ export class ServerEditorCore implements EditorCore {
   public async destroy() {}
 
   public async render() {}
+
+  public async toggleReadOnly() {
+    return false
+  }
+
+  public async insertBlock() {}
+
+  public async updateBlock() {}
+
+  public async deleteBlock() {}
+
+  public async setToFirstBlock() {
+    return false
+  }
+
+  public async setToLastBlock() {
+    return false
+  }
+
+  public async setToBlock() {
+    return false
+  }
+
+  public async focus() {}
+
+  public async openToolbar() {}
+
+  public async closeToolbar() {}
 }

yarn.lock

@@ -821,13 +821,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-editor-js/client@2.0.5, @react-editor-js/client@workspace:packages/@react-editor-js/client":
+"@react-editor-js/client@2.0.6, @react-editor-js/client@workspace:packages/@react-editor-js/client":
   version: 0.0.0-use.local
   resolution: "@react-editor-js/client@workspace:packages/@react-editor-js/client"
   dependencies:
     "@editorjs/editorjs": "*"
     "@editorjs/paragraph": "*"
-    "@react-editor-js/core": 2.0.5
+    "@react-editor-js/core": 2.0.6
     "@types/react": "*"
     react: "*"
     tslib: ^2.3.1
@@ -839,7 +839,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-editor-js/core@2.0.5, @react-editor-js/core@workspace:packages/@react-editor-js/core":
+"@react-editor-js/core@2.0.6, @react-editor-js/core@workspace:packages/@react-editor-js/core":
   version: 0.0.0-use.local
   resolution: "@react-editor-js/core@workspace:packages/@react-editor-js/core"
   dependencies:
@@ -857,21 +857,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@react-editor-js/server@2.0.5, @react-editor-js/server@workspace:packages/@react-editor-js/server":
+"@react-editor-js/server@2.0.6, @react-editor-js/server@workspace:packages/@react-editor-js/server":
   version: 0.0.0-use.local
   resolution: "@react-editor-js/server@workspace:packages/@react-editor-js/server"
   dependencies:
     "@editorjs/editorjs": "*"
     "@editorjs/paragraph": "*"
-    "@react-editor-js/core": 2.0.5
+    "@react-editor-js/core": 2.0.6
     "@types/react": "*"
     react: "*"
     tslib: ^2.3.1
     typescript: ^4.3.5
   peerDependencies:
     "@editorjs/editorjs": "*"
     "@editorjs/paragraph": "*"
-    "@react-editor-js/core": 2.0.5
+    "@react-editor-js/core": 2.0.6
     react: "*"
   languageName: unknown
   linkType: soft
@@ -5803,14 +5803,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-editor-js@workspace:packages/react-editor-js"
   dependencies:
-    "@react-editor-js/client": 2.0.5
-    "@react-editor-js/server": 2.0.5
+    "@react-editor-js/client": 2.0.6
+    "@react-editor-js/server": 2.0.6
     "@types/node": ^16.11.6
     tslib: ^2.3.1
     typescript: ^4.3.5
   peerDependencies:
-    "@react-editor-js/client": 2.0.5
-    "@react-editor-js/server": 2.0.5
+    "@react-editor-js/client": 2.0.6
+    "@react-editor-js/server": 2.0.6
   languageName: unknown
   linkType: soft