How can I include CSR-only functions with Fresh?

[HeavySnowJakarta]

Pls see the details at the stackoverflow page.

My question is, when I tried to include a function (which operates browser-specific objects like document) and ensure it to be rendered client-side only, it always claims that document is not available. Here is what I tried:

// Initialize the editor, run CSR-only after the DOM is loaded.

import { useEffect } from "https://esm.sh/v128/[email protected]/hooks/src/index.js";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { init } from "../static/editor.js"

export default function Init() {
    if (!IS_BROWSER) {return <></>}

    useEffect(() => {
        if (IS_BROWSER){
            init()
        }
    })

    return <></>
}

and it claims

Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 3 routes and 6 islands.
error: Uncaught (in promise) ReferenceError: document is not defined
    document.addEventListener('DOMContentLoaded', () => {
    ^
    at init (file:///path/to/project/static/editor.js:7:5)
    at file:///path/to/project/static/editor.js:38:1

    info: document global is not available in Deno.
    hint: Use a library like happy-dom, deno_dom, linkedom or JSDom
          and setup the document global according to the library documentation.
Watcher Process failed. Restarting on file change...