@@ -39,187 +39,124 @@ <h1 class="h5 my-2">
3939 </ div >
4040 </ div >
4141
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 >
163136 </ 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 >
168139 </ div >
169140 </ div >
170- < div class ="flex-grow-1 border ">
171- < div class ="pattern-tab-pane test-editor-container editor multiline h-100 "> </ div >
172- </ div >
173141 </ 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 >
178145 </ 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 >
198149 </ div >
199150 </ div >
200- < div class ="flex-grow-1 border ">
201- < div id ="dsl-editor-container " class ="h-100 "> </ div >
202- </ div >
203151 </ 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 >
223160 </ div >
224161 </ div >
225162 </ div >
@@ -259,4 +196,4 @@ <h1 class="h5 my-2">
259196 </ div >
260197</ body >
261198
262- </ html >
199+ </ html >
0 commit comments