Fully visual editor mode (WYSIWYG / WYSWYG)

Obsidian is not a WYSIWYG program. it IS a PLAIN TEXT editor that works across many operating systems, and is extensible thru plug ins and CSS. There are many many WYSIWYG programs you can use.

2 Likes

Obsidian is everything BUT a PLAIN TEXT editor. It is a rich editor on steroids ()letā€™s call it plugins, windows management, shortcuts, and customizations). How can you even say that?

This is not a poisoned comment, I try to be as constructive as I can.

The truth is that the current live preview mode is unintuitive and very distracting when editing it. It is half-baked. The main problem is that the text jumps when moving the cursor around. Human brains are not capable of handling sudden movements without a transition or direction. For instance, editing a simple link makes the whole interface blink. Not even talking about tables, quotes, calloutsā€¦ etc.
The solution should be handle the same way CKEditor and other advance rich editors do it.

obsidian 1

Please go ahead and try it for yourself: CKEditor 5 Demo - Rich Text Editor ready to use
ckeditor

8 Likes

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

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

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

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

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

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

Hello,

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

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

Something like this maybe?

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

3 Likes

@Nelvin,

Yes something like that, exactly! :slight_smile:

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

Itā€™s not in the community store yet (but should be soon).

cc @Chetachi

2 Likes

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

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

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?

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

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

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