simple-react-app-kit/packages/lexical/src/actions/font-size.tsx

import {
  $getSelectionStyleValueForProperty,
  $patchStyleText,
} from "@lexical/selection"
import { ALargeSmall, ChevronDown } from "lucide-react"
import { $getSelection, $isRangeSelection } from "lexical"
import { Button } from "@workspace/ui/components/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@workspace/ui/components/dropdown-menu"
import type {
  LexicalActionDefaultControlProps,
  LexicalActionDefinition,
} from "../types"
import { lexicalMessages } from "../messages"

const fontSizes = ["12px", "14px", "16px", "18px", "24px", "32px"] as const

function FontSizeControl({ context, label }: LexicalActionDefaultControlProps) {
  const fontSize = context.editor.getEditorState().read(() => {
    const selection = $getSelection()
    return $isRangeSelection(selection)
      ? $getSelectionStyleValueForProperty(selection, "font-size", "16px")
      : "16px"
  })

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button
            type="button"
            size="sm"
            variant="ghost"
            aria-label={label}
            className="w-fit justify-between px-2 font-normal"
            onMouseDown={(event) => event.preventDefault()}
          />
        }
      >
        <span>{fontSize}</span>
        <ChevronDown className="opacity-60" />
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="center"
        className="w-fit min-w-auto"
        showArrow
      >
        <DropdownMenuRadioGroup
          value={fontSize}
          onValueChange={(value) => fontSizeAction.execute(context, value)}
        >
          {fontSizes.map((size) => (
            <DropdownMenuRadioItem
              key={size}
              value={size}
              onMouseDown={(event) => event.preventDefault()}
            >
              {size}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export const fontSizeAction: LexicalActionDefinition = {
  name: "fontSize",
  label: lexicalMessages.fontSize,
  icon: ALargeSmall,
  control: FontSizeControl,
  execute: ({ editor }, value = "16px") => {
    editor.update(() => {
      const selection = $getSelection()
      if ($isRangeSelection(selection)) {
        $patchStyleText(selection, { "font-size": value })
      }
    })
  },
}