collaborative-ui/lib/JsonCrdtModel/index.stories.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Quill = exports.WithDisplay = exports.Default = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const _1 = require(".");
const fixtures_1 = require("../__tests__/fixtures");
const json_crdt_1 = require("json-joy/lib/json-crdt");
const CollaborativeInput_1 = require("../CollaborativeInput");
const CollaborativeQuill_1 = require("collaborative-quill/lib/CollaborativeQuill");
const useSelectNode_1 = require("../hooks/useSelectNode");
const json_crdt_extensions_1 = require("json-joy/lib/json-crdt-extensions");
exports.default = {
    component: _1.JsonCrdtModel,
    title: '<JsonCrdtModel>',
};
exports.Default = {
    render: () => React.createElement(_1.JsonCrdtModel, { model: fixtures_1.model0 }),
};
const model = json_crdt_1.Model.create(json_crdt_1.s.obj({ text: json_crdt_1.s.str('hello') }));
const DemoDisplay = ({ model }) => {
    const str = (0, useSelectNode_1.useSelectNode)(model, (s) => s.text.toApi());
    if (!str)
        return null;
    return React.createElement(CollaborativeInput_1.CollaborativeInput, { str: () => str });
};
exports.WithDisplay = {
    render: () => React.createElement(_1.JsonCrdtModel, { renderDisplay: (model) => React.createElement(DemoDisplay, { model: model }), model: model }),
};
const QuillDemo = () => {
    // biome-ignore lint: manual dependency list
    const model = React.useMemo(() => {
        const model = json_crdt_extensions_1.ModelWithExt.create(json_crdt_extensions_1.ModelWithExt.ext.quill.new(''));
        return model;
    }, ['']);
    return (React.createElement("div", null,
        React.createElement("div", null, !!model && (React.createElement(CollaborativeQuill_1.CollaborativeQuill, { api: () => model.s.toExt(), style: {
                width: '100%',
                height: '300px',
            } }))),
        React.createElement("br", null),
        React.createElement(_1.JsonCrdtModel, { model: model })));
};
exports.Quill = {
    render: () => React.createElement(QuillDemo, null),
};