Hey Alan,
Is it really? Aside from changing the look of existing apps with css, I can’t code at all. So really, I don’t know.
Your elaboration would help explain a common frustration I have.
Markdown is as easy as typing text. First a * then whatever then another *. Formatting stuff on the fly is a whole lot more intricate than that.
1 Like
+1 to this, would love to be able to render latex in edit mode
1 Like
+1 for prioritizing WYSIWYM over the mobile app 
7 Likes
Typora is indeed a great model to follow for UI.
I’m very much looking forward to hybrid editor - less mental bandwidth spent on multiple inputs, and allows you to focus on what you’re writing.
1 Like
Thanks - WYSIWYG mode will do me!
Hello!
+1 for WYSIWYG mode sooner.
Thank you.
I’m using a downloadable CSS snippet that removes much of the markdown from edit mode and presents lines pretty much as they will appear in preview mode. So bullets look like bullets, bold is bold, highlighted text is highlighted, tickboxes look like tickboxes, headers are underlined and the right size etc all without unsightly dashes, hashes underlines and equals signs scattered through the text. You only see the markdown when you click on a paragraph to edit it. When you click off the markdown symbols disappear.
This does have some clunky aspects though. When you click on a paragraph, because the CSS has moved things, the cursor doesn’t always end up where you expected. Also you can’t show images or tables yet.
If they could fix these couple of niggles I would be happy with this approach. I.e. you use markdown when you are clicked into a paragraph but it previews when you click off it. I’ve no idea if this would be harder or easier to implement than a full WYSIWYG editor that never shows markdown.
I would be quite happy with this implementation also, if it is much easier/faster to do than a full blown WYSIWYG.
One slight suggestion - to make the visual switch to Markdown on mouse over also, rather than just when the cursor is within the line. This would help avoid the problem of clicking in the wrong place.
Yes, but if you want to edit you still need to put the cursor in the line. Being in Edit mode is, after all, to edit.
can you share the CCS - or point to where you got it from
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