Autofocus and start typing on Milkdown editor load

[sytolk]

I have try this to focus empty Milkdown editor but it's need extra click with mouse on editor to start typing
#517

Maybe the right place for this feature is in configuration of the Milkdown Editor: https://github.com/Saul-Mirone/milkdown/blob/main/examples/react/component/milkdown/index.tsx#L34

[sytolk]

My fix in React:

useEffect(() => {
    if(editorRef.current){
      const timeoutId = setTimeout(() => {
        const div = document.querySelector('div[contenteditable="true"]');
        if (div) {
          // @ts-ignore
          div.focus();
        }
      }, 100);

      // Cleanup timeout if the component unmounts before the timeout completes
      return () => clearTimeout(timeoutId);
    }
  }, [editorRef.current]);

[Saul-Mirone]

That looks work fine, you can also use

  const { loading, get } = useEditor(/* your setup logic */);

  useEffect(() => {
    if(loading) return;
    const editor = get();
    if (!editor) return;
    editor.ctx.get(editorViewCtx).dom.focus();
  }, [loading])

[sytolk]

It works thanks!

[sensiblearts]

In a SvelteKit app, this works for me:

// This is EditorComponent.svelte file

function editor(dom: any) {
        const MakeEditor = Editor.make()
            .config((ctx) => {
// ... etc., then invoke MakeEditor:


MakeEditor.then((editor) => {
            theEditor.editor = editor; // theEditor is in outer scope reference

            //...

            theEditor.focus = () => {
                let editorEl : HTMLElement = document.querySelector(".editor")!;
                if (editorEl) {
                    editorEl.focus();
                }
      
            }      
});

onMount(async () => {
       if (editable) { // vs preview mode
                setTimeout(() => {
                    theEditor.focus();
                }, 300);
            }
        }
}); // ...
<div>
       <div use:editor />
</div>