@zzish/math-rich-input 0.1.0

package/src/EquationEditorModal.css

@@ -0,0 +1,164 @@
+
+.EquationEditorModal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height: 100%;
+  background: black;
+  z-index: 99;
+  animation: 0.3s shade;
+  animation-fill-mode: forwards;
+}
+
+@keyframes shade {
+00% {
+  opacity: 0;
+}
+100% {
+  opacity: 0.6;
+}
+}
+
+.EquationEditorModal {
+  background: white;
+  border:1px solid #808080;
+  border-radius:10px;
+  box-shadow: 0px 2px 5px 1px #a0a0a0;
+  position:fixed;
+  max-width:500px;
+  width: 98%;
+  top:50%;
+  left:50%;
+  /* transform: translate(-50%,-50%); */
+  z-index: 100;
+  animation: 0.3s rise;
+  animation-fill-mode: forwards;
+}
+
+@keyframes rise {
+00% {
+  transform: translate(-50%,100%);
+  opacity:0.0;
+}
+100% {
+  transform: translate(-50%,-50%);
+  opacity:1.0;
+}
+}
+
+.EquationEditorModal-mobile {
+  background: white;
+  border:1px solid #808080;
+  border-radius:10px;
+  box-shadow: 0px 2px 5px 1px #a0a0a0;
+  position:fixed;
+  max-width:500px;
+  width: 99%;
+  top:0%;
+  left:50%;
+  transform: translate(-50%, 1px);
+  z-index: 100;
+}
+
+.EquationEditorModal .title {
+  font-size: 14px;
+  color: #404040;
+  text-align: left;
+  background: #E0E0E0;
+  border:0px;
+  border-radius:5px 5px 0px 0px;
+  height:30px;
+  padding:20px 0px 5px 20px;
+  margin:0px;
+}
+
+.EquationEditorModal-mobile .title {
+  font-size: 14px;
+  color: #404040;
+  text-align: left;
+  background: #E0E0E0;
+  border:0px;
+  border-radius:5px 5px 0px 0px;
+  height:30px;
+  padding:20px 0px 5px 20px;
+  margin:0px;
+}
+
+.EquationEditorModal .expertModeSwitch {
+   /* background: url(images/settings-icon.png) no-repeat; */
+  float:right;
+  /* width:36px;
+  height:36px; */
+}
+
+.EquationEditorModal .expertModeSwitch .switch{
+  margin-right:10px;
+  margin-left:10px;
+
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 35px;
+  height: 22px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #663676;
+  ;
+  /* background-color: #2196F3; */
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 18px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

package/src/EquationEditorModal.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import EquationEditor from './EquationEditor'
+
+import './EquationEditorModal.css';
+
+let GLOBAL_lastSelectedExpertMode = false
+
+export default class EquationEditorModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      useExpertMode: GLOBAL_lastSelectedExpertMode
+    }
+
+    this.handleCloseCallback = props.handleClose
+    this.handleInsertCallback = props.handleInsert
+  }
+
+  handleInsert = (latex) => {
+    this.handleInsertCallback(latex)
+  }
+
+  handleClose = () => {
+    this.handleCloseCallback()
+  }
+
+  componentDidMount() {
+  }
+
+  isMobile() {
+    return ((window.innerHeight > window.innerWidth) && (window.innerHeight < 820)) ||
+      (window.innerHeight < 500)
+  }
+
+  handleExpertModeSwitchChange(e) {
+    GLOBAL_lastSelectedExpertMode = this.expertModeSwitch.checked    
+    this.setState({useExpertMode:this.expertModeSwitch.checked})
+  }
+
+  render() {
+    let useClass="EquationEditorModal"
+    if (this.isMobile())
+       useClass="EquationEditorModal-mobile"
+
+    return (
+      <>
+        <div
+          className="EquationEditorModal-background"
+          onClick={this.handleClose} >
+        </div>
+        <div 
+          className={useClass}
+          ref={(r) => this.modalDiv = r} >
+          { !this.isMobile() && 
+            <div className="title">
+              Equation Editor
+              <div className="expertModeSwitch">
+                Expert mode
+                <label className="switch">
+                  <input type="checkbox"
+                    ref={(r) => this.expertModeSwitch = r} 
+                    onChange={(e) => this.handleExpertModeSwitchChange(e)}
+                    checked = {this.state.useExpertMode}
+                  />
+                  <span className="slider round"></span>
+                </label>
+              </div>
+            </div>
+          }
+          <EquationEditor 
+            ref={(r) => this.equationEditor = r} 
+            latex={this.props.latex}
+            useExpertMode={this.state.useExpertMode}
+            handleInsert={this.handleInsert}
+            handleCancel={this.handleClose}/>
+        </div>
+      </>
+    );
+  }
+};

