A Typora-like editing mode (edit and preview at the same time)

can you share the CCS - or point to where you got it from

@Chrisg: see the downloadable CSS file here.

The complaint above, which I agree with, is that current hacks towards WYSIWYG mean it can be hard to click into the desired location for an actual edit. My suggestion was an attempt at solving that specific problem, short of developing a full blown WYSIWYG mode.

@icebear: I understand that, but hovering does not solve it. If one is in Edit mode one needs to be able to place the cursor for editing.

BTW, as one of the 1st adopters of this what I call pseudo-WYSIWYG I am fully aware of the issue. My workaround this irritating issue, as outlined by @dcoales is to comment out this line: div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag.

That way one still retains a lot of the pseudo-WYSIWYG experience, and have a more comfortable editing experience.

1 Like

TBH I’ve forgotten where I got the attached (354 Bytes) css snippets from (which is bad, since I can’t properly credit the original authors). I think I cut bits out of other snippet files linked to in the discord forum. I’ve made a couple of tiny edits myself so if anything doesn’t work that’s probably my fault rather than the original author’s.

@icebear I don’t have that line in my wysiwyg editor CSS. Is there another edit you can recommend to help with the cursor positioning.

wysiwyg editor.css (3.1 KB)
Edit mode bullets.css (354 Bytes) Coloured tag pils.css (1.6 KB)

2 Likes

We already have what you see is what you MEAN, this is just like any other markup language editor, what you want is what you see is what you GET.

1 Like

I am waiting for this mode eagerly. I have used to love typora for this mode for saving a lot of space of my screen.

2 Likes

We already have what you see is what you MEAN

We do not.

“WYSIWYM (Typora-like)” would mean that you can type in Markdown and see the resulting formatting in a single pane, including seeing your attached images, mermaid graphs, or other content inline - depicted in way that is structured and formatted, but not necessarily design-accurate.

As of now, you currently have to switch between Edit and Preview modes, or have two panes open. That’s the fundamental problem being addressed in this thread.

WYSIWYG means that you’ll see an accurate depiction of a final rendered output on screen or print. This is not what this particular thread is asking for. Since you could have any arbitrary text-editing CSS theme to suit your tired late-night novel-writing eyes, but then export your final document(s) to any other type of CSS theme or YAML-formatted output to suit your editor’s manuscript needs, for example. Or your website’s funky typography. There’s no particular reason for the two to be the same.

3 Likes

in fact, neither of us was right. Reading on the discord server there was a post by the obsidian team about it, but I cant find it anymore.
A wysiwym editor means that you do not see any rendering of your writing. This is an editor llike most other markup language editors, e.g. html editors.

A wysiwyg editor shows you the final output, what you will get when you print it.

This difference is explained in the wikipedia article for the wysiwym paradigm

Both of there are, however, not a typora-style editor, its own category, that uses wysiwym for the currently edited part and wysiwyg for the rest of the document.

1 Like

@Daemon: at the end of the day it does not matter what we call it, the devs know that what is meant is the Typora-style, which is what they are going for.

2 Likes

The California Coast theme and simply the hotkey Cmd + E have fulfilled almost all needs of a WYSIWYG editor for me. I’m still waiting for it, but not desperately.

@tav: you mean CC theme looks and behaves pretty much the same in Edit and Preview modes?

Yes :smiley:

Today is a sad day for humanity, Mobile apps were chosen before the WYSIWYG :sob:.
image

5 Likes

See my message above and cheer up.
You already have WYSIWYG and now you’ll have mobile apps as well.
It’s a good day.

3 Likes

Clutter Free Mode has been around for a long time and it is far from being the same thing, there are several cursor positioning problems which end up wasting more time than saving.

And most importantly, you cannot view images or work with tables correctly.

5 Likes

Only clutter free mode is available, it comes with many cursor problems (e.g. for links) that make it inconvenient and one cannot see pictures or work with tables properly. Unfortunately it is by no means close to a real WYSIWYG. :cry:

3 Likes

@tav: having to use Cmd+E means we do not have WYSIWYG, with WYSIWYG you don’t have to toggle like that. Furthermore, with WYSIWYG you can choose your theme.

California coast may emulate WYSIWYG, but that can also be achieved with other themes by adding snippets that do that, such as clutter-free, same font in both Edit and Preview, etc.

1 Like

Just for the record, Silver did a poll in early May, I only just found out about it and voted for an option.

Typora’s editing mode is brilliant. Absolutely support this feature.

4 Likes