Move to TanStack Start from Next.js (#184)

web/shared/minimal-tiptap/components/bubble-menu/image-bubble-menu.tsx

@@ -0,0 +1,39 @@
+import type { Editor } from "@tiptap/react"
+import { BubbleMenu } from "@tiptap/react"
+import { ImagePopoverBlock } from "../image/image-popover-block"
+import { ShouldShowProps } from "../../types"
+
+const ImageBubbleMenu = ({ editor }: { editor: Editor }) => {
+  const shouldShow = ({ editor, from, to }: ShouldShowProps) => {
+    if (from === to) {
+      return false
+    }
+
+    const img = editor.getAttributes("image")
+
+    if (img.src) {
+      return true
+    }
+
+    return false
+  }
+
+  const unSetImage = () => {
+    editor.commands.deleteSelection()
+  }
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={shouldShow}
+      tippyOptions={{
+        placement: "bottom",
+        offset: [0, 8],
+      }}
+    >
+      <ImagePopoverBlock onRemove={unSetImage} />
+    </BubbleMenu>
+  )
+}
+
+export { ImageBubbleMenu }

web/shared/minimal-tiptap/components/bubble-menu/link-bubble-menu.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { Editor } from "@tiptap/react"
+import { BubbleMenu } from "@tiptap/react"
+import { LinkEditBlock } from "../link/link-edit-block"
+import { LinkPopoverBlock } from "../link/link-popover-block"
+import { ShouldShowProps } from "../../types"
+
+interface LinkBubbleMenuProps {
+  editor: Editor
+}
+
+interface LinkAttributes {
+  href: string
+  target: string
+}
+
+export const LinkBubbleMenu: React.FC<LinkBubbleMenuProps> = ({ editor }) => {
+  const [showEdit, setShowEdit] = React.useState(false)
+  const [linkAttrs, setLinkAttrs] = React.useState<LinkAttributes>({
+    href: "",
+    target: "",
+  })
+  const [selectedText, setSelectedText] = React.useState("")
+
+  const updateLinkState = React.useCallback(() => {
+    const { from, to } = editor.state.selection
+    const { href, target } = editor.getAttributes("link")
+    const text = editor.state.doc.textBetween(from, to, " ")
+
+    setLinkAttrs({ href, target })
+    setSelectedText(text)
+  }, [editor])
+
+  const shouldShow = React.useCallback(
+    ({ editor, from, to }: ShouldShowProps) => {
+      if (from === to) {
+        return false
+      }
+      const { href } = editor.getAttributes("link")
+
+      if (href) {
+        updateLinkState()
+        return true
+      }
+      return false
+    },
+    [updateLinkState],
+  )
+
+  const handleEdit = React.useCallback(() => {
+    setShowEdit(true)
+  }, [])
+
+  const onSetLink = React.useCallback(
+    (url: string, text?: string, openInNewTab?: boolean) => {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .insertContent({
+          type: "text",
+          text: text || url,
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: url,
+                target: openInNewTab ? "_blank" : "",
+              },
+            },
+          ],
+        })
+        .setLink({ href: url, target: openInNewTab ? "_blank" : "" })
+        .run()
+      setShowEdit(false)
+      updateLinkState()
+    },
+    [editor, updateLinkState],
+  )
+
+  const onUnsetLink = React.useCallback(() => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run()
+    setShowEdit(false)
+    updateLinkState()
+  }, [editor, updateLinkState])
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={shouldShow}
+      tippyOptions={{
+        placement: "bottom-start",
+        onHidden: () => setShowEdit(false),
+      }}
+    >
+      {showEdit ? (
+        <LinkEditBlock
+          defaultUrl={linkAttrs.href}
+          defaultText={selectedText}
+          defaultIsNewTab={linkAttrs.target === "_blank"}
+          onSave={onSetLink}
+          className="w-full min-w-80 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none"
+        />
+      ) : (
+        <LinkPopoverBlock
+          onClear={onUnsetLink}
+          url={linkAttrs.href}
+          onEdit={handleEdit}
+        />
+      )}
+    </BubbleMenu>
+  )
+}

web/shared/minimal-tiptap/components/image/image-edit-block.tsx

