@zzish/math-rich-input 0.1.4 → 0.1.6
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 +355 -250
- package/dist/math-rich-input.css +383 -384
- package/package.json +1 -3
- package/rollup.config.js +4 -4
- package/src/AccentBar.css +50 -43
- package/src/AccentBar.jsx +1007 -617
- package/src/EquationEditor.css +95 -99
- package/src/EquationEditor.jsx +416 -368
- package/src/EquationEditorModal.css +59 -68
- package/src/MathRichInput.css +30 -23
- package/src/MathRichInput.jsx +1239 -978
- package/src/SymbolButton.css +31 -31
- package/src/SymbolButton.jsx +47 -49
- package/src/Toolbar.css +20 -30
- package/src/Toolbar.jsx +177 -145
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
2
1
|
.EquationEditorModal-background {
|
|
3
2
|
position: fixed;
|
|
4
3
|
top: 0;
|
|
5
4
|
left: 0;
|
|
6
|
-
width:100%;
|
|
5
|
+
width: 100%;
|
|
7
6
|
height: 100%;
|
|
8
7
|
background: black;
|
|
9
8
|
z-index: 99;
|
|
@@ -12,24 +11,24 @@
|
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
@keyframes shade {
|
|
15
|
-
00% {
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
100% {
|
|
19
|
-
|
|
20
|
-
}
|
|
14
|
+
00% {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
}
|
|
17
|
+
100% {
|
|
18
|
+
opacity: 0.6;
|
|
19
|
+
}
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
.EquationEditorModal {
|
|
24
23
|
background: white;
|
|
25
|
-
border:1px solid #808080;
|
|
26
|
-
border-radius:10px;
|
|
24
|
+
border: 1px solid #808080;
|
|
25
|
+
border-radius: 10px;
|
|
27
26
|
box-shadow: 0px 2px 5px 1px #a0a0a0;
|
|
28
|
-
position:fixed;
|
|
29
|
-
max-width:500px;
|
|
27
|
+
position: fixed;
|
|
28
|
+
max-width: 500px;
|
|
30
29
|
width: 98%;
|
|
31
|
-
top:50%;
|
|
32
|
-
left:50%;
|
|
30
|
+
top: 50%;
|
|
31
|
+
left: 50%;
|
|
33
32
|
/* transform: translate(-50%,-50%); */
|
|
34
33
|
z-index: 100;
|
|
35
34
|
animation: 0.3s rise;
|
|
@@ -37,69 +36,63 @@
|
|
|
37
36
|
}
|
|
38
37
|
|
|
39
38
|
@keyframes rise {
|
|
40
|
-
00% {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
100% {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
39
|
+
00% {
|
|
40
|
+
transform: translate(-50%, 100%);
|
|
41
|
+
opacity: 0;
|
|
42
|
+
}
|
|
43
|
+
100% {
|
|
44
|
+
transform: translate(-50%, -50%);
|
|
45
|
+
opacity: 1;
|
|
46
|
+
}
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
.EquationEditorModal-mobile {
|
|
51
50
|
background: white;
|
|
52
|
-
border:1px solid #808080;
|
|
53
|
-
border-radius:10px;
|
|
51
|
+
border: 1px solid #808080;
|
|
52
|
+
border-radius: 10px;
|
|
54
53
|
box-shadow: 0px 2px 5px 1px #a0a0a0;
|
|
55
|
-
position:fixed;
|
|
56
|
-
max-width:500px;
|
|
54
|
+
position: fixed;
|
|
55
|
+
max-width: 500px;
|
|
57
56
|
width: 99%;
|
|
58
|
-
top:0%;
|
|
59
|
-
left:50%;
|
|
57
|
+
top: 0%;
|
|
58
|
+
left: 50%;
|
|
60
59
|
transform: translate(-50%, 1px);
|
|
61
60
|
z-index: 100;
|
|
62
61
|
}
|
|
63
62
|
|
|
64
63
|
.EquationEditorModal .title {
|
|
64
|
+
display: flex;
|
|
65
|
+
justify-content: space-between;
|
|
65
66
|
font-size: 14px;
|
|
66
67
|
color: #404040;
|
|
67
68
|
text-align: left;
|
|
68
|
-
background: #
|
|
69
|
-
border:0px;
|
|
70
|
-
border-radius:5px 5px 0px 0px;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
margin:0px;
|
|
69
|
+
background: #e0e0e0;
|
|
70
|
+
border: 0px;
|
|
71
|
+
border-radius: 5px 5px 0px 0px;
|
|
72
|
+
padding: 15px;
|
|
73
|
+
margin: 0px;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.EquationEditorModal-mobile .title {
|
|
77
|
+
display: flex;
|
|
78
|
+
justify-content: space-between;
|
|
77
79
|
font-size: 14px;
|
|
78
80
|
color: #404040;
|
|
79
81
|
text-align: left;
|
|
80
|
-
background: #
|
|
81
|
-
border:0px;
|
|
82
|
-
border-radius:5px 5px 0px 0px;
|
|
83
|
-
height:30px;
|
|
84
|
-
padding:
|
|
85
|
-
margin:0px;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.EquationEditorModal .expertModeSwitch {
|
|
89
|
-
/* background: url(images/settings-icon.png) no-repeat; */
|
|
90
|
-
float:right;
|
|
91
|
-
/* width:36px;
|
|
92
|
-
height:36px; */
|
|
82
|
+
background: #e0e0e0;
|
|
83
|
+
border: 0px;
|
|
84
|
+
border-radius: 5px 5px 0px 0px;
|
|
85
|
+
height: 30px;
|
|
86
|
+
padding: 15px;
|
|
87
|
+
margin: 0px;
|
|
93
88
|
}
|
|
94
89
|
|
|
95
|
-
.EquationEditorModal .expertModeSwitch .switch{
|
|
96
|
-
margin-
|
|
97
|
-
margin-left:10px;
|
|
98
|
-
|
|
90
|
+
.EquationEditorModal .expertModeSwitch .switch {
|
|
91
|
+
margin-left: 10px;
|
|
99
92
|
}
|
|
100
93
|
|
|
101
94
|
/* The switch - the box around the slider */
|
|
102
|
-
.switch {
|
|
95
|
+
.EquationEditorModal .switch {
|
|
103
96
|
position: relative;
|
|
104
97
|
display: inline-block;
|
|
105
98
|
width: 35px;
|
|
@@ -107,14 +100,14 @@
|
|
|
107
100
|
}
|
|
108
101
|
|
|
109
102
|
/* Hide default HTML checkbox */
|
|
110
|
-
.switch input {
|
|
103
|
+
.EquationEditorModal .switch input {
|
|
111
104
|
opacity: 0;
|
|
112
105
|
width: 0;
|
|
113
106
|
height: 0;
|
|
114
107
|
}
|
|
115
108
|
|
|
116
109
|
/* The slider */
|
|
117
|
-
.slider {
|
|
110
|
+
.EquationEditorModal .slider {
|
|
118
111
|
position: absolute;
|
|
119
112
|
cursor: pointer;
|
|
120
113
|
top: 0;
|
|
@@ -122,11 +115,11 @@
|
|
|
122
115
|
right: 0;
|
|
123
116
|
bottom: 0;
|
|
124
117
|
background-color: #ccc;
|
|
125
|
-
-webkit-transition: .4s;
|
|
126
|
-
transition: .4s;
|
|
118
|
+
-webkit-transition: 0.4s;
|
|
119
|
+
transition: 0.4s;
|
|
127
120
|
}
|
|
128
121
|
|
|
129
|
-
.slider:before {
|
|
122
|
+
.EquationEditorModal .slider:before {
|
|
130
123
|
position: absolute;
|
|
131
124
|
content: "";
|
|
132
125
|
height: 14px;
|
|
@@ -134,31 +127,29 @@
|
|
|
134
127
|
left: 4px;
|
|
135
128
|
bottom: 4px;
|
|
136
129
|
background-color: white;
|
|
137
|
-
-webkit-transition: .4s;
|
|
138
|
-
transition: .4s;
|
|
130
|
+
-webkit-transition: 0.4s;
|
|
131
|
+
transition: 0.4s;
|
|
139
132
|
}
|
|
140
133
|
|
|
141
|
-
input:checked + .slider {
|
|
134
|
+
.EquationEditorModal input:checked + .slider {
|
|
142
135
|
background-color: #663676;
|
|
143
|
-
;
|
|
144
|
-
/* background-color: #2196F3; */
|
|
145
136
|
}
|
|
146
137
|
|
|
147
|
-
input:focus + .slider {
|
|
148
|
-
box-shadow: 0 0 1px #
|
|
138
|
+
.EquationEditorModal input:focus + .slider {
|
|
139
|
+
box-shadow: 0 0 1px #2196f3;
|
|
149
140
|
}
|
|
150
141
|
|
|
151
|
-
input:checked + .slider:before {
|
|
142
|
+
.EquationEditorModal input:checked + .slider:before {
|
|
152
143
|
-webkit-transform: translateX(13px);
|
|
153
144
|
-ms-transform: translateX(13px);
|
|
154
145
|
transform: translateX(13px);
|
|
155
146
|
}
|
|
156
147
|
|
|
157
148
|
/* Rounded sliders */
|
|
158
|
-
.slider.round {
|
|
149
|
+
.EquationEditorModal .slider.round {
|
|
159
150
|
border-radius: 18px;
|
|
160
151
|
}
|
|
161
152
|
|
|
162
|
-
.slider.round:before {
|
|
153
|
+
.EquationEditorModal .slider.round:before {
|
|
163
154
|
border-radius: 50%;
|
|
164
|
-
}
|
|
155
|
+
}
|
package/src/MathRichInput.css
CHANGED
|
@@ -1,25 +1,32 @@
|
|
|
1
|
+
*,
|
|
2
|
+
:after,
|
|
3
|
+
:before {
|
|
4
|
+
-webkit-box-sizing: border-box;
|
|
5
|
+
-moz-box-sizing: border-box;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
}
|
|
8
|
+
|
|
1
9
|
.MathRichInput-Container {
|
|
2
|
-
margin:10px;
|
|
3
|
-
border-radius:5px;
|
|
10
|
+
margin: 10px;
|
|
11
|
+
border-radius: 5px;
|
|
4
12
|
}
|
|
5
13
|
|
|
6
14
|
.MathRichInput-Container:focus-within {
|
|
7
|
-
background-color: white!important;
|
|
15
|
+
background-color: white !important;
|
|
8
16
|
outline: 0px;
|
|
9
|
-
border:1px solid #663676;
|
|
10
|
-
/* box-shadow: inset 1px 1px 5px #a0a0a0; */
|
|
17
|
+
border: 1px solid #663676;
|
|
11
18
|
}
|
|
12
19
|
|
|
13
20
|
.MathRichInput-scrollview {
|
|
14
|
-
display:flex;
|
|
15
|
-
overflow:scroll;
|
|
16
|
-
border-radius:5px;
|
|
21
|
+
display: flex;
|
|
22
|
+
overflow: scroll;
|
|
23
|
+
border-radius: 5px;
|
|
17
24
|
overflow: overlay;
|
|
18
25
|
}
|
|
19
26
|
|
|
20
|
-
.MathRichInput
|
|
21
|
-
padding:0px;
|
|
22
|
-
margin:0px
|
|
27
|
+
.MathRichInput p {
|
|
28
|
+
padding: 0px;
|
|
29
|
+
margin: 0px;
|
|
23
30
|
}
|
|
24
31
|
|
|
25
32
|
.MathRichInput {
|
|
@@ -27,29 +34,30 @@
|
|
|
27
34
|
padding: 10px;
|
|
28
35
|
width: 100%;
|
|
29
36
|
border-radius: 5px;
|
|
37
|
+
background-color: #fff;
|
|
30
38
|
}
|
|
31
39
|
|
|
32
40
|
.MathRichInput:focus {
|
|
33
|
-
outline:0;
|
|
41
|
+
outline: 0;
|
|
34
42
|
}
|
|
35
43
|
|
|
36
44
|
.MathRichInput .katex {
|
|
37
|
-
border:0px;
|
|
45
|
+
border: 0px;
|
|
38
46
|
}
|
|
39
47
|
|
|
40
|
-
.MathRichInput .base {
|
|
48
|
+
.MathRichInput .base {
|
|
49
|
+
/* Combine the katex and base class name to ensure the whole equation is surrounded */
|
|
41
50
|
background-color: #f0f0f0;
|
|
42
51
|
border: 0px;
|
|
43
|
-
border: 1px dotted #
|
|
52
|
+
border: 1px dotted #d0d0d0;
|
|
44
53
|
border-radius: 5px;
|
|
45
|
-
padding: 2px
|
|
46
|
-
margin: 0px 2px
|
|
54
|
+
padding: 2px;
|
|
55
|
+
margin: 0px 2px;
|
|
47
56
|
}
|
|
48
57
|
|
|
49
58
|
.katex .mathnormal {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
font-style: italic;
|
|
59
|
+
font-family: KaTeX_Math;
|
|
60
|
+
font-style: italic;
|
|
53
61
|
}
|
|
54
62
|
|
|
55
63
|
.MathRichInput .katex-error {
|
|
@@ -57,7 +65,6 @@
|
|
|
57
65
|
border: 0px;
|
|
58
66
|
border: 1px dotted #ff8080;
|
|
59
67
|
border-radius: 5px;
|
|
60
|
-
padding: 2px
|
|
61
|
-
margin: 0px 2px
|
|
68
|
+
padding: 2px;
|
|
69
|
+
margin: 0px 2px;
|
|
62
70
|
}
|
|
63
|
-
|