Error: Editor's content can not be saved in read-only mode

[lxtadhamnawito]

I'm using EditorJS as my rich text editor, but I'm using readOnly option, as I don't want the user to edit what is written unless he press on a specific button. So whenever the user start to edit it and try to save it, I got this Error: Editor's content can not be saved in read-only mode

read-only option is mentioned in the documentation here, but it doesn't mention how to use it ! So Am I using read-only wrongly, or it should be set in other way? If yes, how to enable read-only mode for tools.

This is what I'm using:

import Header from '@editorjs/header';
import Paragraph from '@editorjs/paragraph'

const RichGuidelinesEditor = ({ value, onChange, isReadOnly }) => {
const EDITOR_JS_TOOLS = {
    paragraph: {
        class: Paragraph,
        inlineToolbar: true,
        readOnly: true,
    },
    header: {
        class: Header,
        readOnly: true,
    },
}

const handleOnChange = e => { e.saver.save().then(res => { onChange(res.blocks); }

return(
        <EditorJs
            data={{ blocks: value }}
            onChange={handleOnChange}
            tools={EDITOR_JS_TOOLS}
            placeholder="Enter your guidelines"
            readOnly={isReadOnly}

            enableReInitialize={true}
            onCompareBlocks={(...args) => args[0]}
        />
)
}
export default RichGuidelinesEditor;

Browser: Chrome. OS: Windows 10.

Editor.js version: Latest version.

Plugins: "react-editor-js"

[neSpecc]

It is the correct behavior. Editor in the read-only mode does not allow saving, and throws an error when you programmatically tries to save it.

[lxtadhamnawito]

@neSpecc So what should I do to allow it save data, and at the same time allow read-only for the Editor itself (as I toggle it when the editor is OnEdit mode read-only = false). Or what I'm saying above is not doable at all?

[neSpecc]

I can't understand what you want to achieve. Editor in read-only just shows passed data. You can't change it. So what do you want to save if you already have data that you pass to the editor?

[lxtadhamnawito]

@neSpecc I want to save the data if the user edit it. As I can press edit button for example which sets Editor's "readOnly=false" so it become editable and add some headers and paragraphs then press save.

So I have 2 cases: 1- readOnly = true --> where I display the data only that I have. 2- readOnly = false --> (on pressing edit) where some data are added/deleted and save them back again.

[MakarovCode]

I had the same need, I forked the library and did a modification to the next file: src/components/modules/api/saver.ts

import { Saver } from '../../../../types/api';
import { OutputData } from '../../../../types';
import * as _ from '../../utils';
import Module from '../../__module';

/**
 * @class SaverAPI
 * provides with methods to save data
 */
export default class SaverAPI extends Module {
  /**
   * Available methods
   *
   * @returns {Saver}
   */
  public get methods(): Saver {
    return {
      save: (force=false): Promise<OutputData> => this.save(force),
    };
  }

  /**
   * Return Editor's data
   *
   * @returns {OutputData}
   */
  public save(force=false): Promise<OutputData> {
    const errorText = `Editor\'s content can not be saved in read-only mode -> ${force}`;

    if (force == false && this.Editor.ReadOnly.isEnabled) {
      _.logLabeled(errorText, 'warn');

      return Promise.reject(new Error(errorText));
    }

    return this.Editor.Saver.save();
  }
}

I basically added a (force=false) to the getter method so you can do:

this.editor.save(true) // For forcing the saving even in readonly mode
//Or
this.editor.save() // To keep current validation

[tofuwu-dev]

You can control boolean value of readOnly. Pass props for it

[norchai]

Chiming in: I also need to be able to save while in read-only mode: basically for the purposes of programmatically converting HTML from another source into editor blocks JSON for various purposes. renderFromHTML() also errors in read-only mode.