feat(block-tool-adapter): implement dom adapter for block tool

[ilyamore88]

Changes description

Changes implement BlockToolAdapter class which connects DOM input (for now it works mostly with contenteditable elements) with EditorJSModel.

Adapter listens to beforeinput events and dispatches data from the events to the model. On model update, adapter updates the DOM with relevant changes. We prevent all beforeinput events, so all updates to the DOM comes from the model.

BlockToolAdapter utilises the CaretAdapter to update document selection after a model update.

CaretAdapter

CaretAdapter now updates the model on selection change and, vice versa, updates the DOM on the model updates.

However, current implementation works only with one attached input, we would beed to re-implement it to work with the whole EditorJS document

Model updates

Caret

Class represents user caret in the EditorJSModel

Public signature

class Caret  extends EventBus {
  /** Caret identifier */
  id: number;

  /** Caret`s current index */
  index: Index;

  /** 
   * Updates caret index, dispatches an event on update
   **/
  public update(index: Index | null);
}

CaretManager

Class is a part of EditorJSModel which store registry of user carets.

Public signature

class CaretManager extends EventBus {
  /**
   * Creates a caret instance and puts it inthe registry
   **/
  public createCaret(index?: Index);

  /**
   * Updates a caret instance in the registry
   **/
  public updateCaret(caret: Caret);

  /**
   * Removes a caret instance from the registry
   **/
  public removeCaret(caret: Caret);
}

Each method dispatches corresponding event.

All CaretManagement methods and events are exposed to the EditorJSModel public interface. So carets could be updated from external code (like dom-adapters)

[github-actions[bot]]

⏭️ No files to mutate for ./packages/model

[github-actions[bot]]

Coverage report for ./packages/dom-adapters

St.:grey_question:	Category	Percentage	Covered / Total
🟢	Statements	100%	0/0
🟢	Branches	100%	0/0
🟢	Functions	100%	0/0
🟢	Lines	100%	0/0

Test suite run success

1 tests passing in 1 suite.

Report generated by 🧪jest coverage report action from 1aeae4099913cb09843eaf093ec5788a512a3ca8

[github-actions[bot]]

⏭️ No files to mutate for ./packages/dom-adapters

[github-actions[bot]]

Coverage report for ./packages/model

St.:grey_question:	Category	Percentage	Covered / Total
🟢	Statements	96.27% (-3.73% 🔻)	620/644
🟢	Branches	97.87% (-1.4% 🔻)	138/141
🟢	Functions	91.52% (-7.82% 🔻)	151/165
🟢	Lines	96.28% (-3.72% 🔻)	595/618

Show new covered files 🐣

|

St.^{:grey_question:}

| File | Statements | Branches | Functions | Lines | | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------- | :--------- | :------- | :-------- | :----- | | 🟢 |

`...` / EventBus.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / EventType.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / index.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / BlockAddedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / EventAction.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / BaseEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / BlockRemovedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / PropertyModifiedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / TextFormattedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / TextUnformattedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / TextAddedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / TextRemovedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / TuneModifiedEvent.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / ValueModifiedEvent.ts

| 100% | 100% | 100% | 100% | | 🟡 |

`...` / CaretManagerCaretUpdatedEvent.ts

| 66.67% | 100% | 0% | 66.67% | | 🟡 |

`...` / CaretManagerCaretAddedEvent.ts

| 66.67% | 100% | 0% | 66.67% | | 🟡 |

`...` / CaretManagerCaretRemovedEvent.ts

| 66.67% | 100% | 0% | 66.67% | | 🟢 | EventBus/index.ts | 100% | 100% | 100% | 100% | | 🟢 |

`...` / composeDataIndex.ts

| 100% | 100% | 100% | 100% | | 🟢 |

`...` / index.ts

| 100% | 100% | 100% | 100% | | 🔴 |

`...` / Caret.ts

| 25% | 0% | 0% | 25% | | 🟡 |

`...` / types.ts

| 75% | 100% | 50% | 75% | | 🔴 |

`...` / CaretManager.ts

| 31.25% | 0% | 0% | 33.33% |

Test suite run success

347 tests passing in 20 suites.

Report generated by 🧪jest coverage report action from 1aeae4099913cb09843eaf093ec5788a512a3ca8