@@ -0,0 +1,125 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import { storeImageFn } from "@shared/actions"
+import { ZodError } from "zod"
+
+interface ImageEditBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  editor: Editor
+  close: () => void
+}
+
+const ImageEditBlock = ({
+  editor,
+  className,
+  close,
+  ...props
+}: ImageEditBlockProps) => {
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+  const [link, setLink] = React.useState<string>("")
+  const [isUploading, setIsUploading] = React.useState<boolean>(false)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    fileInputRef.current?.click()
+  }
+
+  const handleLink = () => {
+    editor.chain().focus().setImage({ src: link }).run()
+    close()
+  }
+
+  const handleFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files || files.length === 0) return
+
+    setIsUploading(true)
+    setError(null)
+
+    const formData = new FormData()
+    formData.append("file", files[0])
+
+    try {
+      const response = await storeImageFn(formData)
+
+      editor
+        .chain()
+        .setImage({ src: response.fileModel.content.src })
+        .focus()
+        .run()
+      close()
+    } catch (error) {
+      if (error instanceof Error) {
+        try {
+          const errors = JSON.parse(error.message)
+          if (errors.body.name === "ZodError") {
+            setError(
+              (errors.body as ZodError).issues
+                .map((issue) => issue.message)
+                .join(", "),
+            )
+          } else {
+            setError(error.message)
+          }
+        } catch (parseError) {
+          setError(error.message)
+        }
+      } else {
+        setError("An unknown error occurred")
+      }
+    } finally {
+      setIsUploading(false)
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    handleLink()
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={cn("space-y-6", className)} {...props}>
+        <div className="space-y-1">
+          <Label>Attach an image link</Label>
+          <div className="flex">
+            <Input
+              type="url"
+              required
+              placeholder="https://example.com"
+              value={link}
+              className="grow"
+              onChange={(e) => setLink(e.target.value)}
+            />
+            <Button type="submit" className="ml-2 inline-block">
+              Submit
+            </Button>
+          </div>
+        </div>
+        <Button className="w-full" onClick={handleClick} disabled={isUploading}>
+          {isUploading ? "Uploading..." : "Upload from your computer"}
+        </Button>
+        <input
+          type="file"
+          accept="image/jpeg,image/png,image/gif,image/webp"
+          ref={fileInputRef}
+          className="hidden"
+          onChange={handleFile}
+        />
+        {error && (
+          <div className="text-destructive text-sm bg-destructive/10 p-2 rounded">
+            {error}
+          </div>
+        )}
+      </div>
+    </form>
+  )
+}
+
+export { ImageEditBlock }

web/shared/minimal-tiptap/components/image/image-edit-dialog.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { VariantProps } from "class-variance-authority"
+import type { toggleVariants } from "@/components/ui/toggle"
+import { ImageIcon } from "@radix-ui/react-icons"
+import { ToolbarButton } from "../toolbar-button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { ImageEditBlock } from "./image-edit-block"
+
+interface ImageEditDialogProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+}
+
+const ImageEditDialog = ({ editor, size, variant }: ImageEditDialogProps) => {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <ToolbarButton
+          isActive={editor.isActive("image")}
+          tooltip="Image"
+          aria-label="Image"
+          size={size}
+          variant={variant}
+        >
+          <ImageIcon className="size-5" />
+        </ToolbarButton>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Select image</DialogTitle>
+          <DialogDescription className="sr-only">
+            Upload an image from your computer
+          </DialogDescription>
+        </DialogHeader>
+        <ImageEditBlock editor={editor} close={() => setOpen(false)} />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { ImageEditDialog }

web/shared/minimal-tiptap/components/image/image-popover-block.tsx

@@ -0,0 +1,25 @@
+import { ToolbarButton } from "../toolbar-button"
+import { TrashIcon } from "@radix-ui/react-icons"
+
+const ImagePopoverBlock = ({
+  onRemove,
+}: {
+  onRemove: (e: React.MouseEvent<HTMLButtonElement>) => void
+}) => {
+  const handleRemove = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    onRemove(e)
+  }
+
+  return (
+    <div className="flex h-10 overflow-hidden rounded bg-background p-2 shadow-lg">
+      <div className="inline-flex items-center gap-1">
+        <ToolbarButton tooltip="Remove" onClick={handleRemove}>
+          <TrashIcon className="size-4" />
+        </ToolbarButton>
+      </div>
+    </div>
+  )
+}
+
+export { ImagePopoverBlock }

web/shared/minimal-tiptap/components/link/link-edit-block.tsx

