WYSIWYG to-do list

[poVoq]

09 March 2020 by @laurent22: The next version of Joplin will include an experimental WYSIWYG so I'm using this post to list the work that still needs to be done on it:

• [x] Add back support for external editing
• [x] Allow creating code blocks for Katex, Mermaid, Fountain, and for actual source code.
• [x] Allow creating checkboxes
• [x] Improve handling of non-standard Markdown plugins
• [x] Add "Insert date time" button
• [x] Add Tag button
• [x] Display tags below title
• [x] Add "Alarm" button
• [x] Add "Note Properties" button
• [x] Check that when clicking "Back" from note history, it goes back to WYSIWYG editor
• [x] Add "Content Properties" button
• [x] Clicking a link (internal or external) does not do anything, you have to right-click to get a menu "Link / Remove Link / Open Link" and "Open Link" does not work.
• [x] When creating link, remove option to set the target to "current window" or "new window"
• [x] Handle pasting note links (which are in Markdown) in editor
• [x] Fix printing
  • [x] Check Export to PDF
• [x] Tables
  • [x] Table lines are dashed not solid.
  • [x] Toolbar button for creating tables
  • [x] Context menu to add / remove columns & rows
  • [x] Tables have "draggable corners" - remove it
• [x] Add support for userstyle.css

If you find any issue or bug please post here.

---

22 Jan 2018 by @poVoq: Original post:

Would be awesome if synergies with this great new WYSIWYG markdown editor could be utilized: https://github.com/nhnent/tui.editor

[janos-szenfner]

Would be a great addition.

[robotman3000]

Perhaps this is a little too soon to ask, but is this going to become a planned feature anytime soon?

[crouthamela]

+1 for integrating a JS WYSIWYG. It would really help adoption of the app. I've read numerous negative comments about having to know Markdown to use it.

[rainbyte]

It would be cool to have some kind of markdown syntax shortcuts too, eg. boostnote has buttons above keyboard to add checkboxes (instead of writing - [ ]), also for lists, cursive and other common syntax.

[semiopat]

