Fully visual editor mode (WYSIWYG / WYSWYG)

Maybe related too Choice of Prosemirror as code editor

To edit a link in live preview, users need to press the option key to make the link’s Markdown editable, rather than following the link itself.

Similar to this, I wonder if it would be possible to create a user option in settings to only make Markdown elements visible if the user clicks on them while holding down a modifier key. Without the modifier key, just the text itself would be editable but not the Markdown.

I am not talking about a WYSIWYG formatting toolbar and hiding the Markdown completely. I am just wondering if – like we already have with links – it would be possible to gives users the choice of using a modifier key to activate or suppress Markdown in live preview.

I mainly work in source mode so this doesn’t really impact on my use of Obsidian. Think other users I know would find it easier if there was an option to suppress Markdown unless a modifier key was used to make it visible when editing.

Not feasible?

3 Likes

I think this would be an excellent idea, if feasible. I mean you press a modifier key to edit the text with MD elements hidden (or depending on your settings this might be a default rule, in which case you must press a modifier key to make MD element visible).

The current problem with live preview is that if I want to edit the text in links (pip links with block IDs or long URLs), callouts, tables, etc., everything explodes in my face and I have to find, where the text to be edited really is located in that mess. As I edit my texts often, this is a very unpleasant experience. Editing is much slower and more awkward. Actually, this is the main reason, why I use Obsidian only for notes using its powerfull search function and not for writing long-form texts (otherwise Obsidian would be an excellent tool for this).

I suspect that many users used to WYSIWYG editors may feel the same.

6 Likes

For everyone interested in a quick solution, check out MaraLi’s post from August 22: (still working)

If you dont know how to use code snippets, read on here : CSS snippets - Obsidian Help

1 Like

Thanks to Jopp
Disabling MD clutter works fine for headings, bold text, etc.
However, it doesn’t work for markdown links or wiki links with aliases. In this case, both the “text” (alias) of the link and the link reference are displayed.

