CoTexts

Jazz provides two CoValue types for collaborative text editing, collectively referred to as "CoText" values:

CoPlainText for simple text editing without formatting
CoRichText for rich text with HTML-based formatting (extends CoPlainText)

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: CoPlainTextnote = class CoPlainTextCoPlainText.CoPlainText.create<CoPlainText>(this: CoValueClass<...>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoPlainTextCreate a new `CoPlainText` with the given text and owner.

The owner (a Group or Account) determines access rights to the CoPlainText.

The CoPlainText will immediately be persisted and synced to connected peers.
@example```ts
const text = CoPlainText.create("Hello, world!", { owner: me });
```@categoryCreationcreate("Meeting notes", { owner: Account | Groupowner: const me: Accountme });

// Update the text
const note: CoPlainTextnote.CoPlainText.applyDiff(other: string): voidApply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff("Meeting notes for Tuesday");

var console: ConsoleThe `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 calling `require('console')`.

_**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
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)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.
@sincev0.1.100log(const note: CoPlainTextnote.CoPlainText.toString(): stringReturns 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.

CoPlainText vs co.string

While co.string is perfect for simple text fields, CoPlainText is the right choice when you need:

Multiple users editing the same text simultaneously
Fine-grained control over text edits (inserting, deleting at specific positions)
Character-by-character collaboration
Efficient merging of concurrent changes

Both support real-time updates, but CoPlainText provides specialized tools for collaborative editing scenarios.

Creating CoText Values

CoText values are typically used as fields in your schemas:

class class ProfileProfile extends class CoMapCoMaps are collaborative versions of plain objects, mapping string-like keys to values.
@categoryDescriptionDeclaration
Declare your own CoMap schemas by subclassing `CoMap` and assigning field schemas with `co`.

Optional `co.ref(...)` fields must be marked with `{ optional: true }`.

```ts
import { co, CoMap } from "jazz-tools";

class Person extends CoMap {
name = co.string;
age = co.number;
pet = co.ref(Animal);
car = co.ref(Car, { optional: true });
}
```@categoryDescriptionContent
You can access properties you declare on a `CoMap` (using `co`) as if they were normal properties on a plain object, using dot notation, `Object.keys()`, etc.

```ts
person.name;
person["age"];
person.age = 42;
person.pet?.name;
Object.keys(person);
// => ["name", "age", "pet"]
```@categoryCoValuesCoMap {
  Profile.name: co<string>name = const co: {
    string: co<string>;
    number: co<number>;
    boolean: co<boolean>;
    null: co<null>;
    Date: co<Date>;
    literal<T extends (string | number | boolean)[]>(..._lit: T): co<T[number]>;
    json<T extends CojsonInternalTypes.CoJsonValue<T>>(): co<T>;
    encoded<T>(arg: Encoder<T>): co<T>;
    ref: {
        ...;
    };
    items: ItemsSym;
    optional: {
        ref: <C extends CoValueClass>(arg: C | ((_raw: InstanceType<C>["_raw"]) => C)) => co<InstanceType<C> | null | undefined>;
        json<T extends CojsonInternalTypes.CoJsonValue<T>>(): co<T | undefined>;
        encoded<T>(arg: OptionalEncoder<T>): co<T | undefined>;
        string: co<string | undefined>;
        number: co<number | undefined>;
        boolean: co<boolean | undefined>;
        null: co<null | undefined>;
        Date: co<Date | undefined>;
        literal<T extends (string | number | boolean)[]>(..._lit: T): co<T[number] | undefined>;
    };
}@categorySchema definition@categorySchema definitionco.string: co<string>string;
  Profile.bio: co<CoPlainText | null>bio = const co: {
    string: co<string>;
    number: co<number>;
    boolean: co<boolean>;
    null: co<null>;
    Date: co<Date>;
    literal<T extends (string | number | boolean)[]>(..._lit: T): co<T[number]>;
    json<T extends CojsonInternalTypes.CoJsonValue<T>>(): co<T>;
    encoded<T>(arg: Encoder<T>): co<T>;
    ref: {
        ...;
    };
    items: ItemsSym;
    optional: {
        ref: <C extends CoValueClass>(arg: C | ((_raw: InstanceType<C>["_raw"]) => C)) => co<InstanceType<C> | null | undefined>;
        json<T extends CojsonInternalTypes.CoJsonValue<T>>(): co<T | undefined>;
        encoded<T>(arg: OptionalEncoder<T>): co<T | undefined>;
        string: co<string | undefined>;
        number: co<number | undefined>;
        boolean: co<boolean | undefined>;
        null: co<null | undefined>;
        Date: co<Date | undefined>;
        literal<T extends (string | number | boolean)[]>(..._lit: T): co<T[number] | undefined>;
    };
}@categorySchema definition@categorySchema definitionco.ref: <typeof CoPlainText>(arg: typeof CoPlainText | ((_raw: RawCoPlainText<JsonObject | null>) => typeof CoPlainText), options?: never) => co<...> (+1 overload)ref(class CoPlainTextCoPlainText);         // Plain text field
  Profile.description: co<CoRichText | null>description = const co: {
    string: co<string>;
    number: co<number>;
    boolean: co<boolean>;
    null: co<null>;
    Date: co<Date>;
    literal<T extends (string | number | boolean)[]>(..._lit: T): co<T[number]>;
    json<T extends CojsonInternalTypes.CoJsonValue<T>>(): co<T>;
    encoded<T>(arg: Encoder<T>): co<T>;
    ref: {
        ...;
    };
    items: ItemsSym;
    optional: {
        ref: <C extends CoValueClass>(arg: C | ((_raw: InstanceType<C>["_raw"]) => C)) => co<InstanceType<C> | null | undefined>;
        json<T extends CojsonInternalTypes.CoJsonValue<T>>(): co<T | undefined>;
        encoded<T>(arg: OptionalEncoder<T>): co<T | undefined>;
        string: co<string | undefined>;
        number: co<number | undefined>;
        boolean: co<boolean | undefined>;
        null: co<null | undefined>;
        Date: co<Date | undefined>;
        literal<T extends (string | number | boolean)[]>(..._lit: T): co<T[number] | undefined>;
    };
}@categorySchema definition@categorySchema definitionco.ref: <typeof CoRichText>(arg: typeof CoRichText | ((_raw: RawCoPlainText<JsonObject | null>) => typeof CoRichText), options?: never) => co<...> (+1 overload)ref(class CoRichTextCoRichText);  // Rich text with formatting
}

Create a CoText value with a simple string:

// Create plaintext with default ownership (current user)
const const note: CoPlainTextnote = class CoPlainTextCoPlainText.CoPlainText.create<CoPlainText>(this: CoValueClass<CoPlainText>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoPlainTextCreate a new `CoPlainText` with the given text and owner.

The owner (a Group or Account) determines access rights to the CoPlainText.

The CoPlainText will immediately be persisted and synced to connected peers.
@example```ts
const text = CoPlainText.create("Hello, world!", { owner: me });
```@categoryCreationcreate("Meeting notes", { owner: Account | Groupowner: const me: Accountme });

// Create rich text with HTML content
const const document: CoRichTextdocument = class CoRichTextCoRichText.CoPlainText.create<CoRichText>(this: CoValueClass<CoRichText>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoRichTextCreate a new `CoPlainText` with the given text and owner.

The owner (a Group or Account) determines access rights to the CoPlainText.

The CoPlainText will immediately be persisted and synced to connected peers.
@example```ts
const text = CoPlainText.create("Hello, world!", { owner: me });
```@categoryCreationcreate("<p>Project <strong>overview</strong></p>",
  { owner: Account | Groupowner: const me: Accountme }
);

Ownership

Like other CoValues, you can specify ownership when creating CoTexts.

// Create with shared ownership
const const teamGroup: GroupteamGroup = class Group@categoryIdentity & PermissionsGroup.Group.create<Group>(this: CoValueClass<Group>, options?: {
    owner: Account;
} | Account): Groupcreate();
const teamGroup: GroupteamGroup.Group.addMember(member: Account, role: AccountRole): void (+1 overload)addMember(const colleagueAccount: AccountcolleagueAccount, "writer");

const const teamNote: CoPlainTextteamNote = class CoPlainTextCoPlainText.CoPlainText.create<CoPlainText>(this: CoValueClass<CoPlainText>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoPlainTextCreate a new `CoPlainText` with the given text and owner.

The owner (a Group or Account) determines access rights to the CoPlainText.

The CoPlainText will immediately be persisted and synced to connected peers.
@example```ts
const text = CoPlainText.create("Hello, world!", { owner: me });
```@categoryCreationcreate("Team updates", { owner: Group | Accountowner: const teamGroup: GroupteamGroup });

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: ConsoleThe `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 calling `require('console')`.

_**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
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)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.
@sincev0.1.100log(const note: CoPlainTextnote.CoPlainText.toString(): stringReturns a string representation of a string.toString());  // "Meeting notes"
var console: ConsoleThe `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 calling `require('console')`.

_**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
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)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.
@sincev0.1.100log(`${const note: CoPlainTextnote}`);    // "Meeting notes"

// Check the text length
var console: ConsoleThe `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 calling `require('console')`.

