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.

[DavideBruner]

Hi there,

First of all, thanks to @gitE0Z9 for sharing this FontFamily component! It’s really useful. 🙌

I noticed that the original version was failing in the latest Plate update because @udecode/plate-common has been deprecated in favor of @udecode/plate.

I’ve updated the code to reflect this change:

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

import { cn } from "@udecode/cn";

import { FontFamilyPlugin } from "@udecode/plate-font/react";

import { Popover, PopoverContent, PopoverTrigger } from "./popover";
import { useEditorPlugin, useEditorSelector } from "@udecode/plate/react";

const DEFAULT_FONT_FAMILY = "Arial";

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

type FontFamily = (typeof FONT_FAMILY)[number];

export function FontFamilyToolbarButton() {
  const [inputValue, setInputValue] = useState<FontFamily>(DEFAULT_FONT_FAMILY);
  const [isFocused, setIsFocused] = useState(false);
  const { api, editor } = useEditorPlugin(FontFamilyPlugin);

  const cursorFontFamily = useEditorSelector((editor) => {
    const marks = api.marks();
    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)) {
      editor.tf.focus();
      return;
    }

    if (newFamily !== cursorFontFamily) {
      editor.tf.addMarks({ [FontFamilyPlugin.key]: newFamily });
    }
    editor.tf.focus();
  };

  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 as FontFamily)}
            onFocus={() => {
              setIsFocused(true);
              setInputValue(cursorFontFamily as FontFamily);
            }}
            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={() => {
                editor.tf.addMarks({ [FontFamilyPlugin.key]: font });
                setIsFocused(false);
              }}
              data-highlighted={font === displayValue}
              type="button"
            >
              {font}
            </button>
          ))}
        </PopoverContent>
      </Popover>
    </div>
  );
}

This should work with the latest version of Plate. Hope it helps!