@@ -0,0 +1,88 @@
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export interface LinkEditorProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultUrl?: string
+  defaultText?: string
+  defaultIsNewTab?: boolean
+  onSave: (url: string, text?: string, isNewTab?: boolean) => void
+}
+
+export const LinkEditBlock = React.forwardRef<HTMLDivElement, LinkEditorProps>(
+  ({ onSave, defaultIsNewTab, defaultUrl, defaultText, className }, ref) => {
+    const formRef = React.useRef<HTMLDivElement>(null)
+    const [url, setUrl] = React.useState(defaultUrl || "")
+    const [text, setText] = React.useState(defaultText || "")
+    const [isNewTab, setIsNewTab] = React.useState(defaultIsNewTab || false)
+
+    const handleSave = React.useCallback(
+      (e: React.FormEvent) => {
+        e.preventDefault()
+        if (formRef.current) {
+          const isValid = Array.from(
+            formRef.current.querySelectorAll("input"),
+          ).every((input) => input.checkValidity())
+
+          if (isValid) {
+            onSave(url, text, isNewTab)
+          } else {
+            formRef.current.querySelectorAll("input").forEach((input) => {
+              if (!input.checkValidity()) {
+                input.reportValidity()
+              }
+            })
+          }
+        }
+      },
+      [onSave, url, text, isNewTab],
+    )
+
+    React.useImperativeHandle(ref, () => formRef.current as HTMLDivElement)
+
+    return (
+      <div ref={formRef}>
+        <div className={cn("space-y-4", className)}>
+          <div className="space-y-1">
+            <Label>URL</Label>
+            <Input
+              type="url"
+              required
+              placeholder="Enter URL"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            />
+          </div>
+
+          <div className="space-y-1">
+            <Label>Display Text (optional)</Label>
+            <Input
+              type="text"
+              placeholder="Enter display text"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+            />
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Label>Open in New Tab</Label>
+            <Switch checked={isNewTab} onCheckedChange={setIsNewTab} />
+          </div>
+
+          <div className="flex justify-end space-x-2">
+            <Button type="button" onClick={handleSave}>
+              Save
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+)
+
+LinkEditBlock.displayName = "LinkEditBlock"
+
+export default LinkEditBlock

web/shared/minimal-tiptap/components/link/link-edit-popover.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { VariantProps } from "class-variance-authority"
+import type { toggleVariants } from "@/components/ui/toggle"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Link2Icon } from "@radix-ui/react-icons"
+import { ToolbarButton } from "../toolbar-button"
+import { LinkEditBlock } from "./link-edit-block"
+
+interface LinkEditPopoverProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+}
+
+const LinkEditPopover = ({ editor, size, variant }: LinkEditPopoverProps) => {
+  const [open, setOpen] = React.useState(false)
+
+  const { from, to } = editor.state.selection
+  const text = editor.state.doc.textBetween(from, to, " ")
+
+  const onSetLink = React.useCallback(
+    (url: string, text?: string, openInNewTab?: boolean) => {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .insertContent({
+          type: "text",
+          text: text || url,
+          marks: [
+            {
+              type: "link",
+              attrs: {
+                href: url,
+                target: openInNewTab ? "_blank" : "",
+              },
+            },
+          ],
+        })
+        .setLink({ href: url })
+        .run()
+
+      editor.commands.enter()
+    },
+    [editor],
+  )
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <ToolbarButton
+          isActive={editor.isActive("link")}
+          tooltip="Link"
+          aria-label="Insert link"
+          disabled={editor.isActive("codeBlock")}
+          size={size}
+          variant={variant}
+        >
+          <Link2Icon className="size-5" />
+        </ToolbarButton>
+      </PopoverTrigger>
+      <PopoverContent className="w-full min-w-80" align="start" side="bottom">
+        <LinkEditBlock onSave={onSetLink} defaultText={text} />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { LinkEditPopover }

web/shared/minimal-tiptap/components/link/link-popover-block.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { Separator } from "@/components/ui/separator"
+import { ToolbarButton } from "../toolbar-button"
+import {
+  CopyIcon,
+  ExternalLinkIcon,
+  LinkBreak2Icon,
+} from "@radix-ui/react-icons"
+
+interface LinkPopoverBlockProps {
+  url: string
+  onClear: () => void
+  onEdit: (e: React.MouseEvent<HTMLButtonElement>) => void
+}
+
+export const LinkPopoverBlock: React.FC<LinkPopoverBlockProps> = ({
+  url,
+  onClear,
+  onEdit,
+}) => {
+  const [copyTitle, setCopyTitle] = React.useState<string>("Copy")
+
+  const handleCopy = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault()
+      navigator.clipboard
+        .writeText(url)
+        .then(() => {
+          setCopyTitle("Copied!")
+          setTimeout(() => setCopyTitle("Copy"), 1000)
+        })
+        .catch(console.error)
+    },
+    [url],
+  )
+
+  const handleOpenLink = React.useCallback(() => {
+    window.open(url, "_blank", "noopener,noreferrer")
+  }, [url])
+
+  return (
+    <div className="flex h-10 overflow-hidden rounded bg-background p-2 shadow-lg">
+      <div className="inline-flex items-center gap-1">
+        <ToolbarButton
+          tooltip="Edit link"
+          onClick={onEdit}
+          className="w-auto px-2"
+        >
+          Edit link
+        </ToolbarButton>
+        <Separator orientation="vertical" />
+        <ToolbarButton
+          tooltip="Open link in a new tab"
+          onClick={handleOpenLink}
+        >
+          <ExternalLinkIcon className="size-4" />
+        </ToolbarButton>
+        <Separator orientation="vertical" />
+        <ToolbarButton tooltip="Clear link" onClick={onClear}>
+          <LinkBreak2Icon className="size-4" />
+        </ToolbarButton>
+        <Separator orientation="vertical" />
+        <ToolbarButton
+          tooltip={copyTitle}
+          onClick={handleCopy}
+          tooltipOptions={{
+            onPointerDownOutside: (e) => {
+              if (e.target === e.currentTarget) e.preventDefault()
+            },
+          }}
+        >
+          <CopyIcon className="size-4" />
+        </ToolbarButton>
+      </div>
+    </div>
+  )
+}

