Fossil SCM

Significant cleanups in and shortening of the legacy wysiwyg JS code.

stephan 2020-08-30 13:20 wikiedit-wysiwyg-legacy
Commit b8297d34bd3e0093bdce049770fec7de24afaf833c0474442fff1d75706cedaa
Parent 629bc0e131f29e2…
1 file changed +135 -205
~ src/fossil.page.wikiedit-wysiwyg-legacy.js
M src/fossil.page.wikiedit-wysiwyg-legacy.js
+135 -205
--- src/fossil.page.wikiedit-wysiwyg-legacy.js
+++ src/fossil.page.wikiedit-wysiwyg-legacy.js
@@ -2,15 +2,10 @@
22
 A slight adaptation of fossil's legacy wysiwyg wiki editor which
33
 makes it usable with the newer editor's edit widget replacement
44
 API.
55
66
 Requires: window.fossil, fossil.dom.
7
-
8
- Maintenance note: mkbuiltins strips anything which looks like a
9
- C++-style comment, even if it's in a string literal, and thus the
10
- runs of / characters in DOM element data attributes have been
11
- mangled to work around that.
127
 */
138
 (function(F/*fossil object*/){
149
 'use strict';
1510
 if(!F || !F.page || F.page.name!=='wikiedit') return;
1611
@@ -20,53 +15,72 @@
2015
 const head = document.head || document.querySelector('head'),
2116
 styleTag = document.createElement('style'),
2217
 styleCSS = `
2318
 .intLink { cursor: pointer; }
2419
 img.intLink { border: 0; }
20
+#wysiwyg-container {
21
+ max-width: calc(100% - 1em);
22
+ display: flex;
23
+ flex-direction: column;
24
+}
2525
 #wysiwygBox {
2626
 border: 1px #000000 solid;
27
- padding: 12px;
28
-}
29
-#wysiwygEditMode label { cursor: pointer; }
30
-#wysiwygBox {
31
- resize: body;
27
+ padding: 0 1em;
3228
 overflow: auto;
33
- width: calc(100% - 1em);
3429
 min-height: 20em;
3530
 }
31
+#wysiwygEditMode label { cursor: pointer; }
3632
 #wysiwyg-toolbars {
33
+ margin: 0 0 0.25em 0;
3734
 display: flex;
35
+ flex-wrap: wrap;
3836
 flex-direction: row;
37
+ align-items: flex-start;
38
+}
39
+#wysiwyg-toolbars > * {
40
+ margin: 0 0.5em 0.25em 0;
41
+ align-self: center;
42
+}
43
+#wysiwyg-toolBar1, #wysiwyg-toolBar2 {
44
+}
45
+#wysiwyg-toolBar1 > * { /* formatting buttons */
46
+ margin: 0 0.2em 0.2em 0;
47
+}
48
+#wysiwyg-toolBar2 > * { /* icons */
49
+ margin: 0 0.2em 0.2em 0;
50
+ border: 1px solid rgba(127,127,127,0.3);
51
+ align-self: end;
3952
 }
4053
 `;
4154
 head.appendChild(styleTag);
4255
 /* Adapted from https://stackoverflow.com/a/524721 */
4356
 styleTag.type = 'text/css';
44
- styleTag.appendChild(document.createTextNode(styleCSS));
57
+ D.append(styleTag, styleCSS);
4558
 })();
4659
4760
 const outerContainer = D.attr(D.div(), 'id', 'wysiwyg-container');
4861
4962
 const toolbars = D.attr(D.div(), 'id', 'wysiwyg-toolbars');
5063
 D.append(outerContainer, toolbars);
5164
52
- var select, div = D.attr(D.div(), 'id', 'wysiwygEditModeDiv');
65
+ var select, div;
66
+
67
+ const toolbar1 = D.attr(D.div(), 'id', 'wysiwyg-toolBar1');
68
+
5369
 const selectEditMode = select = D.attr(
5470
 D.attr(D.select(), 'id', 'wysiwygEditMode'),
5571
 'size',
5672
 1
5773
 );
58
- D.append(
59
- toolbars,
60
- D.append(div, select)
61
- );
74
+ D.append(toolbar1, select);
6275
 D.option(select, "0", "WYSIWYG");
6376
 D.option(select, "1", "Raw HTML");
6477
 select.selectedIndex = 0;
6578
66
- const toolbar1 = div = D.attr(D.div(), 'id', 'toolBar1');
67
- D.append(toolbars, toolbar1);
79
+
80
+ div = toolbar1;
81
+ D.append(toolbars, ' ', toolbar1);
6882
 select = D.addClass(D.select(), 'format');
6983
 select.dataset.format = "formatblock";
7084
 D.append(div, select);
7185
 D.option(select, '', '- formatting -');
7286
 D.option(select, "h1", "Title 1 <h1>");
@@ -114,46 +128,48 @@
114128
 );
