POC - Migrating to Plate #575

kudlajz · 2024-11-13T19:09:52Z

This is the first part of the migration to Plate, replacing the main React component and all the code that depends on it with the Plate counterpart or Plate types.

For now, most of the existing plugins (extensions) have been left as-is so the PR doesn't become massive. This should also make sure that the editor behaviour stays the same.

One of the changes I've made has been to the plugins prop of the Editor component, which now accepts an array of PlatePlugin interface, allowing us to provide plugins from the outside, which is something we're planning to do eventually.

In the meantime, when this PR is in review and we can test the editor in Prezly, I'll work on refactoring the plugins to use Plate plugin approach and/or replacing them with existing Plate plugins to get rid of as much custom code as possible.

…plate-common package

…outside

kudlajz · 2024-11-21T15:40:46Z

tsconfig.json

+        "module": "esnext",
+        "moduleResolution": "bundler",


These changes were required for Plate packages to be able to be imported.

digitalbase · 2024-12-09T08:31:46Z

Surprised to see noone has commented or reviewed 😠

e1himself

Wow! This was a lot to read in one go :D

Great job! So many code touched and converted to the new API! 🏆

I've left some comments/questions below. Some are just to not forget to address them before merging the code to master.

My main source of cognitive load in this PR was the distinction between Slate and Plate types, as well as different APIs seemingly doing the same thing. A few examples:

Element, Text and Node from slate vs TElement, TText and TNode from plate
Editor, Transforms, Node from slate vs editor.{method} or helper functions from plate
Editor vs ReactEditor vs SlateEditor vs PlateEditor

What are the differences? Should we always use the Plate's version? Is there a danger of using the original Slate's APIs? Can it cause problems with Plate?

packages/slate-commons/src/commands/toDomNode.ts

packages/slate-commons/src/commands/toDomRange.ts

packages/slate-editor/src/extensions/flash-nodes/FlashNodesExtension.tsx

packages/slate-editor/src/extensions/image/withImages.ts

e1himself · 2024-12-10T13:41:53Z

packages/slate-commons/src/types/Decorate.ts

@@ -10,4 +11,4 @@ import type { NodeEntry, Range } from 'slate';
 * keywords, where changes to the content (or some external data) has the
 * potential to change the formatting.
 */
-export type Decorate = (entry: NodeEntry) => Range[];
+export type Decorate = (options: { editor: SlateEditor; entry: TNodeEntry }) => Range[];


I'd say that the function interface should be (editor: SlateEditor, entry: TNodeEntry) => Range[] for consistency with other editor extension points below.

e1himself · 2024-12-10T14:04:13Z

