From a6709444df572dae187a9022394051417b092176 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Fri, 30 Aug 2024 23:38:57 +0300
Subject: [PATCH 1/6] playground uses editor

---
 packages/core/src/index.ts                    |   8 +-
 .../core/src/utils/composeDataFromVersion2.ts |  10 +-
 .../src/BlockToolAdapter/index.ts             |   3 +-
 packages/model/src/EditorJSModel.spec.ts      |   1 +
 packages/model/src/EditorJSModel.ts           |   9 ++
 packages/playground/src/App.vue               | 138 +++++++-----------
 packages/playground/src/style.css             |   3 +-
 7 files changed, 82 insertions(+), 90 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 6b05ef52..e3ff1cd1 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,4 +1,4 @@
-import { EditorJSModel } from '@editorjs/model';
+import { EditorJSModel, EventType } from '@editorjs/model';
 import type { ContainerInstance } from 'typedi';
 import { Container } from 'typedi';
 import { composeDataFromVersion2 } from './utils/composeDataFromVersion2.js';
@@ -94,6 +94,12 @@ export default class Core {
 
     this.#iocContainer.get(BlocksManager);
 
+    if (config.onModelUpdate !== undefined) {
+      this.#model.addEventListener(EventType.Changed, () => {
+        config.onModelUpdate?.(this.#model);
+      });
+    }
+
     this.#model.initializeDocument({ blocks });
   }
 
diff --git a/packages/core/src/utils/composeDataFromVersion2.ts b/packages/core/src/utils/composeDataFromVersion2.ts
index 3249c2ce..972a8f1c 100644
--- a/packages/core/src/utils/composeDataFromVersion2.ts
+++ b/packages/core/src/utils/composeDataFromVersion2.ts
@@ -2,6 +2,14 @@ import type { OutputData } from '@editorjs/editorjs';
 import type { InlineFragment } from '@editorjs/model';
 import { createInlineToolData, createInlineToolName, TextNode, ValueNode, type BlockNodeSerialized } from '@editorjs/model';
 
+/**
+ * Removes HTML tags from the input string
+ * @param input - any string with HTML tags like '<b>bold</b> <a href="https://editorjs.io">link</a>'
+ */
+function stripTags(input: string): string {
+  return input.replace(/<\/?[^>]+(>|$)/g, '');
+}
+
 /**
  * Extracts inline fragments from the HTML string
  * @param html - any html string like '<b>bold</b> <a href="https://editorjs.io">link</a>'
@@ -97,7 +105,7 @@ export function composeDataFromVersion2(data: OutputData): {
               if (typeof value === 'string') {
                 const fragments = extractFragments(value);
                 const textNode = new TextNode({
-                  value,
+                  value: stripTags(value),
                   fragments,
                 });
 
diff --git a/packages/dom-adapters/src/BlockToolAdapter/index.ts b/packages/dom-adapters/src/BlockToolAdapter/index.ts
index 68f3c5b5..362d6441 100644
--- a/packages/dom-adapters/src/BlockToolAdapter/index.ts
+++ b/packages/dom-adapters/src/BlockToolAdapter/index.ts
@@ -91,8 +91,7 @@ export class BlockToolAdapter implements BlockToolAdapterInterface {
     const fragments = this.#model.getFragments(this.#blockIndex, key);
 
     fragments.forEach(fragment => {
-      console.log('fragment', fragment);
-      // this.#formattingAdapter.formatElementContent(input, fragment);
+      this.#formattingAdapter.formatElementContent(input, fragment);
     });
   }
 
diff --git a/packages/model/src/EditorJSModel.spec.ts b/packages/model/src/EditorJSModel.spec.ts
index 7bd1af8b..6ac730a9 100644
--- a/packages/model/src/EditorJSModel.spec.ts
+++ b/packages/model/src/EditorJSModel.spec.ts
@@ -23,6 +23,7 @@ describe('EditorJSModel', () => {
       'createCaret',
       'updateCaret',
       'removeCaret',
+      'devModeGetDocument',
     ];
     const ownProperties = Object.getOwnPropertyNames(EditorJSModel.prototype);
 
diff --git a/packages/model/src/EditorJSModel.ts b/packages/model/src/EditorJSModel.ts
index f90ab397..6a8bd13f 100644
--- a/packages/model/src/EditorJSModel.ts
+++ b/packages/model/src/EditorJSModel.ts
@@ -283,6 +283,15 @@ export class EditorJSModel extends EventBus {
     return this.#document.getFragments(...parameters);
   }
 
+  /**
+   * Exposing document for dev-tools
+   * 
+   * USE ONLY FOR DEV PURPOSES
+   */
+  public devModeGetDocument(): EditorDocument {
+    return this.#document;
+  }
+
   /**
    * Listens to BlockNode events and bubbles re-emits them from the EditorJSModel instance
    *
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 0c8d0ccc..b6343a7b 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,61 +1,21 @@
 <script setup lang="ts">
 import CaretIndex from '@/components/CaretIndex.vue';
-import { BlockToolAdapter, CaretAdapter, FormattingAdapter } from '@editorjs/dom-adapters';
+
 import { EditorDocument, EditorJSModel, EventType } from '@editorjs/model';
 import Core from '@editorjs/core';
 import { ref, onMounted } from 'vue';
-import { Input, Node } from './components';
+import { Node } from './components';
 
 /**
- * Every instance here will be created by Editor.js core
+ * Editor document for visualizing
  */
