Desktop: Add support for higlighting text from Rich Text editor

packages/app-cli/tests/html_to_md/mark.html

@@ -0,0 +1 @@
+Here: <mark>Highlight this</mark>, but not this.

packages/app-cli/tests/html_to_md/mark.md

@@ -0,0 +1 @@
+Here: ==Highlight this==, but not this.

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -543,7 +543,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			const toolbarPluginButtons = pluginCommandNames.length ? ` | ${pluginCommandNames.join(' ')}` : '';
 
 			const toolbar = [
-				'bold', 'italic', '|',
+				'bold', 'italic', 'joplinHighlight', '|',
 				'link', 'joplinInlineCode', 'joplinCodeBlock', 'joplinAttach', '|',
 				'bullist', 'numlist', 'joplinChecklist', '|',
 				'h1', 'h2', 'h3', 'hr', 'blockquote', 'table', `joplinInsertDateTime${toolbarPluginButtons}`,
@@ -571,6 +571,9 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				localization_function: _,
 				contextmenu: false,
 				browser_spellcheck: true,
+				formats: {
+					'joplin-highlight': { inline: 'mark', remove: 'all' },
+				},
 				setup: (editor: any) => {
 
 					function openEditDialog(editable: any) {
@@ -644,6 +647,19 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 						},
 					});
 
+					editor.ui.registry.addToggleButton('joplinHighlight', {
+						tooltip: _('Highlight'),
+						icon: 'highlight-bg-color',
+						onAction: async function() {
+							editor.execCommand('mceToggleFormat', false, 'joplin-highlight');
+						},
+						onSetup: function(api: any) {
+							editor.formatter.formatChanged('joplin-highlight', function(state: boolean) {
+								api.setActive(state);
+							});
+						},
+					});
+
 					editor.ui.registry.addButton('joplinCodeBlock', {
 						tooltip: _('Code Block'),
 						icon: 'code-sample',

packages/app-desktop/gui/note-viewer/index.html

@@ -26,11 +26,6 @@
 			padding-bottom: 400px;
 		}
 
-		mark {
-			background: #F7D26E;
-			color: black;
-		}
-
 		.mark-selected {
 			background: #CF3F00;
 			color: white;

packages/lib/models/Setting.ts

@@ -785,7 +785,7 @@ class Setting extends BaseModel {
 			'markdown.plugin.audioPlayer': { storage: SettingStorage.File, value: true, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable audio player')}${wysiwygNo}` },
 			'markdown.plugin.videoPlayer': { storage: SettingStorage.File, value: true, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable video player')}${wysiwygNo}` },
 			'markdown.plugin.pdfViewer': { storage: SettingStorage.File, value: !mobilePlatform, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['desktop'], label: () => `${_('Enable PDF viewer')}${wysiwygNo}` },
-			'markdown.plugin.mark': { storage: SettingStorage.File, value: true, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable ==mark== syntax')}${wysiwygNo}` },
+			'markdown.plugin.mark': { storage: SettingStorage.File, value: true, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable ==mark== syntax')}${wysiwygYes}` },
 			'markdown.plugin.footnote': { storage: SettingStorage.File, value: true, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable footnotes')}${wysiwygNo}` },
 			'markdown.plugin.toc': { storage: SettingStorage.File, value: true, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable table of contents extension')}${wysiwygNo}` },
 			'markdown.plugin.sub': { storage: SettingStorage.File, value: false, type: SettingItemType.Bool, section: 'markdownPlugins', public: true, appTypes: ['mobile', 'desktop'], label: () => `${_('Enable ~sub~ syntax')}${wysiwygNo}` },

packages/renderer/noteStyle.ts

@@ -302,6 +302,11 @@ export default function(theme: any) {
 			display: none;
 		}
 
+		mark {
+			background: #F7D26E;
+			color: black;
+		}
+
 		/* =============================================== */
 		/* For TinyMCE */
 		/* =============================================== */

packages/turndown/src/commonmark-rules.js

@@ -54,6 +54,22 @@ rules.heading = {
   }
 }
 
+// ==============================
+// Joplin format support
+// ==============================
+
+rules.highlight = {
+  filter: 'mark',
+
+  replacement: function (content, node, options) {
+    return '==' + content + '=='
+  }
+}
+
+// ==============================
+// END Joplin format support
+// ==============================
+
 rules.blockquote = {
   filter: 'blockquote',