@wordpress/block-editor 14.3.2 → 14.3.3

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.
Files changed (101) hide show
  1. package/build/components/block-heading-level-dropdown/index.js +3 -1
  2. package/build/components/block-heading-level-dropdown/index.js.map +1 -1
  3. package/build/components/block-list/block.js +27 -4
  4. package/build/components/block-list/block.js.map +1 -1
  5. package/build/components/block-list/use-block-props/use-focus-first-element.js +0 -1
  6. package/build/components/block-list/use-block-props/use-focus-first-element.js.map +1 -1
  7. package/build/components/block-list/zoom-out-separator.js +18 -1
  8. package/build/components/block-list/zoom-out-separator.js.map +1 -1
  9. package/build/components/block-switcher/utils.js +1 -1
  10. package/build/components/block-switcher/utils.js.map +1 -1
  11. package/build/components/block-variation-transforms/index.js +6 -3
  12. package/build/components/block-variation-transforms/index.js.map +1 -1
  13. package/build/components/rich-text/event-listeners/paste-handler.js +2 -13
  14. package/build/components/rich-text/event-listeners/paste-handler.js.map +1 -1
  15. package/build/components/rich-text/index.js +34 -20
  16. package/build/components/rich-text/index.js.map +1 -1
  17. package/build/components/writing-flow/index.js +1 -2
  18. package/build/components/writing-flow/index.js.map +1 -1
  19. package/build/components/writing-flow/use-arrow-nav.js +1 -4
  20. package/build/components/writing-flow/use-arrow-nav.js.map +1 -1
  21. package/build/components/writing-flow/use-input.js +1 -31
  22. package/build/components/writing-flow/use-input.js.map +1 -1
  23. package/build/components/writing-flow/use-select-all.js +1 -14
  24. package/build/components/writing-flow/use-select-all.js.map +1 -1
  25. package/build/components/writing-flow/use-selection-observer.js +2 -6
  26. package/build/components/writing-flow/use-selection-observer.js.map +1 -1
  27. package/build/components/writing-flow/utils.js +0 -27
  28. package/build/components/writing-flow/utils.js.map +1 -1
  29. package/build/hooks/layout.js +12 -8
  30. package/build/hooks/layout.js.map +1 -1
  31. package/build/hooks/use-bindings-attributes.js +20 -26
  32. package/build/hooks/use-bindings-attributes.js.map +1 -1
  33. package/build/store/selectors.js +6 -3
  34. package/build/store/selectors.js.map +1 -1
  35. package/build-module/components/block-heading-level-dropdown/index.js +3 -1
  36. package/build-module/components/block-heading-level-dropdown/index.js.map +1 -1
  37. package/build-module/components/block-list/block.js +28 -7
  38. package/build-module/components/block-list/block.js.map +1 -1
  39. package/build-module/components/block-list/use-block-props/use-focus-first-element.js +0 -1
  40. package/build-module/components/block-list/use-block-props/use-focus-first-element.js.map +1 -1
  41. package/build-module/components/block-list/zoom-out-separator.js +18 -1
  42. package/build-module/components/block-list/zoom-out-separator.js.map +1 -1
  43. package/build-module/components/block-switcher/utils.js +1 -1
  44. package/build-module/components/block-switcher/utils.js.map +1 -1
  45. package/build-module/components/block-variation-transforms/index.js +6 -3
  46. package/build-module/components/block-variation-transforms/index.js.map +1 -1
  47. package/build-module/components/rich-text/event-listeners/paste-handler.js +2 -13
  48. package/build-module/components/rich-text/event-listeners/paste-handler.js.map +1 -1
  49. package/build-module/components/rich-text/index.js +34 -20
  50. package/build-module/components/rich-text/index.js.map +1 -1
  51. package/build-module/components/writing-flow/index.js +1 -2
  52. package/build-module/components/writing-flow/index.js.map +1 -1
  53. package/build-module/components/writing-flow/use-arrow-nav.js +1 -4
  54. package/build-module/components/writing-flow/use-arrow-nav.js.map +1 -1
  55. package/build-module/components/writing-flow/use-input.js +1 -31
  56. package/build-module/components/writing-flow/use-input.js.map +1 -1
  57. package/build-module/components/writing-flow/use-select-all.js +1 -14
  58. package/build-module/components/writing-flow/use-select-all.js.map +1 -1
  59. package/build-module/components/writing-flow/use-selection-observer.js +2 -6
  60. package/build-module/components/writing-flow/use-selection-observer.js.map +1 -1
  61. package/build-module/components/writing-flow/utils.js +0 -26
  62. package/build-module/components/writing-flow/utils.js.map +1 -1
  63. package/build-module/hooks/layout.js +13 -9
  64. package/build-module/hooks/layout.js.map +1 -1
  65. package/build-module/hooks/use-bindings-attributes.js +20 -26
  66. package/build-module/hooks/use-bindings-attributes.js.map +1 -1
  67. package/build-module/store/selectors.js +6 -3
  68. package/build-module/store/selectors.js.map +1 -1
  69. package/build-style/content-rtl.css +10 -0
  70. package/build-style/content.css +10 -0
  71. package/build-style/style-rtl.css +4 -0
  72. package/build-style/style.css +4 -0
  73. package/package.json +20 -20
  74. package/src/components/block-heading-level-dropdown/index.js +7 -1
  75. package/src/components/block-list/block.js +47 -11
  76. package/src/components/block-list/content.scss +12 -0
  77. package/src/components/block-list/use-block-props/use-focus-first-element.js +0 -1
  78. package/src/components/block-list/zoom-out-separator.js +14 -1
  79. package/src/components/block-switcher/test/use-transformed.patterns.js +3 -3
  80. package/src/components/block-switcher/test/utils.js +3 -3
  81. package/src/components/block-switcher/utils.js +1 -1
  82. package/src/components/block-toolbar/style.scss +7 -0
  83. package/src/components/block-variation-transforms/index.js +6 -7
  84. package/src/components/rich-text/event-listeners/paste-handler.js +2 -7
  85. package/src/components/rich-text/index.js +36 -23
  86. package/src/components/writing-flow/index.js +0 -2
  87. package/src/components/writing-flow/use-arrow-nav.js +2 -9
  88. package/src/components/writing-flow/use-input.js +1 -36
  89. package/src/components/writing-flow/use-select-all.js +1 -18
  90. package/src/components/writing-flow/use-selection-observer.js +3 -14
  91. package/src/components/writing-flow/utils.js +0 -30
  92. package/src/hooks/layout.js +17 -12
  93. package/src/hooks/use-bindings-attributes.js +24 -29
  94. package/src/store/selectors.js +6 -6
  95. package/src/store/test/private-selectors.js +2 -2
  96. package/src/store/test/selectors.js +10 -6
  97. package/build/components/writing-flow/use-event-redirect.js +0 -66
  98. package/build/components/writing-flow/use-event-redirect.js.map +0 -1
  99. package/build-module/components/writing-flow/use-event-redirect.js +0 -60
  100. package/build-module/components/writing-flow/use-event-redirect.js.map +0 -1
  101. package/src/components/writing-flow/use-event-redirect.js +0 -72
