@zzish/math-rich-input 0.1.42 → 0.1.44

package/src/Toolbar.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import katex from "katex";
 
-import AccentBar from "./AccentBar";
+import AccentBar from "./AccentBar.jsx";
 
 import "./Toolbar.css";
 
@@ -9,252 +9,238 @@ 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,
+    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);
     };
 
-    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"
+    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)
         );
-        return;
-      }
+    };
 
-      let inputBounds = node.getBoundingClientRect();
-      let thisBounds = thisBar.getBoundingClientRect();
+    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;
+            }
 
-      this.shouldUpdatePosition = false;
+            let inputBounds = node.getBoundingClientRect();
+            let thisBounds = thisBar.getBoundingClientRect();
 
-      // Vertically align above input field
-      let top = (thisBounds.height + BOTTOM_MARGIN) * -1;
+            this.shouldUpdatePosition = false;
 
-      // Horizontally align
-      let right = 0; // right align
+            // Vertically align above input field
+            let top = (thisBounds.height + BOTTOM_MARGIN + this.props.extraMargin) * -1;
 
-      let shouldHorizontiallyAlign = false;
-      if (thisBounds.width > inputBounds.width) {
-        shouldHorizontiallyAlign = true;
+            // Horizontally align
+            let right = 0; // right align
 
-        if (this.isInViewport(thisBar)) {
-          right = right - (thisBounds.width - inputBounds.width) / 2;
-        } // else remain right aligned
-      }
+            let shouldHorizontiallyAlign = false;
+            if (thisBounds.width > inputBounds.width) {
+                shouldHorizontiallyAlign = 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";
+                if (this.isInViewport(thisBar)) {
+                    right = right - (thisBounds.width - inputBounds.width) / 2;
+                } // else remain right aligned
+            }
+
+            this.setState({ right, top, shouldHorizontiallyAlign });
+        } else {
+            this.shouldUpdatePosition = true;
+        }
     }
 
-    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)
+    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";
             }
-          />
-        )}
-      </div>
-    );
-  }
+            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>
+        );
+    }
 }

package/src/index.js

@@ -1,9 +1,5 @@
-import MathRichInput from "./MathRichInput";
-import MathRichArea from "./MathRichArea";
-import { renderMathInNode } from "./MathRichArea";
+import MathRichInput from "./MathRichInput.jsx";
+import MathRichArea from "./MathRichArea.jsx";
+import { renderMathInNode } from "./MathRichArea.jsx";
 
-export {
-    MathRichInput,
-    MathRichArea,
-    renderMathInNode
-}
+export { MathRichInput, MathRichArea, renderMathInNode };