@wordpress/format-library 3.0.4 → 3.0.5

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","textColorIcon","textColor","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';\nimport { Icon, textColor as textColorIcon } from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColors } from './inline';\n\nconst name = 'core/text-color';\nconst title = __( 'Highlight' );\n\nconst EMPTY_ARRAY = [];\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst style = defaultView.getComputedStyle( element );\n\tconst value = style.getPropertyValue( property );\n\n\tif (\n\t\tproperty === 'background-color' &&\n\t\tvalue === 'rgba(0, 0, 0, 0)' &&\n\t\telement.parentElement\n\t) {\n\t\treturn getComputedStyleProperty( element.parentElement, property );\n\t}\n\n\treturn value;\n}\n\nfunction fillComputedColors( element, { color, backgroundColor } ) {\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tcolor: color || getComputedStyleProperty( element, 'color' ),\n\t\tbackgroundColor:\n\t\t\tbackgroundColor === 'rgba(0, 0, 0, 0)'\n\t\t\t\t? getComputedStyleProperty( element, 'background-color' )\n\t\t\t\t: backgroundColor,\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef.current,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tclassName=\"format-library-text-color-button\"\n\t\t\t\tisActive={ isActive }\n\t\t\t\ticon={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ textColorIcon }\n\t\t\t\t\t\tstyle={ colorIndicatorStyle }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\ttitle={ title }\n\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\tonClick={\n\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t? enableIsAddingColor\n\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'mark',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\t/*\n\t * Since this format relies on the <mark> tag, it's important to\n\t * prevent the default yellow background color applied by most\n\t * browsers. The solution is to detect when this format is used with a\n\t * text color but no background color, and in such cases to override\n\t * the default styling with a transparent background.\n\t *\n\t * @see https://github.com/WordPress/gutenberg/pull/35516\n\t */\n\t__unstableFilterAttributeValue( key, value ) {\n\t\tif ( key !== 'style' ) return value;\n\t\t// We should not add a background-color if it's already set\n\t\tif ( value && value.includes( 'background-color' ) ) return value;\n\t\tconst addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' );\n\t\t// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS\n\t\t// rules will already include a `;`.\n\t\treturn value ? [ addedCSS, value ].join( ';' ) : addedCSS;\n\t},\n\tedit: TextColorEdit,\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","textColorIcon","textColor","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":";;;;;;;;;AASA;;AANA;;AAKA;;AAEA;;AACA;;AACA;;AAKA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;AAGA,MAAMA,IAAI,GAAG,iBAAb;AACA,MAAMC,KAAK,GAAG,cAAI,WAAJ,CAAd;AAEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,wBAAT,CAAmCC,OAAnC,EAA4CC,QAA5C,EAAuD;AACtD,QAAM;AAAEC,IAAAA;AAAF,MAAoBF,OAA1B;AACA,QAAM;AAAEG,IAAAA;AAAF,MAAkBD,aAAxB;AACA,QAAME,KAAK,GAAGD,WAAW,CAACE,gBAAZ,CAA8BL,OAA9B,CAAd;AACA,QAAMM,KAAK,GAAGF,KAAK,CAACG,gBAAN,CAAwBN,QAAxB,CAAd;;AAEA,MACCA,QAAQ,KAAK,kBAAb,IACAK,KAAK,KAAK,kBADV,IAEAN,OAAO,CAACQ,aAHT,EAIE;AACD,WAAOT,wBAAwB,CAAEC,OAAO,CAACQ,aAAV,EAAyBP,QAAzB,CAA/B;AACA;;AAED,SAAOK,KAAP;AACA;;AAED,SAASG,kBAAT,CAA6BT,OAA7B,EAAsC;AAAEU,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAtC,EAAmE;AAClE,MAAK,CAAED,KAAF,IAAW,CAAEC,eAAlB,EAAoC;AACnC;AACA;;AAED,SAAO;AACND,IAAAA,KAAK,EAAEA,KAAK,IAAIX,wBAAwB,CAAEC,OAAF,EAAW,OAAX,CADlC;AAENW,IAAAA,eAAe,EACdA,eAAe,KAAK,kBAApB,GACGZ,wBAAwB,CAAEC,OAAF,EAAW,kBAAX,CAD3B,GAEGW;AALE,GAAP;AAOA;;AAED,SAASC,aAAT,CAAwB;AACvBN,EAAAA,KADuB;AAEvBO,EAAAA,QAFuB;AAGvBC,EAAAA,QAHuB;AAIvBC,EAAAA,gBAJuB;AAKvBC,EAAAA;AALuB,CAAxB,EAMI;AACH,QAAMC,kBAAkB,GAAG,6BAAY,cAAZ,CAA3B;AACA,QAAMC,MAAM,GAAG,6BAAY,eAAZ,KAAiCpB,WAAhD;AACA,QAAM,CAAEqB,aAAF,EAAiBC,gBAAjB,IAAsC,uBAAU,KAAV,CAA5C;AACA,QAAMC,mBAAmB,GAAG,0BAAa,MAAMD,gBAAgB,CAAE,IAAF,CAAnC,EAA6C,CACxEA,gBADwE,CAA7C,CAA5B;AAGA,QAAME,oBAAoB,GAAG,0BAAa,MAAMF,gBAAgB,CAAE,KAAF,CAAnC,EAA8C,CAC1EA,gBAD0E,CAA9C,CAA7B;AAGA,QAAMG,mBAAmB,GAAG,sBAC3B,MACCd,kBAAkB,CACjBO,UAAU,CAACQ,OADM,EAEjB,6BAAiBlB,KAAjB,EAAwBV,IAAxB,EAA8BsB,MAA9B,CAFiB,CAFQ,EAM3B,CAAEZ,KAAF,EAASY,MAAT,CAN2B,CAA5B;AASA,QAAMO,iBAAiB,GAAG,CAAE,qBAASP,MAAT,CAAF,IAAuB,CAAED,kBAAnD;;AACA,MAAK,CAAEQ,iBAAF,IAAuB,CAAEX,QAA9B,EAAyC;AACxC,WAAO,IAAP;AACA;;AAED,SACC,qDACC,4BAAC,kCAAD;AACC,IAAA,SAAS,EAAC,kCADX;AAEC,IAAA,QAAQ,EAAGA,QAFZ;AAGC,IAAA,IAAI,EACH,4BAAC,WAAD;AACC,MAAA,IAAI,EAAGY,gBADR;AAEC,MAAA,KAAK,EAAGH;AAFT,MAJF;AASC,IAAA,KAAK,EAAG1B,KATT,CAUC;AAVD;AAWC,IAAA,OAAO,EACN4B,iBAAiB,GACdJ,mBADc,GAEd,MAAMR,QAAQ,CAAE,4BAAcP,KAAd,EAAqBV,IAArB,CAAF,CAdnB;AAgBC,IAAA,IAAI,EAAC;AAhBN,IADD,EAmBGuB,aAAa,IACd,4BAAC,eAAD;AACC,IAAA,IAAI,EAAGvB,IADR;AAEC,IAAA,OAAO,EAAG0B,oBAFX;AAGC,IAAA,gBAAgB,EAAGP,gBAHpB;AAIC,IAAA,KAAK,EAAGT,KAJT;AAKC,IAAA,QAAQ,EAAGO,QALZ;AAMC,IAAA,UAAU,EAAGG;AANd,IApBF,CADD;AAgCA;;AAEM,MAAMW,SAAS,GAAG;AACxB/B,EAAAA,IADwB;AAExBC,EAAAA,KAFwB;AAGxB+B,EAAAA,OAAO,EAAE,MAHe;AAIxBC,EAAAA,SAAS,EAAE,kBAJa;AAKxBC,EAAAA,UAAU,EAAE;AACX1B,IAAAA,KAAK,EAAE,OADI;AAEX2B,IAAAA,KAAK,EAAE;AAFI,GALY;;AASxB;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACCC,EAAAA,8BAA8B,CAAEC,GAAF,EAAO3B,KAAP,EAAe;AAC5C,QAAK2B,GAAG,KAAK,OAAb,EAAuB,OAAO3B,KAAP,CADqB,CAE5C;;AACA,QAAKA,KAAK,IAAIA,KAAK,CAAC4B,QAAN,CAAgB,kBAAhB,CAAd,EAAqD,OAAO5B,KAAP;AACrD,UAAM6B,QAAQ,GAAG,CAAE,kBAAF,EAAsB,kBAAtB,EAA2CC,IAA3C,CAAiD,GAAjD,CAAjB,CAJ4C,CAK5C;AACA;;AACA,WAAO9B,KAAK,GAAG,CAAE6B,QAAF,EAAY7B,KAAZ,EAAoB8B,IAApB,CAA0B,GAA1B,CAAH,GAAqCD,QAAjD;AACA,GA1BuB;;AA2BxBE,EAAAA,IAAI,EAAEzB;AA3BkB,CAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';\nimport { Icon, textColor as textColorIcon } from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColors } from './inline';\n\nconst name = 'core/text-color';\nconst title = __( 'Highlight' );\n\nconst EMPTY_ARRAY = [];\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst style = defaultView.getComputedStyle( element );\n\tconst value = style.getPropertyValue( property );\n\n\tif (\n\t\tproperty === 'background-color' &&\n\t\tvalue === 'rgba(0, 0, 0, 0)' &&\n\t\telement.parentElement\n\t) {\n\t\treturn getComputedStyleProperty( element.parentElement, property );\n\t}\n\n\treturn value;\n}\n\nfunction fillComputedColors( element, { color, backgroundColor } ) {\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tcolor: color || getComputedStyleProperty( element, 'color' ),\n\t\tbackgroundColor:\n\t\t\tbackgroundColor === 'rgba(0, 0, 0, 0)'\n\t\t\t\t? getComputedStyleProperty( element, 'background-color' )\n\t\t\t\t: backgroundColor,\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef.current,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tclassName=\"format-library-text-color-button\"\n\t\t\t\tisActive={ isActive }\n\t\t\t\ticon={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ textColorIcon }\n\t\t\t\t\t\tstyle={ colorIndicatorStyle }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\ttitle={ title }\n\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\tonClick={\n\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t? enableIsAddingColor\n\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t}\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'mark',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\t/*\n\t * Since this format relies on the <mark> tag, it's important to\n\t * prevent the default yellow background color applied by most\n\t * browsers. The solution is to detect when this format is used with a\n\t * text color but no background color, and in such cases to override\n\t * the default styling with a transparent background.\n\t *\n\t * @see https://github.com/WordPress/gutenberg/pull/35516\n\t */\n\t__unstableFilterAttributeValue( key, value ) {\n\t\tif ( key !== 'style' ) return value;\n\t\t// We should not add a background-color if it's already set\n\t\tif ( value && value.includes( 'background-color' ) ) return value;\n\t\tconst addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' );\n\t\t// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS\n\t\t// rules will already include a `;`.\n\t\treturn value ? [ addedCSS, value ].join( ';' ) : addedCSS;\n\t},\n\tedit: TextColorEdit,\n};\n"]}

