self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-06-18 23:07:45 +02:00
Code Issues Releases Activity

Desktop: TinyMCE: Fixed clicking a link within a checkbox label

Browse Source
This commit is contained in:
Laurent Cozic
2020-05-04 23:08:36 +01:00
parent 9a2f0bee29
commit f2a1597ecc
3 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
View File

@ -2103,6 +2103,8 @@
var editorClickHandler = function (event) { var editorClickHandler = function (event) {
if (!isJoplinChecklistItem(event.target)) if (!isJoplinChecklistItem(event.target))
return; return;
if (event.offsetX >= 0)
return;
editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target }); editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
}; };
if (options.listType === 'joplinChecklist') { if (options.listType === 'joplinChecklist') {

14
Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts
View File

@ -40,6 +40,20 @@ const listState = function (editor: Editor, listName, options:any = {}) {
const editorClickHandler = (event) => { const editorClickHandler = (event) => {
if (!isJoplinChecklistItem(event.target)) return; if (!isJoplinChecklistItem(event.target)) return;
// We only process the click if it's within the checkbox itself (and not the label).
// That checkbox, based on
// the current styling is in the negative margin, so offsetX is negative when clicking
// on the checkbox itself, and positive when clicking on the label. This is strongly
// dependent on how the checkbox is styled, so if the style is changed, this might need
// to be updated too.
// For the styling, see:
// ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts
//
// The previous solution was to use "pointer-event: none", which mostly work, however
// it means that links are no longer clickable when they are within the checkbox label.
if (event.offsetX >= 0) return;
editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target }); editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
} }

3
ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts
View File

@ -38,10 +38,13 @@ pluginAssets[2] = function(theme:any) {
mime: 'text/css', mime: 'text/css',
text: ` text: `
/* https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element#comment39751366_7478344 */ /* https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element#comment39751366_7478344 */
/* Not doing this trick anymore. See Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts */
/*
ul.joplin-checklist li { ul.joplin-checklist li {
pointer-events: none; pointer-events: none;
} }
*/
ul.joplin-checklist { ul.joplin-checklist {
list-style:none; list-style:none;