Prosary: a new visual editor

Plugins
#1

I’ve been working away at trying to make a visual editor to allow editing Tiddler content with a WYSIWYG interface. I’ve made Prosary and it’s now at a point where it’s mostly useable.

There are two goals I had for this editor:

  • Edit existing Tiddlers with the visual editor (it does this by converting the content into the visual editor format).
  • Support WikiText within the visual editor. Initially as plain WikiText that is rendered as a preview within the editor. And later as custom visual components (eg use a dialog to select another Tiddler to transclude).

Right now the content gets converted from WikiText and then saved into a data structure that Prosary understands natively. In the future I would like to save the content as WikiText too. This is a challenge because TipTap (the underlying WYSIWYG editor) may support formats that can’t be displayed in WikiText (and vice versa).

Let me know if you find this useful or any feedback. I’m on the fence as to whether to keep going on this or try to simplify it to only a syntax highlighter for WikiText that includes in-line previews for macros, widgets, and transcludes.

5 Likes
#2

The site is not loading in my desktop, but it’s opening in my mobile. Does anyone else face this issue?
@landreville Also how to use this editor. In mobile phone, I didn’t understand how to use it.

#3

That was due to some network issues. The site is opening now in desktop. But how to use it?

#4

That could have been due to me updating it shortly after I posted. I wonder if I can add a video to show an example of how to use.

The steps are:

  1. Edit a Tiddler (either an existing one or make a new one)
  2. Scroll to the bottom of the Tiddler and change Type to “Prosary Editor (text/vnd.prosary)”
  3. The content will change to be a WYSIWYG editor with a toolbar at the top to change the text formatting.
#5

Maybe you can add a button to auto change the tiddler type, so it also work in view mode, like Demo of a new WYSIWYG editor: slate-write (unstable alpha stage)

For how to support widget and macro’s edit, you can reference to my code GitHub - tiddly-gittly/slate-write: A WYSIWYG editor for TiddlyWiki. (WIP)

#6

Hmm, I created a new tiddler on your demo page. When I tried to change the type to your new Prosary type, the tab froze (Brave Version 1.46.153 Chromium: 108.0.5359.128 (Official Build) (64-bit).

#7

You just need to control the AST to exclude unwanted node.

#8

Thanks for pointing that out, I just fixed it.

#9

Hmm, I’m still seeing it. This time I’m on Chrome 108.0.5359.126.

#10

Hi,
Tried on mobile, Firefox on android, and typing anything gives a RedScreenOfEmbaresement error :TypeError: content is null

1 Like