package/build/text-color/inline.js

@@ -143,11 +143,18 @@ function InlineColorUI({
   onClose,
   contentRef
 }) {
-  const anchorRef = (0, _richText.useAnchorRef)({
+  /* 
+   As you change the text color by typing a HEX value into a field,
+   the return value of document.getSelection jumps to the field you're editing,
+   not the highlighted text. Given that useAnchorRef uses document.getSelection,
+   it will return null, since it can't find the <mark> element within the HEX input.
+   This caches the last truthy value of the selection anchor reference.
+   */
+  const anchorRef = (0, _blockEditor.useCachedTruthy)((0, _richText.useAnchorRef)({
     ref: contentRef,
     value,
     settings: _index.textColor
-  });
+  }));
   return (0, _element.createElement)(_components.Popover, {
     onClose: onClose,
     className: "components-inline-color-popover",

package/build/text-color/inline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","match","colorSlug","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","getSettings","blockEditorStore","onColorChange","activeColors","InlineColorUI","onClose","contentRef","anchorRef","ref","settings","title","tab"],"mappings":";;;;;;;;AAQA;;AALA;;AAMA;;AACA;;AAMA;;AAOA;;AACA;;AAKA;;AA7BA;AACA;AACA;;AAGA;AACA;AACA;;AAmBA;AACA;AACA;AAGA,SAASA,QAAT,CAAmBC,GAAG,GAAG,EAAzB,EAA8B;AAC7B,SAAOA,GAAG,CAACC,KAAJ,CAAW,GAAX,EAAiBC,MAAjB,CAAyB,CAAEC,WAAF,EAAeC,IAAf,KAAyB;AACxD,QAAKA,IAAL,EAAY;AACX,YAAM,CAAEC,QAAF,EAAYC,KAAZ,IAAsBF,IAAI,CAACH,KAAL,CAAY,GAAZ,CAA5B;AACA,UAAKI,QAAQ,KAAK,OAAlB,EAA4BF,WAAW,CAACI,KAAZ,GAAoBD,KAApB;AAC5B,UAAKD,QAAQ,KAAK,kBAAlB,EACCF,WAAW,CAACK,eAAZ,GAA8BF,KAA9B;AACD;;AACD,WAAOH,WAAP;AACA,GARM,EAQJ,EARI,CAAP;AASA;;AAED,SAASM,cAAT,CAAyBC,SAAS,GAAG,EAArC,EAAyCC,aAAzC,EAAyD;AACxD,SAAOD,SAAS,CAACT,KAAV,CAAiB,GAAjB,EAAuBC,MAAvB,CAA+B,CAAEC,WAAF,EAAeS,IAAf,KAAyB;AAC9D,UAAMC,KAAK,GAAGD,IAAI,CAACC,KAAL,CAAY,qBAAZ,CAAd;;AACA,QAAKA,KAAL,EAAa;AACZ,YAAM,GAAIC,SAAJ,IAAkBF,IAAI,CAACC,KAAL,CAAY,qBAAZ,CAAxB;AACA,YAAME,WAAW,GAAG,kDACnBJ,aADmB,EAEnBG,SAFmB,CAApB;AAIAX,MAAAA,WAAW,CAACI,KAAZ,GAAoBQ,WAAW,CAACR,KAAhC;AACA;;AACD,WAAOJ,WAAP;AACA,GAXM,EAWJ,EAXI,CAAP;AAYA;;AAEM,SAASa,eAAT,CAA0BV,KAA1B,EAAiCM,IAAjC,EAAuCD,aAAvC,EAAuD;AAC7D,QAAMM,iBAAiB,GAAG,+BAAiBX,KAAjB,EAAwBM,IAAxB,CAA1B;;AAEA,MAAK,CAAEK,iBAAP,EAA2B;AAC1B,WAAO,EAAP;AACA;;AAED,SAAO,EACN,GAAGlB,QAAQ,CAAEkB,iBAAiB,CAACC,UAAlB,CAA6BC,KAA/B,CADL;AAEN,OAAGV,cAAc,CAAEQ,iBAAiB,CAACC,UAAlB,CAA6BE,KAA/B,EAAsCT,aAAtC;AAFX,GAAP;AAIA;;AAED,SAASU,SAAT,CAAoBf,KAApB,EAA2BM,IAA3B,EAAiCD,aAAjC,EAAgDW,MAAhD,EAAyD;AACxD,QAAM;AAAEf,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAA6B,EAClC,GAAGQ,eAAe,CAAEV,KAAF,EAASM,IAAT,EAAeD,aAAf,CADgB;AAElC,OAAGW;AAF+B,GAAnC;;AAKA,MAAK,CAAEf,KAAF,IAAW,CAAEC,eAAlB,EAAoC;AACnC,WAAO,4BAAcF,KAAd,EAAqBM,IAArB,CAAP;AACA;;AAED,QAAMW,MAAM,GAAG,EAAf;AACA,QAAMC,UAAU,GAAG,EAAnB;AACA,QAAMN,UAAU,GAAG,EAAnB;;AAEA,MAAKV,eAAL,EAAuB;AACtBe,IAAAA,MAAM,CAACE,IAAP,CAAa,CAAE,kBAAF,EAAsBjB,eAAtB,EAAwCkB,IAAxC,CAA8C,GAA9C,CAAb;AACA,GAFD,MAEO;AACN;AACAH,IAAAA,MAAM,CAACE,IAAP,CAAa,CAAE,kBAAF,EAAsB,kBAAtB,EAA2CC,IAA3C,CAAiD,GAAjD,CAAb;AACA;;AAED,MAAKnB,KAAL,EAAa;AACZ,UAAMQ,WAAW,GAAG,6CAA4BJ,aAA5B,EAA2CJ,KAA3C,CAApB;;AAEA,QAAKQ,WAAL,EAAmB;AAClBS,MAAAA,UAAU,CAACC,IAAX,CAAiB,oCAAmB,OAAnB,EAA4BV,WAAW,CAACY,IAAxC,CAAjB;AACA,KAFD,MAEO;AACNJ,MAAAA,MAAM,CAACE,IAAP,CAAa,CAAE,OAAF,EAAWlB,KAAX,EAAmBmB,IAAnB,CAAyB,GAAzB,CAAb;AACA;AACD;;AAED,MAAKH,MAAM,CAACK,MAAZ,EAAqBV,UAAU,CAACC,KAAX,GAAmBI,MAAM,CAACG,IAAP,CAAa,GAAb,CAAnB;AACrB,MAAKF,UAAU,CAACI,MAAhB,EAAyBV,UAAU,CAACE,KAAX,GAAmBI,UAAU,CAACE,IAAX,CAAiB,GAAjB,CAAnB;AAEzB,SAAO,2BAAapB,KAAb,EAAoB;AAAEuB,IAAAA,IAAI,EAAEjB,IAAR;AAAcM,IAAAA;AAAd,GAApB,CAAP;AACA;;AAED,SAASY,WAAT,CAAsB;AAAElB,EAAAA,IAAF;AAAQP,EAAAA,QAAR;AAAkBC,EAAAA,KAAlB;AAAyByB,EAAAA;AAAzB,CAAtB,EAA4D;AAC3D,QAAMT,MAAM,GAAG,qBAAaU,MAAF,IAAc;AACvC,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,MAAM,CAAEE,kBAAF,CAA9B;AACA,WAAO,iBAAKD,WAAW,EAAhB,EAAoB,CAAE,QAAF,CAApB,EAAkC,EAAlC,CAAP;AACA,GAHc,EAGZ,EAHY,CAAf;AAIA,QAAME,aAAa,GAAG,0BACnB5B,KAAF,IAAa;AACZwB,IAAAA,QAAQ,CACPV,SAAS,CAAEf,KAAF,EAASM,IAAT,EAAeU,MAAf,EAAuB;AAAE,OAAEjB,QAAF,GAAcE;AAAhB,KAAvB,CADF,CAAR;AAGA,GALoB,EAMrB,CAAEe,MAAF,EAAUS,QAAV,EAAoB1B,QAApB,CANqB,CAAtB;AAQA,QAAM+B,YAAY,GAAG,sBACpB,MAAMpB,eAAe,CAAEV,KAAF,EAASM,IAAT,EAAeU,MAAf,CADD,EAEpB,CAAEV,IAAF,EAAQN,KAAR,EAAegB,MAAf,CAFoB,CAArB;AAKA,SACC,4BAAC,yBAAD;AACC,IAAA,KAAK,EAAGc,YAAY,CAAE/B,QAAF,CADrB;AAEC,IAAA,QAAQ,EAAG8B;AAFZ,IADD;AAMA;;AAEc,SAASE,aAAT,CAAwB;AACtCzB,EAAAA,IADsC;AAEtCN,EAAAA,KAFsC;AAGtCyB,EAAAA,QAHsC;AAItCO,EAAAA,OAJsC;AAKtCC,EAAAA;AALsC,CAAxB,EAMX;AACH,QAAMC,SAAS,GAAG,4BAAc;AAAEC,IAAAA,GAAG,EAAEF,UAAP;AAAmBjC,IAAAA,KAAnB;AAA0BoC,IAAAA,QAAQ,EAARA;AAA1B,GAAd,CAAlB;AACA,SACC,4BAAC,mBAAD;AACC,IAAA,OAAO,EAAGJ,OADX;AAEC,IAAA,SAAS,EAAC,iCAFX;AAGC,IAAA,SAAS,EAAGE;AAHb,KAKC,4BAAC,oBAAD;AACC,IAAA,IAAI,EAAG,CACN;AACC5B,MAAAA,IAAI,EAAE,OADP;AAEC+B,MAAAA,KAAK,EAAE,cAAI,MAAJ;AAFR,KADM,EAKN;AACC/B,MAAAA,IAAI,EAAE,iBADP;AAEC+B,MAAAA,KAAK,EAAE,cAAI,YAAJ;AAFR,KALM;AADR,KAYKC,GAAF,IACD,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGhC,IADR;AAEC,IAAA,QAAQ,EAAGgC,GAAG,CAAChC,IAFhB;AAGC,IAAA,KAAK,EAAGN,KAHT;AAIC,IAAA,QAAQ,EAAGyB;AAJZ,IAbF,CALD,CADD;AA6BA","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchorRef,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Popover, TabPanel } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings } from './index';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.split( ':' );\n\t\t\tif ( property === 'color' ) accumulator.color = value;\n\t\t\tif ( property === 'background-color' )\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nfunction parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\tconst match = name.match( /^has-([^-]+)-color$/ );\n\t\tif ( match ) {\n\t\t\tconst [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ );\n\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\tcolorSettings,\n\t\t\t\tcolorSlug\n\t\t\t);\n\t\t\taccumulator.color = colorObject.color;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) attributes.style = styles.join( ';' );\n\tif ( classNames.length ) attributes.class = classNames.join( ' ' );\n\n\treturn applyFormat( value, { type: name, attributes } );\n}\n\nfunction ColorPicker( { name, property, value, onChange } ) {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn get( getSettings(), [ 'colors' ], [] );\n\t}, [] );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t);\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorPalette\n\t\t\tvalue={ activeColors[ property ] }\n\t\t\tonChange={ onColorChange }\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\tconst anchorRef = useAnchorRef( { ref: contentRef, value, settings } );\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchorRef={ anchorRef }\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'color',\n\t\t\t\t\t\ttitle: __( 'Text' ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'backgroundColor',\n\t\t\t\t\t\ttitle: __( 'Background' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</TabPanel>\n\t\t</Popover>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","match","colorSlug","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","getSettings","blockEditorStore","onColorChange","activeColors","InlineColorUI","onClose","contentRef","anchorRef","ref","settings","title","tab"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchorRef,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n\tuseCachedTruthy,\n} from '@wordpress/block-editor';\nimport { Popover, TabPanel } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings } from './index';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.split( ':' );\n\t\t\tif ( property === 'color' ) accumulator.color = value;\n\t\t\tif ( property === 'background-color' )\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nfunction parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\tconst match = name.match( /^has-([^-]+)-color$/ );\n\t\tif ( match ) {\n\t\t\tconst [ , colorSlug ] = name.match( /^has-([^-]+)-color$/ );\n\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\tcolorSettings,\n\t\t\t\tcolorSlug\n\t\t\t);\n\t\t\taccumulator.color = colorObject.color;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) attributes.style = styles.join( ';' );\n\tif ( classNames.length ) attributes.class = classNames.join( ' ' );\n\n\treturn applyFormat( value, { type: name, attributes } );\n}\n\nfunction ColorPicker( { name, property, value, onChange } ) {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn get( getSettings(), [ 'colors' ], [] );\n\t}, [] );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t);\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorPalette\n\t\t\tvalue={ activeColors[ property ] }\n\t\t\tonChange={ onColorChange }\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\t/* \n\t As you change the text color by typing a HEX value into a field,\n\t the return value of document.getSelection jumps to the field you're editing,\n\t not the highlighted text. Given that useAnchorRef uses document.getSelection,\n\t it will return null, since it can't find the <mark> element within the HEX input.\n\t This caches the last truthy value of the selection anchor reference.\n\t */\n\tconst anchorRef = useCachedTruthy(\n\t\tuseAnchorRef( { ref: contentRef, value, settings } )\n\t);\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchorRef={ anchorRef }\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'color',\n\t\t\t\t\t\ttitle: __( 'Text' ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'backgroundColor',\n\t\t\t\t\t\ttitle: __( 'Background' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</TabPanel>\n\t\t</Popover>\n\t);\n}\n"]}

