collaborative-ui/lib/DemoDisplay/CodeMirrorEditor.js

React component library for building real-time collaborative editing applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeMirrorEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const codemirror_1 = require("codemirror");
const state_1 = require("@codemirror/state");
const collaborative_codemirror_1 = require("collaborative-codemirror");
const CodeMirrorEditor = ({ str, config, onMount, ...rest }) => {
    const divRef = React.useRef(null);
    const editorRef = React.useRef(null);
    // biome-ignore lint: manual dependency list
    React.useEffect(() => {
        if (!divRef.current)
            return;
        const state = state_1.EditorState.create({
            extensions: [codemirror_1.basicSetup],
        });
        const editor = new codemirror_1.EditorView({
            ...config,
            state,
            parent: divRef.current,
        });
        editorRef.current = editor;
        const unbind = (0, collaborative_codemirror_1.bind)(str, editor, true);
        return () => {
            unbind();
        };
    }, []);
    return React.createElement("div", { ref: divRef, ...rest });
};
exports.CodeMirrorEditor = CodeMirrorEditor;