# Mobile: Markdown Toolbar

**URL:** <https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089>\
**Category:** Features\
**Tags:** gsoc-2022\
**Created:** [17 June 2022 04:52 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089 "2022-06-17T04:52:34Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![ccvbc](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/ccvbc/32/14193_2.png) [@ccvbc](https://discourse.joplinapp.org/u/ccvbc)\
**Post date:** [2 July 2022 01:35 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/21 "2022-07-02T01:35:06Z")

</div>

the photo

 ![Screenshot_20220702_092530](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/f/fd87808c730c46d38b6b9e681ebb32fec48d2b64.jpeg)

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [2 July 2022 01:45 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/22 "2022-07-02T01:45:04Z")

</div>

Be sure to enable the beta editor in settings!

---

<div class="post-metadata">

**Author:** ![ccvbc](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/ccvbc/32/14193_2.png) [@ccvbc](https://discourse.joplinapp.org/u/ccvbc)\
**Post date:** [2 July 2022 01:59 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/23 "2022-07-02T01:59:58Z")

</div>

Thank you very much, to help you increase your design inspiration. I've deliberately recorded videos about other apps I use for your reference.

> Thank you for everything you do.

app: ankidroid, feishu (probably you haven't heard of it)

Video sharing link

> [https://1drv.ms/u/s!AjUhMEyrls9\_0hP8q3MTBWJ8LsAT?e=XKvm1a](https://1drv.ms/u/s!AjUhMEyrls9_0hP8q3MTBWJ8LsAT?e=XKvm1a)

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [2 July 2022 13:28 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/24 "2022-07-02T13:28:04Z")

</div>

> **[Release Beta Editor Pre-Release (v5) · personalizedrefrigerator/joplin](https://github.com/personalizedrefrigerator/joplin/releases/tag/beta-editor-beta-5)**
>
> Pressing the code button twice creates a block code region (similar for math).
> Preserve indentation levels when changing list types.
> Improve auto-indentation of nested lists

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [3 July 2022 07:10 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/25 "2022-07-03T07:10:20Z")

</div>

This is great, how to let software developers see this, so that it can be listed on the Google Store so that more people can feel the charm of this version.

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [3 July 2022 07:21 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/26 "2022-07-03T07:21:08Z")

</div>

GSoC is a collaboration between contributors and open source organisations over the summer. This is one of the selected projects.  
If the work is done and we agree that the feature is complete and can be merged then you will of course see it in a future release.

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [3 July 2022 07:27 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/27 "2022-07-03T07:27:32Z")

</div>

Ok, I'm very much looking forward to it.

---

<div class="post-metadata">

**Author:** ![dimi-huer](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dimi-huer](https://discourse.joplinapp.org/u/dimi-huer)\
**Post date:** [3 July 2022 19:00 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/28 "2022-07-03T19:00:08Z")

</div>

Thank you for taking the time to build a pre-release. I don't know which functions are left to implement or what exactly you are left with. I like that changes between the submenus are smooth. I would still vote for some kind of customisability (order, inside a group or not, disable) as especially on a tablet there's plenty of space to add at least a few more symbols. I found the placement of formatting (bold, italicize) together with code and link a bit counterintuitive and would expect it to be first a separate group and second either the first item or between headers and lists. I also got a bit confused by the cross in a box as a go back button.

Two bugs I ran into (v5 with your apk):

1. I've had moments when the "hide keyboard button" disappeared. I can't really reproduce it in a consistent manner. It happened after I played around several times with lists or sometimes if I would start to edit a note again.
2. I couldn't add a list in the style ordered - unordered:

```auto
1. Item
    - Subitem
2. Item
    - Subitem

```

If I change a subitem to be unordered instead of ordered the whole list changes to be unordered. I think the function should only act on the same level of the list, but it should act on the whole list if all of it is selected.

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [4 July 2022 13:51 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/29 "2022-07-04T13:51:44Z")

</div>

Thank you for testing the APK!

> [@dimi-huer](#):
>
> I found the placement of formatting (bold, italicize) together with code and link a bit counterintuitive and would expect it to be first a separate group and second either the first item or between headers and lists.

I grouped the functions that I frequently used together in the same submenus. This is a good argument for customizability!

I would like to get a functional version of the toolbar merged before adding customizability, however — I plan to spend the second half of GSoC on a different component of the mobile editor.

> [@dimi-huer](#):
>
> I've had moments when the "hide keyboard button" disappeared. I can't really reproduce it in a consistent manner. It happened after I played around several times with lists or sometimes if I would start to edit a note again.

I've noticed that, too, but only on Android ( **edit** : but only on my physical Android device — not on the emulator).

I haven't noticed this happening on iOS (yet), which is where the button is most needed (I'm hiding the built-in `done` button on iOS for extra space). I could remove it from the toolbar on Android, but I still find it more convenient than hiding the keyboard with the system button.

I'm currently showing/hiding the button based on [`Keyboard::keyboardDidShow` and `Keyboard::keyboardDidHide`](https://github.com/personalizedrefrigerator/joplin/compare/beta-editor-beta-5...beta-editor-beta-6) events. I could instead show/hide the button based on whether the WebView has focus, but this wouldn't handle the case where the search dialog has focus and would show the 'hide keyboard' button even if the user is using a hardware keyboard...

> [@dimi-huer](#):
>
> 1. I couldn't add a list in the style ordered - unordered:
> 
> ```auto
> 1. Item
> - Subitem
> 2. Item
> - Subitem
> 
> ```
> 
> If I change a subitem to be unordered instead of ordered the whole list changes to be unordered. I think the function should only act on the same level of the list, but it should act on the whole list if all of it is selected.

That should be fixed in version 6!  
**Edit** : It works in version 6, but the list items need to have different indentation levels before pressing the toggle button. Changing this to always not auto-select the containing list could make sense, though!

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [4 July 2022 13:56 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/30 "2022-07-04T13:56:51Z")

</div>

> **[Release Beta Editor Pre-Release (v6) · personalizedrefrigerator/joplin](https://github.com/personalizedrefrigerator/joplin/releases/tag/beta-editor-beta-6)**
>
> This release fixes bugs in list toggling, the search GUI, and addresses several minor accessibility issues.
> Full Changelog: beta-editor-beta-5...beta-editor-beta-6

---

<div class="post-metadata">

**Author:** ![dimi-huer](https://avatars.discourse-cdn.com/v4/letter/d/85f322/32.png) [@dimi-huer](https://discourse.joplinapp.org/u/dimi-huer)\
**Post date:** [5 July 2022 08:42 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/31 "2022-07-05T08:42:15Z")

</div>

> [@personalizedrefriger](#):
>
> I haven't noticed this happening on iOS (yet), which is where the button is most needed (I'm hiding the built-in `done` button on iOS for extra space). I could remove it from the toolbar on Android, but I still find it more convenient than hiding the keyboard with the system button.

Maybe my android version is too old or it is due to Samsung's android, but I have to admit I actually don't have this button natively on a Samsung galaxy note 10.1 2014 edition. So I am happy that you added it for both.

> [@personalizedrefriger](#):
>
> That should be fixed in version 6!  
> **Edit** : It works in version 6, but the list items need to have different indentation levels before pressing the toggle button. Changing this to always not auto-select the containing list could make sense, though!

I can confirm changing a subitem works (v6). However, I didn't manage to get the numbered list to continue. Pressing enter twice doesn't work to get back to default level (I guess this wasn't implemented) and if I change the indentation with the according toolbar button, the unordered list button stays selected and trapped in this state. Additionally, if I change the indentation of any ordered list element it's number doesn't default to 1. (only if I switch it to unordered and back to ordered). I'll try again tonight and will test more of the functionality.

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [7 July 2022 03:00 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/32 "2022-07-07T03:00:47Z")

</div>

Thank you for your feedback!

> [@dimi-huer](#):
>
> Pressing enter twice doesn't work to get back to default level

It works for me if I press enter three times (this is a result of CodeMirror's built-in markdown support).

> [@dimi-huer](#):
>
> Additionally, if I change the indentation of any ordered list element it's number doesn't default to 1.

I've implemented list re-numbering on indentation/de-indentation. That should fix the issue!

## New pre-release

> **[Release Beta Editor Pre-Release (v7) · personalizedrefrigerator/joplin](https://github.com/personalizedrefrigerator/joplin/releases/tag/beta-editor-beta-7)**
>
> This release adds:
> 
> Automatic list re-numbering on indentation/deindentation
> A spellcheck button
> 
> When enabled, spellcheck only applies to non-code/url/math regions.
> 
> 
> 
> 
> Indentation has also been c...

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [7 July 2022 15:21 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/33 "2022-07-07T15:21:03Z")

</div>

I think the mobile Markdown toolbar should be designed like a PC. Tablet computers like iPad, coupled with wonderful magic keyboard , I think his typing experience is close to the PC end. We should not be limited to the mobile terminal It's just the past impression of the touch screen.

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [7 July 2022 15:47 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/34 "2022-07-07T15:47:38Z")

</div>

If you can add the“Add time” button. recently in record time, I think it is very important

---

<div class="post-metadata">

**Author:** ![Daeraxa](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/daeraxa/32/6172_2.png) [@Daeraxa](https://discourse.joplinapp.org/u/Daeraxa)\
**Post date:** [7 July 2022 16:13 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/35 "2022-07-07T16:13:41Z")

</div>

I think this is part of a wider discussion, I don't want to derail things in this topic too much.

Basically I see three types of mobile devices/uses of devices:

- Phone - entirely touch driven
  - This is what we are primarily focusing on here with this toolbar because this is the area in most need

- Tablet - Mostly touch driven with occasional keyboard support
  - The needs on tablet are similar to mobile but currently proper tablet support is limited - something that is also being worked on as part of GSoC - [Joplin Mobile Tablet Layout](https://discourse.joplinapp.org/t/joplin-mobile-tablet-layout/25775)

- Mobile/tablet desktop, "pro" tablets - see [Mobile app functionality improvements](https://discourse.joplinapp.org/t/mobile-app-functionality-improvements/22221#dreaming-of-the-future-3)

So for this we are mostly concerned about phones and "normal" tablets where a keyboard isn't going to be used. This is mostly so that markdown syntax can be inserted into the editor without having to switch through a bunch of keyboard layouts or require the user to learn markdown syntax.

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [8 July 2022 05:19 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/36 "2022-07-08T05:19:51Z")

</div>

Whether you can add a button for Insert Time. 🙏 🙏

![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b555b0df7bea2dbff723265cd207e1738081c523.png)  
 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/b5d62149f7cee3224900fb095888def96b74ffda.png)

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [8 July 2022 06:03 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/37 "2022-07-08T06:03:12Z")

</div>

> **[Release Pre-release: Markdown toolbar demo (v8) ·...](https://github.com/personalizedrefrigerator/joplin/releases/tag/markdown-toolbar-beta-8)**
>
> Adds an 'insert current time' button to the toolbar.
> Full Changelog: beta-editor-beta-7...markdown-toolbar-beta-8

> [@ammm](#):
>
> Tablet computers like iPad, coupled with wonderful magic keyboard , I think his typing experience is close to the PC end. We should not be limited to the mobile terminal It's just the past impression of the touch screen.

Please note that some keyboard shortcuts (ctrl+b for bold, ctrl+] for indent, ctrl+i for italicize, ctrl+` for code) should work — please let me know if any expected shortcuts are missing!

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [14 July 2022 06:29 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/38 "2022-07-14T06:29:10Z")

</div>

I have some new ideas about customizing the toolbar Here, I use HTML image to, for example.

[https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/8/812433083afe30ac0e212abe97d53bc78a767691.m4v](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/8/812433083afe30ac0e212abe97d53bc78a767691.m4v)

---

<div class="post-metadata">

**Author:** ![ammm](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@ammm](https://discourse.joplinapp.org/u/ammm)\
**Post date:** [14 July 2022 06:30 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/39 "2022-07-14T06:30:48Z")

</div>

@personalizedrefriger

---

<div class="post-metadata">

**Author:** ![personalizedrefriger](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/personalizedrefriger/32/13210_2.png) [@personalizedrefriger](https://discourse.joplinapp.org/u/personalizedrefriger)\
**Post date:** [14 July 2022 07:01 UTC](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089/40 "2022-07-14T07:01:07Z")

</div>

I agree! That would be very useful!

CodeMirror 6 (what the beta editor is using) has [built-in snippet support](https://codemirror.net/docs/ref/#autocomplete.snippet) (try typing `for` and pressing `enter` in the editor on their [home page](https://codemirror.net/).

I would like to allow users to input custom snippets (probably a new submenu with 'edit snippets', 'accept snippet suggestion', 'next snippet field', and 'previous snippet field').

[Previous page](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089.md?page=1)

[Next page](https://discourse.joplinapp.org/t/mobile-markdown-toolbar/26089.md?page=3)