Try fixing the click handler on firefox

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 55 insertions, 19 deletions

diff --git a/css/prosemirror.scss b/css/prosemirror.scss
index 589bd31a0..a65718e77 100644
--- a/css/prosemirror.scss
+++ b/css/prosemirror.scss
@@ -24,6 +24,47 @@ div.ProseMirror {
 		font-size: 14px;
 	}
 
+	.checkbox-item {
+		display: flex;
+		align-items: start;
+
+		input[type=checkbox] {
+			display: none;
+		}
+		&:before {
+			content: '';
+			display: inline-block;
+			height: 14px;
+			width: 14px;
+			vertical-align: middle;
+			border-radius: 50%;
+			margin: 0 6px 3px 3px;
+			margin-left: 3px;
+			border: 1px solid #878787;
+			content: "";
+			position: relative;
+			width: 44px;
+			height: 44px;
+			display: block;
+			border-radius: 1px;
+			height: 14px;
+			width: 14px;
+			box-shadow: none !important;
+			background-position: center;
+		}
+		&.checked:before {
+			background-image: url('/core/css/../img/actions/checkbox-mark.svg');
+			background-color: var(--color-primary-element);
+		}
+		label {
+			display: block;
+			flex-grow: 1;
+			> *:first-child {
+				margin-top: 0;
+			}
+		}
+	}
+
 	li label.checkbox-label {
 		width: 100%;
 		display: flex;
diff --git a/src/nodes/ListItem.js b/src/nodes/ListItem.js
index 96a03c95f..08b5d0c9d 100644
--- a/src/nodes/ListItem.js
+++ b/src/nodes/ListItem.js
@@ -23,7 +23,7 @@
 import { ListItem as TiptapListItem } from 'tiptap-extensions'
 import { Plugin } from 'tiptap'
 import { toggleList } from 'tiptap-commands'
-import { findParentNode } from 'prosemirror-utils'
+import { findParentNode, findParentNodeClosestToPos } from 'prosemirror-utils'
 
 const TYPES = {
 	BULLET: 0,
@@ -54,26 +54,28 @@ export default class ListItem extends TiptapListItem {
 					default: TYPES.BULLET,
 				},
 			},
-			draggable: true,
+			draggable: false,
 			content: 'paragraph block*',
 			toDOM: node => {
 				if (node.attrs.type === TYPES.BULLET) {
 					return ['li', 0]
 				}
-				const checkboxAttributes = { type: 'checkbox', class: 'checkbox' }
+				const listAttributes = { class: 'checkbox-item' }
+				const checkboxAttributes = { type: 'checkbox', class: '', 'contenteditable': false }
 				if (node.attrs.done) {
 					checkboxAttributes.checked = true
+					listAttributes.class += ' checked'
 				}
 				return [
 					'li',
+					listAttributes,
 					[
 						'input',
 						checkboxAttributes,
 					],
 					[
 						'label',
-						{ class: 'checkbox-label' },
-						['div', { class: 'checkbox-wrapper' }, 0],
+						0,
 					],
 				]
 			},
@@ -144,22 +146,15 @@ export default class ListItem extends TiptapListItem {
 					handleClick: (view, pos, event) => {
 						const state = view.state
 						const schema = state.schema
-						const selection = state.selection
-						const $from = selection.$from
-						const $to = selection.$to
-						const range = $from.blockRange($to)
 
-						if (!range) {
-							return false
-						}
-
-						const parentList = findParentNode(function(node) {
+						const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY })
+						const position = state.doc.resolve(coordinates.pos)
+						const parentList = findParentNodeClosestToPos(position, function(node) {
 							return node.type === schema.nodes.list_item
-						})(selection)
-
-						const isLabel = event.target.tagName.toLowerCase() === 'label'
-						if (typeof parentList === 'undefined' || parentList.node.attrs.type !== TYPES.CHECKBOX || !isLabel) {
-							return
+						})
+						const isListClicked = event.target.tagName.toLowerCase() === 'li'
+						if (typeof parentList === 'undefined' || parentList.node.attrs.type !== TYPES.CHECKBOX || !isListClicked) {
+							return true
 						}
 
 						const tr = state.tr