@wordpress/format-library 3.0.1 → 3.0.5

package/build-module/link/inline.js

@@ -3,17 +3,18 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useState, useRef, createInterpolateElement } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { withSpokenMessages, Popover } from '@wordpress/components';
 import { prependHTTP } from '@wordpress/url';
-import { create, insert, isCollapsed, applyFormat, useAnchorRef, removeFormat } from '@wordpress/rich-text';
-import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
+import { create, insert, isCollapsed, applyFormat, useAnchorRef, removeFormat, slice, replace } from '@wordpress/rich-text';
+import { __experimentalLinkControl as LinkControl, store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
-import { createLinkFormat, isValidHref } from './utils';
+import { createLinkFormat, isValidHref, getFormatBoundary } from './utils';
 import { link as settings } from './index';
 
 function InlineLinkUI({
@@ -26,6 +27,9 @@ function InlineLinkUI({
   stopAddingLink,
   contentRef
 }) {
+  const richLinkTextValue = getRichTextValueFromSelection(value, isActive); // Get the text content minus any HTML tags.
+
+  const richTextText = richLinkTextValue.text;
   /**
    * Pending settings to be applied to the next link. When inserting a new
    * link, toggle values cannot be applied immediately, because there is not
@@ -34,12 +38,29 @@ function InlineLinkUI({
    *
    * @type {[Object|undefined,Function]}
    */
+
   const [nextLinkValue, setNextLinkValue] = useState();
+  const {
+    createPageEntity,
+    userCanCreatePages
+  } = useSelect(select => {
+    const {
+      getSettings
+    } = select(blockEditorStore);
+
+    const _settings = getSettings();
+
+    return {
+      createPageEntity: _settings.__experimentalCreatePageEntity,
+      userCanCreatePages: _settings.__experimentalUserCanCreatePages
+    };
+  }, []);
   const linkValue = {
     url: activeAttributes.url,
     type: activeAttributes.type,
     id: activeAttributes.id,
     opensInNewTab: activeAttributes.target === '_blank',
+    title: richTextText,
     ...nextLinkValue
   };
 
@@ -72,21 +93,45 @@ function InlineLinkUI({
     }
 
     const newUrl = prependHTTP(nextValue.url);
-    const format = createLinkFormat({
+    const linkFormat = createLinkFormat({
       url: newUrl,
       type: nextValue.type,
       id: nextValue.id !== undefined && nextValue.id !== null ? String(nextValue.id) : undefined,
       opensInNewWindow: nextValue.opensInNewTab
     });
+    const newText = nextValue.title || newUrl;
 
     if (isCollapsed(value) && !isActive) {
-      const newText = nextValue.title || newUrl;
+      // Scenario: we don't have any actively selected text or formats.
       const toInsert = applyFormat(create({
         text: newText
-      }), format, 0, newText.length);
+      }), linkFormat, 0, newText.length);
       onChange(insert(value, toInsert));
     } else {
-      const newValue = applyFormat(value, format);
+      // Scenario: we have any active text selection or an active format
+      let newValue;
+
+      if (newText === richTextText) {
+        // If we're not updating the text then ignore
+        newValue = applyFormat(value, linkFormat);
+      } else {
+        // Create new RichText value for the new text in order that we
+        // can apply formats to it.
+        newValue = create({
+          text: newText
+        }); // Apply the new Link format to this new text value.
+
+        newValue = applyFormat(newValue, linkFormat, 0, newText.length); // Update the original (full) RichTextValue replacing the
+        // target text with the *new* RichTextValue containing:
+        // 1. The new text content.
+        // 2. The new link format.
+        // Note original formats will be lost when applying this change.
+        // That is expected behaviour.
+        // See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.
+
+        newValue = replace(value, richTextText, newValue);
+      }
+
       newValue.start = newValue.end;
       newValue.activeFormats = [];
       onChange(newValue);
@@ -115,6 +160,29 @@ function InlineLinkUI({
   // otherwise it causes a render of the content.
 
   const focusOnMount = useRef(addingLink ? 'firstElement' : false);
+
+  async function handleCreate(pageTitle) {
+    const page = await createPageEntity({
+      title: pageTitle,
+      status: 'draft'
+    });
+    return {
+      id: page.id,
+      type: page.type,
+      title: page.title.rendered,
+      url: page.link,
+      kind: 'post-type'
+    };
+  }
+
+  function createButtonText(searchTerm) {
+    return createInterpolateElement(sprintf(
+    /* translators: %s: search term. */
+    __('Create Page: <mark>%s</mark>'), searchTerm), {
+      mark: createElement("mark", null)
+    });
+  }
+
   return createElement(Popover, {
     anchorRef: anchorRef,
     focusOnMount: focusOnMount.current,
@@ -125,9 +193,34 @@ function InlineLinkUI({
     onChange: onChangeLink,
     onRemove: removeLink,
     forceIsEditingLink: addingLink,
-    hasRichPreviews: true
+    hasRichPreviews: true,
+    createSuggestion: createPageEntity && handleCreate,
+    withCreateSuggestion: userCanCreatePages,
+    createSuggestionButtonText: createButtonText,
+    hasTextControl: true
   }));
 }
 
+function getRichTextValueFromSelection(value, isActive) {
+  // Default to the selection ranges on the RichTextValue object.
+  let textStart = value.start;
+  let textEnd = value.end; // If the format is currently active then the rich text value
+  // should always be taken from the bounds of the active format
+  // and not the selected text.
+
+  if (isActive) {
+    const boundary = getFormatBoundary(value, {
+      type: 'core/link'
+    });
+    textStart = boundary.start; // Text *selection* always extends +1 beyond the edge of the format.
+    // We account for that here.
+
+    textEnd = boundary.end + 1;
+  } // Get a RichTextValue containing the selected text content.
+
+
+  return slice(value, textStart, textEnd);
+}
+
 export default withSpokenMessages(InlineLinkUI);
 //# sourceMappingURL=inline.js.map

package/build-module/link/inline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/link/inline.js"],"names":["useState","useRef","__","withSpokenMessages","Popover","prependHTTP","create","insert","isCollapsed","applyFormat","useAnchorRef","removeFormat","__experimentalLinkControl","LinkControl","createLinkFormat","isValidHref","link","settings","InlineLinkUI","isActive","activeAttributes","addingLink","value","onChange","speak","stopAddingLink","contentRef","nextLinkValue","setNextLinkValue","linkValue","url","type","id","opensInNewTab","target","removeLink","newValue","onChangeLink","nextValue","didToggleSetting","didToggleSettingForNewLink","undefined","newUrl","format","String","opensInNewWindow","newText","title","toInsert","text","length","start","end","activeFormats","anchorRef","ref","focusOnMount","current"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,EAAmBC,MAAnB,QAAiC,oBAAjC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,kBAAT,EAA6BC,OAA7B,QAA4C,uBAA5C;AACA,SAASC,WAAT,QAA4B,gBAA5B;AACA,SACCC,MADD,EAECC,MAFD,EAGCC,WAHD,EAICC,WAJD,EAKCC,YALD,EAMCC,YAND,QAOO,sBAPP;AAQA,SAASC,yBAAyB,IAAIC,WAAtC,QAAyD,yBAAzD;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,EAA2BC,WAA3B,QAA8C,SAA9C;AACA,SAASC,IAAI,IAAIC,QAAjB,QAAiC,SAAjC;;AAEA,SAASC,YAAT,CAAuB;AACtBC,EAAAA,QADsB;AAEtBC,EAAAA,gBAFsB;AAGtBC,EAAAA,UAHsB;AAItBC,EAAAA,KAJsB;AAKtBC,EAAAA,QALsB;AAMtBC,EAAAA,KANsB;AAOtBC,EAAAA,cAPsB;AAQtBC,EAAAA;AARsB,CAAvB,EASI;AACH;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACC,QAAM,CAAEC,aAAF,EAAiBC,gBAAjB,IAAsC5B,QAAQ,EAApD;AAEA,QAAM6B,SAAS,GAAG;AACjBC,IAAAA,GAAG,EAAEV,gBAAgB,CAACU,GADL;AAEjBC,IAAAA,IAAI,EAAEX,gBAAgB,CAACW,IAFN;AAGjBC,IAAAA,EAAE,EAAEZ,gBAAgB,CAACY,EAHJ;AAIjBC,IAAAA,aAAa,EAAEb,gBAAgB,CAACc,MAAjB,KAA4B,QAJ1B;AAKjB,OAAGP;AALc,GAAlB;;AAQA,WAASQ,UAAT,GAAsB;AACrB,UAAMC,QAAQ,GAAGzB,YAAY,CAAEW,KAAF,EAAS,WAAT,CAA7B;AACAC,IAAAA,QAAQ,CAAEa,QAAF,CAAR;AACAX,IAAAA,cAAc;AACdD,IAAAA,KAAK,CAAEtB,EAAE,CAAE,eAAF,CAAJ,EAAyB,WAAzB,CAAL;AACA;;AAED,WAASmC,YAAT,CAAuBC,SAAvB,EAAmC;AAClC;AACA;AACA;AACAA,IAAAA,SAAS,GAAG,EACX,GAAGX,aADQ;AAEX,SAAGW;AAFQ,KAAZ,CAJkC,CASlC;;AACA,UAAMC,gBAAgB,GACrBV,SAAS,CAACI,aAAV,KAA4BK,SAAS,CAACL,aAAtC,IACAJ,SAAS,CAACC,GAAV,KAAkBQ,SAAS,CAACR,GAF7B,CAVkC,CAclC;AACA;AACA;;AACA,UAAMU,0BAA0B,GAC/BD,gBAAgB,IAAID,SAAS,CAACR,GAAV,KAAkBW,SADvC,CAjBkC,CAoBlC;AACA;;AACAb,IAAAA,gBAAgB,CAAEY,0BAA0B,GAAGF,SAAH,GAAeG,SAA3C,CAAhB;;AAEA,QAAKD,0BAAL,EAAkC;AACjC;AACA;;AAED,UAAME,MAAM,GAAGrC,WAAW,CAAEiC,SAAS,CAACR,GAAZ,CAA1B;AACA,UAAMa,MAAM,GAAG7B,gBAAgB,CAAE;AAChCgB,MAAAA,GAAG,EAAEY,MAD2B;AAEhCX,MAAAA,IAAI,EAAEO,SAAS,CAACP,IAFgB;AAGhCC,MAAAA,EAAE,EACDM,SAAS,CAACN,EAAV,KAAiBS,SAAjB,IAA8BH,SAAS,CAACN,EAAV,KAAiB,IAA/C,GACGY,MAAM,CAAEN,SAAS,CAACN,EAAZ,CADT,GAEGS,SAN4B;AAOhCI,MAAAA,gBAAgB,EAAEP,SAAS,CAACL;AAPI,KAAF,CAA/B;;AAUA,QAAKzB,WAAW,CAAEc,KAAF,CAAX,IAAwB,CAAEH,QAA/B,EAA0C;AACzC,YAAM2B,OAAO,GAAGR,SAAS,CAACS,KAAV,IAAmBL,MAAnC;AACA,YAAMM,QAAQ,GAAGvC,WAAW,CAC3BH,MAAM,CAAE;AAAE2C,QAAAA,IAAI,EAAEH;AAAR,OAAF,CADqB,EAE3BH,MAF2B,EAG3B,CAH2B,EAI3BG,OAAO,CAACI,MAJmB,CAA5B;AAMA3B,MAAAA,QAAQ,CAAEhB,MAAM,CAAEe,KAAF,EAAS0B,QAAT,CAAR,CAAR;AACA,KATD,MASO;AACN,YAAMZ,QAAQ,GAAG3B,WAAW,CAAEa,KAAF,EAASqB,MAAT,CAA5B;AACAP,MAAAA,QAAQ,CAACe,KAAT,GAAiBf,QAAQ,CAACgB,GAA1B;AACAhB,MAAAA,QAAQ,CAACiB,aAAT,GAAyB,EAAzB;AACA9B,MAAAA,QAAQ,CAAEa,QAAF,CAAR;AACA,KArDiC,CAuDlC;AACA;;;AACA,QAAK,CAAEG,gBAAP,EAA0B;AACzBd,MAAAA,cAAc;AACd;;AAED,QAAK,CAAEV,WAAW,CAAE2B,MAAF,CAAlB,EAA+B;AAC9BlB,MAAAA,KAAK,CACJtB,EAAE,CACD,0EADC,CADE,EAIJ,WAJI,CAAL;AAMA,KAPD,MAOO,IAAKiB,QAAL,EAAgB;AACtBK,MAAAA,KAAK,CAAEtB,EAAE,CAAE,cAAF,CAAJ,EAAwB,WAAxB,CAAL;AACA,KAFM,MAEA;AACNsB,MAAAA,KAAK,CAAEtB,EAAE,CAAE,gBAAF,CAAJ,EAA0B,WAA1B,CAAL;AACA;AACD;;AAED,QAAMoD,SAAS,GAAG5C,YAAY,CAAE;AAAE6C,IAAAA,GAAG,EAAE7B,UAAP;AAAmBJ,IAAAA,KAAnB;AAA0BL,IAAAA;AAA1B,GAAF,CAA9B,CArGG,CAuGH;AACA;;AACA,QAAMuC,YAAY,GAAGvD,MAAM,CAAEoB,UAAU,GAAG,cAAH,GAAoB,KAAhC,CAA3B;AAEA,SACC,cAAC,OAAD;AACC,IAAA,SAAS,EAAGiC,SADb;AAEC,IAAA,YAAY,EAAGE,YAAY,CAACC,OAF7B;AAGC,IAAA,OAAO,EAAGhC,cAHX;AAIC,IAAA,QAAQ,EAAC;AAJV,KAMC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGI,SADT;AAEC,IAAA,QAAQ,EAAGQ,YAFZ;AAGC,IAAA,QAAQ,EAAGF,UAHZ;AAIC,IAAA,kBAAkB,EAAGd,UAJtB;AAKC,IAAA,eAAe;AALhB,IAND,CADD;AAgBA;;AAED,eAAelB,kBAAkB,CAAEe,YAAF,CAAjC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { withSpokenMessages, Popover } from '@wordpress/components';\nimport { prependHTTP } from '@wordpress/url';\nimport {\n\tcreate,\n\tinsert,\n\tisCollapsed,\n\tapplyFormat,\n\tuseAnchorRef,\n\tremoveFormat,\n} from '@wordpress/rich-text';\nimport { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { createLinkFormat, isValidHref } from './utils';\nimport { link as settings } from './index';\n\nfunction InlineLinkUI( {\n\tisActive,\n\tactiveAttributes,\n\taddingLink,\n\tvalue,\n\tonChange,\n\tspeak,\n\tstopAddingLink,\n\tcontentRef,\n} ) {\n\t/**\n\t * Pending settings to be applied to the next link. When inserting a new\n\t * link, toggle values cannot be applied immediately, because there is not\n\t * yet a link for them to apply to. Thus, they are maintained in a state\n\t * value until the time that the link can be inserted or edited.\n\t *\n\t * @type {[Object|undefined,Function]}\n\t */\n\tconst [ nextLinkValue, setNextLinkValue ] = useState();\n\n\tconst linkValue = {\n\t\turl: activeAttributes.url,\n\t\ttype: activeAttributes.type,\n\t\tid: activeAttributes.id,\n\t\topensInNewTab: activeAttributes.target === '_blank',\n\t\t...nextLinkValue,\n\t};\n\n\tfunction removeLink() {\n\t\tconst newValue = removeFormat( value, 'core/link' );\n\t\tonChange( newValue );\n\t\tstopAddingLink();\n\t\tspeak( __( 'Link removed.' ), 'assertive' );\n\t}\n\n\tfunction onChangeLink( nextValue ) {\n\t\t// Merge with values from state, both for the purpose of assigning the\n\t\t// next state value, and for use in constructing the new link format if\n\t\t// the link is ready to be applied.\n\t\tnextValue = {\n\t\t\t...nextLinkValue,\n\t\t\t...nextValue,\n\t\t};\n\n\t\t// LinkControl calls `onChange` immediately upon the toggling a setting.\n\t\tconst didToggleSetting =\n\t\t\tlinkValue.opensInNewTab !== nextValue.opensInNewTab &&\n\t\t\tlinkValue.url === nextValue.url;\n\n\t\t// If change handler was called as a result of a settings change during\n\t\t// link insertion, it must be held in state until the link is ready to\n\t\t// be applied.\n\t\tconst didToggleSettingForNewLink =\n\t\t\tdidToggleSetting && nextValue.url === undefined;\n\n\t\t// If link will be assigned, the state value can be considered flushed.\n\t\t// Otherwise, persist the pending changes.\n\t\tsetNextLinkValue( didToggleSettingForNewLink ? nextValue : undefined );\n\n\t\tif ( didToggleSettingForNewLink ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newUrl = prependHTTP( nextValue.url );\n\t\tconst format = createLinkFormat( {\n\t\t\turl: newUrl,\n\t\t\ttype: nextValue.type,\n\t\t\tid:\n\t\t\t\tnextValue.id !== undefined && nextValue.id !== null\n\t\t\t\t\t? String( nextValue.id )\n\t\t\t\t\t: undefined,\n\t\t\topensInNewWindow: nextValue.opensInNewTab,\n\t\t} );\n\n\t\tif ( isCollapsed( value ) && ! isActive ) {\n\t\t\tconst newText = nextValue.title || newUrl;\n\t\t\tconst toInsert = applyFormat(\n\t\t\t\tcreate( { text: newText } ),\n\t\t\t\tformat,\n\t\t\t\t0,\n\t\t\t\tnewText.length\n\t\t\t);\n\t\t\tonChange( insert( value, toInsert ) );\n\t\t} else {\n\t\t\tconst newValue = applyFormat( value, format );\n\t\t\tnewValue.start = newValue.end;\n\t\t\tnewValue.activeFormats = [];\n\t\t\tonChange( newValue );\n\t\t}\n\n\t\t// Focus should only be shifted back to the formatted segment when the\n\t\t// URL is submitted.\n\t\tif ( ! didToggleSetting ) {\n\t\t\tstopAddingLink();\n\t\t}\n\n\t\tif ( ! isValidHref( newUrl ) ) {\n\t\t\tspeak(\n\t\t\t\t__(\n\t\t\t\t\t'Warning: the link has been inserted but may have errors. Please test it.'\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else if ( isActive ) {\n\t\t\tspeak( __( 'Link edited.' ), 'assertive' );\n\t\t} else {\n\t\t\tspeak( __( 'Link inserted.' ), 'assertive' );\n\t\t}\n\t}\n\n\tconst anchorRef = useAnchorRef( { ref: contentRef, value, settings } );\n\n\t// The focusOnMount prop shouldn't evolve during render of a Popover\n\t// otherwise it causes a render of the content.\n\tconst focusOnMount = useRef( addingLink ? 'firstElement' : false );\n\n\treturn (\n\t\t<Popover\n\t\t\tanchorRef={ anchorRef }\n\t\t\tfocusOnMount={ focusOnMount.current }\n\t\t\tonClose={ stopAddingLink }\n\t\t\tposition=\"bottom center\"\n\t\t>\n\t\t\t<LinkControl\n\t\t\t\tvalue={ linkValue }\n\t\t\t\tonChange={ onChangeLink }\n\t\t\t\tonRemove={ removeLink }\n\t\t\t\tforceIsEditingLink={ addingLink }\n\t\t\t\thasRichPreviews\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n\nexport default withSpokenMessages( InlineLinkUI );\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/link/inline.js"],"names":["useState","useRef","createInterpolateElement","__","sprintf","withSpokenMessages","Popover","prependHTTP","create","insert","isCollapsed","applyFormat","useAnchorRef","removeFormat","slice","replace","__experimentalLinkControl","LinkControl","store","blockEditorStore","useSelect","createLinkFormat","isValidHref","getFormatBoundary","link","settings","InlineLinkUI","isActive","activeAttributes","addingLink","value","onChange","speak","stopAddingLink","contentRef","richLinkTextValue","getRichTextValueFromSelection","richTextText","text","nextLinkValue","setNextLinkValue","createPageEntity","userCanCreatePages","select","getSettings","_settings","__experimentalCreatePageEntity","__experimentalUserCanCreatePages","linkValue","url","type","id","opensInNewTab","target","title","removeLink","newValue","onChangeLink","nextValue","didToggleSetting","didToggleSettingForNewLink","undefined","newUrl","linkFormat","String","opensInNewWindow","newText","toInsert","length","start","end","activeFormats","anchorRef","ref","focusOnMount","handleCreate","pageTitle","page","status","rendered","kind","createButtonText","searchTerm","mark","current","textStart","textEnd","boundary"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useRef, createInterpolateElement } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { withSpokenMessages, Popover } from '@wordpress/components';\nimport { prependHTTP } from '@wordpress/url';\nimport {\n\tcreate,\n\tinsert,\n\tisCollapsed,\n\tapplyFormat,\n\tuseAnchorRef,\n\tremoveFormat,\n\tslice,\n\treplace,\n} from '@wordpress/rich-text';\nimport {\n\t__experimentalLinkControl as LinkControl,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { createLinkFormat, isValidHref, getFormatBoundary } from './utils';\nimport { link as settings } from './index';\n\nfunction InlineLinkUI( {\n\tisActive,\n\tactiveAttributes,\n\taddingLink,\n\tvalue,\n\tonChange,\n\tspeak,\n\tstopAddingLink,\n\tcontentRef,\n} ) {\n\tconst richLinkTextValue = getRichTextValueFromSelection( value, isActive );\n\n\t// Get the text content minus any HTML tags.\n\tconst richTextText = richLinkTextValue.text;\n\n\t/**\n\t * Pending settings to be applied to the next link. When inserting a new\n\t * link, toggle values cannot be applied immediately, because there is not\n\t * yet a link for them to apply to. Thus, they are maintained in a state\n\t * value until the time that the link can be inserted or edited.\n\t *\n\t * @type {[Object|undefined,Function]}\n\t */\n\tconst [ nextLinkValue, setNextLinkValue ] = useState();\n\n\tconst { createPageEntity, userCanCreatePages } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst _settings = getSettings();\n\n\t\treturn {\n\t\t\tcreatePageEntity: _settings.__experimentalCreatePageEntity,\n\t\t\tuserCanCreatePages: _settings.__experimentalUserCanCreatePages,\n\t\t};\n\t}, [] );\n\n\tconst linkValue = {\n\t\turl: activeAttributes.url,\n\t\ttype: activeAttributes.type,\n\t\tid: activeAttributes.id,\n\t\topensInNewTab: activeAttributes.target === '_blank',\n\t\ttitle: richTextText,\n\t\t...nextLinkValue,\n\t};\n\n\tfunction removeLink() {\n\t\tconst newValue = removeFormat( value, 'core/link' );\n\t\tonChange( newValue );\n\t\tstopAddingLink();\n\t\tspeak( __( 'Link removed.' ), 'assertive' );\n\t}\n\n\tfunction onChangeLink( nextValue ) {\n\t\t// Merge with values from state, both for the purpose of assigning the\n\t\t// next state value, and for use in constructing the new link format if\n\t\t// the link is ready to be applied.\n\t\tnextValue = {\n\t\t\t...nextLinkValue,\n\t\t\t...nextValue,\n\t\t};\n\n\t\t// LinkControl calls `onChange` immediately upon the toggling a setting.\n\t\tconst didToggleSetting =\n\t\t\tlinkValue.opensInNewTab !== nextValue.opensInNewTab &&\n\t\t\tlinkValue.url === nextValue.url;\n\n\t\t// If change handler was called as a result of a settings change during\n\t\t// link insertion, it must be held in state until the link is ready to\n\t\t// be applied.\n\t\tconst didToggleSettingForNewLink =\n\t\t\tdidToggleSetting && nextValue.url === undefined;\n\n\t\t// If link will be assigned, the state value can be considered flushed.\n\t\t// Otherwise, persist the pending changes.\n\t\tsetNextLinkValue( didToggleSettingForNewLink ? nextValue : undefined );\n\n\t\tif ( didToggleSettingForNewLink ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newUrl = prependHTTP( nextValue.url );\n\t\tconst linkFormat = createLinkFormat( {\n\t\t\turl: newUrl,\n\t\t\ttype: nextValue.type,\n\t\t\tid:\n\t\t\t\tnextValue.id !== undefined && nextValue.id !== null\n\t\t\t\t\t? String( nextValue.id )\n\t\t\t\t\t: undefined,\n\t\t\topensInNewWindow: nextValue.opensInNewTab,\n\t\t} );\n\n\t\tconst newText = nextValue.title || newUrl;\n\t\tif ( isCollapsed( value ) && ! isActive ) {\n\t\t\t// Scenario: we don't have any actively selected text or formats.\n\t\t\tconst toInsert = applyFormat(\n\t\t\t\tcreate( { text: newText } ),\n\t\t\t\tlinkFormat,\n\t\t\t\t0,\n\t\t\t\tnewText.length\n\t\t\t);\n\t\t\tonChange( insert( value, toInsert ) );\n\t\t} else {\n\t\t\t// Scenario: we have any active text selection or an active format\n\t\t\tlet newValue;\n\n\t\t\tif ( newText === richTextText ) {\n\t\t\t\t// If we're not updating the text then ignore\n\t\t\t\tnewValue = applyFormat( value, linkFormat );\n\t\t\t} else {\n\t\t\t\t// Create new RichText value for the new text in order that we\n\t\t\t\t// can apply formats to it.\n\t\t\t\tnewValue = create( { text: newText } );\n\n\t\t\t\t// Apply the new Link format to this new text value.\n\t\t\t\tnewValue = applyFormat(\n\t\t\t\t\tnewValue,\n\t\t\t\t\tlinkFormat,\n\t\t\t\t\t0,\n\t\t\t\t\tnewText.length\n\t\t\t\t);\n\n\t\t\t\t// Update the original (full) RichTextValue replacing the\n\t\t\t\t// target text with the *new* RichTextValue containing:\n\t\t\t\t// 1. The new text content.\n\t\t\t\t// 2. The new link format.\n\t\t\t\t// Note original formats will be lost when applying this change.\n\t\t\t\t// That is expected behaviour.\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.\n\t\t\t\tnewValue = replace( value, richTextText, newValue );\n\t\t\t}\n\n\t\t\tnewValue.start = newValue.end;\n\t\t\tnewValue.activeFormats = [];\n\t\t\tonChange( newValue );\n\t\t}\n\n\t\t// Focus should only be shifted back to the formatted segment when the\n\t\t// URL is submitted.\n\t\tif ( ! didToggleSetting ) {\n\t\t\tstopAddingLink();\n\t\t}\n\n\t\tif ( ! isValidHref( newUrl ) ) {\n\t\t\tspeak(\n\t\t\t\t__(\n\t\t\t\t\t'Warning: the link has been inserted but may have errors. Please test it.'\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else if ( isActive ) {\n\t\t\tspeak( __( 'Link edited.' ), 'assertive' );\n\t\t} else {\n\t\t\tspeak( __( 'Link inserted.' ), 'assertive' );\n\t\t}\n\t}\n\n\tconst anchorRef = useAnchorRef( { ref: contentRef, value, settings } );\n\n\t// The focusOnMount prop shouldn't evolve during render of a Popover\n\t// otherwise it causes a render of the content.\n\tconst focusOnMount = useRef( addingLink ? 'firstElement' : false );\n\n\tasync function handleCreate( pageTitle ) {\n\t\tconst page = await createPageEntity( {\n\t\t\ttitle: pageTitle,\n\t\t\tstatus: 'draft',\n\t\t} );\n\n\t\treturn {\n\t\t\tid: page.id,\n\t\t\ttype: page.type,\n\t\t\ttitle: page.title.rendered,\n\t\t\turl: page.link,\n\t\t\tkind: 'post-type',\n\t\t};\n\t}\n\n\tfunction createButtonText( searchTerm ) {\n\t\treturn createInterpolateElement(\n\t\t\tsprintf(\n\t\t\t\t/* translators: %s: search term. */\n\t\t\t\t__( 'Create Page: <mark>%s</mark>' ),\n\t\t\t\tsearchTerm\n\t\t\t),\n\t\t\t{ mark: <mark /> }\n\t\t);\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tanchorRef={ anchorRef }\n\t\t\tfocusOnMount={ focusOnMount.current }\n\t\t\tonClose={ stopAddingLink }\n\t\t\tposition=\"bottom center\"\n\t\t>\n\t\t\t<LinkControl\n\t\t\t\tvalue={ linkValue }\n\t\t\t\tonChange={ onChangeLink }\n\t\t\t\tonRemove={ removeLink }\n\t\t\t\tforceIsEditingLink={ addingLink }\n\t\t\t\thasRichPreviews\n\t\t\t\tcreateSuggestion={ createPageEntity && handleCreate }\n\t\t\t\twithCreateSuggestion={ userCanCreatePages }\n\t\t\t\tcreateSuggestionButtonText={ createButtonText }\n\t\t\t\thasTextControl\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n\nfunction getRichTextValueFromSelection( value, isActive ) {\n\t// Default to the selection ranges on the RichTextValue object.\n\tlet textStart = value.start;\n\tlet textEnd = value.end;\n\n\t// If the format is currently active then the rich text value\n\t// should always be taken from the bounds of the active format\n\t// and not the selected text.\n\tif ( isActive ) {\n\t\tconst boundary = getFormatBoundary( value, {\n\t\t\ttype: 'core/link',\n\t\t} );\n\n\t\ttextStart = boundary.start;\n\n\t\t// Text *selection* always extends +1 beyond the edge of the format.\n\t\t// We account for that here.\n\t\ttextEnd = boundary.end + 1;\n\t}\n\n\t// Get a RichTextValue containing the selected text content.\n\treturn slice( value, textStart, textEnd );\n}\n\nexport default withSpokenMessages( InlineLinkUI );\n"]}

package/build-module/link/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { startsWith } from 'lodash';
+import { startsWith, find, partialRight } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -106,4 +106,113 @@ export function createLinkFormat({
 
   return format;
 }
+/* eslint-disable jsdoc/no-undefined-types */
+
+/**
+ * Get the start and end boundaries of a given format from a rich text value.
+ *
+ *
+ * @param {RichTextValue} value      the rich text value to interrogate.
+ * @param {string}        format     the identifier for the target format (e.g. `core/link`, `core/bold`).
+ * @param {number?}       startIndex optional startIndex to seek from.
+ * @param {number?}       endIndex   optional endIndex to seek from.
+ * @return {Object}	object containing start and end values for the given format.
+ */
+
+/* eslint-enable jsdoc/no-undefined-types */
+
+export function getFormatBoundary(value, format, startIndex = value.start, endIndex = value.end) {
+  const EMPTY_BOUNDARIES = {
+    start: null,
+    end: null
+  };
+  const {
+    formats
+  } = value;
+  let targetFormat;
+  let initialIndex;
+
+  if (!(formats !== null && formats !== void 0 && formats.length)) {
+    return EMPTY_BOUNDARIES;
+  } // Clone formats to avoid modifying source formats.
+
+
+  const newFormats = formats.slice();
+  const formatAtStart = find(newFormats[startIndex], {
+    type: format.type
+  });
+  const formatAtEnd = find(newFormats[endIndex], {
+    type: format.type
+  });
+  const formatAtEndMinusOne = find(newFormats[endIndex - 1], {
+    type: format.type
+  });
+
+  if (!!formatAtStart) {
+    // Set values to conform to "start"
+    targetFormat = formatAtStart;
+    initialIndex = startIndex;
+  } else if (!!formatAtEnd) {
+    // Set values to conform to "end"
+    targetFormat = formatAtEnd;
+    initialIndex = endIndex;
+  } else if (!!formatAtEndMinusOne) {
+    // This is an edge case which will occur if you create a format, then place
+    // the caret just before the format and hit the back ARROW key. The resulting
+    // value object will have start and end +1 beyond the edge of the format boundary.
+    targetFormat = formatAtEndMinusOne;
+    initialIndex = endIndex - 1;
+  } else {
+    return EMPTY_BOUNDARIES;
+  }
+
+  const index = newFormats[initialIndex].indexOf(targetFormat);
+  const walkingArgs = [newFormats, initialIndex, targetFormat, index]; // Walk the startIndex "backwards" to the leading "edge" of the matching format.
+
+  startIndex = walkToStart(...walkingArgs); // Walk the endIndex "forwards" until the trailing "edge" of the matching format.
+
+  endIndex = walkToEnd(...walkingArgs); // Safe guard: start index cannot be less than 0
+
+  startIndex = startIndex < 0 ? 0 : startIndex; // // Return the indicies of the "edges" as the boundaries.
+
+  return {
+    start: startIndex,
+    end: endIndex
+  };
+}
+/**
+ * Walks forwards/backwards towards the boundary of a given format within an
+ * array of format objects. Returns the index of the boundary.
+ *
+ * @param {Array}  formats         the formats to search for the given format type.
+ * @param {number} initialIndex    the starting index from which to walk.
+ * @param {Object} targetFormatRef a reference to the format type object being sought.
+ * @param {number} formatIndex     the index at which we expect the target format object to be.
+ * @param {string} direction       either 'forwards' or 'backwards' to indicate the direction.
+ * @return {number} the index of the boundary of the given format.
+ */
+
+function walkToBoundary(formats, initialIndex, targetFormatRef, formatIndex, direction) {
+  let index = initialIndex;
+  const directions = {
+    forwards: 1,
+    backwards: -1
+  };
+  const directionIncrement = directions[direction] || 1; // invalid direction arg default to forwards
+
+  const inverseDirectionIncrement = directionIncrement * -1;
+
+  while (formats[index] && formats[index][formatIndex] === targetFormatRef) {
+    // Increment/decrement in the direction of operation.
+    index = index + directionIncrement;
+  } // Restore by one in inverse direction of operation
+  // to avoid out of bounds.
+
+
+  index = index + inverseDirectionIncrement;
+  return index;
+}
+
+const walkToStart = partialRight(walkToBoundary, 'backwards');
+const walkToEnd = partialRight(walkToBoundary, 'forwards');
 //# sourceMappingURL=utils.js.map

package/build-module/link/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/link/utils.js"],"names":["startsWith","getProtocol","isValidProtocol","getAuthority","isValidAuthority","getPath","isValidPath","getQueryString","isValidQueryString","getFragment","isValidFragment","isValidHref","href","trimmedHref","trim","test","protocol","authority","path","queryString","fragment","createLinkFormat","url","type","id","opensInNewWindow","format","attributes","target","rel"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,QAA3B;AAEA;AACA;AACA;;AACA,SACCC,WADD,EAECC,eAFD,EAGCC,YAHD,EAICC,gBAJD,EAKCC,OALD,EAMCC,WAND,EAOCC,cAPD,EAQCC,kBARD,EASCC,WATD,EAUCC,eAVD,QAWO,gBAXP;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,WAAT,CAAsBC,IAAtB,EAA6B;AACnC,MAAK,CAAEA,IAAP,EAAc;AACb,WAAO,KAAP;AACA;;AAED,QAAMC,WAAW,GAAGD,IAAI,CAACE,IAAL,EAApB;;AAEA,MAAK,CAAED,WAAP,EAAqB;AACpB,WAAO,KAAP;AACA,GATkC,CAWnC;;;AACA,MAAK,QAAQE,IAAR,CAAcF,WAAd,CAAL,EAAmC;AAClC,UAAMG,QAAQ,GAAGf,WAAW,CAAEY,WAAF,CAA5B;;AACA,QAAK,CAAEX,eAAe,CAAEc,QAAF,CAAtB,EAAqC;AACpC,aAAO,KAAP;AACA,KAJiC,CAMlC;AACA;;;AACA,QACChB,UAAU,CAAEgB,QAAF,EAAY,MAAZ,CAAV,IACA,CAAE,uBAAuBD,IAAvB,CAA6BF,WAA7B,CAFH,EAGE;AACD,aAAO,KAAP;AACA;;AAED,UAAMI,SAAS,GAAGd,YAAY,CAAEU,WAAF,CAA9B;;AACA,QAAK,CAAET,gBAAgB,CAAEa,SAAF,CAAvB,EAAuC;AACtC,aAAO,KAAP;AACA;;AAED,UAAMC,IAAI,GAAGb,OAAO,CAAEQ,WAAF,CAApB;;AACA,QAAKK,IAAI,IAAI,CAAEZ,WAAW,CAAEY,IAAF,CAA1B,EAAqC;AACpC,aAAO,KAAP;AACA;;AAED,UAAMC,WAAW,GAAGZ,cAAc,CAAEM,WAAF,CAAlC;;AACA,QAAKM,WAAW,IAAI,CAAEX,kBAAkB,CAAEW,WAAF,CAAxC,EAA0D;AACzD,aAAO,KAAP;AACA;;AAED,UAAMC,QAAQ,GAAGX,WAAW,CAAEI,WAAF,CAA5B;;AACA,QAAKO,QAAQ,IAAI,CAAEV,eAAe,CAAEU,QAAF,CAAlC,EAAiD;AAChD,aAAO,KAAP;AACA;AACD,GA9CkC,CAgDnC;;;AACA,MAAKpB,UAAU,CAAEa,WAAF,EAAe,GAAf,CAAV,IAAkC,CAAEH,eAAe,CAAEG,WAAF,CAAxD,EAA0E;AACzE,WAAO,KAAP;AACA;;AAED,SAAO,IAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASQ,gBAAT,CAA2B;AAAEC,EAAAA,GAAF;AAAOC,EAAAA,IAAP;AAAaC,EAAAA,EAAb;AAAiBC,EAAAA;AAAjB,CAA3B,EAAiE;AACvE,QAAMC,MAAM,GAAG;AACdH,IAAAA,IAAI,EAAE,WADQ;AAEdI,IAAAA,UAAU,EAAE;AACXL,MAAAA;AADW;AAFE,GAAf;AAOA,MAAKC,IAAL,EAAYG,MAAM,CAACC,UAAP,CAAkBJ,IAAlB,GAAyBA,IAAzB;AACZ,MAAKC,EAAL,EAAUE,MAAM,CAACC,UAAP,CAAkBH,EAAlB,GAAuBA,EAAvB;;AAEV,MAAKC,gBAAL,EAAwB;AACvBC,IAAAA,MAAM,CAACC,UAAP,CAAkBC,MAAlB,GAA2B,QAA3B;AACAF,IAAAA,MAAM,CAACC,UAAP,CAAkBE,GAAlB,GAAwB,qBAAxB;AACA;;AAED,SAAOH,MAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { startsWith } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetProtocol,\n\tisValidProtocol,\n\tgetAuthority,\n\tisValidAuthority,\n\tgetPath,\n\tisValidPath,\n\tgetQueryString,\n\tisValidQueryString,\n\tgetFragment,\n\tisValidFragment,\n} from '@wordpress/url';\n\n/**\n * Check for issues with the provided href.\n *\n * @param {string} href The href.\n *\n * @return {boolean} Is the href invalid?\n */\nexport function isValidHref( href ) {\n\tif ( ! href ) {\n\t\treturn false;\n\t}\n\n\tconst trimmedHref = href.trim();\n\n\tif ( ! trimmedHref ) {\n\t\treturn false;\n\t}\n\n\t// Does the href start with something that looks like a URL protocol?\n\tif ( /^\\S+:/.test( trimmedHref ) ) {\n\t\tconst protocol = getProtocol( trimmedHref );\n\t\tif ( ! isValidProtocol( protocol ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Add some extra checks for http(s) URIs, since these are the most common use-case.\n\t\t// This ensures URIs with an http protocol have exactly two forward slashes following the protocol.\n\t\tif (\n\t\t\tstartsWith( protocol, 'http' ) &&\n\t\t\t! /^https?:\\/\\/[^\\/\\s]/i.test( trimmedHref )\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst authority = getAuthority( trimmedHref );\n\t\tif ( ! isValidAuthority( authority ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst path = getPath( trimmedHref );\n\t\tif ( path && ! isValidPath( path ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst queryString = getQueryString( trimmedHref );\n\t\tif ( queryString && ! isValidQueryString( queryString ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst fragment = getFragment( trimmedHref );\n\t\tif ( fragment && ! isValidFragment( fragment ) ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Validate anchor links.\n\tif ( startsWith( trimmedHref, '#' ) && ! isValidFragment( trimmedHref ) ) {\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n\n/**\n * Generates the format object that will be applied to the link text.\n *\n * @param {Object}  options\n * @param {string}  options.url              The href of the link.\n * @param {string}  options.type             The type of the link.\n * @param {string}  options.id               The ID of the link.\n * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.\n *\n * @return {Object} The final format object.\n */\nexport function createLinkFormat( { url, type, id, opensInNewWindow } ) {\n\tconst format = {\n\t\ttype: 'core/link',\n\t\tattributes: {\n\t\t\turl,\n\t\t},\n\t};\n\n\tif ( type ) format.attributes.type = type;\n\tif ( id ) format.attributes.id = id;\n\n\tif ( opensInNewWindow ) {\n\t\tformat.attributes.target = '_blank';\n\t\tformat.attributes.rel = 'noreferrer noopener';\n\t}\n\n\treturn format;\n}\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/link/utils.js"],"names":["startsWith","find","partialRight","getProtocol","isValidProtocol","getAuthority","isValidAuthority","getPath","isValidPath","getQueryString","isValidQueryString","getFragment","isValidFragment","isValidHref","href","trimmedHref","trim","test","protocol","authority","path","queryString","fragment","createLinkFormat","url","type","id","opensInNewWindow","format","attributes","target","rel","getFormatBoundary","value","startIndex","start","endIndex","end","EMPTY_BOUNDARIES","formats","targetFormat","initialIndex","length","newFormats","slice","formatAtStart","formatAtEnd","formatAtEndMinusOne","index","indexOf","walkingArgs","walkToStart","walkToEnd","walkToBoundary","targetFormatRef","formatIndex","direction","directions","forwards","backwards","directionIncrement","inverseDirectionIncrement"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { startsWith, find, partialRight } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tgetProtocol,\n\tisValidProtocol,\n\tgetAuthority,\n\tisValidAuthority,\n\tgetPath,\n\tisValidPath,\n\tgetQueryString,\n\tisValidQueryString,\n\tgetFragment,\n\tisValidFragment,\n} from '@wordpress/url';\n\n/**\n * Check for issues with the provided href.\n *\n * @param {string} href The href.\n *\n * @return {boolean} Is the href invalid?\n */\nexport function isValidHref( href ) {\n\tif ( ! href ) {\n\t\treturn false;\n\t}\n\n\tconst trimmedHref = href.trim();\n\n\tif ( ! trimmedHref ) {\n\t\treturn false;\n\t}\n\n\t// Does the href start with something that looks like a URL protocol?\n\tif ( /^\\S+:/.test( trimmedHref ) ) {\n\t\tconst protocol = getProtocol( trimmedHref );\n\t\tif ( ! isValidProtocol( protocol ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Add some extra checks for http(s) URIs, since these are the most common use-case.\n\t\t// This ensures URIs with an http protocol have exactly two forward slashes following the protocol.\n\t\tif (\n\t\t\tstartsWith( protocol, 'http' ) &&\n\t\t\t! /^https?:\\/\\/[^\\/\\s]/i.test( trimmedHref )\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst authority = getAuthority( trimmedHref );\n\t\tif ( ! isValidAuthority( authority ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst path = getPath( trimmedHref );\n\t\tif ( path && ! isValidPath( path ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst queryString = getQueryString( trimmedHref );\n\t\tif ( queryString && ! isValidQueryString( queryString ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst fragment = getFragment( trimmedHref );\n\t\tif ( fragment && ! isValidFragment( fragment ) ) {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Validate anchor links.\n\tif ( startsWith( trimmedHref, '#' ) && ! isValidFragment( trimmedHref ) ) {\n\t\treturn false;\n\t}\n\n\treturn true;\n}\n\n/**\n * Generates the format object that will be applied to the link text.\n *\n * @param {Object}  options\n * @param {string}  options.url              The href of the link.\n * @param {string}  options.type             The type of the link.\n * @param {string}  options.id               The ID of the link.\n * @param {boolean} options.opensInNewWindow Whether this link will open in a new window.\n *\n * @return {Object} The final format object.\n */\nexport function createLinkFormat( { url, type, id, opensInNewWindow } ) {\n\tconst format = {\n\t\ttype: 'core/link',\n\t\tattributes: {\n\t\t\turl,\n\t\t},\n\t};\n\n\tif ( type ) format.attributes.type = type;\n\tif ( id ) format.attributes.id = id;\n\n\tif ( opensInNewWindow ) {\n\t\tformat.attributes.target = '_blank';\n\t\tformat.attributes.rel = 'noreferrer noopener';\n\t}\n\n\treturn format;\n}\n\n/* eslint-disable jsdoc/no-undefined-types */\n/**\n * Get the start and end boundaries of a given format from a rich text value.\n *\n *\n * @param {RichTextValue} value      the rich text value to interrogate.\n * @param {string}        format     the identifier for the target format (e.g. `core/link`, `core/bold`).\n * @param {number?}       startIndex optional startIndex to seek from.\n * @param {number?}       endIndex   optional endIndex to seek from.\n * @return {Object}\tobject containing start and end values for the given format.\n */\n/* eslint-enable jsdoc/no-undefined-types */\nexport function getFormatBoundary(\n\tvalue,\n\tformat,\n\tstartIndex = value.start,\n\tendIndex = value.end\n) {\n\tconst EMPTY_BOUNDARIES = {\n\t\tstart: null,\n\t\tend: null,\n\t};\n\n\tconst { formats } = value;\n\tlet targetFormat;\n\tlet initialIndex;\n\n\tif ( ! formats?.length ) {\n\t\treturn EMPTY_BOUNDARIES;\n\t}\n\n\t// Clone formats to avoid modifying source formats.\n\tconst newFormats = formats.slice();\n\n\tconst formatAtStart = find( newFormats[ startIndex ], {\n\t\ttype: format.type,\n\t} );\n\n\tconst formatAtEnd = find( newFormats[ endIndex ], {\n\t\ttype: format.type,\n\t} );\n\n\tconst formatAtEndMinusOne = find( newFormats[ endIndex - 1 ], {\n\t\ttype: format.type,\n\t} );\n\n\tif ( !! formatAtStart ) {\n\t\t// Set values to conform to \"start\"\n\t\ttargetFormat = formatAtStart;\n\t\tinitialIndex = startIndex;\n\t} else if ( !! formatAtEnd ) {\n\t\t// Set values to conform to \"end\"\n\t\ttargetFormat = formatAtEnd;\n\t\tinitialIndex = endIndex;\n\t} else if ( !! formatAtEndMinusOne ) {\n\t\t// This is an edge case which will occur if you create a format, then place\n\t\t// the caret just before the format and hit the back ARROW key. The resulting\n\t\t// value object will have start and end +1 beyond the edge of the format boundary.\n\t\ttargetFormat = formatAtEndMinusOne;\n\t\tinitialIndex = endIndex - 1;\n\t} else {\n\t\treturn EMPTY_BOUNDARIES;\n\t}\n\n\tconst index = newFormats[ initialIndex ].indexOf( targetFormat );\n\n\tconst walkingArgs = [ newFormats, initialIndex, targetFormat, index ];\n\n\t// Walk the startIndex \"backwards\" to the leading \"edge\" of the matching format.\n\tstartIndex = walkToStart( ...walkingArgs );\n\n\t// Walk the endIndex \"forwards\" until the trailing \"edge\" of the matching format.\n\tendIndex = walkToEnd( ...walkingArgs );\n\n\t// Safe guard: start index cannot be less than 0\n\tstartIndex = startIndex < 0 ? 0 : startIndex;\n\n\t// // Return the indicies of the \"edges\" as the boundaries.\n\treturn {\n\t\tstart: startIndex,\n\t\tend: endIndex,\n\t};\n}\n\n/**\n * Walks forwards/backwards towards the boundary of a given format within an\n * array of format objects. Returns the index of the boundary.\n *\n * @param {Array}  formats         the formats to search for the given format type.\n * @param {number} initialIndex    the starting index from which to walk.\n * @param {Object} targetFormatRef a reference to the format type object being sought.\n * @param {number} formatIndex     the index at which we expect the target format object to be.\n * @param {string} direction       either 'forwards' or 'backwards' to indicate the direction.\n * @return {number} the index of the boundary of the given format.\n */\nfunction walkToBoundary(\n\tformats,\n\tinitialIndex,\n\ttargetFormatRef,\n\tformatIndex,\n\tdirection\n) {\n\tlet index = initialIndex;\n\n\tconst directions = {\n\t\tforwards: 1,\n\t\tbackwards: -1,\n\t};\n\n\tconst directionIncrement = directions[ direction ] || 1; // invalid direction arg default to forwards\n\tconst inverseDirectionIncrement = directionIncrement * -1;\n\n\twhile (\n\t\tformats[ index ] &&\n\t\tformats[ index ][ formatIndex ] === targetFormatRef\n\t) {\n\t\t// Increment/decrement in the direction of operation.\n\t\tindex = index + directionIncrement;\n\t}\n\n\t// Restore by one in inverse direction of operation\n\t// to avoid out of bounds.\n\tindex = index + inverseDirectionIncrement;\n\n\treturn index;\n}\n\nconst walkToStart = partialRight( walkToBoundary, 'backwards' );\n\nconst walkToEnd = partialRight( walkToBoundary, 'forwards' );\n"]}

package/build-module/strikethrough/index.js

@@ -25,7 +25,8 @@ export const strikethrough = {
   }) {
     function onClick() {
       onChange(toggleFormat(value, {
-        type: name
+        type: name,
+        title
       }));
       onFocus();
     }
@@ -34,7 +35,8 @@ export const strikethrough = {
       icon: formatStrikethrough,
       title: title,
       onClick: onClick,
-      isActive: isActive
+      isActive: isActive,
+      role: "menuitemcheckbox"
     });
   }
 

package/build-module/strikethrough/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/strikethrough/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","formatStrikethrough","name","title","strikethrough","tagName","className","edit","isActive","value","onChange","onFocus","onClick","type"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,mBAAT,QAAoC,kBAApC;AAEA,MAAMC,IAAI,GAAG,oBAAb;;AACA,MAAMC,KAAK,GAAGL,EAAE,CAAE,eAAF,CAAhB;;AAEA,OAAO,MAAMM,aAAa,GAAG;AAC5BF,EAAAA,IAD4B;AAE5BC,EAAAA,KAF4B;AAG5BE,EAAAA,OAAO,EAAE,GAHmB;AAI5BC,EAAAA,SAAS,EAAE,IAJiB;;AAK5BC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,OAAT,GAAmB;AAClBF,MAAAA,QAAQ,CAAEX,YAAY,CAAEU,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX;AAAR,OAAT,CAAd,CAAR;AACAS,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGV,mBADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGS,OAHX;AAIC,MAAA,QAAQ,EAAGJ;AAJZ,MADD;AAQA;;AAnB2B,CAAtB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { formatStrikethrough } from '@wordpress/icons';\n\nconst name = 'core/strikethrough';\nconst title = __( 'Strikethrough' );\n\nexport const strikethrough = {\n\tname,\n\ttitle,\n\ttagName: 's',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( toggleFormat( value, { type: name } ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ formatStrikethrough }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ isActive }\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/strikethrough/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","formatStrikethrough","name","title","strikethrough","tagName","className","edit","isActive","value","onChange","onFocus","onClick","type"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,mBAAT,QAAoC,kBAApC;AAEA,MAAMC,IAAI,GAAG,oBAAb;;AACA,MAAMC,KAAK,GAAGL,EAAE,CAAE,eAAF,CAAhB;;AAEA,OAAO,MAAMM,aAAa,GAAG;AAC5BF,EAAAA,IAD4B;AAE5BC,EAAAA,KAF4B;AAG5BE,EAAAA,OAAO,EAAE,GAHmB;AAI5BC,EAAAA,SAAS,EAAE,IAJiB;;AAK5BC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,OAAT,GAAmB;AAClBF,MAAAA,QAAQ,CAAEX,YAAY,CAAEU,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACAQ,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGV,mBADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGS,OAHX;AAIC,MAAA,QAAQ,EAAGJ,QAJZ;AAKC,MAAA,IAAI,EAAC;AALN,MADD;AASA;;AApB2B,CAAtB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { formatStrikethrough } from '@wordpress/icons';\n\nconst name = 'core/strikethrough';\nconst title = __( 'Strikethrough' );\n\nexport const strikethrough = {\n\tname,\n\ttitle,\n\ttagName: 's',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( toggleFormat( value, { type: name, title } ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ formatStrikethrough }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}

package/build-module/subscript/index.js

@@ -25,7 +25,8 @@ export const subscript = {
   }) {
     function onToggle() {
       onChange(toggleFormat(value, {
-        type: name
+        type: name,
+        title
       }));
     }
 
@@ -38,7 +39,8 @@ export const subscript = {
       icon: subscriptIcon,
       title: title,
       onClick: onClick,
-      isActive: isActive
+      isActive: isActive,
+      role: "menuitemcheckbox"
     });
   }
 

package/build-module/subscript/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/subscript/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","subscript","subscriptIcon","name","title","tagName","className","edit","isActive","value","onChange","onFocus","onToggle","type","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,SAAS,IAAIC,aAAtB,QAA2C,kBAA3C;AAEA,MAAMC,IAAI,GAAG,gBAAb;;AACA,MAAMC,KAAK,GAAGN,EAAE,CAAE,WAAF,CAAhB;;AAEA,OAAO,MAAMG,SAAS,GAAG;AACxBE,EAAAA,IADwB;AAExBC,EAAAA,KAFwB;AAGxBC,EAAAA,OAAO,EAAE,KAHe;AAIxBC,EAAAA,SAAS,EAAE,IAJa;;AAKxBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEX,YAAY,CAAEU,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEV;AAAR,OAAT,CAAd,CAAR;AACA;;AAED,aAASW,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGT,aADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGU,OAHX;AAIC,MAAA,QAAQ,EAAGN;AAJZ,MADD;AAQA;;AAvBuB,CAAlB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { subscript as subscriptIcon } from '@wordpress/icons';\n\nconst name = 'core/subscript';\nconst title = __( 'Subscript' );\n\nexport const subscript = {\n\tname,\n\ttitle,\n\ttagName: 'sub',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onToggle() {\n\t\t\tonChange( toggleFormat( value, { type: name } ) );\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonToggle();\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ subscriptIcon }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ isActive }\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/subscript/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","subscript","subscriptIcon","name","title","tagName","className","edit","isActive","value","onChange","onFocus","onToggle","type","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,SAAS,IAAIC,aAAtB,QAA2C,kBAA3C;AAEA,MAAMC,IAAI,GAAG,gBAAb;;AACA,MAAMC,KAAK,GAAGN,EAAE,CAAE,WAAF,CAAhB;;AAEA,OAAO,MAAMG,SAAS,GAAG;AACxBE,EAAAA,IADwB;AAExBC,EAAAA,KAFwB;AAGxBC,EAAAA,OAAO,EAAE,KAHe;AAIxBC,EAAAA,SAAS,EAAE,IAJa;;AAKxBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEX,YAAY,CAAEU,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEV,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACA;;AAED,aAASU,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGT,aADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGU,OAHX;AAIC,MAAA,QAAQ,EAAGN,QAJZ;AAKC,MAAA,IAAI,EAAC;AALN,MADD;AASA;;AAxBuB,CAAlB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { subscript as subscriptIcon } from '@wordpress/icons';\n\nconst name = 'core/subscript';\nconst title = __( 'Subscript' );\n\nexport const subscript = {\n\tname,\n\ttitle,\n\ttagName: 'sub',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onToggle() {\n\t\t\tonChange( toggleFormat( value, { type: name, title } ) );\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonToggle();\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ subscriptIcon }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}

package/build-module/superscript/index.js

@@ -25,7 +25,8 @@ export const superscript = {
   }) {
     function onToggle() {
       onChange(toggleFormat(value, {
-        type: name
+        type: name,
+        title
       }));
     }
 
@@ -38,7 +39,8 @@ export const superscript = {
       icon: superscriptIcon,
       title: title,
       onClick: onClick,
-      isActive: isActive
+      isActive: isActive,
+      role: "menuitemcheckbox"
     });
   }
 

package/build-module/superscript/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/superscript/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","superscript","superscriptIcon","name","title","tagName","className","edit","isActive","value","onChange","onFocus","onToggle","type","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,kBAA/C;AAEA,MAAMC,IAAI,GAAG,kBAAb;;AACA,MAAMC,KAAK,GAAGN,EAAE,CAAE,aAAF,CAAhB;;AAEA,OAAO,MAAMG,WAAW,GAAG;AAC1BE,EAAAA,IAD0B;AAE1BC,EAAAA,KAF0B;AAG1BC,EAAAA,OAAO,EAAE,KAHiB;AAI1BC,EAAAA,SAAS,EAAE,IAJe;;AAK1BC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEX,YAAY,CAAEU,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEV;AAAR,OAAT,CAAd,CAAR;AACA;;AAED,aAASW,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGT,eADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGU,OAHX;AAIC,MAAA,QAAQ,EAAGN;AAJZ,MADD;AAQA;;AAvByB,CAApB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { superscript as superscriptIcon } from '@wordpress/icons';\n\nconst name = 'core/superscript';\nconst title = __( 'Superscript' );\n\nexport const superscript = {\n\tname,\n\ttitle,\n\ttagName: 'sup',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onToggle() {\n\t\t\tonChange( toggleFormat( value, { type: name } ) );\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonToggle();\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ superscriptIcon }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ isActive }\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/superscript/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","superscript","superscriptIcon","name","title","tagName","className","edit","isActive","value","onChange","onFocus","onToggle","type","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,WAAW,IAAIC,eAAxB,QAA+C,kBAA/C;AAEA,MAAMC,IAAI,GAAG,kBAAb;;AACA,MAAMC,KAAK,GAAGN,EAAE,CAAE,aAAF,CAAhB;;AAEA,OAAO,MAAMG,WAAW,GAAG;AAC1BE,EAAAA,IAD0B;AAE1BC,EAAAA,KAF0B;AAG1BC,EAAAA,OAAO,EAAE,KAHiB;AAI1BC,EAAAA,SAAS,EAAE,IAJe;;AAK1BC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEX,YAAY,CAAEU,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEV,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACA;;AAED,aAASU,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGT,eADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGU,OAHX;AAIC,MAAA,QAAQ,EAAGN,QAJZ;AAKC,MAAA,IAAI,EAAC;AALN,MADD;AASA;;AAxByB,CAApB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { superscript as superscriptIcon } from '@wordpress/icons';\n\nconst name = 'core/superscript';\nconst title = __( 'Superscript' );\n\nexport const superscript = {\n\tname,\n\ttitle,\n\ttagName: 'sup',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onToggle() {\n\t\t\tonChange( toggleFormat( value, { type: name, title } ) );\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonToggle();\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ superscriptIcon }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ isActive }\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}

package/build-module/text-color/index.js

@@ -17,13 +17,44 @@ import { removeFormat } from '@wordpress/rich-text';
  * Internal dependencies
  */
 
-import { default as InlineColorUI, getActiveColor } from './inline';
+import { default as InlineColorUI, getActiveColors } from './inline';
 const name = 'core/text-color';
 
-const title = __('Text color');
+const title = __('Highlight');
 
 const EMPTY_ARRAY = [];
 
+function getComputedStyleProperty(element, property) {
+  const {
+    ownerDocument
+  } = element;
+  const {
+    defaultView
+  } = ownerDocument;
+  const style = defaultView.getComputedStyle(element);
+  const value = style.getPropertyValue(property);
+
+  if (property === 'background-color' && value === 'rgba(0, 0, 0, 0)' && element.parentElement) {
+    return getComputedStyleProperty(element.parentElement, property);
+  }
+
+  return value;
+}
+
+function fillComputedColors(element, {
+  color,
+  backgroundColor
+}) {
+  if (!color && !backgroundColor) {
+    return;
+  }
+
+  return {
+    color: color || getComputedStyleProperty(element, 'color'),
+    backgroundColor: backgroundColor === 'rgba(0, 0, 0, 0)' ? getComputedStyleProperty(element, 'background-color') : backgroundColor
+  };
+}
+
 function TextColorEdit({
   value,
   onChange,
@@ -36,17 +67,7 @@ function TextColorEdit({
   const [isAddingColor, setIsAddingColor] = useState(false);
   const enableIsAddingColor = useCallback(() => setIsAddingColor(true), [setIsAddingColor]);
   const disableIsAddingColor = useCallback(() => setIsAddingColor(false), [setIsAddingColor]);
-  const colorIndicatorStyle = useMemo(() => {
-    const activeColor = getActiveColor(name, value, colors);
-
-    if (!activeColor) {
-      return undefined;
-    }
-
-    return {
-      backgroundColor: activeColor
-    };
-  }, [value, colors]);
+  const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef.current, getActiveColors(value, name, colors)), [value, colors]);
   const hasColorsToChoose = !isEmpty(colors) || !allowCustomControl;
 
   if (!hasColorsToChoose && !isActive) {
@@ -54,18 +75,16 @@ function TextColorEdit({
   }
 
   return createElement(Fragment, null, createElement(RichTextToolbarButton, {
-    key: isActive ? 'text-color' : 'text-color-not-active',
     className: "format-library-text-color-button",
-    name: isActive ? 'text-color' : undefined,
-    icon: createElement(Fragment, null, createElement(Icon, {
-      icon: textColorIcon
-    }), isActive && createElement("span", {
-      className: "format-library-text-color-button__indicator",
+    isActive: isActive,
+    icon: createElement(Icon, {
+      icon: textColorIcon,
       style: colorIndicatorStyle
-    })),
+    }),
     title: title // If has no colors to choose but a color is active remove the color onClick
     ,
-    onClick: hasColorsToChoose ? enableIsAddingColor : () => onChange(removeFormat(value, name))
+    onClick: hasColorsToChoose ? enableIsAddingColor : () => onChange(removeFormat(value, name)),
+    role: "menuitemcheckbox"
   }), isAddingColor && createElement(InlineColorUI, {
     name: name,
     onClose: disableIsAddingColor,
@@ -79,12 +98,32 @@ function TextColorEdit({
 export const textColor = {
   name,
   title,
-  tagName: 'span',
+  tagName: 'mark',
   className: 'has-inline-color',
   attributes: {
     style: 'style',
     class: 'class'
   },
+
+  /*
+   * Since this format relies on the <mark> tag, it's important to
+   * prevent the default yellow background color applied by most
+   * browsers. The solution is to detect when this format is used with a
+   * text color but no background color, and in such cases to override
+   * the default styling with a transparent background.
+   *
+   * @see https://github.com/WordPress/gutenberg/pull/35516
+   */
+  __unstableFilterAttributeValue(key, value) {
+    if (key !== 'style') return value; // We should not add a background-color if it's already set
+
+    if (value && value.includes('background-color')) return value;
+    const addedCSS = ['background-color', 'rgba(0, 0, 0, 0)'].join(':'); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+    // rules will already include a `;`.
+
+    return value ? [addedCSS, value].join(';') : addedCSS;
+  },
+
   edit: TextColorEdit
 };
 //# sourceMappingURL=index.js.map