@dnax/ui 0.0.48 → 0.0.50

package/components/internal/QTiptapTableView.vue

@@ -1,123 +0,0 @@
-<script setup lang="ts">
-// QTiptapTableView — NodeView Vue du nœud « table » : rend un vrai <table>
-// avec le contentDOM ProseMirror dans le <tbody>. Les rangées/cellules restent
-// du contenu ProseMirror classique (sélection, merge/split, clavier).
-// Ajouts maison : colgroup + poignées de redimensionnement de colonnes
-// (drag), appliqué localement via des largeurs en % (non persistées dans le
-// document — pour persister il faudrait écrire les attrs colwidth des cellules).
-import { computed, onBeforeUnmount, ref, watch } from "vue"
-import { nodeViewProps, NodeViewContent, NodeViewWrapper } from "@tiptap/vue-3"
-
-const props = defineProps(nodeViewProps)
-
-// Nombre de colonnes = largeur de la première rangée (les suivantes suivent
-// les rowspans/colspans du schéma).
-const cols = computed(() => {
-  const first = props.node?.firstChild
-  return first ? first.childCount : 0
-})
-
-// Largeurs en % (initialement égales) ; recalculees quand le nombre de
-// colonnes change (ajout/suppression).
-const widths = ref<number[]>([])
-watch(
-  cols,
-  (count) => {
-    if (count === widths.value.length) return
-    const each = count > 0 ? 100 / count : 0
-    widths.value = Array.from({ length: count }, () => each)
-  },
-  { immediate: true },
-)
-
-// — Drag de redimensionnement (poignées entre colonnes) —
-const tableEl = ref<HTMLElement | null>(null)
-let dragging = false
-let boundary = 0
-let startX = 0
-let leftStart = 0
-let rightStart = 0
-let tableWidth = 0
-
-const onMove = (event: PointerEvent) => {
-  if (!dragging) return
-  const delta = event.clientX - startX
-  const minPx = 48
-  let leftPx = leftStart + delta
-  let rightPx = rightStart - delta
-  if (leftPx < minPx) {
-    rightPx -= minPx - leftPx
-    leftPx = minPx
-  }
-  if (rightPx < minPx) {
-    leftPx -= minPx - rightPx
-    rightPx = minPx
-  }
-  if (leftPx < minPx || rightPx < minPx) return
-  const total = tableWidth || 1
-  const next = [...widths.value]
-  next[boundary - 1] = (leftPx / total) * 100
-  next[boundary] = (rightPx / total) * 100
-  widths.value = next
-}
-
-const onUp = () => {
-  dragging = false
-  window.removeEventListener("pointermove", onMove)
-  window.removeEventListener("pointerup", onUp)
-}
-
-const startResize = (event: PointerEvent, boundaryIndex: number) => {
-  if (!props.editor.isEditable) return
-  event.preventDefault()
-  const table = tableEl.value
-  if (!table) return
-  const row = table.querySelector("tr")
-  if (!row) return
-  const leftCell = row.children[boundaryIndex - 1] as HTMLElement | undefined
-  const rightCell = row.children[boundaryIndex] as HTMLElement | undefined
-  if (!leftCell || !rightCell) return
-  tableWidth = table.getBoundingClientRect().width || 1
-  leftStart = leftCell.getBoundingClientRect().width
-  rightStart = rightCell.getBoundingClientRect().width
-  startX = event.clientX
-  boundary = boundaryIndex
-  dragging = true
-  window.addEventListener("pointermove", onMove)
-  window.addEventListener("pointerup", onUp)
-}
-
-onBeforeUnmount(() => {
-  window.removeEventListener("pointermove", onMove)
-  window.removeEventListener("pointerup", onUp)
-})
-
-// Position d'une poignée (bord droit de la colonne index) en %
-const boundaryLeft = (index: number) => {
-  const acc = widths.value.slice(0, index).reduce((sum, w) => sum + w, 0)
-  return Math.min(acc, 99.5)
-}
-</script>
-
-<template>
-  <node-view-wrapper as="div" class="q-tiptap__table-wrapper">
-    <table ref="tableEl" class="q-tiptap__table" :class="{ 'q-tiptap__table--resizable': editor.isEditable }">
-      <colgroup v-if="widths.length">
-        <col v-for="(width, i) in widths" :key="i" :style="{ width: width + '%' }" />
-      </colgroup>
-      <node-view-content as="tbody" />
-    </table>
-
-    <!-- Poignées de redimensionnement entre les colonnes (éditable seulement) -->
-    <span
-      v-for="index in Math.max(cols - 1, 0)"
-      :key="'handle-' + index"
-      class="q-tiptap__resize-handle"
-      :style="{ left: boundaryLeft(index) + '%' }"
-      role="separator"
-      aria-orientation="vertical"
-      :aria-label="'Resize column ' + index"
-      @pointerdown.prevent.stop="startResize($event, index)"
-    />
-  </node-view-wrapper>
-</template>

