feat: Add unique ids for each block

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

example/example-dev.html

@@ -192,6 +192,7 @@
       data: {
         blocks: [
           {
+            id: "1bfa3a88-a6e3-4a13-8553-d8c85bf2497b",
             type: "header",
             data: {
               text: "Editor.js",

src/components/block/api.ts

@@ -14,6 +14,14 @@ function BlockAPI(
   block: Block
 ): void {
   const blockAPI: BlockAPIInterface = {
+    /**
+     * Tool id
+     *
+     * @returns {string}
+     */
+    get id(): string {
+      return block.id;
+    },
     /**
      * Tool name
      *

src/components/block/index.ts

@@ -27,6 +27,11 @@ import SelectionUtils from '../selection';
  * Interface describes Block class constructor argument
  */
 interface BlockConstructorOptions {
+  /**
+   * Tool's id
+   */
+  id: string;
+
   /**
    * Tool's name
    */
@@ -107,6 +112,11 @@ export default class Block {
     };
   }
 
+  /**
+   * unique identifier
+   */
+  public id: string;
+
   /**
    * Block Tool`s name
    */
@@ -199,6 +209,7 @@ export default class Block {
 
   /**
    * @param {object} options - block constructor options
+   * @param {string} options.id - Tool's unique id
    * @param {string} options.name - Tool name that passed on initialization
    * @param {BlockToolData} options.data - Tool's initial data
    * @param {BlockToolConstructable} options.Tool — Tool's class
@@ -207,13 +218,15 @@ export default class Block {
    * @param {boolean} options.readOnly - Read-Only flag
    */
   constructor({
+    id,
     name,
     data,
     Tool,
     settings,
     api,
     readOnly,
   }: BlockConstructorOptions) {
+    this.id = id;
     this.name = name;
     this.class = Tool;
     this.settings = settings;
@@ -550,6 +563,7 @@ export default class Block {
         measuringEnd = window.performance.now();
 
         return {
+          id: this.id,
           tool: this.name,
           data: finishedExtraction,
           time: measuringEnd - measuringStart,

src/components/core.ts

@@ -174,6 +174,7 @@ export default class Core {
      * @type {{type: (*), data: {text: null}}}
      */
     const defaultBlockData = {
+      id: _.generateUuidv4(),
       type: this.config.defaultBlock,
       data: {},
     };

src/components/modules/blockManager.ts

@@ -219,11 +219,12 @@ export default class BlockManager extends Module {
    *
    * @returns {Block}
    */
-  public composeBlock({ tool, data = {} }: {tool: string; data?: BlockToolData}): Block {
+  public composeBlock({ tool, id = _.generateUuidv4(), data = {} }: {tool: string; id?: string; data?: BlockToolData}): Block {
     const readOnly = this.Editor.ReadOnly.isEnabled;
     const settings = this.Editor.Tools.getToolSettings(tool);
     const Tool = this.Editor.Tools.available[tool] as BlockToolConstructable;
     const block = new Block({
+      id,
       name: tool,
       data,
       Tool,
@@ -252,12 +253,14 @@ export default class BlockManager extends Module {
    * @returns {Block}
    */
   public insert({
+    id = _.generateUuidv4(),
     tool = this.config.defaultBlock,
     data = {},
     index,
     needToFocus = true,
     replace = false,
   }: {
+    id?: string;
     tool?: string;
     data?: BlockToolData;
     index?: number;
@@ -271,6 +274,7 @@ export default class BlockManager extends Module {
     }
 
     const block = this.composeBlock({
+      id,
       tool,
       data,
     });

src/components/modules/paste.ts

@@ -759,7 +759,7 @@ export default class Paste extends Module {
    *
    * @returns {void}
    */
-  private insertEditorJSData(blocks: Array<Pick<SavedData, 'data' | 'tool'>>): void {
+  private insertEditorJSData(blocks: Array<Pick<SavedData, 'id' | 'data' | 'tool'>>): void {
     const { BlockManager, Sanitizer, Tools } = this.Editor;
     const sanitizedBlocks = Sanitizer.sanitizeBlocks(blocks);
 

src/components/modules/renderer.ts

@@ -22,12 +22,14 @@ export default class Renderer extends Module {
    *
    * blocks: [
    *   {
+   *     id   : 'eab2b1cd-a3d3-48d1-aadb-bd821d8ec871',
    *     type : 'paragraph',
    *     data : {
    *       text : 'Hello from Codex!'
    *     }
    *   },
    *   {
+   *     id   : '391a1351-6ec6-473b-8b99-b20507e2d4c2',
    *     type : 'paragraph',
    *     data : {
    *       text : 'Leave feedback if you like it!'
@@ -63,12 +65,14 @@ export default class Renderer extends Module {
    */
   public async insertBlock(item: OutputBlockData): Promise<void> {
     const { Tools, BlockManager } = this.Editor;
+    const id = item.id;
     const tool = item.type;
     const data = item.data;
 
     if (tool in Tools.available) {
       try {
         BlockManager.insert({
+          id,
           tool,
           data,
         });
@@ -80,6 +84,7 @@ export default class Renderer extends Module {
       /** If Tool is unavailable, create stub Block for it */
       const stubData = {
         savedData: {
+          id,
           type: tool,
           data,
         },
@@ -94,6 +99,7 @@ export default class Renderer extends Module {
       }
 
       const stub = BlockManager.insert({
+        id,
         tool: Tools.stubTool,
         data: stubData,
       });

src/components/modules/saver.ts

@@ -78,7 +78,7 @@ export default class Saver extends Module {
 
     _.log('[Editor.js saving]:', 'groupCollapsed');
 
-    allExtractedData.forEach(({ tool, data, time, isValid }) => {
+    allExtractedData.forEach(({ id, tool, data, time, isValid }) => {
       totalTime += time;
 
       /**
@@ -105,6 +105,7 @@ export default class Saver extends Module {
       }
 
       blocks.push({
+        id,
         type: tool,
         data,
       });

src/components/utils.ts

@@ -607,6 +607,21 @@ export function getValidUrl(url: string): string {
   }
 }
 
+/**
+ * Creates a UUID v4 version
+ *
+ * @returns {string}
+ */
+export function generateUuidv4(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    // tslint:disable: no-bitwise
+    // tslint:disable-next-line: triple-equals
+    const r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+
+    return v.toString(16);
+  });
+}
+
 /**
  * Opens new Tab with passed URL
  *

types/api/block.d.ts

@@ -5,6 +5,11 @@ import {SavedData} from '../data-formats';
  * @interface BlockAPI Describes Block API methods and properties
  */
 export interface BlockAPI {
+  /**
+   * Tool name
+   */
+  readonly id: string;
+
   /**
    * Tool name
    */

types/data-formats/block-data.d.ts

@@ -4,6 +4,7 @@ import {BlockToolData} from '../tools';
  * Tool's saved data
  */
 export interface SavedData {
+  id: string;
   tool: string;
   data: BlockToolData;
   time: number;
@@ -13,6 +14,7 @@ export interface SavedData {
  * Tool's data after validation
  */
 export interface ValidatedData {
+  id?: string;
   tool?: string;
   data?: BlockToolData;
   time?: number;

types/data-formats/output-data.d.ts

@@ -4,6 +4,10 @@ import {BlockToolData} from '../tools';
  * Output of one Tool
  */
 export interface OutputBlockData {
+  /**
+   * Unique Id of the block
+   */
+  id?: string;
   /**
    * Too type
    */