collaborative-ui/lib/MonacoEditor.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollaborativeMonaco = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const monaco = tslib_1.__importStar(require("monaco-editor"));
const useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("react-use/lib/useIsomorphicLayoutEffect"));
const collaborative_monaco_1 = require("collaborative-monaco");
const CollaborativeMonaco = ({ str, editor: _editor, options, override, onEditor, ...rest }) => {
    const divRef = React.useRef(null);
    const editorRef = React.useRef(null);
    (0, useIsomorphicLayoutEffect_1.default)(() => {
        if (!divRef.current)
            return;
        const editor = _editor ??
            monaco.editor.create(divRef.current, options ?? {
                value: str().view(),
                language: 'javascript',
            }, override);
        if (onEditor)
            onEditor(editor);
        editorRef.current = editor;
        const unbind = (0, collaborative_monaco_1.bind)(str, editor, true);
        return () => {
            unbind();
            editor.dispose();
        };
    }, [str, _editor]);
    return React.createElement("div", { ...rest, ref: divRef });
};
exports.CollaborativeMonaco = CollaborativeMonaco;