-const model = new EditorJSModel();
-
-model.initializeDocument({
-  blocks: [
-    {
-      name: 'paragraph',
-      data: {
-        text1: {
-          value: 'This is contenteditable',
-          $t: 't',
-        },
-        text2: {
-          value: 'This is input element',
-          $t: 't',
-        },
-      },
-    },
-    {
-      name: 'paragraph',
-      data: {
-        text2: {
-          value: 'This is textarea element',
-          $t: 't',
-        },
-      },
-    },
-  ],
-});
-const editorDocument = ref(new EditorDocument());
+const editorDocument = ref<EditorDocument | null>(null);
 
-editorDocument.value.initialize(model.serialized.blocks);
-
-const caretAdapter = new CaretAdapter(window.document.body, model);
 /**
- * Block Tool Adapter instance will be passed to a Tool constructor by Editor.js core
+ * Serialized document value
  */
-const formattingAdapter = new FormattingAdapter(model, caretAdapter);
-const blockToolAdapter = new BlockToolAdapter(model, caretAdapter, 0, formattingAdapter);
-const anotherBlockToolAdapter = new BlockToolAdapter(model, caretAdapter, 1, formattingAdapter);
+const serialized = ref<EditorDocument['serialized'] | null>(null);
 
-const serialized = ref(model.serialized);
-
-model.addEventListener(EventType.Changed, () => {
-  serialized.value = model.serialized;
-  editorDocument.value = new EditorDocument();
-  editorDocument.value.initialize(model.serialized.blocks);
-});
 
 onMounted(() => {
   new Core({
@@ -68,6 +28,10 @@ onMounted(() => {
         },
       } ],
     },
+    onModelUpdate: (model: EditorJSModel) => {
+      serialized.value = model.serialized;
+      editorDocument.value = model.devModeGetDocument();
+    },
   });
 });
 
