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

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