Help getting started

[OmarGoubail]

Hi! Thanks For your amazing work. I am just having a little trouble getting things to work, I tried the examples in the docs I tried playing around and translating react examples to solid but nothing seems work correctly, for example:

function Editor() {
  const [editor] = useLexicalComposerContext();
  const [editorContent, setEditorContent] = createSignal<string>('');
  const [debugLog, setDebugLog] = createSignal<string[]>([]);

  const addToDebugLog = (message: string) => {
    setDebugLog((prev) => [...prev, message]);
    console.log(message);
  };

  const printEditorContent = () => {
    editor.getEditorState().read(() => {
      const root = $getRoot();
      const content = root.getTextContent();
      setEditorContent(content);
      addToDebugLog(`Editor content: "${content}"`);
    });
  };

  const onEditorChange = (editorState: EditorState) => {
    editorState.read(() => {
      const root = $getRoot();
      const content = root.getTextContent();
      setEditorContent(content);
      addToDebugLog(`Editor state changed. Content: "${content}"`);
    });
  };

  return (
    <>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
        errorBoundary={(error) => {
          addToDebugLog(`ErrorBoundary: ${error.toString()}`);
          return <div>Error: {error.toString()}</div>;
        }}
      />
      <HistoryPlugin delay={300} />
      <OnChangePlugin onChange={onEditorChange} />
      <button onClick={printEditorContent}>Print Editor Content</button>
      <div>
        <h3>Current Editor Content:</h3>
        <pre>{editorContent()}</pre>
      </div>
      <div>
        <h3>Debug Log:</h3>
        <ul>
          {debugLog().map((log, index) => (
            <li key={index}>{log}</li>
          ))}
        </ul>
      </div>
    </>
  );
}

prints

Enter some text...
Print Editor Content
Current Editor Content:
Debug Log:
Editor content: ""
Editor content: ""

no matter what I write

I am sure this is a skill issue on my side but would appreciate your guidance.

[mosheduminer]

Hey @OmarGoubail! After some testing, I figured out the problem 🙈. Currently, this library works with solid start (which is what the test in "docs" uses) but not with the plain vite setup 🤔. I don't know why that is, but it surely has something to do with esm / cjs packaging issues. Even in solid start, it seems the page needs to have been server rendered to work! Really odd. I'll create a ticket to track this as a bug, as this needs to be fixed!

By the way, you should check out the <For> (and <Index>) components, which we usually use for dynamic lists like debugLog, and we don't have a key prop 🙂.

[OmarGoubail]

Thank you so much for the quick reply, and thank you for the tip as much as i I love Solid some react habits die hard.