Code Leaf

"use client";

import * as React from "react";

import { CodeLeaf } from "@/components/ui/code-node";
import { CodePlugin } from "@platejs/basic-nodes/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

export default function CodeNodeDemo() {
  const editor = usePlateEditor({
    plugins: [CodePlugin.withComponent(CodeLeaf)],
    value: [
      {
        type: "p",
        children: [
          { text: "Run " },
          { text: "npm install platejs", code: true },
          { text: " to get started." },
        ],
      },
    ],
  });

  return (
    <div className="w-full max-w-lg p-8">
      <Plate editor={editor}>
        <PlateContent className="rounded-md border p-4 text-sm outline-none" />
      </Plate>
    </div>
  );
}