From f2a1597ecc7df25b15f315d2a2eefa585cb7a8cc Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Mon, 4 May 2020 23:08:36 +0100
Subject: [PATCH] Desktop: TinyMCE: Fixed clicking a link within a checkbox
 label

---
 .../NoteEditor/NoteBody/TinyMCE/plugins/lists.js   |  2 ++
 .../TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts  | 14 ++++++++++++++
 .../lib/joplin-renderer/MdToHtml/rules/checkbox.ts |  5 ++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js b/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
index 6a5e2ac3c6..e4ac5685b1 100644
--- a/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
+++ b/ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
@@ -2103,6 +2103,8 @@
         var editorClickHandler = function (event) {
           if (!isJoplinChecklistItem(event.target))
             return;
+          if (event.offsetX >= 0)
+            return;
           editor.execCommand('ToggleJoplinChecklistItem', false, { element: event.target });
         };
         if (options.listType === 'joplinChecklist') {
diff --git a/Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts b/Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts
index 6515e308ac..d83afe5f1e 100644
--- a/Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts
+++ b/Modules/TinyMCE/JoplinLists/src/main/ts/ui/Buttons.ts
@@ -40,6 +40,20 @@ const listState = function (editor: Editor, listName, options:any = {}) {
 
     const editorClickHandler = (event) => {
       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 });
     }
 
diff --git a/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts b/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts
index 8e76cbf8b8..744746cdce 100644
--- a/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts
+++ b/ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts
@@ -38,10 +38,13 @@ pluginAssets[2] = function(theme:any) {
 			mime: 'text/css',
 			text: `
 				/* 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 {
 					pointer-events: none;
 				}
+				*/
 
 				ul.joplin-checklist {
 					list-style:none;