Generic typescript #4177

ianstormtaylor · 2021-04-07T14:53:52Z

Description

This is an attempt at making Slate work with TypeScript generics.

Issue
Fixes: #3725
Fixes: #3416

Example

The best example is looking at the new TypeScript example on this branch. (Other examples have been purposefully simplified to have very minimal type annotations, to keep them easier to understand.)

Context

This works by changing the Editor type to be Editor<V> where V represents the "value" being edited by Slate. In the most generic editor, V would be equivalent to Element[] (since that is what is accepted as children of the editor). But in a custom editor, you might have Editor<Array<Paragraph | Quote>>.

Other Editor-and-Node-related methods have been also made generic, so for example if you use Editor.leaf(editor, path) it knows that the return value is a Text node. But more specifically, it knows that it is the text node of the type you've defined in your custom elements (with any marks you've defined).

This replaces the declaration merging approach, and provides some benefits. One of the drawbacks to declaration merging was that it was impossible to know whether you were dealing with an "unknown" or "known" element, since the underlying type was changed. Similarly, having two editors on the page with different schemas wasn't possible to represent. Hopefully this approach with generics will be able to smoothly replace the declaration merging approach. (While being easy to migrate to, since you can pass those same custom element definitions into Editor still.)

It's still a work in progress.

Checks

The new code matches the existing patterns and styles.
The tests pass with yarn test.
The linter passes with yarn lint. (Fix errors with yarn fix.)
The relevant examples still work. (Run examples with yarn start.)
You've added a changeset if changing functionality. (Add one with yarn changeset add.)

changeset-bot · 2021-04-07T14:53:54Z

🦋 Changeset detected

Latest commit: b207bd8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
slate	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

ianstormtaylor · 2021-04-07T15:18:22Z

/release:next

github-actions · 2021-04-07T15:22:06Z

A new release has been made for this pull request. You can install it with yarn add [email protected].

BrentFarese · 2021-04-07T19:48:17Z

packages/slate-history/src/history-editor.ts

