Mobile "plain-text mode" editor

[josegomezr]

Would it be possible to disable entirely all decorations (Like when the surrounding ** or ` would disappear when the cursor is not on the affected word) via configuration?

Something like the "eye" example for ReadOnly mode, but it converts the editor in "plain-text" mode, where it would be closer to a native textarea than anything else.

It'd greatly improve mobile editing experience for clumsy users like me that go through a hard time trying to put the cursor in the appropriate position on mobile 😅

For example:

-- Defines a new button that forces your UI into plaintext-mode mode
actionButton.define {
  icon = "eye",
  mobile = true,
  run = function()
    editor.setUiOption("forcePlainTextMode", true)
    editor.rebuildEditorState()
  end
}

And after activating it, the editor would not adjust indentations and/or hide the markdown syntax symbols at all, roughly like:

notice how all decorations are visible and they should always be visible while on "plain-text mode"

What do y'all think?

[bilogic]

I wrote about the same issue before seeing yours here https://github.com/silverbulletmd/silverbullet/issues/1685 where this time, I'm able to justify why it is hard aka how do you edit something you cannot see?

[PowerUser64]

Interesting idea. So, you select to render?

I suppose this could be a bit strange for copy/paste, since you wouldn't be copying the text you see on the screen, but rather you'd be copying the text you saw on the screen.

[josegomezr]

I'm able to justify why it is hard aka how do you edit something you cannot see?

Fully agree, I'm mostly clumsy on mobile and tapping on a decorated piece of text (like a link with bold) reflows the whole text, then if I try to tap on the link and miss, then the text reflows again and gets frustrating quite fast.

But wanna clarify that this is only for mobile, for the desktop/keyboard experience is great ✨

---

Interesting idea. So, you select to render?

Not sure if you meant that I currently select to render, or that I wish to select to render 😅

If the former is what you meant: No, I only noticed by accident that I could see most of the markdown decorations when selecting, and took the screenshots for the sake of painting a picture for the issue 😅

If the latter is what you meant: also no, I'd prefer something toggeable that makes the editor behave like a plaintext textarea and I decide when to enable/disable it via action buttons / commands.

[bilogic]

I thought of a simpler architecture approach: make the editor swappable, this way, nobody has to request customization to the current editor which is very high friction due to different views and expensive (re-implementing what other editors have done)

[josegomezr]

I think I found something that achieves this by complete accident

By reading these lines:

https://github.com/silverbulletmd/silverbullet/blob/ec9fcd1ced6dac6b6a5513497930747df28d6533/plugs/editor/editor.ts#L22-L28

It let me to the thought of: If I toggle markdownSyntaxRendering... what would it do?

actionButton.define {
  icon = "lock",
  -- mobile = true,
  run = function()
    editor.setUiOption("markdownSyntaxRendering", not editor.getUiOption("markdownSyntaxRendering"))
    editor.rebuildEditorState()
  end
}

And lo and behold, I can see the markdown syntax!

I'll do mobile tests later:

[bilogic]

nice, from your screenshot, it looks like StackEdit rendering style, i.e. headers made bigger

where did u insert the actionButton.define? and which version are you on atm? I had to fallback to 0.10.4

[josegomezr]

where did u insert the actionButton.define?

in the CONFIG file on a space-lua code block I added:

-- [...]

-- On mobile show all markdown AND start in readonly by default.
-- It improves the experience *significantly*.
if editor.isMobile() then
  editor.setUiOption("markdownSyntaxRendering", true)
  editor.setUiOption("forcedROMode", true)
end

-- [...]

-- Add the buttons on the header to control the readonly/rendering mode.
actionButton.define {
  icon = "lock",
  run = function()
    editor.setUiOption("forcedROMode", not editor.getUiOption("forcedROMode"))
    editor.rebuildEditorState()
  end
}

actionButton.define {
  icon = "eye",
  run = function()
    editor.setUiOption("markdownSyntaxRendering", not editor.getUiOption("markdownSyntaxRendering"))
    editor.rebuildEditorState()
  end
}

That's the final "cleaned up" version. I gave a couple of taps on mobile and feels drastically better. Only one "quirk" that I'd have to use more to see if it's bad or not: The editor still knows about cursors, when you tap on top of a lua expression (that would generate some dynamic content) that content would disappear, but if you tap away it comes back.

and which version are you on atm? I had to fallback to 0.10.4

I'm on 2.2.1-0-gf44f00f4

[bilogic]

you have a typo here

[josegomezr]

you have a typo here

hehe, edited the original msg, thanks!

[aphymi]

Heads up that toggling this behavior is the point of the Toggle Markdown Syntax Rendering command. It might be less clunky (and less prone to breaking) to use that command directly, rather than its internal UI option.

[bilogic]

Heads up that toggling this behavior is the point of the Toggle Markdown Syntax Rendering command. It might be less clunky (and less prone to breaking) to use that command directly, rather than its internal UI option.

Thanks, you are a godsend! But my 0.1x templates are not working in 2.x, specifically, I need a row of nav buttons at the top of my pages https://github.com/silverbulletmd/silverbullet/issues/1697

[josegomezr]

Refactored my command to:

actionButton.define {
  icon = "eye",
  run = function()
    editor.invokeCommand("Toggle Markdown Syntax Rendering")
  end
}

much cleaner