@zzish/math-rich-input 0.1.47 → 0.1.48

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.
Files changed (5) hide show
  1. package/dist/index.js +60 -31
  2. package/dist/math-rich-input.css +1 -1
  3. package/package.json +1 -1
  4. package/src/MathRichInput.jsx +63 -34
  5. package/dist/index.css +0 -1
package/dist/index.js CHANGED
@@ -22345,36 +22345,45 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
22345
22345
  }
22346
22346
  });
22347
22347
  _defineProperty(_this2, "handlePaste", function (event) {
22348
- var clipboardData = event.clipboardData || window.clipboardData;
22349
- if (clipboardData === null || clipboardData === undefined) {
22350
- console.warn("handlePaste called, but no clipboard data");
22351
- return;
22352
- }
22353
- // for (let i = 0; i < clipboardData.types.length; i++)
22354
- // console.log(
22355
- // clipboardData.types[i] +
22356
- // ": " +
22357
- // clipboardData.getData(clipboardData.types[i])
22358
- // );
22359
- var pasteHtml = clipboardData.getData("text/html");
22360
- if (pasteHtml !== null && pasteHtml.length > 0) {
22361
- // console.log("** Paste html");
22362
- // console.log(pasteHtml);
22363
- pasteHtml = sanitiseHtml(pasteHtml);
22364
- // console.log("** Santised paste html");
22365
- // console.log(pasteHtml);
22366
- _this2.insertHtml(pasteHtml);
22348
+ try {
22349
+ var clipboardData = event.clipboardData || window.clipboardData;
22350
+ if (!clipboardData) {
22351
+ return;
22352
+ }
22367
22353
  event.preventDefault();
22368
- } else {
22369
- var paste = clipboardData.getData("text");
22354
+ var pasteHtml = clipboardData.getData('text/html');
22355
+ var pasteText = clipboardData.getData('text/plain');
22370
22356
  var selection = window.getSelection();
22371
22357
  if (!selection.rangeCount) {
22372
- console.warn("handlePaste called, but unable to get selection");
22373
- return false;
22358
+ return;
22374
22359
  }
22375
- event.preventDefault();
22376
22360
  selection.deleteFromDocument();
22377
- _this2.insertRawText(paste);
22361
+ if (pasteHtml && pasteHtml.length > 0) {
22362
+ var markerId = "__PASTE_MARKER_".concat(Date.now(), "_").concat(Math.floor(Math.random() * 10000), "__");
22363
+ var markerStart = "<span id='".concat(markerId, "_START'></span>");
22364
+ var markerEnd = "<span id='".concat(markerId, "_END'></span>");
22365
+ var markedHtml = markerStart + pasteHtml + markerEnd;
22366
+ if (typeof sanitiseHtml === 'function') {
22367
+ markedHtml = sanitiseHtml(markedHtml);
22368
+ }
22369
+ _this2._pendingPasteMarkerId = markerId;
22370
+ document.execCommand('insertHTML', false, markedHtml);
22371
+ setTimeout(function () {
22372
+ try {
22373
+ var rawText = elementToMarkedRawText(_this2.editableDiv, null, -1, _this2.enableHtml());
22374
+ var nodeCounts = _this2._countNodeTypes();
22375
+ var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
22376
+ var cleanedRawText = removeEncodingIfPlainText(rawText, mimeType, _this2.enableHtml());
22377
+ _this2.applyChangesToComponent(cleanedRawText, mimeType, _this2._getRangeParams(), _this2.props.useExpertMode, _this2.props.selectedTab);
22378
+ } catch (err) {
22379
+ console.error(err);
22380
+ }
22381
+ }, 0);
22382
+ } else if (pasteText && pasteText.length > 0) {
22383
+ _this2.insertRawText(pasteText);
22384
+ }
22385
+ } catch (error) {
22386
+ console.error(error);
22378
22387
  }
22379
22388
  });
22380
22389
  _defineProperty(_this2, "showEquationEditor", function () {
@@ -22676,7 +22685,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
22676
22685
  }
22677
22686
  });
