feature(api): blocks update method added (#1687)

docs/CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 2.22.0
 
 - `New` - `onChange` callback now receive Block API object of affected block
+- `New` - API method `blocks.update(id, data)` added.
 
 ### 2.21.0
 

docs/api.md

@@ -77,6 +77,8 @@ use 'move' instead)
 
 `insert(type?: string, data?: BlockToolData, config?: ToolConfig, index?: number, needToFocus?: boolean)` - insert new Block with passed parameters
 
+`update(id: string, data: BlockToolData)` - updates data for the block with passed id
+
 #### SanitizerAPI
 
 `clean(taintString, config)` - method uses HTMLJanitor to clean taint string.

src/components/modules/api/blocks.ts

@@ -29,6 +29,7 @@ export default class BlocksAPI extends Module {
       stretchBlock: (index: number, status = true): void => this.stretchBlock(index, status),
       insertNewBlock: (): void => this.insertNewBlock(),
       insert: this.insert,
+      update: this.update,
     };
   }
 
@@ -247,4 +248,32 @@ export default class BlocksAPI extends Module {
       'Use blocks.insert() instead.', 'warn');
     this.insert();
   }
+
+  /**
+   * Updates block data by id
+   *
+   * @param id - id of the block to update
+   * @param data - the new data
+   */
+  public update = (id: string, data: BlockToolData): void => {
+    const { BlockManager } = this.Editor;
+    const block = BlockManager.getBlockById(id);
+
+    if (!block) {
+      _.log('blocks.update(): Block with passed id was not found', 'warn');
+
+      return;
+    }
+
+    const blockIndex = BlockManager.getBlockIndex(block);
+
+    BlockManager.insert({
+      id: block.id,
+      tool: block.name,
+      data,
+      index: blockIndex,
+      replace: true,
+      tunes: block.tunes,
+    });
+  }
 }

src/components/modules/blockManager.ts

@@ -539,6 +539,15 @@ export default class BlockManager extends Module {
     return this._blocks[index];
   }
 
+  /**
+   * Returns an index for passed Block
+   *
+   * @param block - block to find index
+   */
+  public getBlockIndex(block: Block): number {
+    return this._blocks.indexOf(block);
+  }
+
   /**
    * Returns the Block by passed id
    *
@@ -546,7 +555,7 @@ export default class BlockManager extends Module {
    *
    * @returns {Block}
    */
-  public getBlockById(id): Block {
+  public getBlockById(id): Block | undefined {
     return this._blocks.array.find(block => block.id === id);
   }
 

test/cypress/tests/api/blocks.spec.ts

@@ -51,4 +51,70 @@ describe('api.blocks', () => {
       });
     });
   });
+
+  /**
+   * api.blocks.update(id, newData)
+   */
+  describe('.update()', () => {
+    /**
+     * Check if block is updated in DOM
+     */
+    it('should update block in DOM', () => {
+      cy.get('@editorInstance').then(async (editor: any) => {
+        const idToUpdate = firstBlock.id;
+        const newBlockData = {
+          text: 'Updated text',
+        };
+
+        editor.blocks.update(idToUpdate, newBlockData);
+
+        cy.get('[data-cy=editorjs]')
+          .get('div.ce-block')
+          .invoke('text')
+          .then(blockText => {
+            expect(blockText).to.be.eq(newBlockData.text);
+          });
+      });
+    });
+
+    /**
+     * Check if block's data is updated after saving
+     */
+    it('should update block in saved data', () => {
+      cy.get('@editorInstance').then(async (editor: any) => {
+        const idToUpdate = firstBlock.id;
+        const newBlockData = {
+          text: 'Updated text',
+        };
+
+        editor.blocks.update(idToUpdate, newBlockData);
+
+        const output = await (editor as any).save();
+        const text = output.blocks[0].data.text;
+
+        expect(text).to.be.eq(newBlockData.text);
+      });
+    });
+
+    /**
+     * When incorrect id passed, editor should not update any block
+     */
+    it('shouldn\'t update any block if not-existed id passed', () => {
+      cy.get('@editorInstance').then(async (editor: any) => {
+        const idToUpdate = 'wrong-id-123';
+        const newBlockData = {
+          text: 'Updated text',
+        };
+
+        editor.blocks.update(idToUpdate, newBlockData);
+
+        cy.get('[data-cy=editorjs]')
+          .get('div.ce-block')
+          .invoke('text')
+          .then(blockText => {
+            expect(blockText).to.be.eq(firstBlock.data.text);
+          });
+      });
+    });
+  });
 });

types/api/blocks.d.ts

@@ -105,4 +105,12 @@ export interface Blocks {
     needToFocus?: boolean,
   ): void;
 
+
+  /**
+   * Updates block data by id
+   *
+   * @param id - id of the block to update
+   * @param data - the new data
+   */
+  update(id: string, data: BlockToolData): void;
 }