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:

• Add back support for external editing
• Allow creating code blocks for Katex, Mermaid, Fountain, and for actual source code.
• Allow creating checkboxes
• Improve handling of non-standard Markdown plugins
• Add "Insert date time" button
• Add Tag button
• Display tags below title
• Add "Alarm" button
• Add "Note Properties" button
• Check that when clicking "Back" from note history, it goes back to WYSIWYG editor
• Add "Content Properties" button
• 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 creating link, remove option to set the target to "current window" or "new window"
• Handle pasting note links (which are in Markdown) in editor
• Fix printing
  • Check Export to PDF
• Tables
  • Table lines are dashed not solid.
  • Toolbar button for creating tables
  • Context menu to add / remove columns & rows
  • Tables have "draggable corners" - remove it
• 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: #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

[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 > [email protected]
brew reinstall python\@2.rb

# Migration: Angular 6 to 9
npm i [email protected]
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: e65af8c (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."

[mira13]

Hi, team, thank you for what are you doing,
Just report of issue with table content. When inserting text in a row - single name of python file - like filename.py , it becomes a link automaticly after save.

i'm running Joplin 1.0.209 (prod, darwin) on mac

[dpoulton-github]

Just a user not a dev...

I believe that is because .py is the TLD for Paraguay so filename.py is seen as a URL. I have had to use html codes in python filenames to stop this happening. Something like:

filename<span>.</span>py

[mira13]

The problem is not that it is automaticly inserted, but that no way to remove it, without tricks as

[thelazyoxymoron]

This is such a huge update! I have been recommending Joplin to anyone who would listen, and the biggest complaint I've heard so far is the lack of WYSIWYG editor. Thank you so much for working on this!

[armaccloud]

I don't know whether this is only on my installation, but I can't use Ctrl-z (undo) in the wysiwyg editor. Is this a bug?

[jameskirkwood]

I don't know whether this is only on my installation, but I can't use Ctrl-z (undo) in the wysiwyg editor. Is this a bug?

I find that I can only undo the most recent cluster of keystrokes, and only within one second afterwards, or about the same as the minimum delay between keystroke clusters.

(Using Joplin-1.0.212.AppImage)

[armaccloud]

I find that I can only undo the most recent cluster of keystrokes, and only within one second afterwards, or about the same as the minimum delay between keystroke clusters.

(Using Joplin-1.0.212.AppImage)

Ah, you are right, I was too slow with undoing a keystroke. However, this implementation seems somewhat limited and uncommon in my view. Is this something that can be configured to become more in line with how text editors normally behave?

[horizonbrave]

How to use the WYSWYG editor in the Android app? Sorry I've been out of the loop for a while and always wanted this feature. Thanks

…

On Fri, 5 Jun 2020, 6:41 pm Arno Mühren, ***@***.***> wrote: I find that I can only undo the most recent cluster of keystrokes, and only within one second afterwards, or about the same as the minimum delay between keystroke clusters. (Using Joplin-1.0.212.AppImage) Ah, you are right, I was too slow with undoing a keystroke. However, this implementation seems somewhat limited and uncommon in my view. Is this something that can be configured to become more in line with how text editors normally behave? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#176 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACQJLC6MOWBXW7GH6JKOC3LRVDDV3ANCNFSM4EMZWDFA> .

[deftdawg]

EDIT: 1.0.218 resolved this issue

Feel like 1.0.217's switch to dark text on dark background is encouraging me to fully adopt 😆

[arminus]

It seems that clicking on a hyperlink (no edit whatsoever) in the WYSIWYG view sets the timestamp of that note to the current date? Looks like a bug to me...
Other than that - great work!

[alreadydone]

About undo: if undo doesn't work then the editor should let user choose when to save the note instead of saving instantly, or save multiple user-marked versions so that the user can restore to those versions.

In my experience (1.0.218 on Windows), I find that insertion or replacement (of a selected image) can't be undone at all (unlike text, which can be undone to a limited extent). If you replace an image by accident, it's forever lost immediately. Moreover, when you paste an image at the end of a document and press Down button, the cursor is moved to the beginning of the note. If you don't press Down and paste the image again, you still find that it's pasted to the beginning of the note.

I recently switched to Joplin after finding that the evil OneNote doesn't provide an option to store notes locally and my notes full of screenshots from Zoom seminars were eating up my OneDrive space. Good job and keep going!

[dbogdanov]

The unstable undo behavior is really an issue, I've occasionally lost some notes more than once. Undo should remember all recent changes since opening a note.

[laurent22]

Yes, fixing undo is high on the priority list.

[laurent22]

I'm closing this issue now as the biggest chunks of features have been implemented now. For new issues please create a new bug report as it will be easier to track.

[Pete-C2]

The [toc] functionality is gone and reverted in links to chapters when toggling between WYSIWYG and otther view.
This also then prevents the TOC sidebar as per https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979 from working

[fbroussais]

Hi !
Thank you for that usefull functionnality... and for Joplin !
I use Joplin (Win10/Android) for my docs with syn on my Synology/WebDav.
For WYSYWIG cut/paste I use MarkText, but it seems like I'll not have to soon !

May I suggest you to simplify the "switch view" mode ?

When I'm in the WYSIWYG editor, I can't easily select a part of bloc code (for example to copy-pase it in my IDE).
For that, I have to be in "code mode" then to disable the "dual view" (because I don't want to see the code in that moment).

Perhaps the existing buttons "code" and "dual view" + a third one "edit" with a pen icon go in edition mode ? And with that it may avoid modifying the code accidentally too when the code editor is visible.

[jasonbrown1965]

Installation error!

Installed the normal app, realised it was markdown -bleh, wysiwyg+keyboard shortcuts ftw - and looked up if there was a wysiwyg version - there is! Woohoo, uninstalled normie markdown version, installed this one, but * audience sigh * got this:

Running win10 pro 1909 (not risking 2004 yet), otherwise all up to date, malwarebytes checked etc. Will try a reboot and see if that makes a difference.

Edit: nope, no diff, not even after running CCleaner registry tool - yeah, yeah I know (Piriform appears to have dropped troublesome add-ons and never install anyway), but wanted to double check. Tool did catch Joplin remnants, still got exact same error.

[iFreilicht]

A suggestion for working around the plug-in problem, and making sure that there is no way to create damaged notes: What if we never had to convert back from HTML to MD?

Wouldn't it be possible to edit the Markdown text in the background, and just have the MD->HTML conversion be used for rendering? So when you click anywhere in the visual representation, internally it jumps to that character in MD. If that's a plugin section, it opens the floating editor like it already does for some plugins. If it's not, typing will edit the underlying MD, which then gets converted to HTML on the fly as part of the rendering process.

This way, there's no way to corrupt the underlying MD text, and all plug-in specific text will stay intact.

[rafikiphoto]

Joplin 1.3.11
Windows 10 20H2 19042.610
WYSIWYG editor
Tables:
When I delete columns from a table it looks fine in the WYSIWYG editor however when I switch to Viewer the previous, deleted columns are visible. The edit isn't saved.

[esd-o]

Joplin 1.6.8
Windows 10
WYSIWYG editor

Sometimes, bold or italic text is showing *s instead of being bold or italic. Initially, when typing, it works just fine, but if I open another note and come back to the note I was editing, it gets converted to showing *s. Seems to be somewhat random.
Pic: Example, "hipercoagulabilidade" was set to being italic, but when i came back it was like this.

[wenbert]

Is it possible to customise the fonts/CSS on the WYSIWYG editor? I have not found an official document for it.
For example in userstyles.css I have this:

/* For styling the rendered Markdown */
body {
  font-family: 'Droid Serif', 'Merriweather', 'Georgia';
  line-height: 1.7;
}

Which has no effect in the WYSIWYG editor