4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T185b,"use client"; import * as React from "react"; import type { Editor, JSONContent } from "@/components/kibo-ui/editor"; import { EditorBubbleMenu, EditorCharacterCount, EditorClearFormatting, EditorFloatingMenu, EditorFormatBold, EditorFormatCode, EditorFormatItalic, EditorFormatStrike, EditorFormatSubscript, EditorFormatSuperscript, EditorFormatUnderline, EditorLinkSelector, EditorNodeBulletList, EditorNodeCode, EditorNodeHeading1, EditorNodeHeading2, EditorNodeHeading3, EditorNodeOrderedList, EditorNodeQuote, EditorNodeTable, EditorNodeTaskList, EditorNodeText, EditorProvider, EditorSelector, EditorTableColumnAfter, EditorTableColumnBefore, EditorTableColumnDelete, EditorTableColumnMenu, EditorTableDelete, EditorTableFix, EditorTableGlobalMenu, EditorTableHeaderColumnToggle, EditorTableHeaderRowToggle, EditorTableMenu, EditorTableMergeCells, EditorTableRowAfter, EditorTableRowBefore, EditorTableRowDelete, EditorTableRowMenu, EditorTableSplitCell, } from "@/components/kibo-ui/editor"; export const title = "Rich text editor"; const initialContent: JSONContent = { type: "doc", content: [ { type: "heading", attrs: { level: 1 }, content: [{ type: "text", text: "Release notes" }], }, { type: "paragraph", content: [ { type: "text", text: "Write polished docs with " }, { type: "text", marks: [{ type: "bold" }], text: "bold" }, { type: "text", text: ", " }, { type: "text", marks: [{ type: "italic" }], text: "italic" }, { type: "text", text: ", and " }, { type: "text", marks: [{ type: "code" }], text: "inline code" }, { type: "text", text: ". Type " }, { type: "text", marks: [{ type: "code" }], text: "/" }, { type: "text", text: " for slash commands." }, ], }, { type: "taskList", content: [ { type: "taskItem", attrs: { checked: true }, content: [ { type: "paragraph", content: [{ type: "text", text: "Ship the changelog" }], }, ], }, { type: "taskItem", attrs: { checked: false }, content: [ { type: "paragraph", content: [{ type: "text", text: "Record a demo clip" }], }, ], }, ], }, { type: "blockquote", content: [ { type: "paragraph", content: [ { type: "text", text: "Select text for the bubble menu, or leave a blank line for the floating menu.", }, ], }, ], }, { type: "codeBlock", attrs: { language: "javascript" }, content: [ { type: "text", text: "export function greet(name) {\n return `Hello, ${name}`;\n}", }, ], }, { type: "table", content: [ { type: "tableRow", content: ["Feature", "Status", "Owner"].map((text) => ({ type: "tableHeader", attrs: { colspan: 1, rowspan: 1, colwidth: null }, content: [{ type: "paragraph", content: [{ type: "text", text }] }], })), }, { type: "tableRow", content: ["Slash commands", "Ready", "Design"].map((text) => ({ type: "tableCell", attrs: { colspan: 1, rowspan: 1, colwidth: null }, content: [{ type: "paragraph", content: [{ type: "text", text }] }], })), }, { type: "tableRow", content: ["Tables", "Ready", "Editor"].map((text) => ({ type: "tableCell", attrs: { colspan: 1, rowspan: 1, colwidth: null }, content: [{ type: "paragraph", content: [{ type: "text", text }] }], })), }, ], }, ], }; const Example = () => { const [content, setContent] = React.useState(initialContent); return ( setContent(editor.getJSON()) } placeholder="Start typing, or press / for commands…" > Words: ); }; export default Example; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["https://www.kibo-ui.com/r/editor.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://shadcnblocks.com/r/editor-editor-standard-1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/editor-editor-standard-1","itemId":"@shadcnblocks/editor-editor-standard-1"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"example/editor/editor-standard-1.tsx","content":"$52","type":"registry:block"}]}]]}],"$L53"]}]

Editor Standard 1 Rich Text Editor

Installation

Files

components

Styles