115129
 D.option(select, "red", "Red");
116130
 D.option(select, "blue", "Blue");
117131
 D.option(select, "green", "Green");
118132
 D.option(select, "black", "Black");
133
+ D.option(select, "yellow", "Yellow");
134
+ D.option(select, "cyan", "Cyan");
135
+ D.option(select, "magenta", "Magenta");
119136
120
- const toolbar2 = div = D.attr(D.div(), 'id', 'toolBar2');
137
+ const toolbar2 = D.attr(D.div(), 'id', 'wysiwyg-toolBar2');
121138
 D.append(toolbars, toolbar2);
122
- var img = D.img();
123
- D.append(div, img);
124
- D.addClass(img, 'intLink');
125
- D.attr(img, 'title', 'Undo');
126
- img.dataset.format = 'undo';
127
- D.attr(
128
- img, 'src',
139
+
140
+ /**
141
+ Inject the icons...
142
+
143
+ mkbuiltins strips anything which looks like a C++-style comment,
144
+ even if it's in a string literal, and thus the runs of "/"
145
+ characters in the DOM element data attributes have been mangled
146
+ to work around that: we simply use \u002f for every 2nd slash.
147
+ */
148
+ (function f(title,format,src){
149
+ const img = D.img();
150
+ D.append(toolbar2, ' ', img);
151
+ D.addClass(img, 'intLink');
152
+ D.attr(img, 'title', title);
153
+ img.dataset.format = format;
154
+ D.attr(img, 'src', 'string'===typeof src ? src : src.join(''));
155
+ return f;
156
+ })(
157
+ 'Undo', 'undo',
129158
 ["data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7",
130159
 "/I19DV3NHa7P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f",
131160
 "/\u002f/\u002f/\u002f/yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq704680",
132161
 "7TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfE",
133
- "whdRIH4fh/DZMICe3/C4nBQBADs="].join('')
134
- );
135
-
136
- img = D.img();
137
- D.append(div, img);
138
- D.addClass(img, "intLink");
139
- D.attr(img, 'title', "Redo");
140
- img.dataset.format="redo";
141
- D.attr(
142
- img, 'src',
162
+ "whdRIH4fh/DZMICe3/C4nBQBADs="]
163
+ )(
164
+ 'Redo','redo',
143165
 ["data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1/",
144166
 "/\u002f/yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9Na",
145
- "EDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="].join('')
146
- );
147
-
148
- img = D.img();
149
- D.append(div, img);
150
- D.addClass(img, "intLink");
151
- D.attr(img, 'title', "Remove formatting");
152
- img.dataset.format="removeFormat";
153
- D.attr(
154
- img, 'src',
167
+ "EDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="]
168
+ )(
169
+ "Remove formatting",
170
+ "removeFormat",
155171
 ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AA",
156172
 "AABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwA",
157173
 "AAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB5",
158174
 "01ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqG",
159175
 "Xz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMz",
@@ -166,201 +182,110 @@
166182
 "5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwf",
167183
 "fj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv/\u002fvPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrj",
168184
 "b/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0/\u002f/\u002ffv77/\u002f8nLy+7MCc",
169185
 "XmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc66",
170186
 "6s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7/\u002f8/4/\u002f9/pgOnH",
171
- "6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="].join('')
172
- );
173
-
174
- img = D.img();
175
- D.append(div, img);
176
- D.addClass(img, "intLink");
177
- D.attr(img, 'title', "Bold");
178
- img.dataset.format="bold";
179
- D.attr(
180
- img, 'src',
187
+ "6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="]
188
+ )(
189
+ "Bold",
190
+ "bold",
181191
 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
182
- "YAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="].join('')
183
- );
184
-
185
- img = D.img();
186
- D.append(div, img);
187
- D.addClass(img, "intLink");
188
- D.attr(img, 'title', "Italic");
189
- img.dataset.format="italic";
190
- D.attr(
191
- img, 'src',
192
+ "YAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="]
193
+ )(
194
+ "Italic",
195
+ "italic",
192196
 ["data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf/\u002f/yH5BAEAAAMALA",
193
- "AAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="].join('')
194
- );
195
-
196
- img = D.img();
197
- D.append(div, img);
198
- D.addClass(img, "intLink");
199
- D.attr(img, 'title', "Underline");
200
- img.dataset.format="underline";
201
- D.attr(
202
- img, 'src',
197
+ "AAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="]
198
+ )(
199
+ "Underline",
200
+ "underline",
203201
 ["data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj/\u002f/\u002f/\u002f/\u002fyH5BAEAAAIALA",
204202
 "AAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA",
205
- "7"].join('')
206
- );
207
-
208
- img = D.img();
209
- D.append(div, img);
210
- D.addClass(img, "intLink");
211
- D.attr(img, 'title', "Left align");
212
- img.dataset.format="justifyleft";
213
- D.attr(
214
- img, 'src',
215
- ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
216
- "YAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="].join('')
217
- );
218
-
219
- img = D.img();
220
- D.append(div, img);
221
- D.addClass(img, "intLink");
222
- D.attr(img, 'title', "Center align");
223
- img.dataset.format="justifycenter";
224
- D.attr(
225
- img, 'src',
226
- ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
227
- "YAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"].join('')
228
- );
229
-
230
- img = D.img();
231
- D.append(div, img);
232
- D.addClass(img, "intLink");
233
- D.attr(img, 'title', "Right align");
234
- img.dataset.format="justifyright";
235
- D.attr(
236
- img, 'src',
237
- ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
238
- "YAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="].join('')
239
- );
240
-
241
- img = D.img();
242
- D.append(div, img);
243
- D.addClass(img, "intLink");
244
- D.attr(img, 'title', "Numbered list");
245
- img.dataset.format="insertorderedlist";
246
- D.attr(
247
- img, 'src',
203
+ "7"]
204
+ )(
205
+ "Left align",
206
+ "justifyleft",
207
+ ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
208
+ "YAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="]
209
+ )(
210
+ "Center align",
211
+ "justifycenter",
212
+ ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
213
+ "YAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"]
214
+ )(
215
+ "Right align",
216
+ "justifyright",
217
+ ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
218
+ "YAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="]
219
+ )(
220
+ "Numbered list",
221
+ "insertorderedlist",
248222
 ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P/\u002f/\u002f",
249223
 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEO",
250
- "zyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="].join('')
251
- );
252
-
253
- img = D.img();
254
- D.append(div, img);
255
- D.addClass(img, "intLink");
256
- D.attr(img, 'title', "Dotted list");
257
- img.dataset.format="insertunorderedlist";
258
-
259
- D.attr(
260
- img, 'src',
224
+ "zyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="]
225
+ )(
226
+ "Dotted list",
227
+ "insertunorderedlist",
261228
 ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv/\u002f/\u002f",
262229
 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud6",
263
- "4UwiuKnigGQliQuWOyKQykgAAOw=="].join('')
264
- );
265
-
266
- img = D.img();
267
- D.append(div, img);
268
- D.addClass(img, "intLink");
269
- D.attr(img, 'title', "Quote");
270
- img.dataset.format="formatblock";
271
- D.attr(
272
- img, 'src',
230
+ "4UwiuKnigGQliQuWOyKQykgAAOw=="]
231
+ )(
232
+ "Quote",
233
+ "formatblock",
273234
 ["data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2",
274235
 "R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P",
275236
 "/\u002f/\u002f/\u002f/\u002f/",
276237
 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f",
277238
 "/\u002f/\u002f/\u002fyH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2Cekk",
278239
 "ErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrT",
279
- "q/b7/i8fp8PAQA7"].join('')
280
- );
281
-
282
- img = D.img();
283
- D.append(div, img);
284
- D.addClass(img, "intLink");
285
- D.attr(img, 'title', "Delete indentation");
286
- img.dataset.format="outdent";
287
- D.attr(
288
- img, 'src',
240
+ "q/b7/i8fp8PAQA7"]
241
+ )(
242
+ "Delete indentation",
243
+ "outdent",
289244
 ["data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P",
290245
 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMcz",
291
- "sYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="].join('')
292
- );
293
-
294
- img = D.img();
295
- D.append(div, img);
296
- D.addClass(img, "intLink");
297
- D.attr(img, 'title', "Add indentation");
298
- img.dataset.format="indent";
299
- D.attr(
300
- img, 'src',
246
+ "sYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="]
247
+ )(
248
+ "Add indentation",
249
+ "indent",
301250
 ["data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3N",
302251
 "Ha7P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650",
303252
 "B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw=="
304
- ].join('')
305
- );
306
-
307
- img = D.img();
308
- D.append(div, img);
309
- D.addClass(img, "intLink");
310
- D.attr(img, 'title', "Hyperlink");
311
- img.dataset.format="createlink";
312
- D.attr(
313
- img, 'src',
253
+ ]
254
+ )(
255
+ "Hyperlink",
256
+ "createlink",
314257
 ["data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb",
315258
 "/I19Ha7Pv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq704682",
316259
 "7/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghG",
317
- "i9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"].join('')
318
- );
319
-
320
- img = D.img();
321
- D.append(div, img);
322
- D.addClass(img, "intLink");
323
- D.attr(img, 'title', "Cut");
324
- img.dataset.format="cut";
325
- D.attr(
326
- img, 'src',
260
+ "i9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"]
261
+ )(
262
+ "Cut",
263
+ "cut",
327264
 ["data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1",
328265
 "dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/",
329266
 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002fyH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnE",
330267
 "bGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9",
331
- "ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="].join('')
332
- );
333
-
334
- img = D.img();
335
- D.append(div, img);
336
- D.addClass(img, "intLink");
337
- D.attr(img, 'title', "Copy");
338
- img.dataset.format="copy";
339
- D.attr(
340
- img, 'src',
268
+ "ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="]
269
+ )(
270
+ "Copy",
271
+ "copy",
341272
 ["data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31",
342273
 "iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OP",
343274
 "s++bx/Pv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/",
344275
 "kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQ",
345276
 "ACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAA",
346
- "Grpy+wsbKzIiEAOw=="].join('')
347
- );
348
-
349
- img = D.img();
350
- D.append(div, img);
351
- D.addClass(img, "intLink");
352
- D.attr(img, 'title', "Paste");
353
- img.dataset.format="paste";
354
- D.attr(
355
- img, 'src',
277
+ "Grpy+wsbKzIiEAOw=="]
278
+ )(
279
+ "Paste",
280
+ "paste",
356281
 ["data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrp",
357282
 "qbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/",
358283
 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002fyH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvB",
359284
 "SyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQ",
360285
 "o9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAA",
361
- "MOaK+bLAOrtLUyt7i5uiUhADs="].join('')
286
+ "MOaK+bLAOrtLUyt7i5uiUhADs="]
362287
 );