package/build/underline/index.js

@@ -17,9 +17,10 @@ var _blockEditor = require("@wordpress/block-editor");
  * WordPress dependencies
  */
 const name = 'core/underline';
+const title = (0, _i18n.__)('Underline');
 const underline = {
   name,
-  title: (0, _i18n.__)('Underline'),
+  title,
   tagName: 'span',
   className: null,
   attributes: {
@@ -35,7 +36,8 @@ const underline = {
         type: name,
         attributes: {
           style: 'text-decoration: underline;'
-        }
+        },
+        title
       }));
     };
 

package/build/underline/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/underline/index.js"],"names":["name","underline","title","tagName","className","attributes","style","edit","value","onChange","onToggle","type"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAQA,MAAMA,IAAI,GAAG,gBAAb;AAEO,MAAMC,SAAS,GAAG;AACxBD,EAAAA,IADwB;AAExBE,EAAAA,KAAK,EAAE,cAAI,WAAJ,CAFiB;AAGxBC,EAAAA,OAAO,EAAE,MAHe;AAIxBC,EAAAA,SAAS,EAAE,IAJa;AAKxBC,EAAAA,UAAU,EAAE;AACXC,IAAAA,KAAK,EAAE;AADI,GALY;;AAQxBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAF,EAAwB;AAC3B,UAAMC,QAAQ,GAAG,MAAM;AACtBD,MAAAA,QAAQ,CACP,4BAAcD,KAAd,EAAqB;AACpBG,QAAAA,IAAI,EAAEX,IADc;AAEpBK,QAAAA,UAAU,EAAE;AACXC,UAAAA,KAAK,EAAE;AADI;AAFQ,OAArB,CADO,CAAR;AAQA,KATD;;AAWA,WACC,qDACC,4BAAC,6BAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGI;AAHT,MADD,EAMC,4BAAC,yCAAD;AACC,MAAA,SAAS,EAAC,iBADX;AAEC,MAAA,OAAO,EAAGA;AAFX,MAND,CADD;AAaA;;AAjCuB,CAAlB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\n\nconst name = 'core/underline';\n\nexport const underline = {\n\tname,\n\ttitle: __( 'Underline' ),\n\ttagName: 'span',\n\tclassName: null,\n\tattributes: {\n\t\tstyle: 'style',\n\t},\n\tedit( { value, onChange } ) {\n\t\tconst onToggle = () => {\n\t\t\tonChange(\n\t\t\t\ttoggleFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tstyle: 'text-decoration: underline;',\n\t\t\t\t\t},\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"u\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatUnderline\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/underline/index.js"],"names":["name","title","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","type"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AALA;AACA;AACA;AAQA,MAAMA,IAAI,GAAG,gBAAb;AACA,MAAMC,KAAK,GAAG,cAAI,WAAJ,CAAd;AAEO,MAAMC,SAAS,GAAG;AACxBF,EAAAA,IADwB;AAExBC,EAAAA,KAFwB;AAGxBE,EAAAA,OAAO,EAAE,MAHe;AAIxBC,EAAAA,SAAS,EAAE,IAJa;AAKxBC,EAAAA,UAAU,EAAE;AACXC,IAAAA,KAAK,EAAE;AADI,GALY;;AAQxBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAF,EAAwB;AAC3B,UAAMC,QAAQ,GAAG,MAAM;AACtBD,MAAAA,QAAQ,CACP,4BAAcD,KAAd,EAAqB;AACpBG,QAAAA,IAAI,EAAEX,IADc;AAEpBK,QAAAA,UAAU,EAAE;AACXC,UAAAA,KAAK,EAAE;AADI,SAFQ;AAKpBL,QAAAA;AALoB,OAArB,CADO,CAAR;AASA,KAVD;;AAYA,WACC,qDACC,4BAAC,6BAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGS;AAHT,MADD,EAMC,4BAAC,yCAAD;AACC,MAAA,SAAS,EAAC,iBADX;AAEC,MAAA,OAAO,EAAGA;AAFX,MAND,CADD;AAaA;;AAlCuB,CAAlB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\n\nconst name = 'core/underline';\nconst title = __( 'Underline' );\n\nexport const underline = {\n\tname,\n\ttitle,\n\ttagName: 'span',\n\tclassName: null,\n\tattributes: {\n\t\tstyle: 'style',\n\t},\n\tedit( { value, onChange } ) {\n\t\tconst onToggle = () => {\n\t\t\tonChange(\n\t\t\t\ttoggleFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tstyle: 'text-decoration: underline;',\n\t\t\t\t\t},\n\t\t\t\t\ttitle,\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"u\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatUnderline\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"]}

