@@ -39,187 +39,124 @@ <h1 class="h5 my-2">
39
39
</ div >
40
40
</ div >
41
41
42
- < ul class ="nav nav-tabs " role ="tablist ">
43
- < li class ="nav-item " role ="presentation ">
44
- < button class ="nav-link active text-dark " id ="pattern-tab " data-bs-toggle ="tab "
45
- data-bs-target ="#pattern-tab-pane " type ="button " role ="tab " aria-controls ="pattern-tab-pane "
46
- aria-selected ="true ">
47
- < img src ="/images/icon-regex.svg "> < span class ="mx-2 "> Pattern</ span >
48
- </ button >
49
- </ li >
50
- < li class ="nav-item " role ="presentation ">
51
- < button class ="nav-link text-dark " id ="builder-tab " data-bs-toggle ="tab " data-bs-target ="#builder-tab-pane "
52
- type ="button " role ="tab " aria-controls ="builder-tab-pane " aria-selected ="false ">
53
- < span class ="fa-solid fa-brackets-curly "> </ span > < span class ="mx-2 "> Builder DSL</ span >
54
- </ button >
55
- </ li >
56
- </ ul >
57
-
58
- < div class ="tab-content ">
59
- < div class ="tab-pane show active h-100 " id ="pattern-tab-pane " role ="tabpanel " aria-labelledby ="pattern-tab "
60
- tabindex ="0 ">
61
- < div class ="d-flex flex-column h-100 ">
62
- < div class ="row flex-grow-1 ">
63
- < div class ="col-md-6 d-flex flex-column ">
64
- < div class ="h6 mt-3 mb-2 "> Regular Expression</ div >
65
- < div class ="border ">
66
- < div id ="expression-field-container " class ="d-flex flex-row-reverse ">
67
- < div class ="btn-group ">
68
- < button class ="btn btn-link btn-sm dropdown-toggle text-decoration-none bg-white " type ="button "
69
- data-bs-toggle ="dropdown " data-bs-auto-close ="outside " aria-expanded ="false ">
70
- < span class ="fa-solid fa-flag fa-sm "> </ span >
71
- </ button >
72
- < ul class ="dropdown-menu ">
73
- < li class ="match-options-item active-tick " data-value ="g ">
74
- < a class ="dropdown-item " href ="# ">
75
- < div class ="checkable ">
76
- < span class ="fw-bolder "> g</ span > < span > lobal</ span >
77
- </ div >
78
- < div class ="text-wrap text-muted ">
79
- Don't return after first match
80
- </ div >
81
- </ a >
82
- </ li >
83
- < li class ="match-options-item active-tick " data-value ="m ">
84
- < a class ="dropdown-item " href ="# ">
85
- < div class ="checkable ">
86
- < span class ="fw-bolder "> m</ span > ultiline
87
- </ div >
88
- < div class ="text-wrap text-muted ">
89
- ^ and $ match the start/end of line
90
- </ div >
91
- </ a >
92
- </ li >
93
- < li class ="match-options-item " data-value ="i ">
94
- < a class ="dropdown-item " href ="# ">
95
- < div class ="checkable ">
96
- case < span class ="fw-bolder "> i</ span > nsensitive
97
- </ div >
98
- < div class ="text-wrap text-muted ">
99
- Case insensitive match
100
- </ div >
101
- </ a >
102
- </ li >
103
- < li class ="match-options-item " data-value ="s ">
104
- < a class ="dropdown-item " href ="# ">
105
- < div class ="checkable ">
106
- < span class ="fw-bolder "> s</ span > ingle line
107
- </ div >
108
- < div class ="text-wrap text-muted ">
109
- Dot matches newline
110
- </ div >
111
- </ a >
112
- </ li >
113
- < li class ="match-options-item " data-value ="asciiOnlyWordCharacters ">
114
- < a class ="dropdown-item " href ="# ">
115
- < div class ="checkable ">
116
- ASCII only word
117
- </ div >
118
- < div class ="text-wrap text-muted ">
119
- Match only ASCII characters as word characters
120
- </ div >
121
- </ a >
122
- </ li >
123
- < li class ="match-options-item " data-value ="asciiOnlyDigits ">
124
- < a class ="dropdown-item " href ="# ">
125
- < div class ="checkable ">
126
- ASCII only digit
127
- </ div >
128
- < div class ="text-wrap text-muted ">
129
- Match only ASCII characters as digits
130
- </ div >
131
- </ a >
132
- </ li >
133
- < li class ="match-options-item " data-value ="asciiOnlyWhitespace ">
134
- < a class ="dropdown-item " href ="# ">
135
- < div class ="checkable ">
136
- ASCII only space
137
- </ div >
138
- < div class ="text-wrap text-muted ">
139
- Match only ASCII characters as space characters
140
- </ div >
141
- </ a >
142
- </ li >
143
- < li class ="match-options-item " data-value ="asciiOnlyCharacterClasses ">
144
- < a class ="dropdown-item " href ="# ">
145
- < div class ="checkable ">
146
- ASCII only POSIX properties
147
- </ div >
148
- < div class ="text-wrap text-muted ">
149
- Match only ASCII characters when matching character classes
150
- </ div >
151
- </ a >
152
- </ li >
153
- </ ul >
154
- </ div >
155
- < div id ="expression-field-error " class ="bg-white d-none ">
156
- < span class ="fa-solid fa-octagon-xmark text-danger align-middle p-2 "> </ span >
157
- </ div >
158
- </ div >
159
- </ div >
160
- < div class ="row justify-content-between ">
161
- < div class ="col ">
162
- < div class ="h6 mt-4 mb-2 "> Test String</ div >
42
+ < div class ="root-container ">
43
+ < div class ="d-flex flex-column h-100 ">
44
+ < div class ="row flex-grow-1 ">
45
+ < div class ="col-md-6 d-flex flex-column ">
46
+ < div class ="h6 mt-1 mb-2 "> Regular Expression</ div >
47
+ < div class ="border ">
48
+ < div id ="expression-field-container " class ="d-flex flex-row-reverse ">
49
+ < div class ="btn-group ">
50
+ < button class ="btn btn-link btn-sm dropdown-toggle text-decoration-none bg-white " type ="button "
51
+ data-bs-toggle ="dropdown " data-bs-auto-close ="outside " aria-expanded ="false ">
52
+ < span class ="fa-solid fa-flag fa-sm "> </ span >
53
+ </ button >
54
+ < ul class ="dropdown-menu ">
55
+ < li class ="match-options-item active-tick " data-value ="g ">
56
+ < a class ="dropdown-item " href ="# ">
57
+ < div class ="checkable ">
58
+ < span class ="fw-bolder "> g</ span > < span > lobal</ span >
59
+ </ div >
60
+ < div class ="text-wrap text-muted ">
61
+ Don't return after first match
62
+ </ div >
63
+ </ a >
64
+ </ li >
65
+ < li class ="match-options-item active-tick " data-value ="m ">
66
+ < a class ="dropdown-item " href ="# ">
67
+ < div class ="checkable ">
68
+ < span class ="fw-bolder "> m</ span > ultiline
69
+ </ div >
70
+ < div class ="text-wrap text-muted ">
71
+ ^ and $ match the start/end of line
72
+ </ div >
73
+ </ a >
74
+ </ li >
75
+ < li class ="match-options-item " data-value ="i ">
76
+ < a class ="dropdown-item " href ="# ">
77
+ < div class ="checkable ">
78
+ case < span class ="fw-bolder "> i</ span > nsensitive
79
+ </ div >
80
+ < div class ="text-wrap text-muted ">
81
+ Case insensitive match
82
+ </ div >
83
+ </ a >
84
+ </ li >
85
+ < li class ="match-options-item " data-value ="s ">
86
+ < a class ="dropdown-item " href ="# ">
87
+ < div class ="checkable ">
88
+ < span class ="fw-bolder "> s</ span > ingle line
89
+ </ div >
90
+ < div class ="text-wrap text-muted ">
91
+ Dot matches newline
92
+ </ div >
93
+ </ a >
94
+ </ li >
95
+ < li class ="match-options-item " data-value ="asciiOnlyWordCharacters ">
96
+ < a class ="dropdown-item " href ="# ">
97
+ < div class ="checkable ">
98
+ ASCII only word
99
+ </ div >
100
+ < div class ="text-wrap text-muted ">
101
+ Match only ASCII characters as word characters
102
+ </ div >
103
+ </ a >
104
+ </ li >
105
+ < li class ="match-options-item " data-value ="asciiOnlyDigits ">
106
+ < a class ="dropdown-item " href ="# ">
107
+ < div class ="checkable ">
108
+ ASCII only digit
109
+ </ div >
110
+ < div class ="text-wrap text-muted ">
111
+ Match only ASCII characters as digits
112
+ </ div >
113
+ </ a >
114
+ </ li >
115
+ < li class ="match-options-item " data-value ="asciiOnlyWhitespace ">
116
+ < a class ="dropdown-item " href ="# ">
117
+ < div class ="checkable ">
118
+ ASCII only space
119
+ </ div >
120
+ < div class ="text-wrap text-muted ">
121
+ Match only ASCII characters as space characters
122
+ </ div >
123
+ </ a >
124
+ </ li >
125
+ < li class ="match-options-item " data-value ="asciiOnlyCharacterClasses ">
126
+ < a class ="dropdown-item " href ="# ">
127
+ < div class ="checkable ">
128
+ ASCII only POSIX properties
129
+ </ div >
130
+ < div class ="text-wrap text-muted ">
131
+ Match only ASCII characters when matching character classes
132
+ </ div >
133
+ </ a >
134
+ </ li >
135
+ </ ul >
163
136
</ div >
164
- < div class ="col align-self-center ">
165
- < div class ="text-end mt-2 ">
166
- < span id ="match-count " class ="text-bg-light border px-3 py-1 "> no match</ span >
167
- </ div >
137
+ < div id ="expression-field-error " class ="bg-white d-none ">
138
+ < span class ="fa-solid fa-octagon-xmark text-danger align-middle p-2 "> </ span >
168
139
</ div >
169
140
</ div >
170
- < div class ="flex-grow-1 border ">
171
- < div class ="pattern-tab-pane test-editor-container editor multiline h-100 "> </ div >
172
- </ div >
173
141
</ div >
174
- < div class ="col-md-6 d-flex flex-column ">
175
- < div class ="h6 mt-3 mb-2 "> Builder DSL</ div >
176
- < div class ="flex-grow-1 border ">
177
- < div id ="dsl-view-container " class ="h-100 "> </ div >
142
+ < div class ="row justify-content-between ">
143
+ < div class ="col ">
144
+ < div class ="h6 mt-4 mb-2 "> Test String</ div >
178
145
</ div >
179
- </ div >
180
- </ div >
181
- </ div >
182
- </ div >
183
-
184
- < div class ="tab-pane h-100 " id ="builder-tab-pane " role ="tabpanel " aria-labelledby ="builder-tab " tabindex ="0 ">
185
- < div class ="d-flex flex-column h-100 ">
186
- < div class ="row flex-grow-1 ">
187
- < div class ="col-md-6 d-flex flex-column ">
188
- < div class ="d-flex flex-row mt-3 ">
189
- < div class ="h6 ">
190
- < span > Builder DSL</ span >
191
- < a href ="# ">
192
- < span id ="run-button " class ="text-white bg-primary mx-2 px-4 ">
193
- < span id ="run-button-icon " class ="fa-solid fa-play fa-xs fa-fw "> </ span >
194
- < span id ="run-button-spinner "
195
- class ="fa-duotone fa-spinner-third fa-spin fa-xs fa-fw d-none "> </ span >
196
- </ span >
197
- </ a >
146
+ < div class ="col align-self-center ">
147
+ < div class ="text-end mt-2 ">
148
+ < span id ="match-count " class ="text-bg-light border px-3 py-1 "> no match</ span >
198
149
</ div >
199
150
</ div >
200
- < div class ="flex-grow-1 border ">
201
- < div id ="dsl-editor-container " class ="h-100 "> </ div >
202
- </ div >
203
151
</ div >
204
- < div class ="col-md-6 d-flex flex-column ">
205
- < div class ="row justify-content-between ">
206
- < div class ="col ">
207
- < div class ="h6 mt-3 mb-2 "> Test String</ div >
208
- </ div >
209
- < div class ="col align-self-center ">
210
- < div class ="text-end mt-1 ">
211
- < span id ="dsl-match-count " class ="text-bg-light border px-3 py-1 "> no match</ span >
212
- </ div >
213
- </ div >
214
- </ div >
215
- < div class ="flex-grow-1 border ">
216
- < div class ="builder-tab-pane test-editor-container h-100 "> </ div >
217
- </ div >
218
- < div class ="h6 mt-4 mb-2 "> Match Information</ div >
219
- < div class ="flex-grow-1 bg-white border ">
220
- < div id ="match-info-container " class ="pattern-tab-pane overflow-scroll h-100 ">
221
- </ div >
222
- </ div >
152
+ < div class ="flex-grow-1 border ">
153
+ < div class ="test-editor-container editor multiline h-100 "> </ div >
154
+ </ div >
155
+ </ div >
156
+ < div class ="col-md-6 d-flex flex-column ">
157
+ < div class ="h6 mt-1 mb-2 "> Builder DSL</ div >
158
+ < div class ="flex-grow-1 border ">
159
+ < div id ="dsl-view-container " class ="h-100 "> </ div >
223
160
</ div >
224
161
</ div >
225
162
</ div >
@@ -259,4 +196,4 @@ <h1 class="h5 my-2">
259
196
</ div >
260
197
</ body >
261
198
262
- </ html >
199
+ </ html >
0 commit comments