@zzish/math-rich-input 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -17,8 +17,6 @@
   },
   "dependencies": {
     "katex": "^0.12.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-mathquill": "^1.0.1",
     "react-transition-group": "^4.4.1",
     "web-vitals": "^0.2.4"

package/rollup.config.js

@@ -14,14 +14,14 @@ export default {
     plugins: [
         nodeResolve({ main: true }),
         css({
-            output: "math-rich-input.css"
+            output: "math-rich-input.css",
         }),
-        babel({ 
+        babel({
             babelHelpers: "bundled",
-            exclude: "node_modules/**", 
+            exclude: "node_modules/**",
             extensions,
             presets: ["@babel/env", "@babel/react"],
-            plugins: ["@babel/plugin-proposal-class-properties"]
+            plugins: ["@babel/plugin-proposal-class-properties"],
         }),
         commonjs({
             extensions,

package/src/AccentBar.css

@@ -1,16 +1,15 @@
-
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {
   position: fixed;
   z-index: 1;
-  width:348px;  /* max of 346px to ensure fits on Moto G4 mobile device screens */
-  background-color: white;
+  width: 360px;
+  background-color: #fff;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
-  padding:5px;
-	animation: 0.4s fadeIn1;
+  padding: 5px;
+  animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
 
@@ -21,52 +20,62 @@
   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;
+  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;
 }
 
 .AccentBar-outerContainer {
-  overflow-y:scroll;
-  border-radius:5px;
-  overflow: overlay;
+  overflow-y: scroll;
+  border-radius: 5px;
 }
 
 .AccentBar-innerContainer {
-  height:350px; /* Height of overall box */
+  height: 350px;
 }
 
 @keyframes fadeIn1 {
   0% {
     opacity: 0;
-  } 
+  }
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
+.AccentBar .symbols-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+  grid-auto-rows: minmax(min-content, max-content);
+  grid-gap: 3px;
+}
+
+.AccentBar .insert-grid {
+  padding: 5px;
+}
+
 .AccentBar .type-a-letter {
-  color: #A0A0A0;
-  font-family:sans-serif;
+  grid-column: 1/-1;
+  color: #a0a0a0;
+  font-family: sans-serif;
   font-size: 14px;
   font-weight: bold;
   height: 36px;
-  padding-top:12px;
-  padding-left:20px;
+  padding-top: 12px;
+  padding-left: 20px;
 }
 
 .AccentBar-button {
-  font-family:sans-serif;
+  font-family: sans-serif;
   font-size: 17px;
-  width:40px;
+  width: 40px;
   height: 36px;
   background: #f4f4f4;
   border-radius: 5px;
   border: 0px;
   padding: 1px;
-  margin: 6px;
 }
 
 .AB-compact {
@@ -75,16 +84,15 @@
 }
 
 .AB-narrow {
-  width:30px;
+  width: 36px;
 }
 
 .AccentBar-button:hover {
-  /* filter: saturate(2.0); */
   color: white;
   background: #663676;
   cursor: pointer;
   box-shadow: 1px 1px 3px #808080;
-	animation: 2s grow;
+  animation: 2s grow;
   animation-fill-mode: forwards;
 }
 
@@ -92,7 +100,7 @@
   00% {
     transform: scale(1);
     box-shadow: 0px 0px 0px #808080;
-  } 
+  }
   10% {
     transform: scale(1.3);
     box-shadow: 1px 1px 3px #808080;
@@ -116,9 +124,8 @@
 .AccentBar .tabBar {
   background: white;
   text-align: left;
-  border:0px;
-  padding:0px 0px 10px 0px;
-  margin:5px;
+  border: 0px;
+  padding: 10px 0;
 }
 
 .AccentBar .tab {
@@ -126,15 +133,15 @@
   font-weight: bold;
   color: #404040;
   text-align: left;
-  border:0px;
-  height:30px;
-  padding:2px 5px 2px 5px;
-  margin:2px;
+  border: 0px;
+  height: 30px;
+  padding: 2px 5px 2px 5px;
+  margin: 2px;
   border-bottom: 4px solid #d0d0d0;
 }
 
 .AccentBar .tab:hover {
-  cursor:pointer
+  cursor: pointer;
 }
 
 .AccentBar .tab-selected {
@@ -142,21 +149,21 @@
   font-weight: bold;
   color: #404040;
   text-align: left;
-  border:0px;
-  height:30px;
-  padding:2px 5px 2px 5px;
-  margin:2px;
+  border: 0px;
+  height: 30px;
+  padding: 2px 5px 2px 5px;
+  margin: 2px;
   border-bottom: 4px solid #663676;
 }
 
 .AccentBar .section-label {
+  grid-column: 1/-1;
   font-size: 13px;
   font-weight: bold;
-  /* color: #A0A0A0; */
   color: #663676;
-  margin-top:8px;
-  margin-left:8px;
-  margin-bottom:4px;
+  margin-top: 8px;
+  margin-left: 8px;
+  margin-bottom: 4px;
 }
 
 .AccentBar .replace-section {
@@ -166,4 +173,4 @@
 .AccentBar .tabArea {
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
-}
+}