web/shared/minimal-tiptap/components/section/five.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { FormatAction } from "../../types"
+import type { toggleVariants } from "@/components/ui/toggle"
+import type { VariantProps } from "class-variance-authority"
+import {
+  CaretDownIcon,
+  CodeIcon,
+  DividerHorizontalIcon,
+  PlusIcon,
+  QuoteIcon,
+} from "@radix-ui/react-icons"
+import { LinkEditPopover } from "../link/link-edit-popover"
+import { ImageEditDialog } from "../image/image-edit-dialog"
+import { ToolbarSection } from "../toolbar-section"
+
+type InsertElementAction = "codeBlock" | "blockquote" | "horizontalRule"
+interface InsertElement extends FormatAction {
+  value: InsertElementAction
+}
+
+const formatActions: InsertElement[] = [
+  {
+    value: "codeBlock",
+    label: "Code block",
+    icon: <CodeIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor.isActive("codeBlock"),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleCodeBlock().run(),
+    shortcuts: ["mod", "alt", "C"],
+  },
+  {
+    value: "blockquote",
+    label: "Blockquote",
+    icon: <QuoteIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().toggleBlockquote().run(),
+    isActive: (editor) => editor.isActive("blockquote"),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleBlockquote().run(),
+    shortcuts: ["mod", "shift", "B"],
+  },
+  {
+    value: "horizontalRule",
+    label: "Divider",
+    icon: <DividerHorizontalIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: () => false,
+    canExecute: (editor) =>
+      editor.can().chain().focus().setHorizontalRule().run(),
+    shortcuts: ["mod", "alt", "-"],
+  },
+]
+
+interface SectionFiveProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+  activeActions?: InsertElementAction[]
+  mainActionCount?: number
+}
+
+export const SectionFive: React.FC<SectionFiveProps> = ({
+  editor,
+  activeActions = formatActions.map((action) => action.value),
+  mainActionCount = 0,
+  size,
+  variant,
+}) => {
+  return (
+    <>
+      <LinkEditPopover editor={editor} size={size} variant={variant} />
+      <ImageEditDialog editor={editor} size={size} variant={variant} />
+      <ToolbarSection
+        editor={editor}
+        actions={formatActions}
+        activeActions={activeActions}
+        mainActionCount={mainActionCount}
+        dropdownIcon={
+          <>
+            <PlusIcon className="size-5" />
+            <CaretDownIcon className="size-5" />
+          </>
+        }
+        dropdownTooltip="Insert elements"
+        size={size}
+        variant={variant}
+      />
+    </>
+  )
+}
+
+SectionFive.displayName = "SectionFive"
+
+export default SectionFive

web/shared/minimal-tiptap/components/section/four.tsx

@@ -0,0 +1,81 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { FormatAction } from "../../types"
+import type { toggleVariants } from "@/components/ui/toggle"
+import type { VariantProps } from "class-variance-authority"
+import { CaretDownIcon, ListBulletIcon } from "@radix-ui/react-icons"
+import { ToolbarSection } from "../toolbar-section"
+
+type ListItemAction = "orderedList" | "bulletList"
+interface ListItem extends FormatAction {
+  value: ListItemAction
+}
+
+const formatActions: ListItem[] = [
+  {
+    value: "orderedList",
+    label: "Numbered list",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="20px"
+        viewBox="0 -960 960 960"
+        width="20px"
+        fill="currentColor"
+      >
+        <path d="M144-144v-48h96v-24h-48v-48h48v-24h-96v-48h120q10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v48q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9 10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v48q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9H144Zm0-240v-96q0-10.2 6.9-17.1 6.9-6.9 17.1-6.9h72v-24h-96v-48h120q10.2 0 17.1 6.9 6.9 6.9 6.9 17.1v72q0 10.2-6.9 17.1-6.9 6.9-17.1 6.9h-72v24h96v48H144Zm48-240v-144h-48v-48h96v192h-48Zm168 384v-72h456v72H360Zm0-204v-72h456v72H360Zm0-204v-72h456v72H360Z" />
+      </svg>
+    ),
+    isActive: (editor) => editor.isActive("orderedList"),
+    action: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleOrderedList().run(),
+    shortcuts: ["mod", "shift", "7"],
+  },
+  {
+    value: "bulletList",
+    label: "Bullet list",
+    icon: <ListBulletIcon className="size-5" />,
+    isActive: (editor) => editor.isActive("bulletList"),
+    action: (editor) => editor.chain().focus().toggleBulletList().run(),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleBulletList().run(),
+    shortcuts: ["mod", "shift", "8"],
+  },
+]
+
+interface SectionFourProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+  activeActions?: ListItemAction[]
+  mainActionCount?: number
+}
+
+export const SectionFour: React.FC<SectionFourProps> = ({
+  editor,
+  activeActions = formatActions.map((action) => action.value),
+  mainActionCount = 0,
+  size,
+  variant,
+}) => {
+  return (
+    <ToolbarSection
+      editor={editor}
+      actions={formatActions}
+      activeActions={activeActions}
+      mainActionCount={mainActionCount}
+      dropdownIcon={
+        <>
+          <ListBulletIcon className="size-5" />
+          <CaretDownIcon className="size-5" />
+        </>
+      }
+      dropdownTooltip="Lists"
+      size={size}
+      variant={variant}
+    />
+  )
+}
+
+SectionFour.displayName = "SectionFour"
+
+export default SectionFour

