@wordpress/format-library 4.27.1 → 4.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/bold/index.js +1 -2
- package/build/bold/index.js.map +1 -1
- package/build/code/index.js +1 -2
- package/build/code/index.js.map +1 -1
- package/build/default-formats.js +1 -2
- package/build/default-formats.js.map +1 -1
- package/build/default-formats.native.js +1 -2
- package/build/default-formats.native.js.map +1 -1
- package/build/image/index.js +1 -2
- package/build/image/index.js.map +1 -1
- package/build/italic/index.js +1 -2
- package/build/italic/index.js.map +1 -1
- package/build/keyboard/index.js +1 -2
- package/build/keyboard/index.js.map +1 -1
- package/build/language/index.js +1 -2
- package/build/language/index.js.map +1 -1
- package/build/link/index.js +84 -24
- package/build/link/index.js.map +1 -1
- package/build/link/index.native.js +1 -2
- package/build/link/index.native.js.map +1 -1
- package/build/link/inline.js +59 -64
- package/build/link/inline.js.map +1 -1
- package/build/link/modal-screens/link-picker-screen.native.js +1 -2
- package/build/link/modal-screens/link-picker-screen.native.js.map +1 -1
- package/build/link/modal-screens/link-settings-screen.native.js +1 -2
- package/build/link/modal-screens/link-settings-screen.native.js.map +1 -1
- package/build/link/modal-screens/screens.native.js +1 -2
- package/build/link/modal-screens/screens.native.js.map +1 -1
- package/build/link/modal.native.js +1 -2
- package/build/link/modal.native.js.map +1 -1
- package/build/link/use-link-instance-key.js +1 -2
- package/build/link/use-link-instance-key.js.map +1 -1
- package/build/strikethrough/index.js +1 -2
- package/build/strikethrough/index.js.map +1 -1
- package/build/subscript/index.js +1 -2
- package/build/subscript/index.js.map +1 -1
- package/build/superscript/index.js +1 -2
- package/build/superscript/index.js.map +1 -1
- package/build/text-color/index.js +4 -6
- package/build/text-color/index.js.map +1 -1
- package/build/text-color/index.native.js +1 -2
- package/build/text-color/index.native.js.map +1 -1
- package/build/underline/index.js +1 -2
- package/build/underline/index.js.map +1 -1
- package/build/unknown/index.js +1 -2
- package/build/unknown/index.js.map +1 -1
- package/build-module/link/index.js +85 -24
- package/build-module/link/index.js.map +1 -1
- package/build-module/link/inline.js +54 -58
- package/build-module/link/inline.js.map +1 -1
- package/package.json +14 -14
- package/src/link/index.js +95 -35
- package/src/link/inline.js +65 -73
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_element","_blockEditor","_icons","_richText","_inline","_interopRequireWildcard","_getRequireWildcardCache","
|
|
1
|
+
{"version":3,"names":["_i18n","require","_element","_blockEditor","_icons","_richText","_inline","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","transparentValue","exports","name","title","__","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","useSettings","isAddingColor","setIsAddingColor","useState","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","current","getActiveColors","hasColorsToChoose","length","_react","createElement","Fragment","RichTextToolbarButton","className","icon","Icon","keys","textColorIcon","colorIcon","onClick","removeFormat","role","onClose","textColor","tagName","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColors } from './inline';\n\nexport const transparentValue = 'rgba(0, 0, 0, 0)';\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 === transparentValue &&\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 === transparentValue\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, colors = EMPTY_ARRAY ] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette'\n\t);\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\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 = colors.length || ! 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={\n\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t}\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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}
|
|
@@ -123,7 +123,7 @@ function TextColorEdit({
|
|
|
123
123
|
contentRef: contentRef
|
|
124
124
|
}));
|
|
125
125
|
}
|
|
126
|
-
const textColor = {
|
|
126
|
+
const textColor = exports.textColor = {
|
|
127
127
|
name,
|
|
128
128
|
title,
|
|
129
129
|
tagName: 'mark',
|
|
@@ -134,5 +134,4 @@ const textColor = {
|
|
|
134
134
|
},
|
|
135
135
|
edit: TextColorEdit
|
|
136
136
|
};
|
|
137
|
-
exports.textColor = textColor;
|
|
138
137
|
//# sourceMappingURL=index.native.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inline","_inline2","_interopRequireDefault","_style","name","title","__","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","onPressButton","removeFormat","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","_react","createElement","Fragment","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","default","onClose","textColor","tagName","className","attributes","class","edit"
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inline","_inline2","_interopRequireDefault","_style","name","title","__","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","onPressButton","removeFormat","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","_react","createElement","Fragment","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","default","onClose","textColor","exports","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getActiveColors } from './inline.js';\nimport { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\n\n\tif ( property === 'background-color' ) {\n\t\tconst { backgroundColor, baseColors } = style;\n\n\t\tif ( backgroundColor !== 'transparent' ) {\n\t\t\treturn backgroundColor;\n\t\t} else if ( baseColors && baseColors?.color?.background ) {\n\t\t\treturn baseColors?.color?.background;\n\t\t}\n\n\t\treturn 'transparent';\n\t}\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: getComputedStyleProperty(\n\t\t\telement,\n\t\t\t'background-color'\n\t\t),\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst [ allowCustomControl ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! allowCustomControl;\n\n\tconst onPressButton = useCallback( () => {\n\t\tif ( hasColorsToChoose ) {\n\t\t\tenableIsAddingColor();\n\t\t} else {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t}\n\t}, [ hasColorsToChoose, value ] );\n\n\tconst outlineStyle = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\n\t];\n\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\tconst isActiveStyle = {\n\t\t...colorIndicatorStyle,\n\t\t...( ! colorIndicatorStyle?.backgroundColor\n\t\t\t? { backgroundColor: 'transparent' }\n\t\t\t: {} ),\n\t\t...styles[ 'components-inline-color--is-active' ],\n\t};\n\n\tconst customContainerStyles =\n\t\tstyles[ 'components-inline-color__button-container' ];\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t{ isActive && (\n\t\t\t\t\t\t<View style={ outlineStyle } pointerEvents=\"none\" />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tname=\"text-color\"\n\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tcolorIndicatorStyle?.color && {\n\t\t\t\t\t\t\t\t\t\tcolor: colorIndicatorStyle.color,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\textraProps={ {\n\t\t\t\t\t\t\tisActiveStyle,\n\t\t\t\t\t\t\tcustomContainerStyles,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\t\t\tonClick={ onPressButton }\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}
|
package/build/underline/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var _blockEditor = require("@wordpress/block-editor");
|
|
|
14
14
|
|
|
15
15
|
const name = 'core/underline';
|
|
16
16
|
const title = (0, _i18n.__)('Underline');
|
|
17
|
-
const underline = {
|
|
17
|
+
const underline = exports.underline = {
|
|
18
18
|
name,
|
|
19
19
|
title,
|
|
20
20
|
tagName: 'span',
|
|
@@ -45,5 +45,4 @@ const underline = {
|
|
|
45
45
|
}));
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
|
-
exports.underline = underline;
|
|
49
48
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_richText","_blockEditor","name","title","__","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","toggleFormat","type","_react","createElement","Fragment","RichTextShortcut","character","onUse","__unstableRichTextInputEvent","inputType","onInput"
|
|
1
|
+
{"version":3,"names":["_i18n","require","_richText","_blockEditor","name","title","__","underline","exports","tagName","className","attributes","style","edit","value","onChange","onToggle","toggleFormat","type","_react","createElement","Fragment","RichTextShortcut","character","onUse","__unstableRichTextInputEvent","inputType","onInput"],"sources":["@wordpress/format-library/src/underline/index.js"],"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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AALA;AACA;AACA;;AAQA,MAAMG,IAAI,GAAG,gBAAgB;AAC7B,MAAMC,KAAK,GAAG,IAAAC,QAAE,EAAE,WAAY,CAAC;AAExB,MAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG;EACxBH,IAAI;EACJC,KAAK;EACLI,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE;IACXC,KAAK,EAAE;EACR,CAAC;EACDC,IAAIA,CAAE;IAAEC,KAAK;IAAEC;EAAS,CAAC,EAAG;IAC3B,MAAMC,QAAQ,GAAGA,CAAA,KAAM;MACtBD,QAAQ,CACP,IAAAE,sBAAY,EAAEH,KAAK,EAAE;QACpBI,IAAI,EAAEd,IAAI;QACVO,UAAU,EAAE;UACXC,KAAK,EAAE;QACR,CAAC;QACDP;MACD,CAAE,CACH,CAAC;IACF,CAAC;IAED,OACC,IAAAc,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAmB,gBAAgB;MAChBJ,IAAI,EAAC,SAAS;MACdK,SAAS,EAAC,GAAG;MACbC,KAAK,EAAGR;IAAU,CAClB,CAAC,EACF,IAAAG,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAsB,4BAA4B;MAC5BC,SAAS,EAAC,iBAAiB;MAC3BC,OAAO,EAAGX;IAAU,CACpB,CACA,CAAC;EAEL;AACD,CAAC"}
|
package/build/unknown/index.js
CHANGED
|
@@ -15,7 +15,7 @@ var _icons = require("@wordpress/icons");
|
|
|
15
15
|
|
|
16
16
|
const name = 'core/unknown';
|
|
17
17
|
const title = (0, _i18n.__)('Clear Unknown Formatting');
|
|
18
|
-
const unknown = {
|
|
18
|
+
const unknown = exports.unknown = {
|
|
19
19
|
name,
|
|
20
20
|
title,
|
|
21
21
|
tagName: '*',
|
|
@@ -46,5 +46,4 @@ const unknown = {
|
|
|
46
46
|
});
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
exports.unknown = unknown;
|
|
50
49
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_richText","_blockEditor","_icons","name","title","__","unknown","tagName","className","edit","isActive","value","onChange","onFocus","onClick","removeFormat","selectedValue","slice","hasUnknownFormats","formats","some","format","type","_react","createElement","RichTextToolbarButton","icon","help"
|
|
1
|
+
{"version":3,"names":["_i18n","require","_richText","_blockEditor","_icons","name","title","__","unknown","exports","tagName","className","edit","isActive","value","onChange","onFocus","onClick","removeFormat","selectedValue","slice","hasUnknownFormats","formats","some","format","type","_react","createElement","RichTextToolbarButton","icon","help"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\tconst selectedValue = slice( value );\n\t\tconst hasUnknownFormats = selectedValue.formats.some( ( formats ) => {\n\t\t\treturn formats.some( ( format ) => format.type === name );\n\t\t} );\n\n\t\tif ( ! isActive && ! hasUnknownFormats ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ true }\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA,MAAMI,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;AAEvC,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG;EACtBH,IAAI;EACJC,KAAK;EACLI,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,SAASC,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAE,IAAAG,sBAAY,EAAEJ,KAAK,EAAET,IAAK,CAAE,CAAC;MACvCW,OAAO,CAAC,CAAC;IACV;IAEA,MAAMG,aAAa,GAAG,IAAAC,eAAK,EAAEN,KAAM,CAAC;IACpC,MAAMO,iBAAiB,GAAGF,aAAa,CAACG,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;MACpE,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKpB,IAAK,CAAC;IAC1D,CAAE,CAAC;IAEH,IAAK,CAAEQ,QAAQ,IAAI,CAAEQ,iBAAiB,EAAG;MACxC,OAAO,IAAI;IACZ;IAEA,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACxB,YAAA,CAAAyB,qBAAqB;MACrBvB,IAAI,EAAC,SAAS;MACdwB,IAAI,EAAGC,WAAM;MACbxB,KAAK,EAAGA,KAAO;MACfW,OAAO,EAAGA,OAAS;MACnBJ,QAAQ,EAAG;IAAM,CACjB,CAAC;EAEJ;AACD,CAAC"}
|
|
@@ -3,12 +3,12 @@ import { createElement, Fragment } from "react";
|
|
|
3
3
|
* WordPress dependencies
|
|
4
4
|
*/
|
|
5
5
|
import { __ } from '@wordpress/i18n';
|
|
6
|
-
import { useState } from '@wordpress/element';
|
|
6
|
+
import { useState, useLayoutEffect } from '@wordpress/element';
|
|
7
7
|
import { getTextContent, applyFormat, removeFormat, slice, isCollapsed, insert, create } from '@wordpress/rich-text';
|
|
8
8
|
import { isURL, isEmail } from '@wordpress/url';
|
|
9
9
|
import { RichTextToolbarButton, RichTextShortcut } from '@wordpress/block-editor';
|
|
10
10
|
import { decodeEntities } from '@wordpress/html-entities';
|
|
11
|
-
import { link as linkIcon
|
|
11
|
+
import { link as linkIcon } from '@wordpress/icons';
|
|
12
12
|
import { speak } from '@wordpress/a11y';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -27,16 +27,51 @@ function Edit({
|
|
|
27
27
|
contentRef
|
|
28
28
|
}) {
|
|
29
29
|
const [addingLink, setAddingLink] = useState(false);
|
|
30
|
-
|
|
30
|
+
// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.
|
|
31
|
+
const [openedBy, setOpenedBy] = useState(null);
|
|
32
|
+
useLayoutEffect(() => {
|
|
33
|
+
const editableContentElement = contentRef.current;
|
|
34
|
+
if (!editableContentElement) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Close the Link popover if there is no active selection
|
|
39
|
+
// after the link was added - this can happen if the user
|
|
40
|
+
// adds a link without any text selected.
|
|
41
|
+
// We assume that if there is no active selection after
|
|
42
|
+
// link insertion there are no active formats.
|
|
43
|
+
if (!value.activeFormats) {
|
|
44
|
+
editableContentElement.focus();
|
|
45
|
+
setAddingLink(false);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
function handleClick(event) {
|
|
49
|
+
// There is a situation whereby there is an existing link in the rich text
|
|
50
|
+
// and the user clicks on the leftmost edge of that link and fails to activate
|
|
51
|
+
// the link format, but the click event still fires on the `<a>` element.
|
|
52
|
+
// This causes the `addingLink` state to be set to `true` and the link UI
|
|
53
|
+
// to be rendered in "creating" mode. We need to check isActive to see if
|
|
54
|
+
// we have an active link format.
|
|
55
|
+
if (event.target.tagName !== 'A' || !isActive) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
setAddingLink(true);
|
|
59
|
+
}
|
|
60
|
+
editableContentElement.addEventListener('click', handleClick);
|
|
61
|
+
return () => {
|
|
62
|
+
editableContentElement.removeEventListener('click', handleClick);
|
|
63
|
+
};
|
|
64
|
+
}, [contentRef, isActive, addingLink, value]);
|
|
65
|
+
function addLink(target) {
|
|
31
66
|
const text = getTextContent(slice(value));
|
|
32
|
-
if (text && isURL(text) && isValidHref(text)) {
|
|
67
|
+
if (!isActive && text && isURL(text) && isValidHref(text)) {
|
|
33
68
|
onChange(applyFormat(value, {
|
|
34
69
|
type: name,
|
|
35
70
|
attributes: {
|
|
36
71
|
url: text
|
|
37
72
|
}
|
|
38
73
|
}));
|
|
39
|
-
} else if (text && isEmail(text)) {
|
|
74
|
+
} else if (!isActive && text && isEmail(text)) {
|
|
40
75
|
onChange(applyFormat(value, {
|
|
41
76
|
type: name,
|
|
42
77
|
attributes: {
|
|
@@ -44,14 +79,48 @@ function Edit({
|
|
|
44
79
|
}
|
|
45
80
|
}));
|
|
46
81
|
} else {
|
|
82
|
+
if (target) {
|
|
83
|
+
setOpenedBy(target);
|
|
84
|
+
}
|
|
47
85
|
setAddingLink(true);
|
|
48
86
|
}
|
|
49
87
|
}
|
|
50
|
-
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Runs when the popover is closed via escape keypress, unlinking the selected text,
|
|
91
|
+
* but _not_ on a click outside the popover. onFocusOutside handles that.
|
|
92
|
+
*/
|
|
93
|
+
function stopAddingLink() {
|
|
94
|
+
// Don't let the click handler on the toolbar button trigger again.
|
|
95
|
+
|
|
96
|
+
// There are two places for us to return focus to on Escape keypress:
|
|
97
|
+
// 1. The rich text field.
|
|
98
|
+
// 2. The toolbar button.
|
|
99
|
+
|
|
100
|
+
// The toolbar button is the only one we need to handle returning focus to.
|
|
101
|
+
// Otherwise, we rely on the passed in onFocus to return focus to the rich text field.
|
|
102
|
+
|
|
103
|
+
// Close the popover
|
|
51
104
|
setAddingLink(false);
|
|
52
|
-
|
|
105
|
+
// Return focus to the toolbar button or the rich text field
|
|
106
|
+
if (openedBy?.tagName === 'BUTTON') {
|
|
107
|
+
openedBy.focus();
|
|
108
|
+
} else {
|
|
53
109
|
onFocus();
|
|
54
110
|
}
|
|
111
|
+
// Remove the openedBy state
|
|
112
|
+
setOpenedBy(null);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// Test for this:
|
|
116
|
+
// 1. Click on the link button
|
|
117
|
+
// 2. Click the Options button in the top right of header
|
|
118
|
+
// 3. Focus should be in the dropdown of the Options button
|
|
119
|
+
// 4. Press Escape
|
|
120
|
+
// 5. Focus should be on the Options button
|
|
121
|
+
function onFocusOutside() {
|
|
122
|
+
setAddingLink(false);
|
|
123
|
+
setOpenedBy(null);
|
|
55
124
|
}
|
|
56
125
|
function onRemoveFormat() {
|
|
57
126
|
onChange(removeFormat(value, name));
|
|
@@ -65,29 +134,21 @@ function Edit({
|
|
|
65
134
|
type: "primaryShift",
|
|
66
135
|
character: "k",
|
|
67
136
|
onUse: onRemoveFormat
|
|
68
|
-
}),
|
|
69
|
-
name: "link",
|
|
70
|
-
icon: linkOff,
|
|
71
|
-
title: __('Unlink'),
|
|
72
|
-
onClick: onRemoveFormat,
|
|
73
|
-
isActive: isActive,
|
|
74
|
-
shortcutType: "primaryShift",
|
|
75
|
-
shortcutCharacter: "k",
|
|
76
|
-
"aria-haspopup": "true",
|
|
77
|
-
"aria-expanded": addingLink || isActive
|
|
78
|
-
}), !isActive && createElement(RichTextToolbarButton, {
|
|
137
|
+
}), createElement(RichTextToolbarButton, {
|
|
79
138
|
name: "link",
|
|
80
139
|
icon: linkIcon,
|
|
81
|
-
title: title,
|
|
82
|
-
onClick:
|
|
83
|
-
|
|
140
|
+
title: isActive ? __('Link') : title,
|
|
141
|
+
onClick: event => {
|
|
142
|
+
addLink(event.currentTarget);
|
|
143
|
+
},
|
|
144
|
+
isActive: isActive || addingLink,
|
|
84
145
|
shortcutType: "primary",
|
|
85
146
|
shortcutCharacter: "k",
|
|
86
147
|
"aria-haspopup": "true",
|
|
87
|
-
"aria-expanded": addingLink
|
|
88
|
-
}),
|
|
89
|
-
addingLink: addingLink,
|
|
148
|
+
"aria-expanded": addingLink
|
|
149
|
+
}), addingLink && createElement(InlineLinkUI, {
|
|
90
150
|
stopAddingLink: stopAddingLink,
|
|
151
|
+
onFocusOutside: onFocusOutside,
|
|
91
152
|
isActive: isActive,
|
|
92
153
|
activeAttributes: activeAttributes,
|
|
93
154
|
value: value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","useState","getTextContent","applyFormat","removeFormat","slice","isCollapsed","insert","create","isURL","isEmail","RichTextToolbarButton","RichTextShortcut","decodeEntities","link","linkIcon","linkOff","speak","InlineLinkUI","isValidHref","name","title","Edit","isActive","activeAttributes","value","onChange","onFocus","contentRef","addingLink","setAddingLink","addLink","text","type","attributes","url","stopAddingLink","returnFocus","onRemoveFormat","createElement","Fragment","character","onUse","icon","onClick","shortcutType","shortcutCharacter","tagName","className","id","_id","target","rel","__unstablePasteRule","html","plainText","pastedText","replace","trim","test","window","console","log","format","length","edit"],"sources":["@wordpress/format-library/src/link/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport {\n\tgetTextContent,\n\tapplyFormat,\n\tremoveFormat,\n\tslice,\n\tisCollapsed,\n\tinsert,\n\tcreate,\n} from '@wordpress/rich-text';\nimport { isURL, isEmail } from '@wordpress/url';\nimport {\n\tRichTextToolbarButton,\n\tRichTextShortcut,\n} from '@wordpress/block-editor';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { link as linkIcon, linkOff } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport InlineLinkUI from './inline';\nimport { isValidHref } from './utils';\n\nconst name = 'core/link';\nconst title = __( 'Link' );\n\nfunction Edit( {\n\tisActive,\n\tactiveAttributes,\n\tvalue,\n\tonChange,\n\tonFocus,\n\tcontentRef,\n} ) {\n\tconst [ addingLink, setAddingLink ] = useState( false );\n\n\tfunction addLink() {\n\t\tconst text = getTextContent( slice( value ) );\n\n\t\tif ( text && isURL( text ) && isValidHref( text ) ) {\n\t\t\tonChange(\n\t\t\t\tapplyFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: { url: text },\n\t\t\t\t} )\n\t\t\t);\n\t\t} else if ( text && isEmail( text ) ) {\n\t\t\tonChange(\n\t\t\t\tapplyFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: { url: `mailto:${ text }` },\n\t\t\t\t} )\n\t\t\t);\n\t\t} else {\n\t\t\tsetAddingLink( true );\n\t\t}\n\t}\n\n\tfunction stopAddingLink( returnFocus = true ) {\n\t\tsetAddingLink( false );\n\t\tif ( returnFocus ) {\n\t\t\tonFocus();\n\t\t}\n\t}\n\n\tfunction onRemoveFormat() {\n\t\tonChange( removeFormat( value, name ) );\n\t\tspeak( __( 'Link removed.' ), 'assertive' );\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextShortcut type=\"primary\" character=\"k\" onUse={ addLink } />\n\t\t\t<RichTextShortcut\n\t\t\t\ttype=\"primaryShift\"\n\t\t\t\tcharacter=\"k\"\n\t\t\t\tonUse={ onRemoveFormat }\n\t\t\t/>\n\t\t\t{ isActive && (\n\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\tname=\"link\"\n\t\t\t\t\ticon={ linkOff }\n\t\t\t\t\ttitle={ __( 'Unlink' ) }\n\t\t\t\t\tonClick={ onRemoveFormat }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tshortcutType=\"primaryShift\"\n\t\t\t\t\tshortcutCharacter=\"k\"\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\taria-expanded={ addingLink || isActive }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! isActive && (\n\t\t\t\t<RichTextToolbarButton\n\t\t\t\t\tname=\"link\"\n\t\t\t\t\ticon={ linkIcon }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tonClick={ addLink }\n\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\tshortcutType=\"primary\"\n\t\t\t\t\tshortcutCharacter=\"k\"\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\taria-expanded={ addingLink || isActive }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( addingLink || isActive ) && (\n\t\t\t\t<InlineLinkUI\n\t\t\t\t\taddingLink={ addingLink }\n\t\t\t\t\tstopAddingLink={ stopAddingLink }\n\t\t\t\t\tisActive={ isActive }\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 link = {\n\tname,\n\ttitle,\n\ttagName: 'a',\n\tclassName: null,\n\tattributes: {\n\t\turl: 'href',\n\t\ttype: 'data-type',\n\t\tid: 'data-id',\n\t\t_id: 'id',\n\t\ttarget: 'target',\n\t\trel: 'rel',\n\t},\n\t__unstablePasteRule( value, { html, plainText } ) {\n\t\tconst pastedText = ( html || plainText )\n\t\t\t.replace( /<[^>]+>/g, '' )\n\t\t\t.trim();\n\n\t\t// A URL was pasted, turn the selection into a link.\n\t\t// For the link pasting feature, allow only http(s) protocols.\n\t\tif ( ! isURL( pastedText ) || ! /^https?:/.test( pastedText ) ) {\n\t\t\treturn value;\n\t\t}\n\n\t\t// Allows us to ask for this information when we get a report.\n\t\twindow.console.log( 'Created link:\\n\\n', pastedText );\n\n\t\tconst format = {\n\t\t\ttype: name,\n\t\t\tattributes: {\n\t\t\t\turl: decodeEntities( pastedText ),\n\t\t\t},\n\t\t};\n\n\t\tif ( isCollapsed( value ) ) {\n\t\t\treturn insert(\n\t\t\t\tvalue,\n\t\t\t\tapplyFormat(\n\t\t\t\t\tcreate( { text: plainText } ),\n\t\t\t\t\tformat,\n\t\t\t\t\t0,\n\t\t\t\t\tplainText.length\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn applyFormat( value, format );\n\t},\n\tedit: Edit,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["__","useState","useLayoutEffect","getTextContent","applyFormat","removeFormat","slice","isCollapsed","insert","create","isURL","isEmail","RichTextToolbarButton","RichTextShortcut","decodeEntities","link","linkIcon","speak","InlineLinkUI","isValidHref","name","title","Edit","isActive","activeAttributes","value","onChange","onFocus","contentRef","addingLink","setAddingLink","openedBy","setOpenedBy","editableContentElement","current","activeFormats","focus","handleClick","event","target","tagName","addEventListener","removeEventListener","addLink","text","type","attributes","url","stopAddingLink","onFocusOutside","onRemoveFormat","createElement","Fragment","character","onUse","icon","onClick","currentTarget","shortcutType","shortcutCharacter","className","id","_id","rel","__unstablePasteRule","html","plainText","pastedText","replace","trim","test","window","console","log","format","length","edit"],"sources":["@wordpress/format-library/src/link/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport {\n\tgetTextContent,\n\tapplyFormat,\n\tremoveFormat,\n\tslice,\n\tisCollapsed,\n\tinsert,\n\tcreate,\n} from '@wordpress/rich-text';\nimport { isURL, isEmail } from '@wordpress/url';\nimport {\n\tRichTextToolbarButton,\n\tRichTextShortcut,\n} from '@wordpress/block-editor';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { link as linkIcon } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport InlineLinkUI from './inline';\nimport { isValidHref } from './utils';\n\nconst name = 'core/link';\nconst title = __( 'Link' );\n\nfunction Edit( {\n\tisActive,\n\tactiveAttributes,\n\tvalue,\n\tonChange,\n\tonFocus,\n\tcontentRef,\n} ) {\n\tconst [ addingLink, setAddingLink ] = useState( false );\n\t// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.\n\tconst [ openedBy, setOpenedBy ] = useState( null );\n\n\tuseLayoutEffect( () => {\n\t\tconst editableContentElement = contentRef.current;\n\t\tif ( ! editableContentElement ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Close the Link popover if there is no active selection\n\t\t// after the link was added - this can happen if the user\n\t\t// adds a link without any text selected.\n\t\t// We assume that if there is no active selection after\n\t\t// link insertion there are no active formats.\n\t\tif ( ! value.activeFormats ) {\n\t\t\teditableContentElement.focus();\n\t\t\tsetAddingLink( false );\n\t\t\treturn;\n\t\t}\n\n\t\tfunction handleClick( event ) {\n\t\t\t// There is a situation whereby there is an existing link in the rich text\n\t\t\t// and the user clicks on the leftmost edge of that link and fails to activate\n\t\t\t// the link format, but the click event still fires on the `<a>` element.\n\t\t\t// This causes the `addingLink` state to be set to `true` and the link UI\n\t\t\t// to be rendered in \"creating\" mode. We need to check isActive to see if\n\t\t\t// we have an active link format.\n\t\t\tif ( event.target.tagName !== 'A' || ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetAddingLink( true );\n\t\t}\n\n\t\teditableContentElement.addEventListener( 'click', handleClick );\n\n\t\treturn () => {\n\t\t\teditableContentElement.removeEventListener( 'click', handleClick );\n\t\t};\n\t}, [ contentRef, isActive, addingLink, value ] );\n\n\tfunction addLink( target ) {\n\t\tconst text = getTextContent( slice( value ) );\n\n\t\tif ( ! isActive && text && isURL( text ) && isValidHref( text ) ) {\n\t\t\tonChange(\n\t\t\t\tapplyFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: { url: text },\n\t\t\t\t} )\n\t\t\t);\n\t\t} else if ( ! isActive && text && isEmail( text ) ) {\n\t\t\tonChange(\n\t\t\t\tapplyFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: { url: `mailto:${ text }` },\n\t\t\t\t} )\n\t\t\t);\n\t\t} else {\n\t\t\tif ( target ) {\n\t\t\t\tsetOpenedBy( target );\n\t\t\t}\n\t\t\tsetAddingLink( true );\n\t\t}\n\t}\n\n\t/**\n\t * Runs when the popover is closed via escape keypress, unlinking the selected text,\n\t * but _not_ on a click outside the popover. onFocusOutside handles that.\n\t */\n\tfunction stopAddingLink() {\n\t\t// Don't let the click handler on the toolbar button trigger again.\n\n\t\t// There are two places for us to return focus to on Escape keypress:\n\t\t// 1. The rich text field.\n\t\t// 2. The toolbar button.\n\n\t\t// The toolbar button is the only one we need to handle returning focus to.\n\t\t// Otherwise, we rely on the passed in onFocus to return focus to the rich text field.\n\n\t\t// Close the popover\n\t\tsetAddingLink( false );\n\t\t// Return focus to the toolbar button or the rich text field\n\t\tif ( openedBy?.tagName === 'BUTTON' ) {\n\t\t\topenedBy.focus();\n\t\t} else {\n\t\t\tonFocus();\n\t\t}\n\t\t// Remove the openedBy state\n\t\tsetOpenedBy( null );\n\t}\n\n\t// Test for this:\n\t// 1. Click on the link button\n\t// 2. Click the Options button in the top right of header\n\t// 3. Focus should be in the dropdown of the Options button\n\t// 4. Press Escape\n\t// 5. Focus should be on the Options button\n\tfunction onFocusOutside() {\n\t\tsetAddingLink( false );\n\t\tsetOpenedBy( null );\n\t}\n\n\tfunction onRemoveFormat() {\n\t\tonChange( removeFormat( value, name ) );\n\t\tspeak( __( 'Link removed.' ), 'assertive' );\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextShortcut type=\"primary\" character=\"k\" onUse={ addLink } />\n\t\t\t<RichTextShortcut\n\t\t\t\ttype=\"primaryShift\"\n\t\t\t\tcharacter=\"k\"\n\t\t\t\tonUse={ onRemoveFormat }\n\t\t\t/>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"link\"\n\t\t\t\ticon={ linkIcon }\n\t\t\t\ttitle={ isActive ? __( 'Link' ) : title }\n\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\taddLink( event.currentTarget );\n\t\t\t\t} }\n\t\t\t\tisActive={ isActive || addingLink }\n\t\t\t\tshortcutType=\"primary\"\n\t\t\t\tshortcutCharacter=\"k\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ addingLink }\n\t\t\t/>\n\t\t\t{ addingLink && (\n\t\t\t\t<InlineLinkUI\n\t\t\t\t\tstopAddingLink={ stopAddingLink }\n\t\t\t\t\tonFocusOutside={ onFocusOutside }\n\t\t\t\t\tisActive={ isActive }\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 link = {\n\tname,\n\ttitle,\n\ttagName: 'a',\n\tclassName: null,\n\tattributes: {\n\t\turl: 'href',\n\t\ttype: 'data-type',\n\t\tid: 'data-id',\n\t\t_id: 'id',\n\t\ttarget: 'target',\n\t\trel: 'rel',\n\t},\n\t__unstablePasteRule( value, { html, plainText } ) {\n\t\tconst pastedText = ( html || plainText )\n\t\t\t.replace( /<[^>]+>/g, '' )\n\t\t\t.trim();\n\n\t\t// A URL was pasted, turn the selection into a link.\n\t\t// For the link pasting feature, allow only http(s) protocols.\n\t\tif ( ! isURL( pastedText ) || ! /^https?:/.test( pastedText ) ) {\n\t\t\treturn value;\n\t\t}\n\n\t\t// Allows us to ask for this information when we get a report.\n\t\twindow.console.log( 'Created link:\\n\\n', pastedText );\n\n\t\tconst format = {\n\t\t\ttype: name,\n\t\t\tattributes: {\n\t\t\t\turl: decodeEntities( pastedText ),\n\t\t\t},\n\t\t};\n\n\t\tif ( isCollapsed( value ) ) {\n\t\t\treturn insert(\n\t\t\t\tvalue,\n\t\t\t\tapplyFormat(\n\t\t\t\t\tcreate( { text: plainText } ),\n\t\t\t\t\tformat,\n\t\t\t\t\t0,\n\t\t\t\t\tplainText.length\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\n\t\treturn applyFormat( value, format );\n\t},\n\tedit: Edit,\n};\n"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { createElement } from "react";
|
|
|
2
2
|
/**
|
|
3
3
|
* WordPress dependencies
|
|
4
4
|
*/
|
|
5
|
-
import { useMemo,
|
|
5
|
+
import { useMemo, createInterpolateElement } from '@wordpress/element';
|
|
6
6
|
import { __, sprintf } from '@wordpress/i18n';
|
|
7
7
|
import { speak } from '@wordpress/a11y';
|
|
8
8
|
import { Popover } from '@wordpress/components';
|
|
@@ -23,9 +23,9 @@ const LINK_SETTINGS = [...LinkControl.DEFAULT_LINK_SETTINGS, {
|
|
|
23
23
|
function InlineLinkUI({
|
|
24
24
|
isActive,
|
|
25
25
|
activeAttributes,
|
|
26
|
-
addingLink,
|
|
27
26
|
value,
|
|
28
27
|
onChange,
|
|
28
|
+
onFocusOutside,
|
|
29
29
|
stopAddingLink,
|
|
30
30
|
contentRef
|
|
31
31
|
}) {
|
|
@@ -78,65 +78,61 @@ function InlineLinkUI({
|
|
|
78
78
|
nofollow: nextValue.nofollow
|
|
79
79
|
});
|
|
80
80
|
const newText = nextValue.title || newUrl;
|
|
81
|
+
|
|
82
|
+
// Scenario: we have any active text selection or an active format.
|
|
83
|
+
let newValue;
|
|
81
84
|
if (isCollapsed(value) && !isActive) {
|
|
82
85
|
// Scenario: we don't have any actively selected text or formats.
|
|
83
|
-
const
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
const inserted = insert(value, newText);
|
|
87
|
+
newValue = applyFormat(inserted, linkFormat, value.start, value.end + newText.length);
|
|
88
|
+
} else if (newText === richTextText) {
|
|
89
|
+
newValue = applyFormat(value, linkFormat);
|
|
87
90
|
} else {
|
|
88
|
-
// Scenario:
|
|
89
|
-
let newValue;
|
|
90
|
-
if (newText === richTextText) {
|
|
91
|
-
// If we're not updating the text then ignore.
|
|
92
|
-
newValue = applyFormat(value, linkFormat);
|
|
93
|
-
} else {
|
|
94
|
-
// Create new RichText value for the new text in order that we
|
|
95
|
-
// can apply formats to it.
|
|
96
|
-
newValue = create({
|
|
97
|
-
text: newText
|
|
98
|
-
});
|
|
91
|
+
// Scenario: Editing an existing link.
|
|
99
92
|
|
|
100
|
-
|
|
101
|
-
|
|
93
|
+
// Create new RichText value for the new text in order that we
|
|
94
|
+
// can apply formats to it.
|
|
95
|
+
newValue = create({
|
|
96
|
+
text: newText
|
|
97
|
+
});
|
|
98
|
+
// Apply the new Link format to this new text value.
|
|
99
|
+
newValue = applyFormat(newValue, linkFormat, 0, newText.length);
|
|
102
100
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
101
|
+
// Get the boundaries of the active link format.
|
|
102
|
+
const boundary = getFormatBoundary(value, {
|
|
103
|
+
type: 'core/link'
|
|
104
|
+
});
|
|
107
105
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
106
|
+
// Split the value at the start of the active link format.
|
|
107
|
+
// Passing "start" as the 3rd parameter is required to ensure
|
|
108
|
+
// the second half of the split value is split at the format's
|
|
109
|
+
// start boundary and avoids relying on the value's "end" property
|
|
110
|
+
// which may not correspond correctly.
|
|
111
|
+
const [valBefore, valAfter] = split(value, boundary.start, boundary.start);
|
|
114
112
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
onChange(newValue);
|
|
113
|
+
// Update the original (full) RichTextValue replacing the
|
|
114
|
+
// target text with the *new* RichTextValue containing:
|
|
115
|
+
// 1. The new text content.
|
|
116
|
+
// 2. The new link format.
|
|
117
|
+
// As "replace" will operate on the first match only, it is
|
|
118
|
+
// run only against the second half of the value which was
|
|
119
|
+
// split at the active format's boundary. This avoids a bug
|
|
120
|
+
// with incorrectly targetted replacements.
|
|
121
|
+
// See: https://github.com/WordPress/gutenberg/issues/41771.
|
|
122
|
+
// Note original formats will be lost when applying this change.
|
|
123
|
+
// That is expected behaviour.
|
|
124
|
+
// See: https://github.com/WordPress/gutenberg/pull/33849#issuecomment-936134179.
|
|
125
|
+
const newValAfter = replace(valAfter, richTextText, newValue);
|
|
126
|
+
newValue = concat(valBefore, newValAfter);
|
|
131
127
|
}
|
|
128
|
+
onChange(newValue);
|
|
132
129
|
|
|
133
130
|
// Focus should only be returned to the rich text on submit if this link is not
|
|
134
131
|
// being created for the first time. If it is then focus should remain within the
|
|
135
132
|
// Link UI because it should remain open for the user to modify the link they have
|
|
136
133
|
// just created.
|
|
137
134
|
if (!isNewLink) {
|
|
138
|
-
|
|
139
|
-
stopAddingLink(returnFocusToRichText);
|
|
135
|
+
stopAddingLink();
|
|
140
136
|
}
|
|
141
137
|
if (!isValidHref(newUrl)) {
|
|
142
138
|
speak(__('Warning: the link has been inserted but may have errors. Please test it.'), 'assertive');
|
|
@@ -158,15 +154,17 @@ function InlineLinkUI({
|
|
|
158
154
|
// This caches the last truthy value of the selection anchor reference.
|
|
159
155
|
// This ensures the Popover is positioned correctly on initial submission of the link.
|
|
160
156
|
const cachedRect = useCachedTruthy(popoverAnchor.getBoundingClientRect());
|
|
161
|
-
popoverAnchor.getBoundingClientRect = () => cachedRect;
|
|
162
157
|
|
|
163
|
-
//
|
|
164
|
-
//
|
|
165
|
-
//
|
|
166
|
-
//
|
|
167
|
-
//
|
|
168
|
-
//
|
|
169
|
-
|
|
158
|
+
// If the link is not active (i.e. it is a new link) then we need to
|
|
159
|
+
// override the getBoundingClientRect method on the anchor element
|
|
160
|
+
// to return the cached value of the selection represented by the text
|
|
161
|
+
// that the user selected to be linked.
|
|
162
|
+
// If the link is active (i.e. it is an existing link) then we allow
|
|
163
|
+
// the default behaviour of the popover anchor to be used. This will get
|
|
164
|
+
// the anchor based on the `<a>` element in the rich text.
|
|
165
|
+
if (!isActive) {
|
|
166
|
+
popoverAnchor.getBoundingClientRect = () => cachedRect;
|
|
167
|
+
}
|
|
170
168
|
async function handleCreate(pageTitle) {
|
|
171
169
|
const page = await createPageEntity({
|
|
172
170
|
title: pageTitle,
|
|
@@ -188,9 +186,8 @@ function InlineLinkUI({
|
|
|
188
186
|
}
|
|
189
187
|
return createElement(Popover, {
|
|
190
188
|
anchor: popoverAnchor,
|
|
191
|
-
focusOnMount: focusOnMount.current,
|
|
192
189
|
onClose: stopAddingLink,
|
|
193
|
-
onFocusOutside:
|
|
190
|
+
onFocusOutside: onFocusOutside,
|
|
194
191
|
placement: "bottom",
|
|
195
192
|
offset: 10,
|
|
196
193
|
shift: true
|
|
@@ -198,7 +195,6 @@ function InlineLinkUI({
|
|
|
198
195
|
value: linkValue,
|
|
199
196
|
onChange: onChangeLink,
|
|
200
197
|
onRemove: removeLink,
|
|
201
|
-
forceIsEditingLink: addingLink,
|
|
202
198
|
hasRichPreviews: true,
|
|
203
199
|
createSuggestion: createPageEntity && handleCreate,
|
|
204
200
|
withCreateSuggestion: userCanCreatePages,
|