betterstart-cli 0.0.1

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-button.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Input } from '@admin/components/ui/input'
+import { Label } from '@admin/components/ui/label'
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
+import { normalizeCount } from '@admin/utils/editor/table-input'
+import { insertContentEditorTable } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/core'
+import { TableIcon } from 'lucide-react'
+import * as React from 'react'
+
+const DEFAULT_TABLE_ROWS = 3
+const DEFAULT_TABLE_COLS = 3
+const MIN_TABLE_ROWS = 2
+const MIN_TABLE_COLS = 1
+
+interface TableButtonProps {
+  disabled?: boolean
+  editor?: Editor | null
+  onInsertTable?: (size: { cols: number; rows: number }) => void
+}
+
+export function TableButton({ disabled, editor, onInsertTable }: TableButtonProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [rows, setRows] = React.useState(String(DEFAULT_TABLE_ROWS))
+  const [cols, setCols] = React.useState(String(DEFAULT_TABLE_COLS))
+  const rowsId = React.useId()
+  const colsId = React.useId()
+  const canInsert = Boolean(onInsertTable || editor?.isEditable)
+
+  const closePopover = React.useCallback(() => {
+    setIsOpen(false)
+    window.setTimeout(() => setIsOpen(false), 0)
+  }, [])
+
+  const insertTable = React.useCallback(() => {
+    if (disabled || !canInsert) return
+
+    const rowCount = normalizeCount(rows, DEFAULT_TABLE_ROWS, MIN_TABLE_ROWS)
+    const colCount = normalizeCount(cols, DEFAULT_TABLE_COLS, MIN_TABLE_COLS)
+
+    if (onInsertTable) {
+      onInsertTable({ cols: colCount, rows: rowCount })
+      closePopover()
+      return
+    }
+
+    if (!editor) return
+
+    insertContentEditorTable(editor, rowCount, colCount)
+    closePopover()
+  }, [canInsert, closePopover, cols, disabled, editor, onInsertTable, rows])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'Enter') return
+
+      event.preventDefault()
+      event.stopPropagation()
+      insertTable()
+    },
+    [insertTable]
+  )
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={disabled || !canInsert}
+          aria-label="Insert table"
+          title="Table"
+          onPointerDown={(event) => event.preventDefault()}
+          onClick={() => setIsOpen((current) => !current)}
+        >
+          <TableIcon className="tiptap-button-icon" />
+          <span className="tiptap-button-text">Table</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-56 p-3">
+        <div className="flex flex-col gap-3" onKeyDownCapture={handleKeyDown}>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor={rowsId}>Rows</Label>
+              <Input
+                id={rowsId}
+                inputMode="numeric"
+                min={MIN_TABLE_ROWS}
+                onChange={(event) => setRows(event.target.value)}
+                type="number"
+                value={rows}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor={colsId}>Cols</Label>
+              <Input
+                id={colsId}
+                inputMode="numeric"
+                min={MIN_TABLE_COLS}
+                onChange={(event) => setCols(event.target.value)}
+                type="number"
+                value={cols}
+              />
+            </div>
+          </div>
+          <Button type="button" size="sm" disabled={disabled || !canInsert} onClick={insertTable}>
+            Enter
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-extension/node-background-extension.ts

