How to get ref to the input dom node?

[linonetwo]

I want to fix #239 (comment)

But I found it hard to get underlying dom node, as the component doesn't accept ref, even renderEditable={() => <Editable ref={} />} is not possible.

ianstormtaylor/slate#3618 is possibly related, but how to do

const editorRef = useRef()
useEffect(()=> {
     editorRef.current = ReactEditor.toDOMNode(editor, editor)
, []}

in plate?

[zbeyens]

Easiest would be to open a PR to add editableRef prop to PlateProps

[linonetwo]

Warp the usePlateEditorRef(editorID) with <PlateProvider id={props.currentTiddler}>, we can get editor reference too.

export function App(props: IEditorAppProps & IDefaultWidgetProps): JSX.Element {
  return (
    <PlateProvider id={props.currentTiddler}>
      <ParentWidgetContext.Provider value={props.parentWidget}>
        <GlobalStyle />
        <DndProvider backend={HTML5Backend}>
          <Editor {...props} />
        </DndProvider>
      </ParentWidgetContext.Provider>
    </PlateProvider>
  );
}

export function Editor(props: IEditorAppProps & IDefaultWidgetProps): JSX.Element {
  const editorID = props.currentTiddler;
  // get it here
  const editorReference = usePlateEditorRef(editorID);

  const onChange = useCallback(
    (newValue: TElement[]) => {
      // DEBUG: console
      console.log(`onChange`, editorReference, newValue);
      currentAstReference.current = newValue;
      // check isComposing and if user is just set_selection

      // check isComposing like this
      if (editorReference === null || ReactEditor.isComposing(editorReference as ReactEditor)) {
        return;
      }
      if (editorReference.operations.every((op) => op.type === 'set_selection')) {
        return;
      }
      props.saver.lock();
      debouncedSaver(newValue);
    },
    [debouncedSaver, editorReference, props.saver],
  );

  if (typeof document === 'undefined') {
    return <div>Loading...</div>;
  }

  return (
    <Plate id={editorID} initialValue={currentAstReference.current} plugins={plugins} onChange={onChange} editableProps={{ ...CONFIG.editableProps, onBlur }}>
      <BallonToolbar />
      <SnippetCombobox id={editorID} pluginKey="/" />
      <WikiLinkCombobox id={editorID} pluginKey="[[" />
      <WikiLinkCombobox id={editorID} pluginKey="{{" />
      <MacrosCombobox id={editorID} pluginKey="<<" />
      <WidgetCombobox id={editorID} pluginKey="<$" />
    </Plate>
  );
}