Fix Cursor, Fix Task Item #87

frontend/components/wiki/TiptapTaskItem.vue

@@ -0,0 +1,27 @@
+<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>