betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/utils/editor/source-media.ts

@@ -0,0 +1,11 @@
+import { createMarkdownImageText } from '@admin/utils/editor/markdown'
+
+export function getMediaLabel(url: string): string {
+  const filename = decodeURIComponent(url.split('/').pop()?.split('?')[0] || 'media')
+
+  return filename.replace(/\.[^/.]+$/, '') || 'media'
+}
+
+export function createMarkdownTextFromUrl(url: string): string {
+  return createMarkdownImageText([{ url, filename: getMediaLabel(url) }])
+}

package/dist/assets/adapters/next/templates/init/utils/editor/table-add-controls.ts

@@ -0,0 +1,91 @@
+import { findTable } from '@tiptap/pm/tables'
+import type { Editor } from '@tiptap/react'
+import { getMountedEditorView } from './editor-view'
+
+export interface TableAddControlsState {
+  pos: number
+  wrapper: HTMLElement
+}
+
+export const TABLE_WRAPPER_CLASS = 'tableWrapper'
+export const ACTIVE_TABLE_WRAPPER_CLASS = 'content-editor-table-with-add-controls'
+
+type MountedEditorView = Editor['view']
+
+export function getTableElement(dom: Node | null): HTMLTableElement | null {
+  if (!(dom instanceof HTMLElement)) return null
+  if (dom instanceof HTMLTableElement) return dom
+  return dom.querySelector('table')
+}
+
+export function getTableWrapperElement(dom: Node | null): HTMLElement | null {
+  if (!(dom instanceof HTMLElement)) return null
+  if (dom.classList.contains(TABLE_WRAPPER_CLASS)) return dom
+
+  const table = getTableElement(dom)
+  const wrapper = table?.closest(`.${TABLE_WRAPPER_CLASS}`)
+  return wrapper instanceof HTMLElement ? wrapper : null
+}
+
+export function getTablePositionForElement(
+  editor: Editor,
+  view: MountedEditorView,
+  tableElement: HTMLTableElement
+): number | null {
+  let tablePos: number | null = null
+
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== 'table') return true
+
+    if (getTableElement(view.nodeDOM(pos)) === tableElement) {
+      tablePos = pos
+      return false
+    }
+
+    return true
+  })
+
+  return tablePos
+}
+
+export function getTableFromWrapper(
+  editor: Editor,
+  view: MountedEditorView,
+  wrapper: HTMLElement
+): { pos: number; wrapper: HTMLElement } | null {
+  const tableElement = wrapper.querySelector('table')
+  if (!(tableElement instanceof HTMLTableElement)) return null
+
+  const pos = getTablePositionForElement(editor, view, tableElement)
+  return pos === null ? null : { pos, wrapper }
+}
+
+export function getTableFromEventTarget(
+  editor: Editor,
+  view: MountedEditorView,
+  target: EventTarget | null
+): { pos: number; wrapper: HTMLElement } | null {
+  if (!(target instanceof HTMLElement)) return null
+
+  const wrapper = target.closest(`.${TABLE_WRAPPER_CLASS}`)
+  if (!(wrapper instanceof HTMLElement) || !view.dom.contains(wrapper)) {
+    return null
+  }
+
+  return getTableFromWrapper(editor, view, wrapper)
+}
+
+export function getSelectionTable(
+  editor: Editor,
+  view: MountedEditorView
+): { pos: number; wrapper: HTMLElement } | null {
+  const table = findTable(editor.state.selection.$from)
+  if (!table) return null
+
+  const wrapper = getTableWrapperElement(view.nodeDOM(table.pos))
+  if (!wrapper) return null
+
+  return { pos: table.pos, wrapper }
+}
+
+export { getMountedEditorView }

package/dist/assets/adapters/next/templates/init/utils/editor/table-bubble.ts