22678
22687
  _defineProperty(_this2, "insertRawText", function (new_text) {
22679
- var selectInsertedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
22688
+ var selectInsertedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
22680
22689
  try {
22681
22690
  var rangeParams = _this2._getRangeParams();
22682
22691
  var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
@@ -22739,10 +22748,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
22739
22748
  // Preserve the selection
22740
22749
  if (lastNode) {
22741
22750
  range = range.cloneRange();
22742
- range.setStartAfter(lastNode);
22743
22751
  if (selectPastedContent) {
22744
22752
  range.setStartBefore(firstNode);
22753
+ range.setEndAfter(lastNode);
22745
22754
  } else {
22755
+ range.setStartAfter(lastNode);
22746
22756
  range.collapse(true);
22747
22757
  }
22748
22758
  sel.removeAllRanges();
@@ -22762,10 +22772,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
22762
22772
  }
22763
22773
  });
22764
22774
  _defineProperty(_this2, "insertHtml", function (new_html) {
22775
+ var selectPastedContent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
22765
22776
  try {
22766
22777
  // console.log("New html: "+new_html)
22767
22778
  // console.log("inserting: "+new_html)
22768
- _this2.pasteHtmlAtCaret(new_html, true);
22779
+ _this2.pasteHtmlAtCaret(new_html, selectPastedContent);
22769
22780
  var new_rangeParams = null;
22770
22781
  // console.log("New range params: ")
22771
22782
  try {
@@ -22988,7 +22999,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
22988
22999
  subscript: false,
22989
23000
  superscript: false
22990
23001
  },
22991
- keyPressed: ""
23002
+ keyPressed: "",
23003
+ pendingHtmlWithMarker: null
22992
23004
  };
22993
23005
 
22994
23006
  // this.handleInput = this.handleInput.bind(this);
@@ -23150,7 +23162,24 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
23150
23162
  key: "componentDidUpdate",
23151
23163
  value: function componentDidUpdate() {
23152
23164
  try {
23153
- // console.log("componentDidUpdate")
23165
+ if (this._pendingPasteMarkerId) {
23166
+ var start = document.getElementById("".concat(this._pendingPasteMarkerId, "_START"));
23167
+ var end = document.getElementById("".concat(this._pendingPasteMarkerId, "_END"));
23168
+ if (start && end) {
23169
+ var range = document.createRange();
23170
+ range.setStartAfter(start);
23171
+ range.setEndBefore(end);
23172
+ var sel = window.getSelection();
23173
+ sel.removeAllRanges();
23174
+ sel.addRange(range);
23175
+ start.parentNode && start.parentNode.removeChild(start);
23176
+ end.parentNode && end.parentNode.removeChild(end);
23177
+ }
23178
+ this._pendingPasteMarkerId = null;
23179
+ this.setState({
23180
+ pendingHtmlWithMarker: null
23181
+ });
23182
+ }
23154
23183
  if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined && this.afterComponentUpdateData.value === this.props.value) {
23155
23184
  this._setRangeParams(this.afterComponentUpdateData.rangeParams);
23156
23185
  this.afterComponentUpdateData = null;
@@ -23241,7 +23270,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
23241
23270
  onCompositionStart: this.handleCompositionStart,
23242
23271
  onCompositionEnd: this.handleCompositionEnd,
23243
23272
  dangerouslySetInnerHTML: {
23244
- __html: html
23273
+ __html: this.state.pendingHtmlWithMarker || html
23245
23274
  },
23246
23275
  "data-placeholder": this.props.placeholder || ""
23247
23276
  }))), this.state.showEquationEditor && /*#__PURE__*/React__default["default"].createElement(EquationEditorModal, {
package/dist/math-rich-input.css CHANGED
@@ -1 +1 @@
1
- .SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}
1
+ .SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;-webkit-transition:.4s;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zzish/math-rich-input",
3
- "version": "0.1.47",
3
+ "version": "0.1.48",
4
4
  "description": "React component for user to enter rich text with embedded math equations.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/MathRichInput.jsx CHANGED
@@ -166,6 +166,7 @@ export default class MathRichInput extends React.Component {
166
166
  superscript: false,
167
167
  },
168
168
  keyPressed: "",
169
+ pendingHtmlWithMarker: null,
169
170
  };
170
171
 
171
172
  // this.handleInput = this.handleInput.bind(this);
@@ -1194,38 +1195,49 @@ export default class MathRichInput extends React.Component {
1194
1195
  };
1195
1196
 
1196
1197
  handlePaste = (event) => {
1198
+ try {
1197
1199
  let clipboardData = event.clipboardData || window.clipboardData;
1198
- if (clipboardData === null || clipboardData === undefined) {
1199
- console.warn("handlePaste called, but no clipboard data");
1200
+ if (!clipboardData) {
1201
+ return;
1202
+ }
1203
+ event.preventDefault();
1204
+ let pasteHtml = clipboardData.getData('text/html');
1205
+ let pasteText = clipboardData.getData('text/plain');
1206
+ const selection = window.getSelection();
1207
+ if (!selection.rangeCount) {
1200
1208
  return;
1201
1209
  }
1202
- // for (let i = 0; i < clipboardData.types.length; i++)
1203
- // console.log(
1204
- // clipboardData.types[i] +
1205
- // ": " +
1206
- // clipboardData.getData(clipboardData.types[i])
1207
- // );
1208
- let pasteHtml = clipboardData.getData("text/html");
1209
- if (pasteHtml !== null && pasteHtml.length > 0) {
1210
- // console.log("** Paste html");
1211
- // console.log(pasteHtml);
1212
- pasteHtml = sanitiseHtml(pasteHtml);
1213
- // console.log("** Santised paste html");
1214
- // console.log(pasteHtml);
1215
- this.insertHtml(pasteHtml);
1216
- event.preventDefault();
1217
- } else {
1218
- let paste = clipboardData.getData("text");
1219
- const selection = window.getSelection();
1220
- if (!selection.rangeCount) {
1221
- console.warn("handlePaste called, but unable to get selection");
1222
- return false;
1210
+ selection.deleteFromDocument();
1211
+ if (pasteHtml && pasteHtml.length > 0) {
1212
+ const markerId = `__PASTE_MARKER_${Date.now()}_${Math.floor(Math.random()*10000)}__`;
1213
+ const markerStart = `<span id='${markerId}_START'></span>`;
1214
+ const markerEnd = `<span id='${markerId}_END'></span>`;
1215
+ let markedHtml = markerStart + pasteHtml + markerEnd;
1216
+ if (typeof sanitiseHtml === 'function') {
1217
+ markedHtml = sanitiseHtml(markedHtml);
1223
1218
  }
1224
- event.preventDefault();
1225
- selection.deleteFromDocument();
1226
- this.insertRawText(paste);
1219
+ this._pendingPasteMarkerId = markerId;
1220
+ document.execCommand('insertHTML', false, markedHtml);
1221
+ setTimeout(() => {
1222
+ try {
1223
+ const rawText = elementToMarkedRawText(this.editableDiv, null, -1, this.enableHtml());
1224
+ let nodeCounts = this._countNodeTypes();
1225
+ let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
1226
+ const cleanedRawText = removeEncodingIfPlainText(rawText, mimeType, this.enableHtml());
1227
+ this.applyChangesToComponent(cleanedRawText, mimeType, this._getRangeParams(), this.props.useExpertMode, this.props.selectedTab);
1228
+ } catch (err) {
1229
+ console.error(err);
1230
+ }
1231
+ }, 0);
1232
+ } else if (pasteText && pasteText.length > 0) {
1233
+ this.insertRawText(pasteText);
1227
1234
  }
1228
- };
1235
+ } catch (error) {
1236
+ console.error(error);
1237
+ }
1238
+ };
1239
+
1240
+
1229
1241
 
1230
1242
  componentDidMount() {
1231
1243
  try {
@@ -1251,8 +1263,24 @@ export default class MathRichInput extends React.Component {
1251
1263
  }
1252
1264
 
1253
1265
  componentDidUpdate() {
1254
- try {
1255
- // console.log("componentDidUpdate")
1266
+ try {
1267
+ if (this._pendingPasteMarkerId) {
1268
+ const start = document.getElementById(`${this._pendingPasteMarkerId}_START`);
1269
+ const end = document.getElementById(`${this._pendingPasteMarkerId}_END`);
1270
+ if (start && end) {
1271
+ const range = document.createRange();
1272
+ range.setStartAfter(start);
1273
+ range.setEndBefore(end);
1274
+ const sel = window.getSelection();
1275
+ sel.removeAllRanges();
1276
+ sel.addRange(range);
1277
+ start.parentNode && start.parentNode.removeChild(start);
1278
+ end.parentNode && end.parentNode.removeChild(end);
1279
+ }
1280
+ this._pendingPasteMarkerId = null;
1281
+ this.setState({ pendingHtmlWithMarker: null });
1282
+ }
1283
+
1256
1284
  if (
1257
1285
  this.afterComponentUpdateData !== null &&
1258
1286
  this.afterComponentUpdateData !== undefined &&
@@ -1629,7 +1657,7 @@ export default class MathRichInput extends React.Component {
1629
1657
  }
1630
1658
  };
1631
1659
 
1632
- insertRawText = (new_text, selectInsertedText = true) => {
1660
+ insertRawText = (new_text, selectInsertedText = false) => {
1633
1661
  try {
1634
1662
  let rangeParams = this._getRangeParams();
1635
1663
  let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
@@ -1709,10 +1737,11 @@ export default class MathRichInput extends React.Component {
1709
1737
  // Preserve the selection
1710
1738
  if (lastNode) {
1711
1739
  range = range.cloneRange();
1712
- range.setStartAfter(lastNode);
1713
1740
  if (selectPastedContent) {
1714
1741
  range.setStartBefore(firstNode);
1742
+ range.setEndAfter(lastNode);
1715
1743
  } else {
1744
+ range.setStartAfter(lastNode);
1716
1745
  range.collapse(true);
1717
1746
  }
1718
1747
  sel.removeAllRanges();
@@ -1732,11 +1761,11 @@ export default class MathRichInput extends React.Component {
1732
1761
  }
1733
1762
  };
1734
1763
 
1735
- insertHtml = (new_html) => {
1764
+ insertHtml = (new_html, selectPastedContent = false) => {
1736
1765
  try {
1737
1766
  // console.log("New html: "+new_html)
1738
1767
  // console.log("inserting: "+new_html)
1739
- this.pasteHtmlAtCaret(new_html, true);
1768
+ this.pasteHtmlAtCaret(new_html, selectPastedContent);
1740
1769
  let new_rangeParams = null;
1741
1770
  // console.log("New range params: ")
1742
1771
  try {
@@ -2136,7 +2165,7 @@ export default class MathRichInput extends React.Component {
2136
2165
  onBlur={this.handleBlur}
2137
2166
  onCompositionStart={this.handleCompositionStart}
2138
2167
  onCompositionEnd={this.handleCompositionEnd}
2139
- dangerouslySetInnerHTML={{ __html: html }}
2168
+ dangerouslySetInnerHTML={{ __html: this.state.pendingHtmlWithMarker || html }}
2140
2169
  data-placeholder={this.props.placeholder || ""}
2141
2170
  ></span>
2142
2171
  </div>
package/dist/index.css DELETED
@@ -1 +0,0 @@
1
- .SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}