363288
364289
 const oDoc = div = D.attr(D.div(), 'id', "wysiwygBox");
365290
 D.attr(div, 'contenteditable', 'true');
366291
 D.append(outerContainer, div);
@@ -448,27 +373,32 @@
448373
 content = bToMarkup ? oDoc.innerHTML : oDoc.innerText;
449374
 }
450375
 if(!setDocMode.linebreak){
451376
 setDocMode.linebreak = new RegExp("</p><p>","ig");
452377
 }
378
+ if(!setDocMode.toHide){
379
+ setDocMode.toHide = toolbars.querySelectorAll(
380
+ '#wysiwyg-toolBar1 > *:not(#wysiwygEditMode), '
381
+ +'#wysiwyg-toolBar2');
382
+ }
453383
 if (bToMarkup) {
454384
 /* WYSIWYG -> Markup */
455385
 // Legacy did this: content=content.replace(setDocMode.linebreak,"</p>\n\n<p>")
456386
 D.append(D.clearElement(oDoc), content)
457387
 oDoc.style.whiteSpace = "pre-wrap";
458
- D.addClass([toolbar1, toolbar2], 'hidden');
388
+ D.addClass(setDocMode.toHide, 'hidden');
459389
 } else {
460390
 /* Markup -> WYSIWYG */
461391
 oDoc.innerHTML = content;
462392
 oDoc.style.whiteSpace = "normal";
463
- D.removeClass([toolbar1, toolbar2], 'hidden');
393
+ D.removeClass(setDocMode.toHide, 'hidden');
464394
 }
