{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "italic-docs",
  "title": "Italic",
  "description": "Add emphasized inline text.",
  "files": [
    {
      "path": "../../content/docs/(plugins)/(marks)/italic.mdx",
      "content": "---\ntitle: Italic\ndescription: Add emphasized inline text.\ndocs:\n  - route: /docs/basic-marks\n    title: Basic Marks\n  - route: /docs/components/mark-toolbar-button\n    title: Mark Toolbar Button\n  - route: /docs/plugin-shortcuts\n    title: Plugin Shortcuts\n---\n\nItalic applies the `italic` leaf mark to selected text. `ItalicPlugin` owns the mark key, shortcut, HTML parsing, render tag, and toggle transform.\n\n<ComponentPreview name=\"basic-marks-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- `KEYS.italic` leaf mark.\n- Default `⌘I` / `Ctrl+I` shortcut.\n- HTML deserialization from `em`, `i`, and italic font style.\n- `<em>` rendering by default.\n- Optional Markdown-style input rules through `ItalicRules`.\n- Toolbar support through `MarkToolbarButton`.\n\n</PackageInfo>\n\n## Kit Usage\n\n<Steps>\n\n### Add Basic Marks\n\n`BasicMarksKit` includes `ItalicPlugin`, `*` and `_` Markdown-style input rules, and the standard toolbar buttons that use `KEYS.italic`.\n\n<ComponentSource name=\"basic-marks-kit\" />\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\n\nimport { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';\n\nexport const editor = createPlateEditor({\n  plugins: [...BasicMarksKit],\n});\n```\n\n### Add A Toolbar Button\n\nUse `MarkToolbarButton` with `KEYS.italic`.\n\n```tsx\nimport { ItalicIcon } from 'lucide-react';\nimport { KEYS } from 'platejs';\n\nimport { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';\n\nexport function ItalicToolbarButton() {\n  return (\n    <MarkToolbarButton nodeType={KEYS.italic} tooltip=\"Italic (⌘+I)\">\n      <ItalicIcon />\n    </MarkToolbarButton>\n  );\n}\n```\n\n</Steps>\n\n## Manual Usage\n\nInstall the mark package.\n\n```bash\nnpm install @platejs/basic-nodes\n```\n\nAdd `ItalicPlugin` directly when you do not want the whole kit.\n\n```tsx\nimport { ItalicPlugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\n\nexport const editor = createPlateEditor({\n  plugins: [ItalicPlugin],\n});\n```\n\nRegister Markdown-style input rules when users should type italic delimiters.\n\n```tsx\nimport { ItalicRules } from '@platejs/basic-nodes';\nimport { ItalicPlugin } from '@platejs/basic-nodes/react';\n\nexport const italicPlugin = ItalicPlugin.configure({\n  inputRules: [\n    ItalicRules.markdown({ variant: '*' }),\n    ItalicRules.markdown({ variant: '_' }),\n  ],\n});\n```\n\n## Ownership\n\n| Surface | Owner | What It Does |\n|---------|-------|--------------|\n| `BaseItalicPlugin` | `@platejs/basic-nodes` | Headless italic mark, HTML parser, render tag, and `toggle` transform. |\n| `ItalicPlugin` | `@platejs/basic-nodes/react` | React wrapper with default `mod+i` shortcut. |\n| `ItalicRules.markdown` | `@platejs/basic-nodes` | Optional mark input rule factory. |\n| `BasicMarksKit` | Registry | Adds `ItalicPlugin` with `*` and `_` Markdown-style input rules. |\n| `MarkToolbarButton` | Registry UI | Reads active mark state and calls the mark toggle hook. |\n\nThe package owns the mark. The registry owns toolbar placement and icon choice.\n\n## Behavior\n\n| Behavior | Source |\n|----------|--------|\n| Mark key | `KEYS.italic` |\n| Leaf behavior | `node.isLeaf: true` |\n| Toggle transform | `editor.tf.italic.toggle()` calls `editor.tf.toggleMark(type)`. |\n| Shortcut | `ItalicPlugin` registers `mod+i`. |\n| HTML tags | `em`, `i` |\n| HTML styles | `font-style: italic` |\n| HTML guard | Ignores descendants where `fontStyle` is `normal`. |\n| Render output | `em` |\n\n## API Reference\n\n| API | Package | Use |\n|-----|---------|-----|\n| `BaseItalicPlugin` | `@platejs/basic-nodes` | Headless italic plugin. |\n| `ItalicPlugin` | `@platejs/basic-nodes/react` | React italic plugin with shortcut defaults. |\n| `ItalicRules.markdown(options)` | `@platejs/basic-nodes` | Creates an italic mark input rule. |\n| `tf.italic.toggle()` | `@platejs/basic-nodes` | Toggles the italic mark at the selection. |\n",
      "type": "registry:file",
      "target": "content/docs/plate/(plugins)/(marks)/italic.mdx"
    }
  ],
  "type": "registry:file"
}