feat(dom-adapters): basic inline tool adapter implementation #74

e11sy · 2024-08-27T23:53:09Z

Inline tool adapter implementation

structure:

Editor (playground simulation)
InlineTool instanse (one for editor, for each inline tool)
InlineToolbar toolbar that is rendered with inline tools available inside block
- Business logic : (InlineToolbar class)
- UI : Toolbar component
InlineToolAdapter - adapter, that connects model and editor
model stores data

NOTE:

tool should determine it's state for selection

Progress

enum IntersectType {
  Extend = 'extend',           // if two fragments of one tool intersect - merge into one fragment
  Replace = 'replace',         // if two new fragment intersect with existing - remove existing with new one
  Separate = 'separate'        // if two fragments of one tool intersect - treat them as two different fragments
}

Tests

Coverage report for `./packages/dom-adapters`

St.^❔	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 6db4d90

github-actions · 2024-08-27T23:54:26Z

Coverage report for `./packages/model`

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	100%	753/753
🟢	Branches	99.5% (+0.01% 🔼)	201/202
🟢	Functions	98.37% (-1.07% 🔻)	181/184
🟢	Lines	100%	725/725

Show new covered files 🐣

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / IntersectType.ts	100%	100%	100%	100%
🟢	`...` / FormattingAction.ts	100%	100%	100%	100%

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟢	`...` / index.ts	100%	100%	50% (-50% 🔻)	100%

Test suite run success

389 tests passing in 24 suites.

Report generated by 🧪jest coverage report action from 6db4d90

github-actions · 2024-08-27T23:55:11Z

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

gohabereg · 2024-08-28T19:12:22Z

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

+
+        const inlineElement = tool.create();
+
+        range.surroundContents(inlineElement);


That would throw an exception in some cases, see https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents

gohabereg · 2024-08-28T19:14:12Z

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

+    const textRange = index.textRange!;
+    const blockIndex = index.blockIndex!;
+    const dataKey = index.dataKey!;


Non-null assertion could be dangerous here, would be better to check each index part

gohabereg · 2024-08-28T19:15:18Z

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

+
+    const fragments = this.#model.getFragments(blockIndex, dataKey, ...textRange, toolName);
+
+    const { action, range } = tool.getAction(textRange, fragments, intersectType, data);


Tool will know it's intersect type by itself, no need to pass it here. It should be passed to the model when we'll implement different intersections support

gohabereg · 2024-08-28T19:19:31Z

packages/dom-adapters/src/utils/intersectExists.ts

