shadcn/editor

https://shadcn-editor.vercel.app/docs
Admin
A rich text editor built on the Lexical framework, utilizing shadcn/ui components for a modern and...
Tokens:35,107
Snippets:136
Trust Score:7.8
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install shadcn-editor Dependencies

Source: https://shadcn-editor.vercel.app/docs/installation

This command installs the core dependencies and sets up the basic structure for the shadcn-editor in your project using pnpm. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/editor
```

--------------------------------

### Install Link Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/link

Instructions for installing the shadcn/editor Link plugin using the pnpm package manager.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/link-plugin
```

--------------------------------

### Install shadcn/editor Toolbar Plugin (CLI)

Source: https://shadcn-editor.vercel.app/docs/plugins/toolbar

Provides the command-line interface command to install the shadcn/editor toolbar plugin using pnpm. This is a prerequisite for using the toolbar functionality in your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/toolbar-plugin
```

--------------------------------

### Install Max Length Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/max-length

This command shows how to install the Max Length plugin for shadcn/editor using the pnpm package manager. It utilizes the `pnpm dlx` command to directly execute the installation command provided by the shadcn CLI.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/max-length-plugin
```

--------------------------------

### Install @shadcn-editor/markdown-toggle-plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/markdown-toggle

This snippet shows how to install the markdown-toggle-plugin for shadcn-editor using pnpm. It utilizes the 'dlx' command to execute the package directly.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/markdown-toggle-plugin
```

--------------------------------

### Install Counter Character Plugin (CLI)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/counter-character

Provides the command-line interface command to install the Counter Character plugin for shadcn-editor using pnpm.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/counter-character-plugin
```

--------------------------------

### Install Shadcn Editor Block Format Toolbar Plugin using PNPM, NPM, Yarn, or Bun

Source: https://shadcn-editor.vercel.app/docs/plugins/toolbar/block-format-toolbar

This snippet shows how to install the Shadcn Editor Block Format Toolbar Plugin using various package managers. It requires the respective package manager to be installed on your system.

```shell
pnpm dlx shadcn@latest add @shadcn-editor/block-format-toolbar-plugin
```

--------------------------------

### Install shadcn/editor Tree View Plugin (CLI)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/tree-view

This command installs the Tree View plugin for shadcn/editor using pnpm. Ensure you have pnpm installed and configured in your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/tree-view-plugin
```

--------------------------------

### Install Subsuper Toolbar Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/toolbar/subsuper-toolbar

This command installs the Subsuper Toolbar plugin for shadcn/editor using pnpm. It's a direct command-line instruction for adding the plugin to your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/subsuper-toolbar-plugin
```

--------------------------------

### Install shadcn-editor Code Plugin (CLI)

Source: https://shadcn-editor.vercel.app/docs/plugins/code

Instructions for installing the shadcn-editor code plugin using package managers like pnpm, npm, or yarn. This command-line interface (CLI) approach simplifies the integration of the code plugin into your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/code-plugin
```

--------------------------------

### Install Keywords Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/keywords

This command demonstrates how to install the shadcn-editor keywords plugin using the pnpm package manager. It utilizes the pnpm dlx command to execute the shadcn-editor add command, ensuring the plugin is correctly integrated into the project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/keywords-plugin
```

--------------------------------

### Autocomplete Plugin Setup for Rich Text Editor

Source: https://shadcn-editor.vercel.app/docs/plugins/autocomplete

This code snippet demonstrates how to set up the Autocomplete plugin within a Lexical rich text editor. It includes the necessary imports, editor configuration with the AutocompleteNode, and the rendering of the editor with the AutocompletePlugin. The setup ensures that autocompletion features are integrated into the editor's functionality.

```javascript
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { AutocompleteNode } from "@/registry/new-york-v4/editor/nodes/autocomplete-node"
import { AutocompletePlugin } from "@/registry/new-york-v4/editor/plugins/autocomplete-plugin"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [AutocompleteNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}>
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}

      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}/>
        <AutocompletePlugin />
        {/* rest of the plugins */}
      </div>
    </div>
  )
}

```

--------------------------------

### Install shadcn/editor Font Color Toolbar Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/toolbar/font-color-toolbar

