Closed semmywong closed 8 months ago
it seems that you did not init muya. you can refer codes like bellow:
useEffect(() => {
if (!obj.muya && editorRef && editorRef.current && isLoaded) {
if (!params.id) {
return;
}
getNote({ id: params.id })
.then((n) => {
// TODO: handle n is null.
if (!n) {
return;
}
const { title, jsonState, isInTrash, markdown } = n;
setNote(n as unknown as TNote);
setInit(true);
titleRef.current.textContent = title;
// Get mermaidTheme
let mermaidTheme = 'default';
if (settings && settings.theme) {
const theme =
settings.theme === 'system'
? settings.systemTheme
: settings.theme;
if (theme === 'dark') {
mermaidTheme = 'dark';
}
}
const options: any = {
disableHtml: true,
mermaidTheme,
imagePathPicker: trpc.image.getPath.query,
imageAction: trpc.image.upload.query,
};
if (jsonState.length) {
options.json = jsonState;
} else {
options.markdown = markdown;
}
const muya = new Muya(editorRef.current, options);
muya.locale(LANG_MAP[settings.lng] || en);
muya.init();
muya.on('json-change', async () => {
const jsonState = muya.getState();
const markdown = muya.getMarkdown();
const id = getParamsId();
if (!id) {
return;
}
await trpc.UpdateNoteContent.mutate({
id,
jsonState,
markdown,
});
});
globalMuya = muya;
setObj(assign(assign({}, obj), { muya }));
window.appApi.addMainListener('edit', (event, value) => {
if (muya) {
switch (value) {
case 'undo':
muya.undo();
break;
case 'redo':
muya.redo();
break;
case 'find':
setFindStatus(true);
break;
case 'selectAll':
muya.selectAll();
break;
}
}
});
if (!isInTrash) {
editAreaFocus(title);
}
return undefined;
})
.catch((e) => {
setInit(true);
});
}
setIsLoaded(true);
}, [obj, isLoaded, params]);
why can not show preview realtime like MarkText? Am I using it wrong?![image](https://github.com/marktext/muya/assets/67748948/3506c3e8-c5e4-41cb-ba5a-b1fc51451961)
I push code in the CodeSandbox.
https://codesandbox.io/s/cha-xun-biao-ge-forked-4qf58m?file=/App.tsx