@betterstart/cli 0.1.3 → 0.1.4

package/templates/tiptap/tiptap-ui/list-dropdown-menu/index.tsx

@@ -0,0 +1 @@
+export * from './list-dropdown-menu'

package/templates/tiptap/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { useCallback, useState } from 'react'
+
+// --- Hooks ---
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+
+// --- Icons ---
+import { ChevronDownIcon } from '../../tiptap-icons/chevron-down-icon'
+// --- UI Primitives ---
+import type { ButtonProps } from '../../tiptap-ui-primitive/button'
+import { Button, ButtonGroup } from '../../tiptap-ui-primitive/button'
+import { Card, CardBody } from '../../tiptap-ui-primitive/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '../../tiptap-ui-primitive/dropdown-menu'
+// --- Tiptap UI ---
+import { ListButton, type ListType } from '../list-button'
+import { useListDropdownMenu } from './use-list-dropdown-menu'
+
+export interface ListDropdownMenuProps extends Omit<ButtonProps, 'type'> {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor
+  /**
+   * The list types to display in the dropdown.
+   */
+  types?: ListType[]
+  /**
+   * Whether the dropdown should be hidden when no list types are available
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback for when the dropdown opens or closes
+   */
+  onOpenChange?: (isOpen: boolean) => void
+  /**
+   * Whether to render the dropdown menu in a portal
+   * @default false
+   */
+  portal?: boolean
+}
+
+export function ListDropdownMenu({
+  editor: providedEditor,
+  types = ['bulletList', 'orderedList', 'taskList'],
+  hideWhenUnavailable = false,
+  onOpenChange,
+  portal = false,
+  ...props
+}: ListDropdownMenuProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = useState(false)
+
+  const { filteredLists, canToggle, isActive, isVisible, Icon } = useListDropdownMenu({
+    editor,
+    types,
+    hideWhenUnavailable
+  })
+
+  const handleOnOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open)
+      onOpenChange?.(open)
+    },
+    [onOpenChange]
+  )
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOnOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          data-active-state={isActive ? 'on' : 'off'}
+          role="button"
+          tabIndex={-1}
+          disabled={!canToggle}
+          data-disabled={!canToggle}
+          aria-label="List options"
+          tooltip="List"
+          {...props}
+          onPointerDown={(e) => e.preventDefault()}
+          onClick={() => handleOnOpenChange(!isOpen)}
+        >
+          <Icon className="tiptap-button-icon" />
+          <ChevronDownIcon className="tiptap-button-dropdown-small" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start" portal={portal}>
+        <Card>
+          <CardBody>
+            <ButtonGroup>
+              {filteredLists.map((option) => (
+                <DropdownMenuItem key={option.type} asChild>
+                  <ListButton
+                    editor={editor}
+                    type={option.type}
+                    text={option.label}
+                    showTooltip={false}
+                  />
+                </DropdownMenuItem>
+              ))}
+            </ButtonGroup>
+          </CardBody>
+        </Card>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default ListDropdownMenu

package/templates/tiptap/tiptap-ui/list-dropdown-menu/use-list-dropdown-menu.ts

@@ -0,0 +1,203 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { useEffect, useMemo, useState } from 'react'
+
+// --- Hooks ---
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+// --- Lib ---
+import { isNodeInSchema } from '../../lib/tiptap-utils'
+// --- Icons ---
+import { ListIcon } from '../../tiptap-icons/list-icon'
+import { ListOrderedIcon } from '../../tiptap-icons/list-ordered-icon'
+import { ListTodoIcon } from '../../tiptap-icons/list-todo-icon'
+
+// --- Tiptap UI ---
+import { canToggleList, isListActive, type ListType, listIcons } from '../list-button'
+
+/**
+ * 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/templates/tiptap/tiptap-ui/mark-button/index.tsx

@@ -0,0 +1,2 @@
+export * from './mark-button'
+export * from './use-mark'

package/templates/tiptap/tiptap-ui/mark-button/mark-button.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { forwardRef, useCallback } from 'react'
+// --- Hooks ---
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+// --- Lib ---
+import { parseShortcutKeys } from '../../lib/tiptap-utils'
+import { Badge } from '../../tiptap-ui-primitive/badge'
+// --- UI Primitives ---
+import type { ButtonProps } from '../../tiptap-ui-primitive/button'
+import { Button } from '../../tiptap-ui-primitive/button'
+// --- Tiptap UI ---
+import type { Mark, UseMarkConfig } from '.'
+import { MARK_SHORTCUT_KEYS, useMark } from '.'
+
+export interface MarkButtonProps extends Omit<ButtonProps, 'type'>, UseMarkConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function MarkShortcutBadge({
+  type,
+  shortcutKeys = MARK_SHORTCUT_KEYS[type]
+}: {
+  type: Mark
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling marks in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useMark` hook instead.
+ */
+export const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      type,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleMark, label, canToggle, isActive, Icon, shortcutKeys } = useMark({
+      editor,
+      type,
+      hideWhenUnavailable,
+      onToggled
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleMark()
+      },
+      [handleMark, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canToggle}
+        variant="ghost"
+        data-active-state={isActive ? 'on' : 'off'}
+        data-disabled={!canToggle}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <MarkShortcutBadge type={type} shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+MarkButton.displayName = 'MarkButton'

package/templates/tiptap/tiptap-ui/mark-button/use-mark.ts

@@ -0,0 +1,206 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { useCallback, useEffect, useState } from 'react'
+
+// --- Hooks ---
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+
+// --- Lib ---
+import { isMarkInSchema, isNodeTypeSelected } from '../../lib/tiptap-utils'
+
+// --- Icons ---
+import { BoldIcon } from '../../tiptap-icons/bold-icon'
+import { Code2Icon } from '../../tiptap-icons/code2-icon'
+import { ItalicIcon } from '../../tiptap-icons/italic-icon'
+import { StrikeIcon } from '../../tiptap-icons/strike-icon'
+import { SubscriptIcon } from '../../tiptap-icons/subscript-icon'
+import { SuperscriptIcon } from '../../tiptap-icons/superscript-icon'
+import { UnderlineIcon } from '../../tiptap-icons/underline-icon'
+
+export type Mark = 'bold' | 'italic' | 'strike' | 'code' | 'underline' | 'superscript' | 'subscript'
+
+/**
+ * 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,
+  superscript: SuperscriptIcon,
+  subscript: SubscriptIcon
+}
+
+export const MARK_SHORTCUT_KEYS: Record<Mark, string> = {
+  bold: 'mod+b',
+  italic: 'mod+i',
+  underline: 'mod+u',
+  strike: 'mod+shift+s',
+  code: 'mod+e',
+  superscript: 'mod+.',
+  subscript: 'mod+,'
+}
+
+/**
+ * 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]
+  }
+}

package/templates/tiptap/tiptap-ui/text-align-button/index.tsx

@@ -0,0 +1,2 @@
+export * from './text-align-button'
+export * from './use-text-align'