@zzish/math-rich-input 0.1.47 → 0.1.49

package/src/Toolbar.jsx

@@ -9,238 +9,253 @@ const DEFAULT_TOP = 0;
 const DEFAULT_RIGHT = 0;
 const BOTTOM_MARGIN = 5;
 
-const CTRL_OR_META = /(Mac)/i.test(window.navigator.platform) ? "\u2318" : "CTRL+";
+const CTRL_OR_META = /(Mac)/i.test(window.navigator.platform)
+  ? "\u2318"
+  : "CTRL+";
 
 export default class Toolbar extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            showAccents: false,
-            top: DEFAULT_TOP,
-            right: DEFAULT_RIGHT,
-            shouldHorizontiallyAlign: false,
-        };
-
-        this.handleButtonClick = this.handleButtonClick.bind(this);
-
-        this.suppliedClickHandler = null;
-        this.suppliedAccentLetterFetcher = null;
-        this.suppliedAccentLetterReplacer = null;
-        this.accentLetter = null;
-        this.shouldUpdatePosition = true;
-    }
-
-    handleButtonClick = (event, buttonName) => {
-        this.suppliedClickHandler(event, buttonName);
-    };
-
-    showAccentBar = (event) => {
-        if (!this.state.showAccents) this.accentLetter = this.suppliedAccentLetterFetcher();
-        this.setState({ showAccents: true });
-        event.preventDefault();
-    };
-
-    hideAccentBar = (event) => {
-        this.setState({ showAccents: false });
-    };
-
-    showOrHideAccentBar = (event) => {
-        if (!this.state.showAccents) this.accentLetter = this.suppliedAccentLetterFetcher();
-        this.setState({ showAccents: !this.state.showAccents });
-    };
-
-    handleButtonClick = (event, buttonName) => {
-        this.suppliedClickHandler(event, buttonName);
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showAccents: false,
+      top: DEFAULT_TOP,
+      right: DEFAULT_RIGHT,
+      shouldHorizontiallyAlign: false,
     };
 
-    handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
-        this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter);
-        // 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)
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+
+    this.suppliedClickHandler = null;
+    this.suppliedAccentLetterFetcher = null;
+    this.suppliedAccentLetterReplacer = null;
+    this.accentLetter = null;
+    this.shouldUpdatePosition = true;
+  }
+
+  handleButtonClick = (event, buttonName) => {
+    this.suppliedClickHandler(event, buttonName);
+  };
+
+  showAccentBar = (event) => {
+    if (!this.state.showAccents)
+      this.accentLetter = this.suppliedAccentLetterFetcher();
+    this.setState({ showAccents: true });
+    event.preventDefault();
+  };
+
+  hideAccentBar = (event) => {
+    this.setState({ showAccents: false });
+  };
+
+  showOrHideAccentBar = (event) => {
+    if (!this.state.showAccents)
+      this.accentLetter = this.suppliedAccentLetterFetcher();
+    this.setState({ showAccents: !this.state.showAccents });
+  };
+
+  handleButtonClick = (event, buttonName) => {
+    this.suppliedClickHandler(event, buttonName);
+  };
+
+  handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
+    this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter);
+    // 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) {
+      // Lets position the accent bar below the input field and right aligned
+      let thisBar = this.toolbar;
+      let node = thisBar.parentNode;
+      while (
+        node !== null &&
+        !node.classList.contains("MathRichInput-Container")
+      )
+        node = node.parentNode;
+
+      if (node === null) {
+        console.error(
+          "Could not find ancestor MathRichInput-Container find parent"
         );
-    };
+        return;
+      }
 
