Block read-only

[bhamichi]

Hi PlateJS team,

I'm working on a project using PlateJS and I would like to know if it is possible to set just a specific block (for example, a paragraph or heading) as read-only, instead of making the whole editor read-only.

My use case requires users to edit most of the document, but keep certain sections locked to prevent any changes. I've checked the docs but couldn't find a clear approach for this scenario.

Is there a built-in way or recommended technique to make only selected blocks or elements read-only while keeping the rest of the editor editable? If so, could you please point me to an example or documentation link?

Thanks in advance for your help!

Originally posted by @shawonsaha in #4716

[dosubot[bot]]

PlateJS doesn't have a built-in way to make only specific blocks (like a paragraph or heading) read-only while keeping the rest of the editor editable docs. The editor-level readOnly prop affects the whole editor, not individual blocks.

However, Plate's plugin system is flexible. You can create a custom plugin that intercepts editing operations (like insert, delete, or setNodes) and blocks them for blocks you want to lock. For example, you could add a readOnly: true property to certain nodes in your document, then override transform functions and event handlers to prevent changes to those nodes plugin API.

Here's a rough outline:

const ReadOnlyBlockPlugin = {
  overrideEditor: (editor) => {
    const { deleteBackward, insertText, setNodes } = editor;

    editor.deleteBackward = (...args) => {
      if (isBlockReadOnly(editor)) return;
      deleteBackward(...args);
    };
    editor.insertText = (text) => {
      if (isBlockReadOnly(editor)) return;
      insertText(text);
    };
    editor.setNodes = (...args) => {
      if (isBlockReadOnly(editor)) return;
      setNodes(...args);
    };
    return editor;
  }
};

function isBlockReadOnly(editor) {
  const [block] = Editor.nodes(editor, { match: n => n.readOnly });
  return !!block;
}

You'd need to adapt this to your block structure and editing needs, but this pattern is supported by Plate's extensible plugin system plugin overrides.

There isn't an official example or doc for this use case, but the architecture supports it. If you need more details or a more complete example, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[dosubot[bot]]

PlateJS doesn't have a built-in feature to make only specific blocks (like paragraphs or headings) read-only while keeping the rest of the editor editable. However, you can achieve this by rendering those blocks as custom void elements with contentEditable={false}. This makes the block non-editable, while the rest of the editor stays editable. See the "Editable Voids" example for a pattern you can adapt.

You can also use the renderElement prop on the Plate component to customize rendering: for blocks you want to lock, render them with contentEditable={false}. If you need to prevent editing at the Slate/Plate level (not just visually), you may need to override editor transforms or commands for those nodes.

There's also an elementReadOnly API method to check if an element is read-only, which can help with custom logic.

There isn't a plugin or config option for block-level read-only out of the box, so this approach is the recommended workaround for now.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[zbeyens]

Overriding elementReadOnly is the way to go. There is no plate plugin boolean option to enable this yet.

[shawonsaha]