package/src/MathRichArea.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+
+import katex from "katex";
+import {setupKatex} from "./katexHelper"
+import {rawTextToHtml} from './mathRichInputHelper'
+import {MIME_TYPE_TEX, MIME_TYPE_HTML, MIME_TYPE_ZZISH_HTML_MATH, 
+        isTextLatexMath, isTextHtml, isTextHtmlMath} from './mimeTypeHelper'
+
+
+function getAllTextNodes(node, nodes=null) {
+  if (node === null) {
+    console.warn("Deverloper supplied a null node. Ignoring")
+    return nodes
+  }
+
+  if (nodes === null) {
+    nodes = []
+  }
+
+  if (node.nodeType === Node.TEXT_NODE) {
+    nodes.push(node)
+    return nodes
+  }
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    if (node.className === "katex" || node.className === "MathRichInput")
+      return nodes
+    if (node.tagName === "SCRIPT")
+      return nodes
+    let render = node.getAttribute("data-render")
+    if (render !== null && render === "false") {
+      console.log("Ignoring")
+      return nodes
+    }      
+  } else if (node.nodeType !== Node.DOCUMENT_NODE) {
+    return nodes
+  }
+
+  if (node.childNodes === null || node.childNodes === undefined)
+    return nodes
+
+  for (let i = 0; i < node.childNodes.length; i++)
+    getAllTextNodes(node.childNodes[i], nodes)
+
+  return nodes
+}
+
+export function renderMathInNode(node) {
+  try {
+    let textNodes = getAllTextNodes(node)
+    for (let i = 0; i < textNodes.length; i++) {
+      try {
+        const text = textNodes[i].nodeValue
+        
+        let mime_type = null
+        if (isTextHtmlMath(text))
+          mime_type = MIME_TYPE_ZZISH_HTML_MATH
+        else if (isTextHtml(text))
+          mime_type = MIME_TYPE_HTML
+        else if (isTextLatexMath(text))
+          mime_type = MIME_TYPE_TEX
+
+        if (mime_type !== null) {
+          const html = rawTextToHtml(katex, text, mime_type)
+          const new_node = document.createElement("span")
+          new_node.innerHTML = html
+          textNodes[i].replaceWith(new_node)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+export function renderMathInNodeArray(nodes) {
+  for (let i = 0; i < nodes.length; i++)
+    renderMathInNode(nodes[i])
+}
+
+export default class MathRichArea extends React.Component {
+    
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  componentDidMount() {
+    try {
+      setupKatex()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  render() {
+    let html = rawTextToHtml(katex, this.props.children, this.props.mime_type)
+
+    return <span dangerouslySetInnerHTML={{__html: html}}></span>
+  }
+}

package/src/MathRichInput.css

@@ -0,0 +1,63 @@
+.MathRichInput-Container {
+  margin:10px;
+  border-radius:5px;
+}
+
+.MathRichInput-Container:focus-within {
+  background-color: white!important;
+  outline: 0px;
+  border:1px solid #663676;
+  /* box-shadow: inset 1px 1px 5px #a0a0a0; */
+}
+
+.MathRichInput-scrollview {
+  display:flex;
+  overflow:scroll;
+  border-radius:5px;
+  overflow: overlay;
+}
+
+.MathRichInput P {
+  padding:0px;
+  margin:0px
+}
+
+.MathRichInput {
+  font-size: 18px;
+  padding: 10px;
+  width: 100%;
+  border-radius: 5px;
+}
+
+.MathRichInput:focus {
+  outline:0;
+}
+
+.MathRichInput .katex {
+  border:0px;
+}
+
+.MathRichInput .base { /* Combine the katex and base class name to ensure the whole equation is surrounded */
+  background-color: #f0f0f0;
+  border: 0px;
+  border: 1px dotted #D0D0D0;
+  border-radius: 5px;
+  padding: 2px 2px 2px 2px;
+  margin: 0px 2px 0px 2px;
+}
+
+.katex .mathnormal {
+  /* font-family: KaTeX_Caligraphic; */
+   font-family: KaTeX_Math;
+   font-style: italic;
+}
+
+.MathRichInput .katex-error {
+  background-color: #f0f0f0;
+  border: 0px;
+  border: 1px dotted #ff8080;
+  border-radius: 5px;
+  padding: 2px 2px 2px 2px;
+  margin: 0px 2px 0px 2px;
+}
+