Font family toolbar button

[gitE0Z9]

Hi, Since I can't find a font family button in documentation or code, I made one from the font size button.

Share for those still looking for solution.

Font family is extendable by adding new one into FONT_FAMILY.

"use client"
import { useState } from "react"

import { cn } from "@udecode/cn"
import { getMarks, setMarks } from "@udecode/plate-common"
import { focusEditor, useEditorPlugin, useEditorSelector } from "@udecode/plate-common/react"
import { BaseFontFamilyPlugin } from "@udecode/plate-font"
import { FontFamilyPlugin } from "@udecode/plate-font/react"

import { Popover, PopoverContent, PopoverTrigger } from "./popover"

const DEFAULT_FONT_FAMILY = "Arial"

const FONT_FAMILY = ["Arial", "Courier New", "Times New Roman", "sans-serif", "serif", "monospace"] as const

export function FontFamilyToolbarButton() {
  const [inputValue, setInputValue] = useState(DEFAULT_FONT_FAMILY)
  const [isFocused, setIsFocused] = useState(false)
  const { api, editor } = useEditorPlugin(BaseFontFamilyPlugin)

  const cursorFontFamily = useEditorSelector((editor) => {
    const marks = getMarks(editor)
    const fontFamily = marks?.[FontFamilyPlugin.key]

    if (fontFamily) {
      return fontFamily as string
    }

    return DEFAULT_FONT_FAMILY
  }, [])

  const handleInputChange = () => {
    const newFamily = inputValue

    if (!FONT_FAMILY.includes(newFamily)) {
      focusEditor(editor)

      return
    }

    if (newFamily !== cursorFontFamily) {
      setMarks(editor, { [BaseFontFamilyPlugin.key]: newFamily })
    }

    focusEditor(editor)
  }

  const displayValue = isFocused ? inputValue : cursorFontFamily

  return (
    <div className="flex h-7 items-center gap-1 rounded-md bg-muted/60 p-0 ">
      <Popover open={isFocused} modal={false}>
        <PopoverTrigger asChild>
          <input
            className={cn("w-30 h-full shrink-0 bg-muted/60 px-1 text-center text-sm hover:bg-muted")}
            value={displayValue}
            style={{ fontFamily: displayValue }}
            onBlur={() => {
              setIsFocused(false)
              handleInputChange()
            }}
            onChange={(e) => setInputValue(e.target.value)}
            onFocus={() => {
              setIsFocused(true)
              setInputValue(cursorFontFamily)
            }}
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault()
                handleInputChange()
              }
            }}
            data-plate-focus="true"
            type="text"
          />
        </PopoverTrigger>
        <PopoverContent className="w-30 px-px py-1" onOpenAutoFocus={(e) => e.preventDefault()}>
          {FONT_FAMILY.map((font) => (
            <button
              key={font}
              className={cn(
                "flex h-8 w-full items-center justify-center  text-sm hover:bg-accent data-[highlighted=true]:bg-accent"
              )}
              style={{ fontFamily: font }}
              onClick={() => {
                setMarks(editor, { [BaseFontFamilyPlugin.key]: font })
                setIsFocused(false)
              }}
              data-highlighted={font === displayValue}
              type="button"
            >
              {font}
            </button>
          ))}
        </PopoverContent>
      </Popover>
    </div>
  )
}

[zbeyens]

Thanks, we'll try to implement it in our registry.