-    componentDidMount() {
-        // We render once to find out the component's preferred size and then render again to update it
-        if (this.shouldUpdatePosition) {
-            // Lets position the accent bar below the input field and right aligned
-            let thisBar = this.toolbar;
-            let node = thisBar.parentNode;
-            while (node !== null && !node.classList.contains("MathRichInput-Container"))
-                node = node.parentNode;
-
-            if (node === null) {
-                console.error("Could not find ancestor MathRichInput-Container find parent");
-                return;
-            }
+      let inputBounds = node.getBoundingClientRect();
+      let thisBounds = thisBar.getBoundingClientRect();
 
-            let inputBounds = node.getBoundingClientRect();
-            let thisBounds = thisBar.getBoundingClientRect();
+      this.shouldUpdatePosition = false;
 
-            this.shouldUpdatePosition = false;
+      // Vertically align above input field
+      let top =
+        (thisBounds.height + BOTTOM_MARGIN + this.props.extraMargin) * -1;
 
-            // Vertically align above input field
-            let top = (thisBounds.height + BOTTOM_MARGIN + this.props.extraMargin) * -1;
+      // Horizontally align
+      let right = 0; // right align
 
-            // Horizontally align
-            let right = 0; // right align
+      let shouldHorizontiallyAlign = false;
+      if (thisBounds.width > inputBounds.width) {
+        shouldHorizontiallyAlign = true;
 
-            let 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 (this.isInViewport(thisBar)) {
-                    right = right - (thisBounds.width - inputBounds.width) / 2;
-                } // else remain right aligned
-            }
-
-            this.setState({ right, top, shouldHorizontiallyAlign });
-        } else {
-            this.shouldUpdatePosition = true;
-        }
+      this.setState({ right, top, shouldHorizontiallyAlign });
+    } else {
+      this.shouldUpdatePosition = true;
+    }
+  }
+
+  render() {
+    this.suppliedClickHandler = this.props.onButtonClick;
+    this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
+    this.suppliedAccentLetterInserter = this.props.insertAccentLetter;
+
+    let enableFontStyling = this.props.enableFontStyling ?? true;
+    let enableMath = this.props.enableMath ?? true;
+
+    let katexHTML = katex.renderToString("f(x)");
+    // Not really necessary, but lets clean out some unnessary mathml nodes
+    let start = katexHTML.indexOf('<span class="katex-mathml">');
+    let end = -1;
+    if (start > 0) end = katexHTML.indexOf("</math></span>", start + 30);
+    if (end > 0)
+      katexHTML = katexHTML.substring(0, start) + katexHTML.substring(end + 14);
+
+    // Set up the tranlation to place the toolbar where we want it
+    let style = { ...this.props.style };
+    // if (this.state.translateX !== DEFAULT_TRANSLATE) {
+    //   style.transform = "translate("+this.state.translateX+"px, "+this.state.translateY+"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";
     }
 