@@ -10,7 +10,6 @@ import { useRefEffect } from '@wordpress/compose';
10
10
  * Internal dependencies
11
11
  */
12
12
  import { store as blockEditorStore } from '../../store';
13
- import { getSelectionRoot } from './utils';
14
13
 
15
14
  export default function useSelectAll() {
16
15
  const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -24,27 +23,12 @@ export default function useSelectAll() {
24
23
  return;
25
24
  }
26
25
 
27
- const selectionRoot = getSelectionRoot( node.ownerDocument );
28
26
  const selectedClientIds = getSelectedBlockClientIds();
29
27
 
30
- // Abort if there is selection, but it is not within a block.
31
- if ( selectionRoot && ! selectedClientIds.length ) {
32
- return;
33
- }
34
-
35
28
  if (
36
- selectionRoot &&
37
29
  selectedClientIds.length < 2 &&
38
- ! isEntirelySelected( selectionRoot )
30
+ ! isEntirelySelected( event.target )
39
31
  ) {
40
- if ( node === node.ownerDocument.activeElement ) {
41
- event.preventDefault();
42
- node.ownerDocument.defaultView
43
- .getSelection()
44
- .selectAllChildren( selectionRoot );
45
- return;
46
- }
47
-
48
32
  return;
49
33
  }
50
34
 
@@ -61,7 +45,6 @@ export default function useSelectAll() {
61
45
  node.ownerDocument.defaultView
62
46
  .getSelection()
63
47
  .removeAllRanges();
64
- node.contentEditable = 'false';
65
48
  selectBlock( rootClientId );
66
49
  }
67
50
  return;
@@ -107,12 +107,8 @@ function getRichTextElement( node ) {
107
107
  export default function useSelectionObserver() {
108
108
  const { multiSelect, selectBlock, selectionChange } =
109
109
  useDispatch( blockEditorStore );
110
- const {
111
- getBlockParents,
112
- getBlockSelectionStart,
113
- isMultiSelecting,
114
- getSelectedBlockClientId,
115
- } = useSelect( blockEditorStore );
110
+ const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
111
+ useSelect( blockEditorStore );
116
112
  return useRefEffect(
117
113
  ( node ) => {
118
114
  const { ownerDocument } = node;
@@ -195,17 +191,10 @@ export default function useSelectionObserver() {
195
191
  return;
196
192
  }
197
193
 
198
- setContentEditableWrapper(
199
- node,
200
- !! ( startClientId && endClientId )
201
- );
202
-
203
194
  const isSingularSelection = startClientId === endClientId;
204
195
  if ( isSingularSelection ) {
205
196
  if ( ! isMultiSelecting() ) {
206
- if ( getSelectedBlockClientId() !== startClientId ) {
207
- selectBlock( startClientId );
208
- }
197
+ selectBlock( startClientId );
209
198
  } else {
210
199
  multiSelect( startClientId, startClientId );
211
200
  }
@@ -116,33 +116,3 @@ function toPlainText( html ) {
116
116
  // Merge any consecutive line breaks
117
117
  return plainText.replace( /\n\n+/g, '\n\n' );
118
118
  }
119
-
120
- /**
121
- * Gets the current content editable root element based on the selection.
122
- * @param {Document} ownerDocument
123
- * @return {Element|undefined} The content editable root element.
124
- */
125
- export function getSelectionRoot( ownerDocument ) {
126
- const { defaultView } = ownerDocument;
127
- const { anchorNode, focusNode } = defaultView.getSelection();
128
-
129
- if ( ! anchorNode || ! focusNode ) {
130
- return;
131
- }
132
-
133
- const anchorElement = (
134
- anchorNode.nodeType === anchorNode.ELEMENT_NODE
135
- ? anchorNode
136
- : anchorNode.parentElement
137
- ).closest( '[contenteditable]' );
138
-
139
- if ( ! anchorElement ) {
140
- return;
141
- }
142
-
143
- if ( ! anchorElement.contains( focusNode ) ) {
144
- return;
145
- }
146
-
147
- return anchorElement;
148
- }
@@ -11,8 +11,8 @@ import { addFilter } from '@wordpress/hooks';
11
11
  import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
12
12
  import { useSelect } from '@wordpress/data';
13
13
  import {
14
- Button,
15
- ButtonGroup,
14
+ __experimentalToggleGroupControl as ToggleGroupControl,
15
+ __experimentalToggleGroupControlOption as ToggleGroupControlOption,
16
16
  ToggleControl,
17
17
  PanelBody,
18
18
  privateApis as componentsPrivateApis,
@@ -315,21 +315,26 @@ export default {
315
315
 
316
316
  function LayoutTypeSwitcher( { type, onChange } ) {
317
317
  return (
318
- <ButtonGroup>
318
+ <ToggleGroupControl
319
+ __next40pxDefaultSize
320
+ isBlock
321
+ label={ __( 'Layout type' ) }
322
+ __nextHasNoMarginBottom
323
+ hideLabelFromVision
324
+ isAdaptiveWidth
325
+ value={ type }
326
+ onChange={ onChange }
327
+ >
319
328
  { getLayoutTypes().map( ( { name, label } ) => {
320
329
  return (
321
- <Button
322
- // TODO: Switch to `true` (40px size) if possible
323
- __next40pxDefaultSize={ false }
330
+ <ToggleGroupControlOption
324
331
  key={ name }
325
- isPressed={ type === name }
326
- onClick={ () => onChange( name ) }
327
- >
328
- { label }
329
- </Button>
332
+ value={ name }
333
+ label={ label }
334
+ />
330
335
  );
331
336
  } ) }
332
- </ButtonGroup>
337
+ </ToggleGroupControl>
333
338
  );
334
339
  }
335
340
 
@@ -103,11 +103,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
103
103
  const sources = useSelect( ( select ) =>
104
104
  unlock( select( blocksStore ) ).getAllBlockBindingsSources()
105
105
  );
106
- const { name, clientId } = props;
107
- const hasParentPattern = !! props.context[ 'pattern/overrides' ];
108
- const hasPatternOverridesDefaultBinding =
109
- props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
110
- ?.source === 'core/pattern-overrides';
106
+ const { name, clientId, context, setAttributes } = props;
111
107
  const blockBindings = useMemo(
112
108
  () =>
113
109
  replacePatternOverrideDefaultBindings(
@@ -121,6 +117,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
121
117
  // used purposely here to ensure `boundAttributes` is updated whenever
122
118
  // there are attribute updates.
123
119
  // `source.getValues` may also call a selector via `registry.select`.
120
+ const updatedContext = {};
124
121
  const boundAttributes = useSelect( () => {
125
122
  if ( ! blockBindings ) {
126
123
  return;
@@ -139,6 +136,11 @@ export const withBlockBindingSupport = createHigherOrderComponent(
139
136
  continue;
140
137
  }
141
138
 
139
+ // Populate context.
140
+ for ( const key of source.usesContext || [] ) {
141
+ updatedContext[ key ] = blockContext[ key ];
142
+ }
143
+
142
144
  blockBindingsBySource.set( source, {
143
145
  ...blockBindingsBySource.get( source ),
144
146
  [ attributeName ]: {
@@ -149,15 +151,6 @@ export const withBlockBindingSupport = createHigherOrderComponent(
149
151
 
150
152
  if ( blockBindingsBySource.size ) {
151
153
  for ( const [ source, bindings ] of blockBindingsBySource ) {
152
- // Populate context.
153
- const context = {};
154
-
155
- if ( source.usesContext?.length ) {
156
- for ( const key of source.usesContext ) {
157
- context[ key ] = blockContext[ key ];
158
- }
159
- }
160
-
161
154
  // Get values in batch if the source supports it.
162
155
  let values = {};
163
156
  if ( ! source.getValues ) {
@@ -168,7 +161,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
168
161
  } else {
169
162
  values = source.getValues( {
170
163
  registry,
171
- context,
164
+ context: updatedContext,
172
165
  clientId,
173
166
  bindings,
174
167
  } );
@@ -190,9 +183,19 @@ export const withBlockBindingSupport = createHigherOrderComponent(
190
183
  }
191
184
 
192
185
  return attributes;
193
- }, [ blockBindings, name, clientId, blockContext, registry, sources ] );
194
-
195
- const { setAttributes } = props;
186
+ }, [
187
+ blockBindings,
188
+ name,
189
+ clientId,
190
+ updatedContext,
191
+ registry,
192
+ sources,
193
+ ] );
194
+
195
+ const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
196
+ const hasPatternOverridesDefaultBinding =
197
+ props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
198
+ ?.source === 'core/pattern-overrides';
196
199
 
197
200
  const _setAttributes = useCallback(
198
201
  ( nextAttributes ) => {
@@ -236,18 +239,9 @@ export const withBlockBindingSupport = createHigherOrderComponent(
236
239
  source,
237
240
  bindings,
238
241
  ] of blockBindingsBySource ) {
239
- // Populate context.
240
- const context = {};
241
-
242
- if ( source.usesContext?.length ) {
243
- for ( const key of source.usesContext ) {
244
- context[ key ] = blockContext[ key ];
245
- }
246
- }
247
-
248
242
  source.setValues( {
249
243
  registry,
250
- context,
244
+ context: updatedContext,
251
245
  clientId,
252
246
  bindings,
253
247
  } );
@@ -277,7 +271,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
277
271
  blockBindings,
278
272
  name,
279
273
  clientId,
280
- blockContext,
274
+ updatedContext,
281
275
  setAttributes,
282
276
  sources,
283
277
  hasPatternOverridesDefaultBinding,
@@ -291,6 +285,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
291
285
  { ...props }
292
286
  attributes={ { ...props.attributes, ...boundAttributes } }
293
287
  setAttributes={ _setAttributes }
288
+ context={ { ...context, ...updatedContext } }
294
289
  />
295
290
  </>
296
291
  );
@@ -2467,7 +2467,7 @@ export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
2467
2467
  * Determines the items that appear in the available pattern transforms list.
2468
2468
  *
2469
2469
  * For now we only handle blocks without InnerBlocks and take into account
2470
- * the `__experimentalRole` property of blocks' attributes for the transformation.
2470
+ * the `role` property of blocks' attributes for the transformation.
2471
2471
  *
2472
2472
  * We return the first set of possible eligible block patterns,
2473
2473
  * by checking the `blockTypes` property. We still have to recurse through
@@ -2489,7 +2489,7 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
2489
2489
  }
2490
2490
  /**
2491
2491
  * For now we only handle blocks without InnerBlocks and take into account
2492
- * the `__experimentalRole` property of blocks' attributes for the transformation.
2492
+ * the `role` property of blocks' attributes for the transformation.
2493
2493
  * Note that the blocks have been retrieved through `getBlock`, which doesn't
2494
2494
  * return the inner blocks of an inner block controller, so we still need
2495
2495
  * to check for this case too.
@@ -2964,10 +2964,10 @@ export const getBlockEditingMode = createRegistrySelector(
2964
2964
  const templateLock = getTemplateLock( state, rootClientId );
2965
2965
  if ( templateLock === 'contentOnly' ) {
2966
2966
  const name = getBlockName( state, clientId );
2967
- const isContent =
2968
- select( blocksStore ).__experimentalHasContentRoleAttribute(
2969
- name
2970
- );
2967
+ const { hasContentRoleAttribute } = unlock(
2968
+ select( blocksStore )
2969
+ );
2970
+ const isContent = hasContentRoleAttribute( name );
2971
2971
  return isContent ? 'contentOnly' : 'disabled';
2972
2972
  }
2973
2973
  const parentMode = getBlockEditingMode( state, rootClientId );
@@ -124,10 +124,10 @@ describe( 'private selectors', () => {
124
124
  blockEditingModes: new Map( [] ),
125
125
  };
126
126
 
127
- const __experimentalHasContentRoleAttribute = jest.fn( () => false );
127
+ const hasContentRoleAttribute = jest.fn( () => false );
128
128
  getBlockEditingMode.registry = {
129
129
  select: jest.fn( () => ( {
130
- __experimentalHasContentRoleAttribute,
130
+ hasContentRoleAttribute,
131
131
  } ) ),
132
132
  };
133
133
 
@@ -15,6 +15,7 @@ import { select, dispatch } from '@wordpress/data';
15
15
  */
16
16
  import * as selectors from '../selectors';
17
17
  import { store } from '../';
18
+ import { lock } from '../../lock-unlock';
18
19
 
19
20
  const {
20
21
  getBlockName,
@@ -4372,11 +4373,14 @@ describe( 'getBlockEditingMode', () => {
4372
4373
  blockEditingModes: new Map( [] ),
4373
4374
  };
4374
4375
 
4375
- const __experimentalHasContentRoleAttribute = jest.fn( () => false );
4376
+ const hasContentRoleAttribute = jest.fn( () => false );
4377
+
4378
+ const fauxPrivateAPIs = {};
4379
+
4380
+ lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
4381
+
4376
4382
  getBlockEditingMode.registry = {
4377
- select: jest.fn( () => ( {
4378
- __experimentalHasContentRoleAttribute,
4379
- } ) ),
4383
+ select: jest.fn( () => fauxPrivateAPIs ),
4380
4384
  };
4381
4385
 
4382
4386
  it( 'should return default by default', () => {
@@ -4480,7 +4484,7 @@ describe( 'getBlockEditingMode', () => {
4480
4484
  },
4481
4485
  },
4482
4486
  };
4483
- __experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
4487
+ hasContentRoleAttribute.mockReturnValueOnce( false );
4484
4488
  expect(
4485
4489
  getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
4486
4490
  ).toBe( 'disabled' );
@@ -4496,7 +4500,7 @@ describe( 'getBlockEditingMode', () => {
4496
4500
  },
4497
4501
  },
4498
4502
  };
4499
- __experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
4503
+ hasContentRoleAttribute.mockReturnValueOnce( true );
4500
4504
  expect(
4501
4505
  getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
4502
4506
  ).toBe( 'contentOnly' );
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = useEventRedirect;
7
- var _compose = require("@wordpress/compose");
8
- var _utils = require("./utils");
9
- /**
10
- * WordPress dependencies
11
- */
12
-
13
- /**
14
- * Internal dependencies
15
- */
16
-
17
- /**
18
- * Whenever content editable is enabled on writing flow, it will have focus, so
19
- * we need to dispatch some events to the root of the selection to ensure
20
- * compatibility with rich text. In the future, perhaps the rich text event
21
- * handlers should be attached to the window instead.
22
- *
23
- * Alternatively, we could try to find a way to always maintain rich text focus.
24
- */
25
- function useEventRedirect() {
26
- return (0, _compose.useRefEffect)(node => {
27
- function onInput(event) {
28
- if (event.target !== node) {
29
- return;
30
- }
31
- const {
32
- ownerDocument
33
- } = node;
34
- const {
35
- defaultView
36
- } = ownerDocument;
37
- const prototype = Object.getPrototypeOf(event);
38
- const constructorName = prototype.constructor.name;
39
- const Constructor = defaultView[constructorName];
40
- const root = (0, _utils.getSelectionRoot)(ownerDocument);
41
- if (!root || root === node) {
42
- return;
43
- }
44
- const init = {};
45
- for (const key in event) {
46
- init[key] = event[key];
47
- }
48
- init.bubbles = false;
49
- const newEvent = new Constructor(event.type, init);
50
- const cancelled = !root.dispatchEvent(newEvent);
51
- if (cancelled) {
52
- event.preventDefault();
53
- }
54
- }
55
- const events = ['beforeinput', 'input', 'compositionstart', 'compositionend', 'compositionupdate', 'keydown'];
56
- events.forEach(eventType => {
57
- node.addEventListener(eventType, onInput);
58
- });
59
- return () => {
60
- events.forEach(eventType => {
61
- node.removeEventListener(eventType, onInput);
62
- });
63
- };
64
- }, []);
65
- }
66
- //# sourceMappingURL=use-event-redirect.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_compose","require","_utils","useEventRedirect","useRefEffect","node","onInput","event","target","ownerDocument","defaultView","prototype","Object","getPrototypeOf","constructorName","constructor","name","Constructor","root","getSelectionRoot","init","key","bubbles","newEvent","type","cancelled","dispatchEvent","preventDefault","events","forEach","eventType","addEventListener","removeEventListener"],"sources":["@wordpress/block-editor/src/components/writing-flow/use-event-redirect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getSelectionRoot } from './utils';\n\n/**\n * Whenever content editable is enabled on writing flow, it will have focus, so\n * we need to dispatch some events to the root of the selection to ensure\n * compatibility with rich text. In the future, perhaps the rich text event\n * handlers should be attached to the window instead.\n *\n * Alternatively, we could try to find a way to always maintain rich text focus.\n */\nexport default function useEventRedirect() {\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onInput( event ) {\n\t\t\tif ( event.target !== node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\tconst Constructor = defaultView[ constructorName ];\n\t\t\tconst root = getSelectionRoot( ownerDocument );\n\n\t\t\tif ( ! root || root === node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst init = {};\n\n\t\t\tfor ( const key in event ) {\n\t\t\t\tinit[ key ] = event[ key ];\n\t\t\t}\n\n\t\t\tinit.bubbles = false;\n\n\t\t\tconst newEvent = new Constructor( event.type, init );\n\t\t\tconst cancelled = ! root.dispatchEvent( newEvent );\n\n\t\t\tif ( cancelled ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tconst events = [\n\t\t\t'beforeinput',\n\t\t\t'input',\n\t\t\t'compositionstart',\n\t\t\t'compositionend',\n\t\t\t'compositionupdate',\n\t\t\t'keydown',\n\t\t];\n\n\t\tevents.forEach( ( eventType ) => {\n\t\t\tnode.addEventListener( eventType, onInput );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tevents.forEach( ( eventType ) => {\n\t\t\t\tnode.removeEventListener( eventType, onInput );\n\t\t\t} );\n\t\t};\n\t}, [] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASE,gBAAgBA,CAAA,EAAG;EAC1C,OAAO,IAAAC,qBAAY,EAAIC,IAAI,IAAM;IAChC,SAASC,OAAOA,CAAEC,KAAK,EAAG;MACzB,IAAKA,KAAK,CAACC,MAAM,KAAKH,IAAI,EAAG;QAC5B;MACD;MAEA,MAAM;QAAEI;MAAc,CAAC,GAAGJ,IAAI;MAC9B,MAAM;QAAEK;MAAY,CAAC,GAAGD,aAAa;MACrC,MAAME,SAAS,GAAGC,MAAM,CAACC,cAAc,CAAEN,KAAM,CAAC;MAChD,MAAMO,eAAe,GAAGH,SAAS,CAACI,WAAW,CAACC,IAAI;MAClD,MAAMC,WAAW,GAAGP,WAAW,CAAEI,eAAe,CAAE;MAClD,MAAMI,IAAI,GAAG,IAAAC,uBAAgB,EAAEV,aAAc,CAAC;MAE9C,IAAK,CAAES,IAAI,IAAIA,IAAI,KAAKb,IAAI,EAAG;QAC9B;MACD;MAEA,MAAMe,IAAI,GAAG,CAAC,CAAC;MAEf,KAAM,MAAMC,GAAG,IAAId,KAAK,EAAG;QAC1Ba,IAAI,CAAEC,GAAG,CAAE,GAAGd,KAAK,CAAEc,GAAG,CAAE;MAC3B;MAEAD,IAAI,CAACE,OAAO,GAAG,KAAK;MAEpB,MAAMC,QAAQ,GAAG,IAAIN,WAAW,CAAEV,KAAK,CAACiB,IAAI,EAAEJ,IAAK,CAAC;MACpD,MAAMK,SAAS,GAAG,CAAEP,IAAI,CAACQ,aAAa,CAAEH,QAAS,CAAC;MAElD,IAAKE,SAAS,EAAG;QAChBlB,KAAK,CAACoB,cAAc,CAAC,CAAC;MACvB;IACD;IAEA,MAAMC,MAAM,GAAG,CACd,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,SAAS,CACT;IAEDA,MAAM,CAACC,OAAO,CAAIC,SAAS,IAAM;MAChCzB,IAAI,CAAC0B,gBAAgB,CAAED,SAAS,EAAExB,OAAQ,CAAC;IAC5C,CAAE,CAAC;IAEH,OAAO,MAAM;MACZsB,MAAM,CAACC,OAAO,CAAIC,SAAS,IAAM;QAChCzB,IAAI,CAAC2B,mBAAmB,CAAEF,SAAS,EAAExB,OAAQ,CAAC;MAC/C,CAAE,CAAC;IACJ,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
@@ -1,60 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useRefEffect } from '@wordpress/compose';
5
-
6
- /**
7
- * Internal dependencies
8
- */
9
- import { getSelectionRoot } from './utils';
10
-
11
- /**
12
- * Whenever content editable is enabled on writing flow, it will have focus, so
13
- * we need to dispatch some events to the root of the selection to ensure
14
- * compatibility with rich text. In the future, perhaps the rich text event
15
- * handlers should be attached to the window instead.
16
- *
17
- * Alternatively, we could try to find a way to always maintain rich text focus.
18
- */
19
- export default function useEventRedirect() {
20
- return useRefEffect(node => {
21
- function onInput(event) {
22
- if (event.target !== node) {
23
- return;
24
- }
25
- const {
26
- ownerDocument
27
- } = node;
28
- const {
29
- defaultView
30
- } = ownerDocument;
31
- const prototype = Object.getPrototypeOf(event);
32
- const constructorName = prototype.constructor.name;
33
- const Constructor = defaultView[constructorName];
34
- const root = getSelectionRoot(ownerDocument);
35
- if (!root || root === node) {
36
- return;
37
- }
38
- const init = {};
39
- for (const key in event) {
40
- init[key] = event[key];
41
- }
42
- init.bubbles = false;
43
- const newEvent = new Constructor(event.type, init);
44
- const cancelled = !root.dispatchEvent(newEvent);
45
- if (cancelled) {
46
- event.preventDefault();
47
- }
48
- }
49
- const events = ['beforeinput', 'input', 'compositionstart', 'compositionend', 'compositionupdate', 'keydown'];
50
- events.forEach(eventType => {
51
- node.addEventListener(eventType, onInput);
52
- });
53
- return () => {
54
- events.forEach(eventType => {
55
- node.removeEventListener(eventType, onInput);
56
- });
57
- };
58
- }, []);
59
- }
60
- //# sourceMappingURL=use-event-redirect.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["useRefEffect","getSelectionRoot","useEventRedirect","node","onInput","event","target","ownerDocument","defaultView","prototype","Object","getPrototypeOf","constructorName","constructor","name","Constructor","root","init","key","bubbles","newEvent","type","cancelled","dispatchEvent","preventDefault","events","forEach","eventType","addEventListener","removeEventListener"],"sources":["@wordpress/block-editor/src/components/writing-flow/use-event-redirect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getSelectionRoot } from './utils';\n\n/**\n * Whenever content editable is enabled on writing flow, it will have focus, so\n * we need to dispatch some events to the root of the selection to ensure\n * compatibility with rich text. In the future, perhaps the rich text event\n * handlers should be attached to the window instead.\n *\n * Alternatively, we could try to find a way to always maintain rich text focus.\n */\nexport default function useEventRedirect() {\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onInput( event ) {\n\t\t\tif ( event.target !== node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\tconst Constructor = defaultView[ constructorName ];\n\t\t\tconst root = getSelectionRoot( ownerDocument );\n\n\t\t\tif ( ! root || root === node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst init = {};\n\n\t\t\tfor ( const key in event ) {\n\t\t\t\tinit[ key ] = event[ key ];\n\t\t\t}\n\n\t\t\tinit.bubbles = false;\n\n\t\t\tconst newEvent = new Constructor( event.type, init );\n\t\t\tconst cancelled = ! root.dispatchEvent( newEvent );\n\n\t\t\tif ( cancelled ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tconst events = [\n\t\t\t'beforeinput',\n\t\t\t'input',\n\t\t\t'compositionstart',\n\t\t\t'compositionend',\n\t\t\t'compositionupdate',\n\t\t\t'keydown',\n\t\t];\n\n\t\tevents.forEach( ( eventType ) => {\n\t\t\tnode.addEventListener( eventType, onInput );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tevents.forEach( ( eventType ) => {\n\t\t\t\tnode.removeEventListener( eventType, onInput );\n\t\t\t} );\n\t\t};\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,oBAAoB;;AAEjD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,SAAS;;AAE1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EAC1C,OAAOF,YAAY,CAAIG,IAAI,IAAM;IAChC,SAASC,OAAOA,CAAEC,KAAK,EAAG;MACzB,IAAKA,KAAK,CAACC,MAAM,KAAKH,IAAI,EAAG;QAC5B;MACD;MAEA,MAAM;QAAEI;MAAc,CAAC,GAAGJ,IAAI;MAC9B,MAAM;QAAEK;MAAY,CAAC,GAAGD,aAAa;MACrC,MAAME,SAAS,GAAGC,MAAM,CAACC,cAAc,CAAEN,KAAM,CAAC;MAChD,MAAMO,eAAe,GAAGH,SAAS,CAACI,WAAW,CAACC,IAAI;MAClD,MAAMC,WAAW,GAAGP,WAAW,CAAEI,eAAe,CAAE;MAClD,MAAMI,IAAI,GAAGf,gBAAgB,CAAEM,aAAc,CAAC;MAE9C,IAAK,CAAES,IAAI,IAAIA,IAAI,KAAKb,IAAI,EAAG;QAC9B;MACD;MAEA,MAAMc,IAAI,GAAG,CAAC,CAAC;MAEf,KAAM,MAAMC,GAAG,IAAIb,KAAK,EAAG;QAC1BY,IAAI,CAAEC,GAAG,CAAE,GAAGb,KAAK,CAAEa,GAAG,CAAE;MAC3B;MAEAD,IAAI,CAACE,OAAO,GAAG,KAAK;MAEpB,MAAMC,QAAQ,GAAG,IAAIL,WAAW,CAAEV,KAAK,CAACgB,IAAI,EAAEJ,IAAK,CAAC;MACpD,MAAMK,SAAS,GAAG,CAAEN,IAAI,CAACO,aAAa,CAAEH,QAAS,CAAC;MAElD,IAAKE,SAAS,EAAG;QAChBjB,KAAK,CAACmB,cAAc,CAAC,CAAC;MACvB;IACD;IAEA,MAAMC,MAAM,GAAG,CACd,aAAa,EACb,OAAO,EACP,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,SAAS,CACT;IAEDA,MAAM,CAACC,OAAO,CAAIC,SAAS,IAAM;MAChCxB,IAAI,CAACyB,gBAAgB,CAAED,SAAS,EAAEvB,OAAQ,CAAC;IAC5C,CAAE,CAAC;IAEH,OAAO,MAAM;MACZqB,MAAM,CAACC,OAAO,CAAIC,SAAS,IAAM;QAChCxB,IAAI,CAAC0B,mBAAmB,CAAEF,SAAS,EAAEvB,OAAQ,CAAC;MAC/C,CAAE,CAAC;IACJ,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
@@ -1,72 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useRefEffect } from '@wordpress/compose';
5
-
6
- /**
7
- * Internal dependencies
8
- */
9
- import { getSelectionRoot } from './utils';
10
-
11
- /**
12
- * Whenever content editable is enabled on writing flow, it will have focus, so
13
- * we need to dispatch some events to the root of the selection to ensure
14
- * compatibility with rich text. In the future, perhaps the rich text event
15
- * handlers should be attached to the window instead.
16
- *
17
- * Alternatively, we could try to find a way to always maintain rich text focus.
18
- */
19
- export default function useEventRedirect() {
20
- return useRefEffect( ( node ) => {
21
- function onInput( event ) {
22
- if ( event.target !== node ) {
23
- return;
24
- }
25
-
26
- const { ownerDocument } = node;
27
- const { defaultView } = ownerDocument;
28
- const prototype = Object.getPrototypeOf( event );
29
- const constructorName = prototype.constructor.name;
30
- const Constructor = defaultView[ constructorName ];
31
- const root = getSelectionRoot( ownerDocument );
32
-
33
- if ( ! root || root === node ) {
34
- return;
35
- }
36
-
37
- const init = {};
38
-
39
- for ( const key in event ) {
40
- init[ key ] = event[ key ];
41
- }
42
-
43
- init.bubbles = false;
44
-
45
- const newEvent = new Constructor( event.type, init );
46
- const cancelled = ! root.dispatchEvent( newEvent );
47
-
48
- if ( cancelled ) {
49
- event.preventDefault();
50
- }
51
- }
52
-
53
- const events = [
54
- 'beforeinput',
55
- 'input',
56
- 'compositionstart',
57
- 'compositionend',
58
- 'compositionupdate',
59
- 'keydown',
60
- ];
61
-
62
- events.forEach( ( eventType ) => {
63
- node.addEventListener( eventType, onInput );
64
- } );
65
-
66
- return () => {
67
- events.forEach( ( eventType ) => {
68
- node.removeEventListener( eventType, onInput );
69
- } );
70
- };
71
- }, [] );
72
- }