react-codemirror-merge
Version:
CodeMirror merge view for React.
215 lines (214 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Internal = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactCodemirror = require("@uiw/react-codemirror");
var _merge = require("@codemirror/merge");
var _store = require("./store");
var _view = require("@codemirror/view");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className", "children", "orientation", "revertControls", "highlightChanges", "gutter", "collapseUnchanged", "destroyRerender", "renderRevertControl", "diffConfig", "root"],
_excluded2 = ["modified", "modifiedExtension", "original", "originalExtension", "theme", "dispatch"];
var Internal = exports.Internal = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
var className = props.className,
children = props.children,
orientation = props.orientation,
revertControls = props.revertControls,
highlightChanges = props.highlightChanges,
gutter = props.gutter,
collapseUnchanged = props.collapseUnchanged,
_props$destroyRerende = props.destroyRerender,
destroyRerender = _props$destroyRerende === void 0 ? true : _props$destroyRerende,
renderRevertControl = props.renderRevertControl,
diffConfig = props.diffConfig,
root = props.root,
elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useStore = (0, _store.useStore)(),
modified = _useStore.modified,
modifiedExtension = _useStore.modifiedExtension,
original = _useStore.original,
originalExtension = _useStore.originalExtension,
theme = _useStore.theme,
dispatch = _useStore.dispatch,
otherStore = (0, _objectWithoutProperties2["default"])(_useStore, _excluded2);
var editor = (0, _react.useRef)(null);
var view = (0, _react.useRef)();
var opts = {
orientation: orientation,
revertControls: revertControls,
highlightChanges: highlightChanges,
gutter: gutter,
collapseUnchanged: collapseUnchanged,
renderRevertControl: renderRevertControl,
diffConfig: diffConfig,
root: root
};
(0, _react.useImperativeHandle)(ref, function () {
return {
container: editor.current,
view: view.current,
modified: modified,
original: original,
config: (0, _objectSpread2["default"])({
a: original,
b: modified,
parent: editor.current
}, opts)
};
}, [editor, view, modified, original, opts]);
var originalUpdateListener = _view.EditorView.updateListener.of(function (vu) {
if (vu.docChanged && typeof (originalExtension === null || originalExtension === void 0 ? void 0 : originalExtension.onChange) === 'function') {
var doc = vu.state.doc;
var val = doc.toString();
originalExtension === null || originalExtension === void 0 || originalExtension.onChange(val, vu);
}
});
var modifiedUpdateListener = _view.EditorView.updateListener.of(function (vu) {
if (vu.docChanged && typeof (modifiedExtension === null || modifiedExtension === void 0 ? void 0 : modifiedExtension.onChange) === 'function') {
var doc = vu.state.doc;
var val = doc.toString();
modifiedExtension === null || modifiedExtension === void 0 || modifiedExtension.onChange(val, vu);
}
});
(0, _react.useEffect)(function () {
if (!view.current && editor.current && originalExtension && modifiedExtension) {
view.current = new _merge.MergeView((0, _objectSpread2["default"])({
a: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, original), {}, {
extensions: [].concat((0, _toConsumableArray2["default"])((originalExtension === null || originalExtension === void 0 ? void 0 : originalExtension.extension) || []), (0, _toConsumableArray2["default"])((0, _reactCodemirror.getDefaultExtensions)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, originalExtension === null || originalExtension === void 0 ? void 0 : originalExtension.option), {}, {
theme: theme
}))), [originalUpdateListener])
}),
b: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modified), {}, {
extensions: [].concat((0, _toConsumableArray2["default"])((modifiedExtension === null || modifiedExtension === void 0 ? void 0 : modifiedExtension.extension) || []), (0, _toConsumableArray2["default"])((0, _reactCodemirror.getDefaultExtensions)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modifiedExtension === null || modifiedExtension === void 0 ? void 0 : modifiedExtension.option), {}, {
theme: theme
}))), [modifiedUpdateListener])
}),
parent: editor.current
}, opts));
dispatch({
view: view.current
});
}
}, [view, editor, originalExtension, modifiedExtension]);
(0, _react.useEffect)(function () {
if (original && original.doc && view.current) {
var _view$current;
var originalDoc = (_view$current = view.current) === null || _view$current === void 0 ? void 0 : _view$current.a.state.doc.toString();
if (originalDoc !== original.doc) {
var _view$current2;
(_view$current2 = view.current) === null || _view$current2 === void 0 || _view$current2.a.dispatch({
changes: {
from: 0,
to: originalDoc.length,
insert: original.doc || ''
}
// effects: StateEffect.reconfigure.of([
// ...(originalExtension?.extension || []),
// ...getDefaultExtensions({ ...originalExtension?.option, theme }),
// ])
});
}
}
if (modified && modified.doc && view.current) {
var _view$current3;
var modifiedDoc = (_view$current3 = view.current) === null || _view$current3 === void 0 ? void 0 : _view$current3.b.state.doc.toString();
if (modifiedDoc !== modified.doc) {
var _view$current4;
(_view$current4 = view.current) === null || _view$current4 === void 0 || _view$current4.b.dispatch({
changes: {
from: 0,
to: modifiedDoc.length,
insert: modified.doc || ''
}
// effects: StateEffect.reconfigure.of([
// ...(modifiedExtension?.extension || []),
// ...getDefaultExtensions({ ...modifiedExtension?.option, theme }),
// ])
});
}
}
if (destroyRerender && view.current) {
var originalFrom = view.current.a.state.selection.ranges[0].from;
var modifiedFrom = view.current.b.state.selection.ranges[0].from;
view.current.destroy();
view.current = new _merge.MergeView((0, _objectSpread2["default"])({
a: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, original), {}, {
extensions: [].concat((0, _toConsumableArray2["default"])((originalExtension === null || originalExtension === void 0 ? void 0 : originalExtension.extension) || []), (0, _toConsumableArray2["default"])((0, _reactCodemirror.getDefaultExtensions)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, originalExtension === null || originalExtension === void 0 ? void 0 : originalExtension.option), {}, {
theme: theme
}))))
}),
b: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modified), {}, {
extensions: [].concat((0, _toConsumableArray2["default"])((modifiedExtension === null || modifiedExtension === void 0 ? void 0 : modifiedExtension.extension) || []), (0, _toConsumableArray2["default"])((0, _reactCodemirror.getDefaultExtensions)((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modifiedExtension === null || modifiedExtension === void 0 ? void 0 : modifiedExtension.option), {}, {
theme: theme
}))))
}),
parent: editor.current
}, opts));
if (originalFrom) {
view.current.a.focus();
view.current.a.dispatch({
selection: {
anchor: originalFrom,
head: originalFrom
}
});
}
if (modifiedFrom) {
view.current.b.focus();
view.current.b.dispatch({
selection: {
anchor: modifiedFrom,
head: modifiedFrom
}
});
}
}
}, [view, theme, editor.current, original, modified, originalExtension, modifiedExtension, destroyRerender]);
(0, _react.useEffect)(function () {
return function () {
return view.current && view.current.destroy();
};
}, []);
(0, _react.useEffect)(function () {
if (view.current) {
var _opts = {};
if (otherStore.orientation !== orientation) {
_opts.orientation = orientation;
}
if (otherStore.revertControls !== revertControls) {
_opts.revertControls = revertControls;
}
if (otherStore.highlightChanges !== highlightChanges) {
_opts.highlightChanges = highlightChanges;
}
if (otherStore.gutter !== gutter) {
_opts.gutter = gutter;
}
if (otherStore.collapseUnchanged !== collapseUnchanged) {
_opts.collapseUnchanged = collapseUnchanged;
}
if (otherStore.renderRevertControl !== renderRevertControl) {
_opts.collapseUnchanged = collapseUnchanged;
}
if (Object.keys(_opts).length && dispatch && view.current) {
view.current.reconfigure((0, _objectSpread2["default"])({}, _opts));
dispatch((0, _objectSpread2["default"])({}, _opts));
}
}
}, [dispatch, view, orientation, revertControls, highlightChanges, gutter, collapseUnchanged, renderRevertControl]);
var defaultClassNames = 'cm-merge-theme';
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
ref: editor,
className: "".concat(defaultClassNames).concat(className ? " ".concat(className) : '')
}, elmProps), {}, {
children: children
}));
});
Internal.displayName = 'CodeMirrorMerge.Internal';