@@ -0,0 +1,138 @@
+import { getSelectedNodesOfType, updateNodesAttr } from '@admin/utils/editor/tiptap'
+import type { NodeWithPos } from '@tiptap/core'
+import { Extension } from '@tiptap/core'
+import type { EditorState, Transaction } from '@tiptap/pm/state'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    nodeBackground: {
+      setNodeBackgroundColor: (backgroundColor: string) => ReturnType
+      unsetNodeBackgroundColor: () => ReturnType
+      toggleNodeBackgroundColor: (backgroundColor: string) => ReturnType
+    }
+  }
+}
+
+export interface NodeBackgroundOptions {
+  /**
+   * Node types that should support background colors
+   * @default ["paragraph", "heading", "blockquote", "taskList", "bulletList", "orderedList", "tableCell", "tableHeader"]
+   */
+  types: string[]
+  /**
+   * Use inline style instead of data attribute
+   * @default true
+   */
+  useStyle?: boolean
+}
+
+/**
+ * Determines the target color for toggle operations
+ */
+function getToggleColor(targets: NodeWithPos[], inputColor: string): string | null {
+  if (targets.length === 0) return null
+
+  for (const target of targets) {
+    const currentColor = target.node.attrs?.backgroundColor ?? null
+    if (currentColor !== inputColor) {
+      return inputColor
+    }
+  }
+
+  return null
+}
+
+export const NodeBackground = Extension.create<NodeBackgroundOptions>({
+  name: 'nodeBackground',
+
+  addOptions() {
+    return {
+      types: [
+        'paragraph',
+        'heading',
+        'blockquote',
+        'taskList',
+        'bulletList',
+        'orderedList',
+        'tableCell',
+        'tableHeader'
+      ],
+      useStyle: true
+    }
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null as string | null,
+
+            parseHTML: (element: HTMLElement) => {
+              const styleColor = element.style?.backgroundColor
+              if (styleColor) return styleColor
+
+              const dataColor = element.getAttribute('data-background-color')
+              return dataColor || null
+            },
+
+            renderHTML: (attributes) => {
+              const color = attributes.backgroundColor as string | null
+              if (!color) return {}
+
+              if (this.options.useStyle) {
+                return {
+                  style: `background-color: ${color}`
+                }
+              } else {
+                return {
+                  'data-background-color': color
+                }
+              }
+            }
+          }
+        }
+      }
+    ]
+  },
+
+  addCommands() {
+    /**
+     * Generic command executor for background color operations
+     */
+    const executeBackgroundCommand = (
+      getTargetColor: (targets: NodeWithPos[], inputColor?: string) => string | null
+    ) => {
+      return (inputColor?: string) =>
+        ({ state, tr }: { state: EditorState; tr: Transaction }) => {
+          const targets = getSelectedNodesOfType(state.selection, this.options.types)
+
+          if (targets.length === 0) return false
+
+          const targetColor = getTargetColor(targets, inputColor)
+
+          return updateNodesAttr(tr, targets, 'backgroundColor', targetColor)
+        }
+    }
+
+    return {
+      /**
+       * Set background color to specific value
+       */
+      setNodeBackgroundColor: executeBackgroundCommand((_, inputColor) => inputColor || null),
+
+      /**
+       * Remove background color
+       */
+      unsetNodeBackgroundColor: executeBackgroundCommand(() => null),
+
+      /**
+       * Toggle background color (set if different/missing, unset if all have it)
+       */
+      toggleNodeBackgroundColor: executeBackgroundCommand((targets, inputColor) =>
+        getToggleColor(targets, inputColor || '')
+      )
+    }
+  }
+})

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension.ts

@@ -0,0 +1,10 @@
+import TiptapHorizontalRule from '@tiptap/extension-horizontal-rule'
+import { mergeAttributes } from '@tiptap/react'
+
+export const HorizontalRule = TiptapHorizontalRule.extend({
+  renderHTML() {
+    return ['div', mergeAttributes(this.options.HTMLAttributes, { 'data-type': this.name }), ['hr']]
+  }
+})
+
+export default HorizontalRule

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/media-gallery-placeholder-node/index.tsx

@@ -0,0 +1 @@
+export * from './media-gallery-placeholder-node-extension'

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node-extension.ts