-    render() {
-        this.suppliedClickHandler = this.props.onButtonClick;
-        this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
-        this.suppliedAccentLetterInserter = this.props.insertAccentLetter;
-
-        let enableFontStyling = this.props.enableFontStyling ?? true;
-        let enableMath = this.props.enableMath ?? true;
-
-        let katexHTML = katex.renderToString("f(x)");
-        // Not really necessary, but lets clean out some unnessary mathml nodes
-        let start = katexHTML.indexOf('<span class="katex-mathml">');
-        let end = -1;
-        if (start > 0) end = katexHTML.indexOf("</math></span>", start + 30);
-        if (end > 0) katexHTML = katexHTML.substring(0, start) + katexHTML.substring(end + 14);
-
-        // Set up the tranlation to place the toolbar where we want it
-        let style = { ...this.props.style };
-        // if (this.state.translateX !== DEFAULT_TRANSLATE) {
-        //   style.transform = "translate("+this.state.translateX+"px, "+this.state.translateY+"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";
+    return (
+      <div className="Toolbar" style={style} ref={(r) => (this.toolbar = r)}>
+        {enableFontStyling && (
+          <>
+            <button
+              name="Bold"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.bold ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Bold")}
+            >
+              <b>B</b>
+            </button>
+
+            <button
+              name="Italic"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.italic ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Italic")}
+            >
+              <i>I</i>
+            </button>
+
+            <button
+              name="Underline"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.underline ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Underline")}
+            >
+              <u>U</u>
+            </button>
+
+            <button
+              name="Superscript"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.superscript ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Superscript")}
+            >
+              a<sup>x</sup>
+            </button>
+
+            <button
+              name="Subscript"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.subscript ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Subscript")}
+            >
+              a<sub>x</sub>
+            </button>
+          </>
+        )}
+
+        <button
+          name="Accents"
+          className={
+            "Toolbar-button TB-narrow" +
+            (this.state.showAccents ? " TB-selected" : "")
+          }
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={(e) => e.preventDefault()}
+          onMouseUp={(e) => this.showOrHideAccentBar(e)}
+        >
+          á
+        </button>
+
+        {enableMath && (
+          <button
+            name="Equation"
+            className="Toolbar-button TB-wide"
+            onMouseDown={(e) => this.handleButtonClick(e, "Equation")}
+          >
+            <div dangerouslySetInnerHTML={{ __html: katexHTML }} />
+            <span className="tooltiptext">
+              Insert equation [{CTRL_OR_META}Enter]
+            </span>
+          </button>
+        )}
+
+        {this.state.showAccents && (
+          <AccentBar
+            accentLetter={this.accentLetter}
+            keyPressed={this.props.keyPressed}
+            fetchAccentLetter={this.props.fetchAccentLetter}
+            onButtonClick={(e, oldCharacter, newCharacter) =>
+              this.handleAccentButtonClick(e, oldCharacter, newCharacter)
             }
-            style.top = this.state.top + "px";
-        }
-
-        return (
-            <div className="Toolbar" style={style} ref={(r) => (this.toolbar = r)}>
-                {enableFontStyling && (
-                    <>
-                        <button
-                            name="Bold"
-                            className={
-                                "Toolbar-button TB-narrow" +
-                                (this.props.activeButtons.bold ? " TB-selected" : "")
-                            }
-                            onClick={(e) => e.preventDefault()}
-                            onMouseDown={(e) => e.preventDefault()}
-                            onMouseUp={(e) => this.handleButtonClick(e, "Bold")}
-                        >
-                            <b>B</b>
-                        </button>
-
-                        <button
-                            name="Italic"
-                            className={
-                                "Toolbar-button TB-narrow" +
-                                (this.props.activeButtons.italic ? " TB-selected" : "")
-                            }
-                            onClick={(e) => e.preventDefault()}
-                            onMouseDown={(e) => e.preventDefault()}
-                            onMouseUp={(e) => this.handleButtonClick(e, "Italic")}
-                        >
-                            <i>I</i>
-                        </button>
-
-                        <button
-                            name="Underline"
-                            className={
-                                "Toolbar-button TB-narrow" +
-                                (this.props.activeButtons.underline ? " TB-selected" : "")
-                            }
-                            onClick={(e) => e.preventDefault()}
-                            onMouseDown={(e) => e.preventDefault()}
-                            onMouseUp={(e) => this.handleButtonClick(e, "Underline")}
-                        >
-                            <u>U</u>
-                        </button>
-
-                        <button
-                            name="Superscript"
-                            className={
-                                "Toolbar-button TB-narrow" +
-                                (this.props.activeButtons.superscript ? " TB-selected" : "")
-                            }
-                            onClick={(e) => e.preventDefault()}
-                            onMouseDown={(e) => e.preventDefault()}
-                            onMouseUp={(e) => this.handleButtonClick(e, "Superscript")}
-                        >
-                            a<sup>x</sup>
-                        </button>
-
-                        <button
-                            name="Subscript"
-                            className={
-                                "Toolbar-button TB-narrow" +
-                                (this.props.activeButtons.subscript ? " TB-selected" : "")
-                            }
-                            onClick={(e) => e.preventDefault()}
-                            onMouseDown={(e) => e.preventDefault()}
-                            onMouseUp={(e) => this.handleButtonClick(e, "Subscript")}
-                        >
-                            a<sub>x</sub>
-                        </button>
-                    </>
-                )}
-
-                <button
-                    name="Accents"
-                    className={
-                        "Toolbar-button TB-narrow" + (this.state.showAccents ? " TB-selected" : "")
-                    }
-                    onMouseDown={(e) => e.preventDefault()}
-                    onClick={(e) => e.preventDefault()}
-                    onMouseUp={(e) => this.showOrHideAccentBar(e)}
-                >
-                    á
-                </button>
-
-                {enableMath && (
-                    <button
-                        name="Equation"
-                        className="Toolbar-button TB-wide"
-                        onMouseDown={(e) => this.handleButtonClick(e, "Equation")}
-                    >
-                        <div dangerouslySetInnerHTML={{ __html: katexHTML }} />
-                        <span className="tooltiptext">Insert equation [{CTRL_OR_META}Enter]</span>
-                    </button>
-                )}
-
-                {this.state.showAccents && (
-                    <AccentBar
-                        accentLetter={this.accentLetter}
-                        keyPressed={this.props.keyPressed}
-                        fetchAccentLetter={this.props.fetchAccentLetter}
-                        onButtonClick={(e, oldCharacter, newCharacter) =>
-                            this.handleAccentButtonClick(e, oldCharacter, newCharacter)
-                        }
-                    />
-                )}
-            </div>
-        );
-    }
+          />
+        )}
+      </div>
+    );
+  }
 }