Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Block Editor: Abstract selection position retrieval
  • Loading branch information
tyxla committed Jun 20, 2022
commit 295506ecc3c6138c00f386a05ad6d7f2e6ab3238
18 changes: 18 additions & 0 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,18 @@ _Related_

- <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md>

### retrieveSelectedAttribute

Retrieve the block attribute that contains the selection position.

_Parameters_

- _blockAttributes_ `Object`: Block attributes.

_Returns_

- `string`: The name of the block attribute that was previously selected.

### RichText

_Related_
Expand Down Expand Up @@ -613,6 +625,12 @@ _Related_

- <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md>

### START_OF_SELECTED_AREA

A robust way to retain selection position through various
transforms is to insert a special character at the position and
then recover it.

### store

Store definition for the block editor namespace.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import { findKey } from 'lodash';

/**
* WordPress dependencies
*/
Expand All @@ -17,21 +12,14 @@ import { useDispatch } from '@wordpress/data';
*/
import { store as blockEditorStore } from '../../store';
import { preventEventDiscovery } from './prevent-event-discovery';

// A robust way to retain selection position through various
// transforms is to insert a special character at the position and
// then recover it.
const START_OF_SELECTED_AREA = '\u0086';
import { retrieveSelectedAttribute, START_OF_SELECTED_AREA } from '../../utils';

function findSelection( blocks ) {
let i = blocks.length;

while ( i-- ) {
const attributeKey = findKey(
blocks[ i ].attributes,
( v ) =>
typeof v === 'string' &&
v.indexOf( START_OF_SELECTED_AREA ) !== -1
const attributeKey = retrieveSelectedAttribute(
blocks[ i ].attributes
);

if ( attributeKey ) {
Expand Down
26 changes: 5 additions & 21 deletions packages/block-editor/src/store/actions.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { castArray, findKey, first, isObject, last, some } from 'lodash';
import { castArray, first, isObject, last, some } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -26,6 +26,7 @@ import deprecated from '@wordpress/deprecated';
* Internal dependencies
*/
import { mapRichTextSettings } from './utils';
import { retrieveSelectedAttribute, START_OF_SELECTED_AREA } from '../utils';

/**
* Action which will insert a default block insert action if there
Expand Down Expand Up @@ -771,10 +772,6 @@ export const __unstableDeleteSelection =
...mapRichTextSettings( attributeDefinitionB ),
} );

// A robust way to retain selection position through various transforms
// is to insert a special character at the position and then recover it.
const START_OF_SELECTED_AREA = '\u0086';

valueA = remove( valueA, selectionA.offset, valueA.text.length );
valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );

Expand Down Expand Up @@ -822,12 +819,7 @@ export const __unstableDeleteSelection =
);
}

const newAttributeKey = findKey(
updatedAttributes,
( v ) =>
typeof v === 'string' &&
v.indexOf( START_OF_SELECTED_AREA ) !== -1
);
const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );

const convertedHtml = updatedAttributes[ newAttributeKey ];
const convertedValue = create( {
Expand Down Expand Up @@ -1052,10 +1044,6 @@ export const mergeBlocks =
}
}

// A robust way to retain selection position through various transforms
// is to insert a special character at the position and then recover it.
const START_OF_SELECTED_AREA = '\u0086';

// Clone the blocks so we don't insert the character in a "live" block.
const cloneA = cloneBlock( blockA );
const cloneB = cloneBlock( blockB );
Expand Down Expand Up @@ -1098,12 +1086,8 @@ export const mergeBlocks =
);

if ( canRestoreTextSelection ) {
const newAttributeKey = findKey(
updatedAttributes,
( v ) =>
typeof v === 'string' &&
v.indexOf( START_OF_SELECTED_AREA ) !== -1
);
const newAttributeKey =
retrieveSelectedAttribute( updatedAttributes );
const convertedHtml = updatedAttributes[ newAttributeKey ];
const convertedValue = create( {
html: convertedHtml,
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/utils/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { default as transformStyles } from './transform-styles';
export * from './block-variation-transforms';
export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
export * from './selection';
25 changes: 25 additions & 0 deletions packages/block-editor/src/utils/selection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* External dependencies
*/
import { findKey } from 'lodash';

/**
* A robust way to retain selection position through various
* transforms is to insert a special character at the position and
* then recover it.
*/
export const START_OF_SELECTED_AREA = '\u0086';

/**
* Retrieve the block attribute that contains the selection position.
*
* @param {Object} blockAttributes Block attributes.
* @return {string} The name of the block attribute that was previously selected.
*/
export function retrieveSelectedAttribute( blockAttributes ) {
return findKey(
blockAttributes,
( v ) =>
typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
);
}