Slate: Preact implementation

[adjourn]

Would you like it to be part of this repository? It's very similar to slate-react.

Even if that's not the case, I think it's worth considering to move non-React specific code (constants, utils, even plugins) to separate package (e.g. slate-dom?) because you'd reuse most of it with every DOM view integration (libraries or DIY) if you port or get inspiration from slate-react.

Diffs in utils:

• Eliminate ReactDOM.findDOMNode which is deprecated anyway (in strict mode) #2420.
  There are two identical instances here and here (which could be replaced with editor.base?).
  ReactDOM is also used in this utility function but it's not even used in package nor exported.

Diffs in components:

• This has to be changed to {[...children]}, ImmutableJS quirk? Preact children has to be regular array (Immer!!). Im not 100% sure if there are other similar cases but everything works so far.
• Replace React.Component with Preact.Component (also in plugins/react.js).

Not sure if there are any clashes between Preact's native events and code that's written for React's synthetic events (signature is the same..) but everything I've tried works so far and I haven't encountered any errors.

[adjourn]

Discovered first real issue and it's void elements, tracking it.

• if void element is selected and I type, characters are added into zero-width=z span
• contenteditable="false" is not added to wrapper element (the one wrapping user provided element, e.g. div for image and span for emoji), if it's focused and I type, text is added into it

Update

First point: I still have no idea.. before and after plugins don't seems to have input edge cases for void or spacer elements in order to prevent zero-width mutations. It must be handled in some other way? Void, Text nor Leaf re-render when zero-width innerHTML updates.

Second point: (fixed) <Tag contentEditable={readOnly ? null : false}>{children}</Tag>, if attribute value is false, I belive it means that don't add attribute at all, easy fix: false -> 'false'. I thought React had the same behavior but I guess that's not true.

[marvinhagemeister]

Disclaimer: I work on preact.

That's very exciting 👍 Someone shared this issue in our slack channel and I think our upcoming release will help quite a bit in this regard. We haven't released it yet, but an alpha is scheduled to be made public on March 4th 💯

We managed to fix a lot of smaller compatibility issues and children are now the same shape as in react. They don't have to be an array anymore 🎉

In the ideal scenario slate should work out of the box with preact/compat via an alias. It is meant to be fully compatible with react and any issue is a bug on our end.

[adjourn]

@marvinhagemeister

Thanks for taking the time to write this. I already did put this project on hold until X release. Can't wait! :coffee:

[benjycui]

We haven't released it yet, but an alpha is scheduled to be made public on March 4th 💯

@marvinhagemeister any progress?

[adjourn]

@benjycui Preact alpha is already out.

Meantime I've learned that Slate is currently not compatible with Preact because it relies on synthetic events. It's not impossible but would require rewriting slate-react to some extent which is out of the question for me right now.

[marvinhagemeister]

@realknack Looks like you found a bug in Preact. Can you file a bug report on our issue tracker? We'd love to have a look at it 👍

[adjourn]

@marvinhagemeister Gladly but are you sure that Preact (compat) aims to handle this specific case?

E.g Slate relies on the fact that onBeforeInput can be prevented (React uses textInput under the hood), native beforeinput cannot be prevented (I only tested on Chromium but that's reason enough).

[marvinhagemeister]

@realknack yup, preact/compat is meant to work exactly like react, even though we may do things differently under the hood. If something doesn't work like react we treat it as a bug in preact/compat. I went ahead and made an issue.

[vitorrd]

He,y @marvinhagemeister, sorry to reopen this, but is this issue fixed on preact/compat now? Really keen to use slate on Preact.

Thanks!