❓ How do I toggle readOnly on an existing editor instance?

[AlbinoGeek]

Question

How do I toggle readOnly on an existing editor instance?

Context

There doesn't appear to be a .readOnly property, setting this has no effect.

What I've tried

1. I tried setting readOnly property to the editorjs instance, which has no effect.
2. I tried changing readOnly prop passed to JSX component which creates the editor, which has no effect.

(I am using React/NextJS)

[neSpecc]

Have you tried the editor.readOnly.toggle()?

[AlbinoGeek]

Have you tried the editor.readOnly.toggle()?

I hadn't tried that. Trying now...

TypeError: Cannot read properties of undefined (reading 'toggle')

I would blame react-editor-js originally for not exposing the API, buuut....

---

I also tried this from within a BlockTool which does have access to the API.

export default class ReadOnlyTestBlock implements BlockTool {
  static get isReadOnlySupported(): boolean {
    return true
  }
  
  static get toolbox(): BlockToolConstructable['toolbox'] {
    return {
      title: 'ReadOnly Toggle',
      icon:  renderToStaticMarkup(<NoAccess />)
    }
  }
  
  api: BlockToolConstructorOptions['api']
  readOnly: BlockToolConstructorOptions['readOnly']
  wrapper?: HTMLElement
  
  constructor({ api, readOnly }: BlockToolConstructorOptions<Data>) {
    this.api = api
    this.readOnly = readOnly

    api.readOnly.toggle()
  }
  
  render(): HTMLElement {
    this.wrapper = document.createElement('div')
    this.wrapper.contentEditable={!this.readOnly}
    this.wrapper.innerHTML = 'Some Text'
    return this.wrapper
  }

  renderSettings(): HTMLElement {
    const settingsWrapper: HTMLDivElement = document.createElement('div')
    
    const button: HTMLDivElement = document.createElement('div')
    button.classList.add(this.api.styles.settingsButton)
    button.classList.toggle(this.api.styles.settingsButtonActive, false)
    button.innerHTML = renderToStaticMarkup(<NoAccess />)
    
    button.addEventListener('click', () => {
      button.classList.toggle(this.api.styles.settingsButtonActive)
      this.api.readOnly.toggle()
    })
    
    settingsWrapper.appendChild(button)
    return settingsWrapper
  }

  save(blockContent: HTMLElement): Data {
    return {}
  }
}

[danbars]

@AlbinoGeek did you manage to resolve this?

[AlbinoGeek]

No, the property was ignored in the react wrapper, which is issue of that wrapper, not this repo. However, the blocks API did not have the function to make a sibling read-only, which is what I needed.

On Sat., Oct. 8, 2022, 12:37 p.m. danbars, @.***> wrote:

@AlbinoGeek https://github.com/AlbinoGeek did you manage to resolve this?

— Reply to this email directly, view it on GitHub https://github.com/codex-team/editor.js/issues/2039#issuecomment-1272384623, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOSNPINYJHVT6CMSPBL5JTWCHEQHANCNFSM5UY5X63A . You are receiving this because you were mentioned.Message ID: @.***>

[Manukam]

Any plans to allow other ways to toggle? Maybe like being able to do, editor.readOnly = true ? toggle() is not enough for some usecases

[neSpecc]

The toggle method has the optional state argument:

editor.readOnly.toggle(true);
editor.readOnly.toggle(false)

Looks like docs doesn't cover that. We'll update them.

Making a particular block read-only is not supported yet. I think, it should have a separate issue, because we need to dicuss it. The usecase is not clear for me.