@zzish/math-rich-input 0.1.53 → 0.1.55

package/dist/index.js

@@ -21963,6 +21963,15 @@ function plainTextOffsetToGlobalOffset(editableDiv, plainTextOffset) {
   return Math.min(plainTextOffset, plainText.length);
 }
 
+/**
+ * The character used to mark a position in text while content is being rewritten.
+ *
+ * Exported so a caller can tell whether a mark was actually placed. `insertCharacterBeforeMarks` warns
+ * and returns its input UNCHANGED when there is no mark, which reads as success at the call site — the
+ * value comes back looking valid with the inserted text silently missing.
+ */
+var SELECTION_MARK = MARK$1;
+
 var MIME_TYPE_PLAIN_TEXT = "text/plain";
 var MIME_TYPE_HTML = "text/html";
 var MIME_TYPE_TEX = "application/x-tex";
@@ -23342,29 +23351,18 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var pasteHtml = clipboardData.getData("text/html");
         var pasteText = clipboardData.getData("text/plain");
 
-        // Remove whatever was selected FIRST, then read the caret.
-        //
-        // The order used to be the other way round, and that is why pasting over a selection emptied the
-        // field instead of replacing it. `rangeParams` is a NODE INDEX plus an offset, and
-        // `deleteFromDocument()` removes the very nodes it counts: read before the delete, the index points
-        // at something that no longer exists, so `_findNodeWithIndex` below finds nothing, the marked text
-        // it builds carries no mark, and the pasted text is inserted nowhere. The value the component then
-        // reports is correct while the editable div is left empty — which is exactly what a teacher sees.
-        //
-        // It only ever worked on an empty field because the canonical empty state is a single `<p>` holding
-        // one small space: deleting that selection leaves the same node structure standing, so the stale
-        // index still happens to resolve.
-        // Read the caret BEFORE, so there is something to fall back on, and AGAIN after the delete.
-        var paramsBeforeDelete = _this2._getRangeParams();
-        var selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-          selection.deleteFromDocument();
-        }
-
-        // The caret AFTER the delete is the one that counts: `rangeParams` is a node index, and the delete
-        // removed the very nodes it counts. The pre-delete value is kept only as a fallback — bailing out
-        // here having already emptied the selection is how a paste turns into a deletion.
-        var rangeParams = _this2._getRangeParams() || paramsBeforeDelete;
+        /*
+         * The caret is read BEFORE the selection is removed, and that order is deliberate.
+         *
+         * Reading it afterwards looks more correct — `deleteFromDocument()` removes the very nodes the
+         * index counts — and it was tried, on the theory that a stale index was why pasting over a
+         * selection emptied the field. It was not: the field emptied because React never wrote the
+         * content back (see `reconcileEditableDomWithRender`), and the reordering was left in on a theory
+         * that had already been disproved. In a host whose field holds unwrapped text rather than a `<p>`,
+         * the emptied div yields a caret that `elementToMarkedRawText` cannot mark at all — no mark, so the
+         * pasted text is inserted nowhere and the paste becomes a deletion.
+         */
+        var rangeParams = _this2._getRangeParams();
         if (!rangeParams) {
           console.warn("Could not get range params for paste");
           return;
@@ -23372,6 +23370,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Store old range params for cursor positioning (like equation editor)
         _this2.setOldRangeParams(rangeParams);
+
+        // Clear any existing selection
+        var selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+          selection.deleteFromDocument();
+        }
         var finalText = "";
         var finalMimeType = _this2.props.mimeType || "text/html";
         var hasMathContent = false;
