PHPXRef 0.7.1 : WordPress Trunk (Updated Daily) : Detail view of rich-text.js

Class: RichTextData - X-Ref

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: [ ... ] } )`.

create({element,text,html,range,__unstableIsEditableTree: isEditableTree} = {}) X-Ref

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.

accumulateSelection(accumulator, node, range, value) X-Ref

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.

filterRange(node, range, filter) X-Ref

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.

collapseWhiteSpace(element, isRoot = true) X-Ref

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.

param: {HTMLElement} element
param: {boolean} isRoot
return: {HTMLElement} New element with collapsed whitespace.

removeReservedCharacters(string) X-Ref

Removes reserved characters used by rich-text (zero width non breaking spaces
added by `toTree` and object replacement characters).

param: {string} string

createFromElement({element,range,isEditableTree}) X-Ref

Creates a Rich Text value from a DOM element and range.

param: {Object}  $1                  Named argements.
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.

mergeFormats(formats) X-Ref

No description

getAttributes({element}) X-Ref

Gets the attributes of an element in object shape.

param: {Object} $1 Named argements.
param: {Element} $1.element Element to get attributes from.
return: {Object|void} Attribute object or `undefined` if the element has no

mergePair(a, b) X-Ref

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.

concat(...values) X-Ref

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.

getActiveFormat(value, formatType) X-Ref

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

getActiveObject({start,end,replacements,text}) X-Ref

Gets the active object, if there is any.

param: {RichTextValue} value Value to inspect.
return: {RichTextFormat|void} Active object, or undefined.

isCollapsed({start,end}) X-Ref

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.

isEmpty({text}) X-Ref

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.

join(values, separator = '') X-Ref

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.

registerFormatType(name, settings) X-Ref

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

removeFormat(value, formatType, startIndex = value.start, endIndex = value.end) X-Ref

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.

filterFormats(formats, index, formatType) X-Ref

No description

insert(value, valueToInsert, startIndex = value.start, endIndex = value.end) X-Ref

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.

remove_remove(value, startIndex, endIndex) X-Ref

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.

replace_replace({formats,replacements,text,start,end}, pattern, replacement) X-Ref

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
param: {Function|string} replacement The match or matches are replaced with
return: {RichTextValue} A new value with replacements applied.

insertObject(value, formatToInsert, startIndex, endIndex) X-Ref

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.

slice(value, startIndex = value.start, endIndex = value.end) X-Ref

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.

split({formats,replacements,text,start,end}, string) X-Ref

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.

splitAtSelection({formats,replacements,text,start,end}, startIndex = start, endIndex = end) X-Ref

No description

isRangeEqual(a, b) X-Ref

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.

createPathToNode(node, rootNode, path) X-Ref

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.

getNodeByPath(node, path) X-Ref

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).

to_dom_append(element, child) X-Ref

No description

to_dom_appendText(node, text) X-Ref

No description

to_dom_getLastChild({lastChild}) X-Ref

No description

to_dom_getParent({parentNode}) X-Ref

No description

to_dom_isText(node) X-Ref

No description

to_dom_getText({nodeValue}) X-Ref

No description

to_dom_remove(node) X-Ref

No description

toDom({value,prepareEditableTree,isEditableTree = true,placeholder,doc = document}) X-Ref

No description

apply({value,current,prepareEditableTree,__unstableDomOnly,placeholder}) X-Ref

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.

applyValue(future, current) X-Ref

No description

applySelection({startPath,endPath}, current) X-Ref

No description

toggleFormat(value, format) X-Ref

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.

unregisterFormatType(name) X-Ref

Unregisters a format.

param: {string} name Format name.
return: {WPFormat|undefined} The previous format value, if it has

useAnchorRef({ref,value,settings = {}}) X-Ref

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
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.

getFormatElement(range, editableContentElement, tagName, className) X-Ref

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.

createVirtualAnchorElement(range, editableContentElement) X-Ref

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.

getAnchor(editableContentElement, tagName, className) X-Ref

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
param: {string} className The class name of the format
return: {HTMLElement|VirtualAnchorElement|undefined} The anchor.

useAnchor({editableContentElement,settings = {}}) X-Ref

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
param: {WPFormat=} $1.settings The format type's settings.
return: {Element|VirtualAnchorElement|undefined|null} The active element or selection range.

callback() X-Ref

No description

attach() X-Ref

No description

detach() X-Ref

No description

useDefaultStyle() X-Ref

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.

useBoundaryStyle({record}) X-Ref

No description

onCopy(event) X-Ref

No description

onClick(event) X-Ref

No description

onFocusIn(event) X-Ref

No description

onKeyDown(event) X-Ref

No description

onKeyDown(event) X-Ref

Internal dependencies

updateFormats({value,start,end,formats}) X-Ref

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.

fixPlaceholderSelection(defaultView) X-Ref

If the selection is set on the placeholder element, collapse the selection to
the start (before the placeholder).

param: {Window} defaultView

onInput(event) X-Ref

No description

handleSelectionChange() X-Ref

Syncs the selection to local state. A callback for the `selectionchange`
event.

onCompositionStart() X-Ref

No description

onCompositionEnd() X-Ref

No description

onFocus() X-Ref

No description

getRange() X-Ref

No description

onDown(event) X-Ref

No description

onCancel() X-Ref

No description

onUp() X-Ref

No description

useEventListeners(props) X-Ref

No description

useRichText({value = '',selectionStart,selectionEnd,placeholder,onSelectionChange,preserveWhiteSpace,onChange,__unstableDisableFormats: disableFormats,__unstableIsSelected: isSelected,__unstableDependencies = [],__unstableAfterParse,__unstableBeforeSerialize,__unstableAddInvisibleFormats}) X-Ref

No description

createRecord() X-Ref

No description

applyRecord(newRecord, {domOnly} = {}) X-Ref

No description

setRecordFromProps() X-Ref

No description

handleChange(newRecord) X-Ref

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.

applyFromProps() X-Ref

No description

__experimentalRichText() X-Ref

No description

Functions

Functions that are not part of a class:

formatTypes(state = {}, action) X-Ref

Reducer managing the format types

param: {Object} state Current state.
param: {Object} action Dispatched action.
return: {Object} Updated state.

getFormatType(state, name) X-Ref

Returns a format type by name.

param: {Object} state Data state.
param: {string} name Format type name.
return: {Object?} Format type.

getFormatTypeForBareElement(state, bareElementTagName) X-Ref

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
return: {?Object} Format type.

getFormatTypeForClassName(state, elementClassName) X-Ref

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
return: {?Object} Format type.

addFormatTypes(formatTypes) X-Ref

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

param: {Array|Object} formatTypes Format types received.
return: {Object} Action object.

removeFormatTypes(names) X-Ref

Returns an action object used to remove a registered format type.

Ignored from documentation as unregisterFormatType should be used instead from @wordpress/rich-text

param: {string|Array} names Format name.
return: {Object} Action object.

isFormatEqual(format1, format2) X-Ref

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.

normaliseFormats(value) X-Ref

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.

replace(array, index, value) X-Ref

No description

applyFormat(value, format, startIndex = value.start, endIndex = value.end) X-Ref

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.

createElement({implementation}, html) X-Ref

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.

getActiveFormats(value, EMPTY_ACTIVE_FORMATS = []) X-Ref

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
return: {RichTextFormatList} Active format objects.

get_format_type_getFormatType(name) X-Ref

Returns a registered format type.

param: {string} name Format name.
return: {RichTextFormatType|undefined} Format type.

restoreOnAttributes(attributes, isEditableTree) X-Ref

No description

fromFormat({type,tagName,attributes,unregisteredAttributes,object,boundaryClass,isEditableTree}) X-Ref

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
param: {boolean} $1.object                 Whether or not it is an object
param: {boolean} $1.boundaryClass          Whether or not to apply a boundary
param: {boolean} $1.isEditableTree
return: {Object} Information to be used for element creation.

isEqualUntil(a, b, index) X-Ref

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.

toTree({value,preserveWhiteSpace,createEmpty,append,getLastChild,getParent,isText,getText,remove,appendText,onStartIndex,onEndIndex,isEditableTree,placeholder}) X-Ref

No description

toHTMLString({value,preserveWhiteSpace}) X-Ref

Create an HTML string from a Rich Text value.

param: {Object}        $1                      Named argements.
param: {RichTextValue} $1.value                Rich text value.
param: {boolean}       [$1.preserveWhiteSpace] Preserves newlines if true.
return: {string} HTML string.

createEmpty() X-Ref

No description

getLastChild({children}) X-Ref

No description

append(parent, object) X-Ref

No description

appendText(object, text) X-Ref

No description

getParent({parent}) X-Ref

No description

isText({text}) X-Ref

No description

getText({text}) X-Ref

No description

remove(object) X-Ref

No description

createElementHTML({type,attributes,object,children}) X-Ref

No description

createChildrenHTML(children = []) X-Ref

No description

getTextContent({text}) X-Ref

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.

createEmptyValue() X-Ref

No description

toFormat({tagName,attributes}) X-Ref

No description

File Size:	3896 lines (117 kb)
Included or required:	0 times
Referenced:	0 times
Includes or requires:	0 files

PHP Cross Reference of WordPress Trunk (Updated Daily)

/wp-includes/js/dist/ -> rich-text.js (summary)

Defines 1 class

Defines 75 functions