IT: react invalid from superdoc v1.1.0

[rex-0085]

What's on your mind?

from version v1.1.0, can't use superdoc at React project normally.

SuperDoc version (if relevant)

v1.1.0

Additional context

package.json
{
"name": "react-superdoc-example",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"@harbour-enterprises/superdoc": "^1.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"umi-request": "^1.4.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.0.4",
"vite": "^6.2.0"
}
}

code from example:
https://docs.superdoc.dev/getting-started/frameworks/react

import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
import { SuperDoc } from '@harbour-enterprises/superdoc';
import '@harbour-enterprises/superdoc/style.css';

const DocEditor = forwardRef(({ document, user, onReady }, ref) => {
  const containerRef = useRef(null);
  const superdocRef = useRef(null);

  useImperativeHandle(ref, () => ({
    export: (options) => superdocRef.current?.export(options),
    setMode: (mode) => superdocRef.current?.setDocumentMode(mode),
    getHTML: () => superdocRef.current?.getHTML()
  }));

  useEffect(() => {
    if (!containerRef.current) return;
    
    superdocRef.current = new SuperDoc({
      selector: containerRef.current,
      document,
      user,
      onReady: () => onReady?.(superdocRef.current)
    });

    return () => {
      superdocRef.current = null;
    };
  }, [document, user, onReady]);

  return <div ref={containerRef} style={{ height: '700px' }} />;
});

// Usage
export default function App() {
  const editorRef = useRef();
  
  const handleExport = async () => {
    await editorRef.current.export({ isFinalDoc: true });
  };
  
  return (
    <>
      <button onClick={handleExport}>Export Final</button>
      <button onClick={() => editorRef.current.setMode('suggesting')}>
        Review Mode
      </button>
      <DocEditor 
        ref={editorRef}
        document="{file name from public path}"
        user={{ name: 'John', email: 'john@company.com' }}
        onReady={(editor) => console.log('Ready', editor)}
      />
    </>
  );
}

[linear]

IT-400

[caio-pizzol]

Hey @rex-0085!

Thanks for reporting it.

The issue is that the React example in our docs is missing a destroy() call in the useEffect cleanup, which means the previous SuperDoc instance never unmounts properly when React re-renders. This causes it to crash when it tries to mount a second time on the same container.

Add superdocRef.current?.destroy() to your cleanup function:

return () => {
  superdocRef.current?.destroy();
  superdocRef.current = null;
};

We're also working on a defensive fix on our side so SuperDoc handles this gracefully even without the cleanup call.