@@ -84,55 +48,47 @@ onMounted(() => {
       >
       Editor.js Document Playground
     </div>
-  </div>
-  <div :class="$style.body">
-    <div>
-      <div
-        id="editorjs"
-        :class="$style.editor"
-      />
-    </div>
-    <div :class="$style.playground">
-      <CaretIndex :model="model" />
-      <Input
-        :block-tool-adapter="blockToolAdapter"
-        type="contenteditable"
-        name="text1"
-        value="This is contenteditable"
-      />
-      <Input
-        :block-tool-adapter="blockToolAdapter"
-        type="input"
-        name="text2"
-        value="This is input element"
-      />
-      <Input
-        :block-tool-adapter="anotherBlockToolAdapter"
-        type="textarea"
-        name="text2"
-        value="This is textarea element"
-      />
-      <pre>{{ serialized }}</pre>
-    </div>
-    <div :class="$style.output">
-      <Node
-        :node="editorDocument"
-      />
+  
+    <div :class="$style.body">
+      <div>
+          <h2 :class="$style.sectionHeading">
+            Editor
+          </h2>
+        <div
+          id="editorjs"
+          :class="$style.editor"
+        />
+      </div>
+      <div :class="$style.playground">
+        <h2 :class="$style.sectionHeading">
+            Model Serialized
+        </h2>
+        <!-- <CaretIndex :model="model" /> -->
+        <pre v-if="serialized">{{ serialized }}</pre>
+      </div>
+      <div :class="$style.output">
+        <h2 :class="$style.sectionHeading">
+          Model
+        </h2>
+        <Node
+          v-if="editorDocument"
+          :node="editorDocument"
+        />
+      </div>
     </div>
-  </div>
+</div>
 </template>
 
 <style module>
 
 .container {
-  height: 100%;
 }
 
 .body {
   padding: 16px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-gap: 16px;
+  grid-gap: 20px;
 }
 
 .playground {
@@ -149,12 +105,14 @@ onMounted(() => {
 
 .header {
   font-weight: 500;
-  padding: 8px 16px;
+  padding: 12px 16px;
   display: flex;
   align-items: center;
   position: sticky;
   top: 0;
-  background: var(--background);
+  -webkit-backdrop-filter: blur(30px);
+  backdrop-filter: blur(30px);
+  z-index: 2;
 }
 
 .header img {
@@ -173,4 +131,14 @@ onMounted(() => {
   border-radius: 8px;
   padding: 10px;
 }
+
+.sectionHeading {
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 20px;
+  margin-top: 0;
+  font-family: var(--rounded-family);
+  color: var(--foreground-secondary);
+  text-transform: uppercase;
+}
 </style>
diff --git a/packages/playground/src/style.css b/packages/playground/src/style.css
index f328f1a7..c0490341 100644
--- a/packages/playground/src/style.css
+++ b/packages/playground/src/style.css
@@ -4,6 +4,7 @@
 
   --background: #242424;
   --foreground: rgba(255, 255, 255, 0.87);
+  --foreground-secondary: rgba(255, 255, 255, 0.6);
   
   font-family: var(--family);
   font-weight: 400;
@@ -31,7 +32,7 @@ body {
 #app {
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: 1fr;
+  grid-template-rows: min-content 1fr;
   min-height: 100%;
   width: 100%;
 

From 45c3f6bef36b40136efa3284cd53cf326385af69 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Sat, 31 Aug 2024 01:03:54 +0300
Subject: [PATCH 2/6] model update and tests

---
 packages/core/src/index.ts                    | 26 ++++++++------
 packages/core/src/tools/ToolsManager.ts       |  4 +++
 .../src/BlockToolAdapter/index.ts             |  3 ++
 .../src/FormattingAdapter/index.ts            | 26 +++++++++-----
 packages/model/src/EditorJSModel.spec.ts      |  1 +
 packages/model/src/EditorJSModel.ts           | 13 ++++++-
 .../src/entities/BlockNode/BlockNode.spec.ts  | 27 +++++++++++++-
 .../src/entities/BlockNode/__mocks__/index.ts |  7 ++++
 .../model/src/entities/BlockNode/index.ts     | 13 +++++++
 .../EditorDocument/EditorDocument.spec.ts     | 36 +++++++++++++++++++
 .../src/entities/EditorDocument/index.ts      | 12 +++++++
 packages/playground/src/App.vue               | 21 ++++++-----
 12 files changed, 159 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index cfd65082..f5e5ed52 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -62,8 +62,10 @@ export default class Core {
    * Inline toolbar is responsible for handling selection changes
    * When model selection changes, it determines, whenever to show toolbar element,
    * Which calls apply format method of the adapter
+   *
+   * null when inline toolbar is not initialized
    */
-  #inlineToolbar: InlineToolbar;
+  #inlineToolbar: InlineToolbar | null = null;
 
   /**
    * @param config - Editor configuration
@@ -92,11 +94,6 @@ export default class Core {
     this.#formattingAdapter = new FormattingAdapter(this.#model, this.#caretAdapter);
     this.#iocContainer.set(FormattingAdapter, this.#formattingAdapter);
 
-    this.#inlineToolbar = new InlineToolbar(this.#model, this.#formattingAdapter, this.#toolsManager.inlineTools, this.#config.holder);
-    this.#iocContainer.set(InlineToolbar, this.#inlineToolbar);
-
-    this.#prepareUI();
-
     this.#iocContainer.get(BlocksManager);
 
     if (config.onModelUpdate !== undefined) {
@@ -104,12 +101,19 @@ export default class Core {
         config.onModelUpdate?.(this.#model);
       });
     }
-    /**
-     * @todo avait when isReady API is implemented
-     */
-    void this.#toolsManager.prepareTools();
 
-    this.#model.initializeDocument({ blocks });
+    this.#toolsManager.prepareTools()
+      .then(() => {
+        this.#inlineToolbar = new InlineToolbar(this.#model, this.#formattingAdapter, this.#toolsManager.inlineTools, this.#config.holder);
+        this.#iocContainer.set(InlineToolbar, this.#inlineToolbar);
+
+        this.#prepareUI();
+
+        this.#model.initializeDocument({ blocks });
+      })
+      .catch((error) => {
+        console.error('Editor.js initialization failed', error);
+      });
   }
 
   /**
diff --git a/packages/core/src/tools/ToolsManager.ts b/packages/core/src/tools/ToolsManager.ts
index bfc85669..2c8b1f8a 100644
--- a/packages/core/src/tools/ToolsManager.ts
+++ b/packages/core/src/tools/ToolsManager.ts
@@ -121,6 +121,8 @@ export default class ToolsManager {
    * @returns Promise<void>
    */
   public async prepareTools(): Promise<void> {
+    console.log('prepare start');
+
     const promiseQueue = new PromiseQueue();
 
     const setToAvailableToolsCollection = (toolName: string, tool: ToolFacadeClass): void => {
@@ -181,6 +183,8 @@ export default class ToolsManager {
     });
 
     await promiseQueue.completed;
+
+    console.log('prepare end');
   }
 
   /**
diff --git a/packages/dom-adapters/src/BlockToolAdapter/index.ts b/packages/dom-adapters/src/BlockToolAdapter/index.ts
index f6bbd230..b700fa8e 100644
--- a/packages/dom-adapters/src/BlockToolAdapter/index.ts
+++ b/packages/dom-adapters/src/BlockToolAdapter/index.ts
@@ -89,8 +89,11 @@ export class BlockToolAdapter implements BlockToolAdapterInterface {
     this.#caretAdapter.attachInput(input, builder.build());
 
     try {
+      const value = this.#model.getText(this.#blockIndex, key);
       const fragments = this.#model.getFragments(this.#blockIndex, key);
 
+      input.textContent = value;
+
       fragments.forEach(fragment => {
         this.#formattingAdapter.formatElementContent(input, fragment);
       });
diff --git a/packages/dom-adapters/src/FormattingAdapter/index.ts b/packages/dom-adapters/src/FormattingAdapter/index.ts
index cf32f09a..0782c231 100644
--- a/packages/dom-adapters/src/FormattingAdapter/index.ts
+++ b/packages/dom-adapters/src/FormattingAdapter/index.ts
@@ -101,17 +101,27 @@ export class FormattingAdapter {
 
     const [start, end] = index;
 
-    /**
-     * Create range with positions specified in index
-     */
-    const range = document.createRange();
+    try {
+      /**
+       * Create range with positions specified in index
+       */
+      const range = document.createRange();
 
-    range.setStart(input, start);
-    range.setEnd(input, end);
+      const inputTextNode = input.firstChild;
 
-    const inlineElement = tool.createWrapper(toolData);
+      if (inputTextNode === null) {
+        throw new Error('FormattingAdapter: input element should contain text node');
+      }
+
+      range.setStart(inputTextNode, start);
+      range.setEnd(inputTextNode, end);
 
-    surround(range, inlineElement);
+      const inlineElement = tool.createWrapper(toolData);
+
+      surround(range, inlineElement);
+    } catch (e) {
+      console.error('Error while formatting element content', e);
+    }
   }
 
   /**
diff --git a/packages/model/src/EditorJSModel.spec.ts b/packages/model/src/EditorJSModel.spec.ts
index 3040441f..4f362303 100644
--- a/packages/model/src/EditorJSModel.spec.ts
+++ b/packages/model/src/EditorJSModel.spec.ts
@@ -17,6 +17,7 @@ describe('EditorJSModel', () => {
       'updateValue',
       'removeBlock',
       'moveBlock',
+      'getText',
       'insertText',
       'removeText',
       'format',
diff --git a/packages/model/src/EditorJSModel.ts b/packages/model/src/EditorJSModel.ts
index 054b4269..44194f02 100644
--- a/packages/model/src/EditorJSModel.ts
+++ b/packages/model/src/EditorJSModel.ts
@@ -234,6 +234,17 @@ export class EditorJSModel extends EventBus {
     return this.#document.updateTuneData(...parameters);
   }
 
+  /**
+   * Returns a text from the specified block and data key
+   *
+   * @param parameters - getText method parameters
+   * @param parameters.blockIndex - index of the block
+   * @param parameters.dataKey - key of the data
+   */
+  public getText(...parameters: Parameters<EditorDocument['getText']>): ReturnType<EditorDocument['getText']> {
+    return this.#document.getText(...parameters);
+  }
+
   /**
    * Inserts text to the specified block
    *
@@ -305,7 +316,7 @@ export class EditorJSModel extends EventBus {
 
   /**
    * Exposing document for dev-tools
-   * 
+   *
    * USE ONLY FOR DEV PURPOSES
    */
   public devModeGetDocument(): EditorDocument {
diff --git a/packages/model/src/entities/BlockNode/BlockNode.spec.ts b/packages/model/src/entities/BlockNode/BlockNode.spec.ts
index d13e0a9d..ff26fcb8 100644
--- a/packages/model/src/entities/BlockNode/BlockNode.spec.ts
+++ b/packages/model/src/entities/BlockNode/BlockNode.spec.ts
@@ -11,7 +11,7 @@ import type { EditorDocument } from '../EditorDocument';
 import type { ValueNodeConstructorParameters } from '../ValueNode';
 import type { InlineFragment, InlineToolData, InlineToolName } from '../inline-fragments';
 import { TextNode } from '../inline-fragments/index.js';
-import type { BlockNodeData, BlockNodeDataSerialized } from './types';
+import type { BlockNodeData, BlockNodeDataSerialized, DataKey } from './types';
 import { BlockChildType } from './types/index.js';
 import { NODE_TYPE_HIDDEN_PROP } from './consts.js';
 import { TextAddedEvent, TuneModifiedEvent, ValueModifiedEvent } from '../../EventBus/events/index.js';
@@ -574,6 +574,31 @@ describe('BlockNode', () => {
     });
   });
 
+  describe('.getText()', () => {
+    it('should call .serialized getter of the TextNode', () => {
+      const spy = jest.spyOn(TextNode.prototype, 'serialized', 'get');
+      const node = createBlockNodeWithData({
+        text: {
+          [NODE_TYPE_HIDDEN_PROP]: BlockChildType.Text,
+          value: '',
+          fragments: [],
+        },
+      });
+
+      node.getText(createDataKey('text'));
+
+      expect(spy)
+        .toHaveBeenCalled();
+    });
+
+    it('should throw an error if data key is invalid', () => {
+      const node = createBlockNodeWithData({});
+
+      expect(() => node.getText('invalid-key' as DataKey))
+        .toThrow();
+    });
+  });
+
   describe('.insertText()', () => {
     const dataKey = createDataKey('text');
     const text = 'Some text';
diff --git a/packages/model/src/entities/BlockNode/__mocks__/index.ts b/packages/model/src/entities/BlockNode/__mocks__/index.ts
index 692a765e..be52ddde 100644
--- a/packages/model/src/entities/BlockNode/__mocks__/index.ts
+++ b/packages/model/src/entities/BlockNode/__mocks__/index.ts
@@ -18,6 +18,13 @@ export class BlockNode extends EventBus {
     return;
   }
 
+  /**
+   * Mock method
+   */
+  public getText(): string {
+    return 'mocked text';
+  }
+
   /**
    * Mock method
    */
diff --git a/packages/model/src/entities/BlockNode/index.ts b/packages/model/src/entities/BlockNode/index.ts
index e30de268..0a12e9b3 100644
--- a/packages/model/src/entities/BlockNode/index.ts
+++ b/packages/model/src/entities/BlockNode/index.ts
@@ -191,6 +191,19 @@ export class BlockNode extends EventBus {
     node.update(value);
   }
 
+  /**
+   * Returns a text value of the specified text node
+   *
+   * @param dataKey - key of the data
+   */
+  public getText(dataKey: DataKey): string {
+    this.#validateKey(dataKey, TextNode);
+
+    const node = get(this.#data, dataKey as string) as TextNode;
+
+    return node.serialized.value;
+  }
+
   /**
    * Inserts text to the specified text node by index, by default appends text to the end of the current value
    *
diff --git a/packages/model/src/entities/EditorDocument/EditorDocument.spec.ts b/packages/model/src/entities/EditorDocument/EditorDocument.spec.ts
index cc9c8b1b..20e574c7 100644
--- a/packages/model/src/entities/EditorDocument/EditorDocument.spec.ts
+++ b/packages/model/src/entities/EditorDocument/EditorDocument.spec.ts
@@ -729,6 +729,42 @@ describe('EditorDocument', () => {
     });
   });
 
+  describe('.getText()', () => {
+    let document: EditorDocument;
+    const dataKey = 'text' as DataKey;
+    const text = 'Some text';
+    let block: BlockNode;
+
+    beforeEach(() => {
+      const blockData = {
+        name: 'text' as BlockToolName,
+        data: {
+          [dataKey]: text,
+        },
+      };
+
+      document = new EditorDocument();
+
+      document.initialize([ blockData ]);
+
+      block = document.getBlock(0);
+    });
+
+    it('should call .getText() method of the BlockNode if index and data key are correct', () => {
+      const spy = jest.spyOn(block, 'getText');
+
+      document.getText(0, dataKey);
+
+      expect(spy)
+        .toHaveBeenCalledWith(dataKey);
+    });
+
+    it('should throw an error if index is out of bounds', () => {
+      expect(() => document.getText(document.length + 1, dataKey))
+        .toThrow('Index out of bounds');
+    });
+  });
+
   describe('.insertText()', () => {
     let document: EditorDocument;
     const dataKey = 'text' as DataKey;
diff --git a/packages/model/src/entities/EditorDocument/index.ts b/packages/model/src/entities/EditorDocument/index.ts
index 60590faa..2f35ad7b 100644
--- a/packages/model/src/entities/EditorDocument/index.ts
+++ b/packages/model/src/entities/EditorDocument/index.ts
@@ -238,6 +238,18 @@ export class EditorDocument extends EventBus {
     this.#children[blockIndex].updateTuneData(tuneName, data);
   }
 
+  /**
+   * Returns text of the specified block and data key
+   *
+   * @param blockIndex - index of the block
+   * @param dataKey - key of the data containing the text
+   */
+  public getText(blockIndex: number, dataKey: DataKey): string {
+    this.#checkIndexOutOfBounds(blockIndex, this.length - 1);
+
+    return this.#children[blockIndex].getText(dataKey);
+  }
+
   /**
    * Inserts text to the specified block
    *
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index b6343a7b..9d3efc30 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import CaretIndex from '@/components/CaretIndex.vue';
-
-import { EditorDocument, EditorJSModel, EventType } from '@editorjs/model';
+// import CaretIndex from '@/components/CaretIndex.vue';
+import { EditorDocument, EditorJSModel } from '@editorjs/model';
 import Core from '@editorjs/core';
 import { ref, onMounted } from 'vue';
 import { Node } from './components';
@@ -17,6 +16,10 @@ const editorDocument = ref<EditorDocument | null>(null);
 const serialized = ref<EditorDocument['serialized'] | null>(null);
 
 
+/**
+ * @todo display caret index somewhere
+ */
+
 onMounted(() => {
   new Core({
     holder: document.getElementById('editorjs') as HTMLElement,
@@ -48,12 +51,12 @@ onMounted(() => {
       >
       Editor.js Document Playground
     </div>
-  
+
     <div :class="$style.body">
       <div>
-          <h2 :class="$style.sectionHeading">
-            Editor
-          </h2>
+        <h2 :class="$style.sectionHeading">
+          Editor
+        </h2>
         <div
           id="editorjs"
           :class="$style.editor"
@@ -61,7 +64,7 @@ onMounted(() => {
       </div>
       <div :class="$style.playground">
         <h2 :class="$style.sectionHeading">
-            Model Serialized
+          Model Serialized
         </h2>
         <!-- <CaretIndex :model="model" /> -->
         <pre v-if="serialized">{{ serialized }}</pre>
@@ -76,7 +79,7 @@ onMounted(() => {
         />
       </div>
     </div>
-</div>
+  </div>
 </template>
 
 <style module>

From fb12400075667f7a357360cb25aee6980683a117 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Sat, 31 Aug 2024 01:13:01 +0300
Subject: [PATCH 3/6] rm logs

---
 packages/core/src/index.ts              | 4 ++--
 packages/core/src/tools/ToolsManager.ts | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index f5e5ed52..5573c109 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -102,13 +102,13 @@ export default class Core {
       });
     }
 
+    this.#prepareUI();
+
     this.#toolsManager.prepareTools()
       .then(() => {
         this.#inlineToolbar = new InlineToolbar(this.#model, this.#formattingAdapter, this.#toolsManager.inlineTools, this.#config.holder);
         this.#iocContainer.set(InlineToolbar, this.#inlineToolbar);
 
-        this.#prepareUI();
-
         this.#model.initializeDocument({ blocks });
       })
       .catch((error) => {
diff --git a/packages/core/src/tools/ToolsManager.ts b/packages/core/src/tools/ToolsManager.ts
index 2c8b1f8a..bfc85669 100644
--- a/packages/core/src/tools/ToolsManager.ts
+++ b/packages/core/src/tools/ToolsManager.ts
@@ -121,8 +121,6 @@ export default class ToolsManager {
    * @returns Promise<void>
    */
   public async prepareTools(): Promise<void> {
-    console.log('prepare start');
-
     const promiseQueue = new PromiseQueue();
 
     const setToAvailableToolsCollection = (toolName: string, tool: ToolFacadeClass): void => {
@@ -183,8 +181,6 @@ export default class ToolsManager {
     });
 
     await promiseQueue.completed;
-
-    console.log('prepare end');
   }
 
   /**

From 3c4bb064087d246c0c5256d0aa4386475d36f481 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Sat, 31 Aug 2024 01:21:07 +0300
Subject: [PATCH 4/6] Update Config.ts

---
 packages/sdk/src/entities/Config.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/sdk/src/entities/Config.ts b/packages/sdk/src/entities/Config.ts
index 782c4081..ff88890c 100644
--- a/packages/sdk/src/entities/Config.ts
+++ b/packages/sdk/src/entities/Config.ts
@@ -1,4 +1,5 @@
 import type { EditorConfig } from '@editorjs/editorjs';
+import type { EditorJSModel } from '@editorjs/model';
 
 /**
  * Editor.js configuration
@@ -8,4 +9,12 @@ export interface CoreConfig extends EditorConfig {
    * Element to insert the editor into. By default #editorjs
    */
   holder?: HTMLElement;
+
+  /**
+   * DEV MODE ONLY
+   * 
+   * Allows to subscribe to model updates. Used in playground for visualizing model changes
+   * @param model - EditorJSModel instance
+   */
+  onModelUpdate?: (model: EditorJSModel) => void;
 }

From 695a3f309f72aa9b1411ccd8052efef4af076c6c Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Sat, 31 Aug 2024 01:52:16 +0300
Subject: [PATCH 5/6] review fixes

---
 packages/dom-adapters/src/BlockToolAdapter/index.ts  |  4 +++-
 packages/dom-adapters/src/FormattingAdapter/index.ts | 10 ++--------
 packages/model/src/entities/BlockNode/index.ts       |  2 +-
 packages/playground/src/App.vue                      |  1 -
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/dom-adapters/src/BlockToolAdapter/index.ts b/packages/dom-adapters/src/BlockToolAdapter/index.ts
index b700fa8e..2222c06d 100644
--- a/packages/dom-adapters/src/BlockToolAdapter/index.ts
+++ b/packages/dom-adapters/src/BlockToolAdapter/index.ts
@@ -94,8 +94,10 @@ export class BlockToolAdapter implements BlockToolAdapterInterface {
 
       input.textContent = value;
 
+      const nodeToFormat = input.firstChild as HTMLElement; // we just set textContent, so it's always a TextNode
+
       fragments.forEach(fragment => {
-        this.#formattingAdapter.formatElementContent(input, fragment);
+        this.#formattingAdapter.formatElementContent(nodeToFormat, fragment);
       });
     } catch (_) {
       // do nothing — TextNode is not created yet as there is no initial data in the model
diff --git a/packages/dom-adapters/src/FormattingAdapter/index.ts b/packages/dom-adapters/src/FormattingAdapter/index.ts
index 0782c231..550e488d 100644
--- a/packages/dom-adapters/src/FormattingAdapter/index.ts
+++ b/packages/dom-adapters/src/FormattingAdapter/index.ts
@@ -107,14 +107,8 @@ export class FormattingAdapter {
        */
       const range = document.createRange();
 
-      const inputTextNode = input.firstChild;
-
-      if (inputTextNode === null) {
-        throw new Error('FormattingAdapter: input element should contain text node');
-      }
-
-      range.setStart(inputTextNode, start);
-      range.setEnd(inputTextNode, end);
+      range.setStart(input, start);
+      range.setEnd(input, end);
 
       const inlineElement = tool.createWrapper(toolData);
 
diff --git a/packages/model/src/entities/BlockNode/index.ts b/packages/model/src/entities/BlockNode/index.ts
index 0a12e9b3..9ab71542 100644
--- a/packages/model/src/entities/BlockNode/index.ts
+++ b/packages/model/src/entities/BlockNode/index.ts
@@ -192,7 +192,7 @@ export class BlockNode extends EventBus {
   }
 
   /**
-   * Returns a text value of the specified text node
+   * Returns a text value of the specified data key
    *
    * @param dataKey - key of the data
    */
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index 9d3efc30..1f12564d 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// import CaretIndex from '@/components/CaretIndex.vue';
 import { EditorDocument, EditorJSModel } from '@editorjs/model';
 import Core from '@editorjs/core';
 import { ref, onMounted } from 'vue';

From 0152733deb09c19902baf75b8818d30d524f5d56 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Sat, 31 Aug 2024 02:14:09 +0300
Subject: [PATCH 6/6] upd docs

---
 packages/model/src/entities/BlockNode/index.ts      | 2 +-
 packages/model/src/entities/EditorDocument/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/model/src/entities/BlockNode/index.ts b/packages/model/src/entities/BlockNode/index.ts
index 9ab71542..ab958450 100644
--- a/packages/model/src/entities/BlockNode/index.ts
+++ b/packages/model/src/entities/BlockNode/index.ts
@@ -192,7 +192,7 @@ export class BlockNode extends EventBus {
   }
 
   /**
-   * Returns a text value of the specified data key
+   * Returns a text value for the specified data key
    *
    * @param dataKey - key of the data
    */
diff --git a/packages/model/src/entities/EditorDocument/index.ts b/packages/model/src/entities/EditorDocument/index.ts
index 2f35ad7b..67059b0a 100644
--- a/packages/model/src/entities/EditorDocument/index.ts
+++ b/packages/model/src/entities/EditorDocument/index.ts
@@ -239,7 +239,7 @@ export class EditorDocument extends EventBus {
   }
 
   /**
-   * Returns text of the specified block and data key
+   * Returns text for the specified block and data key
    *
    * @param blockIndex - index of the block
    * @param dataKey - key of the data containing the text