package/build-module/bold/index.js

@@ -25,12 +25,15 @@ export const bold = {
   }) {
     function onToggle() {
       onChange(toggleFormat(value, {
-        type: name
+        type: name,
+        title
       }));
     }
 
     function onClick() {
-      onToggle();
+      onChange(toggleFormat(value, {
+        type: name
+      }));
       onFocus();
     }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/bold/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","RichTextShortcut","__unstableRichTextInputEvent","formatBold","name","title","bold","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,SACCC,qBADD,EAECC,gBAFD,EAGCC,4BAHD,QAIO,yBAJP;AAKA,SAASC,UAAT,QAA2B,kBAA3B;AAEA,MAAMC,IAAI,GAAG,WAAb;;AACA,MAAMC,KAAK,GAAGP,EAAE,CAAE,MAAF,CAAhB;;AAEA,OAAO,MAAMQ,IAAI,GAAG;AACnBF,EAAAA,IADmB;AAEnBC,EAAAA,KAFmB;AAGnBE,EAAAA,OAAO,EAAE,QAHU;AAInBC,EAAAA,SAAS,EAAE,IAJQ;;AAKnBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEb,YAAY,CAAEY,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX;AAAR,OAAT,CAAd,CAAR;AACA;;AAED,aAASY,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,8BACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGC;AAHT,MADD,EAMC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAC,MADN;AAEC,MAAA,IAAI,EAAGX,UAFR;AAGC,MAAA,KAAK,EAAGE,KAHT;AAIC,MAAA,OAAO,EAAGW,OAJX;AAKC,MAAA,QAAQ,EAAGN,QALZ;AAMC,MAAA,YAAY,EAAC,SANd;AAOC,MAAA,iBAAiB,EAAC;AAPnB,MAND,EAeC,cAAC,4BAAD;AACC,MAAA,SAAS,EAAC,YADX;AAEC,MAAA,OAAO,EAAGI;AAFX,MAfD,CADD;AAsBA;;AArCkB,CAAb","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextToolbarButton,\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\nimport { formatBold } from '@wordpress/icons';\n\nconst name = 'core/bold';\nconst title = __( 'Bold' );\n\nexport const bold = {\n\tname,\n\ttitle,\n\ttagName: 'strong',\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<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"b\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\tname=\"bold\"\n\t\t\t\t\ticon={ formatBold }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tshortcutType=\"primary\"\n\t\t\t\t\tshortcutCharacter=\"b\"\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatBold\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/bold/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","RichTextShortcut","__unstableRichTextInputEvent","formatBold","name","title","bold","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,SACCC,qBADD,EAECC,gBAFD,EAGCC,4BAHD,QAIO,yBAJP;AAKA,SAASC,UAAT,QAA2B,kBAA3B;AAEA,MAAMC,IAAI,GAAG,WAAb;;AACA,MAAMC,KAAK,GAAGP,EAAE,CAAE,MAAF,CAAhB;;AAEA,OAAO,MAAMQ,IAAI,GAAG;AACnBF,EAAAA,IADmB;AAEnBC,EAAAA,KAFmB;AAGnBE,EAAAA,OAAO,EAAE,QAHU;AAInBC,EAAAA,SAAS,EAAE,IAJQ;;AAKnBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEb,YAAY,CAAEY,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACA;;AAED,aAASW,OAAT,GAAmB;AAClBJ,MAAAA,QAAQ,CAAEb,YAAY,CAAEY,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX;AAAR,OAAT,CAAd,CAAR;AACAS,MAAAA,OAAO;AACP;;AAED,WACC,8BACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGC;AAHT,MADD,EAMC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAC,MADN;AAEC,MAAA,IAAI,EAAGX,UAFR;AAGC,MAAA,KAAK,EAAGE,KAHT;AAIC,MAAA,OAAO,EAAGW,OAJX;AAKC,MAAA,QAAQ,EAAGN,QALZ;AAMC,MAAA,YAAY,EAAC,SANd;AAOC,MAAA,iBAAiB,EAAC;AAPnB,MAND,EAeC,cAAC,4BAAD;AACC,MAAA,SAAS,EAAC,YADX;AAEC,MAAA,OAAO,EAAGI;AAFX,MAfD,CADD;AAsBA;;AArCkB,CAAb","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextToolbarButton,\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\nimport { formatBold } from '@wordpress/icons';\n\nconst name = 'core/bold';\nconst title = __( 'Bold' );\n\nexport const bold = {\n\tname,\n\ttitle,\n\ttagName: 'strong',\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\tonChange( toggleFormat( value, { type: name } ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"b\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\tname=\"bold\"\n\t\t\t\t\ticon={ formatBold }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tshortcutType=\"primary\"\n\t\t\t\t\tshortcutCharacter=\"b\"\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatBold\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"]}