This command installs the Font Color Toolbar plugin for shadcn/editor using the pnpm package manager. Ensure you have pnpm installed and configured in your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/font-color-toolbar-plugin
```

--------------------------------

### Install shadcn-editor Markdown Plugin with Package Managers

Source: https://shadcn-editor.vercel.app/docs/plugins/markdown

This snippet shows how to install the shadcn-editor markdown plugin using different package managers like pnpm, npm, yarn, and bun. Ensure you have one of these package managers installed before proceeding.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/markdown-plugin
```

```bash
npm dlx shadcn@latest add @shadcn-editor/markdown-plugin
```

```bash
yarn dlx shadcn@latest add @shadcn-editor/markdown-plugin
```

```bash
bun dlx shadcn@latest add @shadcn-editor/markdown-plugin
```

--------------------------------

### Install shadcn/editor Import Export Plugin (pnpm)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/import-export

This command installs the shadcn/editor Import Export plugin using pnpm. It's a prerequisite for using the import and export functionality within the editor.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/import-export-plugin
```

--------------------------------

### Install shadcn-editor Font Family Toolbar Plugin (CLI)

Source: https://shadcn-editor.vercel.app/docs/plugins/toolbar/font-family-toolbar

Provides the command-line instruction to install the font-family-toolbar-plugin for shadcn-editor using pnpm. This plugin is essential for enabling font family selection in the editor.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/font-family-toolbar-plugin
```

--------------------------------

### Install Draggable Block Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/draggable-block

This command installs the shadcn-editor's draggable block plugin using pnpm. It's a direct command-line instruction for adding the plugin to your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/draggable-block-plugin
```

--------------------------------

### Install shadcn/editor Autocomplete Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/autocomplete

This command installs the Autocomplete plugin for shadcn/editor using the pnpm package manager. It's a straightforward command-line operation to add the plugin to your project, enabling autocompletion features.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/autocomplete-plugin
```

--------------------------------

### Install Hashtag Plugin using npm/yarn/pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/hashtag

This section provides the command-line instructions for installing the shadcn-editor's hashtag plugin using package managers like npm, yarn, or pnpm. This is a prerequisite for using the hashtag functionality in your editor.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/hashtag-plugin
```

--------------------------------

### Install shadcn/editor Actions Plugin (pnpm)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions

This command demonstrates how to install the shadcn/editor Actions plugin using pnpm. It utilizes pnpm's dlx command to execute the shadcn add command, ensuring the plugin is correctly added to your project dependencies.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/actions-plugin
```

--------------------------------

### Install Rich Text Editor Plugin (pnpm)

Source: https://shadcn-editor.vercel.app/docs/plugins/rich-text-editor

Command to install the shadcn-editor rich text editor plugin using pnpm. This command uses 'pnpm dlx' to execute the shadcn-editor CLI and add the specified plugin.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/rich-text-editor-plugin
```

--------------------------------

### Install shadcn/editor Auto Embed Plugin (pnpm)

Source: https://shadcn-editor.vercel.app/docs/plugins/auto-embed

Instructions for installing the Auto Embed plugin for shadcn/editor using pnpm. This command adds the necessary package to your project, enabling the auto-embedding functionality.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/auto-embed-plugin
```

--------------------------------

### Install shadcn/editor Speech to Text Plugin (pnpm)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/speech-to-text

This command installs the Speech to Text plugin for shadcn/editor using pnpm. It utilizes the pnpm dlx command to execute the shadcn-latest command and add the specified plugin. This is a prerequisite for using the voice input functionality in the editor.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/speech-to-text-plugin
```

--------------------------------

### Install Floating Text Format Plugin (pnpm)

Source: https://shadcn-editor.vercel.app/docs/plugins/floating-text-format

This command demonstrates how to install the Floating Text Format plugin for shadcn/editor using pnpm. It utilizes the pnpm dlx command to execute the shadcn CLI and add the specified plugin to your project.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/floating-text-format-plugin
```

--------------------------------

### Install Clear Editor Plugin using pnpm

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/clear-editor

This command shows how to install the Clear Editor plugin for shadcn/editor using pnpm. It utilizes pnpm's dlx command to execute the shadcn add command, ensuring the plugin is correctly added to your project dependencies.

```bash
pnpm dlx shadcn@latest add @shadcn-editor/clear-editor-plugin
```

--------------------------------

### Initialize Rich Text Editor with TreeViewPlugin (React)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions/tree-view