_**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
```
@see[source](https://github.com/nodejs/node/blob/v20.11.1/lib/console.js)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.
@sincev0.1.100log(const note: CoPlainTextnote.CoPlainText.length: numberReturns 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: CoPlainTextnote.CoPlainText.toString(): stringReturns 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: CoPlainTextnote}</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: CoPlainTextnote.CoPlainText.insertBefore(idx: number, text: string): voidinsertBefore(8, "weekly ");  // "Meeting weekly notes"

// Insert after a position
const note: CoPlainTextnote.CoPlainText.insertAfter(idx: number, text: string): voidinsertAfter(21, " for Monday");  // "Meeting weekly notes for Monday"

// Delete a range of text
const note: CoPlainTextnote.CoPlainText.deleteRange(range: {
    from: number;
    to: number;
}): voiddeleteRange({ from: numberfrom: 8, to: numberto: 15 });  // "Meeting notes for Monday"

// Apply a diff to update the entire text
const note: CoPlainTextnote.CoPlainText.applyDiff(other: string): voidApply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff("Team meeting notes for Tuesday");

Applying Diffs

Use applyDiff to efficiently update text with minimal changes:

// Original text: "Team status update"
const const minutes: CoPlainTextminutes = class CoPlainTextCoPlainText.CoPlainText.create<CoPlainText>(this: CoValueClass<CoPlainText>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoPlainTextCreate a new `CoPlainText` with the given text and owner.

The owner (a Group or Account) determines access rights to the CoPlainText.

The CoPlainText will immediately be persisted and synced to connected peers.
@example```ts
const text = CoPlainText.create("Hello, world!", { owner: me });
```@categoryCreationcreate("Team status update", { owner: Account | Groupowner: const me: Accountme });

// Replace the entire text with a new version
const minutes: CoPlainTextminutes.CoPlainText.applyDiff(other: string): voidApply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff("Weekly team status update for Project X");

// Make partial changes
let let text: stringtext = const minutes: CoPlainTextminutes.CoPlainText.toString(): stringReturns a string representation of a string.toString();
let text: stringtext = let text: stringtext.String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.
@paramsearchValue A string or regular expression to search for.@paramreplaceValue A string containing the text to replace. When the {@linkcode searchValue} is a `RegExp`, all matches are replaced if the `g` flag is set (or only those matches at the beginning, if the `y` flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.replace("Weekly", "Monday");
const minutes: CoPlainTextminutes.CoPlainText.applyDiff(other: string): voidApply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff(let text: stringtext);  // Efficiently updates only what changed

Perfect for handling user input in form controls:

function function TextEditor(): React.JSX.ElementTextEditor() {
  const [const note: CoPlainTextnote, const setNote: React.Dispatch<React.SetStateAction<CoPlainText>>setNote] = useState<CoPlainText>(initialState: CoPlainText | (() => CoPlainText)): [CoPlainText, React.Dispatch<React.SetStateAction<CoPlainText>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(class CoPlainTextCoPlainText.CoPlainText.create<CoPlainText>(this: CoValueClass<CoPlainText>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoPlainTextCreate a new `CoPlainText` with the given text and owner.

The owner (a Group or Account) determines access rights to the CoPlainText.

The CoPlainText will immediately be persisted and synced to connected peers.
@example```ts
const text = CoPlainText.create("Hello, world!", { owner: me });
```@categoryCreationcreate("", { owner: Account | Groupowner: const me: Accountme }));
  
  return (
    <JSX.IntrinsicElements.textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>textarea
      React.TextareaHTMLAttributes<HTMLTextAreaElement>.value?: string | number | readonly string[] | undefinedvalue={const note: CoPlainTextnote.CoPlainText.toString(): stringReturns a string representation of a string.toString()}
      React.TextareaHTMLAttributes<HTMLTextAreaElement>.onChange?: React.ChangeEventHandler<HTMLTextAreaElement> | undefinedonChange={(e: React.ChangeEvent<HTMLTextAreaElement>e) => {
        // Efficiently update only what the user changed
        const note: CoPlainTextnote.CoPlainText.applyDiff(other: string): voidApply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff(e: React.ChangeEvent<HTMLTextAreaElement>e.React.ChangeEvent<HTMLTextAreaElement>.target: EventTarget & HTMLTextAreaElementtarget.HTMLTextAreaElement.value: stringRetrieves 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 CoRichText with the popular ProseMirror editor. This plugin, jazz-richtext-prosemirror, enables bidirectional synchronization between your CoRichText instances and ProseMirror editors.

ProseMirror Plugin Features

Bidirectional Sync: Changes in the editor automatically update the CoRichText and vice versa
Real-time Collaboration: Multiple users can edit the same document simultaneously
HTML Conversion: Automatically converts between HTML (used by CoRichText) 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 lifecycle
@paramcoRichText - The CoRichText instance to synchronize with the editor.
  If undefined, the plugin will still work but won't sync with CoRichText.@paramconfig - Optional configuration for the plugin@returnsA ProseMirror plugin instance that can be added to an editor@example```typescript
