create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-templates/simple/simple-editor.tsx

@@ -0,0 +1,348 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { EditorContent, EditorContext, useEditor, type Editor, type Extensions } from "@tiptap/react"
+import type { JSONContent } from "@tiptap/core"
+
+// --- Tiptap Core Extensions ---
+import { StarterKit } from "@tiptap/starter-kit"
+import { Image } from "@tiptap/extension-image"
+import { TaskItem, TaskList } from "@tiptap/extension-list"
+import { TextAlign } from "@tiptap/extension-text-align"
+import { Typography } from "@tiptap/extension-typography"
+import { Highlight } from "@tiptap/extension-highlight"
+import { Subscript } from "@tiptap/extension-subscript"
+import { Superscript } from "@tiptap/extension-superscript"
+import { FindAndReplace } from "@tiptap/extension-find-and-replace"
+import { Selection } from "@tiptap/extensions"
+
+// --- UI Primitives ---
+import { Button } from "@/components/tiptap-ui-primitive/button"
+import { Spacer } from "@/components/tiptap-ui-primitive/spacer"
+import {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+} from "@/components/tiptap-ui-primitive/toolbar"
+
+// --- Tiptap Node ---
+import { ImageUploadNode } from "@/components/tiptap-node/image-upload-node/image-upload-node-extension"
+import { HorizontalRule } from "@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension"
+import "@/components/tiptap-node/blockquote-node/blockquote-node.scss"
+import "@/components/tiptap-node/code-block-node/code-block-node.scss"
+import "@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss"
+import "@/components/tiptap-node/list-node/list-node.scss"
+import "@/components/tiptap-node/image-node/image-node.scss"
+import "@/components/tiptap-node/heading-node/heading-node.scss"
+import "@/components/tiptap-node/paragraph-node/paragraph-node.scss"
+
+// --- Tiptap UI ---
+import { HeadingDropdownMenu } from "@/components/tiptap-ui/heading-dropdown-menu"
+import { ImageUploadButton } from "@/components/tiptap-ui/image-upload-button"
+import { ListDropdownMenu } from "@/components/tiptap-ui/list-dropdown-menu"
+import { BlockquoteButton } from "@/components/tiptap-ui/blockquote-button"
+import { CodeBlockButton } from "@/components/tiptap-ui/code-block-button"
+import {
+  ColorHighlightPopover,
+  ColorHighlightPopoverContent,
+  ColorHighlightPopoverButton,
+} from "@/components/tiptap-ui/color-highlight-popover"
+import {
+  LinkPopover,
+  LinkContent,
+  LinkButton,
+} from "@/components/tiptap-ui/link-popover"
+import { MarkButton } from "@/components/tiptap-ui/mark-button"
+import { TextAlignButton } from "@/components/tiptap-ui/text-align-button"
+import { UndoRedoButton } from "@/components/tiptap-ui/undo-redo-button"
+import {
+  SearchAndReplace,
+  SearchAndReplaceButton,
+} from "@/components/tiptap-ui/search-and-replace"
+
+// --- Icons ---
+import { ArrowLeftIcon } from "@/components/tiptap-icons/arrow-left-icon"
+import { HighlighterIcon } from "@/components/tiptap-icons/highlighter-icon"
+import { LinkIcon } from "@/components/tiptap-icons/link-icon"
+
+// --- Hooks ---
+import { useIsBreakpoint } from "@/hooks/use-is-breakpoint"
+import { useWindowSize } from "@/hooks/use-window-size"
+import { useCursorVisibility } from "@/hooks/use-cursor-visibility"
+
+// --- Components ---
+
+// --- Lib ---
+import { MAX_FILE_SIZE } from "@/lib/tiptap-utils"
+
+// --- Styles ---
+import "@/components/tiptap-templates/simple/simple-editor.scss"
+
+const SEARCH_AND_REPLACE_SCROLL_OPTIONS: ScrollIntoViewOptions = {
+  block: "center",
+}
+
+const MainToolbarContent = ({
+  onHighlighterClick,
+  onLinkClick,
+  onSearchAndReplaceClick,
+  isSearchAndReplaceOpen,
+  searchAndReplaceButtonRef,
+  isMobile,
+}: {
+  onHighlighterClick: () => void
+  onLinkClick: () => void
+  onSearchAndReplaceClick: () => void
+  isSearchAndReplaceOpen: boolean
+  searchAndReplaceButtonRef: React.RefObject<HTMLButtonElement>
+  isMobile: boolean
+}) => {
+  return (
+    <>
+      <Spacer />
+
+      <ToolbarGroup>
+        <UndoRedoButton action="undo" />
+        <UndoRedoButton action="redo" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <HeadingDropdownMenu modal={false} levels={[1, 2, 3, 4]} />
+        <ListDropdownMenu
+          modal={false}
+          types={["bulletList", "orderedList", "taskList"]}
+        />
+        <BlockquoteButton />
+        <CodeBlockButton />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <MarkButton type="bold" />
+        <MarkButton type="italic" />
+        <MarkButton type="strike" />
+        <MarkButton type="code" />
+        <MarkButton type="underline" />
+        {!isMobile ? (
+          <ColorHighlightPopover />
+        ) : (
+          <ColorHighlightPopoverButton onClick={onHighlighterClick} />
+        )}
+        {!isMobile ? <LinkPopover /> : <LinkButton onClick={onLinkClick} />}
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <MarkButton type="superscript" />
+        <MarkButton type="subscript" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <TextAlignButton align="left" />
+        <TextAlignButton align="center" />
+        <TextAlignButton align="right" />
+        <TextAlignButton align="justify" />
+      </ToolbarGroup>
+
+      <ToolbarSeparator />
+
+      <ToolbarGroup>
+        <ImageUploadButton text="Add" />
+      </ToolbarGroup>
+
+      <Spacer />
+
+      {isMobile && <ToolbarSeparator />}
+
+      <ToolbarGroup>
+        <SearchAndReplaceButton
+          ref={searchAndReplaceButtonRef}
+          aria-expanded={isSearchAndReplaceOpen}
+          data-active-state={isSearchAndReplaceOpen ? "on" : "off"}
+          onClick={onSearchAndReplaceClick}
+        />
+      </ToolbarGroup>
+    </>
+  )
+}
+
+const MobileToolbarContent = ({
+  type,
+  onBack,
+}: {
+  type: "highlighter" | "link"
+  onBack: () => void
+}) => (
+  <>
+    <ToolbarGroup>
+      <Button variant="ghost" onClick={onBack}>
+        <ArrowLeftIcon className="tiptap-button-icon" />
+        {type === "highlighter" ? (
+          <HighlighterIcon className="tiptap-button-icon" />
+        ) : (
+          <LinkIcon className="tiptap-button-icon" />
+        )}
+      </Button>
+    </ToolbarGroup>
+
+    <ToolbarSeparator />
+
+    {type === "highlighter" ? (
+      <ColorHighlightPopoverContent />
+    ) : (
+      <LinkContent />
+    )}
+  </>
+)
+
+export function SimpleEditor({ content, extensions = [], onEditorReady, onUpdate, uploadImage, editable = true }: {
+  content: JSONContent
+  extensions?: Extensions
+  onEditorReady?: (editor: Editor) => void
+  onUpdate?: (editor: Editor) => void
+  uploadImage?: (file: File) => Promise<string>
+  editable?: boolean
+}) {
+  const isMobile = useIsBreakpoint()
+  const { height } = useWindowSize()
+  const [mobileView, setMobileView] = useState<"main" | "highlighter" | "link">(
+    "main"
+  )
+  const [isSearchAndReplaceOpen, setIsSearchAndReplaceOpen] = useState(false)
+  const toolbarRef = useRef<HTMLDivElement>(null)
+  const searchAndReplaceButtonRef = useRef<HTMLButtonElement>(null)
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    editable,
+    editorProps: {
+      attributes: {
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        "aria-label": editable ? "Main content area, start typing to enter text." : "Document preview content.",
+        class: "simple-editor",
+      },
+    },
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false,
+        link: {
+          openOnClick: false,
+          enableClickSelection: true,
+        },
+      }),
+      HorizontalRule,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Highlight.configure({ multicolor: true }),
+      Image,
+      Typography,
+      Superscript,
+      Subscript,
+      Selection,
+      FindAndReplace.configure({
+        searchDebounceMs: 500,
+        injectCSS: false,
+      }),
+      ImageUploadNode.configure({
+        accept: "image/*",
+        maxSize: MAX_FILE_SIZE,
+        limit: 3,
+        upload: async (file) => {
+          if (!uploadImage) throw new Error("Image upload is not configured")
+          return uploadImage(file)
+        },
+        onError: (error) => console.error("Upload failed:", error),
+      }),
+      ...extensions,
+    ],
+    content,
+    onCreate: ({ editor }) => onEditorReady?.(editor),
+    onUpdate: ({ editor }) => onUpdate?.(editor),
+  })
+
+  const rect = useCursorVisibility({
+    editor,
+    overlayHeight: toolbarRef.current?.getBoundingClientRect().height ?? 0,
+  })
+
+  useEffect(() => {
+    if (!isMobile && mobileView !== "main") {
+      setMobileView("main")
+    }
+  }, [isMobile, mobileView])
+
+  const openSearchAndReplace = useCallback(() => {
+    setMobileView("main")
+    setIsSearchAndReplaceOpen(true)
+  }, [])
+
+  const closeSearchAndReplace = useCallback(() => {
+    setIsSearchAndReplaceOpen(false)
+    searchAndReplaceButtonRef.current?.focus()
+  }, [])
+
+  const toggleSearchAndReplace = useCallback(() => {
+    if (isSearchAndReplaceOpen) {
+      closeSearchAndReplace()
+      return
+    }
+
+    openSearchAndReplace()
+  }, [closeSearchAndReplace, isSearchAndReplaceOpen, openSearchAndReplace])
+
+  return (
+    <div className="simple-editor-wrapper">
+      <EditorContext.Provider value={{ editor }}>
+        {editable && <Toolbar
+          ref={toolbarRef}
+          style={{
+            ...(isMobile
+              ? {
+                  bottom: `calc(100% - ${height - rect.y}px)`,
+                }
+              : {}),
+          }}
+        >
+          {mobileView === "main" ? (
+            <MainToolbarContent
+              onHighlighterClick={() => setMobileView("highlighter")}
+              onLinkClick={() => setMobileView("link")}
+              onSearchAndReplaceClick={toggleSearchAndReplace}
+              isSearchAndReplaceOpen={isSearchAndReplaceOpen}
+              searchAndReplaceButtonRef={searchAndReplaceButtonRef}
+              isMobile={isMobile}
+            />
+          ) : (
+            <MobileToolbarContent
+              type={mobileView === "highlighter" ? "highlighter" : "link"}
+              onBack={() => setMobileView("main")}
+            />
+          )}
+        </Toolbar>}
+
+        {editable && <SearchAndReplace
+          className="simple-editor-search-and-replace"
+          open={isSearchAndReplaceOpen}
+          onOpen={openSearchAndReplace}
+          onClose={closeSearchAndReplace}
+          scrollIntoViewOptions={SEARCH_AND_REPLACE_SCROLL_OPTIONS}
+        />}
+
+        <EditorContent
+          editor={editor}
+          role="presentation"
+          className="simple-editor-content"
+        />
+      </EditorContext.Provider>
+    </div>
+  )
+}

