50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T545,'use client' import 'prosekit/basic/style.css' import 'prosekit/basic/typography.css' import 'prosekit/extensions/loro/style.css' import type { CursorAwareness, LoroDocType } from 'loro-prosemirror' import { createEditor } from 'prosekit/core' import { ProseKit } from 'prosekit/react' import { useMemo } from 'react' import { Toolbar } from '../../ui/toolbar/index.ts' import { defineExtension } from './extension.ts' export default function EditorComponent(props: { loro: LoroDocType awareness: CursorAwareness }) { const editor = useMemo(() => { const extension = defineExtension(props.loro, props.awareness) return createEditor({ extension }) }, [props.loro, props.awareness]) return (

) } 53:T7aa,'use client' import { LoroDoc, type AwarenessListener } from 'loro-crdt' import { CursorAwareness, type LoroDocType } from 'loro-prosemirror' import { useEffect, useState } from 'react' import EditorComponent from './editor-component.tsx' export default function Page() { const { loroA, awarenessA, loroB, awarenessB } = useLoroDocs() return (

) } function useLoroDocs() { const [loroState] = useState(() => { const loroA: LoroDocType = new LoroDoc() const loroB: LoroDocType = new LoroDoc() const idA = loroA.peerIdStr const idB = loroB.peerIdStr const awarenessA = new CursorAwareness(idA) const awarenessB = new CursorAwareness(idB) return { loroA, loroB, idA, idB, awarenessA, awarenessB } }) useEffect(() => { const { loroA, loroB, idA, idB, awarenessA, awarenessB } = loroState loroA.import(loroB.export({ mode: 'update' })) loroB.import(loroA.export({ mode: 'update' })) const unsubscribeA = loroA.subscribeLocalUpdates((updates) => { loroB.import(updates) }) const unsubscribeB = loroB.subscribeLocalUpdates((updates) => { loroA.import(updates) }) const awarenessAListener: AwarenessListener = (_, origin) => { if (origin === 'local') { awarenessB.apply(awarenessA.encode([idA])) } } const awarenessBListener: AwarenessListener = (_, origin) => { if (origin === 'local') { awarenessA.apply(awarenessB.encode([idB])) } } awarenessA.addListener(awarenessAListener) awarenessB.addListener(awarenessBListener) return () => { awarenessA.removeListener(awarenessAListener) awarenessB.removeListener(awarenessBListener) unsubscribeA() unsubscribeB() } }, [loroState]) return loroState } 54:T73c,import type { CursorAwareness, LoroDocType } from 'loro-prosemirror' import { defineBaseCommands, defineBaseKeymap, union } from 'prosekit/core' import { defineBlockquote } from 'prosekit/extensions/blockquote' import { defineBold } from 'prosekit/extensions/bold' import { defineCode } from 'prosekit/extensions/code' import { defineDoc } from 'prosekit/extensions/doc' import { defineDropCursor } from 'prosekit/extensions/drop-cursor' import { defineHeading } from 'prosekit/extensions/heading' import { defineImage } from 'prosekit/extensions/image' import { defineItalic } from 'prosekit/extensions/italic' import { defineLink } from 'prosekit/extensions/link' import { defineList } from 'prosekit/extensions/list' import { defineLoro } from 'prosekit/extensions/loro' import { defineModClickPrevention } from 'prosekit/extensions/mod-click-prevention' import { defineParagraph } from 'prosekit/extensions/paragraph' import { defineStrike } from 'prosekit/extensions/strike' import { defineTable } from 'prosekit/extensions/table' import { defineText } from 'prosekit/extensions/text' import { defineUnderline } from 'prosekit/extensions/underline' import { defineVirtualSelection } from 'prosekit/extensions/virtual-selection' export function defineExtension(doc: LoroDocType, awareness: CursorAwareness) { return union([ defineDoc(), defineText(), defineHeading(), defineList(), defineBlockquote(), defineBaseKeymap(), defineBaseCommands(), defineItalic(), defineBold(), defineUnderline(), defineStrike(), defineCode(), defineLink(), defineImage(), defineParagraph(), defineDropCursor(), defineVirtualSelection(), defineModClickPrevention(), defineTable(), defineLoro({ doc, awareness }), ]) } export type EditorExtension = ReturnType 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","loro-crdt",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/loro-crdt","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"loro-crdt"}]]}]}],["$","li","loro-prosemirror",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/loro-prosemirror","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"loro-prosemirror"}]]}]}],["$","li","prosekit@^0.22.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/prosekit","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"prosekit@^0.22.2"}]]}]}]]}],["$","$L50",null,{"namespace":"@prosekit","registryDependencies":["https://unpkg.com/prosekit-registry/dist/r/react-ui-toolbar.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/src/react/examples/loro/editor-component.tsx","content":"$52","type":"registry:component","target":"components/editor/examples/loro/editor-component.tsx"},{"path":"registry/src/react/examples/loro/editor.tsx","content":"$53","type":"registry:component","target":"components/editor/examples/loro/editor.tsx"},{"path":"registry/src/react/examples/loro/extension.ts","content":"$54","type":"registry:component","target":"components/editor/examples/loro/extension.ts"},{"path":"registry/src/react/examples/loro/index.ts","content":"export { default as ExampleEditor } from './editor.tsx'\n","type":"registry:component","target":"components/editor/examples/loro/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]