Fully visual editor mode (WYSIWYG / WYSWYG)

Feature requests
23

I have to disagree with you, and back up what @BarryPorter13 is saying. I would think the focus of Obsidian is plain-text editing at the core of its editing functionality.

For example, what you consider “half-baked” editing functionality is the perfect editing experience for me.

I want everything to turn into plain text when I click on it (images/tables/callouts/etc). I want to know that my Markdown documents are perfectly formed, because the reason I’m using Obsidian is to end up with Markdown for longevity. It’s critical that it’s readable even as plain text and preferable that it’s also nicely formatted as plain text.

I think really it’s just different strokes for different folks, but that’s why there are so many options out there in the market. Obsidian awesomely fits the niche of Markdown + local files, and I absolutely love it.

Something else to note about your screenshots is how the mouse is much more required for using the CKEditor interface, and only a keyboard is needed for editing complex Obsidian assets like callout boxes and tables. Again it’s different strokes/folks. Using a mouse might be an enjoyable part of the editing experience for you, but for me it’s distracting and takes me out of the flow of writing. I love that I can get everything done without ever taking my hands off the keys while I write.

5 Likes
24

It is strange that you see it that way but prefer live preview mode. Obsidian could be considered as plain text editor, but only when it is used in source mode.

It is plain text editor for me, because I’m also (by some reason) annoyed by this text jumping around when markdown is shown/hidden in LP mode. Allegedly there is only one WYSIWYG editor for markdown it is note editor in the thebrain app. So, you can’t say there are many alternatives.

4 Likes
25

Ckeditor 5 recommended above, claims it

Then there’s Typora. A database app can do anything it wants, because files are just import and export. More complex challenge for a file editor because there will always be a need sometimes to check/edit the source (what’s actually being saved in the file), even if most of the time is attempting to edit the formatted output. Live Preview is just one choice for the middle ground between Source and Reading View. But even when I used Obsidian more, I’d often write in other editors including Typora; that’s the advantage of a file editor - you can use more than one editor on the same file, even at the same time.

1 Like
26

When live preview was designed, the decision to retain the markdown feeling while editing was explicit. I don’t think we are gonna go down the path of a GUI that looks like a word processor and writes markdown in the background. Also, sometime these type of editors can produce a document that looks good in reader but it is messy at the source.

If somebody wants to write a plugin using this CKEditor, or anything else, they are welcome to do so. I am gonna move this to plugin ideas.

4 Likes
27

Hi all,

I’d love the ability to have a rich-text editor popup somewhere on the Obsidian screen (indentation, text alignment, etc). for those times when you’d like to take a break from markdown and just get your formatting down ask quickly as possible and with very little fiddling.

I think it could be very useful especially when getting started with Obsidian, to quickly get your thoughts written down

9 Likes
28

Is this request the same as A Typora-like editing mode (edit and preview at the same time)?

29

Hello,

No, more like an actual rich text one can navigate with their mouse, in addition to using markdown. Hope this helps! :

30

So, in other words, an edit bar with formatting options. Exclusive of WYSIWYG or markdown, you just want to be able to select text and click a visual button to e.g., set bold.

3 Likes
31

Something like this maybe?

https://nhn.github.io/tui.editor/latest/tutorial-example03-editor-with-wysiwyg-mode

3 Likes
32

@Nelvin,

Yes something like that, exactly! :slight_smile:

33

I second this. as someone who’s new to markdown this is a big barrier to entry on the desktop client. glad to see it exists on mobile though!

that being said the HTML conversion is a huge help

1 Like
34

It’s not in the community store yet (but should be soon).

cc @Chetachi

2 Likes
35

Hi, all!

New Obsidian user, even newer Obsidian dev, but long-time nerd and dev. :slight_smile:

I’d like to create a simple plugin that prevents Obsidian from rendering the asterisks, underscores, and equal signs (*, _, =) in Preview mode for bold, italics, highlights, etc.

I’ve configured Obsidian such that only Markdown on the cursor’s line is shown. Still, the sudden “jumping” of text is distracting to me; I’d much prefer that those markdown characters effectively “disappear” once I’ve entered them. In fact, I plan on usually using command hotkeys to bold/italicize/highlight.

I call this idea, “Lo-Fi WYSIWYG” - there’s a bit more to it, but I think it would improve my personal UX significantly, and others might appreciate it as well.

