betterstart-cli 0.0.96 → 0.0.98

package/dist/assets/adapters/next/templates/init/components/shared/sort-order-item.tsx

@@ -1,9 +1,9 @@
+import type { SortOrderItem as SortOrderItemData } from './sort-order-types'
 import { Button } from '@admin/components/ui/button'
 import { cn } from '@admin/utils/shared/cn'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { GripVertical } from 'lucide-react'
-import type { SortOrderItem as SortOrderItemData } from './sort-order-types'
 
 export function SortableItem({ id, label }: SortOrderItemData) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -16,9 +16,9 @@ export function SortableItem({ id, label }: SortOrderItemData) {
         type="button"
         variant="outline"
         className={cn(
-          'shrink-0 w-full justify-start gap-2 px-2 font-normal cursor-grab touch-none active:cursor-grabbing',
+          'w-full shrink-0 cursor-grab touch-none justify-start gap-2 px-2 font-normal active:cursor-grabbing',
           {
-            'opacity-50 z-20': isDragging
+            'z-20 opacity-50': isDragging
           }
         )}
         {...attributes}

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

@@ -1,8 +1,7 @@
 'use client'
 
-// --- Hooks ---
+import type { Editor } from '@tiptap/react'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- UI Utils ---
 import {
   findNodePosition,
   getSelectedBlockNodes,
@@ -12,35 +11,17 @@ import {
   selectionWithinConvertibleTypes
 } from '@admin/utils/editor/tiptap'
 import { NodeSelection, TextSelection } from '@tiptap/pm/state'
-import type { Editor } from '@tiptap/react'
-// --- Icons ---
 import { TextQuoteIcon as BlockquoteIcon } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
 export const BLOCKQUOTE_SHORTCUT_KEY = 'mod+shift+b'
 
-/**
- * Configuration for the blockquote functionality
- */
 export interface UseBlockquoteConfig {
-  /**
-   * The Tiptap editor instance.
-   */
   editor?: Editor | null
-  /**
-   * Whether the button should hide when blockquote is not available.
-   * @default false
-   */
   hideWhenUnavailable?: boolean
-  /**
-   * Callback function called after a successful toggle.
-   */
   onToggled?: () => void
 }
 
-/**
- * Checks if blockquote can be toggled in the current editor state
- */
 export function canToggleBlockquote(editor: Editor | null, turnInto: boolean = true): boolean {
   if (!editor || !editor.isEditable) return false
   if (!isNodeInSchema('blockquote', editor) || isNodeTypeSelected(editor, ['image'])) return false
@@ -49,7 +30,6 @@ export function canToggleBlockquote(editor: Editor | null, turnInto: boolean = t
     return editor.can().toggleWrap('blockquote')
   }
 
-  // Ensure selection is in nodes we're allowed to convert
   if (
     !selectionWithinConvertibleTypes(editor, [
       'paragraph',
@@ -63,14 +43,9 @@ export function canToggleBlockquote(editor: Editor | null, turnInto: boolean = t
   )
     return false
 
-  // Either we can wrap in blockquote directly on the selection,
-  // or we can clear formatting/nodes to arrive at a blockquote.
   return editor.can().toggleWrap('blockquote') || editor.can().clearNodes()
 }
 
-/**
- * Toggles blockquote formatting for a specific node or the current selection
- */
 export function toggleBlockquote(editor: Editor | null): boolean {
   if (!editor || !editor.isEditable) return false
   if (!canToggleBlockquote(editor)) return false
@@ -82,9 +57,6 @@ export function toggleBlockquote(editor: Editor | null): 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',
@@ -96,7 +68,6 @@ export function toggleBlockquote(editor: Editor | null): boolean {
         'codeBlock'
       ]) && blocks.length === 1
 
-    // No selection, find the the cursor position
     if (
       (state.selection.empty || state.selection instanceof TextSelection) &&
       isPossibleToTurnInto
@@ -116,7 +87,6 @@ export function toggleBlockquote(editor: Editor | null): boolean {
 
     let chain = editor.chain().focus()
 
-    // Handle NodeSelection
     if (selection instanceof NodeSelection) {
       const firstChild = selection.node.firstChild?.firstChild
       const lastChild = selection.node.lastChild?.lastChild
@@ -145,9 +115,6 @@ export function toggleBlockquote(editor: Editor | null): boolean {
   }
 }
 
-/**
- * Determines if the blockquote button should be shown
- */
 export function shouldShowButton(props: {
   editor: Editor | null
   hideWhenUnavailable: boolean
@@ -169,42 +136,6 @@ export function shouldShowButton(props: {
   return true
 }
 
-/**
- * Custom hook that provides blockquote functionality for Tiptap editor
- *
- * @example
- * ```tsx
- * // Simple usage - no params needed
- * function MySimpleBlockquoteButton() {
- *   const { isVisible, handleToggle, isActive } = useBlockquote()
- *
- *   if (!isVisible) return null
- *
- *   return <button onClick={handleToggle}>Blockquote</button>
- * }
- *
- * // Advanced usage with configuration
- * function MyAdvancedBlockquoteButton() {
- *   const { isVisible, handleToggle, label, isActive } = useBlockquote({
- *     editor: myEditor,
- *     hideWhenUnavailable: true,
- *     onToggled: () => console.log('Blockquote toggled!')
- *   })
- *
- *   if (!isVisible) return null
- *
- *   return (
- *     <MyButton
- *       onClick={handleToggle}
- *       aria-label={label}
- *       aria-pressed={isActive}
- *     >
- *       Toggle Blockquote
- *     </MyButton>
- *   )
- * }
- * ```
- */
 export function useBlockquote(config?: UseBlockquoteConfig) {
   const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config || {}
 

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-code-block.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,35 +11,17 @@ import {
   selectionWithinConvertibleTypes
 } from '@admin/utils/editor/tiptap'
 import { NodeSelection, TextSelection } from '@tiptap/pm/state'
-import type { Editor } from '@tiptap/react'
-// --- Icons ---
 import { SquareCodeIcon as CodeBlockIcon } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
 export const CODE_BLOCK_SHORTCUT_KEY = 'mod+alt+c'
 
-/**
- * Configuration for the code block functionality
- */
 export interface UseCodeBlockConfig {
-  /**
-   * The Tiptap editor instance.
-   */
   editor?: Editor | null
-  /**
-   * Whether the button should hide when code block is not available.
-   * @default false
-   */
   hideWhenUnavailable?: boolean
-  /**
-   * Callback function called after a successful code block toggle.
-   */
   onToggled?: () => void
 }
 
-/**
- * Checks if code block can be toggled in the current editor state
- */
 export function canToggle(editor: Editor | null, turnInto: boolean = true): boolean {
   if (!editor || !editor.isEditable) return false
   if (!isNodeInSchema('codeBlock', editor) || isNodeTypeSelected(editor, ['image'])) return false
@@ -49,7 +30,6 @@ export function canToggle(editor: Editor | null, turnInto: boolean = true): bool
     return editor.can().toggleNode('codeBlock', 'paragraph')
   }
 
-  // Ensure selection is in nodes we're allowed to convert
   if (
     !selectionWithinConvertibleTypes(editor, [
       'paragraph',
@@ -63,14 +43,9 @@ export function canToggle(editor: Editor | null, turnInto: boolean = true): bool
   )
     return false
 
-  // Either we can toggle code block directly on the selection,
-  // or we can clear formatting/nodes to arrive at a code block.
   return editor.can().toggleNode('codeBlock', 'paragraph') || editor.can().clearNodes()
 }
 
-/**
- * Toggles code block in the editor
- */
 export function toggleCodeBlock(editor: Editor | null): boolean {
   if (!editor || !editor.isEditable) return false
   if (!canToggle(editor)) return false
@@ -82,9 +57,6 @@ export function toggleCodeBlock(editor: Editor | null): 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',
@@ -96,7 +68,6 @@ export function toggleCodeBlock(editor: Editor | null): boolean {
         'codeBlock'
       ]) && blocks.length === 1
 
-    // No selection, find the the cursor position
     if (
       (state.selection.empty || state.selection instanceof TextSelection) &&
       isPossibleToTurnInto
@@ -116,7 +87,6 @@ export function toggleCodeBlock(editor: Editor | null): boolean {
 
     let chain = editor.chain().focus()
 
-    // Handle NodeSelection
     if (selection instanceof NodeSelection) {
       const firstChild = selection.node.firstChild?.firstChild
       const lastChild = selection.node.lastChild?.lastChild
@@ -145,9 +115,6 @@ export function toggleCodeBlock(editor: Editor | null): boolean {
   }
 }
 
-/**
- * Determines if the code block button should be shown
- */
 export function shouldShowButton(props: {
   editor: Editor | null
   hideWhenUnavailable: boolean
@@ -169,49 +136,6 @@ export function shouldShowButton(props: {
   return true
 }
 
-/**
- * Custom hook that provides code block functionality for Tiptap editor
- *
- * @example
- * ```tsx
- * // Simple usage - no params needed
- * function MySimpleCodeBlockButton() {
- *   const { isVisible, isActive, handleToggle } = useCodeBlock()
- *
- *   if (!isVisible) return null
- *
- *   return (
- *     <button
- *       onClick={handleToggle}
- *       aria-pressed={isActive}
- *     >
- *       Code Block
- *     </button>
- *   )
- * }
- *
- * // Advanced usage with configuration
- * function MyAdvancedCodeBlockButton() {
- *   const { isVisible, isActive, handleToggle, label } = useCodeBlock({
- *     editor: myEditor,
- *     hideWhenUnavailable: true,
- *     onToggled: (isActive) => console.log('Code block toggled:', isActive)
- *   })
- *
- *   if (!isVisible) return null
- *
- *   return (
- *     <MyButton
- *       onClick={handleToggle}
- *       aria-label={label}
- *       aria-pressed={isActive}
- *     >
- *       Toggle Code Block
- *     </MyButton>
- *   )
- * }
- * ```
- */
 export function useCodeBlock(config?: UseCodeBlockConfig) {
   const { editor: providedEditor, hideWhenUnavailable = false, onToggled } = config || {}
 

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

@@ -1,21 +1,18 @@
 'use client'
 
+import type { ContentEditorHighlightColorOption } from '@admin/utils/editor/content-editor'
+import type { Editor } from '@tiptap/react'
 import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
-// --- Hooks ---
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Lib ---
 import {
   CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS,
-  CONTENT_EDITOR_HIGHLIGHT_COLORS,
-  type ContentEditorHighlightColorOption
+  CONTENT_EDITOR_HIGHLIGHT_COLORS
 } from '@admin/utils/editor/content-editor'
 import {
   isExtensionAvailable,
   isMarkInSchema,
   isNodeTypeSelected
 } from '@admin/utils/editor/tiptap'
-import type { Editor } from '@tiptap/react'
-// --- Icons ---
 import { HighlighterIcon } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -28,42 +25,13 @@ export type HighlightColor = ContentEditorHighlightColorOption
 
 export type HighlightMode = 'mark' | 'node'
 
-/**
- * Configuration for the color highlight functionality
- */
 export interface UseColorHighlightConfig {
-  /**
-   * The Tiptap editor instance.
-   */
   editor?: Editor | null
-  /**
-   * The color to apply when toggling the highlight.
-   */
   highlightColor?: string
-  /**
-   * Optional label to display alongside the icon.
-   */
   label?: string
-  /**
-   * Whether the button should hide when the mark is not available.
-   * @default false
-   */
   hideWhenUnavailable?: boolean
-  /**
-   * The highlighting mode to use.
-   * - "mark": Uses the highlight mark extension (default)
-   * - "node": Uses the node background extension
-   * @default "mark"
-   */
   mode?: HighlightMode
-  /**
-   * When true, uses the actual color value (colorValue) instead of CSS variable (value).
-   * @default false
-   */
   useColorValue?: boolean
-  /**
-   * Called when the highlight is applied.
-   */
   onApplied?: ({
     color,
     label,
@@ -82,9 +50,6 @@ export function pickHighlightColorsByValue(values: string[]) {
     .filter((color): color is ContentEditorHighlightColorOption => !!color)
 }
 
-/**
- * Gets the appropriate color value based on configuration
- */
 export function getHighlightColorValue(color: string, useColorValue: boolean = false): string {
   if (!useColorValue) return color
 
@@ -92,9 +57,6 @@ export function getHighlightColorValue(color: string, useColorValue: boolean = f
   return colorItem?.colorValue || color
 }
 
-/**
- * Checks if highlight can be applied based on the mode and current editor state
- */
 export function canColorHighlight(editor: Editor | null, mode: HighlightMode = 'mark'): boolean {
   if (!editor || !editor.isEditable) return false
 
@@ -113,9 +75,6 @@ export function canColorHighlight(editor: Editor | null, mode: HighlightMode = '
   }
 }
 
-/**
- * Checks if highlight is currently active
- */
 export function isColorHighlightActive(
   editor: Editor | null,
   highlightColor?: string,
@@ -148,9 +107,6 @@ export function isColorHighlightActive(
   }
 }
 
-/**
- * Removes highlight based on the mode
- */
 export function removeHighlight(editor: Editor | null, mode: HighlightMode = 'mark'): boolean {
   if (!editor || !editor.isEditable) return false
   if (!canColorHighlight(editor, mode)) return false
@@ -162,9 +118,6 @@ export function removeHighlight(editor: Editor | null, mode: HighlightMode = 'ma
   }
 }
 
-/**
- * Determines if the highlight button should be shown
- */
 export function shouldShowButton(props: {
   editor: Editor | null
   hideWhenUnavailable: boolean
@@ -178,7 +131,6 @@ export function shouldShowButton(props: {
     return true
   }
 
-  // hideWhenUnavailable=true: check schema/extension availability
   if (mode === 'mark') {
     if (!isMarkInSchema('highlight', editor)) return false
   } else {

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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { Editor } from '@tiptap/react'
 import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import {
@@ -8,8 +10,6 @@ import {
   insertContentEditorMediaPlaceholder,
   isContentEditorMediaPlaceholderActive
 } from '@admin/utils/editor/tiptap'
-import type { Editor } from '@tiptap/react'
-import * as React from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 export interface UseContentEditorMediaInsertionOptions {

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

@@ -1,17 +1,15 @@
 'use client'
 
-import {
-  type ContentEditorSlashCommand,
-  getFilteredSlashCommands
-} from '@admin/utils/editor/slash-commands'
+import * as React from 'react'
+import type { ContentEditorSlashCommand } from '@admin/utils/editor/slash-commands'
+import type { SlashMenuState } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/react'
+import { getFilteredSlashCommands } from '@admin/utils/editor/slash-commands'
 import {
   getSlashMenuState,
   isSameSlashMenuState,
-  runSlashCommand,
-  type SlashMenuState
+  runSlashCommand
 } from '@admin/utils/editor/tiptap'
-import type { Editor } from '@tiptap/react'
-import * as React from 'react'
 
 export function useContentEditorSlashMenu(editorRef: React.RefObject<Editor | null>) {
   const [slashMenu, setSlashMenu] = React.useState<SlashMenuState | null>(null)

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-source-mode.tsx

@@ -1,8 +1,14 @@
 'use client'
 
+import * as React from 'react'
+import type { ContentEditorSelectionRequest } from '@admin/utils/editor/content-editor'
+import type { MarkdownHeadingLevel, MarkdownListType } from '@admin/utils/editor/markdown'
+import type { ViewUpdate } from '@codemirror/view'
+import type { QueryClient } from '@tanstack/react-query'
+import type { ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import type { Root } from 'react-dom/client'
 import { MediaField } from '@admin/components/custom/media-field'
 import { useTheme } from '@admin/hooks/use-admin-theme'
-import type { ContentEditorSelectionRequest } from '@admin/utils/editor/content-editor'
 import {
   applyCursorChange,
   applyCursorChangeIfAvailable,
@@ -16,8 +22,6 @@ import {
   insertComponentAtCursor,
   insertMarkdownTextAtPosition,
   insertTextAtCursor,
-  type MarkdownHeadingLevel,
-  type MarkdownListType,
   parseContentEditorMathInput,
   removeHighlightSpanAtCursor,
   removeMarkdownLinkAtCursor,
@@ -28,13 +32,11 @@ import { createMarkdownTextFromUrl } from '@admin/utils/editor/source-media'
 import { sanitizeUrl } from '@admin/utils/editor/tiptap'
 import { redo, redoDepth, undo, undoDepth } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
-import { Decoration, EditorView, type ViewUpdate, WidgetType } from '@codemirror/view'
-import { type QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query'
+import { Decoration, EditorView, WidgetType } from '@codemirror/view'
+import { QueryClientProvider, useQueryClient } from '@tanstack/react-query'
 import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
-import type { ReactCodeMirrorRef } from '@uiw/react-codemirror'
 import { NuqsAdapter } from 'nuqs/adapters/react'
-import * as React from 'react'
-import { createRoot, type Root } from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 
 const ADMIN_MONO_FONT_FAMILY = 'var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace'
 

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

@@ -1,16 +1,16 @@
 'use client'
 
+import * as React from 'react'
+import type { TableAddControlsState } from '@admin/utils/editor/table-add-controls'
+import type { Editor } from '@tiptap/react'
 import {
   ACTIVE_TABLE_WRAPPER_CLASS,
   getMountedEditorView,
   getSelectionTable,
   getTableFromEventTarget,
-  getTableFromWrapper,
-  type TableAddControlsState
+  getTableFromWrapper
 } 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

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

@@ -1,13 +1,17 @@
 'use client'
 
+import * as React from 'react'
+import type {
+  ContentEditorMode,
+  ContentEditorSelectionRequest
+} from '@admin/utils/editor/content-editor'
+import type { Editor } from '@tiptap/react'
 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,
@@ -34,9 +38,8 @@ 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 { 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 {

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

@@ -1,43 +1,18 @@
 'use client'
 
-// --- Hooks ---
-import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import type { Level } from './use-heading'
 import type { Editor } from '@tiptap/react'
-// --- Icons ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import { HeadingIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { canToggle, headingIcons, isHeadingActive, shouldShowButton } from './use-heading'
 
-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]
@@ -46,45 +21,6 @@ export function getActiveHeadingLevel(
   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,