Mobile: Show "Convert to Markdown" banner when opening an HTML-format note

[personalizedrefrigerator]

Summary

Follow-up to #13802.

This pull request:

• Adds UI for the convertNoteToMarkdown command on mobile.
• Updates the convertNoteToMarkdown command to open the first converted note on mobile. Previously the parent folder of the first converted note would be selected.
• Refactors the desktop "convert to Markdown" banner to share code with the new mobile "convert to Markdown" banner.
  • The shared logic is stored in lib/components/shared/NoteEditor/WarningBanner/useConvertToMarkdownBanner.ts.

Possible issues

• On mobile, the note's parent notebook is opened after converting a note to Markdown. This is because of this mobile-specific reducer logic, that runs when the original note is deleted:
  

  joplin/packages/app-mobile/root.tsx

  Line 162 in f9d5874

  await NavService.go('Notes', { folderId: parentId });

Screen recordings

Desktop: Regression testing

Screencast.from.2025-12-02.09-41-07.webm

The above screen recording shows:

• Opening an HTML note.
• Clicking "convert it" in the Markdown conversion banner.
  • At this point, a "The note has been converted to Markdown and the original note has been moved to the trash" banner is shown and the note's content is converted to Markdown.
• Opening the trash.
  • The original version of the note is in the trash.

Web

Screencast.from.2025-12-02.09-36-23.webm

The above screen recording shows:

• Opening an HTML note in the Markdown editor.
• Clicking "convert it".
  • At this point, a "The note has been converted to Markdown and the original note has been moved to the trash" dialog is shown and the note's content is converted to Markdown.
• Opening the converted note from the note list, checking that its content is in Markdown format.
• Opening the trash folder, verifying that the original note is in the trash.

Other testing

It has also been manually verified on both desktop and web that:

• Clicking "Do not show this message again" disables the banner.
• The banner can be re-enabled in settings > note > advanced.

New automated tests have been added to NoteEditor.test.tsx.

[personalizedrefrigerator]

Switching to link-buttons allows using the onPress callbacks directly (without the .preventDefaults).

[personalizedrefrigerator]

Note: This case may not have been handled before this pull request. (On desktop, the conversion banner seems to have been previously shown for read-only notes).

[laurent22]

I wonder if we can do better in terms of UI?

• First I don't think it should show a warning sign as it's mostly an information message (on desktop we probably shouldn't put this in an orange banner either but it's another issue)
• And I wonder if that message is a bit big? Especially on mobile it may eat up quite a bit of screen space? It's reasonable to display it on desktop since usually there's enough space but there are different considerations for mobile
• Also there are alignment issues but that can be adjusted easily

[personalizedrefrigerator]

• And I wonder if that message is a bit big? Especially on mobile it may eat up quite a bit of screen space? It's reasonable to display it on desktop since usually there's enough space but there are different considerations for mobile
• Also there are alignment issues but that can be adjusted easily

The banner currently uses the react-native-paper default styles. These can be adjusted, but I would prefer to avoid doing this, if we can instead switch to a different UI. Here are a few alternatives:

• Replace the banner with a dialog:
  • Only show the dialog when opening an HTML note in the Markdown editor.
  • Give the user three options: 1) Edit as HTML, 2) Convert to Markdown, 3) Don't show again.
• Use a Snackbar component instead of a Banner. A Snackbar should take up less vertical space.
• Replace the banner with a toolbar button.
• Allow the banner to be scrolled out of view: Move the banner into the WebView, at the top of the editor.