package/build-module/code/index.js

@@ -59,7 +59,8 @@ export const code = {
   }) {
     function onClick() {
       onChange(toggleFormat(value, {
-        type: name
+        type: name,
+        title
       }));
       onFocus();
     }
@@ -68,7 +69,8 @@ export const code = {
       icon: codeIcon,
       title: title,
       onClick: onClick,
-      isActive: isActive
+      isActive: isActive,
+      role: "menuitemcheckbox"
     });
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/code/index.js"],"names":["__","toggleFormat","remove","applyFormat","RichTextToolbarButton","code","codeIcon","name","title","tagName","className","__unstableInputRule","value","BACKTICK","start","text","characterBefore","slice","textBefore","indexBefore","lastIndexOf","startIndex","endIndex","type","edit","onChange","onFocus","isActive","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,EAAuBC,MAAvB,EAA+BC,WAA/B,QAAkD,sBAAlD;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,IAAI,IAAIC,QAAjB,QAAiC,kBAAjC;AAEA,MAAMC,IAAI,GAAG,WAAb;;AACA,MAAMC,KAAK,GAAGR,EAAE,CAAE,aAAF,CAAhB;;AAEA,OAAO,MAAMK,IAAI,GAAG;AACnBE,EAAAA,IADmB;AAEnBC,EAAAA,KAFmB;AAGnBC,EAAAA,OAAO,EAAE,MAHU;AAInBC,EAAAA,SAAS,EAAE,IAJQ;;AAKnBC,EAAAA,mBAAmB,CAAEC,KAAF,EAAU;AAC5B,UAAMC,QAAQ,GAAG,GAAjB;AACA,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAkBH,KAAxB;AACA,UAAMI,eAAe,GAAGD,IAAI,CAACE,KAAL,CAAYH,KAAK,GAAG,CAApB,EAAuBA,KAAvB,CAAxB,CAH4B,CAK5B;;AACA,QAAKE,eAAe,KAAKH,QAAzB,EAAoC;AACnC,aAAOD,KAAP;AACA;;AAED,UAAMM,UAAU,GAAGH,IAAI,CAACE,KAAL,CAAY,CAAZ,EAAeH,KAAK,GAAG,CAAvB,CAAnB;AACA,UAAMK,WAAW,GAAGD,UAAU,CAACE,WAAX,CAAwBP,QAAxB,CAApB;;AAEA,QAAKM,WAAW,KAAK,CAAC,CAAtB,EAA0B;AACzB,aAAOP,KAAP;AACA;;AAED,UAAMS,UAAU,GAAGF,WAAnB;AACA,UAAMG,QAAQ,GAAGR,KAAK,GAAG,CAAzB;;AAEA,QAAKO,UAAU,KAAKC,QAApB,EAA+B;AAC9B,aAAOV,KAAP;AACA;;AAEDA,IAAAA,KAAK,GAAGV,MAAM,CAAEU,KAAF,EAASS,UAAT,EAAqBA,UAAU,GAAG,CAAlC,CAAd;AACAT,IAAAA,KAAK,GAAGV,MAAM,CAAEU,KAAF,EAASU,QAAT,EAAmBA,QAAQ,GAAG,CAA9B,CAAd;AACAV,IAAAA,KAAK,GAAGT,WAAW,CAAES,KAAF,EAAS;AAAEW,MAAAA,IAAI,EAAEhB;AAAR,KAAT,EAAyBc,UAAzB,EAAqCC,QAArC,CAAnB;AAEA,WAAOV,KAAP;AACA,GAlCkB;;AAmCnBY,EAAAA,IAAI,CAAE;AAAEZ,IAAAA,KAAF;AAASa,IAAAA,QAAT;AAAmBC,IAAAA,OAAnB;AAA4BC,IAAAA;AAA5B,GAAF,EAA2C;AAC9C,aAASC,OAAT,GAAmB;AAClBH,MAAAA,QAAQ,CAAExB,YAAY,CAAEW,KAAF,EAAS;AAAEW,QAAAA,IAAI,EAAEhB;AAAR,OAAT,CAAd,CAAR;AACAmB,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGpB,QADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGoB,OAHX;AAIC,MAAA,QAAQ,EAAGD;AAJZ,MADD;AAQA;;AAjDkB,CAAb","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat, remove, applyFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { code as codeIcon } from '@wordpress/icons';\n\nconst name = 'core/code';\nconst title = __( 'Inline code' );\n\nexport const code = {\n\tname,\n\ttitle,\n\ttagName: 'code',\n\tclassName: null,\n\t__unstableInputRule( value ) {\n\t\tconst BACKTICK = '`';\n\t\tconst { start, text } = value;\n\t\tconst characterBefore = text.slice( start - 1, start );\n\n\t\t// Quick check the text for the necessary character.\n\t\tif ( characterBefore !== BACKTICK ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tconst textBefore = text.slice( 0, start - 1 );\n\t\tconst indexBefore = textBefore.lastIndexOf( BACKTICK );\n\n\t\tif ( indexBefore === -1 ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tconst startIndex = indexBefore;\n\t\tconst endIndex = start - 2;\n\n\t\tif ( startIndex === endIndex ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tvalue = remove( value, startIndex, startIndex + 1 );\n\t\tvalue = remove( value, endIndex, endIndex + 1 );\n\t\tvalue = applyFormat( value, { type: name }, startIndex, endIndex );\n\n\t\treturn value;\n\t},\n\tedit( { value, onChange, onFocus, isActive } ) {\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={ codeIcon }\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/code/index.js"],"names":["__","toggleFormat","remove","applyFormat","RichTextToolbarButton","code","codeIcon","name","title","tagName","className","__unstableInputRule","value","BACKTICK","start","text","characterBefore","slice","textBefore","indexBefore","lastIndexOf","startIndex","endIndex","type","edit","onChange","onFocus","isActive","onClick"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,EAAuBC,MAAvB,EAA+BC,WAA/B,QAAkD,sBAAlD;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,IAAI,IAAIC,QAAjB,QAAiC,kBAAjC;AAEA,MAAMC,IAAI,GAAG,WAAb;;AACA,MAAMC,KAAK,GAAGR,EAAE,CAAE,aAAF,CAAhB;;AAEA,OAAO,MAAMK,IAAI,GAAG;AACnBE,EAAAA,IADmB;AAEnBC,EAAAA,KAFmB;AAGnBC,EAAAA,OAAO,EAAE,MAHU;AAInBC,EAAAA,SAAS,EAAE,IAJQ;;AAKnBC,EAAAA,mBAAmB,CAAEC,KAAF,EAAU;AAC5B,UAAMC,QAAQ,GAAG,GAAjB;AACA,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAkBH,KAAxB;AACA,UAAMI,eAAe,GAAGD,IAAI,CAACE,KAAL,CAAYH,KAAK,GAAG,CAApB,EAAuBA,KAAvB,CAAxB,CAH4B,CAK5B;;AACA,QAAKE,eAAe,KAAKH,QAAzB,EAAoC;AACnC,aAAOD,KAAP;AACA;;AAED,UAAMM,UAAU,GAAGH,IAAI,CAACE,KAAL,CAAY,CAAZ,EAAeH,KAAK,GAAG,CAAvB,CAAnB;AACA,UAAMK,WAAW,GAAGD,UAAU,CAACE,WAAX,CAAwBP,QAAxB,CAApB;;AAEA,QAAKM,WAAW,KAAK,CAAC,CAAtB,EAA0B;AACzB,aAAOP,KAAP;AACA;;AAED,UAAMS,UAAU,GAAGF,WAAnB;AACA,UAAMG,QAAQ,GAAGR,KAAK,GAAG,CAAzB;;AAEA,QAAKO,UAAU,KAAKC,QAApB,EAA+B;AAC9B,aAAOV,KAAP;AACA;;AAEDA,IAAAA,KAAK,GAAGV,MAAM,CAAEU,KAAF,EAASS,UAAT,EAAqBA,UAAU,GAAG,CAAlC,CAAd;AACAT,IAAAA,KAAK,GAAGV,MAAM,CAAEU,KAAF,EAASU,QAAT,EAAmBA,QAAQ,GAAG,CAA9B,CAAd;AACAV,IAAAA,KAAK,GAAGT,WAAW,CAAES,KAAF,EAAS;AAAEW,MAAAA,IAAI,EAAEhB;AAAR,KAAT,EAAyBc,UAAzB,EAAqCC,QAArC,CAAnB;AAEA,WAAOV,KAAP;AACA,GAlCkB;;AAmCnBY,EAAAA,IAAI,CAAE;AAAEZ,IAAAA,KAAF;AAASa,IAAAA,QAAT;AAAmBC,IAAAA,OAAnB;AAA4BC,IAAAA;AAA5B,GAAF,EAA2C;AAC9C,aAASC,OAAT,GAAmB;AAClBH,MAAAA,QAAQ,CAAExB,YAAY,CAAEW,KAAF,EAAS;AAAEW,QAAAA,IAAI,EAAEhB,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACAkB,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGpB,QADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGoB,OAHX;AAIC,MAAA,QAAQ,EAAGD,QAJZ;AAKC,MAAA,IAAI,EAAC;AALN,MADD;AASA;;AAlDkB,CAAb","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat, remove, applyFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { code as codeIcon } from '@wordpress/icons';\n\nconst name = 'core/code';\nconst title = __( 'Inline code' );\n\nexport const code = {\n\tname,\n\ttitle,\n\ttagName: 'code',\n\tclassName: null,\n\t__unstableInputRule( value ) {\n\t\tconst BACKTICK = '`';\n\t\tconst { start, text } = value;\n\t\tconst characterBefore = text.slice( start - 1, start );\n\n\t\t// Quick check the text for the necessary character.\n\t\tif ( characterBefore !== BACKTICK ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tconst textBefore = text.slice( 0, start - 1 );\n\t\tconst indexBefore = textBefore.lastIndexOf( BACKTICK );\n\n\t\tif ( indexBefore === -1 ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tconst startIndex = indexBefore;\n\t\tconst endIndex = start - 2;\n\n\t\tif ( startIndex === endIndex ) {\n\t\t\treturn value;\n\t\t}\n\n\t\tvalue = remove( value, startIndex, startIndex + 1 );\n\t\tvalue = remove( value, endIndex, endIndex + 1 );\n\t\tvalue = applyFormat( value, { type: name }, startIndex, endIndex );\n\n\t\treturn value;\n\t},\n\tedit( { value, onChange, onFocus, isActive } ) {\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={ codeIcon }\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/italic/index.js

@@ -25,12 +25,15 @@ export const italic = {
   }) {
     function onToggle() {
       onChange(toggleFormat(value, {
-        type: name
+        type: name,
+        title
       }));
     }
 
     function onClick() {
-      onToggle();
+      onChange(toggleFormat(value, {
+        type: name
+      }));
       onFocus();
     }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/italic/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","RichTextShortcut","__unstableRichTextInputEvent","formatItalic","name","title","italic","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,SACCC,qBADD,EAECC,gBAFD,EAGCC,4BAHD,QAIO,yBAJP;AAKA,SAASC,YAAT,QAA6B,kBAA7B;AAEA,MAAMC,IAAI,GAAG,aAAb;;AACA,MAAMC,KAAK,GAAGP,EAAE,CAAE,QAAF,CAAhB;;AAEA,OAAO,MAAMQ,MAAM,GAAG;AACrBF,EAAAA,IADqB;AAErBC,EAAAA,KAFqB;AAGrBE,EAAAA,OAAO,EAAE,IAHY;AAIrBC,EAAAA,SAAS,EAAE,IAJU;;AAKrBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEb,YAAY,CAAEY,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX;AAAR,OAAT,CAAd,CAAR;AACA;;AAED,aAASY,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,8BACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGC;AAHT,MADD,EAMC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAC,QADN;AAEC,MAAA,IAAI,EAAGX,YAFR;AAGC,MAAA,KAAK,EAAGE,KAHT;AAIC,MAAA,OAAO,EAAGW,OAJX;AAKC,MAAA,QAAQ,EAAGN,QALZ;AAMC,MAAA,YAAY,EAAC,SANd;AAOC,MAAA,iBAAiB,EAAC;AAPnB,MAND,EAeC,cAAC,4BAAD;AACC,MAAA,SAAS,EAAC,cADX;AAEC,MAAA,OAAO,EAAGI;AAFX,MAfD,CADD;AAsBA;;AArCoB,CAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextToolbarButton,\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\nimport { formatItalic } from '@wordpress/icons';\n\nconst name = 'core/italic';\nconst title = __( 'Italic' );\n\nexport const italic = {\n\tname,\n\ttitle,\n\ttagName: 'em',\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<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"i\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\tname=\"italic\"\n\t\t\t\t\ticon={ formatItalic }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tshortcutType=\"primary\"\n\t\t\t\t\tshortcutCharacter=\"i\"\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatItalic\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/italic/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","RichTextShortcut","__unstableRichTextInputEvent","formatItalic","name","title","italic","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,SACCC,qBADD,EAECC,gBAFD,EAGCC,4BAHD,QAIO,yBAJP;AAKA,SAASC,YAAT,QAA6B,kBAA7B;AAEA,MAAMC,IAAI,GAAG,aAAb;;AACA,MAAMC,KAAK,GAAGP,EAAE,CAAE,QAAF,CAAhB;;AAEA,OAAO,MAAMQ,MAAM,GAAG;AACrBF,EAAAA,IADqB;AAErBC,EAAAA,KAFqB;AAGrBE,EAAAA,OAAO,EAAE,IAHY;AAIrBC,EAAAA,SAAS,EAAE,IAJU;;AAKrBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,QAAnB;AAA6BC,IAAAA;AAA7B,GAAF,EAA2C;AAC9C,aAASC,QAAT,GAAoB;AACnBF,MAAAA,QAAQ,CAAEb,YAAY,CAAEY,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACA;;AAED,aAASW,OAAT,GAAmB;AAClBJ,MAAAA,QAAQ,CAAEb,YAAY,CAAEY,KAAF,EAAS;AAAEI,QAAAA,IAAI,EAAEX;AAAR,OAAT,CAAd,CAAR;AACAS,MAAAA,OAAO;AACP;;AAED,WACC,8BACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGC;AAHT,MADD,EAMC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAC,QADN;AAEC,MAAA,IAAI,EAAGX,YAFR;AAGC,MAAA,KAAK,EAAGE,KAHT;AAIC,MAAA,OAAO,EAAGW,OAJX;AAKC,MAAA,QAAQ,EAAGN,QALZ;AAMC,MAAA,YAAY,EAAC,SANd;AAOC,MAAA,iBAAiB,EAAC;AAPnB,MAND,EAeC,cAAC,4BAAD;AACC,MAAA,SAAS,EAAC,cADX;AAEC,MAAA,OAAO,EAAGI;AAFX,MAfD,CADD;AAsBA;;AArCoB,CAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextToolbarButton,\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\nimport { formatItalic } from '@wordpress/icons';\n\nconst name = 'core/italic';\nconst title = __( 'Italic' );\n\nexport const italic = {\n\tname,\n\ttitle,\n\ttagName: 'em',\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\tonChange( toggleFormat( value, { type: name } ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"i\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\tname=\"italic\"\n\t\t\t\t\ticon={ formatItalic }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tshortcutType=\"primary\"\n\t\t\t\t\tshortcutCharacter=\"i\"\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatItalic\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"]}

package/build-module/keyboard/index.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/keyboard/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","button","name","title","keyboard","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,MAAT,QAAuB,kBAAvB;AAEA,MAAMC,IAAI,GAAG,eAAb;;AACA,MAAMC,KAAK,GAAGL,EAAE,CAAE,gBAAF,CAAhB;;AAEA,OAAO,MAAMM,QAAQ,GAAG;AACvBF,EAAAA,IADuB;AAEvBC,EAAAA,KAFuB;AAGvBE,EAAAA,OAAO,EAAE,KAHc;AAIvBC,EAAAA,SAAS,EAAE,IAJY;;AAKvBC,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,EAAEX;AAAR,OAAT,CAAd,CAAR;AACA;;AAED,aAASY,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGV,MADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGW,OAHX;AAIC,MAAA,QAAQ,EAAGN;AAJZ,MADD;AAQA;;AAvBsB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { button } from '@wordpress/icons';\n\nconst name = 'core/keyboard';\nconst title = __( 'Keyboard input' );\n\nexport const keyboard = {\n\tname,\n\ttitle,\n\ttagName: 'kbd',\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={ button }\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/keyboard/index.js"],"names":["__","toggleFormat","RichTextToolbarButton","button","name","title","keyboard","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,MAAT,QAAuB,kBAAvB;AAEA,MAAMC,IAAI,GAAG,eAAb;;AACA,MAAMC,KAAK,GAAGL,EAAE,CAAE,gBAAF,CAAhB;;AAEA,OAAO,MAAMM,QAAQ,GAAG;AACvBF,EAAAA,IADuB;AAEvBC,EAAAA,KAFuB;AAGvBE,EAAAA,OAAO,EAAE,KAHc;AAIvBC,EAAAA,SAAS,EAAE,IAJY;;AAKvBC,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,EAAEX,IAAR;AAAcC,QAAAA;AAAd,OAAT,CAAd,CAAR;AACA;;AAED,aAASW,OAAT,GAAmB;AAClBF,MAAAA,QAAQ;AACRD,MAAAA,OAAO;AACP;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAGV,MADR;AAEC,MAAA,KAAK,EAAGE,KAFT;AAGC,MAAA,OAAO,EAAGW,OAHX;AAIC,MAAA,QAAQ,EAAGN,QAJZ;AAKC,MAAA,IAAI,EAAC;AALN,MADD;AASA;;AAxBsB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { button } from '@wordpress/icons';\n\nconst name = 'core/keyboard';\nconst title = __( 'Keyboard input' );\n\nexport const keyboard = {\n\tname,\n\ttitle,\n\ttagName: 'kbd',\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={ button }\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/link/inline.js

@@ -7,14 +7,14 @@ 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 { 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({
@@ -27,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
@@ -35,6 +38,7 @@ function InlineLinkUI({
    *
    * @type {[Object|undefined,Function]}
    */
+
   const [nextLinkValue, setNextLinkValue] = useState();
   const {
     createPageEntity,
@@ -56,6 +60,7 @@ function InlineLinkUI({
     type: activeAttributes.type,
     id: activeAttributes.id,
     opensInNewTab: activeAttributes.target === '_blank',
+    title: richTextText,
     ...nextLinkValue
   };
 
@@ -88,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);
@@ -167,9 +196,31 @@ function InlineLinkUI({
     hasRichPreviews: true,
     createSuggestion: createPageEntity && handleCreate,
     withCreateSuggestion: userCanCreatePages,
-    createSuggestionButtonText: createButtonText
+    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","createInterpolateElement","__","sprintf","withSpokenMessages","Popover","prependHTTP","create","insert","isCollapsed","applyFormat","useAnchorRef","removeFormat","__experimentalLinkControl","LinkControl","store","blockEditorStore","useSelect","createLinkFormat","isValidHref","link","settings","InlineLinkUI","isActive","activeAttributes","addingLink","value","onChange","speak","stopAddingLink","contentRef","nextLinkValue","setNextLinkValue","createPageEntity","userCanCreatePages","select","getSettings","_settings","__experimentalCreatePageEntity","__experimentalUserCanCreatePages","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","handleCreate","pageTitle","page","status","rendered","kind","createButtonText","searchTerm","mark","current"],"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} 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 } 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 { 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\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\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/>\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