465395
 oDoc.focus();
466396
 }
467397
468398
 F.page.wysiwyg = {
469
- oDoc: oDoc,
399
+ // only for debugging: oDoc: oDoc,
470400
 init: function(){
471401
 initDoc();
472402
 /* Must not be called outside of an onPageLoad handler, else it
473403
 can run before to the wikiedit app has been initialized. */
474404
 const content = F.page.wikiContent() || '';
475405
--- src/fossil.page.wikiedit-wysiwyg-legacy.js
+++ src/fossil.page.wikiedit-wysiwyg-legacy.js
@@ -2,15 +2,10 @@
2 A slight adaptation of fossil's legacy wysiwyg wiki editor which
3 makes it usable with the newer editor's edit widget replacement
4 API.
5
6 Requires: window.fossil, fossil.dom.
7
8 Maintenance note: mkbuiltins strips anything which looks like a
9 C++-style comment, even if it's in a string literal, and thus the
10 runs of / characters in DOM element data attributes have been
11 mangled to work around that.
12 */
13 (function(F/*fossil object*/){
14 'use strict';
15 if(!F || !F.page || F.page.name!=='wikiedit') return;
16
@@ -20,53 +15,72 @@
20 const head = document.head || document.querySelector('head'),
21 styleTag = document.createElement('style'),
22 styleCSS = `
23 .intLink { cursor: pointer; }
24 img.intLink { border: 0; }
 
 
 
 
 
25 #wysiwygBox {
26 border: 1px #000000 solid;
27 padding: 12px;
28 }
29 #wysiwygEditMode label { cursor: pointer; }
30 #wysiwygBox {
31 resize: body;
32 overflow: auto;
33 width: calc(100% - 1em);
34 min-height: 20em;
35 }
 
36 #wysiwyg-toolbars {
 
37 display: flex;
 
38 flex-direction: row;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39 }
40 `;
41 head.appendChild(styleTag);
42 /* Adapted from https://stackoverflow.com/a/524721 */
43 styleTag.type = 'text/css';
44 styleTag.appendChild(document.createTextNode(styleCSS));
45 })();
46
47 const outerContainer = D.attr(D.div(), 'id', 'wysiwyg-container');
48
49 const toolbars = D.attr(D.div(), 'id', 'wysiwyg-toolbars');
50 D.append(outerContainer, toolbars);
51
52 var select, div = D.attr(D.div(), 'id', 'wysiwygEditModeDiv');
 
 
 
53 const selectEditMode = select = D.attr(
54 D.attr(D.select(), 'id', 'wysiwygEditMode'),
55 'size',
56 1
57 );
58 D.append(
59 toolbars,
60 D.append(div, select)
61 );
62 D.option(select, "0", "WYSIWYG");
63 D.option(select, "1", "Raw HTML");
64 select.selectedIndex = 0;
65
66 const toolbar1 = div = D.attr(D.div(), 'id', 'toolBar1');
67 D.append(toolbars, toolbar1);
 
68 select = D.addClass(D.select(), 'format');
69 select.dataset.format = "formatblock";
70 D.append(div, select);
71 D.option(select, '', '- formatting -');
72 D.option(select, "h1", "Title 1 <h1>");
@@ -114,46 +128,48 @@
114 );
115 D.option(select, "red", "Red");
116 D.option(select, "blue", "Blue");
117 D.option(select, "green", "Green");
118 D.option(select, "black", "Black");
 
 
 
119
120 const toolbar2 = div = D.attr(D.div(), 'id', 'toolBar2');
121 D.append(toolbars, toolbar2);
122 var img = D.img();
123 D.append(div, img);
124 D.addClass(img, 'intLink');
125 D.attr(img, 'title', 'Undo');
126 img.dataset.format = 'undo';
127 D.attr(
128 img, 'src',
 
 
 
 
 
 
 
 
 
 
 
 
129 ["data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7",
130 "/I19DV3NHa7P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f",
131 "/\u002f/\u002f/\u002f/yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq704680",
132 "7TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfE",
133 "whdRIH4fh/DZMICe3/C4nBQBADs="].join('')
134 );
135
136 img = D.img();
137 D.append(div, img);
138 D.addClass(img, "intLink");
139 D.attr(img, 'title', "Redo");
140 img.dataset.format="redo";
141 D.attr(
142 img, 'src',
143 ["data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1/",
144 "/\u002f/yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9Na",
145 "EDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="].join('')
146 );
147
148 img = D.img();
149 D.append(div, img);
150 D.addClass(img, "intLink");
151 D.attr(img, 'title', "Remove formatting");
152 img.dataset.format="removeFormat";
153 D.attr(
154 img, 'src',
155 ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AA",
156 "AABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwA",
157 "AAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB5",
158 "01ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqG",
159 "Xz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMz",
@@ -166,201 +182,110 @@
166 "5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwf",
167 "fj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv/\u002fvPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrj",
168 "b/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0/\u002f/\u002ffv77/\u002f8nLy+7MCc",
169 "XmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc66",
170 "6s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7/\u002f8/4/\u002f9/pgOnH",
171 "6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="].join('')
172 );
173
174 img = D.img();
175 D.append(div, img);
176 D.addClass(img, "intLink");
177 D.attr(img, 'title', "Bold");
178 img.dataset.format="bold";
179 D.attr(
180 img, 'src',
181 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
182 "YAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="].join('')
183 );
184
185 img = D.img();
186 D.append(div, img);
187 D.addClass(img, "intLink");
188 D.attr(img, 'title', "Italic");
189 img.dataset.format="italic";
190 D.attr(
191 img, 'src',
192 ["data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf/\u002f/yH5BAEAAAMALA",
193 "AAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="].join('')
194 );
195
196 img = D.img();
197 D.append(div, img);
198 D.addClass(img, "intLink");
199 D.attr(img, 'title', "Underline");
200 img.dataset.format="underline";
201 D.attr(
202 img, 'src',
203 ["data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj/\u002f/\u002f/\u002f/\u002fyH5BAEAAAIALA",
204 "AAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA",
205 "7"].join('')
206 );
207
208 img = D.img();
209 D.append(div, img);
210 D.addClass(img, "intLink");
211 D.attr(img, 'title', "Left align");
212 img.dataset.format="justifyleft";
213 D.attr(
214 img, 'src',
215 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
216 "YAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="].join('')
217 );
218
219 img = D.img();
220 D.append(div, img);
221 D.addClass(img, "intLink");
222 D.attr(img, 'title', "Center align");
223 img.dataset.format="justifycenter";
224 D.attr(
225 img, 'src',
226 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
227 "YAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"].join('')
228 );
229
230 img = D.img();
231 D.append(div, img);
232 D.addClass(img, "intLink");
233 D.attr(img, 'title', "Right align");
234 img.dataset.format="justifyright";
235 D.attr(
236 img, 'src',
237 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
238 "YAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="].join('')
239 );
240
241 img = D.img();
242 D.append(div, img);
243 D.addClass(img, "intLink");
244 D.attr(img, 'title', "Numbered list");
245 img.dataset.format="insertorderedlist";
246 D.attr(
247 img, 'src',
248 ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P/\u002f/\u002f",
249 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEO",
250 "zyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="].join('')
251 );
252
253 img = D.img();
254 D.append(div, img);
255 D.addClass(img, "intLink");
256 D.attr(img, 'title', "Dotted list");
257 img.dataset.format="insertunorderedlist";
258
259 D.attr(
260 img, 'src',
261 ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv/\u002f/\u002f",
262 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud6",
263 "4UwiuKnigGQliQuWOyKQykgAAOw=="].join('')
264 );
265
266 img = D.img();
267 D.append(div, img);
268 D.addClass(img, "intLink");
269 D.attr(img, 'title', "Quote");
270 img.dataset.format="formatblock";
271 D.attr(
272 img, 'src',
273 ["data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2",
274 "R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P",
275 "/\u002f/\u002f/\u002f/\u002f/",
276 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f",
277 "/\u002f/\u002f/\u002fyH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2Cekk",
278 "ErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrT",
279 "q/b7/i8fp8PAQA7"].join('')
280 );
281
282 img = D.img();
283 D.append(div, img);
284 D.addClass(img, "intLink");
285 D.attr(img, 'title', "Delete indentation");
286 img.dataset.format="outdent";
287 D.attr(
288 img, 'src',
289 ["data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P",
290 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMcz",
291 "sYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="].join('')
292 );
293
294 img = D.img();
295 D.append(div, img);
296 D.addClass(img, "intLink");
297 D.attr(img, 'title', "Add indentation");
298 img.dataset.format="indent";
299 D.attr(
300 img, 'src',
301 ["data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3N",
302 "Ha7P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650",
303 "B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw=="
304 ].join('')
305 );
306
307 img = D.img();
308 D.append(div, img);
309 D.addClass(img, "intLink");
310 D.attr(img, 'title', "Hyperlink");
311 img.dataset.format="createlink";
312 D.attr(
313 img, 'src',
314 ["data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb",
315 "/I19Ha7Pv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq704682",
316 "7/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghG",
317 "i9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"].join('')
318 );
319
320 img = D.img();
321 D.append(div, img);
322 D.addClass(img, "intLink");
323 D.attr(img, 'title', "Cut");
324 img.dataset.format="cut";
325 D.attr(
326 img, 'src',
327 ["data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1",
328 "dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/",
329 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002fyH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnE",
330 "bGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9",
331 "ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="].join('')
332 );
333
334 img = D.img();
335 D.append(div, img);
336 D.addClass(img, "intLink");
337 D.attr(img, 'title', "Copy");
338 img.dataset.format="copy";
339 D.attr(
340 img, 'src',
341 ["data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31",
342 "iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OP",
343 "s++bx/Pv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/",
344 "kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQ",
345 "ACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAA",
346 "Grpy+wsbKzIiEAOw=="].join('')
347 );
348
349 img = D.img();
350 D.append(div, img);
351 D.addClass(img, "intLink");
352 D.attr(img, 'title', "Paste");
353 img.dataset.format="paste";
354 D.attr(
355 img, 'src',
356 ["data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrp",
357 "qbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/",
358 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002fyH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvB",
359 "SyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQ",
360 "o9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAA",
361 "MOaK+bLAOrtLUyt7i5uiUhADs="].join('')
362 );
363
364 const oDoc = div = D.attr(D.div(), 'id', "wysiwygBox");
365 D.attr(div, 'contenteditable', 'true');
366 D.append(outerContainer, div);
@@ -448,27 +373,32 @@
448 content = bToMarkup ? oDoc.innerHTML : oDoc.innerText;
449 }
450 if(!setDocMode.linebreak){
451 setDocMode.linebreak = new RegExp("</p><p>","ig");
452 }
 
 
 
 
 
