clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
59 lines • 2.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StrEdit = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const collaborative_input_1 = require("collaborative-input");
const flexible_input_1 = require("flexible-input");
const use_t_1 = require("use-t");
const css = require("../../../css");
const selectOnFocus_1 = require("../../../utils/selectOnFocus");
const utils_1 = require("../../../ClickableJson/utils");
const CancelAction_1 = require("../../../buttons/Action/CancelAction");
const SubmitAction_1 = require("../../../buttons/Action/SubmitAction");
const context_1 = require("../../context");
const StrEdit = ({ node, onCancel, onDone }) => {
const [t] = (0, use_t_1.useT)();
const inputRef = React.useRef();
const { model } = (0, context_1.useJsonCrdt)();
const [clone, api] = React.useMemo(() => {
const clone = model.clone();
clone.api.flush();
const str = clone.index.get(node.node.id);
const api = clone.api.wrap(str);
return [clone, api];
}, []);
const value = React.useSyncExternalStore(api.events.subscribe, api.events.getSnapshot);
React.useEffect(() => {
if (!inputRef.current)
return;
const unbind = (0, collaborative_input_1.bind)(() => api, inputRef.current);
return () => {
unbind();
};
}, [model]);
const handleSubmit = () => {
const hasPatches = !!clone.api.builder.patch.ops.length;
if (hasPatches) {
const patch = clone.api.flush();
model.applyLocalPatch(patch);
}
onDone();
};
const style = (0, utils_1.inputStyle)(nano_theme_1.theme, !nano_theme_1.theme.isLight, '""');
style.margin = '-3px -3px -3px -5px';
style.padding = '2px 4px';
style.border = `1px solid ${nano_theme_1.theme.g(0.85)}`;
return (React.createElement("span", { className: css.input, style: style },
React.createElement(flexible_input_1.FlexibleInput, { focus: true, inp: (el) => {
inputRef.current = el;
}, value: value, multiline: true, uncontrolled: true, typebefore: '"', typeahead: '"', maxWidth: 800, onSubmit: handleSubmit, onFocus: (e) => (0, selectOnFocus_1.selectOnFocus)(e.target), onCancel: () => {
if (onCancel)
onCancel();
} }),
React.createElement(CancelAction_1.CancelAction, { onClick: onCancel, tooltip: t('Cancel') }),
React.createElement("span", { className: css.bottomRightActionPos },
React.createElement(SubmitAction_1.SubmitAction, { onClick: handleSubmit, tooltip: t('Done (Ctrl + Enter)') }))));
};
exports.StrEdit = StrEdit;
//# sourceMappingURL=StrEdit.js.map