PluginProbe
Gutenberg / 14.7.0
Gutenberg v14.7.0
24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 All 403 releases
gutenberg / build / format-library / index.js

index.js in Gutenberg 14.7.0, at build/format-library/index.js

1,854 lines 57.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /******/ (function() { // webpackBootstrap
2 /******/ "use strict";
3 /******/ // The require scope
4 /******/ var __webpack_require__ = {};
5 /******/
6 /************************************************************************/
7 /******/ /* webpack/runtime/make namespace object */
8 /******/ !function() {
9 /******/ // define __esModule on exports
10 /******/ __webpack_require__.r = function(exports) {
11 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
12 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
13 /******/ }
14 /******/ Object.defineProperty(exports, '__esModule', { value: true });
15 /******/ };
16 /******/ }();
17 /******/
18 /************************************************************************/
19 var __webpack_exports__ = {};
20 // ESM COMPAT FLAG
21 __webpack_require__.r(__webpack_exports__);
22
23 ;// CONCATENATED MODULE: external ["wp","richText"]
24 var external_wp_richText_namespaceObject = window["wp"]["richText"];
25 ;// CONCATENATED MODULE: external ["wp","element"]
26 var external_wp_element_namespaceObject = window["wp"]["element"];
27 ;// CONCATENATED MODULE: external ["wp","i18n"]
28 var external_wp_i18n_namespaceObject = window["wp"]["i18n"];
29 ;// CONCATENATED MODULE: external ["wp","blockEditor"]
30 var external_wp_blockEditor_namespaceObject = window["wp"]["blockEditor"];
31 ;// CONCATENATED MODULE: external ["wp","primitives"]
32 var external_wp_primitives_namespaceObject = window["wp"]["primitives"];
33 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/format-bold.js
34
35
36 /**
37 * WordPress dependencies
38 */
39
40 const formatBold = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
41 xmlns: "http://www.w3.org/2000/svg",
42 viewBox: "0 0 24 24"
43 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
44 d: "M14.7 11.3c1-.6 1.5-1.6 1.5-3 0-2.3-1.3-3.4-4-3.4H7v14h5.8c1.4 0 2.5-.3 3.3-1 .8-.7 1.2-1.7 1.2-2.9.1-1.9-.8-3.1-2.6-3.7zm-5.1-4h2.3c.6 0 1.1.1 1.4.4.3.3.5.7.5 1.2s-.2 1-.5 1.2c-.3.3-.8.4-1.4.4H9.6V7.3zm4.6 9c-.4.3-1 .4-1.7.4H9.6v-3.9h2.9c.7 0 1.3.2 1.7.5.4.3.6.8.6 1.5s-.2 1.2-.6 1.5z"
45 }));
46 /* harmony default export */ var format_bold = (formatBold);
47
48 ;// CONCATENATED MODULE: ./packages/format-library/build-module/bold/index.js
49
50
51 /**
52 * WordPress dependencies
53 */
54
55
56
57
58 const bold_name = 'core/bold';
59
60 const title = (0,external_wp_i18n_namespaceObject.__)('Bold');
61
62 const bold = {
63 name: bold_name,
64 title,
65 tagName: 'strong',
66 className: null,
67
68 edit(_ref) {
69 let {
70 isActive,
71 value,
72 onChange,
73 onFocus
74 } = _ref;
75
76 function onToggle() {
77 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
78 type: bold_name,
79 title
80 }));
81 }
82
83 function onClick() {
84 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
85 type: bold_name
86 }));
87 onFocus();
88 }
89
90 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
91 type: "primary",
92 character: "b",
93 onUse: onToggle
94 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
95 name: "bold",
96 icon: format_bold,
97 title: title,
98 onClick: onClick,
99 isActive: isActive,
100 shortcutType: "primary",
101 shortcutCharacter: "b"
102 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.__unstableRichTextInputEvent, {
103 inputType: "formatBold",
104 onInput: onToggle
105 }));
106 }
107
108 };
109
110 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/code.js
111
112
113 /**
114 * WordPress dependencies
115 */
116
117 const code = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
118 viewBox: "0 0 24 24",
119 xmlns: "http://www.w3.org/2000/svg"
120 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
121 d: "M20.8 10.7l-4.3-4.3-1.1 1.1 4.3 4.3c.1.1.1.3 0 .4l-4.3 4.3 1.1 1.1 4.3-4.3c.7-.8.7-1.9 0-2.6zM4.2 11.8l4.3-4.3-1-1-4.3 4.3c-.7.7-.7 1.8 0 2.5l4.3 4.3 1.1-1.1-4.3-4.3c-.2-.1-.2-.3-.1-.4z"
122 }));
123 /* harmony default export */ var library_code = (code);
124
125 ;// CONCATENATED MODULE: ./packages/format-library/build-module/code/index.js
126
127
128 /**
129 * WordPress dependencies
130 */
131
132
133
134
135 const code_name = 'core/code';
136
137 const code_title = (0,external_wp_i18n_namespaceObject.__)('Inline code');
138
139 const code_code = {
140 name: code_name,
141 title: code_title,
142 tagName: 'code',
143 className: null,
144
145 __unstableInputRule(value) {
146 const BACKTICK = '`';
147 const {
148 start,
149 text
150 } = value;
151 const characterBefore = text.slice(start - 1, start); // Quick check the text for the necessary character.
152
153 if (characterBefore !== BACKTICK) {
154 return value;
155 }
156
157 const textBefore = text.slice(0, start - 1);
158 const indexBefore = textBefore.lastIndexOf(BACKTICK);
159
160 if (indexBefore === -1) {
161 return value;
162 }
163
164 const startIndex = indexBefore;
165 const endIndex = start - 2;
166
167 if (startIndex === endIndex) {
168 return value;
169 }
170
171 value = (0,external_wp_richText_namespaceObject.remove)(value, startIndex, startIndex + 1);
172 value = (0,external_wp_richText_namespaceObject.remove)(value, endIndex, endIndex + 1);
173 value = (0,external_wp_richText_namespaceObject.applyFormat)(value, {
174 type: code_name
175 }, startIndex, endIndex);
176 return value;
177 },
178
179 edit(_ref) {
180 let {
181 value,
182 onChange,
183 onFocus,
184 isActive
185 } = _ref;
186
187 function onClick() {
188 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
189 type: code_name,
190 title: code_title
191 }));
192 onFocus();
193 }
194
195 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
196 type: "access",
197 character: "x",
198 onUse: onClick
199 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
200 icon: library_code,
201 title: code_title,
202 onClick: onClick,
203 isActive: isActive,
204 role: "menuitemcheckbox"
205 }));
206 }
207
208 };
209
210 ;// CONCATENATED MODULE: external ["wp","components"]
211 var external_wp_components_namespaceObject = window["wp"]["components"];
212 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/keyboard-return.js
213
214
215 /**
216 * WordPress dependencies
217 */
218
219 const keyboardReturn = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
220 xmlns: "http://www.w3.org/2000/svg",
221 viewBox: "-2 -2 24 24"
222 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
223 d: "M6.734 16.106l2.176-2.38-1.093-1.028-3.846 4.158 3.846 4.157 1.093-1.027-2.176-2.38h2.811c1.125 0 2.25.03 3.374 0 1.428-.001 3.362-.25 4.963-1.277 1.66-1.065 2.868-2.906 2.868-5.859 0-2.479-1.327-4.896-3.65-5.93-1.82-.813-3.044-.8-4.806-.788l-.567.002v1.5c.184 0 .368 0 .553-.002 1.82-.007 2.704-.014 4.21.657 1.854.827 2.76 2.657 2.76 4.561 0 2.472-.973 3.824-2.178 4.596-1.258.807-2.864 1.04-4.163 1.04h-.02c-1.115.03-2.229 0-3.344 0H6.734z"
224 }));
225 /* harmony default export */ var keyboard_return = (keyboardReturn);
226
227 ;// CONCATENATED MODULE: ./packages/format-library/build-module/image/index.js
228
229
230 /**
231 * WordPress dependencies
232 */
233
234
235
236
237
238
239 const ALLOWED_MEDIA_TYPES = ['image'];
240 const image_name = 'core/image';
241
242 const image_title = (0,external_wp_i18n_namespaceObject.__)('Inline image');
243
244 const image_image = {
245 name: image_name,
246 title: image_title,
247 keywords: [(0,external_wp_i18n_namespaceObject.__)('photo'), (0,external_wp_i18n_namespaceObject.__)('media')],
248 object: true,
249 tagName: 'img',
250 className: null,
251 attributes: {
252 className: 'class',
253 style: 'style',
254 url: 'src',
255 alt: 'alt'
256 },
257 edit: Edit
258 };
259
260 function InlineUI(_ref) {
261 let {
262 value,
263 onChange,
264 activeObjectAttributes,
265 contentRef
266 } = _ref;
267 const {
268 style
269 } = activeObjectAttributes;
270 const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(style === null || style === void 0 ? void 0 : style.replace(/\D/g, ''));
271 const popoverAnchor = (0,external_wp_richText_namespaceObject.useAnchor)({
272 editableContentElement: contentRef.current,
273 value,
274 settings: image_image
275 });
276 return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Popover, {
277 placement: "bottom",
278 focusOnMount: false,
279 anchor: popoverAnchor,
280 className: "block-editor-format-toolbar__image-popover"
281 }, (0,external_wp_element_namespaceObject.createElement)("form", {
282 className: "block-editor-format-toolbar__image-container-content",
283 onSubmit: event => {
284 const newReplacements = value.replacements.slice();
285 newReplacements[value.start] = {
286 type: image_name,
287 attributes: { ...activeObjectAttributes,
288 style: width ? `width: ${width}px;` : ''
289 }
290 };
291 onChange({ ...value,
292 replacements: newReplacements
293 });
294 event.preventDefault();
295 }
296 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.TextControl, {
297 className: "block-editor-format-toolbar__image-container-value",
298 type: "number",
299 label: (0,external_wp_i18n_namespaceObject.__)('Width'),
300 value: width,
301 min: 1,
302 onChange: newWidth => setWidth(newWidth)
303 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Button, {
304 icon: keyboard_return,
305 label: (0,external_wp_i18n_namespaceObject.__)('Apply'),
306 type: "submit"
307 })));
308 }
309
310 function Edit(_ref2) {
311 let {
312 value,
313 onChange,
314 onFocus,
315 isObjectActive,
316 activeObjectAttributes,
317 contentRef
318 } = _ref2;
319 const [isModalOpen, setIsModalOpen] = (0,external_wp_element_namespaceObject.useState)(false);
320
321 function openModal() {
322 setIsModalOpen(true);
323 }
324
325 function closeModal() {
326 setIsModalOpen(false);
327 }
328
329 return (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.MediaUploadCheck, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
330 icon: (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.SVG, {
331 xmlns: "http://www.w3.org/2000/svg",
332 viewBox: "0 0 24 24"
333 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Path, {
334 d: "M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z"
335 })),
336 title: image_title,
337 onClick: openModal,
338 isActive: isObjectActive
339 }), isModalOpen && (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.MediaUpload, {
340 allowedTypes: ALLOWED_MEDIA_TYPES,
341 onSelect: _ref3 => {
342 let {
343 id,
344 url,
345 alt,
346 width: imgWidth
347 } = _ref3;
348 closeModal();
349 onChange((0,external_wp_richText_namespaceObject.insertObject)(value, {
350 type: image_name,
351 attributes: {
352 className: `wp-image-${id}`,
353 style: `width: ${Math.min(imgWidth, 150)}px;`,
354 url,
355 alt
356 }
357 }));
358 onFocus();
359 },
360 onClose: closeModal,
361 render: _ref4 => {
362 let {
363 open
364 } = _ref4;
365 open();
366 return null;
367 }
368 }), isObjectActive && (0,external_wp_element_namespaceObject.createElement)(InlineUI, {
369 value: value,
370 onChange: onChange,
371 activeObjectAttributes: activeObjectAttributes,
372 contentRef: contentRef
373 }));
374 }
375
376 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/format-italic.js
377
378
379 /**
380 * WordPress dependencies
381 */
382
383 const formatItalic = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
384 xmlns: "http://www.w3.org/2000/svg",
385 viewBox: "0 0 24 24"
386 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
387 d: "M12.5 5L10 19h1.9l2.5-14z"
388 }));
389 /* harmony default export */ var format_italic = (formatItalic);
390
391 ;// CONCATENATED MODULE: ./packages/format-library/build-module/italic/index.js
392
393
394 /**
395 * WordPress dependencies
396 */
397
398
399
400
401 const italic_name = 'core/italic';
402
403 const italic_title = (0,external_wp_i18n_namespaceObject.__)('Italic');
404
405 const italic = {
406 name: italic_name,
407 title: italic_title,
408 tagName: 'em',
409 className: null,
410
411 edit(_ref) {
412 let {
413 isActive,
414 value,
415 onChange,
416 onFocus
417 } = _ref;
418
419 function onToggle() {
420 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
421 type: italic_name,
422 title: italic_title
423 }));
424 }
425
426 function onClick() {
427 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
428 type: italic_name
429 }));
430 onFocus();
431 }
432
433 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
434 type: "primary",
435 character: "i",
436 onUse: onToggle
437 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
438 name: "italic",
439 icon: format_italic,
440 title: italic_title,
441 onClick: onClick,
442 isActive: isActive,
443 shortcutType: "primary",
444 shortcutCharacter: "i"
445 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.__unstableRichTextInputEvent, {
446 inputType: "formatItalic",
447 onInput: onToggle
448 }));
449 }
450
451 };
452
453 ;// CONCATENATED MODULE: external ["wp","url"]
454 var external_wp_url_namespaceObject = window["wp"]["url"];
455 ;// CONCATENATED MODULE: external ["wp","htmlEntities"]
456 var external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"];
457 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/link-off.js
458
459
460 /**
461 * WordPress dependencies
462 */
463
464 const linkOff = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
465 xmlns: "http://www.w3.org/2000/svg",
466 viewBox: "0 0 24 24"
467 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
468 d: "M15.6 7.3h-.7l1.6-3.5-.9-.4-3.9 8.5H9v1.5h2l-1.3 2.8H8.4c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7H10V7.3H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H9l-1.4 3.2.9.4 5.7-12.5h1.4c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.9 0 5.2-2.3 5.2-5.2 0-2.9-2.4-5.2-5.2-5.2z"
469 }));
470 /* harmony default export */ var link_off = (linkOff);
471
472 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/link.js
473
474
475 /**
476 * WordPress dependencies
477 */
478
479 const link_link = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
480 xmlns: "http://www.w3.org/2000/svg",
481 viewBox: "0 0 24 24"
482 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
483 d: "M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z"
484 }));
485 /* harmony default export */ var library_link = (link_link);
486
487 ;// CONCATENATED MODULE: external ["wp","a11y"]
488 var external_wp_a11y_namespaceObject = window["wp"]["a11y"];
489 ;// CONCATENATED MODULE: external ["wp","data"]
490 var external_wp_data_namespaceObject = window["wp"]["data"];
491 ;// CONCATENATED MODULE: ./packages/format-library/build-module/link/utils.js
492 /**
493 * WordPress dependencies
494 */
495
496 /**
497 * Check for issues with the provided href.
498 *
499 * @param {string} href The href.
500 *
501 * @return {boolean} Is the href invalid?
502 */
503
504 function isValidHref(href) {
505 if (!href) {
506 return false;
507 }
508
509 const trimmedHref = href.trim();
510
511 if (!trimmedHref) {
512 return false;
513 } // Does the href start with something that looks like a URL protocol?
514
515
516 if (/^\S+:/.test(trimmedHref)) {
517 const protocol = (0,external_wp_url_namespaceObject.getProtocol)(trimmedHref);
518
519 if (!(0,external_wp_url_namespaceObject.isValidProtocol)(protocol)) {
520 return false;
521 } // Add some extra checks for http(s) URIs, since these are the most common use-case.
522 // This ensures URIs with an http protocol have exactly two forward slashes following the protocol.
523
524
525 if (protocol.startsWith('http') && !/^https?:\/\/[^\/\s]/i.test(trimmedHref)) {
526 return false;
527 }
528
529 const authority = (0,external_wp_url_namespaceObject.getAuthority)(trimmedHref);
530
531 if (!(0,external_wp_url_namespaceObject.isValidAuthority)(authority)) {
532 return false;
533 }
534
535 const path = (0,external_wp_url_namespaceObject.getPath)(trimmedHref);
536
537 if (path && !(0,external_wp_url_namespaceObject.isValidPath)(path)) {
538 return false;
539 }
540
541 const queryString = (0,external_wp_url_namespaceObject.getQueryString)(trimmedHref);
542
543 if (queryString && !(0,external_wp_url_namespaceObject.isValidQueryString)(queryString)) {
544 return false;
545 }
546
547 const fragment = (0,external_wp_url_namespaceObject.getFragment)(trimmedHref);
548
549 if (fragment && !(0,external_wp_url_namespaceObject.isValidFragment)(fragment)) {
550 return false;
551 }
552 } // Validate anchor links.
553
554
555 if (trimmedHref.startsWith('#') && !(0,external_wp_url_namespaceObject.isValidFragment)(trimmedHref)) {
556 return false;
557 }
558
559 return true;
560 }
561 /**
562 * Generates the format object that will be applied to the link text.
563 *
564 * @param {Object} options
565 * @param {string} options.url The href of the link.
566 * @param {string} options.type The type of the link.
567 * @param {string} options.id The ID of the link.
568 * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.
569 *
570 * @return {Object} The final format object.
571 */
572
573 function createLinkFormat(_ref) {
574 let {
575 url,
576 type,
577 id,
578 opensInNewWindow
579 } = _ref;
580 const format = {
581 type: 'core/link',
582 attributes: {
583 url
584 }
585 };
586 if (type) format.attributes.type = type;
587 if (id) format.attributes.id = id;
588
589 if (opensInNewWindow) {
590 format.attributes.target = '_blank';
591 format.attributes.rel = 'noreferrer noopener';
592 }
593
594 return format;
595 }
596 /* eslint-disable jsdoc/no-undefined-types */
597
598 /**
599 * Get the start and end boundaries of a given format from a rich text value.
600 *
601 *
602 * @param {RichTextValue} value the rich text value to interrogate.
603 * @param {string} format the identifier for the target format (e.g. `core/link`, `core/bold`).
604 * @param {number?} startIndex optional startIndex to seek from.
605 * @param {number?} endIndex optional endIndex to seek from.
606 * @return {Object} object containing start and end values for the given format.
607 */
608
609 /* eslint-enable jsdoc/no-undefined-types */
610
611 function getFormatBoundary(value, format) {
612 var _newFormats$startInde, _newFormats$endIndex, _newFormats;
613
614 let startIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : value.start;
615 let endIndex = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : value.end;
616 const EMPTY_BOUNDARIES = {
617 start: null,
618 end: null
619 };
620 const {
621 formats
622 } = value;
623 let targetFormat;
624 let initialIndex;
625
626 if (!(formats !== null && formats !== void 0 && formats.length)) {
627 return EMPTY_BOUNDARIES;
628 } // Clone formats to avoid modifying source formats.
629
630
631 const newFormats = formats.slice();
632 const formatAtStart = (_newFormats$startInde = newFormats[startIndex]) === null || _newFormats$startInde === void 0 ? void 0 : _newFormats$startInde.find(_ref2 => {
633 let {
634 type
635 } = _ref2;
636 return type === format.type;
637 });
638 const formatAtEnd = (_newFormats$endIndex = newFormats[endIndex]) === null || _newFormats$endIndex === void 0 ? void 0 : _newFormats$endIndex.find(_ref3 => {
639 let {
640 type
641 } = _ref3;
642 return type === format.type;
643 });
644 const formatAtEndMinusOne = (_newFormats = newFormats[endIndex - 1]) === null || _newFormats === void 0 ? void 0 : _newFormats.find(_ref4 => {
645 let {
646 type
647 } = _ref4;
648 return type === format.type;
649 });
650
651 if (!!formatAtStart) {
652 // Set values to conform to "start"
653 targetFormat = formatAtStart;
654 initialIndex = startIndex;
655 } else if (!!formatAtEnd) {
656 // Set values to conform to "end"
657 targetFormat = formatAtEnd;
658 initialIndex = endIndex;
659 } else if (!!formatAtEndMinusOne) {
660 // This is an edge case which will occur if you create a format, then place
661 // the caret just before the format and hit the back ARROW key. The resulting
662 // value object will have start and end +1 beyond the edge of the format boundary.
663 targetFormat = formatAtEndMinusOne;
664 initialIndex = endIndex - 1;
665 } else {
666 return EMPTY_BOUNDARIES;
667 }
668
669 const index = newFormats[initialIndex].indexOf(targetFormat);
670 const walkingArgs = [newFormats, initialIndex, targetFormat, index]; // Walk the startIndex "backwards" to the leading "edge" of the matching format.
671
672 startIndex = walkToStart(...walkingArgs); // Walk the endIndex "forwards" until the trailing "edge" of the matching format.
673
674 endIndex = walkToEnd(...walkingArgs); // Safe guard: start index cannot be less than 0.
675
676 startIndex = startIndex < 0 ? 0 : startIndex; // // Return the indicies of the "edges" as the boundaries.
677
678 return {
679 start: startIndex,
680 end: endIndex
681 };
682 }
683 /**
684 * Walks forwards/backwards towards the boundary of a given format within an
685 * array of format objects. Returns the index of the boundary.
686 *
687 * @param {Array} formats the formats to search for the given format type.
688 * @param {number} initialIndex the starting index from which to walk.
689 * @param {Object} targetFormatRef a reference to the format type object being sought.
690 * @param {number} formatIndex the index at which we expect the target format object to be.
691 * @param {string} direction either 'forwards' or 'backwards' to indicate the direction.
692 * @return {number} the index of the boundary of the given format.
693 */
694
695 function walkToBoundary(formats, initialIndex, targetFormatRef, formatIndex, direction) {
696 let index = initialIndex;
697 const directions = {
698 forwards: 1,
699 backwards: -1
700 };
701 const directionIncrement = directions[direction] || 1; // invalid direction arg default to forwards
702
703 const inverseDirectionIncrement = directionIncrement * -1;
704
705 while (formats[index] && formats[index][formatIndex] === targetFormatRef) {
706 // Increment/decrement in the direction of operation.
707 index = index + directionIncrement;
708 } // Restore by one in inverse direction of operation
709 // to avoid out of bounds.
710
711
712 index = index + inverseDirectionIncrement;
713 return index;
714 }
715
716 const partialRight = function (fn) {
717 for (var _len = arguments.length, partialArgs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
718 partialArgs[_key - 1] = arguments[_key];
719 }
720
721 return function () {
722 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
723 args[_key2] = arguments[_key2];
724 }
725
726 return fn(...args, ...partialArgs);
727 };
728 };
729
730 const walkToStart = partialRight(walkToBoundary, 'backwards');
731 const walkToEnd = partialRight(walkToBoundary, 'forwards');
732
733 ;// CONCATENATED MODULE: ./packages/format-library/build-module/link/use-link-instance-key.js
734 // Weakly referenced map allows unused ids to be garbage collected.
735 const weakMap = new WeakMap(); // Incrementing zero-based ID value.
736
737 let id = -1;
738 const prefix = 'link-control-instance';
739
740 function getKey(_id) {
741 return `${prefix}-${_id}`;
742 }
743 /**
744 * Builds a unique link control key for the given object reference.
745 *
746 * @param {Object} instance an unique object reference specific to this link control instance.
747 * @return {string} the unique key to use for this link control.
748 */
749
750
751 function useLinkInstanceKey(instance) {
752 if (!instance) {
753 return;
754 }
755
756 if (weakMap.has(instance)) {
757 return getKey(weakMap.get(instance));
758 }
759
760 id += 1;
761 weakMap.set(instance, id);
762 return getKey(id);
763 }
764
765 /* harmony default export */ var use_link_instance_key = (useLinkInstanceKey);
766
767 ;// CONCATENATED MODULE: ./packages/format-library/build-module/link/inline.js
768
769
770 /**
771 * WordPress dependencies
772 */
773
774
775
776
777
778
779
780 /**
781 * Internal dependencies
782 */
783
784
785
786
787
788 function InlineLinkUI(_ref) {
789 let {
790 isActive,
791 activeAttributes,
792 addingLink,
793 value,
794 onChange,
795 speak,
796 stopAddingLink,
797 contentRef
798 } = _ref;
799 const richLinkTextValue = getRichTextValueFromSelection(value, isActive); // Get the text content minus any HTML tags.
800
801 const richTextText = richLinkTextValue.text;
802 /**
803 * Pending settings to be applied to the next link. When inserting a new
804 * link, toggle values cannot be applied immediately, because there is not
805 * yet a link for them to apply to. Thus, they are maintained in a state
806 * value until the time that the link can be inserted or edited.
807 *
808 * @type {[Object|undefined,Function]}
809 */
810
811 const [nextLinkValue, setNextLinkValue] = (0,external_wp_element_namespaceObject.useState)();
812 const {
813 createPageEntity,
814 userCanCreatePages
815 } = (0,external_wp_data_namespaceObject.useSelect)(select => {
816 const {
817 getSettings
818 } = select(external_wp_blockEditor_namespaceObject.store);
819
820 const _settings = getSettings();
821
822 return {
823 createPageEntity: _settings.__experimentalCreatePageEntity,
824 userCanCreatePages: _settings.__experimentalUserCanCreatePages
825 };
826 }, []);
827 const linkValue = {
828 url: activeAttributes.url,
829 type: activeAttributes.type,
830 id: activeAttributes.id,
831 opensInNewTab: activeAttributes.target === '_blank',
832 title: richTextText,
833 ...nextLinkValue
834 };
835
836 function removeLink() {
837 const newValue = (0,external_wp_richText_namespaceObject.removeFormat)(value, 'core/link');
838 onChange(newValue);
839 stopAddingLink();
840 speak((0,external_wp_i18n_namespaceObject.__)('Link removed.'), 'assertive');
841 }
842
843 function onChangeLink(nextValue) {
844 // Merge with values from state, both for the purpose of assigning the
845 // next state value, and for use in constructing the new link format if
846 // the link is ready to be applied.
847 nextValue = { ...nextLinkValue,
848 ...nextValue
849 }; // LinkControl calls `onChange` immediately upon the toggling a setting.
850
851 const didToggleSetting = linkValue.opensInNewTab !== nextValue.opensInNewTab && linkValue.url === nextValue.url; // If change handler was called as a result of a settings change during
852 // link insertion, it must be held in state until the link is ready to
853 // be applied.
854
855 const didToggleSettingForNewLink = didToggleSetting && nextValue.url === undefined; // If link will be assigned, the state value can be considered flushed.
856 // Otherwise, persist the pending changes.
857
858 setNextLinkValue(didToggleSettingForNewLink ? nextValue : undefined);
859
860 if (didToggleSettingForNewLink) {
861 return;
862 }
863
864 const newUrl = (0,external_wp_url_namespaceObject.prependHTTP)(nextValue.url);
865 const linkFormat = createLinkFormat({
866 url: newUrl,
867 type: nextValue.type,
868 id: nextValue.id !== undefined && nextValue.id !== null ? String(nextValue.id) : undefined,
869 opensInNewWindow: nextValue.opensInNewTab
870 });
871 const newText = nextValue.title || newUrl;
872
873 if ((0,external_wp_richText_namespaceObject.isCollapsed)(value) && !isActive) {
874 // Scenario: we don't have any actively selected text or formats.
875 const toInsert = (0,external_wp_richText_namespaceObject.applyFormat)((0,external_wp_richText_namespaceObject.create)({
876 text: newText
877 }), linkFormat, 0, newText.length);
878 onChange((0,external_wp_richText_namespaceObject.insert)(value, toInsert));
879 } else {
880 // Scenario: we have any active text selection or an active format.
881 let newValue;
882
883 if (newText === richTextText) {
884 // If we're not updating the text then ignore.
885 newValue = (0,external_wp_richText_namespaceObject.applyFormat)(value, linkFormat);
886 } else {
887 // Create new RichText value for the new text in order that we
888 // can apply formats to it.
889 newValue = (0,external_wp_richText_namespaceObject.create)({
890 text: newText
891 }); // Apply the new Link format to this new text value.
892
893 newValue = (0,external_wp_richText_namespaceObject.applyFormat)(newValue, linkFormat, 0, newText.length); // Update the original (full) RichTextValue replacing the
894 // target text with the *new* RichTextValue containing:
895 // 1. The new text content.
896 // 2. The new link format.
897 // Note original formats will be lost when applying this change.
898 // That is expected behaviour.
899 // See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.
900
901 newValue = (0,external_wp_richText_namespaceObject.replace)(value, richTextText, newValue);
902 }
903
904 newValue.start = newValue.end;
905 newValue.activeFormats = [];
906 onChange(newValue);
907 } // Focus should only be shifted back to the formatted segment when the
908 // URL is submitted.
909
910
911 if (!didToggleSetting) {
912 stopAddingLink();
913 }
914
915 if (!isValidHref(newUrl)) {
916 speak((0,external_wp_i18n_namespaceObject.__)('Warning: the link has been inserted but may have errors. Please test it.'), 'assertive');
917 } else if (isActive) {
918 speak((0,external_wp_i18n_namespaceObject.__)('Link edited.'), 'assertive');
919 } else {
920 speak((0,external_wp_i18n_namespaceObject.__)('Link inserted.'), 'assertive');
921 }
922 }
923
924 const popoverAnchor = (0,external_wp_richText_namespaceObject.useAnchor)({
925 editableContentElement: contentRef.current,
926 value,
927 settings: build_module_link_link
928 }); // Generate a string based key that is unique to this anchor reference.
929 // This is used to force re-mount the LinkControl component to avoid
930 // potential stale state bugs caused by the component not being remounted
931 // See https://github.com/WordPress/gutenberg/pull/34742.
932
933 const forceRemountKey = use_link_instance_key(popoverAnchor); // The focusOnMount prop shouldn't evolve during render of a Popover
934 // otherwise it causes a render of the content.
935
936 const focusOnMount = (0,external_wp_element_namespaceObject.useRef)(addingLink ? 'firstElement' : false);
937
938 async function handleCreate(pageTitle) {
939 const page = await createPageEntity({
940 title: pageTitle,
941 status: 'draft'
942 });
943 return {
944 id: page.id,
945 type: page.type,
946 title: page.title.rendered,
947 url: page.link,
948 kind: 'post-type'
949 };
950 }
951
952 function createButtonText(searchTerm) {
953 return (0,external_wp_element_namespaceObject.createInterpolateElement)((0,external_wp_i18n_namespaceObject.sprintf)(
954 /* translators: %s: search term. */
955 (0,external_wp_i18n_namespaceObject.__)('Create Page: <mark>%s</mark>'), searchTerm), {
956 mark: (0,external_wp_element_namespaceObject.createElement)("mark", null)
957 });
958 }
959
960 return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Popover, {
961 anchor: popoverAnchor,
962 focusOnMount: focusOnMount.current,
963 onClose: stopAddingLink,
964 placement: "bottom",
965 shift: true
966 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.__experimentalLinkControl, {
967 key: forceRemountKey,
968 value: linkValue,
969 onChange: onChangeLink,
970 onRemove: removeLink,
971 forceIsEditingLink: addingLink,
972 hasRichPreviews: true,
973 createSuggestion: createPageEntity && handleCreate,
974 withCreateSuggestion: userCanCreatePages,
975 createSuggestionButtonText: createButtonText,
976 hasTextControl: true
977 }));
978 }
979
980 function getRichTextValueFromSelection(value, isActive) {
981 // Default to the selection ranges on the RichTextValue object.
982 let textStart = value.start;
983 let textEnd = value.end; // If the format is currently active then the rich text value
984 // should always be taken from the bounds of the active format
985 // and not the selected text.
986
987 if (isActive) {
988 const boundary = getFormatBoundary(value, {
989 type: 'core/link'
990 });
991 textStart = boundary.start; // Text *selection* always extends +1 beyond the edge of the format.
992 // We account for that here.
993
994 textEnd = boundary.end + 1;
995 } // Get a RichTextValue containing the selected text content.
996
997
998 return (0,external_wp_richText_namespaceObject.slice)(value, textStart, textEnd);
999 }
1000
1001 /* harmony default export */ var inline = ((0,external_wp_components_namespaceObject.withSpokenMessages)(InlineLinkUI));
1002
1003 ;// CONCATENATED MODULE: ./packages/format-library/build-module/link/index.js
1004
1005
1006 /**
1007 * WordPress dependencies
1008 */
1009
1010
1011
1012
1013
1014
1015
1016
1017 /**
1018 * Internal dependencies
1019 */
1020
1021
1022
1023 const link_name = 'core/link';
1024
1025 const link_title = (0,external_wp_i18n_namespaceObject.__)('Link');
1026
1027 function link_Edit(_ref) {
1028 let {
1029 isActive,
1030 activeAttributes,
1031 value,
1032 onChange,
1033 onFocus,
1034 contentRef
1035 } = _ref;
1036 const [addingLink, setAddingLink] = (0,external_wp_element_namespaceObject.useState)(false);
1037
1038 function addLink() {
1039 const text = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(value));
1040
1041 if (text && (0,external_wp_url_namespaceObject.isURL)(text) && isValidHref(text)) {
1042 onChange((0,external_wp_richText_namespaceObject.applyFormat)(value, {
1043 type: link_name,
1044 attributes: {
1045 url: text
1046 }
1047 }));
1048 } else if (text && (0,external_wp_url_namespaceObject.isEmail)(text)) {
1049 onChange((0,external_wp_richText_namespaceObject.applyFormat)(value, {
1050 type: link_name,
1051 attributes: {
1052 url: `mailto:${text}`
1053 }
1054 }));
1055 } else {
1056 setAddingLink(true);
1057 }
1058 }
1059
1060 function stopAddingLink() {
1061 setAddingLink(false);
1062 onFocus();
1063 }
1064
1065 function onRemoveFormat() {
1066 onChange((0,external_wp_richText_namespaceObject.removeFormat)(value, link_name));
1067 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('Link removed.'), 'assertive');
1068 }
1069
1070 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
1071 type: "primary",
1072 character: "k",
1073 onUse: addLink
1074 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
1075 type: "primaryShift",
1076 character: "k",
1077 onUse: onRemoveFormat
1078 }), isActive && (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1079 name: "link",
1080 icon: link_off,
1081 title: (0,external_wp_i18n_namespaceObject.__)('Unlink'),
1082 onClick: onRemoveFormat,
1083 isActive: isActive,
1084 shortcutType: "primaryShift",
1085 shortcutCharacter: "k"
1086 }), !isActive && (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1087 name: "link",
1088 icon: library_link,
1089 title: link_title,
1090 onClick: addLink,
1091 isActive: isActive,
1092 shortcutType: "primary",
1093 shortcutCharacter: "k"
1094 }), (addingLink || isActive) && (0,external_wp_element_namespaceObject.createElement)(inline, {
1095 addingLink: addingLink,
1096 stopAddingLink: stopAddingLink,
1097 isActive: isActive,
1098 activeAttributes: activeAttributes,
1099 value: value,
1100 onChange: onChange,
1101 contentRef: contentRef
1102 }));
1103 }
1104
1105 const build_module_link_link = {
1106 name: link_name,
1107 title: link_title,
1108 tagName: 'a',
1109 className: null,
1110 attributes: {
1111 url: 'href',
1112 type: 'data-type',
1113 id: 'data-id',
1114 target: 'target'
1115 },
1116
1117 __unstablePasteRule(value, _ref2) {
1118 let {
1119 html,
1120 plainText
1121 } = _ref2;
1122
1123 if ((0,external_wp_richText_namespaceObject.isCollapsed)(value)) {
1124 return value;
1125 }
1126
1127 const pastedText = (html || plainText).replace(/<[^>]+>/g, '').trim(); // A URL was pasted, turn the selection into a link.
1128
1129 if (!(0,external_wp_url_namespaceObject.isURL)(pastedText)) {
1130 return value;
1131 } // Allows us to ask for this information when we get a report.
1132
1133
1134 window.console.log('Created link:\n\n', pastedText);
1135 return (0,external_wp_richText_namespaceObject.applyFormat)(value, {
1136 type: link_name,
1137 attributes: {
1138 url: (0,external_wp_htmlEntities_namespaceObject.decodeEntities)(pastedText)
1139 }
1140 });
1141 },
1142
1143 edit: link_Edit
1144 };
1145
1146 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/format-strikethrough.js
1147
1148
1149 /**
1150 * WordPress dependencies
1151 */
1152
1153 const formatStrikethrough = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
1154 xmlns: "http://www.w3.org/2000/svg",
1155 viewBox: "0 0 24 24"
1156 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
1157 d: "M9.1 9v-.5c0-.6.2-1.1.7-1.4.5-.3 1.2-.5 2-.5.7 0 1.4.1 2.1.3.7.2 1.4.5 2.1.9l.2-1.9c-.6-.3-1.2-.5-1.9-.7-.8-.1-1.6-.2-2.4-.2-1.5 0-2.7.3-3.6 1-.8.7-1.2 1.5-1.2 2.6V9h2zM20 12H4v1h8.3c.3.1.6.2.8.3.5.2.9.5 1.1.8.3.3.4.7.4 1.2 0 .7-.2 1.1-.8 1.5-.5.3-1.2.5-2.1.5-.8 0-1.6-.1-2.4-.3-.8-.2-1.5-.5-2.2-.8L7 18.1c.5.2 1.2.4 2 .6.8.2 1.6.3 2.4.3 1.7 0 3-.3 3.9-1 .9-.7 1.3-1.6 1.3-2.8 0-.9-.2-1.7-.7-2.2H20v-1z"
1158 }));
1159 /* harmony default export */ var format_strikethrough = (formatStrikethrough);
1160
1161 ;// CONCATENATED MODULE: ./packages/format-library/build-module/strikethrough/index.js
1162
1163
1164 /**
1165 * WordPress dependencies
1166 */
1167
1168
1169
1170
1171 const strikethrough_name = 'core/strikethrough';
1172
1173 const strikethrough_title = (0,external_wp_i18n_namespaceObject.__)('Strikethrough');
1174
1175 const strikethrough = {
1176 name: strikethrough_name,
1177 title: strikethrough_title,
1178 tagName: 's',
1179 className: null,
1180
1181 edit(_ref) {
1182 let {
1183 isActive,
1184 value,
1185 onChange,
1186 onFocus
1187 } = _ref;
1188
1189 function onClick() {
1190 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
1191 type: strikethrough_name,
1192 title: strikethrough_title
1193 }));
1194 onFocus();
1195 }
1196
1197 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
1198 type: "access",
1199 character: "d",
1200 onUse: onClick
1201 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1202 icon: format_strikethrough,
1203 title: strikethrough_title,
1204 onClick: onClick,
1205 isActive: isActive,
1206 role: "menuitemcheckbox"
1207 }));
1208 }
1209
1210 };
1211
1212 ;// CONCATENATED MODULE: ./packages/format-library/build-module/underline/index.js
1213
1214
1215 /**
1216 * WordPress dependencies
1217 */
1218
1219
1220
1221 const underline_name = 'core/underline';
1222
1223 const underline_title = (0,external_wp_i18n_namespaceObject.__)('Underline');
1224
1225 const underline = {
1226 name: underline_name,
1227 title: underline_title,
1228 tagName: 'span',
1229 className: null,
1230 attributes: {
1231 style: 'style'
1232 },
1233
1234 edit(_ref) {
1235 let {
1236 value,
1237 onChange
1238 } = _ref;
1239
1240 const onToggle = () => {
1241 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
1242 type: underline_name,
1243 attributes: {
1244 style: 'text-decoration: underline;'
1245 },
1246 title: underline_title
1247 }));
1248 };
1249
1250 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextShortcut, {
1251 type: "primary",
1252 character: "u",
1253 onUse: onToggle
1254 }), (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.__unstableRichTextInputEvent, {
1255 inputType: "formatUnderline",
1256 onInput: onToggle
1257 }));
1258 }
1259
1260 };
1261
1262 ;// CONCATENATED MODULE: ./packages/icons/build-module/icon/index.js
1263 /**
1264 * WordPress dependencies
1265 */
1266
1267 /** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
1268
1269 /**
1270 * Return an SVG icon.
1271 *
1272 * @param {IconProps} props icon is the SVG component to render
1273 * size is a number specifiying the icon size in pixels
1274 * Other props will be passed to wrapped SVG component
1275 *
1276 * @return {JSX.Element} Icon component
1277 */
1278
1279 function Icon(_ref) {
1280 let {
1281 icon,
1282 size = 24,
1283 ...props
1284 } = _ref;
1285 return (0,external_wp_element_namespaceObject.cloneElement)(icon, {
1286 width: size,
1287 height: size,
1288 ...props
1289 });
1290 }
1291
1292 /* harmony default export */ var icon = (Icon);
1293
1294 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/text-color.js
1295
1296
1297 /**
1298 * WordPress dependencies
1299 */
1300
1301 const textColor = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
1302 xmlns: "http://www.w3.org/2000/svg",
1303 viewBox: "0 0 24 24"
1304 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
1305 d: "M12.9 6h-2l-4 11h1.9l1.1-3h4.2l1.1 3h1.9L12.9 6zm-2.5 6.5l1.5-4.9 1.7 4.9h-3.2z"
1306 }));
1307 /* harmony default export */ var text_color = (textColor);
1308
1309 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/color.js
1310
1311
1312 /**
1313 * WordPress dependencies
1314 */
1315
1316 const color = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
1317 viewBox: "0 0 24 24",
1318 xmlns: "http://www.w3.org/2000/svg"
1319 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
1320 d: "M17.2 10.9c-.5-1-1.2-2.1-2.1-3.2-.6-.9-1.3-1.7-2.1-2.6L12 4l-1 1.1c-.6.9-1.3 1.7-2 2.6-.8 1.2-1.5 2.3-2 3.2-.6 1.2-1 2.2-1 3 0 3.4 2.7 6.1 6.1 6.1s6.1-2.7 6.1-6.1c0-.8-.3-1.8-1-3zm-5.1 7.6c-2.5 0-4.6-2.1-4.6-4.6 0-.3.1-1 .8-2.3.5-.9 1.1-1.9 2-3.1.7-.9 1.3-1.7 1.8-2.3.7.8 1.3 1.6 1.8 2.3.8 1.1 1.5 2.2 2 3.1.7 1.3.8 2 .8 2.3 0 2.5-2.1 4.6-4.6 4.6z"
1321 }));
1322 /* harmony default export */ var library_color = (color);
1323
1324 ;// CONCATENATED MODULE: ./packages/format-library/build-module/text-color/inline.js
1325
1326
1327 /**
1328 * WordPress dependencies
1329 */
1330
1331
1332
1333
1334
1335
1336 /**
1337 * Internal dependencies
1338 */
1339
1340
1341
1342 function parseCSS() {
1343 let css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
1344 return css.split(';').reduce((accumulator, rule) => {
1345 if (rule) {
1346 const [property, value] = rule.split(':');
1347 if (property === 'color') accumulator.color = value;
1348 if (property === 'background-color' && value !== transparentValue) accumulator.backgroundColor = value;
1349 }
1350
1351 return accumulator;
1352 }, {});
1353 }
1354
1355 function parseClassName() {
1356 let className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
1357 let colorSettings = arguments.length > 1 ? arguments[1] : undefined;
1358 return className.split(' ').reduce((accumulator, name) => {
1359 // `colorSlug` could contain dashes, so simply match the start and end.
1360 if (name.startsWith('has-') && name.endsWith('-color')) {
1361 const colorSlug = name.replace(/^has-/, '').replace(/-color$/, '');
1362 const colorObject = (0,external_wp_blockEditor_namespaceObject.getColorObjectByAttributeValues)(colorSettings, colorSlug);
1363 accumulator.color = colorObject.color;
1364 }
1365
1366 return accumulator;
1367 }, {});
1368 }
1369 function getActiveColors(value, name, colorSettings) {
1370 const activeColorFormat = (0,external_wp_richText_namespaceObject.getActiveFormat)(value, name);
1371
1372 if (!activeColorFormat) {
1373 return {};
1374 }
1375
1376 return { ...parseCSS(activeColorFormat.attributes.style),
1377 ...parseClassName(activeColorFormat.attributes.class, colorSettings)
1378 };
1379 }
1380
1381 function setColors(value, name, colorSettings, colors) {
1382 const {
1383 color,
1384 backgroundColor
1385 } = { ...getActiveColors(value, name, colorSettings),
1386 ...colors
1387 };
1388
1389 if (!color && !backgroundColor) {
1390 return (0,external_wp_richText_namespaceObject.removeFormat)(value, name);
1391 }
1392
1393 const styles = [];
1394 const classNames = [];
1395 const attributes = {};
1396
1397 if (backgroundColor) {
1398 styles.push(['background-color', backgroundColor].join(':'));
1399 } else {
1400 // Override default browser color for mark element.
1401 styles.push(['background-color', transparentValue].join(':'));
1402 }
1403
1404 if (color) {
1405 const colorObject = (0,external_wp_blockEditor_namespaceObject.getColorObjectByColorValue)(colorSettings, color);
1406
1407 if (colorObject) {
1408 classNames.push((0,external_wp_blockEditor_namespaceObject.getColorClassName)('color', colorObject.slug));
1409 } else {
1410 styles.push(['color', color].join(':'));
1411 }
1412 }
1413
1414 if (styles.length) attributes.style = styles.join(';');
1415 if (classNames.length) attributes.class = classNames.join(' ');
1416 return (0,external_wp_richText_namespaceObject.applyFormat)(value, {
1417 type: name,
1418 attributes
1419 });
1420 }
1421
1422 function ColorPicker(_ref) {
1423 let {
1424 name,
1425 property,
1426 value,
1427 onChange
1428 } = _ref;
1429 const colors = (0,external_wp_data_namespaceObject.useSelect)(select => {
1430 var _getSettings$colors;
1431
1432 const {
1433 getSettings
1434 } = select(external_wp_blockEditor_namespaceObject.store);
1435 return (_getSettings$colors = getSettings().colors) !== null && _getSettings$colors !== void 0 ? _getSettings$colors : [];
1436 }, []);
1437 const onColorChange = (0,external_wp_element_namespaceObject.useCallback)(color => {
1438 onChange(setColors(value, name, colors, {
1439 [property]: color
1440 }));
1441 }, [colors, onChange, property]);
1442 const activeColors = (0,external_wp_element_namespaceObject.useMemo)(() => getActiveColors(value, name, colors), [name, value, colors]);
1443 return (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.ColorPalette, {
1444 value: activeColors[property],
1445 onChange: onColorChange
1446 });
1447 }
1448
1449 function InlineColorUI(_ref2) {
1450 let {
1451 name,
1452 value,
1453 onChange,
1454 onClose,
1455 contentRef
1456 } = _ref2;
1457
1458 /*
1459 As you change the text color by typing a HEX value into a field,
1460 the return value of document.getSelection jumps to the field you're editing,
1461 not the highlighted text. Given that useAnchor uses document.getSelection,
1462 it will return null, since it can't find the <mark> element within the HEX input.
1463 This caches the last truthy value of the selection anchor reference.
1464 */
1465 const popoverAnchor = (0,external_wp_blockEditor_namespaceObject.useCachedTruthy)((0,external_wp_richText_namespaceObject.useAnchor)({
1466 editableContentElement: contentRef.current,
1467 value,
1468 settings: text_color_textColor
1469 }));
1470 return (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.Popover, {
1471 onClose: onClose,
1472 className: "components-inline-color-popover",
1473 anchor: popoverAnchor
1474 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_components_namespaceObject.TabPanel, {
1475 tabs: [{
1476 name: 'color',
1477 title: (0,external_wp_i18n_namespaceObject.__)('Text')
1478 }, {
1479 name: 'backgroundColor',
1480 title: (0,external_wp_i18n_namespaceObject.__)('Background')
1481 }]
1482 }, tab => (0,external_wp_element_namespaceObject.createElement)(ColorPicker, {
1483 name: name,
1484 property: tab.name,
1485 value: value,
1486 onChange: onChange
1487 })));
1488 }
1489
1490 ;// CONCATENATED MODULE: ./packages/format-library/build-module/text-color/index.js
1491
1492
1493 /**
1494 * WordPress dependencies
1495 */
1496
1497
1498
1499
1500
1501 /**
1502 * Internal dependencies
1503 */
1504
1505
1506 const transparentValue = 'rgba(0, 0, 0, 0)';
1507 const text_color_name = 'core/text-color';
1508
1509 const text_color_title = (0,external_wp_i18n_namespaceObject.__)('Highlight');
1510
1511 const EMPTY_ARRAY = [];
1512
1513 function getComputedStyleProperty(element, property) {
1514 const {
1515 ownerDocument
1516 } = element;
1517 const {
1518 defaultView
1519 } = ownerDocument;
1520 const style = defaultView.getComputedStyle(element);
1521 const value = style.getPropertyValue(property);
1522
1523 if (property === 'background-color' && value === transparentValue && element.parentElement) {
1524 return getComputedStyleProperty(element.parentElement, property);
1525 }
1526
1527 return value;
1528 }
1529
1530 function fillComputedColors(element, _ref) {
1531 let {
1532 color,
1533 backgroundColor
1534 } = _ref;
1535
1536 if (!color && !backgroundColor) {
1537 return;
1538 }
1539
1540 return {
1541 color: color || getComputedStyleProperty(element, 'color'),
1542 backgroundColor: backgroundColor === transparentValue ? getComputedStyleProperty(element, 'background-color') : backgroundColor
1543 };
1544 }
1545
1546 function TextColorEdit(_ref2) {
1547 let {
1548 value,
1549 onChange,
1550 isActive,
1551 activeAttributes,
1552 contentRef
1553 } = _ref2;
1554 const allowCustomControl = (0,external_wp_blockEditor_namespaceObject.useSetting)('color.custom');
1555 const colors = (0,external_wp_blockEditor_namespaceObject.useSetting)('color.palette') || EMPTY_ARRAY;
1556 const [isAddingColor, setIsAddingColor] = (0,external_wp_element_namespaceObject.useState)(false);
1557 const enableIsAddingColor = (0,external_wp_element_namespaceObject.useCallback)(() => setIsAddingColor(true), [setIsAddingColor]);
1558 const disableIsAddingColor = (0,external_wp_element_namespaceObject.useCallback)(() => setIsAddingColor(false), [setIsAddingColor]);
1559 const colorIndicatorStyle = (0,external_wp_element_namespaceObject.useMemo)(() => fillComputedColors(contentRef.current, getActiveColors(value, text_color_name, colors)), [value, colors]);
1560 const hasColorsToChoose = colors.length || !allowCustomControl;
1561
1562 if (!hasColorsToChoose && !isActive) {
1563 return null;
1564 }
1565
1566 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1567 className: "format-library-text-color-button",
1568 isActive: isActive,
1569 icon: (0,external_wp_element_namespaceObject.createElement)(icon, {
1570 icon: Object.keys(activeAttributes).length ? text_color : library_color,
1571 style: colorIndicatorStyle
1572 }),
1573 title: text_color_title // If has no colors to choose but a color is active remove the color onClick.
1574 ,
1575 onClick: hasColorsToChoose ? enableIsAddingColor : () => onChange((0,external_wp_richText_namespaceObject.removeFormat)(value, text_color_name)),
1576 role: "menuitemcheckbox"
1577 }), isAddingColor && (0,external_wp_element_namespaceObject.createElement)(InlineColorUI, {
1578 name: text_color_name,
1579 onClose: disableIsAddingColor,
1580 activeAttributes: activeAttributes,
1581 value: value,
1582 onChange: onChange,
1583 contentRef: contentRef
1584 }));
1585 }
1586
1587 const text_color_textColor = {
1588 name: text_color_name,
1589 title: text_color_title,
1590 tagName: 'mark',
1591 className: 'has-inline-color',
1592 attributes: {
1593 style: 'style',
1594 class: 'class'
1595 },
1596
1597 /*
1598 * Since this format relies on the <mark> tag, it's important to
1599 * prevent the default yellow background color applied by most
1600 * browsers. The solution is to detect when this format is used with a
1601 * text color but no background color, and in such cases to override
1602 * the default styling with a transparent background.
1603 *
1604 * @see https://github.com/WordPress/gutenberg/pull/35516
1605 */
1606 __unstableFilterAttributeValue(key, value) {
1607 if (key !== 'style') return value; // We should not add a background-color if it's already set.
1608
1609 if (value && value.includes('background-color')) return value;
1610 const addedCSS = ['background-color', transparentValue].join(':'); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
1611 // rules will already include a `;`.
1612
1613 return value ? [addedCSS, value].join(';') : addedCSS;
1614 },
1615
1616 edit: TextColorEdit
1617 };
1618
1619 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/subscript.js
1620
1621
1622 /**
1623 * WordPress dependencies
1624 */
1625
1626 const subscript = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
1627 xmlns: "http://www.w3.org/2000/svg",
1628 viewBox: "0 0 24 24"
1629 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
1630 d: "M16.9 18.3l.8-1.2c.4-.6.7-1.2.9-1.6.2-.4.3-.8.3-1.2 0-.3-.1-.7-.2-1-.1-.3-.4-.5-.6-.7-.3-.2-.6-.3-1-.3s-.8.1-1.1.2c-.3.1-.7.3-1 .6l.2 1.3c.3-.3.5-.5.8-.6s.6-.2.9-.2c.3 0 .5.1.7.2.2.2.2.4.2.7 0 .3-.1.5-.2.8-.1.3-.4.7-.8 1.3L15 19.4h4.3v-1.2h-2.4zM14.1 7.2h-2L9.5 11 6.9 7.2h-2l3.6 5.3L4.7 18h2l2.7-4 2.7 4h2l-3.8-5.5 3.8-5.3z"
1631 }));
1632 /* harmony default export */ var library_subscript = (subscript);
1633
1634 ;// CONCATENATED MODULE: ./packages/format-library/build-module/subscript/index.js
1635
1636
1637 /**
1638 * WordPress dependencies
1639 */
1640
1641
1642
1643
1644 const subscript_name = 'core/subscript';
1645
1646 const subscript_title = (0,external_wp_i18n_namespaceObject.__)('Subscript');
1647
1648 const subscript_subscript = {
1649 name: subscript_name,
1650 title: subscript_title,
1651 tagName: 'sub',
1652 className: null,
1653
1654 edit(_ref) {
1655 let {
1656 isActive,
1657 value,
1658 onChange,
1659 onFocus
1660 } = _ref;
1661
1662 function onToggle() {
1663 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
1664 type: subscript_name,
1665 title: subscript_title
1666 }));
1667 }
1668
1669 function onClick() {
1670 onToggle();
1671 onFocus();
1672 }
1673
1674 return (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1675 icon: library_subscript,
1676 title: subscript_title,
1677 onClick: onClick,
1678 isActive: isActive,
1679 role: "menuitemcheckbox"
1680 });
1681 }
1682
1683 };
1684
1685 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/superscript.js
1686
1687
1688 /**
1689 * WordPress dependencies
1690 */
1691
1692 const superscript = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
1693 xmlns: "http://www.w3.org/2000/svg",
1694 viewBox: "0 0 24 24"
1695 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
1696 d: "M16.9 10.3l.8-1.3c.4-.6.7-1.2.9-1.6.2-.4.3-.8.3-1.2 0-.3-.1-.7-.2-1-.2-.2-.4-.4-.7-.6-.3-.2-.6-.3-1-.3s-.8.1-1.1.2c-.3.1-.7.3-1 .6l.1 1.3c.3-.3.5-.5.8-.6s.6-.2.9-.2c.3 0 .5.1.7.2.2.2.2.4.2.7 0 .3-.1.5-.2.8-.1.3-.4.7-.8 1.3l-1.8 2.8h4.3v-1.2h-2.2zm-2.8-3.1h-2L9.5 11 6.9 7.2h-2l3.6 5.3L4.7 18h2l2.7-4 2.7 4h2l-3.8-5.5 3.8-5.3z"
1697 }));
1698 /* harmony default export */ var library_superscript = (superscript);
1699
1700 ;// CONCATENATED MODULE: ./packages/format-library/build-module/superscript/index.js
1701
1702
1703 /**
1704 * WordPress dependencies
1705 */
1706
1707
1708
1709
1710 const superscript_name = 'core/superscript';
1711
1712 const superscript_title = (0,external_wp_i18n_namespaceObject.__)('Superscript');
1713
1714 const superscript_superscript = {
1715 name: superscript_name,
1716 title: superscript_title,
1717 tagName: 'sup',
1718 className: null,
1719
1720 edit(_ref) {
1721 let {
1722 isActive,
1723 value,
1724 onChange,
1725 onFocus
1726 } = _ref;
1727
1728 function onToggle() {
1729 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
1730 type: superscript_name,
1731 title: superscript_title
1732 }));
1733 }
1734
1735 function onClick() {
1736 onToggle();
1737 onFocus();
1738 }
1739
1740 return (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1741 icon: library_superscript,
1742 title: superscript_title,
1743 onClick: onClick,
1744 isActive: isActive,
1745 role: "menuitemcheckbox"
1746 });
1747 }
1748
1749 };
1750
1751 ;// CONCATENATED MODULE: ./packages/icons/build-module/library/button.js
1752
1753
1754 /**
1755 * WordPress dependencies
1756 */
1757
1758 const button_button = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, {
1759 viewBox: "0 0 24 24",
1760 xmlns: "http://www.w3.org/2000/svg"
1761 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, {
1762 d: "M19 6.5H5c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2zm.5 9c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-7c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v7zM8 12.8h8v-1.5H8v1.5z"
1763 }));
1764 /* harmony default export */ var library_button = (button_button);
1765
1766 ;// CONCATENATED MODULE: ./packages/format-library/build-module/keyboard/index.js
1767
1768
1769 /**
1770 * WordPress dependencies
1771 */
1772
1773
1774
1775
1776 const keyboard_name = 'core/keyboard';
1777
1778 const keyboard_title = (0,external_wp_i18n_namespaceObject.__)('Keyboard input');
1779
1780 const keyboard = {
1781 name: keyboard_name,
1782 title: keyboard_title,
1783 tagName: 'kbd',
1784 className: null,
1785
1786 edit(_ref) {
1787 let {
1788 isActive,
1789 value,
1790 onChange,
1791 onFocus
1792 } = _ref;
1793
1794 function onToggle() {
1795 onChange((0,external_wp_richText_namespaceObject.toggleFormat)(value, {
1796 type: keyboard_name,
1797 title: keyboard_title
1798 }));
1799 }
1800
1801 function onClick() {
1802 onToggle();
1803 onFocus();
1804 }
1805
1806 return (0,external_wp_element_namespaceObject.createElement)(external_wp_blockEditor_namespaceObject.RichTextToolbarButton, {
1807 icon: library_button,
1808 title: keyboard_title,
1809 onClick: onClick,
1810 isActive: isActive,
1811 role: "menuitemcheckbox"
1812 });
1813 }
1814
1815 };
1816
1817 ;// CONCATENATED MODULE: ./packages/format-library/build-module/default-formats.js
1818 /**
1819 * Internal dependencies
1820 */
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832 /* harmony default export */ var default_formats = ([bold, code_code, image_image, italic, build_module_link_link, strikethrough, underline, text_color_textColor, subscript_subscript, superscript_superscript, keyboard]);
1833
1834 ;// CONCATENATED MODULE: ./packages/format-library/build-module/index.js
1835 /**
1836 * WordPress dependencies
1837 */
1838
1839 /**
1840 * Internal dependencies
1841 */
1842
1843
1844 default_formats.forEach(_ref => {
1845 let {
1846 name,
1847 ...settings
1848 } = _ref;
1849 return (0,external_wp_richText_namespaceObject.registerFormatType)(name, settings);
1850 });
1851
1852 (window.wp = window.wp || {}).formatLibrary = __webpack_exports__;
1853 /******/ })()
1854 ;