package/components/internal/QTiptapTaskItemView.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-// QTiptapTaskItemView — NodeView Vue du nœud « taskItem » : rend une vraie
-// <q-checkbox> dnax.ui (au lieu du <input> natif du DOM par défaut).
-// Le nœud est fourni par l'extension officielle TaskItem (schéma, keymap
-// Enter/Tab, input rules "[ ]" / "[x]") dont on ne remplace que addNodeView.
-//
-// ⚠ NodeView Vue : la RACINE DOIT être <node-view-wrapper> (erreur Tiptap
-// « Please use the NodeViewWrapper component » sinon). En v3 ce wrapper ne
-// propage pas les attrs → data-checked/class cochée portés par le div interne
-// qui contient <node-view-content> (le contentDOM peut être imbriqué).
-import { nodeViewProps, NodeViewContent, NodeViewWrapper } from "@tiptap/vue-3"
-import QCheckbox from "../QCheckbox.vue"
-
-// nodeViewProps : descripteurs runtime officiels (editor, node, updateAttributes,
-// getPos…) — pattern documenté pour les NodeViews Vue dans Tiptap.
-const props = defineProps(nodeViewProps)
-
-const checked = () => !!props.node.attrs.checked
-const isEditable = () => props.editor.isEditable
-
-const onToggle = (value: unknown) => {
-  if (!isEditable()) return
-  if (typeof props.getPos !== "function") return
-  props.editor.chain().focus().command(({ tr }) => {
-    const position = props.getPos()
-    if (typeof position !== "number") return false
-    const current = tr.doc.nodeAt(position)
-    tr.setNodeMarkup(position, undefined, { ...current?.attrs, checked: Boolean(value) })
-    return true
-  }).run()
-}
-</script>
-
-<template>
-  <node-view-wrapper as="li">
-    <label class="q-tiptap__task-check" contenteditable="false" @mousedown.prevent>
-      <q-checkbox
-        :model-value="checked()"
-        dense
-        :disable="!isEditable()"
-        aria-label="Task done"
-        @update:model-value="onToggle"
-      />
-    </label>
-    <div class="q-tiptap__task-content" :class="{ 'q-tiptap__task-content--checked': checked() }">
-      <node-view-content />
-    </div>
-  </node-view-wrapper>
-</template>

package/lib/tiptap-table.ts

@@ -1,19 +0,0 @@
-// Tables Tiptap pour QTiptap — le nœud « table » est rendu par une NodeView
-// Vue (QTiptapTableView) au lieu du rendu DOM/colgroup par défaut. On garde
-// les nœuds officiels TableRow/TableHeader/TableCell (schéma, keymaps,
-// commandes) ; on ne remplace que le addNodeView de « table ».
-import { Table, TableHeader, TableCell, TableRow } from "@tiptap/extension-table"
-import { VueNodeViewRenderer } from "@tiptap/vue-3"
-import type { NodeViewProps } from "@tiptap/vue-3"
-import type { Component } from "vue"
-import QTiptapTableView from "../components/internal/QTiptapTableView.vue"
-
-export { TableHeader, TableCell, TableRow }
-
-export const QTipTapTable = Table.extend({
-  addNodeView() {
-    // defineProps(nodeViewProps) ne fait pas remonter les types vers le renderer
-    // → cast vers Component<NodeViewProps>
-    return VueNodeViewRenderer(QTiptapTableView as Component<NodeViewProps>)
-  },
-})

package/lib/tiptap-task-list.ts

@@ -1,16 +0,0 @@
-// Task list Tiptap pour QTiptap — l'élément de liste est rendu par une
-// NodeView Vue (q-checkbox dnax.ui) : on garde l'extension officielle
-// TaskItem (schéma, parse/render, keymap, input rules) et on ne remplace que
-// son addNodeView par VueNodeViewRenderer(QTiptapTaskItemView).
-import TaskList from "@tiptap/extension-task-list"
-import TaskItem from "@tiptap/extension-task-item"
-import { VueNodeViewRenderer } from "@tiptap/vue-3"
-import QTiptapTaskItemView from "../components/internal/QTiptapTaskItemView.vue"
-
-export { TaskList }
-
-export const QTipTapTaskItem = TaskItem.extend({
-  addNodeView() {
-    return VueNodeViewRenderer(QTiptapTaskItemView)
-  },
-})