betterstart-cli 0.0.1

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

@@ -0,0 +1,199 @@
+'use client'
+
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+import { isNodeInSchema } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import { ListIcon, ListOrderedIcon, ListTodoIcon } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+
+import { canToggleList, isListActive, type ListType, listIcons } from './use-list'
+
+/**
+ * Configuration for the list dropdown menu functionality
+ */
+export interface UseListDropdownMenuConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The list types to display in the dropdown.
+   * @default ["bulletList", "orderedList", "taskList"]
+   */
+  types?: ListType[]
+  /**
+   * Whether the dropdown should be hidden when no list types are available
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+export interface ListOption {
+  label: string
+  type: ListType
+  icon: React.ElementType
+}
+
+export const listOptions: ListOption[] = [
+  {
+    label: 'Bullet List',
+    type: 'bulletList',
+    icon: ListIcon
+  },
+  {
+    label: 'Ordered List',
+    type: 'orderedList',
+    icon: ListOrderedIcon
+  },
+  {
+    label: 'Task List',
+    type: 'taskList',
+    icon: ListTodoIcon
+  }
+]
+
+export function canToggleAnyList(editor: Editor | null, listTypes: ListType[]): boolean {
+  if (!editor || !editor.isEditable) return false
+  return listTypes.some((type) => canToggleList(editor, type))
+}
+
+export function isAnyListActive(editor: Editor | null, listTypes: ListType[]): boolean {
+  if (!editor || !editor.isEditable) return false
+  return listTypes.some((type) => isListActive(editor, type))
+}
+
+export function getFilteredListOptions(availableTypes: ListType[]): typeof listOptions {
+  return listOptions.filter((option) => !option.type || availableTypes.includes(option.type))
+}
+
+export function shouldShowListDropdown(params: {
+  editor: Editor | null
+  listTypes: ListType[]
+  hideWhenUnavailable: boolean
+  listInSchema: boolean
+  canToggleAny: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable, listInSchema, canToggleAny } = params
+
+  if (!editor) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!listInSchema) return false
+
+  if (!editor.isActive('code')) {
+    return canToggleAny
+  }
+
+  return true
+}
+
+/**
+ * Gets the currently active list type from the available types
+ */
+export function getActiveListType(
+  editor: Editor | null,
+  availableTypes: ListType[]
+): ListType | undefined {
+  if (!editor || !editor.isEditable) return undefined
+  return availableTypes.find((type) => isListActive(editor, type))
+}
+
+/**
+ * Custom hook that provides list dropdown menu functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *     isAnyActive,
+ *     canToggleAny,
+ *     filteredLists,
+ *   } = useListDropdownMenu()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedListDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeType,
+ *   } = useListDropdownMenu({
+ *     editor: myEditor,
+ *     types: ["bulletList", "orderedList"],
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useListDropdownMenu(config?: UseListDropdownMenuConfig) {
+  const {
+    editor: providedEditor,
+    types = ['bulletList', 'orderedList', 'taskList'],
+    hideWhenUnavailable = false
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState(true)
+
+  const listInSchema = types.some((type) => isNodeInSchema(type, editor))
+
+  const filteredLists = useMemo(() => getFilteredListOptions(types), [types])
+
+  const canToggleAny = canToggleAnyList(editor, types)
+  const isAnyActive = isAnyListActive(editor, types)
+  const activeType = getActiveListType(editor, types)
+  const activeList = filteredLists.find((option) => option.type === activeType)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowListDropdown({
+          editor,
+          listTypes: types,
+          hideWhenUnavailable,
+          listInSchema,
+          canToggleAny
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [canToggleAny, editor, hideWhenUnavailable, listInSchema, types])
+
+  return {
+    isVisible,
+    activeType,
+    isActive: isAnyActive,
+    canToggle: canToggleAny,
+    types,
+    filteredLists,
+    label: 'List',
+    Icon: activeList ? listIcons[activeList.type] : ListIcon
+  }
+}

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

@@ -0,0 +1,290 @@
+'use client'
+
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+import {
+  findNodePosition,
+  getSelectedBlockNodes,
+  isNodeInSchema,
+  isNodeTypeSelected,
+  isValidPosition,
+  selectionWithinConvertibleTypes
+} from '@admin/utils/editor/tiptap'
+import { NodeSelection, TextSelection } from '@tiptap/pm/state'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import { ListIcon, ListOrderedIcon, ListTodoIcon } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+export type ListType = 'bulletList' | 'orderedList' | 'taskList'
+
+/**
+ * Configuration for the list functionality
+ */
+export interface UseListConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The type of list to toggle.
+   */
+  type: ListType
+  /**
+   * Whether the button should hide when list is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful toggle.
+   */
+  onToggled?: () => void
+}
+
+export const listIcons = {
+  bulletList: ListIcon,
+  orderedList: ListOrderedIcon,
+  taskList: ListTodoIcon
+}
+
+export const listLabels: Record<ListType, string> = {
+  bulletList: 'Bullet List',
+  orderedList: 'Ordered List',
+  taskList: 'Task List'
+}
+
+export const LIST_SHORTCUT_KEYS: Record<ListType, string> = {
+  bulletList: 'mod+shift+8',
+  orderedList: 'mod+shift+7',
+  taskList: 'mod+shift+9'
+}
+
+/**
+ * Checks if a list can be toggled in the current editor state
+ */
+export function canToggleList(
+  editor: Editor | null,
+  type: ListType,
+  turnInto: boolean = true
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema(type, editor) || isNodeTypeSelected(editor, ['image'])) return false
+
+  if (!turnInto) {
+    switch (type) {
+      case 'bulletList':
+        return editor.can().toggleBulletList()
+      case 'orderedList':
+        return editor.can().toggleOrderedList()
+      case 'taskList':
+        return editor.can().toggleList('taskList', 'taskItem')
+      default:
+        return false
+    }
+  }
+
+  // Ensure selection is in nodes we're allowed to convert
+  if (
+    !selectionWithinConvertibleTypes(editor, [
+      'paragraph',
+      'heading',
+      'bulletList',
+      'orderedList',
+      'taskList',
+      'blockquote',
+      'codeBlock'
+    ])
+  )
+    return false
+
+  // Either we can set list directly on the selection,
+  // or we can clear formatting/nodes to arrive at a list.
+  switch (type) {
+    case 'bulletList':
+      return editor.can().toggleBulletList() || editor.can().clearNodes()
+    case 'orderedList':
+      return editor.can().toggleOrderedList() || editor.can().clearNodes()
+    case 'taskList':
+      return editor.can().toggleList('taskList', 'taskItem') || editor.can().clearNodes()
+    default:
+      return false
+  }
+}
+
+/**
+ * Checks if list is currently active
+ */
+export function isListActive(editor: Editor | null, type: ListType): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  switch (type) {
+    case 'bulletList':
+      return editor.isActive('bulletList')
+    case 'orderedList':
+      return editor.isActive('orderedList')
+    case 'taskList':
+      return editor.isActive('taskList')
+    default:
+      return false
+  }
+}
+
+/**
+ * Toggles list in the editor
+ */
+export function toggleList(editor: Editor | null, type: ListType): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleList(editor, type)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    const blocks = getSelectedBlockNodes(editor)
+
+    // In case a selection contains multiple blocks, we only allow
+    // toggling to nide if there's exactly one block selected
+    // we also dont block the canToggle since it will fall back to the bottom logic
+    const isPossibleToTurnInto =
+      selectionWithinConvertibleTypes(editor, [
+        'paragraph',
+        'heading',
+        'bulletList',
+        'orderedList',
+        'taskList',
+        'blockquote',
+        'codeBlock'
+      ]) && blocks.length === 1
+
+    // No selection, find the the cursor position
+    if (
+      (state.selection.empty || state.selection instanceof TextSelection) &&
+      isPossibleToTurnInto
+    ) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1
+
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1
+
+      const resolvedFrom = state.doc.resolve(from)
+      const resolvedTo = state.doc.resolve(to)
+
+      chain = chain.setTextSelection(TextSelection.between(resolvedFrom, resolvedTo)).clearNodes()
+    }
+
+    if (editor.isActive(type)) {
+      // Unwrap list
+      chain.liftListItem('listItem').lift('bulletList').lift('orderedList').lift('taskList').run()
+    } else {
+      // Wrap in specific list type
+      const toggleMap: Record<ListType, () => typeof chain> = {
+        bulletList: () => chain.toggleBulletList(),
+        orderedList: () => chain.toggleOrderedList(),
+        taskList: () => chain.toggleList('taskList', 'taskItem')
+      }
+
+      const toggle = toggleMap[type]
+      if (!toggle) return false
+
+      toggle().run()
+    }
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the list button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  type: ListType
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, type, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!isNodeInSchema(type, editor)) return false
+
+  if (!editor.isActive('code')) {
+    return canToggleList(editor, type)
+  }
+
+  return true
+}
+
+/** Provides list commands for ContentEditor controls. */
+export function useList(config: UseListConfig) {
+  const { editor: providedEditor, type, hideWhenUnavailable = false, onToggled } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggle = canToggleList(editor, type)
+  const isActive = isListActive(editor, type)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, type, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, type, hideWhenUnavailable])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleList(editor, type)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, type, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: listLabels[type],
+    shortcutKeys: LIST_SHORTCUT_KEYS[type],
+    Icon: listIcons[type]
+  }
+}

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