453 if (bToMarkup) {
454 /* WYSIWYG -> Markup */
455 // Legacy did this: content=content.replace(setDocMode.linebreak,"</p>\n\n<p>")
456 D.append(D.clearElement(oDoc), content)
457 oDoc.style.whiteSpace = "pre-wrap";
458 D.addClass([toolbar1, toolbar2], 'hidden');
459 } else {
460 /* Markup -> WYSIWYG */
461 oDoc.innerHTML = content;
462 oDoc.style.whiteSpace = "normal";
463 D.removeClass([toolbar1, toolbar2], 'hidden');
464 }
465 oDoc.focus();
466 }
467
468 F.page.wysiwyg = {
469 oDoc: oDoc,
470 init: function(){
471 initDoc();
472 /* Must not be called outside of an onPageLoad handler, else it
473 can run before to the wikiedit app has been initialized. */
474 const content = F.page.wikiContent() || '';
475
--- src/fossil.page.wikiedit-wysiwyg-legacy.js
+++ src/fossil.page.wikiedit-wysiwyg-legacy.js
@@ -2,15 +2,10 @@
2 A slight adaptation of fossil's legacy wysiwyg wiki editor which
3 makes it usable with the newer editor's edit widget replacement
4 API.
5
6 Requires: window.fossil, fossil.dom.
 
 
 
 
 
7 */
8 (function(F/*fossil object*/){
9 'use strict';
10 if(!F || !F.page || F.page.name!=='wikiedit') return;
11
@@ -20,53 +15,72 @@
15 const head = document.head || document.querySelector('head'),
16 styleTag = document.createElement('style'),
17 styleCSS = `
18 .intLink { cursor: pointer; }
19 img.intLink { border: 0; }
20 #wysiwyg-container {
21 max-width: calc(100% - 1em);
22 display: flex;
23 flex-direction: column;
24 }
25 #wysiwygBox {
26 border: 1px #000000 solid;
27 padding: 0 1em;
 
 
 
 
28 overflow: auto;
 
29 min-height: 20em;
30 }
31 #wysiwygEditMode label { cursor: pointer; }
32 #wysiwyg-toolbars {
33 margin: 0 0 0.25em 0;
34 display: flex;
35 flex-wrap: wrap;
36 flex-direction: row;
37 align-items: flex-start;
38 }
39 #wysiwyg-toolbars > * {
40 margin: 0 0.5em 0.25em 0;
41 align-self: center;
42 }
43 #wysiwyg-toolBar1, #wysiwyg-toolBar2 {
44 }
45 #wysiwyg-toolBar1 > * { /* formatting buttons */
46 margin: 0 0.2em 0.2em 0;
47 }
48 #wysiwyg-toolBar2 > * { /* icons */
49 margin: 0 0.2em 0.2em 0;
50 border: 1px solid rgba(127,127,127,0.3);
51 align-self: end;
52 }
53 `;
54 head.appendChild(styleTag);
55 /* Adapted from https://stackoverflow.com/a/524721 */
56 styleTag.type = 'text/css';
57 D.append(styleTag, styleCSS);
58 })();
59
60 const outerContainer = D.attr(D.div(), 'id', 'wysiwyg-container');
61
62 const toolbars = D.attr(D.div(), 'id', 'wysiwyg-toolbars');
63 D.append(outerContainer, toolbars);
64
65 var select, div;
66
67 const toolbar1 = D.attr(D.div(), 'id', 'wysiwyg-toolBar1');
68
69 const selectEditMode = select = D.attr(
70 D.attr(D.select(), 'id', 'wysiwygEditMode'),
71 'size',
72 1
73 );
74 D.append(toolbar1, select);
 
 
 
75 D.option(select, "0", "WYSIWYG");
76 D.option(select, "1", "Raw HTML");
77 select.selectedIndex = 0;
78
79
80 div = toolbar1;
81 D.append(toolbars, ' ', toolbar1);
82 select = D.addClass(D.select(), 'format');
83 select.dataset.format = "formatblock";
84 D.append(div, select);
85 D.option(select, '', '- formatting -');
86 D.option(select, "h1", "Title 1 <h1>");
@@ -114,46 +128,48 @@
128 );
129 D.option(select, "red", "Red");
130 D.option(select, "blue", "Blue");
131 D.option(select, "green", "Green");
132 D.option(select, "black", "Black");
133 D.option(select, "yellow", "Yellow");
134 D.option(select, "cyan", "Cyan");
135 D.option(select, "magenta", "Magenta");
136
137 const toolbar2 = D.attr(D.div(), 'id', 'wysiwyg-toolBar2');
138 D.append(toolbars, toolbar2);
139
140 /**
141 Inject the icons...
142
143 mkbuiltins strips anything which looks like a C++-style comment,
144 even if it's in a string literal, and thus the runs of "/"
145 characters in the DOM element data attributes have been mangled
146 to work around that: we simply use \u002f for every 2nd slash.
147 */
148 (function f(title,format,src){
149 const img = D.img();
150 D.append(toolbar2, ' ', img);
151 D.addClass(img, 'intLink');
152 D.attr(img, 'title', title);
153 img.dataset.format = format;
154 D.attr(img, 'src', 'string'===typeof src ? src : src.join(''));
155 return f;
156 })(
157 'Undo', 'undo',
158 ["data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7",
159 "/I19DV3NHa7P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f",
160 "/\u002f/\u002f/\u002f/yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq704680",
161 "7TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfE",
162 "whdRIH4fh/DZMICe3/C4nBQBADs="]
163 )(
164 'Redo','redo',
 
 
 
 
 
 
 
165 ["data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1/",
166 "/\u002f/yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9Na",
167 "EDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="]
168 )(
169 "Remove formatting",
170 "removeFormat",
 
 
 
 
 
 
171 ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AA",
172 "AABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwA",
173 "AAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB5",
174 "01ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqG",
175 "Xz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMz",
@@ -166,201 +182,110 @@
182 "5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwf",
183 "fj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv/\u002fvPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrj",
184 "b/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0/\u002f/\u002ffv77/\u002f8nLy+7MCc",
185 "XmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc66",
186 "6s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7/\u002f8/4/\u002f9/pgOnH",
187 "6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="]
188 )(
189 "Bold",
190 "bold",
 
 
 
 
 
 
191 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
192 "YAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="]
193 )(
194 "Italic",
195 "italic",
 
 
 
 
 
 
196 ["data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf/\u002f/yH5BAEAAAMALA",
197 "AAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="]
198 )(
199 "Underline",
200 "underline",
 
 
 
 
 
 
201 ["data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj/\u002f/\u002f/\u002f/\u002fyH5BAEAAAIALA",
202 "AAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA",
203 "7"]
204 )(
205 "Left align",
206 "justifyleft",
207 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
208 "YAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="]
209 )(
210 "Center align",
211 "justifycenter",
212 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
213 "YAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"]
214 )(
215 "Right align",
216 "justifyright",
217 ["data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWAB",
218 "YAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="]
219 )(
220 "Numbered list",
221 "insertorderedlist",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222 ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P/\u002f/\u002f",
223 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEO",
224 "zyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="]
225 )(
226 "Dotted list",
227 "insertunorderedlist",
 
 
 
 
 
 
 
228 ["data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv/\u002f/\u002f",
229 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud6",
230 "4UwiuKnigGQliQuWOyKQykgAAOw=="]
231 )(
232 "Quote",
233 "formatblock",
 
 
 
 
 
 
234 ["data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2",
235 "R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P",
236 "/\u002f/\u002f/\u002f/\u002f/",
237 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f",
238 "/\u002f/\u002f/\u002fyH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2Cekk",
239 "ErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrT",
240 "q/b7/i8fp8PAQA7"]
241 )(
242 "Delete indentation",
243 "outdent",
 
 
 
 
 
 
244 ["data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P",
245 "/\u002f/yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMcz",
246 "sYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="]
247 )(
248 "Add indentation",
249 "indent",
 
 
 
 
 
 
250 ["data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3N",
251 "Ha7P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650",
252 "B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw=="
253 ]
254 )(
255 "Hyperlink",
256 "createlink",
 
 
 
 
 
 
257 ["data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb",
258 "/I19Ha7Pv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq704682",
259 "7/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghG",
260 "i9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"]
261 )(
262 "Cut",
263 "cut",
 
 
 
 
 
 
264 ["data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1",
265 "dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/",
266 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002fyH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnE",
267 "bGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9",
268 "ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="]
269 )(
270 "Copy",
271 "copy",
 
 
 
 
 
 
272 ["data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31",
273 "iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OP",
274 "s++bx/Pv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/",
275 "kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQ",
276 "ACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAA",
277 "Grpy+wsbKzIiEAOw=="]
278 )(
279 "Paste",
280 "paste",
 
 
 
 
 
 
281 ["data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrp",
282 "qbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/",
283 "/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002f/\u002fyH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvB",
284 "SyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQ",
285 "o9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAA",
286 "MOaK+bLAOrtLUyt7i5uiUhADs="]
287 );
288
289 const oDoc = div = D.attr(D.div(), 'id', "wysiwygBox");
290 D.attr(div, 'contenteditable', 'true');
291 D.append(outerContainer, div);
@@ -448,27 +373,32 @@
373 content = bToMarkup ? oDoc.innerHTML : oDoc.innerText;
374 }
375 if(!setDocMode.linebreak){
376 setDocMode.linebreak = new RegExp("</p><p>","ig");
377 }
378 if(!setDocMode.toHide){
379 setDocMode.toHide = toolbars.querySelectorAll(
380 '#wysiwyg-toolBar1 > *:not(#wysiwygEditMode), '
381 +'#wysiwyg-toolBar2');
382 }
383 if (bToMarkup) {
384 /* WYSIWYG -> Markup */
385 // Legacy did this: content=content.replace(setDocMode.linebreak,"</p>\n\n<p>")
386 D.append(D.clearElement(oDoc), content)
387 oDoc.style.whiteSpace = "pre-wrap";
388 D.addClass(setDocMode.toHide, 'hidden');
389 } else {
390 /* Markup -> WYSIWYG */
391 oDoc.innerHTML = content;
392 oDoc.style.whiteSpace = "normal";
393 D.removeClass(setDocMode.toHide, 'hidden');
394 }
395 oDoc.focus();
396 }
397
398 F.page.wysiwyg = {
399 // only for debugging: oDoc: oDoc,
400 init: function(){
401 initDoc();
402 /* Must not be called outside of an onPageLoad handler, else it
403 can run before to the wikiedit app has been initialized. */
404 const content = F.page.wikiContent() || '';
405

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button