betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-table-add-controls.ts

@@ -0,0 +1,174 @@
+'use client'
+
+import {
+  ACTIVE_TABLE_WRAPPER_CLASS,
+  getMountedEditorView,
+  getSelectionTable,
+  getTableFromEventTarget,
+  getTableFromWrapper,
+  type TableAddControlsState
+} from '@admin/utils/editor/table-add-controls'
+import { appendColumnToTable, appendRowToTable } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/react'
+import * as React from 'react'
+
+export interface ContentEditorTableAddControls {
+  addColumn: () => void
+  addRow: () => void
+  wrapper: HTMLElement
+}
+
+export function useContentEditorTableAddControls(
+  editor: Editor | null
+): ContentEditorTableAddControls | null {
+  const [tableState, setTableState] = React.useState<TableAddControlsState | null>(null)
+  const [, markEditorViewChanged] = React.useReducer((version: number) => version + 1, 0)
+  const tableStateRef = React.useRef<TableAddControlsState | null>(null)
+  const isEditorViewMounted = Boolean(getMountedEditorView(editor))
+
+  tableStateRef.current = tableState
+
+  const setTable = React.useCallback((next: TableAddControlsState) => {
+    setTableState((current) => {
+      if (current?.wrapper !== next.wrapper) {
+        current?.wrapper.classList.remove(ACTIVE_TABLE_WRAPPER_CLASS)
+      }
+
+      next.wrapper.classList.add(ACTIVE_TABLE_WRAPPER_CLASS)
+
+      if (current?.pos === next.pos && current.wrapper === next.wrapper) {
+        return current
+      }
+
+      return next
+    })
+  }, [])
+
+  const clearTable = React.useCallback(() => {
+    setTableState((current) => {
+      current?.wrapper.classList.remove(ACTIVE_TABLE_WRAPPER_CLASS)
+      return null
+    })
+  }, [])
+
+  React.useEffect(() => {
+    if (!editor) return
+
+    const handleEditorViewChange = () => markEditorViewChanged()
+
+    editor.on('mount', handleEditorViewChange)
+    editor.on('unmount', handleEditorViewChange)
+    if (getMountedEditorView(editor)) {
+      handleEditorViewChange()
+    }
+
+    return () => {
+      editor.off('mount', handleEditorViewChange)
+      editor.off('unmount', handleEditorViewChange)
+    }
+  }, [editor])
+
+  React.useEffect(() => {
+    const view = isEditorViewMounted ? getMountedEditorView(editor) : null
+    if (!editor?.isEditable || !view) {
+      clearTable()
+      return
+    }
+
+    const editorElement = view.dom
+
+    const updateFromSelection = () => {
+      const selectedTable = getSelectionTable(editor, view)
+      if (selectedTable) {
+        setTable(selectedTable)
+        return
+      }
+
+      const currentWrapper = tableStateRef.current?.wrapper
+      if (currentWrapper?.matches(':hover')) {
+        const currentTable = getTableFromWrapper(editor, view, currentWrapper)
+        if (currentTable) {
+          setTable(currentTable)
+          return
+        }
+      }
+
+      clearTable()
+    }
+
+    const refreshCurrentTable = () => {
+      const current = tableStateRef.current
+      if (!current) {
+        updateFromSelection()
+        return
+      }
+
+      if (!current.wrapper.isConnected || !editorElement.contains(current.wrapper)) {
+        updateFromSelection()
+        return
+      }
+
+      const currentTable = getTableFromWrapper(editor, view, current.wrapper)
+      if (!currentTable) {
+        updateFromSelection()
+        return
+      }
+
+      setTable(currentTable)
+    }
+
+    const handlePointerOver = (event: PointerEvent) => {
+      const hoveredTable = getTableFromEventTarget(editor, view, event.target)
+      if (hoveredTable) {
+        setTable(hoveredTable)
+        return
+      }
+
+      if (!getSelectionTable(editor, view)) {
+        clearTable()
+      }
+    }
+
+    const handlePointerLeave = () => {
+      if (!getSelectionTable(editor, view)) {
+        clearTable()
+      }
+    }
+
+    editorElement.addEventListener('pointerover', handlePointerOver)
+    editorElement.addEventListener('pointerleave', handlePointerLeave)
+    editor.on('selectionUpdate', updateFromSelection)
+    editor.on('transaction', refreshCurrentTable)
+    updateFromSelection()
+
+    return () => {
+      editorElement.removeEventListener('pointerover', handlePointerOver)
+      editorElement.removeEventListener('pointerleave', handlePointerLeave)
+      editor.off('selectionUpdate', updateFromSelection)
+      editor.off('transaction', refreshCurrentTable)
+      tableStateRef.current?.wrapper.classList.remove(ACTIVE_TABLE_WRAPPER_CLASS)
+    }
+  }, [clearTable, editor, isEditorViewMounted, setTable])
+
+  const addColumn = React.useCallback(() => {
+    const tablePos = tableStateRef.current?.pos
+    if (!editor || tablePos === undefined) return
+
+    appendColumnToTable(editor, tablePos)
+  }, [editor])
+
+  const addRow = React.useCallback(() => {
+    const tablePos = tableStateRef.current?.pos
+    if (!editor || tablePos === undefined) return
+
+    appendRowToTable(editor, tablePos)
+  }, [editor])
+
+  if (!editor?.isEditable || !tableState) return null
+
+  return {
+    addColumn,
+    addRow,
+    wrapper: tableState.wrapper
+  }
+}

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor.ts

