diff --git a/packages/block-editor/tsconfig.json b/packages/block-editor/tsconfig.json index 6778b6cfdd4d6..ed81774f6071c 100644 --- a/packages/block-editor/tsconfig.json +++ b/packages/block-editor/tsconfig.json @@ -24,6 +24,7 @@ { "path": "../is-shallow-equal" }, { "path": "../keycodes" }, { "path": "../notices" }, + { "path": "../rich-text" }, { "path": "../style-engine" }, { "path": "../token-list" }, { "path": "../url" }, diff --git a/packages/block-library/tsconfig.json b/packages/block-library/tsconfig.json index 5113bb96e9e5e..ddd88be5189a4 100644 --- a/packages/block-library/tsconfig.json +++ b/packages/block-library/tsconfig.json @@ -29,6 +29,7 @@ { "path": "../notices" }, { "path": "../keycodes" }, { "path": "../primitives" }, + { "path": "../rich-text" }, { "path": "../url" }, { "path": "../wordcount" } ], diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 8c509dfc63e86..e4e7925c789ef 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Internal - `NavigableContainer`: Convert to TypeScript ([#49377](https://github.com/WordPress/gutenberg/pull/49377)). +- Move rich-text related types to the rich-text package ([#49651](https://github.com/WordPress/gutenberg/pull/49651)). ### Documentation diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx index 521f9980c1e53..e5bfe61d265bb 100644 --- a/packages/components/src/autocomplete/autocompleter-ui.tsx +++ b/packages/components/src/autocomplete/autocompleter-ui.tsx @@ -12,8 +12,6 @@ import { useEffect, useState, } from '@wordpress/element'; -// Error expected because `@wordpress/rich-text` is not yet fully typed. -// @ts-expect-error import { useAnchor } from '@wordpress/rich-text'; import { useMergeRefs, useRefEffect } from '@wordpress/compose'; diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx index 42a44a5df2c19..af9625d645915 100644 --- a/packages/components/src/autocomplete/index.tsx +++ b/packages/components/src/autocomplete/index.tsx @@ -26,8 +26,6 @@ import { insert, isCollapsed, getTextContent, - // Error expected because `@wordpress/rich-text` is not yet fully typed. - // @ts-expect-error } from '@wordpress/rich-text'; import { speak } from '@wordpress/a11y'; @@ -241,6 +239,7 @@ export function useAutocomplete( { if ( isCollapsed( record ) ) { return getTextContent( slice( record, 0 ) ); } + return ''; }, [ record ] ); useEffect( () => { diff --git a/packages/components/src/autocomplete/types.ts b/packages/components/src/autocomplete/types.ts index b8cda2c575531..cd0e5029580ba 100644 --- a/packages/components/src/autocomplete/types.ts +++ b/packages/components/src/autocomplete/types.ts @@ -2,6 +2,8 @@ * WordPress dependencies */ import type { WPElement } from '@wordpress/element'; +import type { RichTextValue } from '@wordpress/rich-text'; + /** * Internal dependencies */ @@ -157,24 +159,6 @@ export type CancelablePromise< T = void > = Promise< T > & { canceled?: boolean; }; -/** - * When `@wordpress/rich-text` is fully typed, the following - * types should be moved to and imported from there - * - * @see /packages/rich-text/src/create.js - */ -type RichTextFormat = { - type: string; -}; -type RichTextFormatList = Array< RichTextFormat >; -type RichTextValue = { - text: string; - formats?: Array< RichTextFormatList >; - replacements?: Array< RichTextFormat >; - start: number | undefined; - end: number | undefined; -}; - export type UseAutocompleteProps = { /** * The rich text value object the autocompleter is being applied to. @@ -187,7 +171,7 @@ export type UseAutocompleteProps = { * A function to be called when an option is selected to insert into the * existing text. */ - onChange: ( value: string ) => void; + onChange: ( value: RichTextValue ) => void; /** * A function to be called when an option is selected to replace the * existing text. diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index f7c78fd1859da..be473ffcc877d 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -34,6 +34,7 @@ { "path": "../primitives" }, { "path": "../private-apis" }, { "path": "../react-i18n" }, + { "path": "../rich-text" }, { "path": "../warning" } ], "include": [ "src/**/*" ], diff --git a/packages/element/src/react.js b/packages/element/src/react.js index 4f2b8e150303e..1eb49ac6742c2 100644 --- a/packages/element/src/react.js +++ b/packages/element/src/react.js @@ -52,6 +52,13 @@ import { * @typedef {import('react').SyntheticEvent} WPSyntheticEvent */ +/** + * Object containing a React synthetic event. + * + * @template T + * @typedef {import('react').RefObject} RefObject + */ + /** * Object that provides utilities for dealing with React children. */ diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md index 82e749bf8e810..b88d0ffea6b52 100644 --- a/packages/rich-text/README.md +++ b/packages/rich-text/README.md @@ -269,11 +269,13 @@ Check if the selection of a Rich Text value is collapsed or not. Collapsed means _Parameters_ -- _value_ `RichTextValue`: The rich text value to check. +- _props_ `RichTextValue`: The rich text value to check. +- _props.start_ `RichTextValue[ 'start' ]`: +- _props.end_ `RichTextValue[ 'end' ]`: _Returns_ -- `boolean|undefined`: True if the selection is collapsed, false if not, undefined if there is no selection. +- `boolean | undefined`: True if the selection is collapsed, false if not, undefined if there is no selection. ### isEmpty @@ -356,6 +358,10 @@ _Returns_ - `RichTextValue`: A new value with replacements applied. +### RichTextValue + +An object which represents a formatted string. See main `@wordpress/rich-text` documentation for more information. + ### slice 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`. @@ -433,7 +439,7 @@ _Parameters_ _Returns_ -- `RichTextFormatType|undefined`: The previous format value, if it has been successfully unregistered; otherwise `undefined`. +- `WPFormat|undefined`: The previous format value, if it has been successfully unregistered; otherwise `undefined`. ### useAnchor @@ -443,7 +449,7 @@ _Parameters_ - _$1_ `Object`: Named parameters. - _$1.editableContentElement_ `HTMLElement|null`: The element containing the editable content. -- _$1.settings_ `RichTextFormatType`: The format type's settings. +- _$1.settings_ `WPFormat=`: The format type's settings. _Returns_ @@ -458,7 +464,7 @@ _Parameters_ - _$1_ `Object`: Named parameters. - _$1.ref_ `RefObject`: React ref of the element containing the editable content. - _$1.value_ `RichTextValue`: Value to check for selection. -- _$1.settings_ `RichTextFormatType`: The format type's settings. +- _$1.settings_ `WPFormat`: The format type's settings. _Returns_ diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json index bb45ed339082a..f5bf3cd170dd4 100644 --- a/packages/rich-text/package.json +++ b/packages/rich-text/package.json @@ -28,6 +28,7 @@ "src/**/*.scss", "{src,build,build-module}/{index.js,store/index.js}" ], + "types": "build-types", "dependencies": { "@babel/runtime": "^7.16.0", "@wordpress/a11y": "file:../a11y", diff --git a/packages/rich-text/src/apply-format.js b/packages/rich-text/src/apply-format.js index a0a5c5f451430..c10f09bec852e 100644 --- a/packages/rich-text/src/apply-format.js +++ b/packages/rich-text/src/apply-format.js @@ -4,8 +4,8 @@ import { normaliseFormats } from './normalise-formats'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ -/** @typedef {import('./create').RichTextFormat} RichTextFormat */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextFormat} RichTextFormat */ function replace( array, index, value ) { array = array.slice(); diff --git a/packages/rich-text/src/component/use-anchor-ref.js b/packages/rich-text/src/component/use-anchor-ref.js index b8452b874f440..d1de79d04928c 100644 --- a/packages/rich-text/src/component/use-anchor-ref.js +++ b/packages/rich-text/src/component/use-anchor-ref.js @@ -9,9 +9,12 @@ import deprecated from '@wordpress/deprecated'; */ import { getActiveFormat } from '../get-active-format'; -/** @typedef {import('@wordpress/element').RefObject} RefObject */ -/** @typedef {import('../register-format-type').RichTextFormatType} RichTextFormatType */ -/** @typedef {import('../create').RichTextValue} RichTextValue */ +/** + * @template T + * @typedef {import('@wordpress/element').RefObject} RefObject + */ +/** @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 @@ -23,7 +26,7 @@ import { getActiveFormat } from '../get-active-format'; * @param {RefObject} $1.ref React ref of the element * containing the editable content. * @param {RichTextValue} $1.value Value to check for selection. - * @param {RichTextFormatType} $1.settings The format type's settings. + * @param {WPFormat} $1.settings The format type's settings. * * @return {Element|Range} The active element or selection range. */ diff --git a/packages/rich-text/src/component/use-anchor.js b/packages/rich-text/src/component/use-anchor.js index 8985a540e5464..aa803df7c7666 100644 --- a/packages/rich-text/src/component/use-anchor.js +++ b/packages/rich-text/src/component/use-anchor.js @@ -3,8 +3,8 @@ */ import { useState, useLayoutEffect } from '@wordpress/element'; -/** @typedef {import('../register-format-type').RichTextFormatType} RichTextFormatType */ -/** @typedef {import('../create').RichTextValue} RichTextValue */ +/** @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 @@ -50,8 +50,8 @@ function getFormatElement( range, editableContentElement, tagName, className ) { /** * @typedef {Object} VirtualAnchorElement - * @property {Function} getBoundingClientRect A function returning a DOMRect - * @property {Document} ownerDocument The element's ownerDocument + * @property {() => DOMRect} getBoundingClientRect A function returning a DOMRect + * @property {Document} ownerDocument The element's ownerDocument */ /** @@ -117,10 +117,10 @@ function getAnchor( editableContentElement, tagName, className ) { * 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 {RichTextFormatType} $1.settings The format type's settings. + * @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. */ export function useAnchor( { editableContentElement, settings = {} } ) { diff --git a/packages/rich-text/src/concat.js b/packages/rich-text/src/concat.js index e758b6085d657..499015166dfa6 100644 --- a/packages/rich-text/src/concat.js +++ b/packages/rich-text/src/concat.js @@ -5,7 +5,7 @@ import { normaliseFormats } from './normalise-formats'; import { create } from './create'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Concats a pair of rich text values. Not that this mutates `a` and does NOT diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js index 7fdcf8adba762..863e6b984cc79 100644 --- a/packages/rich-text/src/create.js +++ b/packages/rich-text/src/create.js @@ -15,25 +15,7 @@ import { ZWNBSP, } from './special-characters'; -/** - * @typedef {Object} RichTextFormat - * - * @property {string} type Format type. - */ - -/** - * @typedef {Array} RichTextFormatList - */ - -/** - * @typedef {Object} RichTextValue - * - * @property {string} text Text. - * @property {Array} formats Formats. - * @property {Array} replacements Replacements. - * @property {number|undefined} start Selection start. - * @property {number|undefined} end Selection end. - */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ function createEmptyValue() { return { diff --git a/packages/rich-text/src/get-active-format.js b/packages/rich-text/src/get-active-format.js index a259b094272f3..80c6f08ec88d9 100644 --- a/packages/rich-text/src/get-active-format.js +++ b/packages/rich-text/src/get-active-format.js @@ -3,8 +3,8 @@ */ import { getActiveFormats } from './get-active-formats'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ -/** @typedef {import('./create').RichTextFormat} RichTextFormat */ +/** @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 diff --git a/packages/rich-text/src/get-active-formats.js b/packages/rich-text/src/get-active-formats.js index 09bbef0cf2d6c..e3bc7d8415de5 100644 --- a/packages/rich-text/src/get-active-formats.js +++ b/packages/rich-text/src/get-active-formats.js @@ -1,5 +1,5 @@ -/** @typedef {import('./create').RichTextValue} RichTextValue */ -/** @typedef {import('./create').RichTextFormatList} RichTextFormatList */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextFormatList} RichTextFormatList */ /** * Internal dependencies diff --git a/packages/rich-text/src/get-active-object.js b/packages/rich-text/src/get-active-object.js index 1c1ff4de552c9..a1e5623b65b73 100644 --- a/packages/rich-text/src/get-active-object.js +++ b/packages/rich-text/src/get-active-object.js @@ -4,8 +4,8 @@ import { OBJECT_REPLACEMENT_CHARACTER } from './special-characters'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ -/** @typedef {import('./create').RichTextFormat} RichTextFormat */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextFormat} RichTextFormat */ /** * Gets the active object, if there is any. diff --git a/packages/rich-text/src/get-text-content.js b/packages/rich-text/src/get-text-content.js index 17fb064eb36d8..f400e4b56497f 100644 --- a/packages/rich-text/src/get-text-content.js +++ b/packages/rich-text/src/get-text-content.js @@ -6,7 +6,7 @@ import { LINE_SEPARATOR, } from './special-characters'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ const pattern = new RegExp( `[${ OBJECT_REPLACEMENT_CHARACTER }${ LINE_SEPARATOR }]`, diff --git a/packages/rich-text/src/index.js b/packages/rich-text/src/index.js index 33e6e054a68a6..fc24a2237136c 100644 --- a/packages/rich-text/src/index.js +++ b/packages/rich-text/src/index.js @@ -33,3 +33,9 @@ export { useRichText as __unstableUseRichText, } from './component'; export { default as __unstableFormatEdit } from './component/format-edit'; + +/** + * An object which represents a formatted string. See main `@wordpress/rich-text` + * documentation for more information. + */ +export { RichTextValue } from './types'; diff --git a/packages/rich-text/src/insert-line-separator.js b/packages/rich-text/src/insert-line-separator.js index cf87f1a184d2c..d7a5aa0f97593 100644 --- a/packages/rich-text/src/insert-line-separator.js +++ b/packages/rich-text/src/insert-line-separator.js @@ -5,7 +5,7 @@ import { insert } from './insert'; import { LINE_SEPARATOR } from './special-characters'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Insert a line break character into a Rich Text value at the given diff --git a/packages/rich-text/src/insert-object.js b/packages/rich-text/src/insert-object.js index ef5ad3da00df5..ac8afb25b2010 100644 --- a/packages/rich-text/src/insert-object.js +++ b/packages/rich-text/src/insert-object.js @@ -5,8 +5,8 @@ import { insert } from './insert'; import { OBJECT_REPLACEMENT_CHARACTER } from './special-characters'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ -/** @typedef {import('./create').RichTextFormat} RichTextFormat */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextFormat} RichTextFormat */ /** * Insert a format as an object into a Rich Text value at the given diff --git a/packages/rich-text/src/insert.js b/packages/rich-text/src/insert.js index 888e32bdc0dac..e908c676505d3 100644 --- a/packages/rich-text/src/insert.js +++ b/packages/rich-text/src/insert.js @@ -5,7 +5,7 @@ import { create } from './create'; import { normaliseFormats } from './normalise-formats'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Insert a Rich Text value, an HTML string, or a plain text string, into a diff --git a/packages/rich-text/src/is-collapsed.js b/packages/rich-text/src/is-collapsed.ts similarity index 51% rename from packages/rich-text/src/is-collapsed.js rename to packages/rich-text/src/is-collapsed.ts index 763ffae3bd0db..fcde801479920 100644 --- a/packages/rich-text/src/is-collapsed.js +++ b/packages/rich-text/src/is-collapsed.ts @@ -1,4 +1,7 @@ -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** + * Internal dependencies + */ +import type { RichTextValue } from './types'; /** * Check if the selection of a Rich Text value is collapsed or not. Collapsed @@ -6,12 +9,15 @@ * is no selection, `undefined` will be returned. This is similar to * `window.getSelection().isCollapsed()`. * - * @param {RichTextValue} value The rich text value to check. - * - * @return {boolean|undefined} True if the selection is collapsed, false if not, - * undefined if there is no selection. + * @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. */ -export function isCollapsed( { start, end } ) { +export function isCollapsed( { + start, + end, +}: RichTextValue ): boolean | undefined { if ( start === undefined || end === undefined ) { return; } diff --git a/packages/rich-text/src/is-empty.js b/packages/rich-text/src/is-empty.js index 1bc0a3525fce9..7baf296bd2a3d 100644 --- a/packages/rich-text/src/is-empty.js +++ b/packages/rich-text/src/is-empty.js @@ -3,7 +3,7 @@ */ import { LINE_SEPARATOR } from './special-characters'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Check if a Rich Text value is Empty, meaning it contains no text or any diff --git a/packages/rich-text/src/is-format-equal.js b/packages/rich-text/src/is-format-equal.js index 1504923f2ba9e..dc6d9653770b7 100644 --- a/packages/rich-text/src/is-format-equal.js +++ b/packages/rich-text/src/is-format-equal.js @@ -1,4 +1,4 @@ -/** @typedef {import('./create').RichTextFormat} RichTextFormat */ +/** @typedef {import('./types').RichTextFormat} RichTextFormat */ /** * Optimised equality check for format objects. diff --git a/packages/rich-text/src/join.js b/packages/rich-text/src/join.js index 3c113623d5c70..805d2528f0c68 100644 --- a/packages/rich-text/src/join.js +++ b/packages/rich-text/src/join.js @@ -5,7 +5,7 @@ import { create } from './create'; import { normaliseFormats } from './normalise-formats'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Combine an array of Rich Text values into one, optionally separated by diff --git a/packages/rich-text/src/normalise-formats.js b/packages/rich-text/src/normalise-formats.js index 395aa336c4acc..e73314151849e 100644 --- a/packages/rich-text/src/normalise-formats.js +++ b/packages/rich-text/src/normalise-formats.js @@ -4,7 +4,7 @@ import { isFormatEqual } from './is-format-equal'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Normalises formats: ensures subsequent adjacent equal formats have the same diff --git a/packages/rich-text/src/remove-format.js b/packages/rich-text/src/remove-format.js index 794a15de7e17e..831b72e279faa 100644 --- a/packages/rich-text/src/remove-format.js +++ b/packages/rich-text/src/remove-format.js @@ -4,7 +4,7 @@ import { normaliseFormats } from './normalise-formats'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Remove any format object from a Rich Text value by type from the given diff --git a/packages/rich-text/src/remove-line-separator.js b/packages/rich-text/src/remove-line-separator.js index 071bf9c524c46..fa45616a45a72 100644 --- a/packages/rich-text/src/remove-line-separator.js +++ b/packages/rich-text/src/remove-line-separator.js @@ -6,7 +6,7 @@ import { LINE_SEPARATOR } from './special-characters'; import { isCollapsed } from './is-collapsed'; import { remove } from './remove'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Removes a line separator character, if existing, from a Rich Text value at diff --git a/packages/rich-text/src/remove.js b/packages/rich-text/src/remove.js index 71f981f8b55b1..c8db71949b35c 100644 --- a/packages/rich-text/src/remove.js +++ b/packages/rich-text/src/remove.js @@ -5,7 +5,7 @@ import { insert } from './insert'; import { create } from './create'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Remove content from a Rich Text value between the given `startIndex` and diff --git a/packages/rich-text/src/replace.js b/packages/rich-text/src/replace.js index 98579a7bae739..f95b37e925b46 100644 --- a/packages/rich-text/src/replace.js +++ b/packages/rich-text/src/replace.js @@ -4,7 +4,7 @@ import { normaliseFormats } from './normalise-formats'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Search a Rich Text value and replace the match(es) with `replacement`. This diff --git a/packages/rich-text/src/slice.js b/packages/rich-text/src/slice.js index bba068835f5af..94b48cbb47c49 100644 --- a/packages/rich-text/src/slice.js +++ b/packages/rich-text/src/slice.js @@ -1,4 +1,4 @@ -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Slice a Rich Text value from `startIndex` to `endIndex`. Indices are diff --git a/packages/rich-text/src/split.js b/packages/rich-text/src/split.js index 08071d17349d7..cf329d7ef0985 100644 --- a/packages/rich-text/src/split.js +++ b/packages/rich-text/src/split.js @@ -4,7 +4,7 @@ import { replace } from './replace'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Split a Rich Text value in two at the given `startIndex` and `endIndex`, or diff --git a/packages/rich-text/src/to-dom.js b/packages/rich-text/src/to-dom.js index 4e8a51ae5cb0e..828e3a4e3f6cb 100644 --- a/packages/rich-text/src/to-dom.js +++ b/packages/rich-text/src/to-dom.js @@ -6,7 +6,7 @@ import { toTree } from './to-tree'; import { createElement } from './create-element'; import { isRangeEqual } from './is-range-equal'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Creates a path as an array of indices from the given root node to the given diff --git a/packages/rich-text/src/to-html-string.js b/packages/rich-text/src/to-html-string.js index 05a77211db983..0b2689248afb7 100644 --- a/packages/rich-text/src/to-html-string.js +++ b/packages/rich-text/src/to-html-string.js @@ -14,7 +14,7 @@ import { import { toTree } from './to-tree'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Create an HTML string from a Rich Text value. If a `multilineTag` is diff --git a/packages/rich-text/src/toggle-format.js b/packages/rich-text/src/toggle-format.js index 747175c3d9d21..11e61a9d3976f 100644 --- a/packages/rich-text/src/toggle-format.js +++ b/packages/rich-text/src/toggle-format.js @@ -13,8 +13,8 @@ import { getActiveFormat } from './get-active-format'; import { removeFormat } from './remove-format'; import { applyFormat } from './apply-format'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ -/** @typedef {import('./create').RichTextFormat} RichTextFormat */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextFormat} RichTextFormat */ /** * Toggles a format object to a Rich Text value at the current selection. diff --git a/packages/rich-text/src/types.ts b/packages/rich-text/src/types.ts new file mode 100644 index 0000000000000..1e4725260c27e --- /dev/null +++ b/packages/rich-text/src/types.ts @@ -0,0 +1,31 @@ +/** + * Stores the type of a rich rext format, such as core/bold. + */ +export type RichTextFormat = { + type: + | 'core/bold' + | 'core/italic' + | 'core/link ' + | 'core/strikethrough' + | 'core/image' + | string; +}; + +/** + * A list of rich text format types. + */ +export type RichTextFormatList = Array< RichTextFormat >; + +/** + * An object which represents a formatted string. The text property contains the + * text to be formatted, and the formats property contains an array which indicates + * the formats that are applied to each character in the text. See the main + * `@wordpress/rich-text` documentation for more detail. + */ +export type RichTextValue = { + text: string; + formats: Array< RichTextFormatList >; + replacements: Array< RichTextFormat >; + start: number | undefined; + end: number | undefined; +}; diff --git a/packages/rich-text/src/unregister-format-type.js b/packages/rich-text/src/unregister-format-type.js index 519e33362d5b6..a1616568f148e 100644 --- a/packages/rich-text/src/unregister-format-type.js +++ b/packages/rich-text/src/unregister-format-type.js @@ -8,14 +8,14 @@ import { select, dispatch } from '@wordpress/data'; */ import { store as richTextStore } from './store'; -/** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */ +/** @typedef {import('./register-format-type').WPFormat} WPFormat */ /** * Unregisters a format. * * @param {string} name Format name. * - * @return {RichTextFormatType|undefined} The previous format value, if it has + * @return {WPFormat|undefined} The previous format value, if it has * been successfully unregistered; * otherwise `undefined`. */ diff --git a/packages/rich-text/src/update-formats.js b/packages/rich-text/src/update-formats.js index 0b4fcf98d840b..668e1a73db8df 100644 --- a/packages/rich-text/src/update-formats.js +++ b/packages/rich-text/src/update-formats.js @@ -4,7 +4,7 @@ import { isFormatEqual } from './is-format-equal'; -/** @typedef {import('./create').RichTextValue} RichTextValue */ +/** @typedef {import('./types').RichTextValue} RichTextValue */ /** * Efficiently updates all the formats from `start` (including) until `end` diff --git a/packages/rich-text/tsconfig.json b/packages/rich-text/tsconfig.json new file mode 100644 index 0000000000000..53e2ee579d2cf --- /dev/null +++ b/packages/rich-text/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "declarationDir": "build-types", + "types": [ "gutenberg-env" ], + "checkJs": false + }, + "references": [ + { "path": "../a11y" }, + { "path": "../compose" }, + { "path": "../data" }, + { "path": "../deprecated" }, + { "path": "../element" }, + { "path": "../escape-html" }, + { "path": "../i18n" }, + { "path": "../keycodes" } + ], + "include": [ "src/**/*" ] +} diff --git a/tsconfig.json b/tsconfig.json index d933bc14c84e4..7f4d4054bea88 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -40,6 +40,7 @@ { "path": "packages/react-i18n" }, { "path": "packages/redux-routine" }, { "path": "packages/report-flaky-tests" }, + { "path": "packages/rich-text" }, { "path": "packages/style-engine" }, { "path": "packages/token-list" }, { "path": "packages/url" },