<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>