@@ -24,39 +24,39 @@ export const HistoryEditor = {
 * Check if a value is a `HistoryEditor` object.
 */

- isHistoryEditor(value: any): value is HistoryEditor {
+ isHistoryEditor(value: any): value is HistoryEditor<Value> {


Missed a V extends Value type parameter?

Suggested change

isHistoryEditor(value: any): value is HistoryEditor<Value> {

isHistoryEditor<V extends Value>(value: any): value is HistoryEditor<V> {

Good question. I'm not really sure how to handle the checking functions in general (like Element.isElement, or this one). I'm not sure there's a way to accurately infer V in that case without the user passing it in? And even if they pass it in, the function itself isn't verifying that it objects any sort of value?

ChildishForces · 2021-04-16T17:12:11Z

Excited about this branch, it makes a lot more sense than overwriting type definitions. Is there a rough ETA before a @next release?

cmditch · 2021-06-08T20:12:56Z

Also pretty excited about this. Thanks for exploring this!

LoganDark · 2021-07-06T22:38:09Z

I'd switch to Slate in a heartbeat if it didn't require using some weird hacky global override thing -- unfortunately it looks like this PR is now broken. :/

ionTea · 2021-10-27T08:25:05Z

We would really need this as well, are there any status updates?

zbeyens · 2022-05-04T17:38:44Z

packages/slate/src/interfaces/editor.ts

 options: {
 at?: Location | Span
- match?: NodeMatch<T>
+ match?: NodeMatch<T & NodeOf<Editor<V>>>


Suggested change

match?: NodeMatch<T & NodeOf<Editor<V>>>

match?: NodeMatch<NodeOf<Editor<V>>>

We often know what type of nodes we want to get, so it makes sense to use T as a return type.
I would remove it from match option as we generally iterate through all types of nodes

zbeyens · 2022-05-05T19:23:09Z

packages/slate/src/create-editor.ts

 Transforms.insertFragment(editor, fragment)
 },

- insertNode: (node: Node) => {
+ // @ts-ignore


This would create issues like udecode/plate#936

zbeyens · 2022-05-05T20:18:41Z

packages/slate/src/create-editor.ts

+ insertNode: (
+ node:
+ | ElementOf<Editor<V>>
+ | TextOf<Editor<V>>
+ | Array<ElementOf<Editor<V>> | TextOf<Editor<V>>>
+ ) => {


Using Editor or Value here will introduce errors: circular dependency or value type not matching, I found only this looser typing working:

Suggested change

insertNode: (

node:

| ElementOf<Editor<V>>

| TextOf<Editor<V>>

| Array<ElementOf<Editor<V>> | TextOf<Editor<V>>>

) => {

insertNode: <N extends Descendant>(

node: N | N[]

) => {

zbeyens · 2022-05-05T20:31:30Z

packages/slate/src/interfaces/editor.ts

@@ -55,246 +58,28 @@ export interface BaseEditor {
 deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void
 deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void
 deleteFragment: (direction?: 'forward' | 'backward') => void
- getFragment: () => Descendant[]
+ getFragment: () => Array<Element | Text>


Suggested change

getFragment: () => Array<Element | Text>

getFragment: <N extends Descendant>() => N[];

zbeyens · 2022-05-05T20:31:59Z

packages/slate/src/interfaces/editor.ts

+ insertFragment: (fragment: Array<Element | Text>) => void
+ insertNode: (node: Element | Text | Array<Element | Text>) => void


Suggested change

insertFragment: (fragment: Array<Element | Text>) => void

insertNode: (node: Element | Text | Array<Element | Text>) => void

insertFragment: <N extends Descendant>(fragment: N[]) => void;

insertNode: <N extends Descendant>(node: N | N[]) => void;

zbeyens · 2022-05-11T10:19:11Z

I unfortunately don't have the time to complete that PR, so I've forked that PR into Plate. If you're looking to use these types, see Plate 11.

maral · 2024-03-13T20:04:34Z

Is there someone kind and brave enough to lift this PR up and continue the work on it? Or is the official approach against this?

dylans · 2024-03-14T13:21:01Z

Is there someone kind and brave enough to lift this PR up and continue the work on it? Or is the official approach against this?

The official approach is that we definitely want to finish this, but no one has had time to do so. Plate seems to be doing pretty well with bounties attached to work they've not had time to finish, but I haven't wanted to go that route with Slate.

At this point, a good path would probably be to look at what Plate has done, see if it makes sense to wrap this up, and if so land it. More likely there are some things to improve that were uncovered in that work.

After we land this, a decent test suite for slate-react, and some optimizations for Reach 18 and 19, I'm ready to call it 1.0. (Just in time to start thinking about switching to EditContext API if everyone supports it (currently in Chrome, waiting for indication from others): https://w3c.github.io/edit-context/ (this is a substantial change))

ianstormtaylor added 4 commits April 5, 2021 12:58

first stab, almost working?

116cd03

fix all typescript warnings

1891000

fix eslint

4206d95

fix tests

b207bd8

ianstormtaylor added improvement ✶ breaking typescript labels Apr 7, 2021

Repository owner deleted a comment from github-actions bot Apr 7, 2021

BrentFarese reviewed Apr 7, 2021

View reviewed changes

ianstormtaylor mentioned this pull request Apr 13, 2021

Move hasRange to core #4191

Closed

5 tasks

dylans marked this pull request as draft August 13, 2021 11:42

dylans mentioned this pull request Oct 27, 2021

Only use Slate Provider's value prop as initial state #4540

Merged

5 tasks

zbeyens mentioned this pull request Apr 21, 2022

Fresh install does not compile udecode/plate#936

Closed

zbeyens reviewed May 4, 2022

View reviewed changes

zbeyens reviewed May 5, 2022

View reviewed changes

zbeyens mentioned this pull request May 10, 2022

Generic Value and Editor udecode/plate#1500

Merged

github-actions bot mentioned this pull request May 11, 2022

Version Packages udecode/plate#1517

Merged

jemc mentioned this pull request Oct 6, 2022

When will the 1.0 version be released, Is there an out of the box editor based on slate？ #4692

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Generic typescript #4177

Generic typescript #4177

ianstormtaylor commented Apr 7, 2021

changeset-bot bot commented Apr 7, 2021

ianstormtaylor commented Apr 7, 2021

github-actions bot commented Apr 7, 2021

BrentFarese Apr 7, 2021

ianstormtaylor Apr 7, 2021

ChildishForces commented Apr 16, 2021 •

edited

cmditch commented Jun 8, 2021

LoganDark commented Jul 6, 2021

ionTea commented Oct 27, 2021

zbeyens May 4, 2022 •

edited

zbeyens May 5, 2022

zbeyens May 5, 2022 •

edited

zbeyens May 5, 2022 •

edited

zbeyens May 5, 2022 •

edited

zbeyens commented May 11, 2022

maral commented Mar 13, 2024

dylans commented Mar 14, 2024

	isHistoryEditor(value: any): value is HistoryEditor<Value> {
	isHistoryEditor<V extends Value>(value: any): value is HistoryEditor<V> {

	match?: NodeMatch<T & NodeOf<Editor<V>>>
	match?: NodeMatch<NodeOf<Editor<V>>>

	getFragment: () => Array<Element \| Text>
	getFragment: <N extends Descendant>() => N[];

		insertFragment: (fragment: Array<Element \| Text>) => void
		insertNode: (node: Element \| Text \| Array<Element \| Text>) => void

Generic typescript #4177

Are you sure you want to change the base?

Generic typescript #4177

Conversation

ianstormtaylor commented Apr 7, 2021

changeset-bot bot commented Apr 7, 2021

🦋 Changeset detected

ianstormtaylor commented Apr 7, 2021

github-actions bot commented Apr 7, 2021

BrentFarese Apr 7, 2021

Choose a reason for hiding this comment

ianstormtaylor Apr 7, 2021

Choose a reason for hiding this comment

ChildishForces commented Apr 16, 2021 • edited

cmditch commented Jun 8, 2021

LoganDark commented Jul 6, 2021

ionTea commented Oct 27, 2021

zbeyens May 4, 2022 • edited

Choose a reason for hiding this comment

zbeyens May 5, 2022

Choose a reason for hiding this comment

zbeyens May 5, 2022 • edited

Choose a reason for hiding this comment

zbeyens May 5, 2022 • edited

Choose a reason for hiding this comment

zbeyens May 5, 2022 • edited

Choose a reason for hiding this comment

zbeyens commented May 11, 2022

maral commented Mar 13, 2024

dylans commented Mar 14, 2024

ChildishForces commented Apr 16, 2021 •

edited

zbeyens May 4, 2022 •

edited

zbeyens May 5, 2022 •

edited

zbeyens May 5, 2022 •

edited

zbeyens May 5, 2022 •

edited