645

Installation

PreviousNext

How to install dependencies and structure your app.

First you need to initialize your project with shadcn/ui.

Editor Initialization

Use the following command to add the editor to your project.

pnpm dlx shadcn@latest add https://shadcn-editor.vercel.app/r/editor.json

This will add the core dependencies and the structure for the editor.

Usage

Here is how you can use the editor in your project.

"use client"
 
import { useState } from "react"
import { SerializedEditorState } from "lexical"
 
import { Editor } from "@/components/blocks/editor-00"
 
const initialValue = {
  root: {
    children: [
      {
        children: [
          {
            detail: 0,
            format: 0,
            mode: "normal",
            style: "",
            text: "Hello World 🚀",
            type: "text",
            version: 1,
          },
        ],
        direction: "ltr",
        format: "",
        indent: 0,
        type: "paragraph",
        version: 1,
      },
    ],
    direction: "ltr",
    format: "",
    indent: 0,
    type: "root",
    version: 1,
  },
} as unknown as SerializedEditorState
 
export default function EditorDemo() {
  const [editorState, setEditorState] =
    useState<SerializedEditorState>(initialValue)
 
  return (
    <div>
      <Editor
        editorSerializedState={editorState}
        onSerializedChange={(value) => setEditorState(value)}
      />
    </div>
  )
}

You can extend the editor with plugins. See the plugins section for more information.

IntroductionPlugins