Is there a way to hide the “reference part” and leave only the “text part” visible so that the text of the link can be edited immediately?

  • For example, in an ugly block link [[test 6#^zazlcu|my tests]] only “my tests” would be visible in Live Preview and ready for editing.
  • Or in a markdown link: [my tests](test%206.md#^a6xvbc) only “my test” would be visible and ready for editing.

I use Obsidian with highly inflected language, and editing links is a tedious task. Especially now that ALT+click creates a second cursor instead of editing the link text.

This would be a great help. Thank you.

1 Like

Circus5167

Would love to see a plugin for Wysiwyg editor!

1 Like

I would like a full WYSIWYG mode with Markdown format as storage and interoperability. Managing the markdown tags in line has become more and more cumbersome when I would prefer to simply focus on writing.

5 Likes

moved back to feature request.

5 Likes

I think the idea of rethinking the possibility of introducing a WYSIWYG editor is great news. Many users may be discouraged from using Obisidian because of the lack of this feature.

One problem with the LivePreview editor is the way it handles internal links. For example, when you want to edit the text part of a link, it always expands not only the text part, but also the reference part. Not only is this cumbersome and cluttered, but it also creates the risk of inadvertently modifying the reference part and making the link unusable.

As new features are adopted (as for example links to text blocks or PDF annotations), the problem gets worse - the reference part of links gets longer and more complicated. The result is uglier and more cluttered. When searching for the text that contains multiple such links, the search preview is almost unreadable (see image below).

Until the WYSIWIG issue is resolved, you can use a small CSS-script that “hides” the reference part of the link in LivePreview editor:

div:not(.CodeMirror-activeline)> .cm-url{display:none !important; }

So instead of this mess:
image

you’ll see only the clean text:
image

The solution is unfortunately not entirely satisfactory:

  1. The hidden part of the link is still “there” in some way, which can sometimes make things difficult, for example when moving the cursor with the arrow keys.
  2. The script only works for MD-links; I don’t know of a way to hide the reference part of wiki-links.
  3. The script does not affect the preview in the search pane or the backlinks pane. So the search results are still very cluttered like this (it´s very difficult to see the text among cluttered links):

image

2 Likes

My view: someone wants a full fledged WYSIWYG Editor I see 2 Options

  1. Return to Word, LibreOffice, or other WYSIWYG Text-Editors, if you need LaTex and its full design mode you can use Lyx.
  2. Find someone to write a plugin that works like a WYSIWYG Editor (or do it yourself). Should not be too difficult using open source libraries.

Obsidian is a note editing and knowledge management programm with a totally different focus than those WYSIWYG editors. It offers a wide variety of export functions internally or via plugins. There is no need for any “WYSIWYG functionality” except for the existing ones. If you can’t live without “WYSIWYG”, export your files and choose Option 1.

Having full access to the source code of your data is one of the main benefits of Obsidian.

This is a totally superficial, redundant and useless discussion, sorry.

3 Likes

I completely agree that with your central point. True WYSIWYG means that what you see on the screen is exactly what you’ll get when you print or export to PDF. It requires the page layout and formatting features that modern word processors borrowed from graphic design programs.

A .docx file, for example, contains not just the text, but the complete formatting—font, margins, indentations, leading and kerning, even images. If send someone a Word file, I can be reasonably sure that the document will look the same when they open it in a modern version of Word as long as they have the fonts I’ve specified installed or I’ve embedded them in the file.

A .md file is just a plaintext file. It contains no actual formatting—just some extra characters like asterisks and pound signs that everyone has agreed represent the most basic level of formatting.

The whole point of markdown is to let you focus on the content of the writing without getting distracted by the finer details of formatting.

Live Preview isn’t called WYSIWYG because it isn’t WYSIWYG—it just hides the markdown characters so they don’t distract from the content of the writing.

Anything closer to true WYSIWYG than Live Preview falls into the realm of rich text notes/PKM apps, which do exist for those who don’t want to write in markdown. They don’t and can’t store user data in markdown files, but some can export to markdown.

Just want to nuance there that full WYSIWYG applications can (and some do) store the notes in markdown exactly like Obsidian does, the way you input data into your note on the screen doesn’t have to match the way the program stores them. Some elements in markdown like table are a real pain in the ass the author by hand conformant to the markdown standard and i’m pretty sure you will see a WYSIWYG exception for them in Obsidian in the future (Obsidian Roadmap - Obsidian) and be assured the tables will still be pure markdown on your disk despite you being able to type in with ease, and Source mode will still allow you to delete entire lines with your favorite keyboard shortcuts instead of mouse.

Obsidian might market itself as a “Note taking app”, the forums about PKM do still speaks a lot about how it is used beside just writing things. It’s feature set is closer to PKM tools, albeit on the “Long form writing” side of things compared to the outliners ones.

None of the request above ask that Obsidian move away from markdown file on the disk, people just want a smoother workflow and bar of entry to author their content, things that matter to them, and less spending time to solve alignment issues or syntax errors or forgetting how to do an highlight, cancel a quoted paragraph, align a column in a table or the syntax to write a callout.

Just like when Obsidian offered Preview mode in addition to Source mode, they can offer a WYSIWYG mode and people just keem using the mode they prefer to input their knowledge, isn’t that the most important in a PKM tool, to focus about my content, my structure, my ideas and not fight over what formatting should I use ?

10 Likes

Well, I hadn’t planned to add much to my statement, since I think I made myself clear. But, as it is, there are things I can respond.

  1. I concurr your statement with respect to tables. That’s why there already is a tool to facilitate working with them on the roadmap. And I think that would be a valid and helpful addition, especially when your content requires a lot of tables. In the meantime, there are tools that allow for easier working with tables (e.g. Markdown Table Editor).
    But: that is not what WYSIWYG would mean, as I understand the requests in this thread.
    Most common WYSIWYG editors (like Word Libreoffice etc.), even if they work with a variant of “markdown”, do - and have to - contaminate the Markdown file format. If there are those who don’t need to do this - feel free to use them!

  2. If there already are Editors that allow for WYSIWYG editing of markdown files, (And to be clear: I know some of them.) this only proves my point. Why not use them to edit your files? Or - as I already proposed - write a plugin based on the libraries that are used in these editors (provided they are open source)?
    That would also solve the problem of the individualisation of working with obsidian, that you are alluding to at the end of your post.

But there is a major misunderstanding in that: “my content, my structure, my ideas” does not mean that core Obsidian has to fulfill all the editing dreams of yours or someone elses. That’s exactly what community plugins are for!

2 Likes

full WYSIWYG applications can (and some do) store the notes in markdown exactly like Obsidian does, the way you input data into your note on the screen doesn’t have to match the way the program stores them.

I assume you’re talking about apps like Typora. They’re not true WYSIWYG; they’re similar to Obsidian’s current Live Preview mode, even though they might makes it easier to work with tables, etc. I know some people call them WYSIWYG, but they’re misusing the term.

The Obsidian roadmap used to informally say they were working on “WYSIWYG like Typora,” but by the time it showed up as an actual feature in the software, they’d changed the name to the more accurate Live Preview.

It doesn’t make any sense to try to turn a plaintext markdown app into a full-blown graphical word processor. If that’s what you want in a PKM app, you’ll probably be happier with something like Craft.

2 Likes

My only complaint with obsidian is that switching between editing view and reading view will cause jitter, this problem is especially obvious in canvas

2 Likes

If someone can workout this with a plugin for obsidian, I think this feature can be achieved

Techincal experts pl take a look - novel - npm

3 Likes

The lack of clean editing experience is the main reason I’m not using Obsidian.
If I want to move a block of text together with an image that’s a very complicated operation compared to any other note editing app where you can simply drag and drop.

The text jumping between preview and markdown is fancy idea but distracting from thinking / writing

11 Likes

One of the best things about Obsidian is how flexible it is and how easy it is to toggle things on/off. I would love the option to see a WYSIWYG toolbar that fades in/out. There are some plugins supporting this but I think you call could implement something much cleaner that combines it with hiding the markdown. I think this would bring a lot of new folks in.

5 Likes

I wonder if the amazing Lexical Playground could be implemented into obsidian either natively or as a plugin, due to lexical playground is made with ReactJS as well. Obsidian with that way of writing experience would be a dream.

1 Like

If you need more typography flexibility, check out my theme Dune, it’s available in Obsidians theme repo.