@@ -0,0 +1,199 @@
+'use client'
+
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+import { isMarkInSchema, isNodeTypeSelected } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/react'
+// --- Icons ---
+import {
+  BoldIcon,
+  Code2Icon,
+  ItalicIcon,
+  StrikethroughIcon as StrikeIcon,
+  UnderlineIcon
+} from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+
+export type Mark = 'bold' | 'italic' | 'strike' | 'code' | 'underline'
+
+/**
+ * Configuration for the mark functionality
+ */
+export interface UseMarkConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The type of mark to toggle
+   */
+  type: Mark
+  /**
+   * Whether the button should hide when mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful mark toggle.
+   */
+  onToggled?: () => void
+}
+
+export const markIcons = {
+  bold: BoldIcon,
+  italic: ItalicIcon,
+  underline: UnderlineIcon,
+  strike: StrikeIcon,
+  code: Code2Icon
+}
+
+export const MARK_SHORTCUT_KEYS: Record<Mark, string> = {
+  bold: 'mod+b',
+  italic: 'mod+i',
+  underline: 'mod+u',
+  strike: 'mod+shift+s',
+  code: 'mod+e'
+}
+
+/**
+ * Checks if a mark can be toggled in the current editor state
+ */
+export function canToggleMark(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isMarkInSchema(type, editor) || isNodeTypeSelected(editor, ['image'])) return false
+
+  return editor.can().toggleMark(type)
+}
+
+/**
+ * Checks if a mark is currently active
+ */
+export function isMarkActive(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive(type)
+}
+
+/**
+ * Toggles a mark in the editor
+ */
+export function toggleMark(editor: Editor | null, type: Mark): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleMark(editor, type)) return false
+
+  return editor.chain().focus().toggleMark(type).run()
+}
+
+/**
+ * Determines if the mark button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  type: Mark
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, type, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!isMarkInSchema(type, editor)) return false
+
+  if (!editor.isActive('code')) {
+    return canToggleMark(editor, type)
+  }
+
+  return true
+}
+
+/**
+ * Gets the formatted mark name
+ */
+export function getFormattedMarkName(type: Mark): string {
+  return type.charAt(0).toUpperCase() + type.slice(1)
+}
+
+/**
+ * Custom hook that provides mark functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleBoldButton() {
+ *   const { isVisible, handleMark } = useMark({ type: "bold" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleMark}>Bold</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedItalicButton() {
+ *   const { isVisible, handleMark, label, isActive } = useMark({
+ *     editor: myEditor,
+ *     type: "italic",
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Mark toggled!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleMark}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Italic
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useMark(config: UseMarkConfig) {
+  const { editor: providedEditor, type, hideWhenUnavailable = false, onToggled } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggle = canToggleMark(editor, type)
+  const isActive = isMarkActive(editor, type)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, type, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, type, hideWhenUnavailable])
+
+  const handleMark = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleMark(editor, type)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, type, onToggled])
+
+  return {
+    isVisible,
+    isActive,
+    handleMark,
+    canToggle,
+    label: getFormattedMarkName(type),
+    shortcutKeys: MARK_SHORTCUT_KEYS[type],
+    Icon: markIcons[type]
+  }
+}