const coRichText = new CoRichText({ text: "<p>Hello</p>", owner: account });
const plugin = createJazzPlugin(coRichText, { showDecorations: true });
const state = EditorState.create({
  schema,
  plugins: [plugin],
});
```createJazzPlugin } 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 EditorStateThe 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 EditorViewAn 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";

function function RichTextEditor(): React.JSX.Element | nullRichTextEditor() {
  const { const me: ({
    profile: JazzProfile;
} & JazzAccount) | null | undefinedme } = useAccount<JazzAccount, {
    profile: true;
}>(options?: {
    resolve?: RefsToResolve<JazzAccount, 10, []> | undefined;
} | undefined): {
    me: ({
        profile: JazzProfile;
    } & JazzAccount) | null | undefined;
    logOut: () => void;
} (+1 overload)useAccount({ resolve?: RefsToResolve<JazzAccount, 10, []> | undefinedresolve: { profile?: RefsToResolve<JazzProfile, 10, [0]> | undefinedprofile: true } });
  const 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.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef<HTMLDivElement>(null);
  const const 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.
@version16.8.0@see{@link https://react.dev/reference/react/useRef}useRef<class EditorViewAn 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): voidAccepts a function that contains imperative, possibly effectful code.
@parameffect Imperative function that can return a cleanup function@paramdeps If present, effect will only activate if the values in the list change.@version16.8.0@see{@link https://react.dev/reference/react/useEffect}useEffect(() => {
    if (!const me: ({
    profile: JazzProfile;
} & JazzAccount) | null | undefinedme?.JazzAccount.profile: JazzProfile & co<JazzProfile | null>profile.JazzProfile.bio: co<CoRichText | null> | undefinedbio || !const editorRef: React.RefObject<HTMLDivElement>editorRef.React.RefObject<HTMLDivElement>.current: HTMLDivElement | nullThe current value of the ref.current) return;

    // Create the Jazz plugin for ProseMirror
    // Providing a CoRichText instance to the plugin to automatically sync changes
    const const jazzPlugin: Plugin<{
    coRichText: CoRichText | undefined;
}>jazzPlugin = 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 lifecycle
@paramcoRichText - The CoRichText instance to synchronize with the editor.
  If undefined, the plugin will still work but won't sync with CoRichText.@paramconfig - Optional configuration for the plugin@returnsA ProseMirror plugin instance that can be added to an editor@example```typescript
