@zzish/math-rich-input 0.1.17 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +39 -71
- package/package.json +1 -1
- package/src/AccentBar.jsx +0 -3
- package/src/EquationEditor.jsx +8 -9
- package/src/MathRichArea.jsx +46 -55
- package/src/MathRichInput.jsx +21 -44
- package/src/Toolbar.jsx +0 -4
package/dist/index.js
CHANGED
|
@@ -18947,18 +18947,18 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
|
|
|
18947
18947
|
_this.latexInput.focus();
|
|
18948
18948
|
|
|
18949
18949
|
var insertParams = getLatexInsertionParams(symbol);
|
|
18950
|
-
var insert = insertParams.latexWithMarks;
|
|
18951
|
-
console.log(
|
|
18952
|
-
console.log(
|
|
18953
|
-
console.log(
|
|
18954
|
-
|
|
18950
|
+
var insert = insertParams.latexWithMarks; // console.log("Insert params: ");
|
|
18951
|
+
// console.log(insertParams);
|
|
18952
|
+
// console.log(start + ":" + end);
|
|
18953
|
+
// console.log(oldLatex);
|
|
18954
|
+
// Move text before cursor into latex if double mark exists in latex
|
|
18955
18955
|
|
|
18956
18956
|
var pos = insert.indexOf("##");
|
|
18957
18957
|
|
|
18958
18958
|
if (pos >= 0) {
|
|
18959
18959
|
if (start !== end) {
|
|
18960
|
-
insert = insert.replace("##", oldLatex.substring(start, end));
|
|
18961
|
-
|
|
18960
|
+
insert = insert.replace("##", oldLatex.substring(start, end)); // console.log("insert: " + insert);
|
|
18961
|
+
|
|
18962
18962
|
oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
|
|
18963
18963
|
end = start;
|
|
18964
18964
|
} else if (start > 0) {
|
|
@@ -19005,10 +19005,9 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
|
|
|
19005
19005
|
_this.latexInput.focus();
|
|
19006
19006
|
});
|
|
19007
19007
|
} catch (error) {
|
|
19008
|
-
console.error(error);
|
|
19009
|
-
console.log("
|
|
19010
|
-
console.log("
|
|
19011
|
-
console.log("at: " + start + ":" + end);
|
|
19008
|
+
console.error(error); // console.log("Inserting: " + symbol);
|
|
19009
|
+
// console.log("into: " + this.latexInput.value);
|
|
19010
|
+
// console.log("at: " + start + ":" + end);
|
|
19012
19011
|
}
|
|
19013
19012
|
});
|
|
19014
19013
|
|
|
@@ -19242,7 +19241,6 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
|
|
|
19242
19241
|
value: function render() {
|
|
19243
19242
|
var _this2 = this;
|
|
19244
19243
|
|
|
19245
|
-
console.log("Rendering EquationEditor. Latex: " + this.state.latex);
|
|
19246
19244
|
var katexHtml = null;
|
|
19247
19245
|
var prettyLatex = null;
|
|
19248
19246
|
|
|
@@ -19718,7 +19716,6 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
|
|
|
19718
19716
|
_this.shouldUpdateReplaceCharacters = false;
|
|
19719
19717
|
var thisState = _this.state;
|
|
19720
19718
|
setTimeout(function () {
|
|
19721
|
-
// console.log("Focing update")
|
|
19722
19719
|
_this.setState(thisState);
|
|
19723
19720
|
}, 100);
|
|
19724
19721
|
} else {
|
|
@@ -19806,8 +19803,7 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
|
|
|
19806
19803
|
var allAccents = GLOBAL_default_accents;
|
|
19807
19804
|
var accentKey = this.props.keyPressed;
|
|
19808
19805
|
if (!this.isFullyMounted) accentKey = this.props.fetchAccentLetter();else if ((accentKey === "Backspace" || accentKey === "ArrowLeft" || accentKey === "ArrowRight") && !this.shouldUpdateReplaceCharacters) // Yes, this should indeed be a NOT
|
|
19809
|
-
accentKey = this.props.fetchAccentLetter();
|
|
19810
|
-
|
|
19806
|
+
accentKey = this.props.fetchAccentLetter();
|
|
19811
19807
|
var quickAccents = ACCENTS_FOR_LETTER[accentKey];
|
|
19812
19808
|
this.letterForAccents = accentKey;
|
|
19813
19809
|
if (quickAccents === null || quickAccents === undefined) quickAccents = []; // Set className
|
|
@@ -20279,7 +20275,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
20279
20275
|
});
|
|
20280
20276
|
|
|
20281
20277
|
_defineProperty(_assertThisInitialized(_this), "showAccentBar", function (event) {
|
|
20282
|
-
console.log("showAccentBar");
|
|
20283
20278
|
if (!_this.state.showAccents) _this.accentLetter = _this.suppliedAccentLetterFetcher();
|
|
20284
20279
|
|
|
20285
20280
|
_this.setState({
|
|
@@ -20290,8 +20285,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
20290
20285
|
});
|
|
20291
20286
|
|
|
20292
20287
|
_defineProperty(_assertThisInitialized(_this), "hideAccentBar", function (event) {
|
|
20293
|
-
console.log("hideAccentBar");
|
|
20294
|
-
|
|
20295
20288
|
_this.setState({
|
|
20296
20289
|
showAccents: false
|
|
20297
20290
|
});
|
|
@@ -20310,8 +20303,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
20310
20303
|
});
|
|
20311
20304
|
|
|
20312
20305
|
_defineProperty(_assertThisInitialized(_this), "handleAccentButtonClick", function (event, oldCharacter, newCharacter) {
|
|
20313
|
-
console.log("handleAccentButtonClick");
|
|
20314
|
-
|
|
20315
20306
|
_this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter); // this.hideAccentBar(null)
|
|
20316
20307
|
|
|
20317
20308
|
});
|
|
@@ -20389,7 +20380,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
20389
20380
|
_this$props$enableMat,
|
|
20390
20381
|
_this2 = this;
|
|
20391
20382
|
|
|
20392
|
-
console.log("Rendering toolbar");
|
|
20393
20383
|
this.suppliedClickHandler = this.props.onButtonClick;
|
|
20394
20384
|
this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
|
|
20395
20385
|
this.suppliedAccentLetterInserter = this.props.insertAccentLetter;
|
|
@@ -21446,7 +21436,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21446
21436
|
});
|
|
21447
21437
|
|
|
21448
21438
|
_defineProperty(_assertThisInitialized(_this2), "applyChangesToComponent", function (value, mimeType, rangeParams, isExpertMode, selectedTab) {
|
|
21449
|
-
|
|
21439
|
+
// if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
|
|
21450
21440
|
// if (mimeType === MIME_TYPE_HTML) {
|
|
21451
21441
|
// console.warn("Html found when outputTex=true")
|
|
21452
21442
|
// value = convertHtmlToPlainText(value)
|
|
@@ -21457,7 +21447,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21457
21447
|
// }
|
|
21458
21448
|
// }
|
|
21459
21449
|
// rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
|
|
21460
|
-
|
|
21461
21450
|
if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;else _this2.rangeParamsToSetAfterComponentUpdate = rangeParams;
|
|
21462
21451
|
var options = _this2.props.options || DEFAULT_OPTIONS;
|
|
21463
21452
|
if (isExpertMode === null) isExpertMode = options.isExpertMode;
|
|
@@ -21508,9 +21497,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21508
21497
|
});
|
|
21509
21498
|
|
|
21510
21499
|
_defineProperty(_assertThisInitialized(_this2), "undo", function () {
|
|
21511
|
-
console.log("undo");
|
|
21512
|
-
console.log(_this2.undoHistory);
|
|
21513
|
-
|
|
21514
21500
|
var currentState = _this2.undoHistory.pop();
|
|
21515
21501
|
|
|
21516
21502
|
var previousState = _this2.undoHistory.pop();
|
|
@@ -21524,8 +21510,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21524
21510
|
if (!_this2.deepEqual(redoLast, currentState)) _this2.redoHistory.push(currentState);
|
|
21525
21511
|
} else _this2.redoHistory.push(currentState);
|
|
21526
21512
|
|
|
21527
|
-
console.log(previousState);
|
|
21528
|
-
|
|
21529
21513
|
_this2.applyChangesToComponent(previousState.value, previousState.mimeType, previousState.rangeParams);
|
|
21530
21514
|
});
|
|
21531
21515
|
|
|
@@ -21539,8 +21523,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21539
21523
|
|
|
21540
21524
|
_defineProperty(_assertThisInitialized(_this2), "_setRangeParams", function (params) {
|
|
21541
21525
|
try {
|
|
21542
|
-
console.log("_setRangeParams");
|
|
21543
|
-
console.log(params);
|
|
21544
21526
|
setRangeParams(_this2.editableDiv, params);
|
|
21545
21527
|
|
|
21546
21528
|
_this2.setOldRangeParams(params);
|
|
@@ -21807,8 +21789,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21807
21789
|
|
|
21808
21790
|
if (offset === 0) {
|
|
21809
21791
|
if (_this2.nodeStartsWithSmallSpace(node)) {
|
|
21810
|
-
console.log("Offset = 0 and node starts with small space");
|
|
21811
|
-
|
|
21792
|
+
// console.log("Offset = 0 and node starts with small space");
|
|
21812
21793
|
var _new_index2 = -1;
|
|
21813
21794
|
|
|
21814
21795
|
var _new_offset2 = -1;
|
|
@@ -21841,7 +21822,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21841
21822
|
endNodeIndex: _new_index2,
|
|
21842
21823
|
endOffset: _new_offset2
|
|
21843
21824
|
};
|
|
21844
|
-
console.log(_new_rangeParams3);
|
|
21845
21825
|
|
|
21846
21826
|
_this2._setRangeParams(_new_rangeParams3);
|
|
21847
21827
|
|
|
@@ -21947,7 +21927,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
21947
21927
|
|
|
21948
21928
|
_defineProperty(_assertThisInitialized(_this2), "handleKeyDownEnter", function (e) {
|
|
21949
21929
|
try {
|
|
21950
|
-
console.log("handleKeyDownEnter");
|
|
21951
21930
|
if (_this2.enableMultiline()) _this2.insertNewLine(e);
|
|
21952
21931
|
} catch (error) {
|
|
21953
21932
|
console.error(error);
|
|
@@ -22091,7 +22070,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22091
22070
|
var _this = _assertThisInitialized(_this2);
|
|
22092
22071
|
|
|
22093
22072
|
setTimeout(function () {
|
|
22094
|
-
console.log(Date.now() - _this.keyPressStartTime);
|
|
22095
22073
|
if (_this.keyPressStartTime > 0) if (Date.now() - _this.keyPressStartTime > 450) _this.setState({
|
|
22096
22074
|
showAccentBar: true
|
|
22097
22075
|
});
|
|
@@ -22107,13 +22085,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22107
22085
|
var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
|
|
22108
22086
|
|
|
22109
22087
|
if (!_this2.editableDivIsPlainText()) {
|
|
22110
|
-
// console.log(params)
|
|
22111
22088
|
if (params.startNodeIndex === -1) {
|
|
22112
22089
|
console.error("Couldn't get range params");
|
|
22113
22090
|
return;
|
|
22114
|
-
}
|
|
22115
|
-
// console.log("End node: "+endNode)
|
|
22116
|
-
|
|
22091
|
+
}
|
|
22117
22092
|
|
|
22118
22093
|
if (isKatexNode(startNode) || isKatexNode(endNode)) {
|
|
22119
22094
|
console.error("User trying to edit inside latex node");
|
|
@@ -22534,12 +22509,16 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22534
22509
|
// this.markedRawText.substring(0,start_pos) +
|
|
22535
22510
|
// RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
|
|
22536
22511
|
// this.markedRawText.substring(end_pos + MARK.length)
|
|
22537
|
-
|
|
22538
|
-
|
|
22539
|
-
|
|
22540
|
-
|
|
22541
|
-
|
|
22542
|
-
|
|
22512
|
+
// console.log(
|
|
22513
|
+
// "Old cursor pos: " +
|
|
22514
|
+
// oldRangeParams.startNodeIndex +
|
|
22515
|
+
// "->" +
|
|
22516
|
+
// oldRangeParams.startOffset
|
|
22517
|
+
// );
|
|
22518
|
+
// console.log("Old raw text: " + this.props.value);
|
|
22519
|
+
// console.log("Old raw text length: " + this.props.value.length);
|
|
22520
|
+
// console.log("Old marked raw text:" + this.markedRawText);
|
|
22521
|
+
// console.log("New raw text: " + new_raw_text);
|
|
22543
22522
|
|
|
22544
22523
|
var new_rangeParams = _this2.getOldRangeParams();
|
|
22545
22524
|
|
|
@@ -22679,11 +22658,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22679
22658
|
new_rangeParams.startNodeIndex = rangeParams.startNodeIndex - 1;
|
|
22680
22659
|
new_rangeParams.startOffset = new_offset;
|
|
22681
22660
|
new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1;
|
|
22682
|
-
new_rangeParams.endOffset = new_offset;
|
|
22683
|
-
console.log(
|
|
22684
|
-
console.log(
|
|
22685
|
-
console.log(
|
|
22686
|
-
|
|
22661
|
+
new_rangeParams.endOffset = new_offset; // console.log("About to apply new range params");
|
|
22662
|
+
// console.log(new_rangeParams);
|
|
22663
|
+
// console.log("Old nodes");
|
|
22664
|
+
// console.log(this.editableDiv.childNodes);
|
|
22665
|
+
|
|
22687
22666
|
new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
|
|
22688
22667
|
|
|
22689
22668
|
_this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
|
|
@@ -22715,12 +22694,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22715
22694
|
new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
|
|
22716
22695
|
new_rangeParams.startOffset++;
|
|
22717
22696
|
new_rangeParams.endOffset++;
|
|
22718
|
-
}
|
|
22697
|
+
} // console.log("About to apply new range params");
|
|
22698
|
+
// console.log(new_rangeParams);
|
|
22699
|
+
// console.log("Old nodes");
|
|
22700
|
+
// console.log(this.editableDiv.childNodes);
|
|
22701
|
+
|
|
22719
22702
|
|
|
22720
|
-
console.log("About to apply new range params");
|
|
22721
|
-
console.log(new_rangeParams);
|
|
22722
|
-
console.log("Old nodes");
|
|
22723
|
-
console.log(_this2.editableDiv.childNodes);
|
|
22724
22703
|
new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
|
|
22725
22704
|
|
|
22726
22705
|
_this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
|
|
@@ -22731,8 +22710,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22731
22710
|
|
|
22732
22711
|
_defineProperty(_assertThisInitialized(_this2), "replaceNextLetter", function (new_char) {
|
|
22733
22712
|
try {
|
|
22734
|
-
console.log("Replace next letter");
|
|
22735
|
-
|
|
22736
22713
|
var rangeParams = _this2._getRangeParams();
|
|
22737
22714
|
|
|
22738
22715
|
var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
|
|
@@ -22917,7 +22894,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22917
22894
|
}, {
|
|
22918
22895
|
key: "setOldRangeParams",
|
|
22919
22896
|
value: function setOldRangeParams(params) {
|
|
22920
|
-
// console.log("Setting old range params: "+params.startNodeIndex+"->"+params.startOffset)
|
|
22921
22897
|
this.oldRangeParams = params;
|
|
22922
22898
|
}
|
|
22923
22899
|
}, {
|
|
@@ -22925,8 +22901,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22925
22901
|
value: function getOldRangeParams() {
|
|
22926
22902
|
if (this.oldRangeParams === null || this.oldRangeParams === undefined) return null;
|
|
22927
22903
|
|
|
22928
|
-
var params = _objectSpread2({}, this.oldRangeParams);
|
|
22929
|
-
|
|
22904
|
+
var params = _objectSpread2({}, this.oldRangeParams);
|
|
22930
22905
|
|
|
22931
22906
|
return params;
|
|
22932
22907
|
}
|
|
@@ -22934,10 +22909,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
22934
22909
|
key: "_getRangeParams",
|
|
22935
22910
|
value: function _getRangeParams() {
|
|
22936
22911
|
var editableDiv = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
|
|
22937
|
-
// console.log("_getRangeParams")
|
|
22938
22912
|
if (editableDiv === null) editableDiv = this.editableDiv;
|
|
22939
|
-
var rangeParams = getRangeParams(editableDiv);
|
|
22940
|
-
|
|
22913
|
+
var rangeParams = getRangeParams(editableDiv);
|
|
22941
22914
|
return rangeParams;
|
|
22942
22915
|
}
|
|
22943
22916
|
}, {
|
|
@@ -23001,10 +22974,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
|
|
|
23001
22974
|
value: function render() {
|
|
23002
22975
|
var _this3 = this;
|
|
23003
22976
|
|
|
23004
|
-
|
|
23005
|
-
|
|
23006
|
-
if (this.props.value === undefined) {
|
|
23007
|
-
console.error('MathRichInput must have prop called "text"');
|
|
22977
|
+
if (this.props.value == null) {
|
|
22978
|
+
console.error('MathRichInput must have prop called "value"');
|
|
23008
22979
|
console.log(this.props);
|
|
23009
22980
|
}
|
|
23010
22981
|
|
|
@@ -23088,7 +23059,6 @@ function getAllTextNodes(node) {
|
|
|
23088
23059
|
var render = node.getAttribute("data-render");
|
|
23089
23060
|
|
|
23090
23061
|
if (render !== null && render === "false") {
|
|
23091
|
-
console.log("Ignoring");
|
|
23092
23062
|
return nodes;
|
|
23093
23063
|
}
|
|
23094
23064
|
} else if (node.nodeType !== Node.DOCUMENT_NODE) {
|
|
@@ -23156,9 +23126,7 @@ var MathRichArea = /*#__PURE__*/function (_React$Component) {
|
|
|
23156
23126
|
}, {
|
|
23157
23127
|
key: "render",
|
|
23158
23128
|
value: function render() {
|
|
23159
|
-
|
|
23160
|
-
var html = rawTextToHtml(katex$1, this.props.children, this.props.mimeType); // console.log("html: "+html)
|
|
23161
|
-
|
|
23129
|
+
var html = rawTextToHtml(katex$1, this.props.children, this.props.mimeType);
|
|
23162
23130
|
return /*#__PURE__*/React__default['default'].createElement("span", {
|
|
23163
23131
|
dangerouslySetInnerHTML: {
|
|
23164
23132
|
__html: html
|
package/package.json
CHANGED
package/src/AccentBar.jsx
CHANGED
|
@@ -663,7 +663,6 @@ export default class AccentBar extends React.Component {
|
|
|
663
663
|
this.shouldUpdateReplaceCharacters = false;
|
|
664
664
|
let thisState = this.state;
|
|
665
665
|
setTimeout(() => {
|
|
666
|
-
// console.log("Focing update")
|
|
667
666
|
this.setState(thisState);
|
|
668
667
|
}, 100);
|
|
669
668
|
} else {
|
|
@@ -692,8 +691,6 @@ export default class AccentBar extends React.Component {
|
|
|
692
691
|
// Yes, this should indeed be a NOT
|
|
693
692
|
accentKey = this.props.fetchAccentLetter();
|
|
694
693
|
|
|
695
|
-
// console.log("Accent key:"+accentKey)
|
|
696
|
-
|
|
697
694
|
let quickAccents = ACCENTS_FOR_LETTER[accentKey];
|
|
698
695
|
this.letterForAccents = accentKey;
|
|
699
696
|
if (quickAccents === null || quickAccents === undefined) quickAccents = [];
|
package/src/EquationEditor.jsx
CHANGED
|
@@ -212,17 +212,17 @@ export default class EquationEditor extends React.Component {
|
|
|
212
212
|
|
|
213
213
|
let insertParams = getLatexInsertionParams(symbol);
|
|
214
214
|
let insert = insertParams.latexWithMarks;
|
|
215
|
-
console.log("Insert params: ");
|
|
216
|
-
console.log(insertParams);
|
|
217
|
-
console.log(start + ":" + end);
|
|
218
|
-
console.log(oldLatex);
|
|
215
|
+
// console.log("Insert params: ");
|
|
216
|
+
// console.log(insertParams);
|
|
217
|
+
// console.log(start + ":" + end);
|
|
218
|
+
// console.log(oldLatex);
|
|
219
219
|
|
|
220
220
|
// Move text before cursor into latex if double mark exists in latex
|
|
221
221
|
let pos = insert.indexOf("##");
|
|
222
222
|
if (pos >= 0) {
|
|
223
223
|
if (start !== end) {
|
|
224
224
|
insert = insert.replace("##", oldLatex.substring(start, end));
|
|
225
|
-
console.log("insert: " + insert);
|
|
225
|
+
// console.log("insert: " + insert);
|
|
226
226
|
oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
|
|
227
227
|
end = start;
|
|
228
228
|
} else if (start > 0) {
|
|
@@ -278,9 +278,9 @@ export default class EquationEditor extends React.Component {
|
|
|
278
278
|
});
|
|
279
279
|
} catch (error) {
|
|
280
280
|
console.error(error);
|
|
281
|
-
console.log("Inserting: " + symbol);
|
|
282
|
-
console.log("into: " + this.latexInput.value);
|
|
283
|
-
console.log("at: " + start + ":" + end);
|
|
281
|
+
// console.log("Inserting: " + symbol);
|
|
282
|
+
// console.log("into: " + this.latexInput.value);
|
|
283
|
+
// console.log("at: " + start + ":" + end);
|
|
284
284
|
}
|
|
285
285
|
};
|
|
286
286
|
|
|
@@ -410,7 +410,6 @@ export default class EquationEditor extends React.Component {
|
|
|
410
410
|
};
|
|
411
411
|
|
|
412
412
|
render() {
|
|
413
|
-
console.log("Rendering EquationEditor. Latex: " + this.state.latex);
|
|
414
413
|
let katexHtml = null;
|
|
415
414
|
let prettyLatex = null;
|
|
416
415
|
if (this.props.useExpertMode) {
|
package/src/MathRichArea.jsx
CHANGED
|
@@ -1,108 +1,99 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
3
|
import katex from "katex";
|
|
4
|
-
import {setupKatex} from "./katexHelper"
|
|
5
|
-
import {rawTextToHtml} from
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
import { setupKatex } from "./katexHelper";
|
|
5
|
+
import { rawTextToHtml } from "./mathRichInputHelper";
|
|
6
|
+
import {
|
|
7
|
+
MIME_TYPE_TEX,
|
|
8
|
+
MIME_TYPE_HTML,
|
|
9
|
+
MIME_TYPE_ZZISH_HTML_MATH,
|
|
10
|
+
isTextLatexMath,
|
|
11
|
+
isTextHtml,
|
|
12
|
+
isTextHtmlMath,
|
|
13
|
+
} from "./mimeTypeHelper";
|
|
14
|
+
|
|
15
|
+
function getAllTextNodes(node, nodes = null) {
|
|
11
16
|
if (node === null) {
|
|
12
|
-
console.warn("Deverloper supplied a null node. Ignoring")
|
|
13
|
-
return nodes
|
|
17
|
+
console.warn("Deverloper supplied a null node. Ignoring");
|
|
18
|
+
return nodes;
|
|
14
19
|
}
|
|
15
20
|
|
|
16
21
|
if (nodes === null) {
|
|
17
|
-
nodes = []
|
|
22
|
+
nodes = [];
|
|
18
23
|
}
|
|
19
24
|
|
|
20
25
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
21
|
-
nodes.push(node)
|
|
22
|
-
return nodes
|
|
26
|
+
nodes.push(node);
|
|
27
|
+
return nodes;
|
|
23
28
|
}
|
|
24
29
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
25
30
|
if (node.className === "katex" || node.className === "MathRichInput")
|
|
26
|
-
return nodes
|
|
27
|
-
if (node.tagName === "SCRIPT")
|
|
28
|
-
|
|
29
|
-
let render = node.getAttribute("data-render")
|
|
31
|
+
return nodes;
|
|
32
|
+
if (node.tagName === "SCRIPT") return nodes;
|
|
33
|
+
let render = node.getAttribute("data-render");
|
|
30
34
|
if (render !== null && render === "false") {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
35
|
+
return nodes;
|
|
36
|
+
}
|
|
34
37
|
} else if (node.nodeType !== Node.DOCUMENT_NODE) {
|
|
35
|
-
return nodes
|
|
38
|
+
return nodes;
|
|
36
39
|
}
|
|
37
40
|
|
|
38
|
-
if (node.childNodes === null || node.childNodes === undefined)
|
|
39
|
-
return nodes
|
|
41
|
+
if (node.childNodes === null || node.childNodes === undefined) return nodes;
|
|
40
42
|
|
|
41
43
|
for (let i = 0; i < node.childNodes.length; i++)
|
|
42
|
-
getAllTextNodes(node.childNodes[i], nodes)
|
|
44
|
+
getAllTextNodes(node.childNodes[i], nodes);
|
|
43
45
|
|
|
44
|
-
return nodes
|
|
46
|
+
return nodes;
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
export function renderMathInNode(node) {
|
|
48
50
|
try {
|
|
49
|
-
let textNodes = getAllTextNodes(node)
|
|
51
|
+
let textNodes = getAllTextNodes(node);
|
|
50
52
|
for (let i = 0; i < textNodes.length; i++) {
|
|
51
53
|
try {
|
|
52
|
-
const text = textNodes[i].nodeValue
|
|
53
|
-
|
|
54
|
-
let mime_type = null
|
|
55
|
-
if (isTextHtmlMath(text))
|
|
56
|
-
|
|
57
|
-
else if (
|
|
58
|
-
mime_type = MIME_TYPE_HTML
|
|
59
|
-
else if (isTextLatexMath(text))
|
|
60
|
-
mime_type = MIME_TYPE_TEX
|
|
54
|
+
const text = textNodes[i].nodeValue;
|
|
55
|
+
|
|
56
|
+
let mime_type = null;
|
|
57
|
+
if (isTextHtmlMath(text)) mime_type = MIME_TYPE_ZZISH_HTML_MATH;
|
|
58
|
+
else if (isTextHtml(text)) mime_type = MIME_TYPE_HTML;
|
|
59
|
+
else if (isTextLatexMath(text)) mime_type = MIME_TYPE_TEX;
|
|
61
60
|
|
|
62
61
|
if (mime_type !== null) {
|
|
63
|
-
const html = rawTextToHtml(katex, text, mime_type)
|
|
64
|
-
const new_node = document.createElement("span")
|
|
65
|
-
new_node.innerHTML = html
|
|
66
|
-
textNodes[i].replaceWith(new_node)
|
|
62
|
+
const html = rawTextToHtml(katex, text, mime_type);
|
|
63
|
+
const new_node = document.createElement("span");
|
|
64
|
+
new_node.innerHTML = html;
|
|
65
|
+
textNodes[i].replaceWith(new_node);
|
|
67
66
|
}
|
|
68
67
|
} catch (error) {
|
|
69
|
-
console.log(error)
|
|
68
|
+
console.log(error);
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
} catch (error) {
|
|
73
|
-
console.log(error)
|
|
72
|
+
console.log(error);
|
|
74
73
|
}
|
|
75
74
|
}
|
|
76
75
|
|
|
77
76
|
export function renderMathInNodeArray(nodes) {
|
|
78
|
-
for (let i = 0; i < nodes.length; i++)
|
|
79
|
-
renderMathInNode(nodes[i])
|
|
77
|
+
for (let i = 0; i < nodes.length; i++) renderMathInNode(nodes[i]);
|
|
80
78
|
}
|
|
81
79
|
|
|
82
80
|
export default class MathRichArea extends React.Component {
|
|
83
|
-
|
|
84
81
|
constructor(props) {
|
|
85
82
|
super(props);
|
|
86
|
-
this.state = {
|
|
87
|
-
};
|
|
83
|
+
this.state = {};
|
|
88
84
|
}
|
|
89
85
|
|
|
90
86
|
componentDidMount() {
|
|
91
87
|
try {
|
|
92
|
-
setupKatex()
|
|
88
|
+
setupKatex();
|
|
93
89
|
} catch (error) {
|
|
94
|
-
console.error(error)
|
|
90
|
+
console.error(error);
|
|
95
91
|
}
|
|
96
92
|
}
|
|
97
93
|
|
|
98
94
|
render() {
|
|
99
|
-
|
|
100
|
-
let html = rawTextToHtml(katex, this.props.children, this.props.mimeType)
|
|
101
|
-
// console.log("html: "+html)
|
|
95
|
+
let html = rawTextToHtml(katex, this.props.children, this.props.mimeType);
|
|
102
96
|
|
|
103
|
-
return <span dangerouslySetInnerHTML={{__html: html}}></span
|
|
97
|
+
return <span dangerouslySetInnerHTML={{ __html: html }}></span>;
|
|
104
98
|
}
|
|
105
99
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
package/src/MathRichInput.jsx
CHANGED
|
@@ -188,8 +188,6 @@ export default class MathRichInput extends React.Component {
|
|
|
188
188
|
isExpertMode,
|
|
189
189
|
selectedTab
|
|
190
190
|
) => {
|
|
191
|
-
console.log("applyChangesToComponent");
|
|
192
|
-
|
|
193
191
|
// if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
|
|
194
192
|
// if (mimeType === MIME_TYPE_HTML) {
|
|
195
193
|
// console.warn("Html found when outputTex=true")
|
|
@@ -253,8 +251,6 @@ export default class MathRichInput extends React.Component {
|
|
|
253
251
|
};
|
|
254
252
|
|
|
255
253
|
undo = () => {
|
|
256
|
-
console.log("undo");
|
|
257
|
-
console.log(this.undoHistory);
|
|
258
254
|
const currentState = this.undoHistory.pop();
|
|
259
255
|
|
|
260
256
|
let previousState = this.undoHistory.pop();
|
|
@@ -268,8 +264,6 @@ export default class MathRichInput extends React.Component {
|
|
|
268
264
|
this.redoHistory.push(currentState);
|
|
269
265
|
} else this.redoHistory.push(currentState);
|
|
270
266
|
|
|
271
|
-
console.log(previousState);
|
|
272
|
-
|
|
273
267
|
this.applyChangesToComponent(
|
|
274
268
|
previousState.value,
|
|
275
269
|
previousState.mimeType,
|
|
@@ -289,7 +283,6 @@ export default class MathRichInput extends React.Component {
|
|
|
289
283
|
};
|
|
290
284
|
|
|
291
285
|
setOldRangeParams(params) {
|
|
292
|
-
// console.log("Setting old range params: "+params.startNodeIndex+"->"+params.startOffset)
|
|
293
286
|
this.oldRangeParams = params;
|
|
294
287
|
}
|
|
295
288
|
|
|
@@ -297,24 +290,18 @@ export default class MathRichInput extends React.Component {
|
|
|
297
290
|
if (this.oldRangeParams === null || this.oldRangeParams === undefined)
|
|
298
291
|
return null;
|
|
299
292
|
let params = { ...this.oldRangeParams };
|
|
300
|
-
// console.log("Getting old range params: "+params.startNodeIndex+"->"+params.startOffset)
|
|
301
293
|
return params;
|
|
302
294
|
}
|
|
303
295
|
|
|
304
296
|
_getRangeParams(editableDiv = null) {
|
|
305
|
-
// console.log("_getRangeParams")
|
|
306
297
|
if (editableDiv === null) editableDiv = this.editableDiv;
|
|
307
298
|
let rangeParams = getRangeParams(editableDiv);
|
|
308
|
-
// console.log(rangeParams)
|
|
309
299
|
return rangeParams;
|
|
310
300
|
}
|
|
311
301
|
|
|
312
302
|
_setRangeParams = (params) => {
|
|
313
303
|
try {
|
|
314
|
-
console.log("_setRangeParams");
|
|
315
|
-
console.log(params);
|
|
316
304
|
setRangeParams(this.editableDiv, params);
|
|
317
|
-
|
|
318
305
|
this.setOldRangeParams(params);
|
|
319
306
|
this.lastSetRangeParmas = params;
|
|
320
307
|
} catch (error) {
|
|
@@ -625,7 +612,7 @@ export default class MathRichInput extends React.Component {
|
|
|
625
612
|
// Deal with case of inserted small space at start of <p> element
|
|
626
613
|
if (offset === 0) {
|
|
627
614
|
if (this.nodeStartsWithSmallSpace(node)) {
|
|
628
|
-
console.log("Offset = 0 and node starts with small space");
|
|
615
|
+
// console.log("Offset = 0 and node starts with small space");
|
|
629
616
|
let new_index = -1;
|
|
630
617
|
let new_offset = -1;
|
|
631
618
|
|
|
@@ -654,7 +641,6 @@ export default class MathRichInput extends React.Component {
|
|
|
654
641
|
endNodeIndex: new_index,
|
|
655
642
|
endOffset: new_offset,
|
|
656
643
|
};
|
|
657
|
-
console.log(new_rangeParams);
|
|
658
644
|
this._setRangeParams(new_rangeParams);
|
|
659
645
|
|
|
660
646
|
e.preventDefault();
|
|
@@ -786,7 +772,6 @@ export default class MathRichInput extends React.Component {
|
|
|
786
772
|
|
|
787
773
|
handleKeyDownEnter = (e) => {
|
|
788
774
|
try {
|
|
789
|
-
console.log("handleKeyDownEnter");
|
|
790
775
|
if (this.enableMultiline()) this.insertNewLine(e);
|
|
791
776
|
} catch (error) {
|
|
792
777
|
console.error(error);
|
|
@@ -956,7 +941,6 @@ export default class MathRichInput extends React.Component {
|
|
|
956
941
|
) {
|
|
957
942
|
let _this = this;
|
|
958
943
|
setTimeout(function () {
|
|
959
|
-
console.log(Date.now() - _this.keyPressStartTime);
|
|
960
944
|
if (_this.keyPressStartTime > 0)
|
|
961
945
|
if (Date.now() - _this.keyPressStartTime > 450)
|
|
962
946
|
_this.setState({ showAccentBar: true });
|
|
@@ -969,14 +953,10 @@ export default class MathRichInput extends React.Component {
|
|
|
969
953
|
let startNode = this._findNodeWithIndex(params.startNodeIndex);
|
|
970
954
|
let endNode = this._findNodeWithIndex(params.endNodeIndex);
|
|
971
955
|
if (!this.editableDivIsPlainText()) {
|
|
972
|
-
// console.log(params)
|
|
973
956
|
if (params.startNodeIndex === -1) {
|
|
974
957
|
console.error("Couldn't get range params");
|
|
975
958
|
return;
|
|
976
959
|
}
|
|
977
|
-
// console.log("Start node: "+startNode)
|
|
978
|
-
// console.log("End node: "+endNode)
|
|
979
|
-
|
|
980
960
|
if (isKatexNode(startNode) || isKatexNode(endNode)) {
|
|
981
961
|
console.error("User trying to edit inside latex node");
|
|
982
962
|
e.preventDefault();
|
|
@@ -1473,16 +1453,16 @@ export default class MathRichInput extends React.Component {
|
|
|
1473
1453
|
// RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
|
|
1474
1454
|
// this.markedRawText.substring(end_pos + MARK.length)
|
|
1475
1455
|
|
|
1476
|
-
console.log(
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
);
|
|
1482
|
-
console.log("Old raw text: " + this.props.value);
|
|
1483
|
-
console.log("Old raw text length: " + this.props.value.length);
|
|
1484
|
-
console.log("Old marked raw text:" + this.markedRawText);
|
|
1485
|
-
console.log("New raw text: " + new_raw_text);
|
|
1456
|
+
// console.log(
|
|
1457
|
+
// "Old cursor pos: " +
|
|
1458
|
+
// oldRangeParams.startNodeIndex +
|
|
1459
|
+
// "->" +
|
|
1460
|
+
// oldRangeParams.startOffset
|
|
1461
|
+
// );
|
|
1462
|
+
// console.log("Old raw text: " + this.props.value);
|
|
1463
|
+
// console.log("Old raw text length: " + this.props.value.length);
|
|
1464
|
+
// console.log("Old marked raw text:" + this.markedRawText);
|
|
1465
|
+
// console.log("New raw text: " + new_raw_text);
|
|
1486
1466
|
|
|
1487
1467
|
let new_rangeParams = this.getOldRangeParams();
|
|
1488
1468
|
if (this.moveCursorOnInsert) {
|
|
@@ -1658,10 +1638,10 @@ export default class MathRichInput extends React.Component {
|
|
|
1658
1638
|
new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1;
|
|
1659
1639
|
new_rangeParams.endOffset = new_offset;
|
|
1660
1640
|
|
|
1661
|
-
console.log("About to apply new range params");
|
|
1662
|
-
console.log(new_rangeParams);
|
|
1663
|
-
console.log("Old nodes");
|
|
1664
|
-
console.log(this.editableDiv.childNodes);
|
|
1641
|
+
// console.log("About to apply new range params");
|
|
1642
|
+
// console.log(new_rangeParams);
|
|
1643
|
+
// console.log("Old nodes");
|
|
1644
|
+
// console.log(this.editableDiv.childNodes);
|
|
1665
1645
|
|
|
1666
1646
|
new_raw_text = removeEncodingIfPlainText(
|
|
1667
1647
|
new_raw_text,
|
|
@@ -1713,10 +1693,10 @@ export default class MathRichInput extends React.Component {
|
|
|
1713
1693
|
new_rangeParams.endOffset++;
|
|
1714
1694
|
}
|
|
1715
1695
|
|
|
1716
|
-
console.log("About to apply new range params");
|
|
1717
|
-
console.log(new_rangeParams);
|
|
1718
|
-
console.log("Old nodes");
|
|
1719
|
-
console.log(this.editableDiv.childNodes);
|
|
1696
|
+
// console.log("About to apply new range params");
|
|
1697
|
+
// console.log(new_rangeParams);
|
|
1698
|
+
// console.log("Old nodes");
|
|
1699
|
+
// console.log(this.editableDiv.childNodes);
|
|
1720
1700
|
|
|
1721
1701
|
new_raw_text = removeEncodingIfPlainText(
|
|
1722
1702
|
new_raw_text,
|
|
@@ -1738,7 +1718,6 @@ export default class MathRichInput extends React.Component {
|
|
|
1738
1718
|
|
|
1739
1719
|
replaceNextLetter = (new_char) => {
|
|
1740
1720
|
try {
|
|
1741
|
-
console.log("Replace next letter");
|
|
1742
1721
|
let rangeParams = this._getRangeParams();
|
|
1743
1722
|
let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
|
|
1744
1723
|
let offset = rangeParams.endOffset + 1; // next letter
|
|
@@ -1855,10 +1834,8 @@ export default class MathRichInput extends React.Component {
|
|
|
1855
1834
|
};
|
|
1856
1835
|
|
|
1857
1836
|
render() {
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
if (this.props.value === undefined) {
|
|
1861
|
-
console.error('MathRichInput must have prop called "text"');
|
|
1837
|
+
if (this.props.value == null) {
|
|
1838
|
+
console.error('MathRichInput must have prop called "value"');
|
|
1862
1839
|
console.log(this.props);
|
|
1863
1840
|
}
|
|
1864
1841
|
|
package/src/Toolbar.jsx
CHANGED
|
@@ -38,7 +38,6 @@ export default class Toolbar extends React.Component {
|
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
showAccentBar = (event) => {
|
|
41
|
-
console.log("showAccentBar");
|
|
42
41
|
if (!this.state.showAccents)
|
|
43
42
|
this.accentLetter = this.suppliedAccentLetterFetcher();
|
|
44
43
|
this.setState({ showAccents: true });
|
|
@@ -46,7 +45,6 @@ export default class Toolbar extends React.Component {
|
|
|
46
45
|
};
|
|
47
46
|
|
|
48
47
|
hideAccentBar = (event) => {
|
|
49
|
-
console.log("hideAccentBar");
|
|
50
48
|
this.setState({ showAccents: false });
|
|
51
49
|
};
|
|
52
50
|
|
|
@@ -61,7 +59,6 @@ export default class Toolbar extends React.Component {
|
|
|
61
59
|
};
|
|
62
60
|
|
|
63
61
|
handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
|
|
64
|
-
console.log("handleAccentButtonClick");
|
|
65
62
|
this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter);
|
|
66
63
|
// this.hideAccentBar(null)
|
|
67
64
|
};
|
|
@@ -123,7 +120,6 @@ export default class Toolbar extends React.Component {
|
|
|
123
120
|
}
|
|
124
121
|
|
|
125
122
|
render() {
|
|
126
|
-
console.log("Rendering toolbar");
|
|
127
123
|
this.suppliedClickHandler = this.props.onButtonClick;
|
|
128
124
|
this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
|
|
129
125
|
this.suppliedAccentLetterInserter = this.props.insertAccentLetter;
|