@zzish/math-rich-input 0.1.6 → 0.1.8

package/dist/index.js

@@ -19497,8 +19497,7 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
 }(React__default['default'].Component);
 
 var DEFAULT_TOP$1 = -1;
-var DEFAULT_LEFT$1 = -1;
-var TOP_MARGIN = 3;
+var DEFAULT_RIGHT$1 = -1;
 var ACCENTS_FOR_LETTER = {
   a: ["à", "á", "â", "ä", "æ", "ã", "å", "ā"],
   c: ["ç", "ć", "č"],
@@ -19698,6 +19697,11 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
       if (insert) _this.suppliedClickHandler(e, null, character);else _this.suppliedClickHandler(e, _this.letterForAccents, character);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isInViewport", function (element) {
+      var rect = element.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleSelectTab", function (tab) {
       GLOBAL_last_selected_tab = tab;
 
@@ -19707,7 +19711,6 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-      // console.log("componentDidUpdate")
       var accentKey = _this.props.keyPressed;
 
       if (accentKey === "Backspace" || accentKey === "ArrowLeft" || accentKey === "ArrowRight") {
@@ -19727,7 +19730,8 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       selectedTab: GLOBAL_last_selected_tab,
       top: DEFAULT_TOP$1,
-      left: DEFAULT_LEFT$1
+      right: DEFAULT_RIGHT$1,
+      shouldHorizontiallyAlign: false
     };
     _this.suppliedClickHandler = null;
     _this.handleButtonClick = _this.handleButtonClick.bind(_assertThisInitialized(_this));
@@ -19759,23 +19763,32 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
           return;
         }
 
+        var toolBarBounds = thisBar.parentNode.getBoundingClientRect();
         var inputBounds = node.getBoundingClientRect();
         var thisBounds = thisBar.getBoundingClientRect();
         this.shouldUpdatePosition = false; // Vertically align below input field
 
-        var top = inputBounds.bottom + TOP_MARGIN; // Horizontally align to left or right of input field
+        var top = inputBounds.bottom - toolBarBounds.height;
+        if (this.props.compactMode) top = inputBounds.height; // Horizontally align
 
-        var left = inputBounds.right - thisBounds.width; // right align
-
-        if (this.props.compactMode) left = inputBounds.left; // left align
+        var right = 0; // right align
         // Make sure it is on screen horizontally
 
