formatting can result in removing text in slate (+other problems)

[djay]

Problem

The rich text editor needs to use transforms in slate package more directly so that the editor does the right thing when formatting text.

How to reproduce

6. Selected the word Test.
7. Clicked bold
8. rest of the parapraph got removed

Other bugs

... TODO

Context

[djay]

as discussed in the meeting. probably the best way to deal with it is use the slate package installed on the adminUI side. send over the selection and action, make a transformation and then send that updated state to both the slateblock on the admin side and back over the bridge as an update to be rerendered. Don't try to use the SlateBlock code directly.
Still keep the formatting UI on the frontend side.

[djay]

So looking at the code

• slate-react uses placeholders similar to us to translate to and from - https://github.com/ianstormtaylor/slate/blob/c9d94711ccf4aed2751269f6299264e2c4c25f94/packages/slate-react/src/components/editable.tsx#L370
• uses the transforms to change the slate document - https://github.com/ianstormtaylor/slate/blob/c9d94711ccf4aed2751269f6299264e2c4c25f94/packages/slate-react/src/components/editable.tsx#L1400

slate should in theory work without react but there doesn't seem to be much documentation on that

• Is their any example of a normal javascript implementation without react? ianstormtaylor/slate#4639
• How to use Slate.js with Vue.js? ianstormtaylor/slate#2435
• can see how the kind of code we need is done in vue - https://github.com/marsprince/slate-vue/blob/master/packages/slate-vue/components/editable.tsx

So haven't found an implementation without a framework.

Another option is to fake events to the react slate in the sidebar. doesn't seem like a good idea though