CoTexts
Jazz provides two CoValue types for collaborative text editing, collectively referred to as "CoText" values:
- co.plainText() for simple text editing without formatting
- co.richText() for rich text with HTML-based formatting (extends co.plainText())
Both types enable real-time collaborative editing of text content while maintaining consistency across multiple users.
Note: If you're looking for a quick way to add rich text editing to your app, check out jazz-richtext-prosemirror.
const
const note: CoPlainText
note =import co
co.plainText().
function plainText(): PlainTextSchema export plainText
create("Meeting notes", {
function create(text: string, options?: { owner: Account | Group; } | Account | Group): CoPlainText
owner: Account | Group
owner:me }); // Update the text
const me: Account | ({ [x: string]: any; } & Account)
const note: CoPlainText
note.CoPlainText.applyDiff(other: string): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.applyDiff("Meeting notes for Tuesday");var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html) (the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args)). ```js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout ``` See [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args) for more information.log(const note: CoPlainText
note.CoPlainText.toString(): string
Returns a string representation of a string.toString()); // "Meeting notes for Tuesday"
For a full example of CoTexts in action, see our Richtext example app, which shows plain text and rich text editing.
co.plainText() vs z.string()
While z.string()
is perfect for simple text fields, co.plainText()
is the right choice when you need:
- Frequent text edits that aren't just replacing the whole field
- Fine-grained control over text edits (inserting, deleting at specific positions)
- Multiple users editing the same text simultaneously
- Character-by-character collaboration
- Efficient merging of concurrent changes
Both support real-time updates, but co.plainText()
provides specialized tools for collaborative editing scenarios.
Creating CoText Values
CoText values are typically used as fields in your schemas:
const
Profile =
const Profile: CoProfileSchema<{ name: z.z.ZodString; bio: PlainTextSchema; description: RichTextSchema; }>
import co
co.profile({
profile<{ name: z.z.ZodString; bio: PlainTextSchema; description: RichTextSchema; }>(shape?: ({ name: z.z.ZodString; bio: PlainTextSchema; description: RichTextSchema; } & { ...; }) | undefined): CoProfileSchema<...> export profile
name: z.z.ZodString & z.z.core.$ZodString<string>
name:import z
z.string(),
function string(params?: string | z.z.core.$ZodStringParams): z.z.ZodString export string
bio: PlainTextSchema
bio:import co
co.plainText(), // Plain text field
function plainText(): PlainTextSchema export plainText
description: RichTextSchema
description:import co
co.richText(), // Rich text with formatting });
function richText(): RichTextSchema export richText
Create a CoText value with a simple string:
// Create plaintext with default ownership (current user) const
const note: CoPlainText
note =import co
co.plainText().
function plainText(): PlainTextSchema export plainText
create("Meeting notes", {
function create(text: string, options?: { owner: Account | Group; } | Account | Group): CoPlainText
owner: Account | Group
owner:me }); // Create rich text with HTML content const
const me: Account | ({ [x: string]: any; } & Account)
const document: CoRichText
document =import co
co.richText().
function richText(): RichTextSchema export richText
create("<p>Project <strong>overview</strong></p>", {
function create(text: string, options?: { owner: Account | Group; } | Account | Group): CoRichText
owner: Account | Group
owner:me } );
const me: Account | ({ [x: string]: any; } & Account)
Ownership
Like other CoValues, you can specify ownership when creating CoTexts.
// Create with shared ownership const
const teamGroup: Group
teamGroup =class Group
Group.create();
Group.create<Group>(this: CoValueClass<Group>, options?: { owner: Account; } | Account): Group
const teamGroup: Group
teamGroup.Group.addMember(member: Account, role: AccountRole): void (+1 overload)
addMember(colleagueAccount, "writer"); const
const colleagueAccount: Account | ({ [x: string]: any; } & Account)
const teamNote: CoPlainText
teamNote =import co
co.plainText().
function plainText(): PlainTextSchema export plainText
create("Team updates", {
function create(text: string, options?: { owner: Account | Group; } | Account | Group): CoPlainText
owner: Group | Account
owner:const teamGroup: Group
teamGroup });
See Groups as permission scopes for more information on how to use groups to control access to CoText values.
Reading Text
CoText values work similarly to JavaScript strings:
// Get the text content
var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html) (the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args)). ```js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout ``` See [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args) for more information.log(const note: CoPlainText
note.CoPlainText.toString(): string
Returns a string representation of a string.toString()); // "Meeting notes"var console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html) (the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args)). ```js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout ``` See [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args) for more information.log(`${const note: CoPlainText
note}`); // "Meeting notes" // Check the text lengthvar console: Console
The `console` module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers. The module exports two specific components: * A `Console` class with methods such as `console.log()`, `console.error()` and `console.warn()` that can be used to write to any Node.js stream. * A global `console` instance configured to write to [`process.stdout`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstdout) and [`process.stderr`](https://nodejs.org/docs/latest-v20.x/api/process.html#processstderr). The global `console` can be used without importing the `node:console` module. _**Warning**_: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the [`note on process I/O`](https://nodejs.org/docs/latest-v20.x/api/process.html#a-note-on-process-io) for more information. Example using the global `console`: ```js console.log('hello world'); // Prints: hello world, to stdout console.log('hello %s', 'world'); // Prints: hello world, to stdout console.error(new Error('Whoops, something bad happened')); // Prints error message and stack trace to stderr: // Error: Whoops, something bad happened // at [eval]:5:15 // at Script.runInThisContext (node:vm:132:18) // at Object.runInThisContext (node:vm:309:38) // at node:internal/process/execution:77:19 // at [eval]-wrapper:6:22 // at evalScript (node:internal/process/execution:76:60) // at node:internal/main/eval_string:23:3 const name = 'Will Robinson'; console.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to stderr ``` Example using the `Console` class: ```js const out = getStreamSomehow(); const err = getStreamSomehow(); const myConsole = new console.Console(out, err); myConsole.log('hello world'); // Prints: hello world, to out myConsole.log('hello %s', 'world'); // Prints: hello world, to out myConsole.error(new Error('Whoops, something bad happened')); // Prints: [Error: Whoops, something bad happened], to err const name = 'Will Robinson'; myConsole.warn(`Danger ${name}! Danger!`); // Prints: Danger Will Robinson! Danger!, to err ```console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to `stdout` with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to [`printf(3)`](http://man7.org/linux/man-pages/man3/printf.3.html) (the arguments are all passed to [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args)). ```js const count = 5; console.log('count: %d', count); // Prints: count: 5, to stdout console.log('count:', count); // Prints: count: 5, to stdout ``` See [`util.format()`](https://nodejs.org/docs/latest-v20.x/api/util.html#utilformatformat-args) for more information.log(const note: CoPlainText
note.CoPlainText.length: number
Returns the length of a String object.length); // 14
When using CoTexts in JSX, you can read the text directly:
<> <
JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>{const note: CoPlainText
note.CoPlainText.toString(): string
Returns a string representation of a string.toString()}</JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p> <JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>{const note: CoPlainText
note}</JSX.IntrinsicElements.p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p> </>
Making Edits
Insert and delete text with intuitive methods:
// Insert text at a specific position
const note: CoPlainText
note.CoPlainText.insertBefore(idx: number, text: string): void
insertBefore(8, "weekly "); // "Meeting weekly notes" // Insert after a positionconst note: CoPlainText
note.CoPlainText.insertAfter(idx: number, text: string): void
insertAfter(21, " for Monday"); // "Meeting weekly notes for Monday" // Delete a range of textconst note: CoPlainText
note.deleteRange({
CoPlainText.deleteRange(range: { from: number; to: number; }): void
from: number
from: 8,to: number
to: 15 }); // "Meeting notes for Monday" // Apply a diff to update the entire textconst note: CoPlainText
note.CoPlainText.applyDiff(other: string): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.applyDiff("Team meeting notes for Tuesday");
Applying Diffs
Use applyDiff
to efficiently update text with minimal changes:
// Original text: "Team status update" const
const minutes: CoPlainText
minutes =import co
co.plainText().
function plainText(): PlainTextSchema export plainText
create("Team status update", {
function create(text: string, options?: { owner: Account | Group; } | Account | Group): CoPlainText
owner: Account | Group
owner:me }); // Replace the entire text with a new version
const me: Account | ({ [x: string]: any; } & Account)
const minutes: CoPlainText
minutes.CoPlainText.applyDiff(other: string): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.applyDiff("Weekly team status update for Project X"); // Make partial changes letlet text: string
text =const minutes: CoPlainText
minutes.CoPlainText.toString(): string
Returns a string representation of a string.toString();let text: string
text =let text: string
text.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)
Replaces text in a string, using a regular expression or search string.replace("Weekly", "Monday");const minutes: CoPlainText
minutes.CoPlainText.applyDiff(other: string): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.applyDiff(let text: string
text); // Efficiently updates only what changed
Perfect for handling user input in form controls:
function
TextEditor({
function TextEditor({ textId }: { textId: string; }): React.JSX.Element | null | undefined
textId: string
textId }: {textId: string
textId: string }) { constconst note: CoPlainText | null | undefined
note =useCoState(
useCoState<PlainTextSchema, true>(Schema: PlainTextSchema, id: string | undefined, options?: { resolve?: RefsToResolve<CoPlainText, 10, []> | undefined; } | undefined): CoPlainText | ... 1 more ... | undefined
import co
co.plainText(),
function plainText(): PlainTextSchema export plainText
textId: string
textId); return (const note: CoPlainText | null | undefined
note && <JSX.IntrinsicElements.textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>
textareaReact.TextareaHTMLAttributes<HTMLTextAreaElement>.value?: string | number | readonly string[] | undefined
value={const note: CoPlainText
note.CoPlainText.toString(): string
Returns a string representation of a string.toString()}React.TextareaHTMLAttributes<HTMLTextAreaElement>.onChange?: React.ChangeEventHandler<HTMLTextAreaElement> | undefined
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>
e) => { // Efficiently update only what the user changedconst note: CoPlainText
note.CoPlainText.applyDiff(other: string): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.applyDiff(e: React.ChangeEvent<HTMLTextAreaElement>
e.React.ChangeEvent<HTMLTextAreaElement>.target: EventTarget & HTMLTextAreaElement
target.HTMLTextAreaElement.value: string
Retrieves or sets the text in the entry field of the textArea element. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLTextAreaElement/value)value); }} /> ); }
Using Rich Text with ProseMirror
Jazz provides a dedicated plugin for integrating co.richText() with the popular ProseMirror editor. This plugin, jazz-richtext-prosemirror
, enables bidirectional synchronization between your co.richText() instances and ProseMirror editors.
ProseMirror Plugin Features
- Bidirectional Sync: Changes in the editor automatically update the co.richText() and vice versa
- Real-time Collaboration: Multiple users can edit the same document simultaneously
- HTML Conversion: Automatically converts between HTML (used by co.richText()) and ProseMirror's document model
Installation
pnpm add jazz-richtext-prosemirror \ prosemirror-view \ prosemirror-state \ prosemirror-schema-basic
Integration
For use with React:
// RichTextEditor.tsx import {
function createJazzPlugin(coRichText: CoRichText | undefined, config?: JazzPluginConfig): Plugin<{ coRichText: CoRichText | undefined; }>
Creates a ProseMirror plugin that synchronizes a CoRichText instance with a ProseMirror editor. This plugin enables bidirectional synchronization between a CoRichText instance and a ProseMirror editor. It handles: - Initializing the editor with CoRichText content - Updating the editor when CoRichText changes - Updating CoRichText when the editor changes - Managing the editor view lifecyclecreateJazzPlugin } from "jazz-richtext-prosemirror"; import {
function exampleSetup(options: { schema: Schema; mapKeys?: { [key: string]: string | false; }; menuBar?: boolean; history?: boolean; floatingMenu?: boolean; menuContent?: MenuElement[][]; }): (Plugin<any> | Plugin<{ transform: Transaction; from: number; to: number; text: string; } | null>)[]
Create an array of plugins pre-configured for the given schema. The resulting array will include the following plugins: Input rules for smart quotes and creating the block types in the schema using markdown conventions (say `"> "` to create a blockquote) A keymap that defines keys to create and manipulate the nodes in the schema A keymap binding the default keys provided by the prosemirror-commands module The undo history plugin The drop cursor plugin The gap cursor plugin A custom plugin that adds a `menuContent` prop for the prosemirror-menu wrapper, and a CSS class that enables the additional styling defined in `style/style.css` in this package Probably only useful for quickly setting up a passable editor—you'll need more control over your settings in most real-world situations.exampleSetup } from "prosemirror-example-setup"; import {const schema: Schema<"blockquote" | "image" | "text" | "doc" | "paragraph" | "horizontal_rule" | "heading" | "code_block" | "hard_break", "link" | "code" | "em" | "strong">
This schema roughly corresponds to the document schema used by [CommonMark](http://commonmark.org/), minus the list elements, which are defined in the [`prosemirror-schema-list`](https://prosemirror.net/docs/ref/#schema-list) module. To reuse elements from this schema, extend or read from its `spec.nodes` and `spec.marks` [properties](https://prosemirror.net/docs/ref/#model.Schema.spec).schema } from "prosemirror-schema-basic"; import {class EditorState
The state of a ProseMirror editor is represented by an object of this type. A state is a persistent data structure—it isn't updated, but rather a new state value is computed from an old one using the [`apply`](https://prosemirror.net/docs/ref/#state.EditorState.apply) method. A state holds a number of built-in fields, and plugins can [define](https://prosemirror.net/docs/ref/#state.PluginSpec.state) additional fields.EditorState } from "prosemirror-state"; import {class EditorView
An editor view manages the DOM structure that represents an editable document. Its state and behavior are determined by its [props](https://prosemirror.net/docs/ref/#view.DirectEditorProps).EditorView } from "prosemirror-view"; functionfunction RichTextEditor(): React.JSX.Element | null
RichTextEditor() { const {me } =
const me: ({ profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile; } & { profile: ({ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap) | null; root: ({} & CoMap) | null; } & Account) | null | undefined
useAccount(
useAccount<AccountSchema<{ profile: CoProfileSchema<{ bio: RichTextSchema; }>; root: CoMapSchema<{}>; }>, { profile: true; }>(AccountSchema: AccountSchema<{ profile: CoProfileSchema<{ bio: RichTextSchema; }>; root: CoMapSchema<{}>; }>, options?: { ...; } | undefined): { ...; } (+1 overload)
JazzAccount, {
const JazzAccount: AccountSchema<{ profile: CoProfileSchema<{ bio: RichTextSchema; }>; root: CoMapSchema<{}>; }>
resolve: {
resolve?: RefsToResolve<{ profile: ({ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap) | null; root: ({} & CoMap) | null; } & Account, 10, []> | undefined
profile: true } }); const
profile?: RefsToResolve<{ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile, 10, [0]> | undefined
const editorRef: React.RefObject<HTMLDivElement>
editorRef =useRef<HTMLDivElement>(initialValue: HTMLDivElement | null): React.RefObject<HTMLDivElement> (+2 overloads)
`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes. Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type of the generic argument.useRef<HTMLDivElement>(null); constconst viewRef: React.MutableRefObject<EditorView | null>
viewRef =useRef<EditorView | null>(initialValue: EditorView | null): React.MutableRefObject<EditorView | null> (+2 overloads)
`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.useRef<class EditorView
An editor view manages the DOM structure that represents an editable document. Its state and behavior are determined by its [props](https://prosemirror.net/docs/ref/#view.DirectEditorProps).EditorView | null>(null);function useEffect(effect: React.EffectCallback, deps?: React.DependencyList): void
Accepts a function that contains imperative, possibly effectful code.useEffect(() => { if (!me?.
const me: ({ profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile; } & { profile: ({ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap) | null; root: ({} & CoMap) | null; } & Account) | null | undefined
profile.
Account.profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile
bio: CoRichText | null | undefined
bio || !const editorRef: React.RefObject<HTMLDivElement>
editorRef.React.RefObject<HTMLDivElement>.current: HTMLDivElement | null
The current value of the ref.current) return; // Create the Jazz plugin for ProseMirror // Providing a co.richText() instance to the plugin to automatically sync changes constjazzPlugin =
const jazzPlugin: Plugin<{ coRichText: CoRichText | undefined; }>
function createJazzPlugin(coRichText: CoRichText | undefined, config?: JazzPluginConfig): Plugin<{ coRichText: CoRichText | undefined; }>
Creates a ProseMirror plugin that synchronizes a CoRichText instance with a ProseMirror editor. This plugin enables bidirectional synchronization between a CoRichText instance and a ProseMirror editor. It handles: - Initializing the editor with CoRichText content - Updating the editor when CoRichText changes - Updating CoRichText when the editor changes - Managing the editor view lifecyclecreateJazzPlugin(me.
const me: { profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile; } & { profile: ({ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap) | null; root: ({} & CoMap) | null; } & Account
profile.
Account.profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile
bio: CoRichText
bio); // Set up ProseMirror with the Jazz plugin if (!const viewRef: React.MutableRefObject<EditorView | null>
viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | null
current) {const viewRef: React.MutableRefObject<EditorView | null>
viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | null
current = new
new EditorView(place: null | Node | ((editor: HTMLElement) => void) | { mount: HTMLElement; }, props: DirectEditorProps): EditorView
Create a view. `place` may be a DOM node that the editor should be appended to, a function that will place it into the document, or an object whose `mount` property holds the node to use as the document container. If it is `null`, the editor will not be added to the document.EditorView(const editorRef: React.RefObject<HTMLDivElement>
editorRef.React.RefObject<HTMLDivElement>.current: HTMLDivElement
The current value of the ref.current, {DirectEditorProps.state: EditorState
The current state of the editor.state:class EditorState
The state of a ProseMirror editor is represented by an object of this type. A state is a persistent data structure—it isn't updated, but rather a new state value is computed from an old one using the [`apply`](https://prosemirror.net/docs/ref/#state.EditorState.apply) method. A state holds a number of built-in fields, and plugins can [define](https://prosemirror.net/docs/ref/#state.PluginSpec.state) additional fields.EditorState.EditorState.create(config: EditorStateConfig): EditorState
Create a new state.create({EditorStateConfig.schema?: Schema<any, any> | undefined
The schema to use (only relevant if no `doc` is specified).schema,EditorStateConfig.plugins?: readonly Plugin<any>[] | undefined
The plugins that should be active in this state.plugins: [ ...
function exampleSetup(options: { schema: Schema; mapKeys?: { [key: string]: string | false; }; menuBar?: boolean; history?: boolean; floatingMenu?: boolean; menuContent?: MenuElement[][]; }): (Plugin<any> | Plugin<{ transform: Transaction; from: number; to: number; text: string; } | null>)[]
Create an array of plugins pre-configured for the given schema. The resulting array will include the following plugins: Input rules for smart quotes and creating the block types in the schema using markdown conventions (say `"> "` to create a blockquote) A keymap that defines keys to create and manipulate the nodes in the schema A keymap binding the default keys provided by the prosemirror-commands module The undo history plugin The drop cursor plugin The gap cursor plugin A custom plugin that adds a `menuContent` prop for the prosemirror-menu wrapper, and a CSS class that enables the additional styling defined in `style/style.css` in this package Probably only useful for quickly setting up a passable editor—you'll need more control over your settings in most real-world situations.exampleSetup({schema: Schema<any, any>
The schema to generate key bindings and menu items for.schema }),jazzPlugin, ], }), }); } return () => { if (
const jazzPlugin: Plugin<{ coRichText: CoRichText | undefined; }>
const viewRef: React.MutableRefObject<EditorView | null>
viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | null
current) {const viewRef: React.MutableRefObject<EditorView | null>
viewRef.React.MutableRefObject<EditorView | null>.current: EditorView
current.EditorView.destroy(): void
Removes the editor from the DOM and destroys all [node views](https://prosemirror.net/docs/ref/#view.NodeView).destroy();const viewRef: React.MutableRefObject<EditorView | null>
viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | null
current = null; } }; }, [me?.
const me: ({ profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile; } & { profile: ({ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap) | null; root: ({} & CoMap) | null; } & Account) | null | undefined
profile.
Account.profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile
bio: CoRichText | null | undefined
bio?.CoPlainText.id: string | undefined
id]); if (!me) return null; return ( <
const me: ({ profile: { bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap & Profile; } & { profile: ({ bio: CoRichText | null; name: string; inbox: string | undefined; inboxInvite: string | undefined; } & CoMap) | null; root: ({} & CoMap) | null; } & Account) | null | undefined
JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
divReact.HTMLAttributes<HTMLDivElement>.className?: string | undefined
className="border rounded"> <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
divReact.RefAttributes<HTMLDivElement>.ref?: React.LegacyRef<HTMLDivElement> | undefined
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).ref={const editorRef: React.RefObject<HTMLDivElement>
editorRef}React.HTMLAttributes<HTMLDivElement>.className?: string | undefined
className="p-2" /> </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div> ); }