This code snippet demonstrates how to initialize a Lexical-based Rich Text Editor in React. It configures the editor with basic nodes, a theme, and includes the TreeViewPlugin for visualizing the document structure. The setup involves LexicalComposer, RichTextPlugin, and ActionsPlugin.

```jsx
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
import { HeadingNode, QuoteNode } from "@lexical/rich-text"
import { ParagraphNode, TextNode } from "lexical"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { ActionsPlugin } from "@/registry/new-york-v4/editor/plugins/actions/actions-plugin"
import { TreeViewPlugin } from "@/registry/new-york-v4/editor/plugins/actions/tree-view-plugin"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [HeadingNode, ParagraphNode, TextNode, QuoteNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}
      >
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}
      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        {/* rest of the plugins */}
      </div>
      <ActionsPlugin>
        <div className="clear-both flex items-center justify-between gap-2 overflow-auto border-t p-1">
          <div className="flex flex-1 justify-start">
            {/* left side action buttons */}
          </div>
          <div>{/* center action buttons */}</div>
          <div className="flex flex-1 justify-end">
            {/* right side action buttons */}
            <TreeViewPlugin />
          </div>
        </div>
      </ActionsPlugin>
    </div>
  )
}

```

--------------------------------

### Rich Text Editor with Actions Plugin (React)

Source: https://shadcn-editor.vercel.app/docs/plugins/actions

This code snippet demonstrates how to set up a Rich Text Editor using LexicalComposer and integrate the ActionsPlugin. It includes basic editor configuration, theme, and node types. The ActionsPlugin is used to provide core editor actions, with a clear button example shown.

```javascript
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
import { HeadingNode, QuoteNode } from "@lexical/rich-text"
import { ParagraphNode, TextNode } from "lexical"
import { Trash2Icon } from "lucide-react"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { ActionsPlugin } from "@/registry/new-york-v4/editor/plugins/actions/actions-plugin"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { Button } from "@/components/ui/button"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [HeadingNode, ParagraphNode, TextNode, QuoteNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}
      >
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] =
    useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}
      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        {/* rest of the plugins */}
      </div>
      <ActionsPlugin>
        <div className="clear-both flex items-center justify-between gap-2 overflow-auto border-t p-1">
          <div className="flex flex-1 justify-start">
            {/* left side action buttons */}
          </div>
          <div>{/* center action buttons */}</div>
          <div className="flex flex-1 justify-end">
            {/* right side action buttons */}
            <Button size={"sm"} variant={"ghost"} className="p-2">
              <Trash2Icon className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </ActionsPlugin>
    </div>
  )
}

```

--------------------------------

### Rich Text Editor Component (React)

Source: https://shadcn-editor.vercel.app/docs/plugins/rich-text-editor

A React component for a content-editable rich text editor using Lexical. It includes basic setup for themes, nodes, and error handling. Dependencies include React, Lexical, and custom UI components from '@/registry/new-york-v4/editor'.

```javascript
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
import { HeadingNode, QuoteNode } from "@lexical/rich-text"
import { ParagraphNode, TextNode } from "lexical"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [HeadingNode, ParagraphNode, TextNode, QuoteNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}
      >
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] =
    useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}
      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        {/* rest of the plugins */}
      </div>
    </div>
  )
}

```

--------------------------------

### Implement Component Picker Menu Plugin in React

Source: https://shadcn-editor.vercel.app/docs/plugins/component-picker-menu

This React code snippet demonstrates how to integrate the ComponentPickerMenuPlugin into a Lexical rich text editor. It sets up the editor's initial configuration, including themes and nodes, and renders the necessary plugins for the component picker functionality. Dependencies include Lexical core packages and custom UI components.

```javascript
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
import { QuoteNode } from "@lexical/rich-text"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { ComponentPickerMenuPlugin } from "@/registry/new-york-v4/editor/plugins/component-picker-menu-plugin"
import { AlignmentPickerPlugin } from "@/registry/new-york-v4/editor/plugins/picker/alignment-picker-plugin"
import { HeadingPickerPlugin } from "@/registry/new-york-v4/editor/plugins/picker/heading-picker-plugin"
import { ParagraphPickerPlugin } from "@/registry/new-york-v4/editor/plugins/picker/paragraph-picker-plugin"
import { QuotePickerPlugin } from "@/registry/new-york-v4/editor/plugins/picker/quote-picker-plugin"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [QuoteNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}>
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] =
    useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}

      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        <ComponentPickerMenuPlugin
          baseOptions={[
            ParagraphPickerPlugin(),
            HeadingPickerPlugin({ n: 1 }),
            HeadingPickerPlugin({ n: 2 }),
            HeadingPickerPlugin({ n: 3 }),
            QuotePickerPlugin(),
            AlignmentPickerPlugin({ alignment: "left" }),
            AlignmentPickerPlugin({ alignment: "right" }),
            AlignmentPickerPlugin({ alignment: "center" }),
            AlignmentPickerPlugin({ alignment: "justify" }),
          ]} />
        {/* rest of the plugins */}
      </div>
    </div>
  )
}

```