-        if (thisBounds.width > inputBounds.width) left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
-        if (left + thisBounds.width > window.innerWidth) left = window.innerWidth - thisBounds.width - 2;
-        if (left < 0) left = 0;
+        var shouldHorizontiallyAlign = false;
+
+        if (thisBounds.width > inputBounds.width) {
+          shouldHorizontiallyAlign = true;
+
+          if (this.isInViewport(thisBar)) {
+            right = right - (thisBounds.width - inputBounds.width) / 2;
+          } // else remain right aligned
+
+        }
+
         this.setState({
-          left: left,
-          top: top
+          right: right,
+          top: top,
+          shouldHorizontiallyAlign: shouldHorizontiallyAlign
         });
       } else {
         this.shouldUpdatePosition = true;
@@ -19804,8 +19817,11 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
 
       var style = _objectSpread2({}, this.props.style);
 
-      if (this.state.left !== DEFAULT_LEFT$1 || this.state.top !== DEFAULT_TOP$1) {
-        style.left = this.state.left + "px";
+      if (this.state.right !== DEFAULT_RIGHT$1 || this.state.top !== DEFAULT_TOP$1) {
+        if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+          style.right = this.state.right + "px";
+        }
+
         style.top = this.state.top + "px";
       }
 
@@ -19824,7 +19840,7 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(e) {
           return e.preventDefault();
         }
-      }, compactMode && /*#__PURE__*/React__default['default'].createElement("div", null, quickAccents.map(function (character, index) {
+      }, compactMode && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, quickAccents.map(function (character, index) {
         return /*#__PURE__*/React__default['default'].createElement("button", {
           className: "AccentBar-button AB-narrow AB-compact",
           key: "accent-button-" + index,
@@ -20242,7 +20258,7 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
 }(React__default['default'].Component);
 
 var DEFAULT_TOP = 0;
-var DEFAULT_LEFT = 0;
+var DEFAULT_RIGHT = 0;
 var BOTTOM_MARGIN = 5;
 var CTRL_OR_META = /(Mac)/i.test(window.navigator.platform) ? "\u2318" : "CTRL+";
 
@@ -20300,10 +20316,16 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
 
     });
 
+    _defineProperty(_assertThisInitialized(_this), "isInViewport", function (element) {
+      var rect = element.getBoundingClientRect();
+      return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    });
+
     _this.state = {
       showAccents: false,
       top: DEFAULT_TOP,
-      left: DEFAULT_LEFT
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false
     };
     _this.handleButtonClick = _this.handleButtonClick.bind(_assertThisInitialized(_this));
     _this.suppliedClickHandler = null;
@@ -20336,16 +20358,25 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         var thisBounds = thisBar.getBoundingClientRect();
         this.shouldUpdatePosition = false; // Vertically align above input field
 
-        var top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN; // Horizontally align to right of input field
+        var top = (thisBounds.height + BOTTOM_MARGIN) * -1; // Horizontally align
+
+        var right = 0; // right align
 
-        var left = inputBounds.right - thisBounds.width; // Make sure it is on screen horizontally
+        var shouldHorizontiallyAlign = false;
+
+        if (thisBounds.width > inputBounds.width) {
+          shouldHorizontiallyAlign = true;
+
+          if (this.isInViewport(thisBar)) {
+            right = right - (thisBounds.width - inputBounds.width) / 2;
+          } // else remain right aligned
+
+        }
 
-        if (thisBounds.width > inputBounds.width) left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
-        if (left + thisBounds.width > window.innerWidth) left = window.innerWidth - thisBounds.width - 2;
-        if (left < 0) left = 0;
         this.setState({
-          left: left,
-          top: top
+          right: right,
+          top: top,
+          shouldHorizontiallyAlign: shouldHorizontiallyAlign
         });
       } else {
         this.shouldUpdatePosition = true;
@@ -20376,8 +20407,11 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
       // }
 
 
-      if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-        style.left = this.state.left + "px";
+      if (this.state.right !== DEFAULT_RIGHT || this.state.top !== DEFAULT_TOP) {
+        if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+          style.right = this.state.right + "px";
+        }
+
         style.top = this.state.top + "px";
       }
 
@@ -21974,7 +22008,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             });
           } else {
             _this2.setState({
-              showAccentBar: true
+              showAccentBar: false
             });
           }
 
@@ -21993,7 +22027,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (_this2.keyPressStartTime < 0) {
           _this2.keyPressStartTime = Date.now();
           if (_this2.state.showAccentBar) _this2.setState({
-            showAccentBar: true
+            showAccentBar: false
           });
         }
 
