-
Notifications
You must be signed in to change notification settings - Fork 64
Open
Labels
api/typescriptproduct: superdocsource: githubstage: triageNew issue. Needs initial assessment and classificationNew issue. Needs initial assessment and classification
Description
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)}
/>
</>
);
}
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
api/typescriptproduct: superdocsource: githubstage: triageNew issue. Needs initial assessment and classificationNew issue. Needs initial assessment and classification