betterstart-cli 0.0.1

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

@@ -0,0 +1,347 @@
+'use client'
+
+import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
+// --- Hooks ---
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+// --- Lib ---
+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'
+
+export const COLOR_HIGHLIGHT_SHORTCUT_KEY = 'mod+shift+h'
+export const HIGHLIGHT_COLORS = [
+  {
+    label: 'Default background',
+    value: 'var(--tt-bg-color)',
+    colorValue: '#ffffff',
+    border: 'var(--tt-bg-color-contrast)'
+  },
+  {
+    label: 'Gray background',
+    value: 'var(--tt-color-highlight-gray)',
+    colorValue: '#f8f8f7',
+    border: 'var(--tt-color-highlight-gray-contrast)'
+  },
+  {
+    label: 'Brown background',
+    value: 'var(--tt-color-highlight-brown)',
+    colorValue: '#f4eeee',
+    border: 'var(--tt-color-highlight-brown-contrast)'
+  },
+  {
+    label: 'Orange background',
+    value: 'var(--tt-color-highlight-orange)',
+    colorValue: '#fbecdd',
+    border: 'var(--tt-color-highlight-orange-contrast)'
+  },
+  {
+    label: 'Yellow background',
+    value: 'var(--tt-color-highlight-yellow)',
+    colorValue: '#fef9c3',
+    border: 'var(--tt-color-highlight-yellow-contrast)'
+  },
+  {
+    label: 'Green background',
+    value: 'var(--tt-color-highlight-green)',
+    colorValue: '#dcfce7',
+    border: 'var(--tt-color-highlight-green-contrast)'
+  },
+  {
+    label: 'Blue background',
+    value: 'var(--tt-color-highlight-blue)',
+    colorValue: '#e0f2fe',
+    border: 'var(--tt-color-highlight-blue-contrast)'
+  },
+  {
+    label: 'Purple background',
+    value: 'var(--tt-color-highlight-purple)',
+    colorValue: '#f3e8ff',
+    border: 'var(--tt-color-highlight-purple-contrast)'
+  },
+  {
+    label: 'Pink background',
+    value: 'var(--tt-color-highlight-pink)',
+    colorValue: '#fcf1f6',
+    border: 'var(--tt-color-highlight-pink-contrast)'
+  },
+  {
+    label: 'Red background',
+    value: 'var(--tt-color-highlight-red)',
+    colorValue: '#ffe4e6',
+    border: 'var(--tt-color-highlight-red-contrast)'
+  }
+]
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number]
+
+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,
+    mode
+  }: {
+    color: string
+    label: string
+    mode: HighlightMode
+  }) => void
+}
+
+export function pickHighlightColorsByValue(values: string[]) {
+  const colorMap = new Map(HIGHLIGHT_COLORS.map((color) => [color.value, color]))
+  return values
+    .map((value) => colorMap.get(value))
+    .filter((color): color is (typeof HIGHLIGHT_COLORS)[number] => !!color)
+}
+
+/**
+ * Gets the appropriate color value based on configuration
+ */
+export function getHighlightColorValue(color: string, useColorValue: boolean = false): string {
+  if (!useColorValue) return color
+
+  const colorItem = HIGHLIGHT_COLORS.find((c) => c.value === color || c.colorValue === color)
+  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
+
+  if (mode === 'mark') {
+    if (!isMarkInSchema('highlight', editor) || isNodeTypeSelected(editor, ['image'])) return false
+
+    return editor.can().setMark('highlight')
+  } else {
+    if (!isExtensionAvailable(editor, ['nodeBackground'])) return false
+
+    try {
+      return editor.can().toggleNodeBackgroundColor('test')
+    } catch {
+      return false
+    }
+  }
+}
+
+/**
+ * Checks if highlight is currently active
+ */
+export function isColorHighlightActive(
+  editor: Editor | null,
+  highlightColor?: string,
+  mode: HighlightMode = 'mark'
+): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  if (mode === 'mark') {
+    return highlightColor
+      ? editor.isActive('highlight', { color: highlightColor })
+      : editor.isActive('highlight')
+  } else {
+    if (!highlightColor) return false
+
+    try {
+      const { state } = editor
+      const { selection } = state
+
+      const $pos = selection.$anchor
+      for (let depth = $pos.depth; depth >= 0; depth--) {
+        const node = $pos.node(depth)
+        if (node && node.attrs?.backgroundColor === highlightColor) {
+          return true
+        }
+      }
+      return false
+    } catch {
+      return false
+    }
+  }
+}
+
+/**
+ * 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
+
+  if (mode === 'mark') {
+    return editor.chain().focus().unsetMark('highlight').run()
+  } else {
+    return editor.chain().focus().unsetNodeBackgroundColor().run()
+  }
+}
+
+/**
+ * Determines if the highlight button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  mode: HighlightMode
+}): boolean {
+  const { editor, hideWhenUnavailable, mode } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  // hideWhenUnavailable=true: check schema/extension availability
+  if (mode === 'mark') {
+    if (!isMarkInSchema('highlight', editor)) return false
+  } else {
+    if (!isExtensionAvailable(editor, ['nodeBackground'])) return false
+  }
+
+  if (!editor.isActive('code')) {
+    return canColorHighlight(editor, mode)
+  }
+
+  return true
+}
+
+export function useColorHighlight(config: UseColorHighlightConfig) {
+  const {
+    editor: providedEditor,
+    label,
+    highlightColor,
+    hideWhenUnavailable = false,
+    mode = 'mark',
+    useColorValue = false,
+    onApplied
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canColorHighlightState = canColorHighlight(editor, mode)
+  const actualColor = highlightColor
+    ? getHighlightColorValue(highlightColor, useColorValue)
+    : highlightColor
+  const isActive = isColorHighlightActive(editor, actualColor, mode)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, mode }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable, mode])
+
+  const handleColorHighlight = useCallback(() => {
+    if (!editor || !canColorHighlightState || !actualColor || !label) return false
+
+    if (mode === 'mark') {
+      if (editor.state.storedMarks) {
+        const highlightMarkType = editor.schema.marks.highlight
+        if (highlightMarkType) {
+          editor.view.dispatch(editor.state.tr.removeStoredMark(highlightMarkType))
+        }
+      }
+
+      setTimeout(() => {
+        const success = editor.chain().focus().toggleHighlight({ color: actualColor }).run()
+        if (success) {
+          onApplied?.({ color: actualColor, label, mode })
+        }
+        return success
+      }, 0)
+
+      return true
+    } else {
+      const success = editor.chain().focus().toggleNodeBackgroundColor(actualColor).run()
+
+      if (success) {
+        onApplied?.({ color: actualColor, label, mode })
+      }
+      return success
+    }
+  }, [canColorHighlightState, actualColor, editor, label, onApplied, mode])
+
+  const handleRemoveHighlight = useCallback(() => {
+    const success = removeHighlight(editor, mode)
+    if (success) {
+      onApplied?.({ color: '', label: 'Remove highlight', mode })
+    }
+    return success
+  }, [editor, onApplied, mode])
+
+  useHotkeys(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleColorHighlight()
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon,
+    mode
+  }
+}

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

@@ -0,0 +1,59 @@
+'use client'
+
+import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
+import {
+  CONTENT_EDITOR_MEDIA_SHORTCUT_KEY,
+  canInsertContentEditorMediaPlaceholder,
+  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 {
+  editor?: Editor | null
+  onInserted?: () => void
+}
+
+export function useContentEditorMediaInsertion({
+  editor: providedEditor,
+  onInserted
+}: UseContentEditorMediaInsertionOptions = {}) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const canInsert = canInsertContentEditorMediaPlaceholder(editor)
+  const isActive = isContentEditorMediaPlaceholderActive(editor)
+  const isVisible = Boolean(editor?.isEditable)
+
+  const insertMedia = React.useCallback(() => {
+    const success = insertContentEditorMediaPlaceholder(editor)
+    if (success) {
+      onInserted?.()
+    }
+    return success
+  }, [editor, onInserted])
+
+  useHotkeys(
+    CONTENT_EDITOR_MEDIA_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      insertMedia()
+    },
+    {
+      enabled: isVisible && canInsert,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  )
+
+  return {
+    canInsert,
+    insertMedia,
+    isActive,
+    isVisible,
+    label: 'Add media',
+    shortcutKeys: CONTENT_EDITOR_MEDIA_SHORTCUT_KEY
+  }
+}

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

@@ -0,0 +1,17 @@
+'use client'
+
+import * as React from 'react'
+import { useIsMobile } from '../use-mobile'
+
+export type ContentEditorMobileToolbarView = 'main' | 'highlighter' | 'link' | 'math'
+
+export function useContentEditorMobileToolbar() {
+  const isMobile = useIsMobile()
+  const [mobileViewState, setMobileView] = React.useState<ContentEditorMobileToolbarView>('main')
+
+  return {
+    isMobile,
+    mobileView: isMobile ? mobileViewState : 'main',
+    setMobileView
+  }
+}

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

@@ -0,0 +1,116 @@
+'use client'
+
+import {
+  type ContentEditorSlashCommand,
+  getFilteredSlashCommands
+} from '@admin/utils/editor/slash-commands'
+import {
+  getSlashMenuState,
+  isSameSlashMenuState,
+  runSlashCommand,
+  type SlashMenuState
+} 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)
+  const [activeSlashIndexState, setActiveSlashIndexState] = React.useState(0)
+  const slashMenuRef = React.useRef<SlashMenuState | null>(null)
+  const activeSlashIndexRef = React.useRef(0)
+  const filteredSlashCommands = React.useMemo(
+    () => getFilteredSlashCommands(slashMenu?.query ?? ''),
+    [slashMenu]
+  )
+  const filteredSlashCommandsRef = React.useRef(filteredSlashCommands)
+  const activeSlashIndex =
+    activeSlashIndexState >= filteredSlashCommands.length ? 0 : activeSlashIndexState
+
+  slashMenuRef.current = slashMenu
+  activeSlashIndexRef.current = activeSlashIndex
+  filteredSlashCommandsRef.current = filteredSlashCommands
+
+  const updateSlashMenu = React.useCallback((nextEditor: Editor) => {
+    const nextSlashMenu = getSlashMenuState(nextEditor)
+
+    setSlashMenu((current) =>
+      isSameSlashMenuState(current, nextSlashMenu) ? current : nextSlashMenu
+    )
+
+    setActiveSlashIndexState((current) =>
+      slashMenuRef.current?.query === nextSlashMenu?.query && nextSlashMenu ? current : 0
+    )
+  }, [])
+
+  const closeSlashMenu = React.useCallback(() => {
+    setSlashMenu(null)
+    setActiveSlashIndexState(0)
+  }, [])
+
+  const selectSlashCommand = React.useCallback(
+    (command: ContentEditorSlashCommand) => {
+      const currentSlashMenu = slashMenuRef.current
+      const editor = editorRef.current
+
+      if (!currentSlashMenu || !editor) return false
+
+      const didRun = runSlashCommand(editor, command, currentSlashMenu)
+      closeSlashMenu()
+      return didRun
+    },
+    [closeSlashMenu, editorRef]
+  )
+
+  const handleSlashKeyDown = React.useCallback(
+    (event: KeyboardEvent) => {
+      const currentSlashMenu = slashMenuRef.current
+      if (!currentSlashMenu) return false
+
+      const commands = filteredSlashCommandsRef.current
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        setActiveSlashIndexState((current) =>
+          commands.length > 0 ? (current + 1) % commands.length : 0
+        )
+        return true
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        setActiveSlashIndexState((current) =>
+          commands.length > 0 ? (current - 1 + commands.length) % commands.length : 0
+        )
+        return true
+      }
+
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        closeSlashMenu()
+        return true
+      }
+
+      if (event.key === 'Enter' || event.key === 'Tab') {
+        const command = commands[activeSlashIndexRef.current]
+        if (!command) return false
+
+        event.preventDefault()
+        return selectSlashCommand(command)
+      }
+
+      return false
+    },
+    [closeSlashMenu, selectSlashCommand]
+  )
+
+  return {
+    activeSlashIndex,
+    closeSlashMenu,
+    filteredSlashCommands,
+    handleSlashKeyDown,
+    selectSlashCommand,
+    setActiveSlashIndex: setActiveSlashIndexState,
+    slashMenu,
+    updateSlashMenu
+  }
+}