@@ -22752,7 +22786,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         _this2.insertAccentLetter(event, oldCharacter, newCharacter);
 
         _this2.setState({
-          showAccentBar: true
+          showAccentBar: false
         });
       } catch (error) {
         console.error(error);
@@ -22772,17 +22806,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this2), "handleBlur", function (event) {// try {
-      //   this.setState({ hasFocus: false, showAccentBar: true });
-      // } catch (error) {
-      //   console.error(error);
-      // }
+    _defineProperty(_assertThisInitialized(_this2), "handleBlur", function (event) {
+      try {
+        _this2.setState({
+          hasFocus: false,
+          showAccentBar: false
+        });
+      } catch (error) {
+        console.error(error);
+      }
     });
 
     _this2.state = {
       showEquationEditor: false,
       equationEditorLatex: "",
-      showAccentBar: true,
+      showAccentBar: false,
       activeButtons: {
         bold: false,
         italic: false,

package/dist/math-rich-input.css

@@ -18,10 +18,9 @@
 }
 
 .MathRichInput-scrollview {
+  position: relative;
   display: flex;
-  overflow: scroll;
   border-radius: 5px;
-  overflow: overlay;
 }
 
 .MathRichInput p {
@@ -35,6 +34,8 @@
   width: 100%;
   border-radius: 5px;
   background-color: #fff;
+  overflow-x: scroll;
+  overflow: overlay;
 }
 
 .MathRichInput:focus {
@@ -226,7 +227,7 @@
 /* Note that the top left position of the toolbar is set programatically in componentDidMount */
 
 .Toolbar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   display: flex;
   height: 42px;
@@ -236,8 +237,6 @@
   box-shadow: 1px 1px 5px #a0a0a0;
   animation: 0.5s fadeIn1;
   animation-fill-mode: forwards;
-  top: 0px;
-  left: 0px; /* important to set this so that toolbar initially renders full width */
 }
 
 @keyframes fadeIn1 {
@@ -281,11 +280,6 @@
   width: 46px;
 }
 
-.TB-up4 {
-  position: relative;
-  top: -4px;
-}
-
 .TB-selected {
   background: #d0d0d0;
   color: black;
@@ -363,28 +357,27 @@
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   width: 360px;
   background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
-  padding: 5px;
+  padding: 8px;
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
 
 .AccentBar-compact {
-  position: fixed;
+  display: flex;
+  position: absolute;
   z-index: 1;
   background-color: white;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
   padding: 5px;
-  top: 0px;
-  left: 0px; /* Important to set this default so that accent bar renders to optimal width */
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/AccentBar.css

@@ -1,28 +1,27 @@
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   width: 360px;
   background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
-  padding: 5px;
+  padding: 8px;
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
 
 .AccentBar-compact {
-  position: fixed;
+  display: flex;
+  position: absolute;
   z-index: 1;
   background-color: white;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
   padding: 5px;
-  top: 0px;
-  left: 0px; /* Important to set this default so that accent bar renders to optimal width */
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }

package/src/AccentBar.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import "./AccentBar.css";
 
 const DEFAULT_TOP = -1;
-const DEFAULT_LEFT = -1;
+const DEFAULT_RIGHT = -1;
 const TOP_MARGIN = 3;
 
 const ACCENTS_FOR_LETTER = {
@@ -566,7 +566,8 @@ export default class AccentBar extends React.Component {
     this.state = {
       selectedTab: GLOBAL_last_selected_tab,
       top: DEFAULT_TOP,
-      left: DEFAULT_LEFT,
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false,
     };
     this.suppliedClickHandler = null;
     this.handleButtonClick = this.handleButtonClick.bind(this);
@@ -586,6 +587,17 @@ export default class AccentBar extends React.Component {
     else this.suppliedClickHandler(e, this.letterForAccents, character);
   };
 
+  isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  };
+
   componentDidMount() {
     // We render once to find out the component's preferred size and then render again to update it
 
@@ -606,28 +618,30 @@ export default class AccentBar extends React.Component {
         return;
       }
 
-      let inputBounds = node.getBoundingClientRect();
-      let thisBounds = thisBar.getBoundingClientRect();
+      const toolBarBounds = thisBar.parentNode.getBoundingClientRect();
+      const inputBounds = node.getBoundingClientRect();
+      const thisBounds = thisBar.getBoundingClientRect();
 
       this.shouldUpdatePosition = false;
 
       // Vertically align below input field
-      let top = inputBounds.bottom + TOP_MARGIN;
+      let top = inputBounds.bottom - toolBarBounds.height;
+      if (this.props.compactMode) top = inputBounds.height;
 
-      // Horizontally align to left or right of input field
-      let left = inputBounds.right - thisBounds.width; // right align
-      if (this.props.compactMode) left = inputBounds.left; // left align
+      // Horizontally align
+      let right = 0; // right align
 
       // Make sure it is on screen horizontally
-      if (thisBounds.width > inputBounds.width)
-        left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
-
-      if (left + thisBounds.width > window.innerWidth)
-        left = window.innerWidth - thisBounds.width - 2;
+      let shouldHorizontiallyAlign = false;
+      if (thisBounds.width > inputBounds.width) {
+        shouldHorizontiallyAlign = true;
 
-      if (left < 0) left = 0;
+        if (this.isInViewport(thisBar)) {
+          right = right - (thisBounds.width - inputBounds.width) / 2;
+        } // else remain right aligned
+      }
 
-      this.setState({ left, top });
+      this.setState({ right, top, shouldHorizontiallyAlign });
     } else {
       this.shouldUpdatePosition = true;
     }
@@ -639,7 +653,6 @@ export default class AccentBar extends React.Component {
   };
 
   componentDidUpdate = (prevProps) => {
-    // console.log("componentDidUpdate")
     let accentKey = this.props.keyPressed;
     if (
       accentKey === "Backspace" ||
@@ -692,8 +705,10 @@ export default class AccentBar extends React.Component {
 
     // Set up the tranlation to place the accent bar where we want it
     let style = { ...this.props.style };
-    if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-      style.left = this.state.left + "px";
+    if (this.state.right !== DEFAULT_RIGHT || this.state.top !== DEFAULT_TOP) {
+      if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+        style.right = this.state.right + "px";
+      }
       style.top = this.state.top + "px";
     }
 
@@ -708,7 +723,7 @@ export default class AccentBar extends React.Component {
       >
         {/* Compact mode */}
         {compactMode && (
-          <div>
+          <>
             {quickAccents.map((character, index) => {
               return (
                 <button
@@ -722,7 +737,7 @@ export default class AccentBar extends React.Component {
                 </button>
               );
             })}
-          </div>
+          </>
         )}
 
         {/* Normal mode */}

package/src/MathRichInput.css

@@ -18,10 +18,9 @@
 }
 
 .MathRichInput-scrollview {
+  position: relative;
   display: flex;
-  overflow: scroll;
   border-radius: 5px;
-  overflow: overlay;
 }
 
 .MathRichInput p {
@@ -35,6 +34,8 @@
   width: 100%;
   border-radius: 5px;
   background-color: #fff;
+  overflow-x: scroll;
+  overflow: overlay;
 }
 
 .MathRichInput:focus {

package/src/Toolbar.css

@@ -1,7 +1,7 @@
 /* Note that the top left position of the toolbar is set programatically in componentDidMount */
 
 .Toolbar {
-  position: fixed;
+  position: absolute;
   z-index: 1;
   display: flex;
   height: 42px;
@@ -11,8 +11,6 @@
   box-shadow: 1px 1px 5px #a0a0a0;
   animation: 0.5s fadeIn1;
   animation-fill-mode: forwards;
-  top: 0px;
-  left: 0px; /* important to set this so that toolbar initially renders full width */
 }
 
 @keyframes fadeIn1 {

package/src/Toolbar.jsx

@@ -5,9 +5,8 @@ import AccentBar from "./AccentBar";
 
 import "./Toolbar.css";
 
-// const DEFAULT_TRANSLATE = 0
 const DEFAULT_TOP = 0;
-const DEFAULT_LEFT = 0;
+const DEFAULT_RIGHT = 0;
 const BOTTOM_MARGIN = 5;
 
 const CTRL_OR_META = /(Mac)/i.test(window.navigator.platform)
@@ -21,7 +20,8 @@ export default class Toolbar extends React.Component {
     this.state = {
       showAccents: false,
       top: DEFAULT_TOP,
-      left: DEFAULT_LEFT,
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false,
     };
 
     this.handleButtonClick = this.handleButtonClick.bind(this);
@@ -66,6 +66,17 @@ export default class Toolbar extends React.Component {
     // this.hideAccentBar(null)
   };
 
+  isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <=
+        (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  };
+
   componentDidMount() {
     // We render once to find out the component's preferred size and then render again to update it
     if (this.shouldUpdatePosition) {
@@ -91,21 +102,21 @@ export default class Toolbar extends React.Component {
       this.shouldUpdatePosition = false;
 
       // Vertically align above input field
-      let top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN;
+      let top = (thisBounds.height + BOTTOM_MARGIN) * -1;
 
-      // Horizontally align to right of input field
-      let left = inputBounds.right - thisBounds.width;
+      // Horizontally align
+      let right = 0; // right align
 
-      // Make sure it is on screen horizontally
-      if (thisBounds.width > inputBounds.width)
-        left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
+      let shouldHorizontiallyAlign = false;
+      if (thisBounds.width > inputBounds.width) {
+        shouldHorizontiallyAlign = true;
 
-      if (left + thisBounds.width > window.innerWidth)
-        left = window.innerWidth - thisBounds.width - 2;
-
-      if (left < 0) left = 0;
+        if (this.isInViewport(thisBar)) {
+          right = right - (thisBounds.width - inputBounds.width) / 2;
+        } // else remain right aligned
+      }
 
-      this.setState({ left, top });
+      this.setState({ right, top, shouldHorizontiallyAlign });
     } else {
       this.shouldUpdatePosition = true;
     }
@@ -133,8 +144,10 @@ export default class Toolbar extends React.Component {
     // if (this.state.translateX !== DEFAULT_TRANSLATE) {
     //   style.transform = "translate("+this.state.translateX+"px, "+this.state.translateY+"px)";
     // }
-    if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-      style.left = this.state.left + "px";
+    if (this.state.right !== DEFAULT_RIGHT || this.state.top !== DEFAULT_TOP) {
+      if (!this.props.compactMode || this.state.shouldHorizontiallyAlign) {
+        style.right = this.state.right + "px";
+      }
       style.top = this.state.top + "px";
     }