self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

Desktop: Add support for higlighting text from Rich Text editor

Browse Source
This commit is contained in:
Laurent Cozic
2021-03-16 19:39:35 +00:00
parent 35063ac05c
commit f3b2ca4752
7 changed files with 41 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app-cli/tests/html_to_md/mark.html Normal file
View File

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

1
packages/app-cli/tests/html_to_md/mark.md Normal file
View File

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

18
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@@ -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',

5
packages/app-desktop/gui/note-viewer/index.html
View File

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

2
packages/lib/models/Setting.ts
View File

@@ -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}` },

5
packages/renderer/noteStyle.ts
View File

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

16
packages/turndown/src/commonmark-rules.js
View File

@@ -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',