Ure it could be good; though it's not a big missing feature on desktop (for me), it's really a need on iOS (associated to a markdown bar for links, quote, list… the simple bar of github forum would be great…

[admirabilis]

The lack of a WYSIWYG editor is the reason I haven't yet migrated from CherryTree, which is an awesome app, but without Android support.

^{Edit: for my own reference: https://github.com/laurent22/joplin/issues/289}

[Murosic]

+1 for WYSIWYG

[berkuse]

+1

[laurent22]

For information, I did manage to integrate the TUI Editor in this branch but the problem is that its API is very limited and so the functionalities required by Joplin (such as resources, math formula, etc.) cannot be integrated.

For now I don't see a WYSIWYG editor happening any time soon so, instead, features to make working with Markdown easier will be added, such as the recently added toolbar buttons. Maybe also helpers for example to create and edit tables, etc.

I leave the issue open for now anyway since it's the most up-voted one, and in case someone figures out some solution. The TUI Editor authors seem quite active so maybe it will improve enough to be usable in Joplin at some point.

[dmd]

I really like the way Bear does it - you write in Markdown, but WYSIWYG, in a single pane, rather than an editing pane and a view pane. E.g., you type *this* and the stars are visible but also "this" is italics.

[bernd-wechner]

WYSIWYG would rock! But keyboard shortcuts for all the current formatting buttons would help for a start.

[armaccloud]

It would also make the interface cleaner and make more room for a TOC because two separate panes are not necessary anymore. It would be nice to see this make it more user-friendly for non-technical people.

[cosmicscr]

Just started using Joplin. I immediately wish there as a wysiwyg markdown editor option.

+1 for wysiwyg

[trymeouteh]

When I introduced a friend to this he didn't like the markdown editor since it was hard to remove bolded text and looked messy in the editor window. A WYSIWYG would go a long way.

[edenpc]

+1 for wysiwyg

[AlekseyMko]

+1 for wysiwyg Don't really like double pane but really love Jopline itself

[edenpc]

Another option is instead of implementing a single editor that can switch between WYSIWYG and markdown modes, you integrate two separate editors, one for markdown and one for WYSIWYG. Then the user can decide which editor to use in the settings.

I'm not sure how difficult this would be to implement though.

[nikolayhg]

+1 I add the keywords Rich Text Editor or Rich Markdown Editor, so that others can find easier this issue.

Other relevant editors might be:

• https://github.com/outline/rich-markdown-editor
• https://github.com/sparksuite/simplemde-markdown-editor
• https://github.com/laobubu/hypermd/

[marquis-de-muesli]

+1 I have been trying out different note taking applications, and while Joplin is the best i have found so far, WYSIWYG would make it even better.

I just looked at the previously mentioned HyperMD, and while i don't know how feasible it is, its certainly a unique and beautiful way to edit/preview. https://github.com/laobubu/hypermd/

Also, Leannote https://github.com/leanote/leanote, "solves" the problem by offering "simple" and "advanced" notes, with two different editors. Not the most elegant solution, but its a different approach.

[horizonbrave]

well I'm putting my vote here, but I don't mind which WYSIWYG editor, as long as I get one =) Many thanks!

[trymeouteh]

A good WYSIWYG for Desktop and Mobile will put this app above Evernote.

[rcrx]

Tools>General Options>Text Editor Command Path: /path/to/WYSIWYG/editor

[trymeouteh]

Tools>General Options>Text Editor Command Path: /path/to/WYSIWYG/editor

Which WYSIWYG will work for Joplin? Quill?

Also this is not possible for mobile devices and I would prefer to have a universal WYSIWYG editor for desktop and mobile that comes with Joplin and is enabled by default. I do not mind if there a way to change the WYSIWYG editor on desktop via Tools>General Options>Text Editor or those who are more tech savvy.

[sunrez]

+1 for a WYSIWYG editor (like the one we're using to put this comment into Github!).

What about CKEditor's Markdown output? :

https://ckeditor.com/docs/ckeditor5/latest/features/markdown.html

[HVR88]

I've been writing in "markdown" since before markdown was a thing. No problems at all to write/edit in that fashion. I can also write in C, Perl, PHP, Python and damn, I used to be able to do straight 68k op-code assembly.

But all of that's besides the point. No WYSIWYG editing and Joplin is a complete non-starter. Not just for me, but for pretty much 100% of the potential market. However many users exist now, the potential number with direct styled editing is multiple orders of magnitude more.

I can't think of a single person I know who will stop using Evernote for a program where you have to toggle a markdown editor or do side x side editing. I like the OPTION of viewing in markdown, but having it as a requirement is very much 1999. But this is 2019.

[deftdawg]

I just found Joplin today and downloaded 1.0.93, was thinking this would be perfect if it had wyswig like vnote... 10 hours later this preview drops, and it's very nice and quite usable.

Here are some adds for your todo-list:

• [ ] Code Blocks - Toolbar button for creating code blocks
• [ ] Code Blocks - Drop down for changing code block syntax (a drop down with all supported syntaxes when the block edit dialog is open would be awesome)
• [ ] Tables - Toolbar button for creating tables
• [ ] Tables - Context menu to add / remove columns & rows
• [ ] Tables - Tab to add column, Enter to add row? (this is debatable, but might be nice)
• [ ] Tables - Pad each table cell with spaces to the length of longest cell in the column in the markdown source (editing any table will remove all extra white space)

[dpoulton-github]

Joplin 1.0.194 Portable (prod, win32) Revision: 92bee549 (master) Windows 10 Pro x64 (VM)

Posting here as requested rather than the forum.

This is what I have found after a quick test. I understand that some features have still to be implemented and they may be the reason some of the below was found.

• Does not display existing picture resources, just a "broken image link" icon (works in standard viewer pane). If the image is unnamed (like in the default notes) there is not even a broken image link icon.
• Uploading a picture using the WYSIWYG editor adds an absolute path to the resource and retains the file extension. For example ![picture.png](C:%5CUsers%5Cvbox%5CDesktop/JoplinProfile/resources/8181b1a3e44740e7a900b6532723e020.png) instead of ![picture.png](:/8181b1a3e44740e7a900b6532723e020) (neither work for WYSIWYG editor, second one does for standard viewer pane)
• Clicking a link (internal or external) does not do anything, you have to right-click to get a menu "Link / Remove Link / Open Link" and "Open Link" does not work.
• When using WYSIWYG to create hyperlinks to external sites there is an option whether set the target to "current window" or "new window". Not clear what this will do. If it did work would it open "current window" links IN the Joplin rendered note pane? Where would "new window" open? Is this option one that should not be available as it should open in the default browser?
• Copying a Markdown link from another note and pasting it into the WYSIWYG editor pastes the link text, escaping the [ ] symbols. Links can only be made "live" by going into the Markdown editor and removing the escape characters. I can see why this happens as the editor does not know if you want to paste it as text or a link. Even so after editing you cannot follow them (see above). Link works in standard viewer pane.
• Removing a link sometimes does not. For example a note contained a WYSIWYG created link [Joplin](https://joplinapp.org) which when removed became [Joplin](https://joplinapp.org "https://joplinapp.org")
• Cannot apply code format using WYSIWYG editor toolbar (not present)
• Table lines are dashed not solid.
• Cannot add a table using WYSIWYG editor toolbar (not present)
• Tables cannot be edited (add row, add column etc.)
• Tables have "draggable corners" to enable them to be enlarged but this is forgotten if the note is left and returned to. I guess this means that the draggable corners should not be there rather than having scalable tables support?
• Does not support userstyle.css though this was somewhat expected :)

[laurent22]

Does not display existing picture resources, just a "broken image link" icon (works in standard viewer pane). If the image is unnamed (like in the default notes) there is not even a broken image link icon.

It should handle resources. How does your link look like?

Uploading a picture using the WYSIWYG editor adds an absolute path to the resource and retains the file extension. For example ![picture.png](C:%5CUsers%5Cvbox%5CDesktop/JoplinProfile/resources/8181b1a3e44740e7a900b6532723e020.png) instead of ![picture.png](:/8181b1a3e44740e7a900b6532723e020) (neither work for WYSIWYG editor, second one does for standard viewer pane)

That's strange, I've just tried adding a picture and it works fine. Maybe it's the Windows path that's not supported properly yet.

Otherwise, I've added these issues to the list.

[dpoulton-github]

Apologies for the graphics heavy post. It also appears that Joplin will automatically convert corrected resource links back to incorrect ones.

Joplin 1.0.194 Portable (prod, win32) Revision: 92bee549 (master) Windows 10 Pro x64 (VirtualBox VM)

Default new "install". Default notes are the only notes. No customisations. No non-default plugins activated.

In split view picture resource link is OK and picture displays

Switch to WYSIWYG

Give the resource a name in markdown editor

Switch to WYSIWYG

Add a picture from the desktop using WYSIWYG

View in split mode. Note path for new picture, also the path for the existing picture has changed

Manually edit the paths back to required format.

Switch to WYSIWYG

Edit the note in WYSIWYG (added "EDITED" to first line of the note) and switch to split view. Paths have changed again.

[amandamcg]

Joplin 1.0.194 (prod, darwin) Revision: 92bee54 (master) Mac 10.14.16

This is awesome! Thanks for working on it. Couple things I saw

Checklists

• While you can interact with checklists (checking and unchecking), there doesn't seem to be a way to insert checklist items. The only way I could insert was to copy a list of 2 or more and the 2nd one on would be a checklist. Also, entering a line above or below seems to remove the indents from nested checklists when you toggle back to markdown.

Headers

• I also had some trouble when I was playing with adding and removing headers using the tool bar. Say I have:

  
  # header 1

header 2

header 3

Go to WYSIWYG view, put the cursor at the end of header 2 and click the H2 icon in the toolbar two times. The first time it removes the header, the second time, it applies the H2 to every item, ending up with 

header 1

header 2

header 3

In other cases, I've seen it end up 

header 1

header 2header 3

### Images
I also see a broken image. Mine is trying to find the path `## ![normal-zoom.png](../../../../..:/676aee7b2a4c4b6da50c11bb61b14c95)`
. Removing the ../'s fixes it.

--- 

Also, agree with @dpoulton-github that support of userstyle.css would be great, but can see that it is probably not an MVP feature. :-) 

[subaru22b]

Joplin 1.0.194 Portable (prod, win32) Revision: 92bee54 (master) Windows 10 Pro x64

I noticed directory paths and typed markdown add extra backslash \

This is from WYSIWYG editor -> Markdown Editor

The good thing about this is if you removed the extra backlash, it will convert it properly into the correct format.

In the Markdown editor, once you remove the extra backlash and just leave the , when you Ctrl+L back to the WYSIWYG editor, it will format it joplin**

[deftdawg]

• [ ] Table: Column alignment is not retained when files are edited

The following example is a table with columns having centre alignment, it is rendered correctly by the WYSIWYG layout, however if any part of the document changes, the alignment is scrubbed when the document is saved, changing all table columns to left-aligned.

| Setting | Value |
| :-: | :-: |
| X | 2 |

• [ ] Table: Column alignment selection control

[deftdawg]

• [ ] Strikethrough is missing from formatting options (text surrounded with ~~ on each side) example

[bernd-wechner]

Got me beat, how are you switching to WYSIWYG editor?

[aviret]

Got me beat, how are you switching to WYSIWYG editor?

[bernd-wechner]

Hmm, that option visible on my 1.0.193 ... did it enter in 1.0.194?

[aviret]

Hmm, that option visible on my 1.0.193 ... did it enter in 1.0.194?

Yes see here and you get it from here

Grettings

[andrewmakarskiy]

I made some corrections to an existing note then hit the command+z button and the whole note just disappeared. Not exactly what I added but the previous note. If you proceed with this combination it switches to a completely different note, the one that was previously edited. This is kind of dangerous though, I think.

[joshsweaney]

This is fantastic, been waiting for this feature for a long time. My notes are usually pretty simple, so everything is working fine for me now.

The only issue I encountered is that when upgrading my notes to the new encryption, the cursor would not appear in WYSIWYG mode (but it would work fine in regular markdown mode). A simple restart solved the issue though. I'll keep using it in WYSIWYG mode and post back here if I find any bugs! Thanks for the update.

[Mortimersnodgrass]

Let me know if I'm reporting imperfections with wysiwyg in wrong place. If you select text and right click in wysiwyg, you only have the option to create a link. In markdown you have: copy, paste and cut; In viewer copy. Ctrl-c works, but I think there should be more options with the context menu.

[dbogdanov]

Fantastic update!

I am missing these icons in the WYSIWYG layout:

[dbogdanov]

Another request for the to-do list: Add an option (and a keyboard shortcut) to paste without formatting. Useful for copy-pasting from web documents.

[kaushalyap]

Really need this!

[noklam]

I don't know when is this WYSIWYG editor was introduced, but the function of the markdown table is a BIG plus. IMO editing table with markdown is always painful, this definitely helps a lot.

[deftdawg]

Progress has been amazing so far! The tables editing ui is particularly nice 😄

Here's some stuff I found as of Joplin 1.0.200 (prod, darwin) Revision: 142976f (master):

• [ ] Table: Creating a table doesn't render an editable header row though when the document is saved an empty header row is prepended.
• [ ] Table: May wish to show an optional confirmation dialog when deleting a table, row or column... probably should have a don't show this again check box if that's done.
• [x] Code Blocks: Selection within a rendered code block is impossible, when clicking on it the whole block moves as if it were an image.

[deftdawg]

I'm running: Joplin 1.0.201 (prod, darwin) Revision: e65af8c (master)

I've noticed that it seems like code blocks are having blank lines and spaces removed around them... it's causing lines to smash together and code blocks to break.

For example this is a shell code block and there used to only 3 back-ticks at the start of the code block and be an empty line before "Requirements Discussion" at the end:

# Create a launch.json w/ settings from  https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI

``````shell
# fix for: ERROR:root:code for hash md5 was not found.
curl https://raw.githubusercontent.com/Homebrew/homebrew-core/94d572a132a63651739fef1931f540404b7eaa31/Formula/python%402.rb > python@2.rb
brew reinstall python\@2.rb

# Migration: Angular 6 to 9
npm i fsevents@1.2.9
npm install --save-dev @angular-devkit/build-angular
```Requirements Discussion

[laurent22]

@deftdawg, I can't replicate this bug. Do you have a step by step example with Markdown sample that shows how to replicate it?

[graphit0]

* [ ]  Table: Creating a table doesn't render an editable header row though when the document is saved an empty header row is prepended.

Client: Joplin 1.0.201 (prod, win32) Revision: e65af8c1 (master)

I'm experiencing a seemingly similar bug @deftdawg described: new empty row of a table appearing after saving a note.

Steps:

1. Create table in WYSIWYG
2. Write any header of the table
3. Change layout to markdown
4. Change layout to WYSIWYG
5. See the header to be empty whereas the header used in the second step moved down to the next row

I've recorded a quick illustration. Hope it helps

[TiberiusRegenschein]

Client: Joplin 1.0.197 (prod, linux)

The [toc] functionality is gone and reverted in links to chapters when toggling between WYSIWYG and otther view.

Steps to reproduce:

1. Add [toc] into a note
2. Switch between other view and WYSIWYG
3. Click on Link from toc
4. Switch back The result is that the [toc] function is gone

[guy-rouillier]

I just upgraded to 1.0.207 and got the warning about using the WYSIWYG editor. I saw this line in the online help Experimental WYSIWYG editor in Joplin:

At the moment, the feature is a bit hidden. To enable it, go into the menu View => Layout button sequence, and choose "Split / WYSIWYG". Then click on the Layout button to toggle between modes.

None of the menu items were changing anything for me, and my button bar did not display a Layout button. Then, just by chance, I tried clicking the "Code View" item in the button bar, and now the Layout button appears. Clicking the Layout button repeated changes from one layout to another, including one showing the WYSIWYG editor. I like this editor so far in my limited testing.

OH!! Ok, finally I understand the purpose of the Layout button sequence menu item: in controls what alternatives appear during repeated clicking on the Layout button. A simple wording change in the online help will clarify:

"To switch between the WYSIWYG and standard editors, first click the Code View button. A new Layout button will appear in the button bar. Clicking the Layout button repeatedly will cycle through available layouts. To select available layouts, use the View menu, Layout button sequence."