Updating EditorOptions does not update editor settings

[maxswjeon]

Related to #214, following code does not work.

Editor.ts

import { useEffect } from "react";

import {
  BlockNoteView,
  useBlockNote,
} from "@blocknote/react";

import "@blocknote/core/style.css";

type Props = {
  editable: boolean;
}

export default Editor({ editable }: Props) {
  const editor = useBlockNote({
    editable
  });

  // Test Code
  useEffect(() => {
    console.log(editor?.isEditable);
  }, [editable]);

  return <BlockNoteView editor={editor} />;
}

main.ts

import { useState } from "react";

import Editor from './Editor.ts';

export default Main() {
  const [editable, setEditable] = useState(true);

  return (
    <div>
      <button onClick={() => setEditable(!editable)}>Toggle Editable</button>
      <Editor editable={editable} />
    </div>
  );
}

How can I make this work?

[maxswjeon]

Might a API setEditable would fix it?

[maxswjeon]

PR #230 will fix my issue (because the reason that I'm trying to set the option is to remove the sidemenu when not focused), but the issue might be worth addressing.

[afurculita]

Try

const editor = useBlockNote({
    editable
  }, [editable]);

[maxswjeon]

Thanks, I didn't know that there were dependency list.

[vincelwt]

I also was stuck on a similar problem with initialContent and the dependency list perfectly solves it :) Might be a good idea to add it to the docs (or I couldn't find it). Thanks for the great library!

[mawnir]

this s

Try

const editor = useBlockNote({
    editable
  }, [editable]);

this should be added to docs