feat(block-tool-adapter): split (#94)

* simple split

* unhardcode paragraph

* lint fix

packages/core/src/components/BlockManager.ts

@@ -159,7 +159,15 @@ export class BlocksManager {
       throw new Error('[BlockManager] Block index should be defined. Probably something wrong with the Editor Model. Please, report this issue');
     }
 
-    const blockToolAdapter = new BlockToolAdapter(this.#model, this.#caretAdapter, index.blockIndex, this.#formattingAdapter);
+    const toolName = event.detail.data.name;
+
+    const blockToolAdapter = new BlockToolAdapter(
+      this.#model,
+      this.#caretAdapter,
+      index.blockIndex,
+      this.#formattingAdapter,
+      toolName
+    );
 
     const tool = this.#toolsManager.blockTools.get(data.name);
 

packages/core/src/ui/Toolbox/index.ts

@@ -62,6 +62,7 @@ export class ToolboxUI {
     this.#nodes.holder = make('div');
 
     this.#nodes.holder.style.display = 'flex';
+    this.#nodes.holder.style.marginBottom = '10px';
 
     this.#eventBus.dispatchEvent(new ToolboxRenderedUIEvent({
       toolbox: this.#nodes.holder,

packages/dom-adapters/.eslintrc.yml

@@ -18,6 +18,8 @@ rules:
     - always
   '@typescript-eslint/no-unsafe-declaration-merging':
     - 0
+env:
+  browser: true
 
 overrides:
   - files:

packages/dom-adapters/src/BlockToolAdapter/index.ts

@@ -49,19 +49,26 @@ export class BlockToolAdapter implements BlockToolAdapterInterface {
    */
   #formattingAdapter: FormattingAdapter;
 
+  /**
+   * Name of the tool that this adapter is connected to
+   */
+  #toolName: string;
+
   /**
    * BlockToolAdapter constructor
    *
    * @param model - EditorJSModel instance
    * @param caretAdapter - CaretAdapter instance
    * @param blockIndex - index of the block that this adapter is connected to
    * @param formattingAdapter - needed to render formatted text
+   * @param toolName - tool name of the block
    */
-  constructor(model: EditorJSModel, caretAdapter: CaretAdapter, blockIndex: number, formattingAdapter: FormattingAdapter) {
+  constructor(model: EditorJSModel, caretAdapter: CaretAdapter, blockIndex: number, formattingAdapter: FormattingAdapter, toolName: string) {
     this.#model = model;
     this.#blockIndex = blockIndex;
     this.#caretAdapter = caretAdapter;
     this.#formattingAdapter = formattingAdapter;
+    this.#toolName = toolName;
   }
 
   /**
@@ -309,17 +316,60 @@ export class BlockToolAdapter implements BlockToolAdapterInterface {
         break;
       }
 
+      case InputType.InsertParagraph:
+        this.#handleSplit(key, start, end);
+        break;
       case InputType.InsertLineBreak:
         /**
          * @todo Think if we need to keep that or not
          */
         if (isInputNative === true) {
           this.#model.insertText(this.#blockIndex, key, '\n', start);
         }
+        break;
       default:
     }
   };
 
+  /**
+   * Splits the current block's data field at the specified index
+   * Removes selected range if it's not collapsed
+   * Sets caret to the beginning of the next block
+   *
+   * @param key - data key to split
+   * @param start - start index of the split
+   * @param end - end index of the selected range
+   */
+  #handleSplit(key: DataKey, start: number, end: number): void {
+    const currentValue = this.#model.getText(this.#blockIndex, key);
+    const newValueAfter = currentValue.slice(end);
+
+    this.#model.removeText(this.#blockIndex, key, start, currentValue.length);
+    this.#model.addBlock({
+      name: this.#toolName,
+      data : {
+        [key]: {
+          $t: 't',
+          value: newValueAfter,
+          fragments: [],
+        },
+      },
+    }, this.#blockIndex + 1);
+
+    /**
+     * Raf is needed to ensure that the new block is added so caret can be moved to it
+     */
+    requestAnimationFrame(() => {
+      this.#caretAdapter.updateIndex(
+        new IndexBuilder()
+          .addBlockIndex(this.#blockIndex + 1)
+          .addDataKey(key)
+          .addTextRange([0, 0])
+          .build()
+      );
+    });
+  }
+
   /**
    * Handles model update events for native inputs and updates DOM
    *