@@ -0,0 +1,172 @@
+import type { Editor } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { cellAround, findTable, selectedRect } from '@tiptap/pm/tables'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import { getMountedEditorView } from './editor-view'
+
+export const TABLE_PART_PREVIEW_CLASS = 'content-editor-table-remove-preview'
+export const ACTIVE_TABLE_CELL_CLASS = 'content-editor-active-table-cell'
+
+export type TablePart = 'row' | 'column'
+
+export const ActiveTableCell = Extension.create({
+  name: 'contentEditorActiveTableCell',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('contentEditorActiveTableCell'),
+        props: {
+          decorations(state) {
+            if (!findTable(state.selection.$from)) {
+              return null
+            }
+
+            const cell = cellAround(state.selection.$from)
+            if (!cell) return null
+
+            const cellNode = state.doc.nodeAt(cell.pos)
+            if (!cellNode) return null
+
+            return DecorationSet.create(state.doc, [
+              Decoration.node(cell.pos, cell.pos + cellNode.nodeSize, {
+                class: ACTIVE_TABLE_CELL_CLASS
+              })
+            ])
+          }
+        }
+      })
+    ]
+  }
+})
+
+export function getEditorElement(editor: Editor | null) {
+  const element = getMountedEditorView(editor)?.dom
+  return element instanceof HTMLElement ? element : null
+}
+
+export function getClosestTableCell(target: EventTarget | Node | null) {
+  const cell =
+    target instanceof HTMLElement
+      ? target.closest('th, td')
+      : target instanceof Node
+        ? target.parentElement?.closest('th, td')
+        : null
+
+  return cell instanceof HTMLTableCellElement ? cell : null
+}
+
+export function getSelectionTableCell(editor: Editor) {
+  const selection = getEditorElement(editor)?.ownerDocument.getSelection()
+  const anchorNode = selection?.anchorNode
+
+  return getClosestTableCell(anchorNode ?? null)
+}
+
+export function getEventTableCell(editor: Editor, target: EventTarget | null) {
+  return getClosestTableCell(target) ?? getSelectionTableCell(editor)
+}
+
+export function getEditorScrollElement(editor: Editor) {
+  const editorElement = getEditorElement(editor)
+  const scrollElement = editorElement?.closest('.simple-editor-content')
+  return scrollElement instanceof HTMLElement ? scrollElement : editorElement
+}
+
+export function isElementVisibleInEditor(editor: Editor, element: HTMLElement) {
+  const scrollElement = getEditorScrollElement(editor)
+  if (!scrollElement) return false
+
+  const elementRect = element.getBoundingClientRect()
+  const editorRect = scrollElement.getBoundingClientRect()
+
+  return (
+    elementRect.bottom > editorRect.top &&
+    elementRect.top < editorRect.bottom &&
+    elementRect.right > editorRect.left &&
+    elementRect.left < editorRect.right
+  )
+}
+
+export function getSelectionTableElement(editor: Editor) {
+  const view = getMountedEditorView(editor)
+  if (!view) return null
+
+  const table = findTable(editor.state.selection.$from)
+  if (!table) return getSelectionTableCell(editor)?.closest('table') ?? null
+
+  const tableDom = view.nodeDOM(table.pos)
+  if (tableDom instanceof HTMLTableElement) return tableDom
+  if (!(tableDom instanceof HTMLElement)) return null
+
+  const tableElement = tableDom.querySelector('table')
+  return tableElement instanceof HTMLTableElement ? tableElement : tableDom
+}
+
+export function isSelectedTableVisible(editor: Editor) {
+  const table = getSelectionTableElement(editor)
+  return table ? isElementVisibleInEditor(editor, table) : false
+}
+
+export function clearTablePartPreview(editor: Editor | null) {
+  getEditorElement(editor)
+    ?.querySelectorAll(`.${TABLE_PART_PREVIEW_CLASS}`)
+    .forEach((cell) => {
+      cell.classList.remove(TABLE_PART_PREVIEW_CLASS)
+    })
+}
+
+export function showTablePartPreview(editor: Editor | null, part: TablePart) {
+  clearTablePartPreview(editor)
+  const view = getMountedEditorView(editor)
+  if (!editor || !view) return
+
+  const activeCell = view.dom.querySelector(`.${ACTIVE_TABLE_CELL_CLASS}`)
+  if (activeCell instanceof HTMLTableCellElement) {
+    if (part === 'row') {
+      activeCell.parentElement?.querySelectorAll('th, td').forEach((cell) => {
+        cell.classList.add(TABLE_PART_PREVIEW_CLASS)
+      })
+      return
+    }
+
+    const table = activeCell.closest('table')
+    const columnIndex = activeCell.cellIndex
+    if (table) {
+      Array.from(table.rows).forEach((row) => {
+        row.cells[columnIndex]?.classList.add(TABLE_PART_PREVIEW_CLASS)
+      })
+      return
+    }
+  }
+
+  try {
+    const rect = selectedRect(editor.state)
+    const positions =
+      part === 'row'
+        ? rect.map.cellsInRect({
+            bottom: rect.top + 1,
+            left: 0,
+            right: rect.map.width,
+            top: rect.top
+          })
+        : rect.map.cellsInRect({
+            bottom: rect.map.height,
+            left: rect.left,
+            right: rect.left + 1,
+            top: 0
+          })
+
+    for (const position of new Set(positions)) {
+      const cell = view.nodeDOM(rect.tableStart + position)
+      if (cell instanceof HTMLTableCellElement) {
+        cell.classList.add(TABLE_PART_PREVIEW_CLASS)
+      }
+    }
+  } catch {
+    clearTablePartPreview(editor)
+  }
+}
+
+export { getMountedEditorView }

package/dist/assets/adapters/next/templates/init/utils/editor/table-input.ts

@@ -0,0 +1,5 @@
+export function normalizeCount(value: string, fallback: number, min: number) {
+  const parsed = Number.parseInt(value, 10)
+  if (!Number.isFinite(parsed)) return fallback
+  return Math.max(min, parsed)
+}

package/dist/assets/adapters/next/templates/init/utils/editor/task-item.ts

@@ -0,0 +1,19 @@
+import type { TaskItemOptions } from '@tiptap/extension-list'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+type CheckboxLabelFactory = NonNullable<NonNullable<TaskItemOptions['a11y']>['checkboxLabel']>
+
+export function isTaskItemChecked(node: ProseMirrorNode): boolean {
+  return node.attrs.checked === true
+}
+
+export function getTaskItemCheckboxLabel(
+  node: ProseMirrorNode,
+  checked: boolean,
+  labelFactory?: CheckboxLabelFactory
+): string {
+  return (
+    labelFactory?.(node, checked) ||
+    `Task item checkbox for ${node.textContent || 'empty task item'}`
+  )
+}