betterstart-cli 0.0.97 → 0.0.98

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

@@ -1,8 +1,7 @@
 'use client'
 
-// --- Hooks ---
+import type { Editor } from '@tiptap/react'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Lib ---
 import {
   findNodePosition,
   getSelectedBlockNodes,
@@ -12,8 +11,6 @@ import {
   selectionWithinConvertibleTypes
 } from '@admin/utils/editor/tiptap'
 import { NodeSelection, TextSelection } from '@tiptap/pm/state'
-import type { Editor } from '@tiptap/react'
-// --- Icons ---
 import {
   Heading5Icon as HeadingFiveIcon,
   Heading4Icon as HeadingFourIcon,
@@ -26,26 +23,10 @@ import { useCallback, useEffect, useState } from 'react'
 
 export type Level = 1 | 2 | 3 | 4 | 5 | 6
 
-/**
- * Configuration for the heading functionality
- */
 export interface UseHeadingConfig {
-  /**
-   * The Tiptap editor instance.
-   */
   editor?: Editor | null
-  /**
-   * The heading level.
-   */
   level: Level
-  /**
-   * Whether the button should hide when heading is not available.
-   * @default false
-   */
   hideWhenUnavailable?: boolean
-  /**
-   * Callback function called after a successful heading toggle.
-   */
   onToggled?: () => void
 }
 
@@ -67,9 +48,6 @@ export const HEADING_SHORTCUT_KEYS: Record<Level, string> = {
   6: 'ctrl+alt+6'
 }
 
-/**
- * Checks if heading can be toggled in the current editor state
- */
 export function canToggle(editor: Editor | null, level?: Level, turnInto: boolean = true): boolean {
   if (!editor || !editor.isEditable) return false
   if (!isNodeInSchema('heading', editor) || isNodeTypeSelected(editor, ['image'])) return false
@@ -78,7 +56,6 @@ export function canToggle(editor: Editor | null, level?: Level, turnInto: boolea
     return level ? editor.can().setNode('heading', { level }) : editor.can().setNode('heading')
   }
 
-  // Ensure selection is in nodes we're allowed to convert
   if (
     !selectionWithinConvertibleTypes(editor, [
       'paragraph',
@@ -92,16 +69,11 @@ export function canToggle(editor: Editor | null, level?: Level, turnInto: boolea
   )
     return false
 
-  // Either we can set heading directly on the selection,
-  // or we can clear formatting/nodes to arrive at a heading.
   return level
     ? editor.can().setNode('heading', { level }) || editor.can().clearNodes()
     : editor.can().setNode('heading') || editor.can().clearNodes()
 }
 
-/**
- * Checks if heading is currently active
- */
 export function isHeadingActive(editor: Editor | null, level?: Level | Level[]): boolean {
   if (!editor || !editor.isEditable) return false
 
@@ -112,9 +84,6 @@ export function isHeadingActive(editor: Editor | null, level?: Level | Level[]):
   return level ? editor.isActive('heading', { level }) : editor.isActive('heading')
 }
 
-/**
- * Toggles heading in the editor
- */
 export function toggleHeading(editor: Editor | null, level: Level | Level[]): boolean {
   if (!editor || !editor.isEditable) return false
 
@@ -130,9 +99,6 @@ export function toggleHeading(editor: Editor | null, level: Level | Level[]): bo
 
     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',
@@ -144,7 +110,6 @@ export function toggleHeading(editor: Editor | null, level: Level | Level[]): bo
         'codeBlock'
       ]) && blocks.length === 1
 
-    // No selection, find the the cursor position
     if (
       (state.selection.empty || state.selection instanceof TextSelection) &&
       isPossibleToTurnInto
@@ -163,7 +128,6 @@ export function toggleHeading(editor: Editor | null, level: Level | Level[]): bo
     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
@@ -194,9 +158,6 @@ export function toggleHeading(editor: Editor | null, level: Level | Level[]): bo
   }
 }
 
-/**
- * Determines if the heading button should be shown
- */
 export function shouldShowButton(props: {
   editor: Editor | null
   level?: Level | Level[]
@@ -222,7 +183,6 @@ export function shouldShowButton(props: {
   return true
 }
 
-/** Provides heading commands for ContentEditor controls. */
 export function useHeading(config: UseHeadingConfig) {
   const { editor: providedEditor, level, hideWhenUnavailable = false, onToggled } = config
 

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

@@ -4,12 +4,6 @@ import { useEffect, useState } from 'react'
 
 type BreakpointMode = 'min' | 'max'
 
-/**
- * Hook to detect whether the current viewport matches a given breakpoint rule.
- * Example:
- *   useIsBreakpoint("max", 768)   // true when width < 768
- *   useIsBreakpoint("min", 1024)  // true when width >= 1024
- */
 export function useIsBreakpoint(mode: BreakpointMode = 'max', breakpoint = 768) {
   const [matches, setMatches] = useState<boolean | undefined>(undefined)
 
@@ -20,10 +14,8 @@ export function useIsBreakpoint(mode: BreakpointMode = 'max', breakpoint = 768)
     const mql = window.matchMedia(query)
     const onChange = (e: MediaQueryListEvent) => setMatches(e.matches)
 
-    // Set initial value
     setMatches(mql.matches)
 
-    // Add listener
     mql.addEventListener('change', onChange)
     return () => mql.removeEventListener('change', onChange)
   }, [mode, breakpoint])

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

@@ -1,55 +1,25 @@
 'use client'
 
-// --- Hooks ---
+import type { Editor } from '@tiptap/react'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Lib ---
 import { isMarkInSchema, isNodeTypeSelected, sanitizeUrl } from '@admin/utils/editor/tiptap'
-import type { Editor } from '@tiptap/react'
-// --- Icons ---
 import { LinkIcon } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
-/**
- * Configuration for the link popover functionality
- */
 export interface UseLinkPopoverConfig {
-  /**
-   * The Tiptap editor instance.
-   */
   editor?: Editor | null
-  /**
-   * Whether to hide the link popover when not available.
-   * @default false
-   */
   hideWhenUnavailable?: boolean
-  /**
-   * Callback function called when the link is set.
-   */
   onSetLink?: () => void
 }
 
-/**
- * Configuration for the link handler functionality
- */
 export interface LinkHandlerProps {
-  /**
-   * The Tiptap editor instance.
-   */
   editor: Editor | null
-  /**
-   * Callback function called when the link is set.
-   */
   onSetLink?: () => void
 }
 
-/**
- * Checks if a link can be set in the current editor state
- */
 export function canSetLink(editor: Editor | null): boolean {
   if (!editor || !editor.isEditable) return false
 
-  // The third argument 'true' checks whether the current selection is inside an image caption, and prevents setting a link there
-  // If the selection is inside an image caption, we can't set a link
   if (isNodeTypeSelected(editor, ['image'], true)) return false
   try {
     return editor.can().setMark('link')
@@ -58,17 +28,11 @@ export function canSetLink(editor: Editor | null): boolean {
   }
 }
 
-/**
- * Checks if a link is currently active in the editor
- */
 export function isLinkActive(editor: Editor | null): boolean {
   if (!editor || !editor.isEditable) return false
   return editor.isActive('link')
 }
 
-/**
- * Determines if the link button should be shown
- */
 export function shouldShowLinkButton(props: {
   editor: Editor | null
   hideWhenUnavailable: boolean
@@ -79,17 +43,14 @@ export function shouldShowLinkButton(props: {
 
   const linkInSchema = isMarkInSchema('link', editor)
 
-  // If hideWhenUnavailable is false, always show the button (even if disabled)
   if (!hideWhenUnavailable) {
     return true
   }
 
-  // hideWhenUnavailable is true: hide if link is not in schema
   if (!linkInSchema) {
     return false
   }
 
-  // hideWhenUnavailable is true: hide if we can't set a link (unless in code block)
   if (!editor.isActive('code')) {
     return canSetLink(editor)
   }
@@ -97,9 +58,6 @@ export function shouldShowLinkButton(props: {
   return true
 }
 
-/**
- * Custom hook for handling link operations in a Tiptap editor
- */
 export function useLinkHandler(props: LinkHandlerProps) {
   const { editor, onSetLink } = props
   const [url, setUrl] = useState<string | null>(null)
@@ -176,9 +134,6 @@ export function useLinkHandler(props: LinkHandlerProps) {
   }
 }
 
-/**
- * Custom hook for link popover state management
- */
 export function useLinkState(props: { editor: Editor | null; hideWhenUnavailable: boolean }) {
   const { editor, hideWhenUnavailable = false } = props
 
@@ -215,43 +170,6 @@ export function useLinkState(props: { editor: Editor | null; hideWhenUnavailable
   }
 }
 
-/**
- * Main hook that provides link popover functionality for Tiptap editor
- *
- * @example
- * ```tsx
- * // Simple usage
- * function MyLinkButton() {
- *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
- *
- *   if (!isVisible) return null
- *
- *   return <button disabled={!canSet}>Link</button>
- * }
- *
- * // Advanced usage with configuration
- * function MyAdvancedLinkButton() {
- *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
- *     editor: myEditor,
- *     hideWhenUnavailable: true,
- *     onSetLink: () => console.log('Link set!')
- *   })
- *
- *   if (!isVisible) return null
- *
- *   return (
- *     <MyButton
- *       disabled={!canSet}
- *       aria-label={label}
- *       aria-pressed={isActive}
- *     >
- *       <Icon />
- *       {label}
- *     </MyButton>
- *   )
- * }
- * ```
- */
 export function useLinkPopover(config?: UseLinkPopoverConfig) {
   const { editor: providedEditor, hideWhenUnavailable = false, onSetLink } = config || {}
 

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

@@ -1,32 +1,16 @@
 'use client'
 
-// --- Hooks ---
+import type { ListType } from './use-list'
+import type { Editor } from '@tiptap/react'
 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'
+import { canToggleList, isListActive, 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
 }
 
@@ -92,9 +76,6 @@ export function shouldShowListDropdown(params: {
   return true
 }
 
-/**
- * Gets the currently active list type from the available types
- */
 export function getActiveListType(
   editor: Editor | null,
   availableTypes: ListType[]
@@ -103,45 +84,6 @@ export function getActiveListType(
   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,

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

@@ -1,8 +1,7 @@
 'use client'
 
-// --- Hooks ---
+import type { Editor } from '@tiptap/react'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Lib ---
 import {
   findNodePosition,
   getSelectedBlockNodes,
@@ -12,33 +11,15 @@ import {
   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
 }
 
@@ -60,9 +41,6 @@ export const LIST_SHORTCUT_KEYS: Record<ListType, string> = {
   taskList: 'mod+shift+9'
 }
 
-/**
- * Checks if a list can be toggled in the current editor state
- */
 export function canToggleList(
   editor: Editor | null,
   type: ListType,
@@ -84,7 +62,6 @@ export function canToggleList(
     }
   }
 
-  // Ensure selection is in nodes we're allowed to convert
   if (
     !selectionWithinConvertibleTypes(editor, [
       'paragraph',
@@ -98,8 +75,6 @@ export function canToggleList(
   )
     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()
@@ -112,9 +87,6 @@ export function canToggleList(
   }
 }
 
-/**
- * Checks if list is currently active
- */
 export function isListActive(editor: Editor | null, type: ListType): boolean {
   if (!editor || !editor.isEditable) return false
 
@@ -130,9 +102,6 @@ export function isListActive(editor: Editor | null, type: ListType): boolean {
   }
 }
 
-/**
- * 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
@@ -144,9 +113,6 @@ export function toggleList(editor: Editor | null, type: ListType): boolean {
 
     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',
@@ -158,7 +124,6 @@ export function toggleList(editor: Editor | null, type: ListType): boolean {
         'codeBlock'
       ]) && blocks.length === 1
 
-    // No selection, find the the cursor position
     if (
       (state.selection.empty || state.selection instanceof TextSelection) &&
       isPossibleToTurnInto
@@ -178,7 +143,6 @@ export function toggleList(editor: Editor | null, type: ListType): boolean {
 
     let chain = editor.chain().focus()
 
-    // Handle NodeSelection
     if (selection instanceof NodeSelection) {
       const firstChild = selection.node.firstChild?.firstChild
       const lastChild = selection.node.lastChild?.lastChild
@@ -194,10 +158,8 @@ export function toggleList(editor: Editor | null, type: ListType): boolean {
     }
 
     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(),
@@ -218,9 +180,6 @@ export function toggleList(editor: Editor | null, type: ListType): boolean {
   }
 }
 
-/**
- * Determines if the list button should be shown
- */
 export function shouldShowButton(props: {
   editor: Editor | null
   type: ListType
@@ -243,7 +202,6 @@ export function shouldShowButton(props: {
   return true
 }
 
-/** Provides list commands for ContentEditor controls. */
 export function useList(config: UseListConfig) {
   const { editor: providedEditor, type, hideWhenUnavailable = false, onToggled } = config
 

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

@@ -1,11 +1,8 @@
 'use client'
 
-// --- Hooks ---
+import type { Editor } from '@tiptap/react'
 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,
@@ -17,26 +14,10 @@ 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
 }
 
@@ -56,9 +37,6 @@ export const MARK_SHORTCUT_KEYS: Record<Mark, string> = {
   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
@@ -66,17 +44,11 @@ export function canToggleMark(editor: Editor | null, type: Mark): boolean {
   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
@@ -84,9 +56,6 @@ export function toggleMark(editor: Editor | null, type: Mark): boolean {
   return editor.chain().focus().toggleMark(type).run()
 }
 
-/**
- * Determines if the mark button should be shown
- */
 export function shouldShowButton(props: {
   editor: Editor | null
   type: Mark
@@ -109,50 +78,10 @@ export function shouldShowButton(props: {
   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