package/template/src/admin/components/tiptap-templates/simple/theme-toggle.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@/components/tiptap-ui-primitive/button"
+
+// --- Icons ---
+import { MoonStarIcon } from "@/components/tiptap-icons/moon-star-icon"
+import { SunIcon } from "@/components/tiptap-icons/sun-icon"
+import { useEffect, useState } from "react"
+
+export function ThemeToggle() {
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    const handleChange = () => setIsDarkMode(mediaQuery.matches)
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  useEffect(() => {
+    const initialDarkMode =
+      !!document.querySelector('meta[name="color-scheme"][content="dark"]') ||
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    setIsDarkMode(initialDarkMode)
+  }, [])
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", isDarkMode)
+  }, [isDarkMode])
+
+  const toggleDarkMode = () => setIsDarkMode((isDark) => !isDark)
+
+  return (
+    <Button
+      onClick={toggleDarkMode}
+      aria-label={`Switch to ${isDarkMode ? "light" : "dark"} mode`}
+      variant="ghost"
+    >
+      {isDarkMode ? (
+        <MoonStarIcon className="tiptap-button-icon" />
+      ) : (
+        <SunIcon className="tiptap-button-icon" />
+      )}
+    </Button>
+  )
+}

package/template/src/admin/components/tiptap-ui/blockquote-button/blockquote-button.tsx

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

package/template/src/admin/components/tiptap-ui/blockquote-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./blockquote-button"
+export * from "./use-blockquote"