@zzish/math-rich-input 0.1.47 → 0.1.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1040 -117
- package/dist/math-rich-input.css +1 -1
- package/dist/standalone.js +2 -0
- package/dist/standalone.js.LICENSE.txt +29 -0
- package/package.json +13 -3
- package/src/EquationEditor.jsx +557 -527
- package/src/EquationEditorModal.jsx +104 -58
- package/src/MathRichInput.jsx +2892 -1924
- package/src/Toolbar.jsx +234 -219
- package/src/mathRichInputHelper.js +787 -557
- package/src/standalone.js +110 -0
- package/webpack.standalone.config.js +63 -0
- package/dist/index.css +0 -1
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { createRoot } from "react-dom/client";
|
|
3
|
+
import { MathRichInput } from "./index.js";
|
|
4
|
+
|
|
5
|
+
// Import CSS files
|
|
6
|
+
import "./MathRichInput.css";
|
|
7
|
+
import "./EquationEditorModal.css";
|
|
8
|
+
import "./AccentBar.css";
|
|
9
|
+
import "./Toolbar.css";
|
|
10
|
+
import "./EquationEditor.css";
|
|
11
|
+
import "./SymbolButton.css";
|
|
12
|
+
|
|
13
|
+
class MathRichInputElement extends HTMLElement {
|
|
14
|
+
constructor() {
|
|
15
|
+
super();
|
|
16
|
+
this.root = null;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
connectedCallback() {
|
|
20
|
+
this.render();
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
disconnectedCallback() {
|
|
24
|
+
if (this.root) {
|
|
25
|
+
this.root.unmount();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
static get observedAttributes() {
|
|
30
|
+
return [
|
|
31
|
+
"value",
|
|
32
|
+
"placeholder",
|
|
33
|
+
"readonly",
|
|
34
|
+
"disabled",
|
|
35
|
+
"mimetype",
|
|
36
|
+
"outputtex",
|
|
37
|
+
];
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
41
|
+
// Avoid infinite re-render loop by checking if value actually changed
|
|
42
|
+
if (oldValue !== newValue) {
|
|
43
|
+
this.render();
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
render() {
|
|
48
|
+
const value = this.getAttribute("value") || "";
|
|
49
|
+
const placeholder = this.getAttribute("placeholder") || "";
|
|
50
|
+
const readonly = this.hasAttribute("readonly");
|
|
51
|
+
const disabled = this.hasAttribute("disabled");
|
|
52
|
+
const mimeType = this.getAttribute("mimetype") || "";
|
|
53
|
+
const outputTexAttr = this.getAttribute("outputtex");
|
|
54
|
+
const outputTex =
|
|
55
|
+
outputTexAttr !== "false" && this.hasAttribute("outputtex");
|
|
56
|
+
|
|
57
|
+
// Create container if it doesn't exist
|
|
58
|
+
if (!this.querySelector(".math-rich-input-container")) {
|
|
59
|
+
const container = document.createElement("div");
|
|
60
|
+
container.className = "math-rich-input-container";
|
|
61
|
+
this.appendChild(container);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const container = this.querySelector(".math-rich-input-container");
|
|
65
|
+
|
|
66
|
+
if (!this.root) {
|
|
67
|
+
this.root = createRoot(container);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
this.root.render(
|
|
71
|
+
React.createElement(MathRichInput, {
|
|
72
|
+
value: value,
|
|
73
|
+
placeholder: placeholder,
|
|
74
|
+
readOnly: readonly,
|
|
75
|
+
disabled: disabled,
|
|
76
|
+
mimeType: mimeType,
|
|
77
|
+
outputTex: outputTex,
|
|
78
|
+
className: this.className || "",
|
|
79
|
+
onChange: (data, options) => {
|
|
80
|
+
const { value: newValue, mimeType: newMimeType } = data;
|
|
81
|
+
|
|
82
|
+
// Only update attributes if they actually changed to avoid infinite re-render
|
|
83
|
+
const currentValue = this.getAttribute("value") || "";
|
|
84
|
+
const currentMimeType = this.getAttribute("mimetype") || "";
|
|
85
|
+
|
|
86
|
+
if (newValue !== currentValue) {
|
|
87
|
+
this.setAttribute("value", newValue);
|
|
88
|
+
}
|
|
89
|
+
if (newMimeType !== currentMimeType) {
|
|
90
|
+
this.setAttribute("mimetype", newMimeType);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
this.dispatchEvent(
|
|
94
|
+
new CustomEvent("change", {
|
|
95
|
+
detail: {
|
|
96
|
+
value: newValue,
|
|
97
|
+
mimeType: newMimeType,
|
|
98
|
+
},
|
|
99
|
+
})
|
|
100
|
+
);
|
|
101
|
+
},
|
|
102
|
+
})
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Define the web component
|
|
108
|
+
customElements.define("math-rich-input", MathRichInputElement);
|
|
109
|
+
|
|
110
|
+
export default MathRichInputElement;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const path = require("path");
|
|
2
|
+
|
|
3
|
+
module.exports = {
|
|
4
|
+
mode: "production",
|
|
5
|
+
entry: "./src/standalone.js",
|
|
6
|
+
output: {
|
|
7
|
+
path: path.resolve(__dirname, "dist"),
|
|
8
|
+
filename: "standalone.js",
|
|
9
|
+
library: {
|
|
10
|
+
type: "module",
|
|
11
|
+
},
|
|
12
|
+
environment: {
|
|
13
|
+
module: true,
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
experiments: {
|
|
17
|
+
outputModule: true,
|
|
18
|
+
},
|
|
19
|
+
module: {
|
|
20
|
+
rules: [
|
|
21
|
+
{
|
|
22
|
+
test: /\.jsx?$/,
|
|
23
|
+
exclude: /node_modules/,
|
|
24
|
+
use: {
|
|
25
|
+
loader: "babel-loader",
|
|
26
|
+
options: {
|
|
27
|
+
presets: [
|
|
28
|
+
["@babel/preset-env", { targets: "defaults" }],
|
|
29
|
+
["@babel/preset-react", { runtime: "classic" }],
|
|
30
|
+
],
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
test: /\.css$/,
|
|
36
|
+
use: [
|
|
37
|
+
"style-loader",
|
|
38
|
+
"css-loader",
|
|
39
|
+
{
|
|
40
|
+
loader: "postcss-loader",
|
|
41
|
+
options: {
|
|
42
|
+
postcssOptions: {
|
|
43
|
+
plugins: [require("postcss-nested")],
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
},
|
|
51
|
+
resolve: {
|
|
52
|
+
extensions: [".js", ".jsx"],
|
|
53
|
+
alias: {
|
|
54
|
+
react: require.resolve("react"),
|
|
55
|
+
"react-dom/client": require.resolve("react-dom/client"),
|
|
56
|
+
"react-dom": require.resolve("react-dom"),
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
externals: {
|
|
60
|
+
// No externals - bundle everything
|
|
61
|
+
},
|
|
62
|
+
};
|
|
63
|
+
|
package/dist/index.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}
|