@deep-foundation/deepcase/imports/test-md.js

[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from "react";
import { createEditor, Editor, Range, Text } from "slate";
import { withHistory } from "slate-history";
import { DefaultLeaf, Editable, Slate, useSlate, withReact } from "slate-react";
export function EditableWithDecorate() {
    const editor = useSlate();
    const [lastActiveSelection, setLastActiveSelection] = useState();
    useEffect(() => {
        if (editor.selection != null)
            setLastActiveSelection(editor.selection);
    }, [editor.selection]);
    const decorate = useCallback(([node, path]) => {
        if (Text.isText(node) &&
            editor.selection == null &&
            lastActiveSelection != null) {
            const intersection = Range.intersection(lastActiveSelection, Editor.range(editor, path));
            if (intersection == null) {
                return [];
            }
            const range = Object.assign({ highlighted: true }, intersection);
            return [range];
        }
        return [];
    }, [lastActiveSelection]);
    return _jsx(Editable, { renderLeaf: (props) => {
            if (props.leaf.highlighted) {
                return _jsx("span", Object.assign({}, props.attributes, { style: { background: 'yellow' }, children: props.children }));
            }
            return _jsx(DefaultLeaf, Object.assign({}, props));
        }, decorate: decorate, placeholder: "Write something..." });
}
export function HighlightLastActiveSelection() {
    const editor = useMemo(() => withHistory(withReact(createEditor())), []);
    const [value, setValue] = useState([
        {
            children: [{
                    text: "Make a text selection and click on the above input"
                }]
        },
        { children: [{
                    text: "You'll then see that your last selection will be highlighted in yellow"
                }]
        },
    ]);
    return _jsxs("div", { children: [_jsx("input", { type: "text", style: { padding: '10px', marginBottom: '2em' } }), _jsx(Slate, { editor: editor, onChange: setValue, value: value, children: _jsx(EditableWithDecorate, {}) })] });
}
//# sourceMappingURL=test-md.js.map