@@ -0,0 +1,288 @@
+'use client'
+
+import { NodeBackground } from '@admin/components/custom/content-editor/tiptap-extension/node-background-extension'
+import { HorizontalRule } from '@admin/components/custom/content-editor/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension'
+import { MediaGalleryPlaceholderNode } from '@admin/components/custom/content-editor/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node-extension'
+import { RemovableImage } from '@admin/components/custom/content-editor/tiptap-node/removable-image-node/removable-image-node-extension'
+import { ContentEditorTaskItem } from '@admin/components/custom/content-editor/tiptap-node/task-item-node/task-item-node-extension'
+import {
+  type ContentEditorMode,
+  type ContentEditorSelectionRequest,
+  docPositionFromPlainTextOffset,
+  getPlainTextOffsetBeforeDocPosition,
+  getPlainTextOffsetBeforeMarkdownOffset,
+  markdownOffsetFromPlainTextOffset,
+  normalizeEditorMarkdown,
+  prepareMarkdownForRichMode
+} from '@admin/utils/editor/content-editor'
+import {
+  ContentEditorHighlight,
+  ContentEditorInlineMath,
+  ContentEditorKeyboard,
+  ContentEditorRawContentBlock,
+  ContentEditorSubscript,
+  ContentEditorSuperscript,
+  ContentEditorUnderline
+} from '@admin/utils/editor/content-editor-rich-extensions'
+import { ActiveTableCell } from '@admin/utils/editor/table-bubble'
+import { TaskList } from '@tiptap/extension-list'
+import Placeholder from '@tiptap/extension-placeholder'
+import { Table } from '@tiptap/extension-table'
+import { TableCell } from '@tiptap/extension-table-cell'
+import { TableHeader } from '@tiptap/extension-table-header'
+import { TableRow } from '@tiptap/extension-table-row'
+import { Typography } from '@tiptap/extension-typography'
+import { Selection } from '@tiptap/extensions'
+import { Markdown } from '@tiptap/markdown'
+import { type Editor, useEditor } from '@tiptap/react'
+import { StarterKit } from '@tiptap/starter-kit'
+import * as React from 'react'
+import { useContentEditorSlashMenu } from './use-content-editor-slash-menu'
+
+export interface UseContentEditorOptions {
+  value: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled: boolean
+  defaultMode: ContentEditorMode
+  onModeToggle?: () => void
+}
+
+export function useContentEditor({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  defaultMode,
+  onModeToggle
+}: UseContentEditorOptions) {
+  const [mode, setMode] = React.useState<ContentEditorMode>(defaultMode)
+  const [sourceSelectionRequest, setSourceSelectionRequest] =
+    React.useState<ContentEditorSelectionRequest | null>(null)
+  const latestMarkdownRef = React.useRef(value)
+  const lastValuePropRef = React.useRef(value)
+  const pendingRichSelectionOffsetRef = React.useRef<number | null>(null)
+  const sourceSelectionRef = React.useRef(0)
+  const isInternalChange = React.useRef(false)
+  const isSyncingRichContent = React.useRef(false)
+  const editorRef = React.useRef<Editor | null>(null)
+  const {
+    activeSlashIndex,
+    closeSlashMenu,
+    filteredSlashCommands,
+    handleSlashKeyDown,
+    selectSlashCommand,
+    setActiveSlashIndex,
+    slashMenu,
+    updateSlashMenu
+  } = useContentEditorSlashMenu(editorRef)
+
+  if (value !== lastValuePropRef.current) {
+    lastValuePropRef.current = value
+    latestMarkdownRef.current = value
+  }
+
+  const emitChange = React.useCallback(
+    (nextValue: string) => {
+      latestMarkdownRef.current = nextValue
+      onChange?.(nextValue)
+    },
+    [onChange]
+  )
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        autocomplete: 'off',
+        autocorrect: 'off',
+        autocapitalize: 'off',
+        class:
+          'simple-editor content-editor-prose prose prose-sm max-w-none dark:prose-invert focus:outline-none'
+      },
+      handleKeyDown: (_view, event) => handleSlashKeyDown(event)
+    },
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false,
+        underline: false,
+        link: {
+          openOnClick: false,
+          enableClickSelection: true
+        }
+      }),
+      HorizontalRule,
+      TaskList,
+      ContentEditorTaskItem.configure({ nested: true }),
+      ContentEditorHighlight.configure({ multicolor: true }),
+      ContentEditorUnderline,
+      ContentEditorSubscript,
+      ContentEditorSuperscript,
+      ContentEditorKeyboard,
+      ContentEditorInlineMath,
+      ContentEditorRawContentBlock,
+      RemovableImage,
+      Table.configure({
+        cellMinWidth: 96,
+        resizable: true
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      ActiveTableCell,
+      Typography,
+      Selection,
+      NodeBackground,
+      Placeholder.configure({
+        placeholder: placeholder || "Write, type '/' for commands..."
+      }),
+      Markdown.configure({
+        markedOptions: { gfm: true }
+      }),
+      MediaGalleryPlaceholderNode.configure({
+        accept: 'image/*'
+      })
+    ],
+    content: prepareMarkdownForRichMode(value),
+    contentType: 'markdown',
+    editable: !disabled,
+    onUpdate: ({ editor: nextEditor, transaction }) => {
+      if (isSyncingRichContent.current || transaction.getMeta('preventUpdate')) {
+        updateSlashMenu(nextEditor)
+        return
+      }
+
+      const nextValue = normalizeEditorMarkdown(nextEditor.getMarkdown())
+      isInternalChange.current = true
+      emitChange(nextValue)
+      updateSlashMenu(nextEditor)
+    },
+    onSelectionUpdate: ({ editor: nextEditor }) => updateSlashMenu(nextEditor),
+    onBlur: closeSlashMenu
+  })
+
+  editorRef.current = editor
+
+  const syncRichContent = React.useCallback(
+    (nextValue: string = latestMarkdownRef.current, selectionOffset?: number) => {
+      if (!editor) return null
+
+      const normalizedMarkdown = normalizeEditorMarkdown(editor.getMarkdown())
+      if (normalizedMarkdown !== nextValue) {
+        isSyncingRichContent.current = true
+        try {
+          editor.commands.setContent(prepareMarkdownForRichMode(nextValue), {
+            contentType: 'markdown',
+            emitUpdate: false
+          })
+        } finally {
+          queueMicrotask(() => {
+            isSyncingRichContent.current = false
+          })
+        }
+      }
+
+      if (selectionOffset !== undefined) {
+        const plainTextOffset = getPlainTextOffsetBeforeMarkdownOffset(nextValue, selectionOffset)
+        const position = docPositionFromPlainTextOffset(editor.state.doc, plainTextOffset)
+        editor.commands.setTextSelection(position)
+        return position
+      }
+
+      return null
+    },
+    [editor]
+  )
+
+  React.useEffect(() => {
+    if (!editor || mode === 'source') return
+
+    if (isInternalChange.current) {
+      isInternalChange.current = false
+      return
+    }
+
+    syncRichContent(latestMarkdownRef.current)
+  }, [editor, mode, syncRichContent])
+
+  React.useEffect(() => {
+    editor?.setEditable(!disabled, false)
+  }, [disabled, editor])
+
+  React.useEffect(() => {
+    if (!editor || mode !== 'rich') return
+
+    const selectionOffset = pendingRichSelectionOffsetRef.current
+    if (selectionOffset === null) return
+
+    pendingRichSelectionOffsetRef.current = null
+
+    const animationFrame = requestAnimationFrame(() => {
+      const position = syncRichContent(latestMarkdownRef.current, selectionOffset)
+
+      if (position !== null) {
+        editor.commands.focus(position, { scrollIntoView: true })
+        return
+      }
+
+      editor.commands.focus(undefined, { scrollIntoView: true })
+    })
+
+    return () => cancelAnimationFrame(animationFrame)
+  }, [editor, mode, syncRichContent])
+
+  const handleSourceSelectionChange = React.useCallback((offset: number) => {
+    sourceSelectionRef.current = offset
+  }, [])
+
+  const handleSourceChange = React.useCallback(
+    (nextValue: string) => {
+      emitChange(nextValue)
+    },
+    [emitChange]
+  )
+
+  const handleModeChange = React.useCallback(() => {
+    onModeToggle?.()
+
+    if (mode === 'source') {
+      pendingRichSelectionOffsetRef.current = sourceSelectionRef.current
+      setMode('rich')
+      return
+    }
+
+    if (editor) {
+      const plainTextOffset = getPlainTextOffsetBeforeDocPosition(
+        editor.state.doc,
+        editor.state.selection.from
+      )
+      const mappedOffset = markdownOffsetFromPlainTextOffset(
+        latestMarkdownRef.current,
+        plainTextOffset
+      )
+      sourceSelectionRef.current = mappedOffset
+      setSourceSelectionRequest((current) => ({
+        id: (current?.id ?? 0) + 1,
+        offset: mappedOffset
+      }))
+    }
+
+    setMode('source')
+  }, [editor, mode, onModeToggle])
+
+  return {
+    activeSlashIndex,
+    editor,
+    filteredSlashCommands,
+    handleModeChange,
+    handleSourceChange,
+    handleSourceSelectionChange,
+    mode,
+    selectSlashCommand,
+    setActiveSlashIndex,
+    slashMenu,
+    sourceValue: latestMarkdownRef.current,
+    sourceSelectionRequest,
+    syncRichContent
+  }
+}

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-heading-dropdown-menu.ts