+ * @returns {boolean} true if itersect exists, false otherwise
+ */
+export function intersectionExists(firstRange: TextRange, secondRange: TextRange): boolean {
+  return (firstRange[0] < secondRange[1] && firstRange[0] > secondRange[0] || firstRange[1] < secondRange[1] && firstRange[1] > secondRange[0]);


You can use a formula

(firstRange[0] - secondRange[1]) * (secondRange[0] - firstRange[1]) > 0

gohabereg · 2024-08-28T19:19:46Z

packages/dom-adapters/src/utils/intersectExists.ts

+ * @param secondRange - second text range
+ * @returns {boolean} true if itersect exists, false otherwise
+ */
+export function intersectionExists(firstRange: TextRange, secondRange: TextRange): boolean {


Also let's rename to smth like doRangesIntersect

gohabereg · 2024-08-28T19:20:16Z

packages/dom-adapters/src/utils/mergeTextRanges.ts

+ * @param secondRange - second range to be merged
+ * @returns {TextRange} merged text range
+ */
+export function mergeTextRanges(firstRange: TextRange, secondRange: TextRange): TextRange {


Would be great to check if ranges intersects right inside this function

gohabereg · 2024-08-28T19:22:21Z

packages/playground/src/components/Toolbar/index.ts

+      if (selection) {
+        /**
+         * Do not render inline toolbar for not contenteditable elements
+         */
+        if (selection.focusNode?.nodeType !== Node.TEXT_NODE) {
+          return;
+        }
+      }


Would be enough to check if caret has textRange. If it has it — that means caret is in the text input

as i can see, caret also has text range for native inputs, but i want to check that current node is text and contenteditable

gohabereg · 2024-08-28T19:23:06Z

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

+ * Class handles on format model events and renders inline tools
+ * Applies format to the model
+ */
+export class InlineToolAdapter {


If it would be a single adapter for all of the tools, let's name it InlineToolsAdapter

packages/core/src/entities/InlineTool.ts

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

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

packages/model/src/entities/inline-fragments/FormattingInlineNode/types/FormattingAction.ts

gohabereg · 2024-08-29T11:17:20Z

packages/core/src/entities/InlineTool.ts

+    /**
+     * Formatting action - format or unformat
+     */
+    action: FormattingAction;
+
+    /**
+     * Range to apply formatting action
+     */
+    range: TextRange;


Let's extract this to a separate intereface

gohabereg · 2024-08-29T11:20:33Z

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

+      const selection = window.getSelection();
+
+      /**
+       * Get current input with selection
+       */
+      if (selection) {
+        /**
+         * Do not render inline toolbar for not contenteditable elements
+         */
+        if (selection.focusNode?.nodeType !== Node.TEXT_NODE) {


I left same comment previously, you should be able to just check if index has a text range, no need to check node type

updated comments

gohabereg · 2024-08-29T11:23:05Z

packages/model/src/entities/inline-fragments/FormattingInlineNode/types/IntersectType.ts

+  /**
+   * If two fragments of one tool intersect - treat them as two different fragments
+   */
+  Separate = 'separate'


I don't really like that name, I think it's not descriptive enough. Maybe something like LeaveBoth or None as there's no intersection in that case. Happy to discuss other ideas

gohabereg · 2024-08-29T13:34:27Z

packages/model/src/entities/inline-fragments/FormattingInlineNode/types/IntersectType.ts

+  /**
+   * If two fragments of one tool intersect - treat them as two different fragments
+   */
+  LeaveBoth = 'LeaveBoth'


To be consistent

Suggested change

LeaveBoth = 'LeaveBoth'

LeaveBoth = 'leave-both'

packages/core/src/entities/InlineTool.ts

packages/core/src/tools/ToolsManager.ts

packages/core/src/tools/internal/inline-tools/bold/index.ts

packages/core/src/tools/internal/inline-tools/italic/index.ts

packages/playground/tsconfig.json

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

gohabereg and others added 11 commits January 24, 2024 20:18

Implmenet global CaretAdapter

8994e03

Handle native inputs

6fa8279

Merge branch 'main' of github.com:editor-js/document-model into featu…

4f0de03

…re/global-caret-adapter

Pass input type to Input component props

3f93468

Use class to represent index

7cde75e

Fix lint in dom-adapters

0679745

fix linter

1f89c57

Merge branch 'main' of github.com:editor-js/document-model into featu…

a7ecfe3

…re/global-caret-adapter

added inline tool adapter

a6a8aa6

Merge remote-tracking branch 'origin/feature/global-caret-adapter' in…

713b8b9

…to inline-tool-adapter

implement model updates

a9db501

e11sy added 9 commits August 28, 2024 14:07

update from main

06bacaa

lint fix

d858afc

fix index

83701e7

adapter renders inline tools

96bf644

lint fix and clean up

d364498

jsdoc

a4e26c9

clean up

bc01d1b

jsdoc

240affe

jsdoc

6853d2a

e11sy changed the title ~~[WIP] inline tool adapter~~ feat(inlineToolAdapter): basic inline tool adapter implementation Aug 28, 2024

e11sy changed the title ~~feat(inlineToolAdapter): basic inline tool adapter implementation~~ feat(dom-adapters): basic inline tool adapter implementation Aug 28, 2024

Merge branch 'main' into inline-tool-adapter

a68e8ea

gohabereg reviewed Aug 28, 2024

View reviewed changes

e11sy added 2 commits August 28, 2024 22:51

surround content replaced

5d8bbd1

suggestions

5c49a09

neSpecc reviewed Aug 29, 2024

View reviewed changes

gohabereg reviewed Aug 29, 2024

View reviewed changes

e11sy added 3 commits August 29, 2024 16:12

jsdoc and naming improvements

e7c0e80

naming

59d8840

naming

a2d5e30

gohabereg approved these changes Aug 29, 2024

View reviewed changes

e11sy added 2 commits August 29, 2024 16:35

renaming

1adf8c5

fix hardcoded

e39d5bc

neSpecc reviewed Aug 29, 2024

View reviewed changes

e11sy added 4 commits August 29, 2024 17:48

tools are initialized inside of the inline toolbar initialization

7f66686

fixed inline tool attaching

d52475c

jsdoc

ff16243

naming fix

e9626bb

neSpecc reviewed Aug 29, 2024

View reviewed changes

packages/dom-adapters/src/InlineToolsAdapter/index.ts Outdated Show resolved Hide resolved

fixed imports

eb4411f

neSpecc approved these changes Aug 29, 2024

View reviewed changes

e11sy enabled auto-merge August 29, 2024 15:06

e11sy added 9 commits August 29, 2024 18:12

lint fix

4ccc47b

try build fix

530b09d

install dependencies

3c9238b

add sdk package

91a1fef

fix build for core

cee8b33

change package name in actions

f9725a1

add references

98a5644

typo

be50940

fix build

6db4d90

e11sy added this pull request to the merge queue Aug 29, 2024

Merged via the queue into main with commit 50f0db4 Aug 29, 2024
12 checks passed

e11sy deleted the inline-tool-adapter branch August 29, 2024 18:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dom-adapters): basic inline tool adapter implementation #74

feat(dom-adapters): basic inline tool adapter implementation #74

e11sy commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

gohabereg Aug 28, 2024

gohabereg Aug 28, 2024

gohabereg Aug 28, 2024

gohabereg Aug 28, 2024

gohabereg Aug 28, 2024

gohabereg Aug 28, 2024

gohabereg Aug 28, 2024

e11sy Aug 28, 2024

gohabereg Aug 28, 2024

gohabereg Aug 29, 2024

gohabereg Aug 29, 2024

e11sy Aug 29, 2024

gohabereg Aug 29, 2024

gohabereg Aug 29, 2024


		const inlineElement = tool.create();

		range.surroundContents(inlineElement);


		const fragments = this.#model.getFragments(blockIndex, dataKey, ...textRange, toolName);

		const { action, range } = tool.getAction(textRange, fragments, intersectType, data);

feat(dom-adapters): basic inline tool adapter implementation #74

feat(dom-adapters): basic inline tool adapter implementation #74

Conversation

e11sy commented Aug 27, 2024 • edited Loading

Inline tool adapter implementation

structure:

Progress

Next

github-actions bot commented Aug 27, 2024 • edited Loading

github-actions bot commented Aug 27, 2024 • edited Loading

Coverage report for ./packages/dom-adapters

Test suite run success

github-actions bot commented Aug 27, 2024 • edited Loading

Coverage report for ./packages/model

Test suite run success

github-actions bot commented Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

e11sy commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

Coverage report for `./packages/dom-adapters`

github-actions bot commented Aug 27, 2024 •

edited

Loading

Coverage report for `./packages/model`

github-actions bot commented Aug 27, 2024 •

edited

Loading