Readonly

This guide is based on the Basic guide. It is recommended to review it for a comprehensive understanding of this guide.

Install dependencies

bash

npm i rete-readonly-plugin

Plugin connection

import { ReadonlyPlugin } from "rete-readonly-plugin";

const readonly = new ReadonlyPlugin<Schemes>();

editor.use(readonly.root);
editor.use(area);
area.use(readonly.area);
area.use(render);

Make sure to follow the order to connect readonly.root and readonly.area before any other plugins.

Enable

The plugin allows modifications to the editor by default, giving you the ability to establish the editor's initial appearance using methods such as addNode.

Use the following code to activate it:

readonly.enable();

Disable

Disabling can be done in a similar way:

readonly.disable();

Controls

When referring to the in-built controls provided by the framework, like ClassicPreset.InputControl, it's important to specify the readonly feature individually in the below manner:

new ClassicPreset.InputControl('text', { readonly: true })

Since other controls can be custom, it is up to the developer to implement their "read-only" capability.

Disable connection manipulation

Finally, if you have completed the Basic guide, make sure to remove the ConnectionPlugin import.

area.use(connection); // should be removed

Check out the complete result on the Readonly example page.

Documentation