Any high-level tips on how I’d set this up? I’m a professional developer of 15-20 years, so no worries on getting too technical.

For starters, I’m a little confused on whether I should use a “view plugin” or a “state field”. I’ve reviewed this section, but it’s still unclear to me.

I’m not planning on doing anything that directly alters the vertical layout. However, adding/removing characters (e.g. the asterisks in **bold**) could effectively alter the vertical layout, right?

I’d greatly appreciate it if someone can clear this up! I’d prefer to not start down the wrong path entirely.

And if you have high-level advice on how I’d make it happen, I’m all ears. It looks like I’ll have to work with CodeMirror’s syntaxTree(), I think?

Thanks in advance for any pointers! I’m excited to start contributing. I have lots of ideas bouncing around my head.

5 Likes
36

A little more detail on what I’m planning on doing:

  • If the cursor is inside of a bolded string of characters and the user hits the “Bold” hotkey (Cmd B on macOS), the string should be unbolded (instead of just inserting the “Bold template” again)
  • Similar to the above for italics
  • It looks like “Toggle Highlight” doesn’t have an official hotkey, so to support that, I’d likely have to alter my approach a bit. This actually makes me think that maybe a more generic approach would be to add support for modifying any of the “Toggle” shortcuts so they actually toggle (instead of just inserting the relevant template again)
  • Links aren’t automatically “expanded” to show the markup, either. The user would need to hit the “Insert Markdown Link” hotkey (e.g. Cmd K on macOS) to expand the link that contains the cursor.
  • In the longer-term, it might be useful to some users to add a popup for adding/editing link URLs, but that’s deviating from my goals of “Lo-Fi” WYSIWYG. (That would be more “Hi-Fi”)
2 Likes
37

Maybe I shouldn’t answer as I don’t have the definitive answer, and I’m kind of in the same situation as being a developer, but green in Obsidian development. But…

Reading the above section, I think a view plugin would be the thing, due to the fact that what you alter has a limited range, and should be within the viewport.

I saw the mention on vertical layout, and I thought about it too, but I’m still leaning towards a view plugin.

However, the main reason I wanted to answer is that I’m thinking don’t remove all indicators for those toggles you implement. Or, don’t just rely on keyboard commands.

Yes, the items do have visual implications on the text, but I do believe that if you implement something like this you should also have a toolbar (or similar) that both show the state of what you can change, the current state, and have a tooltip as to which hotkey toggles it.

And lastly, you’re keeping the markdown markup as is? You’re not planning on removing the markup from the document, right? You’re just hiding it from the editor view?

38

Thank you so much for your response, holroy!

Yes, I’m definitely not planning on altering the Markdown. That is, of course, with the exception of the functionality to “unbold the currently-bolded section if the ‘Bold’ hotkey is pressed”. You could argue that should be a separate plugin, anyway, I suppose. The core of what I’m trying to accomplish is to simply hide those “Markdown characters” without altering the underlying structure of the document.

I appreciate your perspective on the toolbar! I originally thought that I might want to head that direction. After doing some research, it seems that most threads that I found about “rich text” plugins within Obsidian were largely dismissed (often somewhat aggressively) by the community. In other words, I don’t think there is a currently a lot of demand for a “full” rich text editing experience.

The “Lo-Fi” experience, on the contrary (i.e. hotkeys only), would be very useful for me and likely others as well. Regardless, even if I end up implementing more of a “full” rich text editing experience, the “Lo-Fi” experience is essentially a prerequisite anyway (The “full” experience provides a superset of the features of the “lo-fi” experience). So, might as well start there.

Does that seem reasonable?

1 Like
39

I see the point related to Obsidian not being a full fledged rich text editing experience, but I do believe that when you remove the visual cues on where (some) of the formatting is, it would be nice to have some indicator somewhere besides the pure bold/italic text. Not quite sure why, and maybe that’s just me, but it feels like it should be there somehow.

If I get a better grip on how to Obsidian plugins, I might come back with some tips and pointers, but for now I think you’re about as knowledgable on this topic as me… :smiley:

Good luck with your endeavours.

1 Like
40

Related: Fully visual editor mode (WYSIWYG) - #26 by WhiteNoise

41

Maybe related too Choice of Prosemirror as code editor

42

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