I have tried several different ways to make it work, but it seems pretty complicated to implement block-level read-only with PlateJS right now. The suggested approaches require quite a bit of custom logic, and there’s no out-of-the-box option yet :(

[shawonsaha]

Block-Level Read-Only Implementation

Overview

This implementation adds block-level read-only functionality to PlateJS, allowing individual blocks (paragraphs, headings, blockquotes, etc.) to be marked as read-only while keeping the rest of the editor editable. This is achieved by overriding Plate's elementReadOnly API and intercepting editor operations.

Key Components

1. Type Extensions

File: src/registry/components/editor/plate-types.ts

Extended MyBlockElement interface to include an optional readOnly property:

export interface MyBlockElement extends TElement, TListProps {
  id?: string;
  readOnly?: boolean; // Added for block-level read-only support
}

2. Block Read-Only Plugin

Files:

• src/registry/components/editor/plugins/block-readonly-kit.tsx
• src/components/editor/plugins/block-readonly-kit.tsx

The plugin overrides editor.api.elementReadOnly to check if an element has readOnly: true:

.overrideEditor(({ api: { elementReadOnly } }) => ({
  api: {
    elementReadOnly(element) {
      // Check if element has readOnly flag
      if ((element as MyBlockElement).readOnly === true) {
        return true;
      }
      // Fall back to default behavior
      return elementReadOnly(element);
    },
  },
}))

The plugin also intercepts Slate operations to prevent modifications to read-only blocks by checking if any operation targets a read-only element and blocking it.

3. Utility Functions

Files:

• src/registry/components/editor/utils/read-only.ts
• src/components/editor/utils/read-only.ts

Helper functions for working with read-only blocks:

• isReadOnlyBlockElement(element) - Checks if an element is read-only
• getReadOnlyBlockProps(isReadOnly) - Returns props for read-only blocks (data attributes, contentEditable)
• READ_ONLY_BLOCK_CLASSNAMES - CSS classes for visual styling

4. Transform Functions

Files:

• src/registry/components/editor/transforms.ts
• src/components/editor/transforms.ts

Added utility functions:

• toggleBlockReadOnly(editor, options) - Toggles read-only state of selected blocks
• setBlockReadOnly(editor, readOnly, options) - Sets read-only state explicitly
• isBlockReadOnly(editor, path) - Checks if a block at a path is read-only

5. Context Menu Integration

File: src/registry/ui/block-menu.tsx

Added "Lock Block" / "Unlock Block" menu item that:

• Appears in the block context menu
• Shows "Lock Block" for editable blocks, "Unlock Block" for read-only blocks
• Disables destructive operations (delete, duplicate, turn into) when blocks are locked

6. Visual Styling

Files: Updated block component renderers:

• src/components/ui/paragraph-node.tsx
• src/registry/ui/paragraph-node.tsx
• src/components/ui/heading-node.tsx
• src/registry/ui/heading-node.tsx
• src/components/ui/blockquote-node.tsx
• src/registry/ui/blockquote-node.tsx
• src/components/ui/toggle-node.tsx
• src/registry/ui/toggle-node.tsx

How It Works

1. Detection: The plugin overrides editor.api.elementReadOnly() to check for the readOnly property on elements.

2. Operation Interception: Slate operations (insert, delete, set_node, etc.) are intercepted. If an operation targets a read-only block, it's blocked.

3. Visual Feedback: Block components check the readOnly flag and apply styling/attributes to indicate the read-only state.

4. User Interaction: Users can lock/unlock blocks via the context menu, which calls the transform functions to toggle the readOnly property.

Usage

Programmatically Set Read-Only

import { setBlockReadOnly } from "@/registry/components/editor/transforms";

// Lock a block at a specific path
setBlockReadOnly(editor, true, { at: [0] });

// Unlock a block
setBlockReadOnly(editor, false, { at: [0] });

// Toggle read-only state
toggleBlockReadOnly(editor, { at: [0] });

In Initial Value

const initialValue: Value = [
  {
    type: "p",
    readOnly: true, // Mark as read-only
    children: [{ text: "This paragraph cannot be edited" }],
  },
  {
    type: "p",
    children: [{ text: "This paragraph is editable" }],
  },
];

Via Context Menu

1. Right-click any block
2. Select "Lock Block" to make it read-only
3. Select "Unlock Block" to make it editable again

Registration

The plugin is registered in src/registry/components/editor/editor-kit.tsx:

import { BlockReadOnlyKit } from "./plugins/block-readonly-kit";

export const EditorKit = [
  ...BlockReadOnlyKit, // Must be early in the plugin array
  // ... other plugins
];

Technical Notes

• The plugin uses Plate's overrideEditor API to extend the editor's elementReadOnly method
• Operations are intercepted at the Slate level to prevent any modifications
• The implementation follows Plate's recommended pattern for element-level read-only support
• Visual styling uses semantic CSS classes from the design system (border-warning-dark, etc.)
• All block types (paragraph, heading, blockquote, toggle, etc.) support read-only state

[shawonsaha]

Even though everything set up the plate editor does not block from user to edit