CoTexts

const const note: CoPlainTextnote = class CoPlainTextCoPlainText.
CoPlainText.create<CoPlainText>(this: CoValueClass<...>, text: string, options?: {
    owner: Account | Group;
} | Account | Group): CoPlainText
Create 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): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff("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 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(): string
Returns a string representation of a string.toString());  // "Meeting notes for Tuesday"

class class ProfileProfile extends class CoMap
CoMaps 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 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): CoPlainText
Create 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): CoRichText
Create 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 }
);

// 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): CoPlainText
Create 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 });

// 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 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(): string
Returns a string representation of a string.toString());  // "Meeting notes"

// Check the text length
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 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: number
Returns the length of a String object.length);      // 14

// 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): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff("Team meeting notes for Tuesday");

// 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): CoPlainText
Create 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): void
Apply 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(): string
Returns 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): void
Apply text, modifying the text in place. Calculates the diff and applies it to the CoValue.
@categoryMutationapplyDiff(let text: stringtext);  // Efficiently updates only what changed

pnpm add jazz-richtext-prosemirror \
  prosemirror-view \
  prosemirror-state \
  prosemirror-schema-basic

// 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 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";

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 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.
@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 | null
The 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): 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 }),
            
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(): 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 | 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> | 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).
@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>
  );
}

import { CoRichText } from "jazz-tools";
import { createJazzPlugin } from "jazz-richtext-prosemirror";
import { exampleSetup } from "prosemirror-example-setup";
import { schema } from "prosemirror-schema-basic";
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";

function setupRichTextEditor(coRichText, container) {
  // Create the Jazz plugin for ProseMirror
  // Providing a CoRichText instance to the plugin to automatically sync changes
  const jazzPlugin = createJazzPlugin(coRichText); 
  
  // Set up ProseMirror with Jazz plugin
  const view = new EditorView(container, {
    state: EditorState.create({
      schema,
      plugins: [
        ...exampleSetup({ schema }),
        jazzPlugin,
      ],
    }),
  });
  
  // Return cleanup function
  return () => {
    view.destroy();
  };
}

// Usage
const document = CoRichText.create("<p>Initial content</p>", { owner: me });
const editorContainer = document.getElementById("editor");
const cleanup = setupRichTextEditor(document, editorContainer);

// Later when done with the editor
cleanup();