@@ -23468,12 +23472,70 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         // Use the component's insert mechanism to handle paste properly
         if (finalText) {
-          // Get current node and create marked text at cursor position
-          var currentNode = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
-          var markedText = elementToMarkedRawText(_this2.editableDiv, currentNode, rangeParams.startOffset, _this2.enableHtml());
+          /*
+           * WHERE TO PUT THE PASTED TEXT, found in the document rather than by index.
+           *
+           * `elementToMarkedRawText` marks ONE position — a node and an offset — and the selection has to
+           * be gone from the document before that position means anything. It was, and then the position
+           * was looked up by INDEX, which is where every version of this went wrong: an index read before
+           * the delete counts nodes the delete then removes, and an index read after it does not resolve in
+           * a field whose content is unwrapped text. Either way `_findNodeWithIndex` returns nothing, no
+           * mark is placed, `insertCharacterBeforeMarks` warns "Start: -1" and returns the text UNCHANGED —
+           * so the pasted words go nowhere, and what the teacher sees is their field emptied.
+           *
+           * The browser's own selection is the answer: after `deleteFromDocument()` it is left collapsed at
+           * exactly the point where the pasted text belongs, in a node that exists by construction. The
+           * index lookup stays as a fallback for the case where the selection has gone elsewhere.
+           */
+          var live = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+          var liveNode = live && _this2.editableDiv.contains(live.startContainer) ? live.startContainer : null;
+          var currentNode = liveNode !== null ? liveNode : _this2._findNodeWithIndex(rangeParams.startNodeIndex);
+          var currentOffset = liveNode !== null ? live.startOffset : rangeParams.startOffset;
+          var markedText = elementToMarkedRawText(_this2.editableDiv, currentNode, currentOffset, _this2.enableHtml());
+
+          /*
+           * A FIELD WITH NOTHING LEFT IN IT NEEDS NO MARK.
+           *
+           * Marking only works on a TEXT node, and an emptied field has none: the browser leaves the caret
+           * in the element itself, so `elementToMarkedRawText` has nothing to mark and returns text with no
+           * mark in it. `insertCharacterBeforeMarks` then warns and hands back its input UNCHANGED, which
+           * reads as success — the value comes out valid with the pasted words missing, and the teacher
+           * watches their field empty itself.
+           *
+           * But an empty field after the delete says something exact: the selection covered everything, so
+           * the result of the paste IS the pasted text. Nothing needs to be worked out. This is the
+           * select-all-and-paste that every report of this bug has been.
+           */
+          var remainingText = _this2.editableDiv.textContent.split(SMALL_SPACE).join("").trim();
+          var fieldIsEmpty = remainingText === "" && _this2.editableDiv.querySelector(".katex") === null;
+          var marked = markedText.indexOf(SELECTION_MARK) !== -1;
+
+          /*
+           * NOTHING IS BETTER THAN DESTRUCTION.
+           *
+           * No mark and content still standing means the caret cannot be located inside text that must be
+           * kept. Carrying on would write a value with the pasted text missing over a field whose selection
+           * has already been removed from the document — a paste that performs a deletion. Stopping leaves
+           * `props.value` untouched and `reconcileEditableDomWithRender` puts the document back from it:
+           * the paste does nothing, which is a disappointment rather than a loss.
+           */
+          if (!marked && !fieldIsEmpty) {
+            console.warn("[math-rich-input] paste found nowhere to insert; the field is left as it was", {
+              rangeParams: rangeParams,
+              hadLiveSelection: liveNode !== null
+            });
+            queueMicrotask(function () {
+              try {
+                _this2.reconcileEditableDomWithRender(true);
+              } catch (error) {
+                console.error(error);
+              }
+            });
+            return;
+          }
 
           // Insert the new content at the marked position
-          var newRawText = removeMarks(insertCharacterBeforeMarks(markedText, finalText));
+          var newRawText = marked ? removeMarks(insertCharacterBeforeMarks(markedText, finalText)) : finalText;
           // Convert any remaining \[...\] LaTeX expressions to <math>...</math> format
           // This ensures consistency when paste adds <math> tags alongside existing \[...\] expressions
           if (_this2.enableMath()) {
@@ -25006,6 +25068,26 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       return true;
     }
 
+    /**
+     * Whether the field holds nothing a teacher would call content.
+     *
+     * NOT `:empty`, which is what the stylesheet asked and why the placeholder has never once been seen.
+     * An empty field here is not an empty element: the value renders as a paragraph carrying a single
+     * zero-width space, so the element always has a child and the CSS rule never matched. The hint was
+     * written, translated, passed down through every field — and drawn nowhere.
+     *
+     * Markup is stripped rather than counted: `<p>` and `<br>` are the shape of emptiness, not content.
+     * Maths and images are content even though stripping tags would leave nothing behind, so they are
+     * asked about directly.
+     */
+  }, {
+    key: "isVisuallyEmpty",
+    value: function isVisuallyEmpty() {
+      var value = this.props.value || "";
+      if (/<(math|img)\b/i.test(value)) return false;
+      return value.replace(/<[^>]*>/g, "").split(SMALL_SPACE).join("").trim().length === 0;
+    }
+
     /**
      * The browser's own reading of an HTML string.
      *
@@ -25199,7 +25281,27 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         className: useClassName
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "MathRichInput-scrollview"
-      }, this.state.hasFocus && /*#__PURE__*/React__default["default"].createElement(Toolbar, {
+      }, this.props.placeholder && this.isVisuallyEmpty() && !this.state.hasFocus &&
+      /*#__PURE__*/
+      /*
+       * CARRIED BY ITS OWN ANCHOR, a box of no size at the start of the row.
+       *
+       * An absolutely positioned element hangs off the nearest positioned ancestor, and which one
+       * that is belongs to whoever is embedding the field: a host may take the positioning off
+       * this component's own boxes to anchor something else of its own — the toolbar, say — and
+       * the hint then measures from the host's outer card instead of the field, landing on top of
+       * whatever the host has put to the left of it.
+       *
+       * A wrapper of its own settles it. Zero-sized, so it displaces nothing, and positioned, so
+       * it is what the hint measures from — which puts the words where the first character goes,
+       * whatever the host has done around it.
+       */
+      React__default["default"].createElement("div", {
+        className: "MathRichInput-hintlayer"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "MathRichInput-hint",
+        "aria-hidden": "true"
+      }, this.props.placeholder)), this.state.hasFocus && /*#__PURE__*/React__default["default"].createElement(Toolbar, {
         className: "Toolbar",
         enableMath: this.enableMath(),
         enableFontStyling: this.enableFontStyling(),

package/dist/math-rich-input.css

@@ -1 +1 @@
-.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;cursor:pointer;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{cursor:default;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;cursor:text;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;cursor:text;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;margin:5px}.EquationEditor .cancelButton,.EquationEditor .insertButton{cursor:pointer;font-size:14px;height:36px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;margin-bottom:10px;margin-left:5px;margin-right:5px}.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;cursor:default;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{cursor:default;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;cursor:default;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 cubic-bezier(.2,0,.38,.9);animation-fill-mode:forwards;background:#000;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:999998}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s cubic-bezier(.2,0,.38,.9);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;opacity:0;position:fixed;top:50%;transform:translate(-50%,100%);width:98%;z-index:999999}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal.no-animation{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important}.EquationEditorModal-mobile.no-animation{animation:none!important;opacity:1!important;transform:translate(-50%,1px)!important}.EquationEditorModal-background.no-animation{animation:none!important;opacity:.6!important}.EquationEditorModal-mobile{animation:riseFromTop .3s cubic-bezier(.2,0,.38,.9);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;opacity:0;position:fixed;top:0;transform:translate(-50%,-100%);width:99%;z-index:999999}@keyframes riseFromTop{00%{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%,1px)}}.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}
+.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;cursor:pointer;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{cursor:default;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;cursor:text;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;cursor:text;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;margin:5px}.EquationEditor .cancelButton,.EquationEditor .insertButton{cursor:pointer;font-size:14px;height:36px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;margin-bottom:10px;margin-left:5px;margin-right:5px}.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;cursor:default;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{cursor:default;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;cursor:default;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 cubic-bezier(.2,0,.38,.9);animation-fill-mode:forwards;background:#000;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:999998}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s cubic-bezier(.2,0,.38,.9);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;opacity:0;position:fixed;top:50%;transform:translate(-50%,100%);width:98%;z-index:999999}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal.no-animation{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important}.EquationEditorModal-mobile.no-animation{animation:none!important;opacity:1!important;transform:translate(-50%,1px)!important}.EquationEditorModal-background.no-animation{animation:none!important;opacity:.6!important}.EquationEditorModal-mobile{animation:riseFromTop .3s cubic-bezier(.2,0,.38,.9);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;opacity:0;position:fixed;top:0;transform:translate(-50%,-100%);width:99%;z-index:999999}@keyframes riseFromTop{00%{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%,1px)}}.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;position:relative;width:100%}.MathRichInput-hintlayer{flex:0 0 auto;height:0;position:relative;width:0}.MathRichInput-hint{color:#acb6c0;font-size:15px;left:10px;pointer-events:none;position:absolute;top:10px;user-select:none;white-space:nowrap}.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}