@@ -0,0 +1,117 @@
+import type { NodeType } from '@tiptap/pm/model'
+import { mergeAttributes, Node, ReactNodeViewRenderer } from '@tiptap/react'
+import { MediaGalleryPlaceholderNode as MediaGalleryPlaceholderNodeComponent } from './media-gallery-placeholder-node'
+
+export interface MediaGalleryPlaceholderNodeOptions {
+  /**
+   * The type of the node.
+   * @default 'image'
+   */
+  type?: string | NodeType | undefined
+  /**
+   * Acceptable media types for the gallery dialog.
+   * @default 'image/*'
+   */
+  accept?: string
+  /**
+   * HTML attributes to add to the image element.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/react' {
+  interface Commands<ReturnType> {
+    mediaGalleryPlaceholder: {
+      setMediaGalleryPlaceholderNode: (options?: MediaGalleryPlaceholderNodeOptions) => ReturnType
+    }
+  }
+}
+
+/**
+ * A Tiptap node extension that creates a media gallery placeholder.
+ * @see registry/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node
+ */
+export const MediaGalleryPlaceholderNode = Node.create<MediaGalleryPlaceholderNodeOptions>({
+  name: 'mediaGalleryPlaceholder',
+
+  group: 'block',
+
+  draggable: true,
+
+  selectable: true,
+
+  atom: true,
+
+  addOptions() {
+    return {
+      type: 'image',
+      accept: 'image/*',
+      HTMLAttributes: {}
+    }
+  },
+
+  addAttributes() {
+    return {
+      accept: {
+        default: this.options.accept
+      }
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="media-gallery-placeholder"]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes({ 'data-type': 'media-gallery-placeholder' }, HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(MediaGalleryPlaceholderNodeComponent)
+  },
+
+  addCommands() {
+    return {
+      setMediaGalleryPlaceholderNode:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options
+          })
+        }
+    }
+  },
+
+  /**
+   * Adds Enter key handler to reopen the media gallery when the placeholder is selected.
+   */
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => {
+        const { selection } = editor.state
+        const { nodeAfter } = selection.$from
+
+        if (
+          nodeAfter &&
+          nodeAfter.type.name === 'mediaGalleryPlaceholder' &&
+          editor.isActive('mediaGalleryPlaceholder')
+        ) {
+          const nodeEl = editor.view.nodeDOM(selection.$from.pos)
+          if (nodeEl && nodeEl instanceof HTMLElement) {
+            const trigger = nodeEl.querySelector('button')
+            if (trigger && trigger instanceof HTMLElement) {
+              trigger.click()
+              return true
+            }
+          }
+        }
+        return false
+      }
+    }
+  }
+})
+
+export default MediaGalleryPlaceholderNode

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/media-gallery-placeholder-node/media-gallery-placeholder-node.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { ContentEditorMediaGalleryBlock } from '@admin/components/custom/content-editor/media-gallery-block'
+import { getMediaLabel } from '@admin/utils/editor/source-media'
+import { focusNextNode, isValidPosition } from '@admin/utils/editor/tiptap'
+import type { NodeViewProps } from '@tiptap/react'
+import { NodeViewWrapper } from '@tiptap/react'
+import * as React from 'react'
+
+export const MediaGalleryPlaceholderNode: React.FC<NodeViewProps> = (props) => {
+  const { accept } = props.node.attrs
+  const { editor, node } = props
+  const extension = props.extension
+
+  const removePlaceholder = React.useCallback(() => {
+    const pos = props.getPos()
+    if (!isValidPosition(pos)) return
+
+    editor
+      .chain()
+      .focus()
+      .deleteRange({ from: pos, to: pos + node.nodeSize })
+      .run()
+    focusNextNode(editor)
+  }, [editor, node.nodeSize, props])
+
+  const handleMediaSelected = React.useCallback(
+    (url: string) => {
+      const pos = props.getPos()
+      if (!isValidPosition(pos) || !url) return
+      const label = getMediaLabel(url)
+
+      editor
+        .chain()
+        .focus()
+        .deleteRange({ from: pos, to: pos + node.nodeSize })
+        .insertContentAt(pos, {
+          type: extension.options.type,
+          attrs: {
+            ...extension.options,
+            src: url,
+            alt: label,
+            title: label
+          }
+        })
+        .run()
+
+      focusNextNode(editor)
+    },
+    [editor, extension.options, node.nodeSize, props]
+  )
+
+  return (
+    <NodeViewWrapper className="block" tabIndex={0}>
+      <ContentEditorMediaGalleryBlock
+        accept={accept}
+        disabled={!editor.isEditable}
+        onMediaSelected={handleMediaSelected}
+        onRemove={removePlaceholder}
+      />
+    </NodeViewWrapper>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/removable-image-node/index.tsx

@@ -0,0 +1 @@
+export { RemovableImage } from './removable-image-node-extension'

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/removable-image-node/removable-image-node-extension.ts

@@ -0,0 +1,11 @@
+import { Image } from '@tiptap/extension-image'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import { RemovableImageNode } from './removable-image-node'
+
+export const RemovableImage = Image.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(RemovableImageNode)
+  }
+})
+
+export default RemovableImage

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/removable-image-node/removable-image-node.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
+import { Button } from '@admin/components/ui/button'
+import type { AdminMedia } from '@admin/types'
+import { getNumberAttr, getStringAttr } from '@admin/utils/editor/node-attrs'
+import { getMediaLabel } from '@admin/utils/editor/source-media'
+import { focusNextNode, isValidPosition } from '@admin/utils/editor/tiptap'
+import { cn } from '@admin/utils/shared/cn'
+import type { NodeViewProps } from '@tiptap/react'
+import { NodeViewWrapper } from '@tiptap/react'
+import NextImage from 'next/image'
+import * as React from 'react'
+
+export const RemovableImageNode: React.FC<NodeViewProps> = (props) => {
+  const { editor, node } = props
+  const src = getStringAttr(node.attrs.src)
+  const alt = getStringAttr(node.attrs.alt)
+  const title = getStringAttr(node.attrs.title)
+  const width = getNumberAttr(node.attrs.width)
+  const height = getNumberAttr(node.attrs.height)
+  const aspectRatio = width && height ? `${width} / ${height}` : '16 / 9'
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false)
+  const [isControlsVisible, setIsControlsVisible] = React.useState(false)
+
+  const handleChangeClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    setIsDialogOpen(true)
+  }, [])
+
+  const handleMediaSelected = React.useCallback(
+    (selected: AdminMedia | AdminMedia[]) => {
+      const item = Array.isArray(selected) ? selected[0] : selected
+      const pos = props.getPos()
+      if (!item?.url || !isValidPosition(pos)) return
+
+      const label = item.alt || getMediaLabel(item.url)
+      editor.view.dispatch(
+        editor.state.tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          src: item.url,
+          alt: label,
+          title: item.filename || label,
+          width: item.width ?? null,
+          height: item.height ?? null
+        })
+      )
+      editor.commands.focus()
+    },
+    [editor, node.attrs, props]
+  )
+
+  const handleImageLoad = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      if (width && height) return
+      const image = event.currentTarget
+      if (!image.naturalWidth || !image.naturalHeight) return
+      const pos = props.getPos()
+      if (!isValidPosition(pos)) return
+      const tr = editor.state.tr
+        .setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: image.naturalWidth,
+          height: image.naturalHeight
+        })
+        .setMeta('addToHistory', false)
+      editor.view.dispatch(tr)
+    },
+    [editor, height, node.attrs, props, width]
+  )
+
+  const handleRemove = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      const pos = props.getPos()
+      if (!isValidPosition(pos)) return
+
+      editor
+        .chain()
+        .focus()
+        .deleteRange({ from: pos, to: pos + node.nodeSize })
+        .run()
+      focusNextNode(editor)
+    },
+    [editor, node.nodeSize, props]
+  )
+
+  return (
+    <NodeViewWrapper
+      className="not-prose relative my-4 block max-w-full rounded-md"
+      contentEditable={false}
+      data-content-editor-image-node=""
+      onMouseEnter={() => setIsControlsVisible(true)}
+      onMouseMove={() => setIsControlsVisible(true)}
+      onMouseOver={() => setIsControlsVisible(true)}
+      onMouseLeave={() => setIsControlsVisible(false)}
+      onFocusCapture={() => setIsControlsVisible(true)}
+      onBlurCapture={(event: React.FocusEvent<HTMLDivElement>) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setIsControlsVisible(false)
+        }
+      }}
+      tabIndex={0}
+      style={{ width: width ? `${width}px` : '100%' }}
+    >
+      <div
+        className="relative max-w-full overflow-hidden rounded-md bg-muted/20"
+        style={{ aspectRatio }}
+      >
+        {src && (
+          <NextImage
+            src={src}
+            alt={alt}
+            title={title || undefined}
+            fill
+            sizes="(min-width: 1024px) 768px, 100vw"
+            unoptimized
+            className="!m-0 !h-full !w-full !max-w-full object-contain"
+            onLoad={handleImageLoad}
+          />
+        )}
+        {editor.isEditable && (
+          <div
+            data-content-editor-image-controls-overlay=""
+            className={cn(
+              'pointer-events-none rounded-md absolute inset-0 flex items-center justify-center gap-1 bg-black/10 backdrop-blur-xs transition-opacity duration-200 ease-out',
+              {
+                'opacity-100': isControlsVisible,
+                'opacity-0': !isControlsVisible
+              }
+            )}
+          >
+            <Button
+              type="button"
+              variant="outline"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleChangeClick}
+              className="pointer-events-auto border-primary/10"
+            >
+              Change
+            </Button>
+            <Button
+              type="button"
+              variant="default"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleRemove}
+              className="pointer-events-auto"
+            >
+              Remove
+            </Button>
+          </div>
+        )}
+      </div>
+      {editor.isEditable && (
+        <MediaGalleryDialog
+          open={isDialogOpen}
+          onOpenChange={setIsDialogOpen}
+          onSelect={handleMediaSelected}
+          mode="single"
+          accept="image/*"
+        />
+      )}
+    </NodeViewWrapper>
+  )
+}