--------------------------------

### Rich Text Editor with Keywords Plugin (React)

Source: https://shadcn-editor.vercel.app/docs/plugins/keywords

This React code snippet demonstrates how to set up a Lexical-based Rich Text Editor with the Keywords plugin. It configures the editor with a theme, custom nodes (including KeywordNode), and integrates the KeywordsPlugin. The setup includes a placeholder and a basic content editable area.

```javascript
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { KeywordNode } from "@/registry/new-york-v4/editor/nodes/keyword-node"
import { KeywordsPlugin } from "@/registry/new-york-v4/editor/plugins/keywords-plugin"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [KeywordNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}
      >
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] =
    useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}

      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        <KeywordsPlugin />
        {/* rest of the plugins */}
      </div>
    </div>
  )
}

```

--------------------------------

### Rich Text Editor with Toolbar Plugin (React)

Source: https://shadcn-editor.vercel.app/docs/plugins/toolbar

Demonstrates the integration of a Rich Text Editor using LexicalComposer and the ToolbarPlugin. It sets up the initial editor configuration, theme, and nodes, and includes a basic toolbar with a 'Plus' button. The contentEditable area is configured to display a placeholder and allow rich text input.

```jsx
"use client"

import { useState } from "react"
import {
  InitialConfigType,
  LexicalComposer,
} from "@lexical/react/LexicalComposer"
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary"
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"
import { HeadingNode, QuoteNode } from "@lexical/rich-text"
import { ParagraphNode, TextNode } from "lexical"
import { Plus } from "lucide-react"

import { ContentEditable } from "@/registry/new-york-v4/editor/editor-ui/content-editable"
import { ToolbarPlugin } from "@/registry/new-york-v4/editor/plugins/toolbar/toolbar-plugin"
import { editorTheme } from "@/registry/new-york-v4/editor/themes/editor-theme"
import { Button } from "@/components/ui/button"
import { TooltipProvider } from "@/components/ui/tooltip"

const editorConfig: InitialConfigType = {
  namespace: "Editor",
  theme: editorTheme,
  nodes: [HeadingNode, ParagraphNode, TextNode, QuoteNode],
  onError: (error: Error) => {
    console.error(error)
  },
}

export function RichTextEditorDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <LexicalComposer
        initialConfig={{
          ...editorConfig,
        }}
      >
        <TooltipProvider>
          <Plugins />
        </TooltipProvider>
      </LexicalComposer>
    </div>
  )
}

const placeholder = "Start typing..."

export function Plugins() {
  const [floatingAnchorElem, setFloatingAnchorElem] =
    useState<HTMLDivElement | null>(null)

  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
    if (_floatingAnchorElem !== null) {
      setFloatingAnchorElem(_floatingAnchorElem)
    }
  }

  return (
    <div className="relative">
      {/* toolbar plugins */}
      <ToolbarPlugin>
        {({ blockType }) => (
          <div className="vertical-align-middle sticky top-0 z-10 flex gap-2 overflow-auto border-b p-1">
            <Button variant="outline" size="icon" className="h-8 w-8">
              <Plus />
            </Button>
          </div>
        )}
      </ToolbarPlugin>

      <div className="relative">
        <RichTextPlugin
          contentEditable={
            <div className="">
              <div className="" ref={onRef}>
                <ContentEditable
                  placeholder={placeholder}
                  className="ContentEditable__root relative block h-72 min-h-72 min-h-full overflow-auto px-8 py-4 focus:outline-none"
                />
              </div>
            </div>
          }
          ErrorBoundary={LexicalErrorBoundary}
        />
        {/* rest of the plugins */}
      </div>
    </div>
  )
}

```
Tokens:
Raw