{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-docs",
  "title": "Font",
  "description": "Provide extended formatting options for document content.",
  "files": [
    {
      "path": "../../content/docs/(plugins)/(styles)/font.mdx",
      "content": "---\ntitle: Font\ndescription: Provide extended formatting options for document content.\ndocs:\n  - route: /docs/components/font-color-toolbar-button\n    title: Font Color Toolbar Button\n  - route: /docs/components/font-size-toolbar-button\n    title: Font Size Toolbar Button\n---\n\n<ComponentPreview name=\"font-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- Apply font styling to selected text including size, family, color, background color, and weight.\n- Supports custom font families, sizes, colors, and weights.\n\n## Plugins\n\n- `FontBackgroundColorPlugin`: Control background color with `background-color` style\n- `FontColorPlugin`: Control font color with `color` style\n- `FontFamilyPlugin`: Change font family using inline elements with `font-family` style\n- `FontSizePlugin`: Control font size with CSS class or `font-size` style\n- `FontWeightPlugin`: Control font weight with `font-weight` style\n\n</PackageInfo>\n\n## Kit Usage\n\n<Steps>\n\n### Installation\n\nThe fastest way to add font styling functionality is with the `FontKit`, which includes pre-configured font plugins with their [Plate UI](/docs/installation/plate-ui) components.\n\n<ComponentSource name=\"font-kit\" />\n\n- Includes all font plugins (`FontColorPlugin`, `FontBackgroundColorPlugin`, `FontSizePlugin`, `FontFamilyPlugin`) with sensible defaults.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { FontKit } from '@/components/editor/plugins/font-kit';\n\nconst editor = createPlateEditor({\n  plugins: [\n    // ...otherPlugins,\n    ...FontKit,\n  ],\n});\n```\n\n</Steps>\n\n## Manual Usage\n\n<Steps>\n\n### Installation\n\n```bash\nnpm install @platejs/basic-styles\n```\n\n### Add Plugins\n\nInclude the font plugins in your Plate plugins array when creating the editor.\n\n```tsx\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontFamilyPlugin,\n  FontSizePlugin,\n} from '@platejs/basic-styles/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n  plugins: [\n    // ...otherPlugins,\n    FontColorPlugin,\n    FontBackgroundColorPlugin,\n    FontFamilyPlugin,\n    FontSizePlugin,\n  ],\n});\n```\n\n### Configure Plugins\n\nYou can configure individual font plugins with custom options and target elements.\n\n```tsx\nimport {\n  FontColorPlugin,\n  FontBackgroundColorPlugin,\n  FontSizePlugin,\n  FontFamilyPlugin,\n} from '@platejs/basic-styles/react';\nimport { KEYS } from 'platejs';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n  plugins: [\n    // ...otherPlugins,\n    FontColorPlugin.configure({\n      inject: {\n        nodeProps: {\n          defaultNodeValue: 'black',\n        },\n        targetPlugins: [KEYS.p],\n      },\n    }),\n    FontSizePlugin.configure({\n      inject: {\n        targetPlugins: [KEYS.p],\n      },\n    }),\n    FontBackgroundColorPlugin.configure({\n      inject: {\n        targetPlugins: [KEYS.p],\n      },\n    }),\n    FontFamilyPlugin.configure({\n      inject: {\n        targetPlugins: [KEYS.p],\n      },\n    }),\n  ],\n});\n```\n\n- `inject.nodeProps.defaultNodeValue`: Sets the default font color value.\n- `inject.targetPlugins`: Specifies which element types can receive font styling (affects HTML parsing).\n\n### Add Toolbar Button\n\nYou can add [`FontColorToolbarButton`](/docs/components/font-color-toolbar-button) and [`FontSizeToolbarButton`](/docs/components/font-size-toolbar-button) to your [Toolbar](/docs/toolbar) to control font color and size.\n\n</Steps>\n\n## Plugins\n\n### `FontBackgroundColorPlugin`\n\nPlugin for font background color formatting. Applies `background-color` style to selected text.\n\n### `FontColorPlugin`\n\nPlugin for font color formatting. Applies `color` style to selected text.\n\n### `FontFamilyPlugin`\n\nPlugin for font family formatting. Applies `font-family` style to selected text.\n\n### `FontSizePlugin`\n\nPlugin for font size formatting. Applies `font-size` style to selected text.\n\n### `FontWeightPlugin`\n\nPlugin for font weight formatting. Applies `font-weight` style to selected text.\n\n## Transforms\n\n### `tf.backgroundColor.addMark`\n\nSet the font background color mark on the selected text.\n\n<API name=\"tf.backgroundColor.addMark\">\n<APIParameters>\n  <APIItem name=\"value\" type=\"string\">\n    The background color value to set (e.g., `'#ff0000'`, `'red'`).\n  </APIItem>\n</APIParameters>\n</API>\n\n### `tf.color.addMark`\n\nSet the font color mark on the selected text.\n\n<API name=\"tf.color.addMark\">\n<APIParameters>\n  <APIItem name=\"value\" type=\"string\">\n    The color value to set (e.g., `'#0000ff'`, `'blue'`).\n  </APIItem>\n</APIParameters>\n</API>\n\n### `tf.fontFamily.addMark`\n\nSet the font family mark on the selected text.\n\n<API name=\"tf.fontFamily.addMark\">\n<APIParameters>\n  <APIItem name=\"value\" type=\"string\">\n    The font family value to set (e.g., `'Arial'`, `'Times New Roman'`).\n  </APIItem>\n</APIParameters>\n</API>\n\n### `tf.fontSize.addMark`\n\nSet the font size mark on the selected text.\n\n<API name=\"tf.fontSize.addMark\">\n<APIParameters>\n  <APIItem name=\"value\" type=\"string\">\n    The font size value to set (e.g., `'16px'`, `'1.2em'`).\n  </APIItem>\n</APIParameters>\n</API>\n\n### `tf.fontWeight.addMark`\n\nSet the font weight mark on the selected text.\n\n<API name=\"tf.fontWeight.addMark\">\n<APIParameters>\n  <APIItem name=\"value\" type=\"string\">\n    The font weight value to set (e.g., `'bold'`, `'400'`, `'600'`).\n  </APIItem>\n</APIParameters>\n</API>\n\n## API\n\n### `toUnitLess`\n\nConvert a font size value to a unitless value.\n\n<API name=\"toUnitLess\">\n<APIParameters>\n  <APIItem name=\"fontSize\" type=\"string\">\n    The font size value to convert.\n  </APIItem>\n</APIParameters>\n\n<APIReturns type=\"string\">\n  The font size value without units.\n</APIReturns>\n</API>\n\n",
      "type": "registry:file",
      "target": "content/docs/plate/(plugins)/(styles)/font.mdx"
    }
  ],
  "type": "registry:file"
}