ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: fix checkbox in firefox, fix #251

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-06 18:57:39 +02:00
parent 66f02c4145
commit 5622deca30
6 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demos/Examples/CollaborativeEditing/index.vue
View File

@@ -326,7 +326,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
> input { > label {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 0.5rem; margin-right: 0.5rem;
} }

2
docs/src/demos/Examples/Tasks/index.vue
View File

@@ -69,7 +69,7 @@ ul[data-type="taskList"] {
display: flex; display: flex;
align-items: center; align-items: center;
> input { > label {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 0.5rem; margin-right: 0.5rem;
} }

2
docs/src/demos/Experiments/MultipleEditors/index.vue
View File

@@ -158,7 +158,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
> input { > label {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 0.5rem; margin-right: 0.5rem;
} }

2
docs/src/demos/Nodes/TaskItem/index.vue
View File

@@ -56,7 +56,7 @@ ul[data-type="taskList"] {
display: flex; display: flex;
align-items: center; align-items: center;
> input { > label {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 0.5rem; margin-right: 0.5rem;
} }

2
docs/src/demos/Nodes/TaskList/index.vue
View File

@@ -60,7 +60,7 @@ ul[data-type="taskList"] {
display: flex; display: flex;
align-items: center; align-items: center;
> input { > label {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 0.5rem; margin-right: 0.5rem;
} }

15
packages/extension-task-item/src/task-item.ts
View File

@@ -81,11 +81,13 @@ export const TaskItem = Node.create<TaskItemOptions>({
}) => { }) => {
const { view } = editor const { view } = editor
const listItem = document.createElement('li') const listItem = document.createElement('li')
const checkboxWrapper = document.createElement('label')
const checkboxStyler = document.createElement('span')
const checkbox = document.createElement('input') const checkbox = document.createElement('input')
const content = document.createElement('div') const content = document.createElement('div')
checkboxWrapper.contentEditable = 'false'
checkbox.type = 'checkbox' checkbox.type = 'checkbox'
checkbox.contentEditable = 'false'
checkbox.addEventListener('change', event => { checkbox.addEventListener('change', event => {
const { checked } = event.target as any const { checked } = event.target as any
@@ -101,11 +103,14 @@ export const TaskItem = Node.create<TaskItemOptions>({
checkbox.setAttribute('checked', 'checked') checkbox.setAttribute('checked', 'checked')
} }
listItem.append(checkbox, content) checkboxWrapper.append(checkbox, checkboxStyler)
listItem.append(checkboxWrapper, content)
Object.entries(HTMLAttributes).forEach(([key, value]) => { Object
listItem.setAttribute(key, value) .entries(HTMLAttributes)
}) .forEach(([key, value]) => {
listItem.setAttribute(key, value)
})
return { return {
dom: listItem, dom: listItem,