theme-live-codeblock shows incorrect preview on theme change

[NickGerleman]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

If react-live LivePreview is re-rendered, it will peform preview from the LiveProvider code prop instead of the current state of the content.

I fixed this in something similar using theLiveEditor onChange prop, to keep state of the current code being edited, and passing that state to the LiveProvider instead of the original code.

Reproducible demo

No response

Steps to reproduce

1. Go to https://docusaurus.io/docs/markdown-features/code-blocks#interactive-code-editor
2. Add some text after the period in the output
3. Change the theme

Expected behavior

The newly edited code is used for the preview

Actual behavior

The original code is used for the preview until a subsequent edit

Your environment

No response

Self-service

• I'd be willing to fix this bug myself.

[slorber]

😄 good catch!

I can see how the editor/preview are not in sync after a theme change:

---

@carloskelly13 wonder if it can be considered as a react-live bug?

This happens because we pass an inline non-memoized transformCode callback to <LiveProvider>, and due to this effect:

  useEffect(() => {
    transpileAsync(code).catch(onError);
  }, [code, scope, noInline, transformCode]);

You retranspile the code in this case, (which makes sense because transpilation uses transformCode), but you retranspile it from the initial code instead of the current editor code.

Maybe the editor code state should be hoisted to the Live provider, or you should read the editor state with useImperativeHandle?

I'll just memoize the callback in Docusaurus, it's more optimized anyway. But I thought you'd be interested to know about this issue: passing an inline or stable function should probably lead to the same result.