handle onInput functionality

[crazycodestar]

import { createTiptapEditor } from 'solid-tiptap';
import StarterKit from '@tiptap/starter-kit';
import { createSignal } from "solid-js";

function App() {
  let ref!: HTMLDivElement;
  const [content, setContent] = createSignal("");

  const changeTransaction = createEditorTransaction(editor, (instance) => instance?.getHTML());

  // when this change event goes off it messes with the editor and I can't type like the editor is rerendering 
  createEffect(() => {
    const data = changeTransaction();
    if (data) {
      setContent(data);
    }
  })

  // the content() is constantly rerendering as I type but it doesn't work like the onInput for inputs and it doesn't 
  // function properly

  const editor = createTiptapEditor(() => ({
    element: ref,
    extensions: [
      StarterKit,
    ],
    content: content();,
  }));

  return <div id="editor" ref={ref} />;
}

so I was wondering if there was some sort of way to get this to work

so I was wondering if there was some sort of way to get this to work

[amirhhashemi]

The problem is that this line changes the editor options every time the content changes (you type something) and therefor the editor instance gets destroyed and re-created which causes loosing focus on the editor.

  const editor = createTiptapEditor(() => ({
    element: ref,
    extensions: [
      StarterKit,
    ],
    content: content();, // <== here
  }));

If you just want to keep the content signal in sync with the editor HTML you can use the build-in onUpdate method:

function App() {
  let ref!: HTMLDivElement;
  const [content, setContent] = createSignal("");

  createTiptapEditor(() => ({
    element: ref,
    extensions: [
      StarterKit,
    ],
    onUpdate: ({ editor }) => setContent(editor.getHTML()),
  }));

  return <div id="editor" ref={ref} />;
}