Skip to content

htmujahid/shadcn-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

85 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Shadcn Editor

Usage

  1. Run this command to setup batteries included editor.
npx shadcn@latest add https://shadcn-editor.vercel.app/r/editor-x.json
  1. Use the Editor component in your project.
'use client'

import { useState } from 'react'

import { SerializedEditorState } from 'lexical'

import { Editor } from '@/components/blocks/editor-x/editor'

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 function EditorDemo() {
  const [editorState, setEditorState] =
    useState<SerializedEditorState>(initialValue)

  return (
    <Editor
      editorSerializedState={editorState}
      onSerializedChange={(value) => setEditorState(value)}
    />
  )
}

Start History

Star History Chart