@@ -0,0 +1,127 @@
+'use client'
+
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import { HeadingIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import {
+  canToggle,
+  headingIcons,
+  isHeadingActive,
+  type Level,
+  shouldShowButton
+} from './use-heading'
+
+/**
+ * Configuration for the heading dropdown menu functionality
+ */
+export interface UseHeadingDropdownMenuConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Available heading levels to show in the dropdown
+   * @default [1, 2, 3, 4, 5, 6]
+   */
+  levels?: Level[]
+  /**
+   * Whether the dropdown should hide when headings are not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+/**
+ * Gets the currently active heading level from the available levels
+ */
+export function getActiveHeadingLevel(
+  editor: Editor | null,
+  levels: Level[] = [1, 2, 3, 4, 5, 6]
+): Level | undefined {
+  if (!editor || !editor.isEditable) return undefined
+  return levels.find((level) => isHeadingActive(editor, level))
+}
+
+/**
+ * Custom hook that provides heading dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyHeadingDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeLevel,
+ *     isAnyHeadingActive,
+ *     canToggle,
+ *     levels,
+ *   } = useHeadingDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedHeadingDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeLevel,
+ *   } = useHeadingDropdownMenu({
+ *     editor: myEditor,
+ *     levels: [1, 2, 3],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useHeadingDropdownMenu(config?: UseHeadingDropdownMenuConfig) {
+  const {
+    editor: providedEditor,
+    levels = [1, 2, 3, 4, 5, 6],
+    hideWhenUnavailable = false
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState(true)
+
+  const activeLevel = getActiveHeadingLevel(editor, levels)
+  const isActive = isHeadingActive(editor)
+  const canToggleState = canToggle(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, level: levels }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable, levels])
+
+  return {
+    isVisible,
+    activeLevel,
+    isActive,
+    canToggle: canToggleState,
+    levels,
+    label: 'Heading',
+    Icon: activeLevel ? headingIcons[activeLevel] : HeadingIcon
+  }
+}