How do we set the editor to readonly?

[ShravanSunder]

I couldn't find this in the docs. What option do i use to make the Milkdown editor readonly? @Saul-Mirone

thanks!

[Saul-Mirone]

ctx.update(
  editorViewOptionsCtx,
  config => ({
    ...config,
    editable: () => false
  })
)

[zgrybus]

@Saul-Mirone @knownasilya Agreed. Changing editable, when prop changes, doesn't seem to work now. I will create an issue with reproducible demo.

[knownasilya]

@zgrybus @Saul-Mirone are there plans to fix this in the short term?

[Saul-Mirone]

@zgrybus @knownasilya This won't work because the edidtorViewOptions will be only used when the editor instance been created. This is by design. So, instead of updated the ctx, you should create a ref of the readonly status, and change its value. I'll give you a example:

import { defaultValueCtx, Editor, editorViewOptionsCtx, rootCtx } from '@milkdown/core';
import { FC, useRef } from 'react';

import { Milkdown, useEditor } from '@milkdown/react'
import { commonmark } from '@milkdown/preset-commonmark';

export const MilkdownEditor: FC = () => {
  const editable = useRef(true);
  
  useEditor((root) => {
    return Editor
      .make()
      .config(ctx => {
        ctx.set(rootCtx, root)
        ctx.update(editorViewOptionsCtx, prev => ({
          ...prev,
          editable: () => editable.current
        }))
      })
      .use(commonmark)
  }, [])

  const onToggleReadonly = () => {
    editable.current = !editable.current
  }

  return (
    <>
      <button onClick={onToggleReadonly}>toggle readonly</button>
      <Milkdown />
    </>
  )
}

[zgrybus]

@Saul-Mirone What if we want to control it via props? Doing something like that breaks react good practices 🤔

import { defaultValueCtx, Editor, editorViewOptionsCtx, rootCtx } from '@milkdown/core';
import { FC, useRef } from 'react';

import { Milkdown, useEditor } from '@milkdown/react'
import { commonmark } from '@milkdown/preset-commonmark';

type MilkdownEditorProps = { isEditable: boolean }

export const MilkdownEditor: FC<MilkdownEditorProps> = ({ isEditable }) => {
  const editable = useRef(isEditable);
  
  useEditor((root) => {
    return Editor
      .make()
      .config(ctx => {
        ctx.set(rootCtx, root)
        ctx.update(editorViewOptionsCtx, prev => ({
          ...prev,
          editable: () => editable.current
        }))
      })
      .use(commonmark)
  }, []);

  useEffect(() => {
    editable.current  = isEditable;
  }, [isEditable])

  return (
    <>
      <Milkdown />
    </>
  )

Previously, recommend way to update editable was:

useEffect(() => {
    const effect = async () => {
      if (loading || !editor || editor.status !== EditorStatus.Created) {
        return;
      }

      editor.use(
        [
          (ctx: Ctx) => () => {
            ctx.update(editorViewOptionsCtx, prev => ({
              ...prev,
              editable: () => isEditable
            }));
          },
        ].flat()
      );

      await editor.create();
    };

    requestAnimationFrame(() => {
      effect();
    });
  }, [loading, editor, isEditable]);

[knownasilya]

@zgrybus that is exactly what I did, your first code example with a prop.isDisabled affecting the ref.