silverbulletmd
Mobile and virtual keyboards
Problem:
If you use a mobile device with a virtual keyboard (tested using Android and Google Chrome) to access https://play.silverbullet.md, then the virtual keyboard pops up and fills a significant portion of the screen each time you tap on the text. If you are just navigating the space, this is incredibly distracting.
Expected:
Navigating the space on mobile devices should not be a second or third class experience.
Solution:
Add a new command to toggle the editable flag of the CodeMirror editor. (https://codemirror.net/docs/ref/#view.EditorView%5Eeditable) (I have not actually tested this. But that flag makes sense based on my understanding of HTML5 and webbrowsers.)
After that command exists, it can be added to the actionButtons of the https://silverbullet.md/SETTINGS page and made mobile only like "{[Navigate: Back in History]}".
Forgot to mention. This is a "nice to have" not a "need to have". As long as I drag on the page, it does not place the cursor and open the keyboard. This is mostly for the times I accidentally touch the screen while holding the phone and thinking about the contents.
I like the proposed solution, however how do you handle keyboard navigation on a desktop (e.g. selecting links) if the CodeMirror editor does not have a caret anymore? Maybe on mobile, the toggle should set the editable flag to false, while on desktop it should set readOnly to true instead? I would love a read-only mode for desktop which not only keeps the cursor (for navigating inside the document similar to VIM's normal mode), but also hides the underlying markdown while navigating as it is quite distracting to navigate over a link (or other dynamic content) and having the editor switch to the markdown code when the cursor enters formatted text.
Such a read-only mode could also help solve https://community.silverbullet.md/t/any-way-to-make-template-list-results-selectable-with-keyboard/174 ?
I like the proposed solution, however how do you handle keyboard navigation on a desktop (e.g. selecting links) if the CodeMirror editor does not have a caret anymore? Maybe on mobile, the toggle should set the editable flag to false, while on desktop it should set readOnly to true instead? I would love a read-only mode for desktop which not only keeps the caret, but also hides the underlying markdown while navigating as it is quite distracting to navigate over a link (or other dynamic content) and having the editor switch to the markdown code.
It would make the desktop use of cursors stop working. It would also make the phone/tablet use of cursor to enter text stop working. That would be why it needs to be a command that toggles the option.
Such a read-only mode could also help solve https://community.silverbullet.md/t/any-way-to-make-template-list-results-selectable-with-keyboard/174 ?
Not really. This option would disable keyboard navigation/selection because of how keyboard navigation works in the underlying CodeMirror editor.
These are the exact problems I was trying to address in my comment.
If I read the documentation right, then setting readOnly to true for the CodeMirror-editor should make the browser still see the editor as a text-field, while ignoring any input-commands. My idea was that if the editor is set as readOnly, then it should not convert the text to markdown when caret reaches inside of content anymore, making it easier to navigate the document.
On mobile, there is no keyboard so it is more beneficial to simply set editable to false which will make the browser not see it as a text-field anymore.
There are two different options in CodeMirror.
- readOnly (https://codemirror.net/docs/ref/#state.EditorState%5EreadOnly) that sets if you can/should modify the text.
- editable (https://codemirror.net/docs/ref/#view.EditorView%5Eeditable) which sets if the browser sees the area as a text input field. (Trigger the virtual keyboard on click.)
I don't think either one should have an effect on rendering markdown. Rendering markdown should be a third option internal to SilverBullet and not tied to either of the other two.
For example. The https://silverbullet.md/ should have readOnly true (publicly hosted website without editing permission), editable should be toggelable (so mobile devices can disable the virtual keyboard), and markdown rendering should be an unrelated feature.
Your local SilverBullet should have readOnly false (your local editable instance), editable should be toggleable (so mobile devices can disable the virtual keyboard), and markdown rendering should be an unrelated feature.
I see the use case for this but it needs some investigation. Likely there should indeed be a button for this, because running commands via the palette for this would be too much of a pain.
Initially i was thinking if on mobile the editor would default to read only and then switch to edit mode when tapped or even double tapped (on plain text, not a link) somehow. Not sure this would work in practice though.
I see the use case for this but it needs some investigation. Likely there should indeed be a button for this, because running commands via the palette for this would be too much of a pain.
100% agree, I'll copy from the forum post the mention of mobile-only buttons for commands since 0.7.1. I just think adding it as a command is a nice touch for overall completion and consistency.
Alternative, but probably more work: Since this has state to it and is fairly central to the general app usage, could be nice to have it as a special button, similar to sync mode:
hideSyncButton: false
showEditButton: "mobile" | "desktop" | false | true
For that, we could use the edit icon and show it in a "pressed" state when editing is active, just like sync.
Initially i was thinking if on mobile the editor would default to read only and then switch to edit mode when tapped or even double tapped (on plain text, not a link) somehow. Not sure this would work in practice though.
I'd say it needs to be a toggle in a separate area, because I see some problems with this:
- user wants to click a link, but misses, and then misses again
- user tries to scroll but the touch gets interrupted and is parsed as two clicks
- it's raining, and the screen has some tiny drops of water on it and every touch is a total mess
- someone uses app on desktop 95% of the time, but they reference recipes from the phone when cooking, with wet fingers, and then chaos ensues (oddly specific, isn't it? 😄)
