global throwing an exception when bundled with vite

[peteole]

Describe the bug
I have been trying to use this Editor as the markdown editor for a React project with the vite bundler. I figured out the following code for a React component wrapper of this editor:

import { Observable } from "@apollo/client";
import { StacksEditor as RawEditor } from "@stackoverflow/stacks-editor";
import "@stackoverflow/stacks-editor/dist/styles.css";
import { useEffect, useRef } from "react";
export type NewValueRequest = {
    res: (newValue?: string) => void
}
type StacksEditorProps = {
    initialValue?: string
    newValueRequests: Observable<NewValueRequest>
    setValueRequests: Observable<string>
}
const StacksEditor: React.FC<StacksEditorProps> = props => {
    const e = useRef<RawEditor | null>(null)
    useEffect(() => {
        const subs1 = props.newValueRequests.subscribe(({ res }) => {
            res(e.current?.content)
        })
        const subs2 = props.setValueRequests.subscribe(newValue => {
            if (e.current) {
                e.current.content = newValue
            }
        })
        return () => {
            subs1.unsubscribe()
            subs2.unsubscribe()
            e.current?.destroy()
        }
    })
    return (
        <div ref={(el) => {
            if (el) {
                e.current = new RawEditor(el, props.initialValue || "")
            }
        }}>
        </div>
    )
}
export default StacksEditor;

Since I did not find any way to subscribe to changes in the editor, I passed an Observable for requests to get the current value of the editor as a property as well as an observable of requests to set the value of the editor.
However when trying to include this component, I get the following errors:

Uncaught ReferenceError: global is not defined
    at getHljsInstance (hljs-instance.js:10:16)
    at CodeBlockHighlightPlugin (highlight-plugin.js:63:16)
    at new RichTextEditor2 (editor.js:94:21)
    at StacksEditor2.setBackingView (editor.js:217:32)
    at new StacksEditor2 (editor.js:30:14)
    at ref (StacksEditor.tsx:33:29)
    at commitAttachRef (react-dom.development.js:20875:7)
    at commitLayoutEffects (react-dom.development.js:23431:9)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)

To Reproduce

1. Create a new typescript vitejs project
2. Add zen-push and the stacks-editor as dependency
3. Paste the code above into a tsx file
4. Include the component in the main tsx using <StacksEditor newValueRequests={new PushStream<NewValueRequest>().observable} setValueRequests={new PushStream<string>().observable} />

Expected behavior
The markdown editor is displayed in the app

Desktop (please complete the following information):

• OS: Manjaro Linux
• Browser Chrome
• Version 0.4.2

Additional context
Has anyone ever included the editor in React? Have I done something terribly wrong?

[b-kelly]

Hmm... I bet this is because in my tooling global gets replaced with window and yours doesn't. This is something I hadn't considered. Let me take a look into this. I imagine the fix is as simple as replacing global with the now-standard globalThis variable.

[b-kelly]

That's what it was exactly. This fix will go out in the next release. Thanks for the report!

[peteole]

That's great, thanks for the fix! I think I'll create a React wrapper for the editor then. By the way is there a way to subscribe to changes of the editor content?

[b-kelly]

Not really, other than listening to the input event I think. I'm not extremely familiar with React though, so I'd recommend looking at other ProseMirror based editors that have React bindings to see what they do.