const coRichText = new CoRichText({ text: "<p>Hello</p>", owner: account });
const plugin = createJazzPlugin(coRichText, { showDecorations: true });
const state = EditorState.create({
  schema,
  plugins: [plugin],
});
```createJazzPlugin(const me: {
    profile: JazzProfile;
} & JazzAccountme.JazzAccount.profile: JazzProfile & co<JazzProfile | null>profile.JazzProfile.bio: CoRichText | (CoRichText & CoMarker)bio); 

    // Set up ProseMirror with the Jazz plugin
    if (!const viewRef: React.MutableRefObject<EditorView | null>viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | nullcurrent) {
      const viewRef: React.MutableRefObject<EditorView | null>viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | nullcurrent = new new EditorView(place: null | Node | ((editor: HTMLElement) => void) | {
    mount: HTMLElement;
}, props: DirectEditorProps): EditorViewCreate 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: HTMLDivElementThe current value of the ref.current, {
        DirectEditorProps.state: EditorStateThe current state of the editor.state: class EditorStateThe 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): EditorStateCreate a new state.create({
          EditorStateConfig.schema?: Schema<any, any> | undefinedThe schema to use (only relevant if no `doc` is specified).schema,
          EditorStateConfig.plugins?: readonly Plugin<any>[] | undefinedThe 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 }),
            const jazzPlugin: Plugin<{
    coRichText: CoRichText | undefined;
}>jazzPlugin,
          ],
        }),
      });
    }

    return () => {
      if (const viewRef: React.MutableRefObject<EditorView | null>viewRef.React.MutableRefObject<EditorView | null>.current: EditorView | nullcurrent) {
        const viewRef: React.MutableRefObject<EditorView | null>viewRef.React.MutableRefObject<EditorView | null>.current: EditorViewcurrent.EditorView.destroy(): voidRemoves 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 | nullcurrent = null;
      }
    };
  }, [const me: ({
    profile: JazzProfile;
} & JazzAccount) | null | undefinedme?.JazzAccount.profile: JazzProfile & co<JazzProfile | null>profile.JazzProfile.bio: co<CoRichText | null> | undefinedbio?.CoPlainText.id: ID<CoRichText> | ID<CoRichText & CoMarker> | undefined@categoryContentid]);

  if (!const me: ({
    profile: JazzProfile;
} & JazzAccount) | null | undefinedme) return null;

  return (
    <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="border rounded">
      <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div React.RefAttributes<HTMLDivElement>.ref?: React.LegacyRef<HTMLDivElement> | undefinedAllows 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).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}ref={const editorRef: React.RefObject<HTMLDivElement>editorRef} React.HTMLAttributes<HTMLDivElement>.className?: string | undefinedclassName="p-2" />
    </JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>
  );
}

CoTexts

#CoPlainText vs co.string

#Creating CoText Values

#Ownership

#Reading Text

#Making Edits

#Applying Diffs

#Using Rich Text with ProseMirror

#ProseMirror Plugin Features

#Installation

#Integration