27 lines
861 B
Vue
27 lines
861 B
Vue
<template>
|
|
<node-view-wrapper as="li" class="flex flex-row items-start gap-2 mb-2 !p-0 !m-0 bg-transparent">
|
|
<label class="flex-none pt-[0.15rem] cursor-pointer select-none" contenteditable="false">
|
|
<input
|
|
type="checkbox"
|
|
:checked="node.attrs.checked"
|
|
@change="onChange"
|
|
class="w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500 cursor-pointer"
|
|
/>
|
|
</label>
|
|
|
|
<node-view-content class="flex-1 min-w-0 [&>p]:!m-0 [&>p]:!inline-block" />
|
|
</node-view-wrapper>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
|
|
|
|
const props = defineProps(nodeViewProps)
|
|
|
|
function onChange(event: Event) {
|
|
const target = event.target as HTMLInputElement
|
|
props.updateAttributes({
|
|
checked: target.checked,
|
|
})
|
|
}
|
|
</script> |