rich-text-editor
Version:
Rich text editor
121 lines (120 loc) • 5.32 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MathEditor;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const use_mathquill_1 = __importDefault(require("../../hooks/use-mathquill"));
const state_1 = __importDefault(require("../../state"));
const use_keyboard_events_1 = require("../../hooks/use-keyboard-events");
const styled_components_1 = __importDefault(require("styled-components"));
const Error = styled_components_1.default.span `
color: red;
font-family: sans-serif;
font-size: 16px;
left: 0;
padding: 5px 10px;
pointer-events: none;
position: absolute;
top: 0;
z-index: 2;
`;
const MathEditorElement = styled_components_1.default.div `
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);
display: flex;
margin: 10px 0 0;
position: relative;
width: 100%;
z-index: 1;
border-top: 3px solid #caedff;
`;
const MathEditorEquationField = styled_components_1.default.div `
background: #fff;
border: none;
padding: 5px 10px;
width: 50%;
`;
const MathEditorLatexField = styled_components_1.default.textarea `
border: none;
box-shadow: none;
font-size: 15px;
height: auto;
letter-spacing: 1px;
padding: 5px 10px;
resize: none;
width: 50%;
`;
function MathEditor(props) {
var _a;
const containerRef = (0, react_1.useRef)(null);
const [latex, setLatex] = (0, react_1.useState)((_a = props.initialLatex) !== null && _a !== void 0 ? _a : '');
const { undoEquation, redoEquation } = (0, state_1.default)();
const historyHandler = (fn) => () => {
const oldValue = latex;
const newValue = fn();
if (newValue !== undefined && newValue !== latex) {
onChange(oldValue, newValue);
}
};
(0, use_keyboard_events_1.useKeyboardEventListener)('z', true, historyHandler(undoEquation));
(0, use_keyboard_events_1.useKeyboardEventListener)('y', true, historyHandler(redoEquation));
const onChange = (oldValue, newValue) => {
var _a, _b;
if (oldValue === newValue)
return;
setLatex(newValue);
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
(_b = props.onLatexUpdate) === null || _b === void 0 ? void 0 : _b.call(props, newValue);
};
const { ref: latexRef, isError, mq } = (0, use_mathquill_1.default)({ latex, onChange, onEnter: props.onEnter });
(0, react_1.useEffect)(function signalOpenedMathEditor() {
var _a;
if (mq) {
mq.focus();
(_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, {
mq,
setLatex: (latex) => {
onChange(undefined, latex);
},
});
}
}, [mq]);
const handleBlur = (e) => {
var _a;
e.stopPropagation();
e.preventDefault();
// Don't trigger close event if clicked another element inside MathEditor
if (e.target && !((_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
close();
}
};
function close(forceCursorPosition) {
var _a;
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, latex, forceCursorPosition);
}
return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, "data-testid": "equation-editor", "data-latex": latex, children: (0, jsx_runtime_1.jsxs)(MathEditorElement, { className: "math-editor", onBlur: handleBlur, children: [(0, jsx_runtime_1.jsx)(MathEditorEquationField, { ref: latexRef, className: "math-editor-equation-field", onKeyDown: (e) => {
if (e.key === 'Tab' && e.shiftKey) {
e.preventDefault();
e.stopPropagation();
close('before');
}
else if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
close('after');
}
} }), (0, jsx_runtime_1.jsx)(MathEditorLatexField, { className: "math-editor-latex-field", placeholder: "LaTe\u03A7", rows: 1, value: latex, onChange: (e) => onChange(undefined, e.target.value), onKeyDown: (e) => {
if (e.key === 'Tab' && !e.shiftKey) {
e === null || e === void 0 ? void 0 : e.preventDefault();
e === null || e === void 0 ? void 0 : e.stopPropagation();
close('after');
}
else if (e.key === 'Escape') {
e === null || e === void 0 ? void 0 : e.preventDefault();
e === null || e === void 0 ? void 0 : e.stopPropagation();
close('after');
}
} }), isError && (0, jsx_runtime_1.jsx)(Error, { className: "render-error", children: props.errorText })] }) }));
}