packages/slate-editor/src/modules/nodes-hierarchy/normilizers/removeWhenNoChildren.ts


 import type { HierarchyNormalizer } from '../types';

 export function removeWhenNoChildren(): HierarchyNormalizer {
    return (editor, node, path) => {
-        if ('children' in node && node.children.length === 0) {
-            Transforms.removeNodes(editor, { at: path, match: (n) => n === node });
+        if ((isEditor(node) || isElement(node)) && node.children.length === 0) {


isEditor(node)

I don't think it should be here. We never want to remove the editor node :)

Indeed. I didn't find a good way to narrow down the type so TS is satisfied. Will take another look

But can you not do this?

if (isElement(node) && node.children.length === 0) { editor.removeNodes({ at: path, match: (n) => n === node }); return true; } return false;

e1himself · 2024-12-10T14:11:33Z

packages/slate-editor/src/modules/editor/lib/isEditorValueEqual.ts

@@ -13,7 +18,7 @@ export function isEditorValueEqual<T extends Descendant>(editor: Editor, a: T[],
        if (!isNodeText && !isAnotherText) {
            const equal = editor.isElementEqual(node as Element, another as Element);
            if (typeof equal !== 'undefined') {
-                if (editor.isVoid(node) || editor.isVoid(another)) {


Why in other cases we switch from helper functions to editor.{method}() APIs, but in this case it's the opposite? 🤔

I think my only answer would be that it's easier to use editor.{method} because you don't have to import extra stuff?

Or, in case the editor.{method} does not exist, you import the specific function.

I don't remember exactly why I did it this way, but I'd say it's better to go with the editor.{method} approach for less overal imports.

e1himself · 2024-12-10T14:47:05Z

packages/slate-editor/src/modules/editor/Editor.tsx

+        [
+            events,
+            withAutoformat,
+            withBlockquotes,
+            withCallouts,
+            withDivider,
+            withHeadings,
+            withLists,
+            withTextStyling,
+        ],


Should plugins be in the dependency list?

e1himself · 2024-12-10T14:57:28Z

packages/slate-editor/src/modules/editor/test-utils.ts

@@ -108,8 +101,5 @@ export function getAllExtensions() {
 }

 export function createEditor(input: JSX.Element) {
-    return createBaseEditor(input as unknown as Editor, getAllExtensions, [
-        withEvents(events),
-        withNodesHierarchy(hierarchySchema),


Let's make sure these two (or at least withNodesHierarchy()) are used in tests before we merge the PR.

e1himself · 2024-12-10T15:00:47Z

packages/slate-editor/src/modules/editor/Editor.stories.tsx

+            // withAutoformat
+            // withButtonBlocks
+            // withFloatingAddMenu={{
+            //     tooltip: {
+            //         placement: 'left',
+            //         content: 'Add content to your story',
+            //     },
+            // }}


Leaving a note to either get this back to working, or remove before we merge the PR.

kudlajz · 2024-12-11T10:31:16Z

@e1himself

My main source of cognitive load in this PR was the distinction between Slate and Plate types, as well as different APIs seemingly doing the same thing. A few examples:

Element, Text and Node from slate vs TElement, TText and TNode from plate
Editor, Transforms, Node from slate vs editor.{method} or helper functions from plate
Editor vs ReactEditor vs SlateEditor vs PlateEditor
What are the differences? Should we always use the Plate's version? Is there a danger of using the original Slate's APIs? Can it cause problems with Plate?

I am still wrapping my head around the API, but from my understanding, I believe we should be using the Plate wrapper functions as those are the ones returning the TNode, TElement and TText types.

It gets a little bit confusing because when you use the shortcut editor.${method}, sometimes (or most times?) the method just calls the original Slate method directly which returns the base types like Node and Element. You have to use the Plate wrapper function like getNodeString which mimics Node.string but works with Plate's types.

When I was migrating the code, I didn't replace all the usages of Slate functions and types with the Plate counterpart because it would take too much time + it would also require reworking all the extensions as well, which would turn this large PR into even larger one.

So in most places I've only updated the API calls to satisfy TS, which seems like it's enough for the most part, but of course ideally we'll update everything along the way as we work our way through the extensions.

It's still a learning curve but should get clearer as we refactor more code.

e1himself · 2024-12-11T11:37:32Z

I've converted it to draft to avoid accidentally merging :)

…-editor

kudlajz added 2 commits November 13, 2024 20:09

Install Plate packages and update tsconfig

42d73de

Update bunch of code to the new API

2c4327f

kudlajz self-assigned this Nov 13, 2024

kudlajz marked this pull request as draft November 13, 2024 19:10

kudlajz added 17 commits November 18, 2024 18:59

Change build target

8391d0e

Add plate-common as peer dependency

611b8cc

Update the remaining code to use Plate API

6d68c9e

Update generic type

90d037c

Re-enable decorators

4585afc

Update more API calls, re-enable extensions

0835d0d

Provide initial value to the Plate editor

893b735

Run prettier

d8a4896

Update and sync Slate packages

089cb02

Use SlateEditor instead of PlateEditor type

8b1b096

Make ElementNode extend TElement and TextNode TText

231bbc3

Suppress code using node.children for now

93d3701

Add skipLibCheck parameter to test:types scripts

86bbd0b

v0.117.0-alpha.0

e0c5696

Use SlateEditor type instead of BaseEditor where applicable

8ea8c42

Use @udecode/plate-common as peer dependency, replace imports to use …

8fa7b82

…plate-common package

Rewrite withEvents as Plate plugin, allow providing plugins from the …

b2d7993

…outside

kudlajz force-pushed the feature/dev-14744-explore-migrating-to-plate-editor branch from c150327 to b2d7993 Compare November 21, 2024 11:33

kudlajz added 2 commits November 21, 2024 14:59

Get rid of TS error suppressions

272cce5

Bring back autoformat plugin and update some more types

ecad174

kudlajz added the Type - Refactoring label Nov 21, 2024

kudlajz requested review from e1himself, yuriyyakym, fgyimah and mohammadxali November 21, 2024 14:58

Use correct functions instead of HistoryEditor object

1f360ca

v0.117.1-alpha.0

b8b2586

kudlajz commented Nov 21, 2024

View reviewed changes

kudlajz added 2 commits November 21, 2024 17:22

Export some more stuff so we can easily import it in the app

39467bc

v0.117.2-alpha.0

3511d16

kudlajz marked this pull request as ready for review November 26, 2024 15:57

Replace custom autoformat extension with Plate plugin

5effad9

e1himself reviewed Dec 10, 2024

View reviewed changes

e1himself marked this pull request as draft December 11, 2024 11:37

kudlajz added 8 commits January 7, 2025 10:35

Merge branch 'main' into feature/dev-14744-explore-migrating-to-plate…

e66a57f

…-editor

Fixed select method to use Plate's API

92295e8

Get rid of redundant toDomNode function

4648f69

Get rid of redundant toDomRange function

3cbf3ba

Uncomment code in FlashNodesExtension

cd051a8

Uncomment code in withTablesCopyPasteBehavior

126820e

Return early instead of using non-null assertion

0763524

Use SlateEditor type instead of unknown

9d1be1a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

POC - Migrating to Plate #575

POC - Migrating to Plate #575

kudlajz commented Nov 13, 2024 •

edited

Loading

kudlajz Nov 21, 2024

digitalbase commented Dec 9, 2024

e1himself left a comment •

edited

Loading

e1himself Dec 10, 2024

e1himself Dec 10, 2024

kudlajz Dec 11, 2024

e1himself Dec 11, 2024 •

edited

Loading

e1himself Dec 10, 2024

kudlajz Dec 11, 2024

e1himself Dec 10, 2024

e1himself Dec 10, 2024

e1himself Dec 10, 2024

kudlajz commented Dec 11, 2024

e1himself commented Dec 11, 2024

POC - Migrating to Plate #575

Are you sure you want to change the base?

POC - Migrating to Plate #575

Conversation

kudlajz commented Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

digitalbase commented Dec 9, 2024

e1himself left a comment • 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

e1himself Dec 11, 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

kudlajz commented Dec 11, 2024

e1himself commented Dec 11, 2024

kudlajz commented Nov 13, 2024 •

edited

Loading

e1himself left a comment •

edited

Loading

e1himself Dec 11, 2024 •

edited

Loading