/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
RichTextData: () => (/* reexport */ RichTextData),
__experimentalRichText: () => (/* reexport */ __experimentalRichText),
__unstableCreateElement: () => (/* reexport */ createElement),
__unstableToDom: () => (/* reexport */ toDom),
__unstableUseRichText: () => (/* reexport */ useRichText),
applyFormat: () => (/* reexport */ applyFormat),
concat: () => (/* reexport */ concat),
create: () => (/* reexport */ create),
getActiveFormat: () => (/* reexport */ getActiveFormat),
getActiveFormats: () => (/* reexport */ getActiveFormats),
getActiveObject: () => (/* reexport */ getActiveObject),
getTextContent: () => (/* reexport */ getTextContent),
insert: () => (/* reexport */ insert),
insertObject: () => (/* reexport */ insertObject),
isCollapsed: () => (/* reexport */ isCollapsed),
isEmpty: () => (/* reexport */ isEmpty),
join: () => (/* reexport */ join),
registerFormatType: () => (/* reexport */ registerFormatType),
remove: () => (/* reexport */ remove_remove),
removeFormat: () => (/* reexport */ removeFormat),
replace: () => (/* reexport */ replace_replace),
slice: () => (/* reexport */ slice),
split: () => (/* reexport */ split),
store: () => (/* reexport */ store),
toHTMLString: () => (/* reexport */ toHTMLString),
toggleFormat: () => (/* reexport */ toggleFormat),
unregisterFormatType: () => (/* reexport */ unregisterFormatType),
useAnchor: () => (/* reexport */ useAnchor),
useAnchorRef: () => (/* reexport */ useAnchorRef)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/rich-text/build-module/store/selectors.js
var selectors_namespaceObject = {};
__webpack_require__.r(selectors_namespaceObject);
__webpack_require__.d(selectors_namespaceObject, {
getFormatType: () => (getFormatType),
getFormatTypeForBareElement: () => (getFormatTypeForBareElement),
getFormatTypeForClassName: () => (getFormatTypeForClassName),
getFormatTypes: () => (getFormatTypes)
});
// NAMESPACE OBJECT: ./node_modules/@wordpress/rich-text/build-module/store/actions.js
var actions_namespaceObject = {};
__webpack_require__.r(actions_namespaceObject);
__webpack_require__.d(actions_namespaceObject, {
addFormatTypes: () => (addFormatTypes),
removeFormatTypes: () => (removeFormatTypes)
});
;// external ["wp","data"]
const external_wp_data_namespaceObject = window["wp"]["data"];
;// ./node_modules/@wordpress/rich-text/build-module/store/reducer.js
/**
* WordPress dependencies
*/
/**
* Reducer managing the format types
*
* @param {Object} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Object} Updated state.
*/
function formatTypes(state = {}, action) {
switch (action.type) {
case 'ADD_FORMAT_TYPES':
return {
...state,
// Key format types by their name.
...action.formatTypes.reduce((newFormatTypes, type) => ({
...newFormatTypes,
[type.name]: type
}), {})
};
case 'REMOVE_FORMAT_TYPES':
return Object.fromEntries(Object.entries(state).filter(([key]) => !action.names.includes(key)));
}
return state;
}
/* harmony default export */ const reducer = ((0,external_wp_data_namespaceObject.combineReducers)({
formatTypes
}));
;// ./node_modules/@wordpress/rich-text/build-module/store/selectors.js
/**
* WordPress dependencies
*/
/**
* Returns all the available format types.
*
* @param {Object} state Data state.
*
* @example
* ```js
* import { __, sprintf } from '@wordpress/i18n';
* import { store as richTextStore } from '@wordpress/rich-text';
* import { useSelect } from '@wordpress/data';
*
* const ExampleComponent = () => {
* const { getFormatTypes } = useSelect(
* ( select ) => select( richTextStore ),
* []
* );
*
* const availableFormats = getFormatTypes();
*
* return availableFormats ? (
* <ul>
* { availableFormats?.map( ( format ) => (
* <li>{ format.name }</li>
* ) ) }
* </ul>
* ) : (
* __( 'No Formats available' )
* );
* };
* ```
*
* @return {Array} Format types.
*/
const getFormatTypes = (0,external_wp_data_namespaceObject.createSelector)(state => Object.values(state.formatTypes), state => [state.formatTypes]);
/**
* Returns a format type by name.
*
* @param {Object} state Data state.
* @param {string} name Format type name.
*
* @example
* ```js
* import { __, sprintf } from '@wordpress/i18n';
* import { store as richTextStore } from '@wordpress/rich-text';
* import { useSelect } from '@wordpress/data';
*
* const ExampleComponent = () => {
* const { getFormatType } = useSelect(
* ( select ) => select( richTextStore ),
* []
* );
*
* const boldFormat = getFormatType( 'core/bold' );
*
* return boldFormat ? (
* <ul>
* { Object.entries( boldFormat )?.map( ( [ key, value ] ) => (
* <li>
* { key } : { value }
* </li>
* ) ) }
* </ul>
* ) : (
* __( 'Not Found' )
* ;
* };
* ```
*
* @return {?Object} Format type.
*/
function getFormatType(state, name) {
return state.formatTypes[name];
}
/**
* Gets the format type, if any, that can handle a bare element (without a
* data-format-type attribute), given the tag name of this element.
*
* @param {Object} state Data state.
* @param {string} bareElementTagName The tag name of the element to find a
* format type for.
*
* @example
* ```js
* import { __, sprintf } from '@wordpress/i18n';
* import { store as richTextStore } from '@wordpress/rich-text';
* import { useSelect } from '@wordpress/data';
*
* const ExampleComponent = () => {
* const { getFormatTypeForBareElement } = useSelect(
* ( select ) => select( richTextStore ),
* []
* );
*
* const format = getFormatTypeForBareElement( 'strong' );
*
* return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>;
* }
* ```
*
* @return {?Object} Format type.
*/
function getFormatTypeForBareElement(state, bareElementTagName) {
const formatTypes = getFormatTypes(state);
return formatTypes.find(({
className,
tagName
}) => {
return className === null && bareElementTagName === tagName;
}) || formatTypes.find(({
className,
tagName
}) => {
return className === null && '*' === tagName;
});
}
/**
* Gets the format type, if any, that can handle an element, given its classes.
*
* @param {Object} state Data state.
* @param {string} elementClassName The classes of the element to find a format
* type for.
*
* @example
* ```js
* import { __, sprintf } from '@wordpress/i18n';
* import { store as richTextStore } from '@wordpress/rich-text';
* import { useSelect } from '@wordpress/data';
*
* const ExampleComponent = () => {
* const { getFormatTypeForClassName } = useSelect(
* ( select ) => select( richTextStore ),
* []
* );
*
* const format = getFormatTypeForClassName( 'has-inline-color' );
*
* return format && <p>{ sprintf( __( 'Format name: %s' ), format.name ) }</p>;
* };
* ```
*
* @return {?Object} Format type.
*/
function getFormatTypeForClassName(state, elementClassName) {
return getFormatTypes(state).find(({
className
}) => {
if (className === null) {
return false;
}
return ` ${elementClassName} `.indexOf(` ${className} `) >= 0;
});
}
;// ./node_modules/@wordpress/rich-text/build-module/store/actions.js
/**
* Returns an action object used in signalling that format types have been
* added.
* Ignored from documentation as registerFormatType should be used instead from @wordpress/rich-text
*
* @ignore
*
* @param {Array|Object} formatTypes Format types received.
*
* @return {Object} Action object.
*/
function addFormatTypes(formatTypes) {
return {
type: 'ADD_FORMAT_TYPES',
formatTypes: Array.isArray(formatTypes) ? formatTypes : [formatTypes]
};
}
/**
* Returns an action object used to remove a registered format type.
*
* Ignored from documentation as unregisterFormatType should be used instead from @wordpress/rich-text
*
* @ignore
*
* @param {string|Array} names Format name.
*
* @return {Object} Action object.
*/
function removeFormatTypes(names) {
return {
type: 'REMOVE_FORMAT_TYPES',
names: Array.isArray(names) ? names : [names]
};
}
;// ./node_modules/@wordpress/rich-text/build-module/store/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const STORE_NAME = 'core/rich-text';
/**
* Store definition for the rich-text namespace.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
*
* @type {Object}
*/
const store = (0,external_wp_data_namespaceObject.createReduxStore)(STORE_NAME, {
reducer: reducer,
selectors: selectors_namespaceObject,
actions: actions_namespaceObject
});
(0,external_wp_data_namespaceObject.register)(store);
;// ./node_modules/@wordpress/rich-text/build-module/is-format-equal.js
/** @typedef {import('./types').RichTextFormat} RichTextFormat */
/**
* Optimised equality check for format objects.
*
* @param {?RichTextFormat} format1 Format to compare.
* @param {?RichTextFormat} format2 Format to compare.
*
* @return {boolean} True if formats are equal, false if not.
*/
function isFormatEqual(format1, format2) {
// Both not defined.
if (format1 === format2) {
return true;
}
// Either not defined.
if (!format1 || !format2) {
return false;
}
if (format1.type !== format2.type) {
return false;
}
const attributes1 = format1.attributes;
const attributes2 = format2.attributes;
// Both not defined.
if (attributes1 === attributes2) {
return true;
}
// Either not defined.
if (!attributes1 || !attributes2) {
return false;
}
const keys1 = Object.keys(attributes1);
const keys2 = Object.keys(attributes2);
if (keys1.length !== keys2.length) {
return false;
}
const length = keys1.length;
// Optimise for speed.
for (let i = 0; i < length; i++) {
const name = keys1[i];
if (attributes1[name] !== attributes2[name]) {
return false;
}
}
return true;
}
;// ./node_modules/@wordpress/rich-text/build-module/normalise-formats.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Normalises formats: ensures subsequent adjacent equal formats have the same
* reference.
*
* @param {RichTextValue} value Value to normalise formats of.
*
* @return {RichTextValue} New value with normalised formats.
*/
function normaliseFormats(value) {
const newFormats = value.formats.slice();
newFormats.forEach((formatsAtIndex, index) => {
const formatsAtPreviousIndex = newFormats[index - 1];
if (formatsAtPreviousIndex) {
const newFormatsAtIndex = formatsAtIndex.slice();
newFormatsAtIndex.forEach((format, formatIndex) => {
const previousFormat = formatsAtPreviousIndex[formatIndex];
if (isFormatEqual(format, previousFormat)) {
newFormatsAtIndex[formatIndex] = previousFormat;
}
});
newFormats[index] = newFormatsAtIndex;
}
});
return {
...value,
formats: newFormats
};
}
;// ./node_modules/@wordpress/rich-text/build-module/apply-format.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/** @typedef {import('./types').RichTextFormat} RichTextFormat */
function replace(array, index, value) {
array = array.slice();
array[index] = value;
return array;
}
/**
* Apply a format object to a Rich Text value from the given `startIndex` to the
* given `endIndex`. Indices are retrieved from the selection if none are
* provided.
*
* @param {RichTextValue} value Value to modify.
* @param {RichTextFormat} format Format to apply.
* @param {number} [startIndex] Start index.
* @param {number} [endIndex] End index.
*
* @return {RichTextValue} A new value with the format applied.
*/
function applyFormat(value, format, startIndex = value.start, endIndex = value.end) {
const {
formats,
activeFormats
} = value;
const newFormats = formats.slice();
// The selection is collapsed.
if (startIndex === endIndex) {
const startFormat = newFormats[startIndex]?.find(({
type
}) => type === format.type);
// If the caret is at a format of the same type, expand start and end to
// the edges of the format. This is useful to apply new attributes.
if (startFormat) {
const index = newFormats[startIndex].indexOf(startFormat);
while (newFormats[startIndex] && newFormats[startIndex][index] === startFormat) {
newFormats[startIndex] = replace(newFormats[startIndex], index, format);
startIndex--;
}
endIndex++;
while (newFormats[endIndex] && newFormats[endIndex][index] === startFormat) {
newFormats[endIndex] = replace(newFormats[endIndex], index, format);
endIndex++;
}
}
} else {
// Determine the highest position the new format can be inserted at.
let position = +Infinity;
for (let index = startIndex; index < endIndex; index++) {
if (newFormats[index]) {
newFormats[index] = newFormats[index].filter(({
type
}) => type !== format.type);
const length = newFormats[index].length;
if (length < position) {
position = length;
}
} else {
newFormats[index] = [];
position = 0;
}
}
for (let index = startIndex; index < endIndex; index++) {
newFormats[index].splice(position, 0, format);
}
}
return normaliseFormats({
...value,
formats: newFormats,
// Always revise active formats. This serves as a placeholder for new
// inputs with the format so new input appears with the format applied,
// and ensures a format of the same type uses the latest values.
activeFormats: [...(activeFormats?.filter(({
type
}) => type !== format.type) || []), format]
});
}
;// ./node_modules/@wordpress/rich-text/build-module/create-element.js
/**
* Parse the given HTML into a body element.
*
* Note: The current implementation will return a shared reference, reset on
* each call to `createElement`. Therefore, you should not hold a reference to
* the value to operate upon asynchronously, as it may have unexpected results.
*
* @param {HTMLDocument} document The HTML document to use to parse.
* @param {string} html The HTML to parse.
*
* @return {HTMLBodyElement} Body element with parsed HTML.
*/
function createElement({
implementation
}, html) {
// Because `createHTMLDocument` is an expensive operation, and with this
// function being internal to `rich-text` (full control in avoiding a risk
// of asynchronous operations on the shared reference), a single document
// is reused and reset for each call to the function.
if (!createElement.body) {
createElement.body = implementation.createHTMLDocument('').body;
}
createElement.body.innerHTML = html;
return createElement.body;
}
;// ./node_modules/@wordpress/rich-text/build-module/special-characters.js
/**
* Object replacement character, used as a placeholder for objects.
*/
const OBJECT_REPLACEMENT_CHARACTER = '\ufffc';
/**
* Zero width non-breaking space, used as padding in the editable DOM tree when
* it is empty otherwise.
*/
const ZWNBSP = '\ufeff';
;// external ["wp","escapeHtml"]
const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
;// ./node_modules/@wordpress/rich-text/build-module/get-active-formats.js
/** @typedef {import('./types').RichTextValue} RichTextValue */
/** @typedef {import('./types').RichTextFormatList} RichTextFormatList */
/**
* Internal dependencies
*/
/**
* Gets the all format objects at the start of the selection.
*
* @param {RichTextValue} value Value to inspect.
* @param {Array} EMPTY_ACTIVE_FORMATS Array to return if there are no
* active formats.
*
* @return {RichTextFormatList} Active format objects.
*/
function getActiveFormats(value, EMPTY_ACTIVE_FORMATS = []) {
const {
formats,
start,
end,
activeFormats
} = value;
if (start === undefined) {
return EMPTY_ACTIVE_FORMATS;
}
if (start === end) {
// For a collapsed caret, it is possible to override the active formats.
if (activeFormats) {
return activeFormats;
}
const formatsBefore = formats[start - 1] || EMPTY_ACTIVE_FORMATS;
const formatsAfter = formats[start] || EMPTY_ACTIVE_FORMATS;
// By default, select the lowest amount of formats possible (which means
// the caret is positioned outside the format boundary). The user can
// then use arrow keys to define `activeFormats`.
if (formatsBefore.length < formatsAfter.length) {
return formatsBefore;
}
return formatsAfter;
}
// If there's no formats at the start index, there are not active formats.
if (!formats[start]) {
return EMPTY_ACTIVE_FORMATS;
}
const selectedFormats = formats.slice(start, end);
// Clone the formats so we're not mutating the live value.
const _activeFormats = [...selectedFormats[0]];
let i = selectedFormats.length;
// For performance reasons, start from the end where it's much quicker to
// realise that there are no active formats.
while (i--) {
const formatsAtIndex = selectedFormats[i];
// If we run into any index without formats, we're sure that there's no
// active formats.
if (!formatsAtIndex) {
return EMPTY_ACTIVE_FORMATS;
}
let ii = _activeFormats.length;
// Loop over the active formats and remove any that are not present at
// the current index.
while (ii--) {
const format = _activeFormats[ii];
if (!formatsAtIndex.find(_format => isFormatEqual(format, _format))) {
_activeFormats.splice(ii, 1);
}
}
// If there are no active formats, we can stop.
if (_activeFormats.length === 0) {
return EMPTY_ACTIVE_FORMATS;
}
}
return _activeFormats || EMPTY_ACTIVE_FORMATS;
}
;// ./node_modules/@wordpress/rich-text/build-module/get-format-type.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
/**
* Returns a registered format type.
*
* @param {string} name Format name.
*
* @return {RichTextFormatType|undefined} Format type.
*/
function get_format_type_getFormatType(name) {
return (0,external_wp_data_namespaceObject.select)(store).getFormatType(name);
}
;// ./node_modules/@wordpress/rich-text/build-module/to-tree.js
/**
* Internal dependencies
*/
function restoreOnAttributes(attributes, isEditableTree) {
if (isEditableTree) {
return attributes;
}
const newAttributes = {};
for (const key in attributes) {
let newKey = key;
if (key.startsWith('data-disable-rich-text-')) {
newKey = key.slice('data-disable-rich-text-'.length);
}
newAttributes[newKey] = attributes[key];
}
return newAttributes;
}
/**
* Converts a format object to information that can be used to create an element
* from (type, attributes and object).
*
* @param {Object} $1 Named parameters.
* @param {string} $1.type The format type.
* @param {string} $1.tagName The tag name.
* @param {Object} $1.attributes The format attributes.
* @param {Object} $1.unregisteredAttributes The unregistered format
* attributes.
* @param {boolean} $1.object Whether or not it is an object
* format.
* @param {boolean} $1.boundaryClass Whether or not to apply a boundary
* class.
* @param {boolean} $1.isEditableTree
*
* @return {Object} Information to be used for element creation.
*/
function fromFormat({
type,
tagName,
attributes,
unregisteredAttributes,
object,
boundaryClass,
isEditableTree
}) {
const formatType = get_format_type_getFormatType(type);
let elementAttributes = {};
if (boundaryClass && isEditableTree) {
elementAttributes['data-rich-text-format-boundary'] = 'true';
}
if (!formatType) {
if (attributes) {
elementAttributes = {
...attributes,
...elementAttributes
};
}
return {
type,
attributes: restoreOnAttributes(elementAttributes, isEditableTree),
object
};
}
elementAttributes = {
...unregisteredAttributes,
...elementAttributes
};
for (const name in attributes) {
const key = formatType.attributes ? formatType.attributes[name] : false;
if (key) {
elementAttributes[key] = attributes[name];
} else {
elementAttributes[name] = attributes[name];
}
}
if (formatType.className) {
if (elementAttributes.class) {
elementAttributes.class = `${formatType.className} ${elementAttributes.class}`;
} else {
elementAttributes.class = formatType.className;
}
}
// When a format is declared as non editable, make it non editable in the
// editor.
if (isEditableTree && formatType.contentEditable === false) {
elementAttributes.contenteditable = 'false';
}
return {
type: tagName || formatType.tagName,
object: formatType.object,
attributes: restoreOnAttributes(elementAttributes, isEditableTree)
};
}
/**
* Checks if both arrays of formats up until a certain index are equal.
*
* @param {Array} a Array of formats to compare.
* @param {Array} b Array of formats to compare.
* @param {number} index Index to check until.
*/
function isEqualUntil(a, b, index) {
do {
if (a[index] !== b[index]) {
return false;
}
} while (index--);
return true;
}
function toTree({
value,
preserveWhiteSpace,
createEmpty,
append,
getLastChild,
getParent,
isText,
getText,
remove,
appendText,
onStartIndex,
onEndIndex,
isEditableTree,
placeholder
}) {
const {
formats,
replacements,
text,
start,
end
} = value;
const formatsLength = formats.length + 1;
const tree = createEmpty();
const activeFormats = getActiveFormats(value);
const deepestActiveFormat = activeFormats[activeFormats.length - 1];
let lastCharacterFormats;
let lastCharacter;
append(tree, '');
for (let i = 0; i < formatsLength; i++) {
const character = text.charAt(i);
const shouldInsertPadding = isEditableTree && (
// Pad the line if the line is empty.
!lastCharacter ||
// Pad the line if the previous character is a line break, otherwise
// the line break won't be visible.
lastCharacter === '\n');
const characterFormats = formats[i];
let pointer = getLastChild(tree);
if (characterFormats) {
characterFormats.forEach((format, formatIndex) => {
if (pointer && lastCharacterFormats &&
// Reuse the last element if all formats remain the same.
isEqualUntil(characterFormats, lastCharacterFormats, formatIndex)) {
pointer = getLastChild(pointer);
return;
}
const {
type,
tagName,
attributes,
unregisteredAttributes
} = format;
const boundaryClass = isEditableTree && format === deepestActiveFormat;
const parent = getParent(pointer);
const newNode = append(parent, fromFormat({
type,
tagName,
attributes,
unregisteredAttributes,
boundaryClass,
isEditableTree
}));
if (isText(pointer) && getText(pointer).length === 0) {
remove(pointer);
}
pointer = append(newNode, '');
});
}
// If there is selection at 0, handle it before characters are inserted.
if (i === 0) {
if (onStartIndex && start === 0) {
onStartIndex(tree, pointer);
}
if (onEndIndex && end === 0) {
onEndIndex(tree, pointer);
}
}
if (character === OBJECT_REPLACEMENT_CHARACTER) {
const replacement = replacements[i];
if (!replacement) {
continue;
}
const {
type,
attributes,
innerHTML
} = replacement;
const formatType = get_format_type_getFormatType(type);
if (isEditableTree && type === '#comment') {
pointer = append(getParent(pointer), {
type: 'span',
attributes: {
contenteditable: 'false',
'data-rich-text-comment': attributes['data-rich-text-comment']
}
});
append(append(pointer, {
type: 'span'
}), attributes['data-rich-text-comment'].trim());
} else if (!isEditableTree && type === 'script') {
pointer = append(getParent(pointer), fromFormat({
type: 'script',
isEditableTree
}));
append(pointer, {
html: decodeURIComponent(attributes['data-rich-text-script'])
});
} else if (formatType?.contentEditable === false) {
// For non editable formats, render the stored inner HTML.
pointer = append(getParent(pointer), fromFormat({
...replacement,
isEditableTree,
boundaryClass: start === i && end === i + 1
}));
if (innerHTML) {
append(pointer, {
html: innerHTML
});
}
} else {
pointer = append(getParent(pointer), fromFormat({
...replacement,
object: true,
isEditableTree
}));
}
// Ensure pointer is text node.
pointer = append(getParent(pointer), '');
} else if (!preserveWhiteSpace && character === '\n') {
pointer = append(getParent(pointer), {
type: 'br',
attributes: isEditableTree ? {
'data-rich-text-line-break': 'true'
} : undefined,
object: true
});
// Ensure pointer is text node.
pointer = append(getParent(pointer), '');
} else if (!isText(pointer)) {
pointer = append(getParent(pointer), character);
} else {
appendText(pointer, character);
}
if (onStartIndex && start === i + 1) {
onStartIndex(tree, pointer);
}
if (onEndIndex && end === i + 1) {
onEndIndex(tree, pointer);
}
if (shouldInsertPadding && i === text.length) {
append(getParent(pointer), ZWNBSP);
// We CANNOT use CSS to add a placeholder with pseudo elements on
// the main block wrappers because that could clash with theme CSS.
if (placeholder && text.length === 0) {
append(getParent(pointer), {
type: 'span',
attributes: {
'data-rich-text-placeholder': placeholder,
// Necessary to prevent the placeholder from catching
// selection and being editable.
style: 'pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;'
}
});
}
}
lastCharacterFormats = characterFormats;
lastCharacter = character;
}
return tree;
}
;// ./node_modules/@wordpress/rich-text/build-module/to-html-string.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Create an HTML string from a Rich Text value.
*
* @param {Object} $1 Named arguments.
* @param {RichTextValue} $1.value Rich text value.
* @param {boolean} [$1.preserveWhiteSpace] Preserves newlines if true.
*
* @return {string} HTML string.
*/
function toHTMLString({
value,
preserveWhiteSpace
}) {
const tree = toTree({
value,
preserveWhiteSpace,
createEmpty,
append,
getLastChild,
getParent,
isText,
getText,
remove,
appendText
});
return createChildrenHTML(tree.children);
}
function createEmpty() {
return {};
}
function getLastChild({
children
}) {
return children && children[children.length - 1];
}
function append(parent, object) {
if (typeof object === 'string') {
object = {
text: object
};
}
object.parent = parent;
parent.children = parent.children || [];
parent.children.push(object);
return object;
}
function appendText(object, text) {
object.text += text;
}
function getParent({
parent
}) {
return parent;
}
function isText({
text
}) {
return typeof text === 'string';
}
function getText({
text
}) {
return text;
}
function remove(object) {
const index = object.parent.children.indexOf(object);
if (index !== -1) {
object.parent.children.splice(index, 1);
}
return object;
}
function createElementHTML({
type,
attributes,
object,
children
}) {
if (type === '#comment') {
// We can't restore the original comment delimiters, because once parsed
// into DOM nodes, we don't have the information. But in the future we
// could allow comment handlers to specify custom delimiters, for
// example `</{comment-content}>` for Bits, where `comment-content`
// would be `/{bit-name}` or `__{translatable-string}` (TBD).
return `<!--${attributes['data-rich-text-comment']}-->`;
}
let attributeString = '';
for (const key in attributes) {
if (!(0,external_wp_escapeHtml_namespaceObject.isValidAttributeName)(key)) {
continue;
}
attributeString += ` ${key}="${(0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(attributes[key])}"`;
}
if (object) {
return `<${type}${attributeString}>`;
}
return `<${type}${attributeString}>${createChildrenHTML(children)}</${type}>`;
}
function createChildrenHTML(children = []) {
return children.map(child => {
if (child.html !== undefined) {
return child.html;
}
return child.text === undefined ? createElementHTML(child) : (0,external_wp_escapeHtml_namespaceObject.escapeEditableHTML)(child.text);
}).join('');
}
;// ./node_modules/@wordpress/rich-text/build-module/get-text-content.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Get the textual content of a Rich Text value. This is similar to
* `Element.textContent`.
*
* @param {RichTextValue} value Value to use.
*
* @return {string} The text content.
*/
function getTextContent({
text
}) {
return text.replace(OBJECT_REPLACEMENT_CHARACTER, '');
}
;// ./node_modules/@wordpress/rich-text/build-module/create.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
function createEmptyValue() {
return {
formats: [],
replacements: [],
text: ''
};
}
function toFormat({
tagName,
attributes
}) {
let formatType;
if (attributes && attributes.class) {
formatType = (0,external_wp_data_namespaceObject.select)(store).getFormatTypeForClassName(attributes.class);
if (formatType) {
// Preserve any additional classes.
attributes.class = ` ${attributes.class} `.replace(` ${formatType.className} `, ' ').trim();
if (!attributes.class) {
delete attributes.class;
}
}
}
if (!formatType) {
formatType = (0,external_wp_data_namespaceObject.select)(store).getFormatTypeForBareElement(tagName);
}
if (!formatType) {
return attributes ? {
type: tagName,
attributes
} : {
type: tagName
};
}
if (formatType.__experimentalCreatePrepareEditableTree && !formatType.__experimentalCreateOnChangeEditableValue) {
return null;
}
if (!attributes) {
return {
formatType,
type: formatType.name,
tagName
};
}
const registeredAttributes = {};
const unregisteredAttributes = {};
const _attributes = {
...attributes
};
for (const key in formatType.attributes) {
const name = formatType.attributes[key];
registeredAttributes[key] = _attributes[name];
// delete the attribute and what's left is considered
// to be unregistered.
delete _attributes[name];
if (typeof registeredAttributes[key] === 'undefined') {
delete registeredAttributes[key];
}
}
for (const name in _attributes) {
unregisteredAttributes[name] = attributes[name];
}
if (formatType.contentEditable === false) {
delete unregisteredAttributes.contenteditable;
}
return {
formatType,
type: formatType.name,
tagName,
attributes: registeredAttributes,
unregisteredAttributes
};
}
/**
* The RichTextData class is used to instantiate a wrapper around rich text
* values, with methods that can be used to transform or manipulate the data.
*
* - Create an empty instance: `new RichTextData()`.
* - Create one from an HTML string: `RichTextData.fromHTMLString(
* '<em>hello</em>' )`.
* - Create one from a wrapper HTMLElement: `RichTextData.fromHTMLElement(
* document.querySelector( 'p' ) )`.
* - Create one from plain text: `RichTextData.fromPlainText( '1\n2' )`.
* - Create one from a rich text value: `new RichTextData( { text: '...',
* formats: [ ... ] } )`.
*
* @todo Add methods to manipulate the data, such as applyFormat, slice etc.
*/
class RichTextData {
#value;
static empty() {
return new RichTextData();
}
static fromPlainText(text) {
return new RichTextData(create({
text
}));
}
static fromHTMLString(html) {
return new RichTextData(create({
html
}));
}
/**
* Create a RichTextData instance from an HTML element.
*
* @param {HTMLElement} htmlElement The HTML element to create the instance from.
* @param {{preserveWhiteSpace?: boolean}} options Options.
* @return {RichTextData} The RichTextData instance.
*/
static fromHTMLElement(htmlElement, options = {}) {
const {
preserveWhiteSpace = false
} = options;
const element = preserveWhiteSpace ? htmlElement : collapseWhiteSpace(htmlElement);
const richTextData = new RichTextData(create({
element
}));
Object.defineProperty(richTextData, 'originalHTML', {
value: htmlElement.innerHTML
});
return richTextData;
}
constructor(init = createEmptyValue()) {
this.#value = init;
}
toPlainText() {
return getTextContent(this.#value);
}
// We could expose `toHTMLElement` at some point as well, but we'd only use
// it internally.
/**
* Convert the rich text value to an HTML string.
*
* @param {{preserveWhiteSpace?: boolean}} options Options.
* @return {string} The HTML string.
*/
toHTMLString({
preserveWhiteSpace
} = {}) {
return this.originalHTML || toHTMLString({
value: this.#value,
preserveWhiteSpace
});
}
valueOf() {
return this.toHTMLString();
}
toString() {
return this.toHTMLString();
}
toJSON() {
return this.toHTMLString();
}
get length() {
return this.text.length;
}
get formats() {
return this.#value.formats;
}
get replacements() {
return this.#value.replacements;
}
get text() {
return this.#value.text;
}
}
for (const name of Object.getOwnPropertyNames(String.prototype)) {
if (RichTextData.prototype.hasOwnProperty(name)) {
continue;
}
Object.defineProperty(RichTextData.prototype, name, {
value(...args) {
// Should we convert back to RichTextData?
return this.toHTMLString()[name](...args);
}
});
}
/**
* Create a RichText value from an `Element` tree (DOM), an HTML string or a
* plain text string, with optionally a `Range` object to set the selection. If
* called without any input, an empty value will be created. The optional
* functions can be used to filter out content.
*
* A value will have the following shape, which you are strongly encouraged not
* to modify without the use of helper functions:
*
* ```js
* {
* text: string,
* formats: Array,
* replacements: Array,
* ?start: number,
* ?end: number,
* }
* ```
*
* As you can see, text and formatting are separated. `text` holds the text,
* including any replacement characters for objects and lines. `formats`,
* `objects` and `lines` are all sparse arrays of the same length as `text`. It
* holds information about the formatting at the relevant text indices. Finally
* `start` and `end` state which text indices are selected. They are only
* provided if a `Range` was given.
*
* @param {Object} [$1] Optional named arguments.
* @param {Element} [$1.element] Element to create value from.
* @param {string} [$1.text] Text to create value from.
* @param {string} [$1.html] HTML to create value from.
* @param {Range} [$1.range] Range to create value from.
* @param {boolean} [$1.__unstableIsEditableTree]
* @return {RichTextValue} A rich text value.
*/
function create({
element,
text,
html,
range,
__unstableIsEditableTree: isEditableTree
} = {}) {
if (html instanceof RichTextData) {
return {
text: html.text,
formats: html.formats,
replacements: html.replacements
};
}
if (typeof text === 'string' && text.length > 0) {
return {
formats: Array(text.length),
replacements: Array(text.length),
text
};
}
if (typeof html === 'string' && html.length > 0) {
// It does not matter which document this is, we're just using it to
// parse.
element = createElement(document, html);
}
if (typeof element !== 'object') {
return createEmptyValue();
}
return createFromElement({
element,
range,
isEditableTree
});
}
/**
* Helper to accumulate the value's selection start and end from the current
* node and range.
*
* @param {Object} accumulator Object to accumulate into.
* @param {Node} node Node to create value with.
* @param {Range} range Range to create value with.
* @param {Object} value Value that is being accumulated.
*/
function accumulateSelection(accumulator, node, range, value) {
if (!range) {
return;
}
const {
parentNode
} = node;
const {
startContainer,
startOffset,
endContainer,
endOffset
} = range;
const currentLength = accumulator.text.length;
// Selection can be extracted from value.
if (value.start !== undefined) {
accumulator.start = currentLength + value.start;
// Range indicates that the current node has selection.
} else if (node === startContainer && node.nodeType === node.TEXT_NODE) {
accumulator.start = currentLength + startOffset;
// Range indicates that the current node is selected.
} else if (parentNode === startContainer && node === startContainer.childNodes[startOffset]) {
accumulator.start = currentLength;
// Range indicates that the selection is after the current node.
} else if (parentNode === startContainer && node === startContainer.childNodes[startOffset - 1]) {
accumulator.start = currentLength + value.text.length;
// Fallback if no child inside handled the selection.
} else if (node === startContainer) {
accumulator.start = currentLength;
}
// Selection can be extracted from value.
if (value.end !== undefined) {
accumulator.end = currentLength + value.end;
// Range indicates that the current node has selection.
} else if (node === endContainer && node.nodeType === node.TEXT_NODE) {
accumulator.end = currentLength + endOffset;
// Range indicates that the current node is selected.
} else if (parentNode === endContainer && node === endContainer.childNodes[endOffset - 1]) {
accumulator.end = currentLength + value.text.length;
// Range indicates that the selection is before the current node.
} else if (parentNode === endContainer && node === endContainer.childNodes[endOffset]) {
accumulator.end = currentLength;
// Fallback if no child inside handled the selection.
} else if (node === endContainer) {
accumulator.end = currentLength + endOffset;
}
}
/**
* Adjusts the start and end offsets from a range based on a text filter.
*
* @param {Node} node Node of which the text should be filtered.
* @param {Range} range The range to filter.
* @param {Function} filter Function to use to filter the text.
*
* @return {Object|void} Object containing range properties.
*/
function filterRange(node, range, filter) {
if (!range) {
return;
}
const {
startContainer,
endContainer
} = range;
let {
startOffset,
endOffset
} = range;
if (node === startContainer) {
startOffset = filter(node.nodeValue.slice(0, startOffset)).length;
}
if (node === endContainer) {
endOffset = filter(node.nodeValue.slice(0, endOffset)).length;
}
return {
startContainer,
startOffset,
endContainer,
endOffset
};
}
/**
* Collapse any whitespace used for HTML formatting to one space character,
* because it will also be displayed as such by the browser.
*
* We need to strip it from the content because we use white-space: pre-wrap for
* displaying editable rich text. Without using white-space: pre-wrap, the
* browser will litter the content with non breaking spaces, among other issues.
* See packages/rich-text/src/component/use-default-style.js.
*
* @see
* https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse#collapsing_of_white_space
*
* @param {HTMLElement} element
* @param {boolean} isRoot
*
* @return {HTMLElement} New element with collapsed whitespace.
*/
function collapseWhiteSpace(element, isRoot = true) {
const clone = element.cloneNode(true);
clone.normalize();
Array.from(clone.childNodes).forEach((node, i, nodes) => {
if (node.nodeType === node.TEXT_NODE) {
let newNodeValue = node.nodeValue;
if (/[\n\t\r\f]/.test(newNodeValue)) {
newNodeValue = newNodeValue.replace(/[\n\t\r\f]+/g, ' ');
}
if (newNodeValue.indexOf(' ') !== -1) {
newNodeValue = newNodeValue.replace(/ {2,}/g, ' ');
}
if (i === 0 && newNodeValue.startsWith(' ')) {
newNodeValue = newNodeValue.slice(1);
} else if (isRoot && i === nodes.length - 1 && newNodeValue.endsWith(' ')) {
newNodeValue = newNodeValue.slice(0, -1);
}
node.nodeValue = newNodeValue;
} else if (node.nodeType === node.ELEMENT_NODE) {
collapseWhiteSpace(node, false);
}
});
return clone;
}
/**
* We need to normalise line breaks to `\n` so they are consistent across
* platforms and serialised properly. Not removing \r would cause it to
* linger and result in double line breaks when whitespace is preserved.
*/
const CARRIAGE_RETURN = '\r';
/**
* Removes reserved characters used by rich-text (zero width non breaking spaces
* added by `toTree` and object replacement characters).
*
* @param {string} string
*/
function removeReservedCharacters(string) {
// with the global flag, note that we should create a new regex each time OR
// reset lastIndex state.
return string.replace(new RegExp(`[${ZWNBSP}${OBJECT_REPLACEMENT_CHARACTER}${CARRIAGE_RETURN}]`, 'gu'), '');
}
/**
* Creates a Rich Text value from a DOM element and range.
*
* @param {Object} $1 Named arguments.
* @param {Element} [$1.element] Element to create value from.
* @param {Range} [$1.range] Range to create value from.
* @param {boolean} [$1.isEditableTree]
*
* @return {RichTextValue} A rich text value.
*/
function createFromElement({
element,
range,
isEditableTree
}) {
const accumulator = createEmptyValue();
if (!element) {
return accumulator;
}
if (!element.hasChildNodes()) {
accumulateSelection(accumulator, element, range, createEmptyValue());
return accumulator;
}
const length = element.childNodes.length;
// Optimise for speed.
for (let index = 0; index < length; index++) {
const node = element.childNodes[index];
const tagName = node.nodeName.toLowerCase();
if (node.nodeType === node.TEXT_NODE) {
const text = removeReservedCharacters(node.nodeValue);
range = filterRange(node, range, removeReservedCharacters);
accumulateSelection(accumulator, node, range, {
text
});
// Create a sparse array of the same length as `text`, in which
// formats can be added.
accumulator.formats.length += text.length;
accumulator.replacements.length += text.length;
accumulator.text += text;
continue;
}
if (node.nodeType === node.COMMENT_NODE || node.nodeType === node.ELEMENT_NODE && node.tagName === 'SPAN' && node.hasAttribute('data-rich-text-comment')) {
const value = {
formats: [,],
replacements: [{
type: '#comment',
attributes: {
'data-rich-text-comment': node.nodeType === node.COMMENT_NODE ? node.nodeValue : node.getAttribute('data-rich-text-comment')
}
}],
text: OBJECT_REPLACEMENT_CHARACTER
};
accumulateSelection(accumulator, node, range, value);
mergePair(accumulator, value);
continue;
}
if (node.nodeType !== node.ELEMENT_NODE) {
continue;
}
if (isEditableTree &&
// Ignore any line breaks that are not inserted by us.
tagName === 'br' && !node.getAttribute('data-rich-text-line-break')) {
accumulateSelection(accumulator, node, range, createEmptyValue());
continue;
}
if (tagName === 'script') {
const value = {
formats: [,],
replacements: [{
type: tagName,
attributes: {
'data-rich-text-script': node.getAttribute('data-rich-text-script') || encodeURIComponent(node.innerHTML)
}
}],
text: OBJECT_REPLACEMENT_CHARACTER
};
accumulateSelection(accumulator, node, range, value);
mergePair(accumulator, value);
continue;
}
if (tagName === 'br') {
accumulateSelection(accumulator, node, range, createEmptyValue());
mergePair(accumulator, create({
text: '\n'
}));
continue;
}
const format = toFormat({
tagName,
attributes: getAttributes({
element: node
})
});
// When a format type is declared as not editable, replace it with an
// object replacement character and preserve the inner HTML.
if (format?.formatType?.contentEditable === false) {
delete format.formatType;
accumulateSelection(accumulator, node, range, createEmptyValue());
mergePair(accumulator, {
formats: [,],
replacements: [{
...format,
innerHTML: node.innerHTML
}],
text: OBJECT_REPLACEMENT_CHARACTER
});
continue;
}
if (format) {
delete format.formatType;
}
const value = createFromElement({
element: node,
range,
isEditableTree
});
accumulateSelection(accumulator, node, range, value);
// Ignore any placeholders, but keep their content since the browser
// might insert text inside them when the editable element is flex.
if (!format || node.getAttribute('data-rich-text-placeholder')) {
mergePair(accumulator, value);
} else if (value.text.length === 0) {
if (format.attributes) {
mergePair(accumulator, {
formats: [,],
replacements: [format],
text: OBJECT_REPLACEMENT_CHARACTER
});
}
} else {
// Indices should share a reference to the same formats array.
// Only create a new reference if `formats` changes.
function mergeFormats(formats) {
if (mergeFormats.formats === formats) {
return mergeFormats.newFormats;
}
const newFormats = formats ? [format, ...formats] : [format];
mergeFormats.formats = formats;
mergeFormats.newFormats = newFormats;
return newFormats;
}
// Since the formats parameter can be `undefined`, preset
// `mergeFormats` with a new reference.
mergeFormats.newFormats = [format];
mergePair(accumulator, {
...value,
formats: Array.from(value.formats, mergeFormats)
});
}
}
return accumulator;
}
/**
* Gets the attributes of an element in object shape.
*
* @param {Object} $1 Named arguments.
* @param {Element} $1.element Element to get attributes from.
*
* @return {Object|void} Attribute object or `undefined` if the element has no
* attributes.
*/
function getAttributes({
element
}) {
if (!element.hasAttributes()) {
return;
}
const length = element.attributes.length;
let accumulator;
// Optimise for speed.
for (let i = 0; i < length; i++) {
const {
name,
value
} = element.attributes[i];
if (name.indexOf('data-rich-text-') === 0) {
continue;
}
const safeName = /^on/i.test(name) ? 'data-disable-rich-text-' + name : name;
accumulator = accumulator || {};
accumulator[safeName] = value;
}
return accumulator;
}
;// ./node_modules/@wordpress/rich-text/build-module/concat.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Concats a pair of rich text values. Not that this mutates `a` and does NOT
* normalise formats!
*
* @param {Object} a Value to mutate.
* @param {Object} b Value to add read from.
*
* @return {Object} `a`, mutated.
*/
function mergePair(a, b) {
a.formats = a.formats.concat(b.formats);
a.replacements = a.replacements.concat(b.replacements);
a.text += b.text;
return a;
}
/**
* Combine all Rich Text values into one. This is similar to
* `String.prototype.concat`.
*
* @param {...RichTextValue} values Objects to combine.
*
* @return {RichTextValue} A new value combining all given records.
*/
function concat(...values) {
return normaliseFormats(values.reduce(mergePair, create()));
}
;// ./node_modules/@wordpress/rich-text/build-module/get-active-format.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/** @typedef {import('./types').RichTextFormat} RichTextFormat */
/**
* Gets the format object by type at the start of the selection. This can be
* used to get e.g. the URL of a link format at the current selection, but also
* to check if a format is active at the selection. Returns undefined if there
* is no format at the selection.
*
* @param {RichTextValue} value Value to inspect.
* @param {string} formatType Format type to look for.
*
* @return {RichTextFormat|undefined} Active format object of the specified
* type, or undefined.
*/
function getActiveFormat(value, formatType) {
return getActiveFormats(value).find(({
type
}) => type === formatType);
}
;// ./node_modules/@wordpress/rich-text/build-module/get-active-object.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/** @typedef {import('./types').RichTextFormat} RichTextFormat */
/**
* Gets the active object, if there is any.
*
* @param {RichTextValue} value Value to inspect.
*
* @return {RichTextFormat|void} Active object, or undefined.
*/
function getActiveObject({
start,
end,
replacements,
text
}) {
if (start + 1 !== end || text[start] !== OBJECT_REPLACEMENT_CHARACTER) {
return;
}
return replacements[start];
}
;// ./node_modules/@wordpress/rich-text/build-module/is-collapsed.js
/**
* Internal dependencies
*/
/**
* Check if the selection of a Rich Text value is collapsed or not. Collapsed
* means that no characters are selected, but there is a caret present. If there
* is no selection, `undefined` will be returned. This is similar to
* `window.getSelection().isCollapsed()`.
*
* @param props The rich text value to check.
* @param props.start
* @param props.end
* @return True if the selection is collapsed, false if not, undefined if there is no selection.
*/
function isCollapsed({
start,
end
}) {
if (start === undefined || end === undefined) {
return;
}
return start === end;
}
;// ./node_modules/@wordpress/rich-text/build-module/is-empty.js
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Check if a Rich Text value is Empty, meaning it contains no text or any
* objects (such as images).
*
* @param {RichTextValue} value Value to use.
*
* @return {boolean} True if the value is empty, false if not.
*/
function isEmpty({
text
}) {
return text.length === 0;
}
;// ./node_modules/@wordpress/rich-text/build-module/join.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Combine an array of Rich Text values into one, optionally separated by
* `separator`, which can be a Rich Text value, HTML string, or plain text
* string. This is similar to `Array.prototype.join`.
*
* @param {Array<RichTextValue>} values An array of values to join.
* @param {string|RichTextValue} [separator] Separator string or value.
*
* @return {RichTextValue} A new combined value.
*/
function join(values, separator = '') {
if (typeof separator === 'string') {
separator = create({
text: separator
});
}
return normaliseFormats(values.reduce((accumulator, {
formats,
replacements,
text
}) => ({
formats: accumulator.formats.concat(separator.formats, formats),
replacements: accumulator.replacements.concat(separator.replacements, replacements),
text: accumulator.text + separator.text + text
})));
}
;// ./node_modules/@wordpress/rich-text/build-module/register-format-type.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @typedef {Object} WPFormat
*
* @property {string} name A string identifying the format. Must be
* unique across all registered formats.
* @property {string} tagName The HTML tag this format will wrap the
* selection with.
* @property {boolean} interactive Whether format makes content interactive or not.
* @property {string | null} [className] A class to match the format.
* @property {string} title Name of the format.
* @property {Function} edit Should return a component for the user to
* interact with the new registered format.
*/
/**
* Registers a new format provided a unique name and an object defining its
* behavior.
*
* @param {string} name Format name.
* @param {WPFormat} settings Format settings.
*
* @return {WPFormat|undefined} The format, if it has been successfully
* registered; otherwise `undefined`.
*/
function registerFormatType(name, settings) {
settings = {
name,
...settings
};
if (typeof settings.name !== 'string') {
window.console.error('Format names must be strings.');
return;
}
if (!/^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test(settings.name)) {
window.console.error('Format names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-format');
return;
}
if ((0,external_wp_data_namespaceObject.select)(store).getFormatType(settings.name)) {
window.console.error('Format "' + settings.name + '" is already registered.');
return;
}
if (typeof settings.tagName !== 'string' || settings.tagName === '') {
window.console.error('Format tag names must be a string.');
return;
}
if ((typeof settings.className !== 'string' || settings.className === '') && settings.className !== null) {
window.console.error('Format class names must be a string, or null to handle bare elements.');
return;
}
if (!/^[_a-zA-Z]+[a-zA-Z0-9_-]*$/.test(settings.className)) {
window.console.error('A class name must begin with a letter, followed by any number of hyphens, underscores, letters, or numbers.');
return;
}
if (settings.className === null) {
const formatTypeForBareElement = (0,external_wp_data_namespaceObject.select)(store).getFormatTypeForBareElement(settings.tagName);
if (formatTypeForBareElement && formatTypeForBareElement.name !== 'core/unknown') {
window.console.error(`Format "${formatTypeForBareElement.name}" is already registered to handle bare tag name "${settings.tagName}".`);
return;
}
} else {
const formatTypeForClassName = (0,external_wp_data_namespaceObject.select)(store).getFormatTypeForClassName(settings.className);
if (formatTypeForClassName) {
window.console.error(`Format "${formatTypeForClassName.name}" is already registered to handle class name "${settings.className}".`);
return;
}
}
if (!('title' in settings) || settings.title === '') {
window.console.error('The format "' + settings.name + '" must have a title.');
return;
}
if ('keywords' in settings && settings.keywords.length > 3) {
window.console.error('The format "' + settings.name + '" can have a maximum of 3 keywords.');
return;
}
if (typeof settings.title !== 'string') {
window.console.error('Format titles must be strings.');
return;
}
(0,external_wp_data_namespaceObject.dispatch)(store).addFormatTypes(settings);
return settings;
}
;// ./node_modules/@wordpress/rich-text/build-module/remove-format.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Remove any format object from a Rich Text value by type from the given
* `startIndex` to the given `endIndex`. Indices are retrieved from the
* selection if none are provided.
*
* @param {RichTextValue} value Value to modify.
* @param {string} formatType Format type to remove.
* @param {number} [startIndex] Start index.
* @param {number} [endIndex] End index.
*
* @return {RichTextValue} A new value with the format applied.
*/
function removeFormat(value, formatType, startIndex = value.start, endIndex = value.end) {
const {
formats,
activeFormats
} = value;
const newFormats = formats.slice();
// If the selection is collapsed, expand start and end to the edges of the
// format.
if (startIndex === endIndex) {
const format = newFormats[startIndex]?.find(({
type
}) => type === formatType);
if (format) {
while (newFormats[startIndex]?.find(newFormat => newFormat === format)) {
filterFormats(newFormats, startIndex, formatType);
startIndex--;
}
endIndex++;
while (newFormats[endIndex]?.find(newFormat => newFormat === format)) {
filterFormats(newFormats, endIndex, formatType);
endIndex++;
}
}
} else {
for (let i = startIndex; i < endIndex; i++) {
if (newFormats[i]) {
filterFormats(newFormats, i, formatType);
}
}
}
return normaliseFormats({
...value,
formats: newFormats,
activeFormats: activeFormats?.filter(({
type
}) => type !== formatType) || []
});
}
function filterFormats(formats, index, formatType) {
const newFormats = formats[index].filter(({
type
}) => type !== formatType);
if (newFormats.length) {
formats[index] = newFormats;
} else {
delete formats[index];
}
}
;// ./node_modules/@wordpress/rich-text/build-module/insert.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Insert a Rich Text value, an HTML string, or a plain text string, into a
* Rich Text value at the given `startIndex`. Any content between `startIndex`
* and `endIndex` will be removed. Indices are retrieved from the selection if
* none are provided.
*
* @param {RichTextValue} value Value to modify.
* @param {RichTextValue|string} valueToInsert Value to insert.
* @param {number} [startIndex] Start index.
* @param {number} [endIndex] End index.
*
* @return {RichTextValue} A new value with the value inserted.
*/
function insert(value, valueToInsert, startIndex = value.start, endIndex = value.end) {
const {
formats,
replacements,
text
} = value;
if (typeof valueToInsert === 'string') {
valueToInsert = create({
text: valueToInsert
});
}
const index = startIndex + valueToInsert.text.length;
return normaliseFormats({
formats: formats.slice(0, startIndex).concat(valueToInsert.formats, formats.slice(endIndex)),
replacements: replacements.slice(0, startIndex).concat(valueToInsert.replacements, replacements.slice(endIndex)),
text: text.slice(0, startIndex) + valueToInsert.text + text.slice(endIndex),
start: index,
end: index
});
}
;// ./node_modules/@wordpress/rich-text/build-module/remove.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Remove content from a Rich Text value between the given `startIndex` and
* `endIndex`. Indices are retrieved from the selection if none are provided.
*
* @param {RichTextValue} value Value to modify.
* @param {number} [startIndex] Start index.
* @param {number} [endIndex] End index.
*
* @return {RichTextValue} A new value with the content removed.
*/
function remove_remove(value, startIndex, endIndex) {
return insert(value, create(), startIndex, endIndex);
}
;// ./node_modules/@wordpress/rich-text/build-module/replace.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Search a Rich Text value and replace the match(es) with `replacement`. This
* is similar to `String.prototype.replace`.
*
* @param {RichTextValue} value The value to modify.
* @param {RegExp|string} pattern A RegExp object or literal. Can also be
* a string. It is treated as a verbatim
* string and is not interpreted as a
* regular expression. Only the first
* occurrence will be replaced.
* @param {Function|string} replacement The match or matches are replaced with
* the specified or the value returned by
* the specified function.
*
* @return {RichTextValue} A new value with replacements applied.
*/
function replace_replace({
formats,
replacements,
text,
start,
end
}, pattern, replacement) {
text = text.replace(pattern, (match, ...rest) => {
const offset = rest[rest.length - 2];
let newText = replacement;
let newFormats;
let newReplacements;
if (typeof newText === 'function') {
newText = replacement(match, ...rest);
}
if (typeof newText === 'object') {
newFormats = newText.formats;
newReplacements = newText.replacements;
newText = newText.text;
} else {
newFormats = Array(newText.length);
newReplacements = Array(newText.length);
if (formats[offset]) {
newFormats = newFormats.fill(formats[offset]);
}
}
formats = formats.slice(0, offset).concat(newFormats, formats.slice(offset + match.length));
replacements = replacements.slice(0, offset).concat(newReplacements, replacements.slice(offset + match.length));
if (start) {
start = end = offset + newText.length;
}
return newText;
});
return normaliseFormats({
formats,
replacements,
text,
start,
end
});
}
;// ./node_modules/@wordpress/rich-text/build-module/insert-object.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/** @typedef {import('./types').RichTextFormat} RichTextFormat */
/**
* Insert a format as an object into a Rich Text value at the given
* `startIndex`. Any content between `startIndex` and `endIndex` will be
* removed. Indices are retrieved from the selection if none are provided.
*
* @param {RichTextValue} value Value to modify.
* @param {RichTextFormat} formatToInsert Format to insert as object.
* @param {number} [startIndex] Start index.
* @param {number} [endIndex] End index.
*
* @return {RichTextValue} A new value with the object inserted.
*/
function insertObject(value, formatToInsert, startIndex, endIndex) {
const valueToInsert = {
formats: [,],
replacements: [formatToInsert],
text: OBJECT_REPLACEMENT_CHARACTER
};
return insert(value, valueToInsert, startIndex, endIndex);
}
;// ./node_modules/@wordpress/rich-text/build-module/slice.js
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Slice a Rich Text value from `startIndex` to `endIndex`. Indices are
* retrieved from the selection if none are provided. This is similar to
* `String.prototype.slice`.
*
* @param {RichTextValue} value Value to modify.
* @param {number} [startIndex] Start index.
* @param {number} [endIndex] End index.
*
* @return {RichTextValue} A new extracted value.
*/
function slice(value, startIndex = value.start, endIndex = value.end) {
const {
formats,
replacements,
text
} = value;
if (startIndex === undefined || endIndex === undefined) {
return {
...value
};
}
return {
formats: formats.slice(startIndex, endIndex),
replacements: replacements.slice(startIndex, endIndex),
text: text.slice(startIndex, endIndex)
};
}
;// ./node_modules/@wordpress/rich-text/build-module/split.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Split a Rich Text value in two at the given `startIndex` and `endIndex`, or
* split at the given separator. This is similar to `String.prototype.split`.
* Indices are retrieved from the selection if none are provided.
*
* @param {RichTextValue} value
* @param {number|string} [string] Start index, or string at which to split.
*
* @return {Array<RichTextValue>|undefined} An array of new values.
*/
function split({
formats,
replacements,
text,
start,
end
}, string) {
if (typeof string !== 'string') {
return splitAtSelection(...arguments);
}
let nextStart = 0;
return text.split(string).map(substring => {
const startIndex = nextStart;
const value = {
formats: formats.slice(startIndex, startIndex + substring.length),
replacements: replacements.slice(startIndex, startIndex + substring.length),
text: substring
};
nextStart += string.length + substring.length;
if (start !== undefined && end !== undefined) {
if (start >= startIndex && start < nextStart) {
value.start = start - startIndex;
} else if (start < startIndex && end > startIndex) {
value.start = 0;
}
if (end >= startIndex && end < nextStart) {
value.end = end - startIndex;
} else if (start < nextStart && end > nextStart) {
value.end = substring.length;
}
}
return value;
});
}
function splitAtSelection({
formats,
replacements,
text,
start,
end
}, startIndex = start, endIndex = end) {
if (start === undefined || end === undefined) {
return;
}
const before = {
formats: formats.slice(0, startIndex),
replacements: replacements.slice(0, startIndex),
text: text.slice(0, startIndex)
};
const after = {
formats: formats.slice(endIndex),
replacements: replacements.slice(endIndex),
text: text.slice(endIndex),
start: 0,
end: 0
};
return [before, after];
}
;// ./node_modules/@wordpress/rich-text/build-module/is-range-equal.js
/**
* Returns true if two ranges are equal, or false otherwise. Ranges are
* considered equal if their start and end occur in the same container and
* offset.
*
* @param {Range|null} a First range object to test.
* @param {Range|null} b First range object to test.
*
* @return {boolean} Whether the two ranges are equal.
*/
function isRangeEqual(a, b) {
return a === b || a && b && a.startContainer === b.startContainer && a.startOffset === b.startOffset && a.endContainer === b.endContainer && a.endOffset === b.endOffset;
}
;// ./node_modules/@wordpress/rich-text/build-module/to-dom.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Creates a path as an array of indices from the given root node to the given
* node.
*
* @param {Node} node Node to find the path of.
* @param {HTMLElement} rootNode Root node to find the path from.
* @param {Array} path Initial path to build on.
*
* @return {Array} The path from the root node to the node.
*/
function createPathToNode(node, rootNode, path) {
const parentNode = node.parentNode;
let i = 0;
while (node = node.previousSibling) {
i++;
}
path = [i, ...path];
if (parentNode !== rootNode) {
path = createPathToNode(parentNode, rootNode, path);
}
return path;
}
/**
* Gets a node given a path (array of indices) from the given node.
*
* @param {HTMLElement} node Root node to find the wanted node in.
* @param {Array} path Path (indices) to the wanted node.
*
* @return {Object} Object with the found node and the remaining offset (if any).
*/
function getNodeByPath(node, path) {
path = [...path];
while (node && path.length > 1) {
node = node.childNodes[path.shift()];
}
return {
node,
offset: path[0]
};
}
function to_dom_append(element, child) {
if (child.html !== undefined) {
return element.innerHTML += child.html;
}
if (typeof child === 'string') {
child = element.ownerDocument.createTextNode(child);
}
const {
type,
attributes
} = child;
if (type) {
if (type === '#comment') {
child = element.ownerDocument.createComment(attributes['data-rich-text-comment']);
} else {
child = element.ownerDocument.createElement(type);
for (const key in attributes) {
child.setAttribute(key, attributes[key]);
}
}
}
return element.appendChild(child);
}
function to_dom_appendText(node, text) {
node.appendData(text);
}
function to_dom_getLastChild({
lastChild
}) {
return lastChild;
}
function to_dom_getParent({
parentNode
}) {
return parentNode;
}
function to_dom_isText(node) {
return node.nodeType === node.TEXT_NODE;
}
function to_dom_getText({
nodeValue
}) {
return nodeValue;
}
function to_dom_remove(node) {
return node.parentNode.removeChild(node);
}
function toDom({
value,
prepareEditableTree,
isEditableTree = true,
placeholder,
doc = document
}) {
let startPath = [];
let endPath = [];
if (prepareEditableTree) {
value = {
...value,
formats: prepareEditableTree(value)
};
}
/**
* Returns a new instance of a DOM tree upon which RichText operations can be
* applied.
*
* Note: The current implementation will return a shared reference, reset on
* each call to `createEmpty`. Therefore, you should not hold a reference to
* the value to operate upon asynchronously, as it may have unexpected results.
*
* @return {Object} RichText tree.
*/
const createEmpty = () => createElement(doc, '');
const tree = toTree({
value,
createEmpty,
append: to_dom_append,
getLastChild: to_dom_getLastChild,
getParent: to_dom_getParent,
isText: to_dom_isText,
getText: to_dom_getText,
remove: to_dom_remove,
appendText: to_dom_appendText,
onStartIndex(body, pointer) {
startPath = createPathToNode(pointer, body, [pointer.nodeValue.length]);
},
onEndIndex(body, pointer) {
endPath = createPathToNode(pointer, body, [pointer.nodeValue.length]);
},
isEditableTree,
placeholder
});
return {
body: tree,
selection: {
startPath,
endPath
}
};
}
/**
* Create an `Element` tree from a Rich Text value and applies the difference to
* the `Element` tree contained by `current`.
*
* @param {Object} $1 Named arguments.
* @param {RichTextValue} $1.value Value to apply.
* @param {HTMLElement} $1.current The live root node to apply the element tree to.
* @param {Function} [$1.prepareEditableTree] Function to filter editorable formats.
* @param {boolean} [$1.__unstableDomOnly] Only apply elements, no selection.
* @param {string} [$1.placeholder] Placeholder text.
*/
function apply({
value,
current,
prepareEditableTree,
__unstableDomOnly,
placeholder
}) {
// Construct a new element tree in memory.
const {
body,
selection
} = toDom({
value,
prepareEditableTree,
placeholder,
doc: current.ownerDocument
});
applyValue(body, current);
if (value.start !== undefined && !__unstableDomOnly) {
applySelection(selection, current);
}
}
function applyValue(future, current) {
let i = 0;
let futureChild;
while (futureChild = future.firstChild) {
const currentChild = current.childNodes[i];
if (!currentChild) {
current.appendChild(futureChild);
} else if (!currentChild.isEqualNode(futureChild)) {
if (currentChild.nodeName !== futureChild.nodeName || currentChild.nodeType === currentChild.TEXT_NODE && currentChild.data !== futureChild.data) {
current.replaceChild(futureChild, currentChild);
} else {
const currentAttributes = currentChild.attributes;
const futureAttributes = futureChild.attributes;
if (currentAttributes) {
let ii = currentAttributes.length;
// Reverse loop because `removeAttribute` on `currentChild`
// changes `currentAttributes`.
while (ii--) {
const {
name
} = currentAttributes[ii];
if (!futureChild.getAttribute(name)) {
currentChild.removeAttribute(name);
}
}
}
if (futureAttributes) {
for (let ii = 0; ii < futureAttributes.length; ii++) {
const {
name,
value
} = futureAttributes[ii];
if (currentChild.getAttribute(name) !== value) {
currentChild.setAttribute(name, value);
}
}
}
applyValue(futureChild, currentChild);
future.removeChild(futureChild);
}
} else {
future.removeChild(futureChild);
}
i++;
}
while (current.childNodes[i]) {
current.removeChild(current.childNodes[i]);
}
}
function applySelection({
startPath,
endPath
}, current) {
const {
node: startContainer,
offset: startOffset
} = getNodeByPath(current, startPath);
const {
node: endContainer,
offset: endOffset
} = getNodeByPath(current, endPath);
const {
ownerDocument
} = current;
const {
defaultView
} = ownerDocument;
const selection = defaultView.getSelection();
const range = ownerDocument.createRange();
range.setStart(startContainer, startOffset);
range.setEnd(endContainer, endOffset);
const {
activeElement
} = ownerDocument;
if (selection.rangeCount > 0) {
// If the to be added range and the live range are the same, there's no
// need to remove the live range and add the equivalent range.
if (isRangeEqual(range, selection.getRangeAt(0))) {
return;
}
selection.removeAllRanges();
}
selection.addRange(range);
// This function is not intended to cause a shift in focus. Since the above
// selection manipulations may shift focus, ensure that focus is restored to
// its previous state.
if (activeElement !== ownerDocument.activeElement) {
// The `instanceof` checks protect against edge cases where the focused
// element is not of the interface HTMLElement (does not have a `focus`
// or `blur` property).
//
// See: https://github.com/Microsoft/TypeScript/issues/5901#issuecomment-431649653
if (activeElement instanceof defaultView.HTMLElement) {
activeElement.focus();
}
}
}
;// external ["wp","a11y"]
const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
;// external ["wp","i18n"]
const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
;// ./node_modules/@wordpress/rich-text/build-module/toggle-format.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/** @typedef {import('./types').RichTextFormat} RichTextFormat */
/**
* Toggles a format object to a Rich Text value at the current selection.
*
* @param {RichTextValue} value Value to modify.
* @param {RichTextFormat} format Format to apply or remove.
*
* @return {RichTextValue} A new value with the format applied or removed.
*/
function toggleFormat(value, format) {
if (getActiveFormat(value, format.type)) {
// For screen readers, will announce if formatting control is disabled.
if (format.title) {
// translators: %s: title of the formatting control
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('%s removed.'), format.title), 'assertive');
}
return removeFormat(value, format.type);
}
// For screen readers, will announce if formatting control is enabled.
if (format.title) {
// translators: %s: title of the formatting control
(0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('%s applied.'), format.title), 'assertive');
}
return applyFormat(value, format);
}
;// ./node_modules/@wordpress/rich-text/build-module/unregister-format-type.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import('./register-format-type').WPFormat} WPFormat */
/**
* Unregisters a format.
*
* @param {string} name Format name.
*
* @return {WPFormat|undefined} The previous format value, if it has
* been successfully unregistered;
* otherwise `undefined`.
*/
function unregisterFormatType(name) {
const oldFormat = (0,external_wp_data_namespaceObject.select)(store).getFormatType(name);
if (!oldFormat) {
window.console.error(`Format ${name} is not registered.`);
return;
}
(0,external_wp_data_namespaceObject.dispatch)(store).removeFormatTypes(name);
return oldFormat;
}
;// external ["wp","element"]
const external_wp_element_namespaceObject = window["wp"]["element"];
;// external ["wp","deprecated"]
const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
;// ./node_modules/@wordpress/rich-text/build-module/component/use-anchor-ref.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* @template T
* @typedef {import('@wordpress/element').RefObject<T>} RefObject<T>
*/
/** @typedef {import('../register-format-type').WPFormat} WPFormat */
/** @typedef {import('../types').RichTextValue} RichTextValue */
/**
* This hook, to be used in a format type's Edit component, returns the active
* element that is formatted, or the selection range if no format is active.
* The returned value is meant to be used for positioning UI, e.g. by passing it
* to the `Popover` component.
*
* @param {Object} $1 Named parameters.
* @param {RefObject<HTMLElement>} $1.ref React ref of the element
* containing the editable content.
* @param {RichTextValue} $1.value Value to check for selection.
* @param {WPFormat} $1.settings The format type's settings.
*
* @return {Element|Range} The active element or selection range.
*/
function useAnchorRef({
ref,
value,
settings = {}
}) {
external_wp_deprecated_default()('`useAnchorRef` hook', {
since: '6.1',
alternative: '`useAnchor` hook'
});
const {
tagName,
className,
name
} = settings;
const activeFormat = name ? getActiveFormat(value, name) : undefined;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
if (!ref.current) {
return;
}
const {
ownerDocument: {
defaultView
}
} = ref.current;
const selection = defaultView.getSelection();
if (!selection.rangeCount) {
return;
}
const range = selection.getRangeAt(0);
if (!activeFormat) {
return range;
}
let element = range.startContainer;
// If the caret is right before the element, select the next element.
element = element.nextElementSibling || element;
while (element.nodeType !== element.ELEMENT_NODE) {
element = element.parentNode;
}
return element.closest(tagName + (className ? '.' + className : ''));
}, [activeFormat, value.start, value.end, tagName, className]);
}
;// external ["wp","compose"]
const external_wp_compose_namespaceObject = window["wp"]["compose"];
;// ./node_modules/@wordpress/rich-text/build-module/component/use-anchor.js
/**
* WordPress dependencies
*/
/** @typedef {import('../register-format-type').WPFormat} WPFormat */
/** @typedef {import('../types').RichTextValue} RichTextValue */
/**
* Given a range and a format tag name and class name, returns the closest
* format element.
*
* @param {Range} range The Range to check.
* @param {HTMLElement} editableContentElement The editable wrapper.
* @param {string} tagName The tag name of the format element.
* @param {string} className The class name of the format element.
*
* @return {HTMLElement|undefined} The format element, if found.
*/
function getFormatElement(range, editableContentElement, tagName, className) {
let element = range.startContainer;
// Even if the active format is defined, the actually DOM range's start
// container may be outside of the format's DOM element:
// `a‸<strong>b</strong>` (DOM) while visually it's `a<strong>‸b</strong>`.
// So at a given selection index, start with the deepest format DOM element.
if (element.nodeType === element.TEXT_NODE && range.startOffset === element.length && element.nextSibling) {
element = element.nextSibling;
while (element.firstChild) {
element = element.firstChild;
}
}
if (element.nodeType !== element.ELEMENT_NODE) {
element = element.parentElement;
}
if (!element) {
return;
}
if (element === editableContentElement) {
return;
}
if (!editableContentElement.contains(element)) {
return;
}
const selector = tagName + (className ? '.' + className : '');
// .closest( selector ), but with a boundary. Check if the element matches
// the selector. If it doesn't match, try the parent element if it's not the
// editable wrapper. We don't want to try to match ancestors of the editable
// wrapper, which is what .closest( selector ) would do. When the element is
// the editable wrapper (which is most likely the case because most text is
// unformatted), this never runs.
while (element !== editableContentElement) {
if (element.matches(selector)) {
return element;
}
element = element.parentElement;
}
}
/**
* @typedef {Object} VirtualAnchorElement
* @property {() => DOMRect} getBoundingClientRect A function returning a DOMRect
* @property {HTMLElement} contextElement The actual DOM element
*/
/**
* Creates a virtual anchor element for a range.
*
* @param {Range} range The range to create a virtual anchor element for.
* @param {HTMLElement} editableContentElement The editable wrapper.
*
* @return {VirtualAnchorElement} The virtual anchor element.
*/
function createVirtualAnchorElement(range, editableContentElement) {
return {
contextElement: editableContentElement,
getBoundingClientRect() {
return editableContentElement.contains(range.startContainer) ? range.getBoundingClientRect() : editableContentElement.getBoundingClientRect();
}
};
}
/**
* Get the anchor: a format element if there is a matching one based on the
* tagName and className or a range otherwise.
*
* @param {HTMLElement} editableContentElement The editable wrapper.
* @param {string} tagName The tag name of the format
* element.
* @param {string} className The class name of the format
* element.
*
* @return {HTMLElement|VirtualAnchorElement|undefined} The anchor.
*/
function getAnchor(editableContentElement, tagName, className) {
if (!editableContentElement) {
return;
}
const {
ownerDocument
} = editableContentElement;
const {
defaultView
} = ownerDocument;
const selection = defaultView.getSelection();
if (!selection) {
return;
}
if (!selection.rangeCount) {
return;
}
const range = selection.getRangeAt(0);
if (!range || !range.startContainer) {
return;
}
const formatElement = getFormatElement(range, editableContentElement, tagName, className);
if (formatElement) {
return formatElement;
}
return createVirtualAnchorElement(range, editableContentElement);
}
/**
* This hook, to be used in a format type's Edit component, returns the active
* element that is formatted, or a virtual element for the selection range if
* no format is active. The returned value is meant to be used for positioning
* UI, e.g. by passing it to the `Popover` component via the `anchor` prop.
*
* @param {Object} $1 Named parameters.
* @param {HTMLElement|null} $1.editableContentElement The element containing
* the editable content.
* @param {WPFormat=} $1.settings The format type's settings.
* @return {Element|VirtualAnchorElement|undefined|null} The active element or selection range.
*/
function useAnchor({
editableContentElement,
settings = {}
}) {
const {
tagName,
className,
isActive
} = settings;
const [anchor, setAnchor] = (0,external_wp_element_namespaceObject.useState)(() => getAnchor(editableContentElement, tagName, className));
const wasActive = (0,external_wp_compose_namespaceObject.usePrevious)(isActive);
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!editableContentElement) {
return;
}
function callback() {
setAnchor(getAnchor(editableContentElement, tagName, className));
}
function attach() {
ownerDocument.addEventListener('selectionchange', callback);
}
function detach() {
ownerDocument.removeEventListener('selectionchange', callback);
}
const {
ownerDocument
} = editableContentElement;
if (editableContentElement === ownerDocument.activeElement ||
// When a link is created, we need to attach the popover to the newly created anchor.
!wasActive && isActive ||
// Sometimes we're _removing_ an active anchor, such as the inline color popover.
// When we add the color, it switches from a virtual anchor to a `<mark>` element.
// When we _remove_ the color, it switches from a `<mark>` element to a virtual anchor.
wasActive && !isActive) {
setAnchor(getAnchor(editableContentElement, tagName, className));
attach();
}
editableContentElement.addEventListener('focusin', attach);
editableContentElement.addEventListener('focusout', detach);
return () => {
detach();
editableContentElement.removeEventListener('focusin', attach);
editableContentElement.removeEventListener('focusout', detach);
};
}, [editableContentElement, tagName, className, isActive, wasActive]);
return anchor;
}
;// ./node_modules/@wordpress/rich-text/build-module/component/use-default-style.js
/**
* WordPress dependencies
*/
/**
* In HTML, leading and trailing spaces are not visible, and multiple spaces
* elsewhere are visually reduced to one space. This rule prevents spaces from
* collapsing so all space is visible in the editor and can be removed. It also
* prevents some browsers from inserting non-breaking spaces at the end of a
* line to prevent the space from visually disappearing. Sometimes these non
* breaking spaces can linger in the editor causing unwanted non breaking spaces
* in between words. If also prevent Firefox from inserting a trailing `br` node
* to visualise any trailing space, causing the element to be saved.
*
* > Authors are encouraged to set the 'white-space' property on editing hosts
* > and on markup that was originally created through these editing mechanisms
* > to the value 'pre-wrap'. Default HTML whitespace handling is not well
* > suited to WYSIWYG editing, and line wrapping will not work correctly in
* > some corner cases if 'white-space' is left at its default value.
*
* https://html.spec.whatwg.org/multipage/interaction.html#best-practices-for-in-page-editors
*
* @type {string}
*/
const whiteSpace = 'pre-wrap';
/**
* A minimum width of 1px will prevent the rich text container from collapsing
* to 0 width and hiding the caret. This is useful for inline containers.
*/
const minWidth = '1px';
function useDefaultStyle() {
return (0,external_wp_element_namespaceObject.useCallback)(element => {
if (!element) {
return;
}
element.style.whiteSpace = whiteSpace;
element.style.minWidth = minWidth;
}, []);
}
;// ./node_modules/@wordpress/rich-text/build-module/component/use-boundary-style.js
/**
* WordPress dependencies
*/
/*
* Calculates and renders the format boundary style when the active formats
* change.
*/
function useBoundaryStyle({
record
}) {
const ref = (0,external_wp_element_namespaceObject.useRef)();
const {
activeFormats = [],
replacements,
start
} = record.current;
const activeReplacement = replacements[start];
(0,external_wp_element_namespaceObject.useEffect)(() => {
// There's no need to recalculate the boundary styles if no formats are
// active, because no boundary styles will be visible.
if ((!activeFormats || !activeFormats.length) && !activeReplacement) {
return;
}
const boundarySelector = '*[data-rich-text-format-boundary]';
const element = ref.current.querySelector(boundarySelector);
if (!element) {
return;
}
const {
ownerDocument
} = element;
const {
defaultView
} = ownerDocument;
const computedStyle = defaultView.getComputedStyle(element);
const newColor = computedStyle.color.replace(')', ', 0.2)').replace('rgb', 'rgba');
const selector = `.rich-text:focus ${boundarySelector}`;
const rule = `background-color: ${newColor}`;
const style = `${selector} {${rule}}`;
const globalStyleId = 'rich-text-boundary-style';
let globalStyle = ownerDocument.getElementById(globalStyleId);
if (!globalStyle) {
globalStyle = ownerDocument.createElement('style');
globalStyle.id = globalStyleId;
ownerDocument.head.appendChild(globalStyle);
}
if (globalStyle.innerHTML !== style) {
globalStyle.innerHTML = style;
}
}, [activeFormats, activeReplacement]);
return ref;
}
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/copy-handler.js
/**
* Internal dependencies
*/
/* harmony default export */ const copy_handler = (props => element => {
function onCopy(event) {
const {
record
} = props.current;
const {
ownerDocument
} = element;
if (isCollapsed(record.current) || !element.contains(ownerDocument.activeElement)) {
return;
}
const selectedRecord = slice(record.current);
const plainText = getTextContent(selectedRecord);
const html = toHTMLString({
value: selectedRecord
});
event.clipboardData.setData('text/plain', plainText);
event.clipboardData.setData('text/html', html);
event.clipboardData.setData('rich-text', 'true');
event.preventDefault();
if (event.type === 'cut') {
ownerDocument.execCommand('delete');
}
}
const {
defaultView
} = element.ownerDocument;
defaultView.addEventListener('copy', onCopy);
defaultView.addEventListener('cut', onCopy);
return () => {
defaultView.removeEventListener('copy', onCopy);
defaultView.removeEventListener('cut', onCopy);
};
});
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/select-object.js
/* harmony default export */ const select_object = (() => element => {
function onClick(event) {
const {
target
} = event;
// If the child element has no text content, it must be an object.
if (target === element || target.textContent && target.isContentEditable) {
return;
}
const {
ownerDocument
} = target;
const {
defaultView
} = ownerDocument;
const selection = defaultView.getSelection();
// If it's already selected, do nothing and let default behavior happen.
// This means it's "click-through".
if (selection.containsNode(target)) {
return;
}
const range = ownerDocument.createRange();
// If the target is within a non editable element, select the non
// editable element.
const nodeToSelect = target.isContentEditable ? target : target.closest('[contenteditable]');
range.selectNode(nodeToSelect);
selection.removeAllRanges();
selection.addRange(range);
event.preventDefault();
}
function onFocusIn(event) {
// When there is incoming focus from a link, select the object.
if (event.relatedTarget && !element.contains(event.relatedTarget) && event.relatedTarget.tagName === 'A') {
onClick(event);
}
}
element.addEventListener('click', onClick);
element.addEventListener('focusin', onFocusIn);
return () => {
element.removeEventListener('click', onClick);
element.removeEventListener('focusin', onFocusIn);
};
});
;// external ["wp","keycodes"]
const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/format-boundaries.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EMPTY_ACTIVE_FORMATS = [];
/* harmony default export */ const format_boundaries = (props => element => {
function onKeyDown(event) {
const {
keyCode,
shiftKey,
altKey,
metaKey,
ctrlKey
} = event;
if (
// Only override left and right keys without modifiers pressed.
shiftKey || altKey || metaKey || ctrlKey || keyCode !== external_wp_keycodes_namespaceObject.LEFT && keyCode !== external_wp_keycodes_namespaceObject.RIGHT) {
return;
}
const {
record,
applyRecord,
forceRender
} = props.current;
const {
text,
formats,
start,
end,
activeFormats: currentActiveFormats = []
} = record.current;
const collapsed = isCollapsed(record.current);
const {
ownerDocument
} = element;
const {
defaultView
} = ownerDocument;
// To do: ideally, we should look at visual position instead.
const {
direction
} = defaultView.getComputedStyle(element);
const reverseKey = direction === 'rtl' ? external_wp_keycodes_namespaceObject.RIGHT : external_wp_keycodes_namespaceObject.LEFT;
const isReverse = event.keyCode === reverseKey;
// If the selection is collapsed and at the very start, do nothing if
// navigating backward.
// If the selection is collapsed and at the very end, do nothing if
// navigating forward.
if (collapsed && currentActiveFormats.length === 0) {
if (start === 0 && isReverse) {
return;
}
if (end === text.length && !isReverse) {
return;
}
}
// If the selection is not collapsed, let the browser handle collapsing
// the selection for now. Later we could expand this logic to set
// boundary positions if needed.
if (!collapsed) {
return;
}
const formatsBefore = formats[start - 1] || EMPTY_ACTIVE_FORMATS;
const formatsAfter = formats[start] || EMPTY_ACTIVE_FORMATS;
const destination = isReverse ? formatsBefore : formatsAfter;
const isIncreasing = currentActiveFormats.every((format, index) => format === destination[index]);
let newActiveFormatsLength = currentActiveFormats.length;
if (!isIncreasing) {
newActiveFormatsLength--;
} else if (newActiveFormatsLength < destination.length) {
newActiveFormatsLength++;
}
if (newActiveFormatsLength === currentActiveFormats.length) {
record.current._newActiveFormats = destination;
return;
}
event.preventDefault();
const origin = isReverse ? formatsAfter : formatsBefore;
const source = isIncreasing ? destination : origin;
const newActiveFormats = source.slice(0, newActiveFormatsLength);
const newValue = {
...record.current,
activeFormats: newActiveFormats
};
record.current = newValue;
applyRecord(newValue);
forceRender();
}
element.addEventListener('keydown', onKeyDown);
return () => {
element.removeEventListener('keydown', onKeyDown);
};
});
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/delete.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/* harmony default export */ const event_listeners_delete = (props => element => {
function onKeyDown(event) {
const {
keyCode
} = event;
const {
createRecord,
handleChange
} = props.current;
if (event.defaultPrevented) {
return;
}
if (keyCode !== external_wp_keycodes_namespaceObject.DELETE && keyCode !== external_wp_keycodes_namespaceObject.BACKSPACE) {
return;
}
const currentValue = createRecord();
const {
start,
end,
text
} = currentValue;
// Always handle full content deletion ourselves.
if (start === 0 && end !== 0 && end === text.length) {
handleChange(remove_remove(currentValue));
event.preventDefault();
}
}
element.addEventListener('keydown', onKeyDown);
return () => {
element.removeEventListener('keydown', onKeyDown);
};
});
;// ./node_modules/@wordpress/rich-text/build-module/update-formats.js
/**
* Internal dependencies
*/
/** @typedef {import('./types').RichTextValue} RichTextValue */
/**
* Efficiently updates all the formats from `start` (including) until `end`
* (excluding) with the active formats. Mutates `value`.
*
* @param {Object} $1 Named paramentes.
* @param {RichTextValue} $1.value Value te update.
* @param {number} $1.start Index to update from.
* @param {number} $1.end Index to update until.
* @param {Array} $1.formats Replacement formats.
*
* @return {RichTextValue} Mutated value.
*/
function updateFormats({
value,
start,
end,
formats
}) {
// Start and end may be switched in case of delete.
const min = Math.min(start, end);
const max = Math.max(start, end);
const formatsBefore = value.formats[min - 1] || [];
const formatsAfter = value.formats[max] || [];
// First, fix the references. If any format right before or after are
// equal, the replacement format should use the same reference.
value.activeFormats = formats.map((format, index) => {
if (formatsBefore[index]) {
if (isFormatEqual(format, formatsBefore[index])) {
return formatsBefore[index];
}
} else if (formatsAfter[index]) {
if (isFormatEqual(format, formatsAfter[index])) {
return formatsAfter[index];
}
}
return format;
});
while (--end >= start) {
if (value.activeFormats.length > 0) {
value.formats[end] = value.activeFormats;
} else {
delete value.formats[end];
}
}
return value;
}
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/input-and-selection.js
/**
* Internal dependencies
*/
/**
* All inserting input types that would insert HTML into the DOM.
*
* @see https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes
*
* @type {Set}
*/
const INSERTION_INPUT_TYPES_TO_IGNORE = new Set(['insertParagraph', 'insertOrderedList', 'insertUnorderedList', 'insertHorizontalRule', 'insertLink']);
const input_and_selection_EMPTY_ACTIVE_FORMATS = [];
const PLACEHOLDER_ATTR_NAME = 'data-rich-text-placeholder';
/**
* If the selection is set on the placeholder element, collapse the selection to
* the start (before the placeholder).
*
* @param {Window} defaultView
*/
function fixPlaceholderSelection(defaultView) {
const selection = defaultView.getSelection();
const {
anchorNode,
anchorOffset
} = selection;
if (anchorNode.nodeType !== anchorNode.ELEMENT_NODE) {
return;
}
const targetNode = anchorNode.childNodes[anchorOffset];
if (!targetNode || targetNode.nodeType !== targetNode.ELEMENT_NODE || !targetNode.hasAttribute(PLACEHOLDER_ATTR_NAME)) {
return;
}
selection.collapseToStart();
}
/* harmony default export */ const input_and_selection = (props => element => {
const {
ownerDocument
} = element;
const {
defaultView
} = ownerDocument;
let isComposing = false;
function onInput(event) {
// Do not trigger a change if characters are being composed. Browsers
// will usually emit a final `input` event when the characters are
// composed. As of December 2019, Safari doesn't support
// nativeEvent.isComposing.
if (isComposing) {
return;
}
let inputType;
if (event) {
inputType = event.inputType;
}
const {
record,
applyRecord,
createRecord,
handleChange
} = props.current;
// The browser formatted something or tried to insert HTML. Overwrite
// it. It will be handled later by the format library if needed.
if (inputType && (inputType.indexOf('format') === 0 || INSERTION_INPUT_TYPES_TO_IGNORE.has(inputType))) {
applyRecord(record.current);
return;
}
const currentValue = createRecord();
const {
start,
activeFormats: oldActiveFormats = []
} = record.current;
// Update the formats between the last and new caret position.
const change = updateFormats({
value: currentValue,
start,
end: currentValue.start,
formats: oldActiveFormats
});
handleChange(change);
}
/**
* Syncs the selection to local state. A callback for the `selectionchange`
* event.
*/
function handleSelectionChange() {
const {
record,
applyRecord,
createRecord,
onSelectionChange
} = props.current;
// Check if the implementor disabled editing. `contentEditable` does
// disable input, but not text selection, so we must ignore selection
// changes.
if (element.contentEditable !== 'true') {
return;
}
// Ensure the active element is the rich text element.
if (ownerDocument.activeElement !== element) {
// If it is not, we can stop listening for selection changes. We
// resume listening when the element is focused.
ownerDocument.removeEventListener('selectionchange', handleSelectionChange);
return;
}
// In case of a keyboard event, ignore selection changes during
// composition.
if (isComposing) {
return;
}
const {
start,
end,
text
} = createRecord();
const oldRecord = record.current;
// Fallback mechanism for IE11, which doesn't support the input event.
// Any input results in a selection change.
if (text !== oldRecord.text) {
onInput();
return;
}
if (start === oldRecord.start && end === oldRecord.end) {
// Sometimes the browser may set the selection on the placeholder
// element, in which case the caret is not visible. We need to set
// the caret before the placeholder if that's the case.
if (oldRecord.text.length === 0 && start === 0) {
fixPlaceholderSelection(defaultView);
}
return;
}
const newValue = {
...oldRecord,
start,
end,
// _newActiveFormats may be set on arrow key navigation to control
// the right boundary position. If undefined, getActiveFormats will
// give the active formats according to the browser.
activeFormats: oldRecord._newActiveFormats,
_newActiveFormats: undefined
};
const newActiveFormats = getActiveFormats(newValue, input_and_selection_EMPTY_ACTIVE_FORMATS);
// Update the value with the new active formats.
newValue.activeFormats = newActiveFormats;
// It is important that the internal value is updated first,
// otherwise the value will be wrong on render!
record.current = newValue;
applyRecord(newValue, {
domOnly: true
});
onSelectionChange(start, end);
}
function onCompositionStart() {
isComposing = true;
// Do not update the selection when characters are being composed as
// this rerenders the component and might destroy internal browser
// editing state.
ownerDocument.removeEventListener('selectionchange', handleSelectionChange);
// Remove the placeholder. Since the rich text value doesn't update
// during composition, the placeholder doesn't get removed. There's no
// need to re-add it, when the value is updated on compositionend it
// will be re-added when the value is empty.
element.querySelector(`[${PLACEHOLDER_ATTR_NAME}]`)?.remove();
}
function onCompositionEnd() {
isComposing = false;
// Ensure the value is up-to-date for browsers that don't emit a final
// input event after composition.
onInput({
inputType: 'insertText'
});
// Tracking selection changes can be resumed.
ownerDocument.addEventListener('selectionchange', handleSelectionChange);
}
function onFocus() {
const {
record,
isSelected,
onSelectionChange,
applyRecord
} = props.current;
// When the whole editor is editable, let writing flow handle
// selection.
if (element.parentElement.closest('[contenteditable="true"]')) {
return;
}
if (!isSelected) {
// We know for certain that on focus, the old selection is invalid.
// It will be recalculated on the next mouseup, keyup, or touchend
// event.
const index = undefined;
record.current = {
...record.current,
start: index,
end: index,
activeFormats: input_and_selection_EMPTY_ACTIVE_FORMATS
};
} else {
applyRecord(record.current, {
domOnly: true
});
}
onSelectionChange(record.current.start, record.current.end);
// There is no selection change event when the element is focused, so
// we need to manually trigger it. The selection is also not available
// yet in this call stack.
window.queueMicrotask(handleSelectionChange);
ownerDocument.addEventListener('selectionchange', handleSelectionChange);
}
element.addEventListener('input', onInput);
element.addEventListener('compositionstart', onCompositionStart);
element.addEventListener('compositionend', onCompositionEnd);
element.addEventListener('focus', onFocus);
return () => {
element.removeEventListener('input', onInput);
element.removeEventListener('compositionstart', onCompositionStart);
element.removeEventListener('compositionend', onCompositionEnd);
element.removeEventListener('focus', onFocus);
};
});
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/selection-change-compat.js
/**
* Internal dependencies
*/
/**
* Sometimes some browsers are not firing a `selectionchange` event when
* changing the selection by mouse or keyboard. This hook makes sure that, if we
* detect no `selectionchange` or `input` event between the up and down events,
* we fire a `selectionchange` event.
*/
/* harmony default export */ const selection_change_compat = (() => element => {
const {
ownerDocument
} = element;
const {
defaultView
} = ownerDocument;
const selection = defaultView?.getSelection();
let range;
function getRange() {
return selection.rangeCount ? selection.getRangeAt(0) : null;
}
function onDown(event) {
const type = event.type === 'keydown' ? 'keyup' : 'pointerup';
function onCancel() {
ownerDocument.removeEventListener(type, onUp);
ownerDocument.removeEventListener('selectionchange', onCancel);
ownerDocument.removeEventListener('input', onCancel);
}
function onUp() {
onCancel();
if (isRangeEqual(range, getRange())) {
return;
}
ownerDocument.dispatchEvent(new Event('selectionchange'));
}
ownerDocument.addEventListener(type, onUp);
ownerDocument.addEventListener('selectionchange', onCancel);
ownerDocument.addEventListener('input', onCancel);
range = getRange();
}
element.addEventListener('pointerdown', onDown);
element.addEventListener('keydown', onDown);
return () => {
element.removeEventListener('pointerdown', onDown);
element.removeEventListener('keydown', onDown);
};
});
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/prevent-focus-capture.js
/**
* Prevents focus from being captured by the element when clicking _outside_
* around the element. This may happen when the parent element is flex.
* @see https://github.com/WordPress/gutenberg/pull/65857
* @see https://github.com/WordPress/gutenberg/pull/66402
*/
function preventFocusCapture() {
return element => {
const {
ownerDocument
} = element;
const {
defaultView
} = ownerDocument;
let value = null;
function onPointerDown(event) {
// Abort if the event is default prevented, we will not get a pointer up event.
if (event.defaultPrevented) {
return;
}
if (event.target === element) {
return;
}
if (!event.target.contains(element)) {
return;
}
value = element.getAttribute('contenteditable');
element.setAttribute('contenteditable', 'false');
defaultView.getSelection().removeAllRanges();
}
function onPointerUp() {
if (value !== null) {
element.setAttribute('contenteditable', value);
value = null;
}
}
defaultView.addEventListener('pointerdown', onPointerDown);
defaultView.addEventListener('pointerup', onPointerUp);
return () => {
defaultView.removeEventListener('pointerdown', onPointerDown);
defaultView.removeEventListener('pointerup', onPointerUp);
};
};
}
;// ./node_modules/@wordpress/rich-text/build-module/component/event-listeners/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const allEventListeners = [copy_handler, select_object, format_boundaries, event_listeners_delete, input_and_selection, selection_change_compat, preventFocusCapture];
function useEventListeners(props) {
const propsRef = (0,external_wp_element_namespaceObject.useRef)(props);
(0,external_wp_element_namespaceObject.useInsertionEffect)(() => {
propsRef.current = props;
});
const refEffects = (0,external_wp_element_namespaceObject.useMemo)(() => allEventListeners.map(refEffect => refEffect(propsRef)), [propsRef]);
return (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
const cleanups = refEffects.map(effect => effect(element));
return () => {
cleanups.forEach(cleanup => cleanup());
};
}, [refEffects]);
}
;// ./node_modules/@wordpress/rich-text/build-module/component/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useRichText({
value = '',
selectionStart,
selectionEnd,
placeholder,
onSelectionChange,
preserveWhiteSpace,
onChange,
__unstableDisableFormats: disableFormats,
__unstableIsSelected: isSelected,
__unstableDependencies = [],
__unstableAfterParse,
__unstableBeforeSerialize,
__unstableAddInvisibleFormats
}) {
const registry = (0,external_wp_data_namespaceObject.useRegistry)();
const [, forceRender] = (0,external_wp_element_namespaceObject.useReducer)(() => ({}));
const ref = (0,external_wp_element_namespaceObject.useRef)();
function createRecord() {
const {
ownerDocument: {
defaultView
}
} = ref.current;
const selection = defaultView.getSelection();
const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
return create({
element: ref.current,
range,
__unstableIsEditableTree: true
});
}
function applyRecord(newRecord, {
domOnly
} = {}) {
apply({
value: newRecord,
current: ref.current,
prepareEditableTree: __unstableAddInvisibleFormats,
__unstableDomOnly: domOnly,
placeholder
});
}
// Internal values are updated synchronously, unlike props and state.
const _valueRef = (0,external_wp_element_namespaceObject.useRef)(value);
const recordRef = (0,external_wp_element_namespaceObject.useRef)();
function setRecordFromProps() {
_valueRef.current = value;
recordRef.current = value;
if (!(value instanceof RichTextData)) {
recordRef.current = value ? RichTextData.fromHTMLString(value, {
preserveWhiteSpace
}) : RichTextData.empty();
}
// To do: make rich text internally work with RichTextData.
recordRef.current = {
text: recordRef.current.text,
formats: recordRef.current.formats,
replacements: recordRef.current.replacements
};
if (disableFormats) {
recordRef.current.formats = Array(value.length);
recordRef.current.replacements = Array(value.length);
}
if (__unstableAfterParse) {
recordRef.current.formats = __unstableAfterParse(recordRef.current);
}
recordRef.current.start = selectionStart;
recordRef.current.end = selectionEnd;
}
const hadSelectionUpdateRef = (0,external_wp_element_namespaceObject.useRef)(false);
if (!recordRef.current) {
hadSelectionUpdateRef.current = isSelected;
setRecordFromProps();
} else if (selectionStart !== recordRef.current.start || selectionEnd !== recordRef.current.end) {
hadSelectionUpdateRef.current = isSelected;
recordRef.current = {
...recordRef.current,
start: selectionStart,
end: selectionEnd,
activeFormats: undefined
};
}
/**
* Sync the value to global state. The node tree and selection will also be
* updated if differences are found.
*
* @param {Object} newRecord The record to sync and apply.
*/
function handleChange(newRecord) {
recordRef.current = newRecord;
applyRecord(newRecord);
if (disableFormats) {
_valueRef.current = newRecord.text;
} else {
const newFormats = __unstableBeforeSerialize ? __unstableBeforeSerialize(newRecord) : newRecord.formats;
newRecord = {
...newRecord,
formats: newFormats
};
if (typeof value === 'string') {
_valueRef.current = toHTMLString({
value: newRecord,
preserveWhiteSpace
});
} else {
_valueRef.current = new RichTextData(newRecord);
}
}
const {
start,
end,
formats,
text
} = recordRef.current;
// Selection must be updated first, so it is recorded in history when
// the content change happens.
// We batch both calls to only attempt to rerender once.
registry.batch(() => {
onSelectionChange(start, end);
onChange(_valueRef.current, {
__unstableFormats: formats,
__unstableText: text
});
});
forceRender();
}
function applyFromProps() {
setRecordFromProps();
applyRecord(recordRef.current);
}
const didMountRef = (0,external_wp_element_namespaceObject.useRef)(false);
// Value updates must happen synchronously to avoid overwriting newer values.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (didMountRef.current && value !== _valueRef.current) {
applyFromProps();
forceRender();
}
}, [value]);
// Value updates must happen synchronously to avoid overwriting newer values.
(0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
if (!hadSelectionUpdateRef.current) {
return;
}
if (ref.current.ownerDocument.activeElement !== ref.current) {
ref.current.focus();
}
applyRecord(recordRef.current);
hadSelectionUpdateRef.current = false;
}, [hadSelectionUpdateRef.current]);
const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, useDefaultStyle(), useBoundaryStyle({
record: recordRef
}), useEventListeners({
record: recordRef,
handleChange,
applyRecord,
createRecord,
isSelected,
onSelectionChange,
forceRender
}), (0,external_wp_compose_namespaceObject.useRefEffect)(() => {
applyFromProps();
didMountRef.current = true;
}, [placeholder, ...__unstableDependencies])]);
return {
value: recordRef.current,
// A function to get the most recent value so event handlers in
// useRichText implementations have access to it. For example when
// listening to input events, we internally update the state, but this
// state is not yet available to the input event handler because React
// may re-render asynchronously.
getValue: () => recordRef.current,
onChange: handleChange,
ref: mergedRefs
};
}
function __experimentalRichText() {}
;// ./node_modules/@wordpress/rich-text/build-module/index.js
/**
* An object which represents a formatted string. See main `@wordpress/rich-text`
* documentation for more information.
*/
(window.wp = window.wp || {}).richText = __webpack_exports__;
/******/ })()
;
كتبت : فرح سمير في ضوء التحولات المتسارعة التي يشهدها العالم في مجالات الاتصالات وتكنولوجيا
المعلومات، تسعى مصر، من خلال رؤية استراتيجية طموحة، إلى تحقيق التحول الرقمي الشامل وتعزيز مكانتها الإقليمية والدولية في الاقتصاد الرقمي.
وفي هذا الإطار، يسعدنا أن نلتقي مع معالي الدكتور” عمرو طلعت، وزير الاتصالات وتكنولوجيا المعلومات”،
لمناقشة أبرز إنجازات الوزارة، وخططها المستقبلية في مجالات التحول الرقمي، وتطوير البنية التحتية، ودعم الشركات الناشئة، وتنمية الكفاءات التكنولوجية، بالإضافة إلى استعراض جهود الدولة في تبني الذكاء الاصطناعي كأحد ركائز التنمية المستدامة.
يأتي هذا اللقاء لإلقاء الضوء على ملامح المشهد الرقمي في مصر، والتعرف على المبادرات والمشروعات الوطنية التي تسعى لتحقيق نقلة نوعية في حياة المواطنين وتعزيز تنافسية الاقتصاد المصري.
– في ضوء الجهود المستمرة لتطوير منصة مصر الرقمية وتوسيع نطاق خدماتها، ما هو الموقف الحالي للخدمات المقدمة من خلال المنصة من حيث عدد الخدمات المقدمة وعدد المستخدمين؟ وما هي الخطط المستقبلية لتعزيز دورها في تحسين كفاءة الخدمات الحكومية وتسهيل حياة المواطنين؟
نعمل على بناء مصر الرقمية التى ترتكز على الفكر الابتكارىوتطويع التكنولوجيات الحديثة للوصول إلى مجتمع رقمى متكامل يتم من خلاله دفع مسيرة التحول الرقمي ومعاونة كافة قطاعات الدولة فىتطويع التكنولوجيات الحديثة لرفع كفاءة الأداء الحكومى وزيادة الانتاجية، وتمكين الشباب من الحصول على فرص عمل متميزة، بالإضافة إلى دعم الابداع الرقمي وريادة الأعمال.
ويعد التحول الرقمي أحد المحاور الرئيسية لاستراتيجية مصر الرقمية. ونسعى من خلال مشروعات التحول الرقمي التعاون مع كافة قطاعات الدولة فى تطويع التكنولوجيات الحديثة لرفع كفاءة الأداء الحكومى وزيادة الإنتاجية وتحسين جودة الخدمات الحكومية المقدمة للمواطنين.
وفي هذا الإطار، تُمثل منصة “مصر الرقمية” أحد أبرز ثمار هذا التوجه؛ حيت توفر المنصة حتى الآن أكثر من 180 خدمة حكومية على المنصة، كما يوجد حاليا 9 مليون مواطن مسجل على منصة مصر الرقمية. ونعمل على التوسع في عدد الخدمات الخدمات الحكومية على المنصة بشكل مستمر، حيث نخطط لإطلاق المزيد منها خلال العام الجاري..
كما نخطط حاليا للمرحلة الثانية من رقمنة الخدمات الحكومية والتي سيتم خلالها قصر تقديم بعض الخدمات الحكومية على المنصات الرقمية بحيث أنه لا يتم تقديمها إلا من خلال منصة رقمية لتخفيف العبء على المكاتب المقدمة للخدمة وتخفيف الجهد على العاملين المقدمين لهذه الخدمات. حيث من المقرر أن يكون هناك 55 خدمة حكومية مقدمة فقط من خلال منصة مصر الرقمية وذلك بنهاية هذا العام وتشمل خدمات التأمينات والسجل التجاري والتعليم وخدمات متعلقة بالأحوال الشخصية بالتعاون مع وزارة الداخلية.
– ما هي أبرز مشروعات التحول الرقمي الجاري تنفيذها؟
هناك العديد من المشروعات التى يتم تنفيذها بالتعاون مع مختلف قطاعات الدولة أبرزها مشروعات تستهدف تفعيل دور التحول الرقمىفى رفع كفاءة خدمات الرعاية الصحية لتطوير الخدمات المقدمة للمواطنين وحوكمة المنظومة وتشمل مشروع النشر المرقمن لمنظومة التأمين الصحى الشامل، والتوسع فى استخدام تقنيات إنترنت الأشياء والتشخيص والتطبيب عن بعد لخدمة المناطق النائية بالتعاون مع وزارتى الصحة والتعليم العالى والبحث العلمى.
كما يتم التعاون مع وزارة الاستثمار والتجارة الخارجية في عدد من المشروعات التي تستهدف إنشاء منظومة رقمية لخدمة الكيانات الاقتصادية وتحسين خدمة المستثمرين في مراحل التعامل مع الجهات الحكومية، وعمل رقمنة كاملة لدورة حياة الشركات تبدأ من تأسيس الشركات حتى تصفية الأعمال. بالإضافة إلى التعاون مع وزارة الزرعة في تنفيذ مشروعات ميكنة الحيازة الزراعية وإصدار كارت الفلاح، وتطوير البوابة المعلوماتية لوزارة الزراعة واستصلاح الأراضى، وحصر وإدارة املاك وأصول وزارة الزراعة، وميكنة الهيئة العامة لمشروعات التعمير والتنمية الزراعية.
كما يتم التعاون مع وزارة الأوقاف في تنفيذ مشروع ميكنة خدمات وزارة الأوقاف وإطلاقها على منصة مصر الرقمية، ورقمنة عملية تلقى تبرعات صكوك الأضاحي، ومشروع رقمنة أطلس وزارة الأوقاف، بالإضافة إلى التعاون فى تنفيذ مشروع حصر وإدارة املاك وأصول الدولة لتمكين وزارة الأوقاف وهيئة الأوقاف المصرية من إدارة أملاكهم على نحو كفء.
– ما العوامل التي ساهمت في حصول مصر على لقب أسرع إنترنت ثابت في أفريقيا في فترات سابقة؟ وما هي أبرز الجهود الحالية والمستقبلية لتحسين خدمات الاتصالات بشكل عام؟
تمثل البنية التحتية الرقمية أحد الممكنات الرئيسية لاستراتيجية مصر الرقمية من أجل تقديم خدمات اتصالات ذات كفاءة عالية، ودعم عمليات التحول الرقمي؛ ولذا كانت من أهم محاور العمل التي تم البدء في تنفيذها لتحقيق استراتيجية مصر الرقمية هو تطوير البنية التحتية الرقمية ورفع كفاءة الانترنت؛ وعند البدء في تنفيذ المشروع في 2018 كان ترتيب مصر في متوسط سرعة الانترنت في المركز الأربعين على مستوى القارة الأفريقية؛ وتم تنفيذ المشروع باستثمارات منذ 2018. حيث تم ضخ استثمارات بقيمة 3.5 مليار دولار فى تطوير البنية التحتية الرقمية ساهمت في مضاعفة سرعة الانترنت الثابت أكثر من 15 مرة خلال 7 أعوام.
وفيما يخض الجهود المعنية بتحسين خدمات المحمول؛ فقد تم مؤخرا منح تراخيص تشغيل خدمات الجيل الخامس للتليفون المحمول لشركات المحمول الأربعة العاملة فى مصر بقيمة 675 مليون دولار. كما يتم استكمال العمل فى تنفيذ خطة لزيادة عدد أبراج المحمول حيث بلغ الاجمالى حتى الان نحو 37 ألف برج محمول فى كافة أنحاء الجمهورية. ومن المقرر خلال منتصف العام الحالي الانتهاء من تغطية كافة الطرق السريعة مكتملة الإنشاء بخدمات المحمول. وذلك بالإضافة الى إطلاق خدمات جديدة لتحسين الجودة ومن أبرزها الشرائح المدمجة eSIM، وخدمات مكالمات المحمول عبر شبكة الإنترنت الهوائى WiFi Calling.
كذلك يتم تنفيذ عدد من المشروعات لتطوير البنية التحتية الرقمية فىقرى مشروع حياة كريمة لخدمة 60 مليون مواطن وتستهدف المشروعات توصيل كابلات الألياف الضوئية إلى 9.3 مليون مبنى لتوفير الانترنت فائق السرعة، وكذلك نشر 3700 برج محمول لتحسين خدمات الاتصالات بالقرى. باستثمارات تقدر بنحو 8.8 مليار جنيه في مختلف مراحل المشروع، ومن المخطط الانتهاء من كافة مراحل المشروع فى منتصف العام الحالي.
– ما هي أبرز جهود وزارة الاتصالات وتكنولوجيا المعلومات في بناء القدرات الرقمية للشباب وتأهيلهم لسوق العمل المحلي والعالمي؟
تحظى مصر بثورة بشرية الأغلبية منها شباب، وتخرج مصر سنويًا أكثر من 50,000 متخصص في تكنولوجيا المعلومات؛ وتعد الكفاءات الرقمية أبرز العناصر الجاذبة لاستثمارات الشركات العالمية لمصر. لذا تحرص وزارة الاتصالات وتكنولوجيا المعلومات على توفير مبادرات لكل فئات المجتمع في مختلف المراحل العمرية ومن خريجي مختلف التخصصات سواء تكنولوجية أو غير تكنولوجية وفي جميع أنحاء الجمهورية.
وفى خلال 7 أعوام تضاعفت موازنة التدريب بالوزارة 40 مرة، وتضاعف عدد المتدربين 125 مرة ليصل إلى 500 ألف متدرب بموازنة 2 مليار جنيه خلال العام المالى الحالي.
ونحرص على أن تشمل البرامج التدريبية كافة المراحل العمرية بدءا من سن 8 سنوات من خلال مبادرات أجيال مصر الرقمية التي توفر برامج تدريبية متخصصة لطلاب المدارس والجامعات والخريجين بهدف تنمية مهاراتهم فى التخصصات الحديثة فى مجال الاتصالات وتكنولوجيا المعلومات ومنها الذكاء الاصطناعى، وعلوم البيانات، والأمن السيبرانى، والنظم المدمجة، والفنون الرقمية، وإدارة موارد المؤسسات وغيرها بما يتواكب مع متطلبات سوق العمل المحلى والعالمى، كما يتم توفير برامج تعليمية متخصصة بأعلى معايير الكفاءة والجودة في مجال الاتصالات وتكنولوجيا المعلومات من خلال مدارسwe للتكنولوجيا التطبيقية. حيث تم إطلاق 19 مدرسة في إطار خطة تستهدف إنشاء مدرسة بكل محافظة.
كما يتم توفير برامج تعليمية متقدمة فى أحدث مجالات الاتصالات وتكنولوجيا المعلومات مثل: الذكاء الاصطناعى وعلوم وهندسة البيانات، وهندسة الإلكترونيات والاتصالات، وتحليل الأعمال والتسويق الرقمي، والفنون الرقمية من خلال جامعة مصر للمعلوماتية، التى تعد أول جامعة متخصصة فى الاتصالات وتكنولوجيا المعلومات فى أفريقيا.
ومؤخرا أطلقنا مبادرة الرواد الرقميون التي توفر مجموعة من البرامج الأكاديمية المكثفة التى تتيح الحصول على دبلومات وماجستير مهنىأو علمى في التخصصات التكنولوجية بالشراكة مع كبرى الشركات التكنولوجية المحلية والعالمية وكذلك الشركات المتخصصة فى تنمية المهارات الشخصية واللغوية والجامعات المرموقة
– ما أشكال الدعم التي تقدمها الوزارة لرواد الأعمال في مجال التكنولوجيا والشركات الناشئة؟
صناعة الاتصالات وتكنولوجيا المعلومات هي صناعة قوامها الابداع؛ لذا نحرص على تحفيز الشباب على العمل الابتكاري وتعزيز نمو قطاع الشركات التكنولوجية الناشئة، وتذليل العقبات التى تواجه رواد الأعمال في مختلف المحافظات.
ويمكن للشركات الناشئة والمبتكرين الالتحاق بالبرامج المقدمة في مراكز إبداع مصر الرقمية في مختلف المحافظات والتي يتم من خلالها تقديم سلسلة القيمة للشركات الناشئة والتي تبدأ بالعصف الفكرى وبناء أفكار تصلح لإقامة شركات ثم تدريب الشباب أصحاب هذه الأفكار تدريب تقني واقتصادى وتسويقى ثم بناء خطة لتأسيس الشركة تمهيدا لبدء النشاط، ثم إنشاء الشركات واحتضانها، ثم عقد محافل تشبيك لجذب الاستثمارات.
ولقد تم حتى الآن إنشاء 23 مركزا في مختلف المحافظات في إطار خطة تستهدف إنشاء مركز إبداع مصر الرقمية بكل محافظة. كما تم الاتفاق مع شركتين عالميتين مرموقتين فى مجال تمكين الشركات الناشئة وتسريع نموها للاستفادة من الخبرات العالمية في تنمية الاستثمارات فى الشركات الناشئة.
ونعمل حاليا على التوسع في انشاء الحاضنات التي تركز على تخصصات تكنولوجية محددة؛ حيث تم إنشاء معمل الابتكار الحكومى في مركز إبداع مصر الرقمية الجيزة الذي يهدف إلى تمكين الشركات الناشئة المبتكرة المهتمة بمجال التكنولوجيا الحكومية، وتعزيز الابتكار فى مجال التكنولوجيا الحكومية مما يساهم فىتحسين جودة الخدمات الحكومية المقدمة للمواطنين، وتعزيز مكانة مصر في المؤشرات العالمية للتحول الرقمي.
ونعمل حاليا على توفير بنية تحتية حوسبية للشركات الناشئة التي تعمل في مجال الذكاء الاصطناعي من خلال مركز الابتكار التطبيقي، كما نوفر منظومة متكاملة لدعم الشركات العاملة في مجال تصميم الالكترونيات من خلال مركز امحوتب للابداع والتطوير في مدينة المعرفة بالعاصمة الإدارية الجديدة. وذلك بالإضافة الى دعم الشركات الناشئة العاملة في مجال التكنولوجيات المساعدة من خلال الأكاديمية الوطنية لتكنولوجيا المعلومات للأشخاص ذوي الإعاقة.
– يشهد سوق العمل تحولًا متزايدًا نحو العمل الحر. ما هي أبرز المبادرات وأنواع الدعم التي تقدمها الوزارة للمهنيين المستقلين لتمكينهم وتنمية مساهمتهم في الاقتصاد الرقمي؟
تولي وزارة الاتصالات وتكنولوجيا المعلومات أهمية كبيرة لدعم المهنيين المستقلين، بما يمثله من أهمية في توفير فرص عمل جديدة وغير تقليدية، والمساهمة في دعم نمو الاقتصاد الرقمي. لذلك، حرصنا على أن تشتمل جميع المبادرات التدريبية التي تقدمها الوزارة على توفير تدريب متخصص في مهارات العمل الحر، إلى جانب التدريب التقني، بما يتيح للمتدربين خيارات متعددة للالتحاق بسوق العمل، سواء من خلال وظيفة تقليدية أو من خلال العمل كمحترف مستقل على المنصات الرقمية.
وترتكز استراتيجية الوزارة لدعم العمل الحر على أربعة محاور رئيسية وهي: إتاحة البرامج التدريبية، وتطوير خدمات الإنترنت، وتوفير مساحات عمل مجهزة، إلى جانب تقديم الحوافز والدعم الفني والمالي للمهنيين المستقلين.
ومن خلال الجهات التدريبية التابعة للوزارة كالمعهد القومي للاتصالات، ومعهد تكنولوجيا المعلومات، ومدارس WE للتكنولوجيا التطبيقية، والبرامج التدريبية المتاحة على منصة “مهارة تك”، وضمن مبادرة “رواد مصر الرقمية”، ومبادرة “ITIDA Gigs”، نعمل على إعداد وتأهيل كفاءات قادرة على المنافسة في سوق العمل الحر، وصقلها بالمهارات التقنية المطلوبة، ومهارات تقديم العروض والتسعير والتفاوض، إلى جانب تدريب المتدربين على كيفية إنشاء حسابات فعالة على منصات العمل الحر الدولية.
كما نضخ استثمارات مستمرة لتطوير شبكة الإنترنت، وتوفير بيئة عمل محفزة من خلال مراكز “إبداع مصر الرقمية” المنتشرة في مختلف المحافظات، والتي وصل عددها إلى 23 مركزاً، ومستهدف زيادتها إلى 27 مركزاً بنهاية العام الجاري.
ندعم أيضًا المهنيين المستقلين من خلال إقامة معسكرات تدريب تطبيقية وملتقيات تشبيك، وإطلاق مبادرة بالتعاون مع بنك ناصر لتوفير تمويل ميسر لشراء أجهزة الحاسب الآلي. كذلك تم بناء منصة رقمية للمهنيين المستقلين تتضمن مجموعة من المميزات لهم بما فىذلك توفير خدمات استشارية فى مجال الضرائب، وتمكينهم من كتابة عقود منمطة وفتح حساب بنكى.
في ختام لقاءنا مع معالي الوزير تتضح ملامح الرؤية المستقبلية التي تتبناها الدولة لبناء مجتمع رقمي متكامل، يدعم الابتكار، ويعزز الشمول الرقمي، ويرسخ مكانة مصر كمركز إقليمي في مجالات التكنولوجيا الحديثة.
وقد أبرز الحوار حجم الجهود المبذولة في تطوير البنية التحتية الرقمية، ودعم رواد الأعمال، وتأهيل الكوادر الوطنية، بما يتماشى مع مستهدفات “مصر الرقمية” واستراتيجية الذكاء الاصطناعي.
كما تبين لنا أيضا قوة مصر العقلية المبتكرة من قديم الازل حيث أوضح لنا معالي الوزير اثناء زيارته شعار الوزارة الرسمي، حيث تتمركز ايست أله التدوين للمعلومات وحفظها، فهى ركز لقوة مصر من قديم الزمان حتى الان على الابتكار والتطور التكنولوجي والعلمي
نتوجه بالشكر إلى معالي الوزير “عمرو طلعت ” على سعة صدره وإجاباته الوافية، ونتطلع إلى استمرار هذا الزخم لتحقيق المزيد من الإنجازات التي تصب في مصلحة المواطن المصري وتواكب تطورات العصر الرقمي.
ممثلين فريق عمل مجلة تحكم مع معالي وزير الاتصالات وتكنولوجيا المعلومات “عمرو طلعت”