@zzish/math-rich-input 0.1.48 → 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.
Files changed (11) hide show
  1. package/dist/index.js +1027 -133
  2. package/dist/standalone.js +2 -0
  3. package/dist/standalone.js.LICENSE.txt +29 -0
  4. package/package.json +13 -3
  5. package/src/EquationEditor.jsx +557 -527
  6. package/src/EquationEditorModal.jsx +104 -58
  7. package/src/MathRichInput.jsx +2877 -1938
  8. package/src/Toolbar.jsx +234 -219
  9. package/src/mathRichInputHelper.js +787 -557
  10. package/src/standalone.js +110 -0
  11. package/webpack.standalone.config.js +63 -0
package/src/EquationEditorModal.jsx CHANGED
@@ -6,73 +6,119 @@ import "./EquationEditorModal.css";
6
6
  let GLOBAL_lastSelectedExpertMode = false;
7
7
 
8
8
  export default class EquationEditorModal extends React.Component {
9
- constructor(props) {
10
- super(props);
9
+ constructor(props) {
10
+ super(props);
11
11
 
12
- this.state = {
13
- useExpertMode: GLOBAL_lastSelectedExpertMode,
14
- };
12
+ this.state = {
13
+ useExpertMode: GLOBAL_lastSelectedExpertMode,
14
+ };
15
15
 
16
- this.handleCloseCallback = props.handleClose;
17
- this.handleInsertCallback = props.handleInsert;
18
- }
16
+ this.handleCloseCallback = props.handleClose;
17
+ this.handleInsertCallback = props.handleInsert;
18
+ }
19
19
 
20
- handleInsert = (latex) => {
21
- this.handleInsertCallback(latex);
22
- };
20
+ handleInsert = (latex) => {
21
+ this.handleInsertCallback(latex);
22
+ };
23
23
 
24
- handleClose = () => {
25
- this.handleCloseCallback();
26
- };
24
+ handleClose = () => {
25
+ this.handleCloseCallback();
26
+ };
27
27
 
28
- componentDidMount() {}
28
+ componentDidMount() {
29
+ // Auto-focus when modal opens
30
+ // Use setTimeout to ensure child components are fully mounted
31
+ setTimeout(() => {
32
+ this.focusEquationEditor();
33
+ }, 100);
34
+ }
29
35
 
30
- isMobile() {
31
- return (
32
- (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
33
- window.innerHeight < 500
34
- );
36
+ componentDidUpdate(prevProps, prevState) {
37
+ // Re-focus when expert mode changes
38
+ if (prevState.useExpertMode !== this.state.useExpertMode) {
39
+ setTimeout(() => {
40
+ this.focusEquationEditor();
41
+ }, 100);
35
42
  }
43
+ }
36
44
 
37
- handleExpertModeSwitchChange(e) {
38
- GLOBAL_lastSelectedExpertMode = this.expertModeSwitch.checked;
39
- this.setState({ useExpertMode: this.expertModeSwitch.checked });
45
+ focusEquationEditor = () => {
46
+ console.log("🔍 Focusing equation editor...");
47
+ if (this.equationEditor) {
48
+ console.log("🔍 EquationEditor ref found");
49
+ if (this.state.useExpertMode) {
50
+ // Focus textarea in expert mode
51
+ console.log("🔍 Expert mode - focusing latexInput");
52
+ if (this.equationEditor.latexInput) {
53
+ this.equationEditor.latexInput.focus();
54
+ console.log("✅ LatexInput focused");
55
+ } else {
56
+ console.log("❌ LatexInput not found");
57
+ }
58
+ } else {
59
+ // Focus MathQuill in normal mode
60
+ console.log("🔍 Normal mode - focusing mathQuill");
61
+ if (this.equationEditor.mathQuill) {
62
+ this.equationEditor.mathQuill.focus();
63
+ console.log("✅ MathQuill focused");
64
+ } else {
65
+ console.log("❌ MathQuill not found");
66
+ }
67
+ }
68
+ } else {
69
+ console.log("❌ EquationEditor ref not found");
40
70
  }
71
+ };
41
72
 
42
- render() {
43
- let useClass = "EquationEditorModal";
44
- if (this.isMobile()) useClass = "EquationEditorModal-mobile";
73
+ isMobile() {
74
+ return (
75
+ (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
76
+ window.innerHeight < 500
77
+ );
78
+ }
45
79
 
46
- return (
47
- <>
48
- <div className="EquationEditorModal-background" onClick={this.handleClose}></div>
49
- <div className={useClass} ref={(r) => (this.modalDiv = r)}>
50
- {!this.isMobile() && (
51
- <div className="title">
52
- Equation Editor
53
- <div className="expertModeSwitch">
54
- Expert mode
55
- <label className="switch">
56
- <input
57
- type="checkbox"
58
- ref={(r) => (this.expertModeSwitch = r)}
59
- onChange={(e) => this.handleExpertModeSwitchChange(e)}
60
- checked={this.state.useExpertMode}
61
- />
62
- <span className="slider round"></span>
63
- </label>
64
- </div>
65
- </div>
66
- )}
67
- <EquationEditor
68
- ref={(r) => (this.equationEditor = r)}
69
- latex={this.props.latex}
70
- useExpertMode={this.state.useExpertMode}
71
- handleInsert={this.handleInsert}
72
- handleCancel={this.handleClose}
73
- />
74
- </div>
75
- </>
76
- );
77
- }
80
+ handleExpertModeSwitchChange(e) {
81
+ GLOBAL_lastSelectedExpertMode = this.expertModeSwitch.checked;
82
+ this.setState({ useExpertMode: this.expertModeSwitch.checked });
83
+ }
84
+
85
+ render() {
86
+ let useClass = "EquationEditorModal";
87
+ if (this.isMobile()) useClass = "EquationEditorModal-mobile";
88
+
89
+ return (
90
+ <>
91
+ <div
92
+ className="EquationEditorModal-background"
93
+ onClick={this.handleClose}
94
+ ></div>
95
+ <div className={useClass} ref={(r) => (this.modalDiv = r)}>
96
+ {!this.isMobile() && (
97
+ <div className="title">
98
+ Equation Editor
99
+ <div className="expertModeSwitch">
100
+ Expert mode
101
+ <label className="switch">
102
+ <input
103
+ type="checkbox"
104
+ ref={(r) => (this.expertModeSwitch = r)}
105
+ onChange={(e) => this.handleExpertModeSwitchChange(e)}
106
+ checked={this.state.useExpertMode}
107
+ />
108
+ <span className="slider round"></span>
109
+ </label>
110
+ </div>
111
+ </div>
112
+ )}
113
+ <EquationEditor
114
+ ref={(r) => (this.equationEditor = r)}
115
+ latex={this.props.latex}
116
+ useExpertMode={this.state.useExpertMode}
117
+ handleInsert={this.handleInsert}
118
+ handleCancel={this.handleClose}
119
+ />
120
+ </div>
121
+ </>
122
+ );
123
+ }
78
124
  }