My ReactQuill problem
unknown
tsx
2 years ago
3.0 kB
9
Indexable
---------------------- DOCUMENT COMPONENT FILE: ---------------------- export default component$((props : props) => { var sourceDocData = props.sourceDocData; console.log("Parent component") //Gets fired only once when opening Document Component const saveNoteOnType = $((fullText : string) => { ... }); return ( <> <div style="display: block; position:relative; height: 100%"> <div style={"width: fit-content; display: block; position: absolute; right: 16px; top: 4px; z-index: 5"}> </div> <div id="paperView" style="display:block; height: 100%; width: 100%; overflow:hidden;"> { true && // <-- Just for example to show this is not the problem. Is usually "sourceDocData.data.data &&"" <DocEditor key={sourceDocData.data.data[Col_RowID]} value={ sourceDocData.data.data && sourceDocData.data.data[Col_RowData][Col_Desc] ? sourceDocData.data.data[Col_RowData][Col_Desc] : "" } updateVals={ $((vals : string) => { saveNoteOnType(vals); }) } /> } </div> </div> </> ); }); ---------------------- DOCUMENT EDITOR FILE: ---------------------- /** @jsxImportSource react */ import { qwikify$ } from '@builder.io/qwik-react'; import "./document-editor.css"; import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'; let RQuill: any; const importReactQuill = (setShow: Dispatch<SetStateAction<boolean>>) => { import('react-quill').then((module) => { RQuill = module.default; setShow(true); }); }; interface props { value: string updateVals: Function } export const Editor = (props: props) => { const oldVals = props.value; console.log("1: " + oldVals) // Returns <h1>Tes fdhsajf dsjf</h1><p><br></p><p>DJ ksajdk</p><p><br></p><p>daskld</p> // Also, this always fires twice when opening Document Component const [value, setValue] = useState(oldVals); const [show, setShow] = useState(false); useEffect(() => { importReactQuill(setShow); }, []); return show ? ( <RQuill theme='snow' value={value} onChange={(content : string, delta : any, source : any, editor : any) => { console.log("2: " + oldVals) // Returns <h1>Tes fdhsajf dsjf</h1><p><br></p><p>DJ ksajdk</p><p><br></p><p>daskld</p> setValue(editor.getContents()); props.updateVals(editor.getHTML()); console.log("3: " + editor.getHTML()); // Returns <p>Tes fdhsajf dsjf</p><br><p>DJ ksajdk</p><br><p>daskld</p> on component initialization ONLY when navigating from SourceView component to Document component. }} modules={{ ... }} formats={[ ... ]}/> ) : ( <div>Loading...</div> ); }; // Convert React component to Qwik component export const DocEditor = qwikify$(Editor)
Editor is loading...