can not preview realtime.

[semmywong]

why can not show preview realtime like MarkText? Am I using it wrong?

I push code in the CodeSandbox.

https://codesandbox.io/s/cha-xun-biao-ge-forked-4qf58m?file=/App.tsx

[Jocs]

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]);