Demo of a new WYSIWYG editor: slate-write (unstable alpha stage)

Demo site ← You can try Tab to indent the list in the tiddler [[EditDemoText]] , and see the native tw rendering of [[ DemoText]].

Currently, the shortcuts are MarkDown-based ( - for list and # for title), but I will make a WikiText version soon.

And drag to move is in conflict with tw’s drop zone, I don’t quite know how to deal with it currently.

How it works

It is based on tw-react plugin, and use the powerful SlateJS editor and tons of keyboard shortcut plugins from udecode/plate.

And I write some transformers to convert wikitext from/to SlateJS state JSON on saving, every 1s.

What need to be done next

If you can code, feel free to PR some test cases into this project.

8 Likes

All I did was hit return at the end of “This is a test.”

I can’t reproduce, I write This is a test. and make it bold and hit enter.

It’s beta now, I’m using it on my daily writing, just can’t handle images, widgets (see How to dealwith wikitext like widget, macro in WYSIWYG editor? ), and drag&drop yet.

Despite of these complex todos, I need some help building some other features, if you are familiar with React, please help with these relatively easy tasks:

  1. autocomplete [['s and {{'s linkable tiddlers result
  2. autocomplete <$'s available widget and fields
  3. autocomplete <<'s available macros

there is already a snippet autocomplete example in the code (/ menu), see develop.tid on the demo for more info.

Looks very like Notion now

all todos:

  1. allow editing widget and any block’s source code, and get preview at real time.

  2. allow use tw’s default editor toolbar’s buttons and their keyboard shortcuts

  3. optimization: use section splitter in section-editor to ensure only a small potion of text will onChange and rerender. And we can get start-end of section from section splitter, so replace the section of text onChange.

  4. allow drag to reorder blocks

  5. context menu when click on the drag handle

  6. autocomplete [['s and {{'s linkable tiddlers result

  7. autocomplete <$'s available widget and fields

  8. autocomplete <<'s available macros

  9. open context aware autocomplete using ctrl+space, show corresponding dropdown menu using prefix of the selection

  10. replace codeblock with codemirror or monaco, so its prism highlight won’t need to bundle with plugin, which is big

  11. add excalidraw widget support

  12. treeshaking serialize-md related things

2 Likes

Updated, v0.2.1 supports:

5 Likes

Updated, v0.4.0 supports editing widget’s source code in WYSIWYG mode, the interaction is not very refined, some ideas in How to deal with wikitext like widget, macro in WYSIWYG editor? are not implemented.

Try out this new interaction in Slate Write 板书 — A WYSIWYG MD & WikiText editor 一个所见即所得 MD、WikiText 编辑器 !


Seems only macros can be properly updated…Still need to fix some bug in it.

I’d like to know, is this user experience good?

@linonetwo I would love to help but I get a little lost.

  • I follow the above link and see DemoText
  • I click the edit button
  • I see a hybrid WYSIWYG with wikitex character’s visible and applied to the line in question
  • Understandable macros and widgets are not rendered and this not what I we WYSIWYG.

Don’t get me wrong this looks like great progress and a good idea, but I would not call it WYSIWYG perhaps a “format preview editor” or “Live [wikitext] Format editor”.

Other WYSIWYG editors have toolbar buttons that makes something take a format but not show the underlying code.

Do let me know If I have it wrong!
[Edited] I had it wrong see below

@TW_Tones i didn’t get it either but just tried it again after reading your comment

and it is amazing! super work @linonetwo !

@TW_Tones don’t click the edit button

just try typing wikitext straight into the tiddler e.g. __underline__ ^^superscript^^ (edited to remove //italic// as / is used for commands)

1 Like

@TW_Tones Hi, syntax highlighting is provided by Codemirror-Enhanced, you can try adding a codeblock by ``` and switch its language to tiddlywiki.

And when clicking a widget in the WYSIWYG mode, there will also be an inline codemirror editor show-up with highlighting.

And the editbuttong with a “T” is the button to toggle WYSIWYG mode.

@linonetwo it is looking fantastic and seems to be the best of more than one approach.

It will take me a while to get to know it, because it is very capable and somewhat different, after more than 10 years of the old editor.

  • Is there a way to toggle back to the plain text editor, or plain codeMirror - especially as I get to know the way it works?
  • Could you give the demo site unique favicon please, other than the default appearing

FYI: I accidently highlighted and deleted a lot in DemoText, after a few undos, ctrl-z

  • I got the following;

Love your work

Hi all!

  1. revolutionary, interesting and innovative - sounds like something I like from Notion/Google Docs
  2. I found this very interesting and cool - seriously
  3. looks like pharo - smalltalk: https://pharo.org/ and blocks: Making the web better. With blocks! – Joel on Software
  4. i would be happy if it had a table option

img