@betterstart/cli 0.1.2 → 0.1.4

package/templates/tiptap/tiptap-ui/image-upload-button/image-upload-button.tsx

@@ -0,0 +1,114 @@
+'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 { UseImageUploadConfig } from '.'
+import { IMAGE_UPLOAD_SHORTCUT_KEY, useImageUpload } from '.'
+
+type IconProps = React.SVGProps<SVGSVGElement>
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement
+
+export interface ImageUploadButtonProps extends Omit<ButtonProps, 'type'>, UseImageUploadConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+  /**
+   * Optional custom icon component to render instead of the default.
+   */
+  icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>
+}
+
+export function ImageShortcutBadge({
+  shortcutKeys = IMAGE_UPLOAD_SHORTCUT_KEY
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for uploading/inserting images in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useImage` hook instead.
+ */
+export const ImageUploadButton = forwardRef<HTMLButtonElement, ImageUploadButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onInserted,
+      showShortcut = false,
+      onClick,
+      icon: CustomIcon,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, canInsert, handleImage, label, isActive, shortcutKeys, Icon } =
+      useImageUpload({
+        editor,
+        hideWhenUnavailable,
+        onInserted
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleImage()
+      },
+      [handleImage, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    const RenderIcon = CustomIcon ?? Icon
+
+    return (
+      <Button
+        type="button"
+        variant="ghost"
+        data-active-state={isActive ? 'on' : 'off'}
+        role="button"
+        tabIndex={-1}
+        disabled={!canInsert}
+        data-disabled={!canInsert}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <RenderIcon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <ImageShortcutBadge shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ImageUploadButton.displayName = 'ImageUploadButton'

package/templates/tiptap/tiptap-ui/image-upload-button/index.tsx

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

package/templates/tiptap/tiptap-ui/image-upload-button/use-image-upload.ts

@@ -0,0 +1,192 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { useCallback, useEffect, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { useIsBreakpoint } from '../../hooks/use-is-breakpoint'
+// --- Hooks ---
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+
+// --- Lib ---
+import { isExtensionAvailable } from '../../lib/tiptap-utils'
+
+// --- Icons ---
+import { ImagePlusIcon } from '../../tiptap-icons/image-plus-icon'
+
+export const IMAGE_UPLOAD_SHORTCUT_KEY = 'mod+shift+i'
+
+/**
+ * Configuration for the image upload functionality
+ */
+export interface UseImageUploadConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when insertion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful image insertion.
+   */
+  onInserted?: () => void
+}
+
+/**
+ * Checks if image can be inserted in the current editor state
+ */
+export function canInsertImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, 'imageUpload')) return false
+
+  return editor.can().insertContent({ type: 'imageUpload' })
+}
+
+/**
+ * Checks if image is currently active
+ */
+export function isImageActive(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive('imageUpload')
+}
+
+/**
+ * Inserts an image in the editor
+ */
+export function insertImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canInsertImage(editor)) return false
+
+  try {
+    return editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: 'imageUpload'
+      })
+      .run()
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the image button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (!hideWhenUnavailable) {
+    return true
+  }
+
+  if (!isExtensionAvailable(editor, 'imageUpload')) return false
+
+  if (!editor.isActive('code')) {
+    return canInsertImage(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides image functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleImageButton() {
+ *   const { isVisible, handleImage } = useImage()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleImage}>Add Image</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedImageButton() {
+ *   const { isVisible, handleImage, label, isActive } = useImage({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onInserted: () => console.log('Image inserted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleImage}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Add Image
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useImageUpload(config?: UseImageUploadConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onInserted } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canInsert = canInsertImage(editor)
+  const isActive = isImageActive(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on('selectionUpdate', handleSelectionUpdate)
+
+    return () => {
+      editor.off('selectionUpdate', handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleImage = useCallback(() => {
+    if (!editor) return false
+
+    const success = insertImage(editor)
+    if (success) {
+      onInserted?.()
+    }
+    return success
+  }, [editor, onInserted])
+
+  useHotkeys(
+    IMAGE_UPLOAD_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleImage()
+    },
+    {
+      enabled: isVisible && canInsert,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleImage,
+    canInsert,
+    label: 'Add image',
+    shortcutKeys: IMAGE_UPLOAD_SHORTCUT_KEY,
+    Icon: ImagePlusIcon
+  }
+}

package/templates/tiptap/tiptap-ui/link-popover/index.tsx

@@ -0,0 +1,2 @@
+export * from './link-popover'
+export * from './use-link-popover'

package/templates/tiptap/tiptap-ui/link-popover/link-popover.tsx

@@ -0,0 +1,285 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { forwardRef, useCallback, useEffect, useState } from 'react'
+
+// --- Hooks ---
+import { useIsBreakpoint } from '../../hooks/use-is-breakpoint'
+import { useTiptapEditor } from '../../hooks/use-tiptap-editor'
+
+// --- Icons ---
+import { CornerDownLeftIcon } from '../../tiptap-icons/corner-down-left-icon'
+import { ExternalLinkIcon } from '../../tiptap-icons/external-link-icon'
+import { LinkIcon } from '../../tiptap-icons/link-icon'
+import { TrashIcon } from '../../tiptap-icons/trash-icon'
+// --- UI Primitives ---
+import type { ButtonProps } from '../../tiptap-ui-primitive/button'
+import { Button, ButtonGroup } from '../../tiptap-ui-primitive/button'
+import { Card, CardBody, CardItemGroup } from '../../tiptap-ui-primitive/card'
+import { Input, InputGroup } from '../../tiptap-ui-primitive/input'
+import { Popover, PopoverContent, PopoverTrigger } from '../../tiptap-ui-primitive/popover'
+import { Separator } from '../../tiptap-ui-primitive/separator'
+// --- Tiptap UI ---
+import type { UseLinkPopoverConfig } from '.'
+import { useLinkPopover } from '.'
+
+export interface LinkMainProps {
+  /**
+   * The URL to set for the link.
+   */
+  url: string
+  /**
+   * Function to update the URL state.
+   */
+  setUrl: React.Dispatch<React.SetStateAction<string | null>>
+  /**
+   * Function to set the link in the editor.
+   */
+  setLink: () => void
+  /**
+   * Function to remove the link from the editor.
+   */
+  removeLink: () => void
+  /**
+   * Function to open the link.
+   */
+  openLink: () => void
+  /**
+   * Whether the link is currently active in the editor.
+   */
+  isActive: boolean
+}
+
+export interface LinkPopoverProps extends Omit<ButtonProps, 'type'>, UseLinkPopoverConfig {
+  /**
+   * Callback for when the popover opens or closes.
+   */
+  onOpenChange?: (isOpen: boolean) => void
+  /**
+   * Whether to automatically open the popover when a link is active.
+   * @default true
+   */
+  autoOpenOnLinkActive?: boolean
+}
+
+/**
+ * Link button component for triggering the link popover
+ */
+export const LinkButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <Button
+        type="button"
+        className={className}
+        variant="ghost"
+        role="button"
+        tabIndex={-1}
+        aria-label="Link"
+        tooltip="Link"
+        ref={ref}
+        {...props}
+      >
+        {children || <LinkIcon className="tiptap-button-icon" />}
+      </Button>
+    )
+  }
+)
+
+LinkButton.displayName = 'LinkButton'
+
+/**
+ * Main content component for the link popover
+ */
+const LinkMain: React.FC<LinkMainProps> = ({
+  url,
+  setUrl,
+  setLink,
+  removeLink,
+  openLink,
+  isActive
+}) => {
+  const isMobile = useIsBreakpoint()
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      setLink()
+    }
+  }
+
+  return (
+    <Card
+      style={{
+        ...(isMobile ? { boxShadow: 'none', border: 0 } : {})
+      }}
+    >
+      <CardBody
+        style={{
+          ...(isMobile ? { padding: 0 } : {})
+        }}
+      >
+        <CardItemGroup orientation="horizontal">
+          <InputGroup>
+            <Input
+              type="url"
+              placeholder="Paste a link..."
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              onKeyDown={handleKeyDown}
+              autoFocus
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+            />
+          </InputGroup>
+
+          <ButtonGroup orientation="horizontal">
+            <Button
+              type="button"
+              onClick={setLink}
+              title="Apply link"
+              disabled={!url && !isActive}
+              variant="ghost"
+            >
+              <CornerDownLeftIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+
+          <Separator />
+
+          <ButtonGroup orientation="horizontal">
+            <Button
+              type="button"
+              onClick={openLink}
+              title="Open in new window"
+              disabled={!url && !isActive}
+              variant="ghost"
+            >
+              <ExternalLinkIcon className="tiptap-button-icon" />
+            </Button>
+
+            <Button
+              type="button"
+              onClick={removeLink}
+              title="Remove link"
+              disabled={!url && !isActive}
+              variant="ghost"
+            >
+              <TrashIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  )
+}
+
+/**
+ * Link content component for standalone use
+ */
+export const LinkContent: React.FC<{
+  editor?: Editor | null
+}> = ({ editor }) => {
+  const linkPopover = useLinkPopover({
+    editor
+  })
+
+  return <LinkMain {...linkPopover} />
+}
+
+/**
+ * Link popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(
+  (
+    {
+      editor: providedEditor,
+      hideWhenUnavailable = false,
+      onSetLink,
+      onOpenChange,
+      autoOpenOnLinkActive = true,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const [isOpen, setIsOpen] = useState(false)
+
+    const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } =
+      useLinkPopover({
+        editor,
+        hideWhenUnavailable,
+        onSetLink
+      })
+
+    const handleOnOpenChange = useCallback(
+      (nextIsOpen: boolean) => {
+        setIsOpen(nextIsOpen)
+        onOpenChange?.(nextIsOpen)
+      },
+      [onOpenChange]
+    )
+
+    const handleSetLink = useCallback(() => {
+      setLink()
+      setIsOpen(false)
+    }, [setLink])
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        setIsOpen(!isOpen)
+      },
+      [onClick, isOpen]
+    )
+
+    useEffect(() => {
+      if (autoOpenOnLinkActive && isActive) {
+        setIsOpen(true)
+      }
+    }, [autoOpenOnLinkActive, isActive])
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Popover open={isOpen} onOpenChange={handleOnOpenChange}>
+        <PopoverTrigger asChild>
+          <LinkButton
+            disabled={!canSet}
+            data-active-state={isActive ? 'on' : 'off'}
+            data-disabled={!canSet}
+            aria-label={label}
+            aria-pressed={isActive}
+            onClick={handleClick}
+            {...buttonProps}
+            ref={ref}
+          >
+            {children ?? <Icon className="tiptap-button-icon" />}
+          </LinkButton>
+        </PopoverTrigger>
+
+        <PopoverContent>
+          <LinkMain
+            url={url}
+            setUrl={setUrl}
+            setLink={handleSetLink}
+            removeLink={removeLink}
+            openLink={openLink}
+            isActive={isActive}
+          />
+        </PopoverContent>
+      </Popover>
+    )
+  }
+)
+
+LinkPopover.displayName = 'LinkPopover'
+
+export default LinkPopover