web/shared/minimal-tiptap/components/section/one.tsx

@@ -0,0 +1,151 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { Level } from "@tiptap/extension-heading"
+import type { FormatAction } from "../../types"
+import type { VariantProps } from "class-variance-authority"
+import type { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
+import { CaretDownIcon, LetterCaseCapitalizeIcon } from "@radix-ui/react-icons"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ToolbarButton } from "../toolbar-button"
+import { ShortcutKey } from "../shortcut-key"
+
+interface TextStyle
+  extends Omit<
+    FormatAction,
+    "value" | "icon" | "action" | "isActive" | "canExecute"
+  > {
+  element: keyof JSX.IntrinsicElements
+  level?: Level
+  className: string
+}
+
+const formatActions: TextStyle[] = [
+  {
+    label: "Normal Text",
+    element: "span",
+    className: "grow",
+    shortcuts: ["mod", "alt", "0"],
+  },
+  {
+    label: "Heading 1",
+    element: "h1",
+    level: 1,
+    className: "m-0 grow text-3xl font-extrabold",
+    shortcuts: ["mod", "alt", "1"],
+  },
+  {
+    label: "Heading 2",
+    element: "h2",
+    level: 2,
+    className: "m-0 grow text-xl font-bold",
+    shortcuts: ["mod", "alt", "2"],
+  },
+  {
+    label: "Heading 3",
+    element: "h3",
+    level: 3,
+    className: "m-0 grow text-lg font-semibold",
+    shortcuts: ["mod", "alt", "3"],
+  },
+  {
+    label: "Heading 4",
+    element: "h4",
+    level: 4,
+    className: "m-0 grow text-base font-semibold",
+    shortcuts: ["mod", "alt", "4"],
+  },
+  {
+    label: "Heading 5",
+    element: "h5",
+    level: 5,
+    className: "m-0 grow text-sm font-normal",
+    shortcuts: ["mod", "alt", "5"],
+  },
+  {
+    label: "Heading 6",
+    element: "h6",
+    level: 6,
+    className: "m-0 grow text-sm font-normal",
+    shortcuts: ["mod", "alt", "6"],
+  },
+]
+
+interface SectionOneProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+  activeLevels?: Level[]
+}
+
+export const SectionOne: React.FC<SectionOneProps> = React.memo(
+  ({ editor, activeLevels = [1, 2, 3, 4, 5, 6], size, variant }) => {
+    const filteredActions = React.useMemo(
+      () =>
+        formatActions.filter(
+          (action) => !action.level || activeLevels.includes(action.level),
+        ),
+      [activeLevels],
+    )
+
+    const handleStyleChange = React.useCallback(
+      (level?: Level) => {
+        if (level) {
+          editor.chain().focus().toggleHeading({ level }).run()
+        } else {
+          editor.chain().focus().setParagraph().run()
+        }
+      },
+      [editor],
+    )
+
+    const renderMenuItem = React.useCallback(
+      ({ label, element: Element, level, className, shortcuts }: TextStyle) => (
+        <DropdownMenuItem
+          key={label}
+          onClick={() => handleStyleChange(level)}
+          className={cn("flex flex-row items-center justify-between gap-4", {
+            "bg-accent": level
+              ? editor.isActive("heading", { level })
+              : editor.isActive("paragraph"),
+          })}
+          aria-label={label}
+        >
+          <Element className={className}>{label}</Element>
+          <ShortcutKey keys={shortcuts} />
+        </DropdownMenuItem>
+      ),
+      [editor, handleStyleChange],
+    )
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <ToolbarButton
+            isActive={editor.isActive("heading")}
+            tooltip="Text styles"
+            aria-label="Text styles"
+            pressed={editor.isActive("heading")}
+            className="w-12"
+            disabled={editor.isActive("codeBlock")}
+            size={size}
+            variant={variant}
+          >
+            <LetterCaseCapitalizeIcon className="size-5" />
+            <CaretDownIcon className="size-5" />
+          </ToolbarButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-full">
+          {filteredActions.map(renderMenuItem)}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  },
+)
+
+SectionOne.displayName = "SectionOne"
+
+export default SectionOne

web/shared/minimal-tiptap/components/section/three.tsx

