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

Plugins
,
#5

Looks very like Notion now

9BC86A4D24EC099EBF0E9C63AE7C0244
9BC86A4D24EC099EBF0E9C63AE7C02442208×1384 210 KB

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

4 Likes
How to deal with wikitext like widget, macro in WYSIWYG editor?
#6

Updated, v0.2.1 supports:

截屏2022-05-18 11.08.03
截屏2022-05-18 11.08.032662×1628 70.2 KB

5 Likes
#7

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.

screenshot of wysiwyg editor editing widget source code in tiddlywiki
screenshot of wysiwyg editor editing widget source code in tiddlywiki2194×1806 56.8 KB

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.

#8

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

#9

@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

#10

@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
#11

@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.

#12

@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;

Snag_3361505a
Snag_3361505a851×137 6.9 KB

Love your work

#14

Seems to work well. Good proof of concept!

Screenshot 2022-08-16 155052
Screenshot 2022-08-16 155052584×780 41.1 KB

A comment, TT

#15

What is the simplest way to try this out on another tiddlywiki?

I went to the demo site but it is not clear how to run it on my own tiddlywiki?

#16

@khalfaniw I tried exporting just the Slate Write plugin from the official website, but I couldn’t type when I enabled the WYSIWYG mode. So I went to https://tw-cpl.netlify.app. It was a link somewhere in the Slate Write website. It’s a collection of plugins gathered by or created by the Chinese community and it was all in English for me. I love the built-in Github comments and reactions. I dragged and dropped the config (see Welcome!) and then I could install Slate Write directly from my TW file. It’s similar to the built-in plugin library.

I barely tested it, but I think Slate Write’s basic functions work well and that’s what matters to me.

However, there’s an option to insert a WYSIWYG 3x4 table, but I don’t see a table while in WYSIWYG mode. When I re-enable preview mode, I do see a table. But when I’m in wysiwyg mode I see the text in the table but they’re spaced very far apart, which makes it difficult to edit entries.

table-error

Thank you for making this wonderful plugin and TidGi. Slate Write has persuaded me to use TW more consistently since I’ve always disliked the writing experience. TidGi seems like a good way to use TW without opening it on a browser and using a browser extension to save (Timimi), which is not ideal for security or privacy. At the same time, it has more options than TiddlyDesktop.

#17

Incredible plugin, but won’t work on huge 10K+ word tiddlers. That’s too bad, because this thing has potential.

#18

Thanks for your comments, as a professional web developer, I surely have some thoughts on performance tweaks, like using virtualized technique. And table support is half done…

Please be patient and I think I will find time to continue this, as I’m personally using this plugin every day too!

7 Likes
#19

Just stumbled over your plugin and I love it!

UX-wise there seems to be a problem:
grafik
Can’t access the leftmost options.

A question: Would it be somehow possible to draw inbetween the text? I know (assume), not currently, but with further development.

#20

That’s in github issue, just don’t have people fix it.

whiteboard currently might not work in wysiwyg mode,But you can use it alone.

1 Like
#21

hello linonetwo
I absolutely love this plugin, it’s awesome to just click in a tiddler and type without having to open edit mode! (i think there should be an option to enable this by default and turning it off for tiddlers rather than having to turn it on. but i believei can make that happen in my wiki by adding the field by default when creating a new tiddler)

Unfortunately I have one big issue - links don’t work.
It would be great if i could ctrl-click for example to open the tiddler the link points to. I don’t have much coding experience so i have no clue how difficult this would be, but this problem makes it so that when i want to click on one i either have to select the word(s) and open command-palette or disable the slate-write mode on the tiddler while i click and enable it again later, both are extra steps that make it unusable for a normal wiki experience. :frowning:
Could you please look into this? i hope there is an easy solution

1 Like
#22

I personally always close WYSIWYG mode when done editing, so I won’t mis-type something into it. So for me, I always click links on View mode.

I haven’t recently update WYSIWYG editor because How to serailize macro call, distinguish from transclusion? · Jermolene/TiddlyWiki5 · Discussion #7646 · GitHub block the dev of GitHub - tiddly-gittly/wikiast: Wiki AST transformation for WYSIWYG editor and advanced dynamic widgets in Tiddlywiki. , which is an important depencency of slate-write.

But this can be a small improvment. I can take time for this.

1 Like
#23

截屏2024-04-29 14.34.28
截屏2024-04-29 14.34.281584×368 15.8 KB

@Erpel I think this is fixed somehow! Maybe in a upgrade last year.

1 Like
#24

Really love your plugin, @linonetwo – I tried it with a clean install of TiddlyWiki as my previous (Stroll) version seemed to conflict. But I still have the same uncaught error exception.

Here are the list of plugins I have installed, one of which may conflict:

  • Autocomplete (Evidently Cube)
  • Relink
  • Stories
  • ContextPlugin
  • favorites
  • Freelinks
  • Link to Tabs
  • Editor auto-list

I suspected it was the Autocomplete plugin that may conflict but disabling it still made me get the Uncaught TypeError: Cannot read properties of null (reading ‘removeChild’)

I couldn’t see anything in the console so I’m confused…

Also, I’m a bit confused with SlateWrite about:

  • what the space/slash initiation of “commands” does? what commands?
  • how to autocomplete the names of tiddlers when typing [[

Thanks again!

#25

/ and [[ should work on demo site. If it doesn’t, there might be some bug. For me, it stop working years ago, because it have performance issue on wiki larger than 10000 tiddlers.

To debug conflict, you can try drag your plugins to the demo site.

1 Like