@zzish/math-rich-input 0.1.0

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@zzish/math-rich-input",
+  "version": "0.1.0",
+  "description": "React component for user to enter rich text with embedded math equations.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zzish/math-rich-input"
+  },
+  "license": "MIT",
+  "author:": {
+    "name": "Charles Wiles",
+    "email": "charles@zzish.com"
+  },
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rollup --config"
+  },
+  "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"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/preset-env": "^7.13.10",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/register": "^7.13.8",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "rollup": "^2.41.4",
+    "rollup-plugin-css-only": "^3.1.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,31 @@
+import { babel } from "@rollup/plugin-babel";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import css from "rollup-plugin-css-only";
+
+const extensions = [".js", ".jsx"];
+
+export default {
+    input: "src/index.js",
+    output: {
+        file: "dist/index.js",
+        // format: "cjs",
+    },
+    plugins: [
+        nodeResolve({ main: true }),
+        css({
+            output: "math-rich-input.css"
+        }),
+        babel({ 
+            babelHelpers: "bundled",
+            exclude: "node_modules/**", 
+            extensions,
+            presets: ["@babel/env", "@babel/react"],
+            plugins: ["@babel/plugin-proposal-class-properties"]
+        }),
+        commonjs({
+            extensions,
+        }),
+    ],
+    external: ["react", "react-dom"],
+};

package/src/AccentBar.css

@@ -0,0 +1,169 @@
+
+/* 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;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+  padding:5px;
+	animation: 0.4s fadeIn1;
+  animation-fill-mode: forwards;
+}
+
+.AccentBar-compact {
+  position: fixed;
+  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;
+}
+
+.AccentBar-outerContainer {
+  overflow-y:scroll;
+  border-radius:5px;
+  overflow: overlay;
+}
+
+.AccentBar-innerContainer {
+  height:350px; /* Height of overall box */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1.0;
+  }
+}
+
+.AccentBar .type-a-letter {
+  color: #A0A0A0;
+  font-family:sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  height: 36px;
+  padding-top:12px;
+  padding-left:20px;
+}
+
+.AccentBar-button {
+  font-family:sans-serif;
+  font-size: 17px;
+  width:40px;
+  height: 36px;
+  background: #f4f4f4;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 6px;
+}
+
+.AB-compact {
+  margin: 0px;
+  background: white;
+}
+
+.AB-narrow {
+  width:30px;
+}
+
+.AccentBar-button:hover {
+  /* filter: saturate(2.0); */
+  color: white;
+  background: #663676;
+  cursor: pointer;
+  box-shadow: 1px 1px 3px #808080;
+	animation: 2s grow;
+  animation-fill-mode: forwards;
+}
+
+@keyframes grow {
+  00% {
+    transform: scale(1);
+    box-shadow: 0px 0px 0px #808080;
+  } 
+  10% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  90% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  100% {
+    transform: scale(1.8);
+    box-shadow: 1px 1px 3px #808080;
+  }
+}
+
+.AccentBar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.AccentBar .tabBar {
+  background: white;
+  text-align: left;
+  border:0px;
+  padding:0px 0px 10px 0px;
+  margin:5px;
+}
+
+.AccentBar .tab {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  text-align: left;
+  border:0px;
+  height:30px;
+  padding:2px 5px 2px 5px;
+  margin:2px;
+  border-bottom: 4px solid #d0d0d0;
+}
+
+.AccentBar .tab:hover {
+  cursor:pointer
+}
+
+.AccentBar .tab-selected {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  text-align: left;
+  border:0px;
+  height:30px;
+  padding:2px 5px 2px 5px;
+  margin:2px;
+  border-bottom: 4px solid #663676;
+}
+
+.AccentBar .section-label {
+  font-size: 13px;
+  font-weight: bold;
+  /* color: #A0A0A0; */
+  color: #663676;
+  margin-top:8px;
+  margin-left:8px;
+  margin-bottom:4px;
+}
+
+.AccentBar .replace-section {
+  min-height: 70px;
+}
+
+.AccentBar .tabArea {
+  animation: 0.4s fadeIn1;
+  animation-fill-mode: forwards;
+}