@@ -0,0 +1,215 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { toggleVariants } from "@/components/ui/toggle"
+import type { VariantProps } from "class-variance-authority"
+import { CaretDownIcon, CheckIcon } from "@radix-ui/react-icons"
+import { ToolbarButton } from "../toolbar-button"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/components/ui/popover"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useTheme } from "../../hooks/use-theme"
+
+interface ColorItem {
+  cssVar: string
+  label: string
+  darkLabel?: string
+}
+
+interface ColorPalette {
+  label: string
+  colors: ColorItem[]
+  inverse: string
+}
+
+const COLORS: ColorPalette[] = [
+  {
+    label: "Palette 1",
+    inverse: "hsl(var(--background))",
+    colors: [
+      { cssVar: "hsl(var(--foreground))", label: "Default" },
+      { cssVar: "var(--mt-accent-bold-blue)", label: "Bold blue" },
+      { cssVar: "var(--mt-accent-bold-teal)", label: "Bold teal" },
+      { cssVar: "var(--mt-accent-bold-green)", label: "Bold green" },
+      { cssVar: "var(--mt-accent-bold-orange)", label: "Bold orange" },
+      { cssVar: "var(--mt-accent-bold-red)", label: "Bold red" },
+      { cssVar: "var(--mt-accent-bold-purple)", label: "Bold purple" },
+    ],
+  },
+  {
+    label: "Palette 2",
+    inverse: "hsl(var(--background))",
+    colors: [
+      { cssVar: "var(--mt-accent-gray)", label: "Gray" },
+      { cssVar: "var(--mt-accent-blue)", label: "Blue" },
+      { cssVar: "var(--mt-accent-teal)", label: "Teal" },
+      { cssVar: "var(--mt-accent-green)", label: "Green" },
+      { cssVar: "var(--mt-accent-orange)", label: "Orange" },
+      { cssVar: "var(--mt-accent-red)", label: "Red" },
+      { cssVar: "var(--mt-accent-purple)", label: "Purple" },
+    ],
+  },
+  {
+    label: "Palette 3",
+    inverse: "hsl(var(--foreground))",
+    colors: [
+      { cssVar: "hsl(var(--background))", label: "White", darkLabel: "Black" },
+      { cssVar: "var(--mt-accent-blue-subtler)", label: "Blue subtle" },
+      { cssVar: "var(--mt-accent-teal-subtler)", label: "Teal subtle" },
+      { cssVar: "var(--mt-accent-green-subtler)", label: "Green subtle" },
+      { cssVar: "var(--mt-accent-yellow-subtler)", label: "Yellow subtle" },
+      { cssVar: "var(--mt-accent-red-subtler)", label: "Red subtle" },
+      { cssVar: "var(--mt-accent-purple-subtler)", label: "Purple subtle" },
+    ],
+  },
+]
+
+const MemoizedColorButton = React.memo<{
+  color: ColorItem
+  isSelected: boolean
+  inverse: string
+  onClick: (value: string) => void
+}>(({ color, isSelected, inverse, onClick }) => {
+  const isDarkMode = useTheme()
+  const label = isDarkMode && color.darkLabel ? color.darkLabel : color.label
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <ToggleGroupItem
+          className="relative size-7 rounded-md p-0"
+          value={color.cssVar}
+          aria-label={label}
+          style={{ backgroundColor: color.cssVar }}
+          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+            e.preventDefault()
+            onClick(color.cssVar)
+          }}
+        >
+          {isSelected && (
+            <CheckIcon
+              className="absolute inset-0 m-auto size-6"
+              style={{ color: inverse }}
+            />
+          )}
+        </ToggleGroupItem>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <p>{label}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+})
+
+MemoizedColorButton.displayName = "MemoizedColorButton"
+
+const MemoizedColorPicker = React.memo<{
+  palette: ColorPalette
+  selectedColor: string
+  inverse: string
+  onColorChange: (value: string) => void
+}>(({ palette, selectedColor, inverse, onColorChange }) => (
+  <ToggleGroup
+    type="single"
+    value={selectedColor}
+    onValueChange={(value: string) => {
+      if (value) onColorChange(value)
+    }}
+    className="gap-1.5"
+  >
+    {palette.colors.map((color, index) => (
+      <MemoizedColorButton
+        key={index}
+        inverse={inverse}
+        color={color}
+        isSelected={selectedColor === color.cssVar}
+        onClick={onColorChange}
+      />
+    ))}
+  </ToggleGroup>
+))
+
+MemoizedColorPicker.displayName = "MemoizedColorPicker"
+
+interface SectionThreeProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+}
+
+export const SectionThree: React.FC<SectionThreeProps> = ({
+  editor,
+  size,
+  variant,
+}) => {
+  const color =
+    editor.getAttributes("textStyle")?.color || "hsl(var(--foreground))"
+  const [selectedColor, setSelectedColor] = React.useState(color)
+
+  const handleColorChange = React.useCallback(
+    (value: string) => {
+      setSelectedColor(value)
+      editor.chain().setColor(value).run()
+    },
+    [editor],
+  )
+
+  React.useEffect(() => {
+    setSelectedColor(color)
+  }, [color])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <ToolbarButton
+          tooltip="Text color"
+          aria-label="Text color"
+          className="w-12"
+          size={size}
+          variant={variant}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="size-5"
+            style={{ color: selectedColor }}
+          >
+            <path d="M4 20h16" />
+            <path d="m6 16 6-12 6 12" />
+            <path d="M8 12h8" />
+          </svg>
+          <CaretDownIcon className="size-5" />
+        </ToolbarButton>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-full">
+        <div className="space-y-1.5">
+          {COLORS.map((palette, index) => (
+            <MemoizedColorPicker
+              key={index}
+              palette={palette}
+              inverse={palette.inverse}
+              selectedColor={selectedColor}
+              onColorChange={handleColorChange}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+SectionThree.displayName = "SectionThree"
+
+export default SectionThree

web/shared/minimal-tiptap/components/section/two.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { FormatAction } from "../../types"
+import type { toggleVariants } from "@/components/ui/toggle"
+import type { VariantProps } from "class-variance-authority"
+import {
+  CodeIcon,
+  DotsHorizontalIcon,
+  FontBoldIcon,
+  FontItalicIcon,
+  StrikethroughIcon,
+  TextNoneIcon,
+} from "@radix-ui/react-icons"
+import { ToolbarSection } from "../toolbar-section"
+
+type TextStyleAction =
+  | "bold"
+  | "italic"
+  | "strikethrough"
+  | "code"
+  | "clearFormatting"
+
+interface TextStyle extends FormatAction {
+  value: TextStyleAction
+}
+
+const formatActions: TextStyle[] = [
+  {
+    value: "bold",
+    label: "Bold",
+    icon: <FontBoldIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().toggleBold().run(),
+    isActive: (editor) => editor.isActive("bold"),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleBold().run() &&
+      !editor.isActive("codeBlock"),
+    shortcuts: ["mod", "B"],
+  },
+  {
+    value: "italic",
+    label: "Italic",
+    icon: <FontItalicIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().toggleItalic().run(),
+    isActive: (editor) => editor.isActive("italic"),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleItalic().run() &&
+      !editor.isActive("codeBlock"),
+    shortcuts: ["mod", "I"],
+  },
+  {
+    value: "strikethrough",
+    label: "Strikethrough",
+    icon: <StrikethroughIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().toggleStrike().run(),
+    isActive: (editor) => editor.isActive("strike"),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleStrike().run() &&
+      !editor.isActive("codeBlock"),
+    shortcuts: ["mod", "shift", "S"],
+  },
+  {
+    value: "code",
+    label: "Code",
+    icon: <CodeIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().toggleCode().run(),
+    isActive: (editor) => editor.isActive("code"),
+    canExecute: (editor) =>
+      editor.can().chain().focus().toggleCode().run() &&
+      !editor.isActive("codeBlock"),
+    shortcuts: ["mod", "E"],
+  },
+  {
+    value: "clearFormatting",
+    label: "Clear formatting",
+    icon: <TextNoneIcon className="size-5" />,
+    action: (editor) => editor.chain().focus().unsetAllMarks().run(),
+    isActive: () => false,
+    canExecute: (editor) =>
+      editor.can().chain().focus().unsetAllMarks().run() &&
+      !editor.isActive("codeBlock"),
+    shortcuts: ["mod", "\\"],
+  },
+]
+
+interface SectionTwoProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+  activeActions?: TextStyleAction[]
+  mainActionCount?: number
+}
+
+export const SectionTwo: React.FC<SectionTwoProps> = ({
+  editor,
+  activeActions = formatActions.map((action) => action.value),
+  mainActionCount = 2,
+  size,
+  variant,
+}) => {
+  return (
+    <ToolbarSection
+      editor={editor}
+      actions={formatActions}
+      activeActions={activeActions}
+      mainActionCount={mainActionCount}
+      dropdownIcon={<DotsHorizontalIcon className="size-5" />}
+      dropdownTooltip="More formatting"
+      dropdownClassName="w-8"
+      size={size}
+      variant={variant}
+    />
+  )
+}
+
+SectionTwo.displayName = "SectionTwo"
+
+export default SectionTwo

web/shared/minimal-tiptap/components/shortcut-key.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { getShortcutKey } from "../utils"
+
+export interface ShortcutKeyProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  keys: string[]
+}
+
+export const ShortcutKey = React.forwardRef<HTMLSpanElement, ShortcutKeyProps>(
+  ({ className, keys, ...props }, ref) => {
+    const modifiedKeys = keys.map((key) => getShortcutKey(key))
+    const ariaLabel = modifiedKeys
+      .map((shortcut) => shortcut.readable)
+      .join(" + ")
+
+    return (
+      <span
+        aria-label={ariaLabel}
+        className={cn("inline-flex items-center gap-0.5", className)}
+        {...props}
+        ref={ref}
+      >
+        {modifiedKeys.map((shortcut) => (
+          <kbd
+            key={shortcut.symbol}
+            className={cn(
+              "inline-block min-w-2.5 text-center align-baseline font-sans text-xs font-medium capitalize text-[rgb(156,157,160)]",
+
+              className,
+            )}
+            {...props}
+            ref={ref}
+          >
+            {shortcut.symbol}
+          </kbd>
+        ))}
+      </span>
+    )
+  },
+)
+
+ShortcutKey.displayName = "ShortcutKey"

web/shared/minimal-tiptap/components/toolbar-button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import type { TooltipContentProps } from "@radix-ui/react-tooltip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { Toggle } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
+
+interface ToolbarButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Toggle> {
+  isActive?: boolean
+  tooltip?: string
+  tooltipOptions?: TooltipContentProps
+}
+
+export const ToolbarButton = React.forwardRef<
+  HTMLButtonElement,
+  ToolbarButtonProps
+>(
+  (
+    { isActive, children, tooltip, className, tooltipOptions, ...props },
+    ref,
+  ) => {
+    const toggleButton = (
+      <Toggle
+        size="sm"
+        ref={ref}
+        className={cn("size-8 p-0", { "bg-accent": isActive }, className)}
+        {...props}
+      >
+        {children}
+      </Toggle>
+    )
+
+    if (!tooltip) {
+      return toggleButton
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{toggleButton}</TooltipTrigger>
+        <TooltipContent {...tooltipOptions}>
+          <div className="flex flex-col items-center text-center">
+            {tooltip}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    )
+  },
+)
+
+ToolbarButton.displayName = "ToolbarButton"
+
+export default ToolbarButton

web/shared/minimal-tiptap/components/toolbar-section.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import type { Editor } from "@tiptap/react"
+import type { FormatAction } from "../types"
+import type { VariantProps } from "class-variance-authority"
+import type { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
+import { CaretDownIcon } from "@radix-ui/react-icons"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { ToolbarButton } from "./toolbar-button"
+import { ShortcutKey } from "./shortcut-key"
+import { getShortcutKey } from "../utils"
+
+interface ToolbarSectionProps extends VariantProps<typeof toggleVariants> {
+  editor: Editor
+  actions: FormatAction[]
+  activeActions?: string[]
+  mainActionCount?: number
+  dropdownIcon?: React.ReactNode
+  dropdownTooltip?: string
+  dropdownClassName?: string
+}
+
+export const ToolbarSection: React.FC<ToolbarSectionProps> = ({
+  editor,
+  actions,
+  activeActions = actions.map((action) => action.value),
+  mainActionCount = 0,
+  dropdownIcon,
+  dropdownTooltip = "More options",
+  dropdownClassName = "w-12",
+  size,
+  variant,
+}) => {
+  const { mainActions, dropdownActions } = React.useMemo(() => {
+    const sortedActions = actions
+      .filter((action) => activeActions.includes(action.value))
+      .sort(
+        (a, b) =>
+          activeActions.indexOf(a.value) - activeActions.indexOf(b.value),
+      )
+
+    return {
+      mainActions: sortedActions.slice(0, mainActionCount),
+      dropdownActions: sortedActions.slice(mainActionCount),
+    }
+  }, [actions, activeActions, mainActionCount])
+
+  const renderToolbarButton = React.useCallback(
+    (action: FormatAction) => (
+      <ToolbarButton
+        key={action.label}
+        onClick={() => action.action(editor)}
+        disabled={!action.canExecute(editor)}
+        isActive={action.isActive(editor)}
+        tooltip={`${action.label} ${action.shortcuts.map((s) => getShortcutKey(s).symbol).join(" ")}`}
+        aria-label={action.label}
+        size={size}
+        variant={variant}
+      >
+        {action.icon}
+      </ToolbarButton>
+    ),
+    [editor, size, variant],
+  )
+
+  const renderDropdownMenuItem = React.useCallback(
+    (action: FormatAction) => (
+      <DropdownMenuItem
+        key={action.label}
+        onClick={() => action.action(editor)}
+        disabled={!action.canExecute(editor)}
+        className={cn("flex flex-row items-center justify-between gap-4", {
+          "bg-accent": action.isActive(editor),
+        })}
+        aria-label={action.label}
+      >
+        <span className="grow">{action.label}</span>
+        <ShortcutKey keys={action.shortcuts} />
+      </DropdownMenuItem>
+    ),
+    [editor],
+  )
+
+  const isDropdownActive = React.useMemo(
+    () => dropdownActions.some((action) => action.isActive(editor)),
+    [dropdownActions, editor],
+  )
+
+  return (
+    <>
+      {mainActions.map(renderToolbarButton)}
+      {dropdownActions.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <ToolbarButton
+              isActive={isDropdownActive}
+              tooltip={dropdownTooltip}
+              aria-label={dropdownTooltip}
+              className={cn(dropdownClassName)}
+              size={size}
+              variant={variant}
+            >
+              {dropdownIcon || <CaretDownIcon className="size-5" />}
+            </ToolbarButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-full">
+            {dropdownActions.map(renderDropdownMenuItem)}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </>
+  )
+}
+
+export default ToolbarSection