@wordpress/block-editor 8.4.0 → 8.5.2

package/build-module/store/actions.js

@@ -11,6 +11,11 @@ import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
+/**
+ * Internal dependencies
+ */
+
+import { mapRichTextSettings } from './utils';
 /**
  * Action which will insert a default block insert action if there
  * are no other blocks at the root of the editor. This action should be used
@@ -100,6 +105,15 @@ export const validateBlocksToTemplate = blocks => _ref3 => {
  *                                 text value. See `wp.richText.create`.
  */
 
+/**
+ * A selection object.
+ *
+ * @typedef {Object} WPSelection
+ *
+ * @property {WPBlockSelection} start The selection start.
+ * @property {WPBlockSelection} end   The selection end.
+ */
+
 /* eslint-disable jsdoc/valid-types */
 
 /**
@@ -595,7 +609,7 @@ export const insertBlocks = function (blocks, index, rootClientId) {
  * @param {?string} rootClientId      Optional root client ID of block list on
  *                                    which to insert.
  * @param {?number} index             Index at which block should be inserted.
- * @param {Object}  __unstableOptions Wether or not to show an inserter button.
+ * @param {Object}  __unstableOptions Whether or not to show an inserter button.
  *
  * @return {Object} Action object.
  */
@@ -657,6 +671,229 @@ export const synchronizeTemplate = () => _ref11 => {
   const updatedBlockList = synchronizeBlocksWithTemplate(blocks, template);
   dispatch.resetBlocks(updatedBlockList);
 };
+/**
+ * Delete the current selection.
+ *
+ * @param {boolean} isForward
+ */
+
+export const __unstableDeleteSelection = isForward => _ref12 => {
+  let {
+    registry,
+    select,
+    dispatch
+  } = _ref12;
+  const selectionAnchor = select.getSelectionStart();
+  const selectionFocus = select.getSelectionEnd();
+  if (selectionAnchor.clientId === selectionFocus.clientId) return; // It's not mergeable if there's no rich text selection.
+
+  if (!selectionAnchor.attributeKey || !selectionFocus.attributeKey || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') return false;
+  const anchorRootClientId = select.getBlockRootClientId(selectionAnchor.clientId);
+  const focusRootClientId = select.getBlockRootClientId(selectionFocus.clientId); // It's not mergeable if the selection doesn't start and end in the same
+  // block list. Maybe in the future it should be allowed.
+
+  if (anchorRootClientId !== focusRootClientId) {
+    return;
+  }
+
+  const blockOrder = select.getBlockOrder(anchorRootClientId);
+  const anchorIndex = blockOrder.indexOf(selectionAnchor.clientId);
+  const focusIndex = blockOrder.indexOf(selectionFocus.clientId); // Reassign selection start and end based on order.
+
+  let selectionStart, selectionEnd;
+
+  if (anchorIndex > focusIndex) {
+    selectionStart = selectionFocus;
+    selectionEnd = selectionAnchor;
+  } else {
+    selectionStart = selectionAnchor;
+    selectionEnd = selectionFocus;
+  }
+
+  const targetSelection = isForward ? selectionEnd : selectionStart;
+  const targetBlock = select.getBlock(targetSelection.clientId);
+  const targetBlockType = getBlockType(targetBlock.name);
+
+  if (!targetBlockType.merge) {
+    return;
+  }
+
+  const selectionA = selectionStart;
+  const selectionB = selectionEnd;
+  const blockA = select.getBlock(selectionA.clientId);
+  const blockAType = getBlockType(blockA.name);
+  const blockB = select.getBlock(selectionB.clientId);
+  const blockBType = getBlockType(blockB.name);
+  const htmlA = blockA.attributes[selectionA.attributeKey];
+  const htmlB = blockB.attributes[selectionB.attributeKey];
+  const attributeDefinitionA = blockAType.attributes[selectionA.attributeKey];
+  const attributeDefinitionB = blockBType.attributes[selectionB.attributeKey];
+  let valueA = create({
+    html: htmlA,
+    ...mapRichTextSettings(attributeDefinitionA)
+  });
+  let valueB = create({
+    html: htmlB,
+    ...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); // Clone the blocks so we don't manipulate the original.
+
+  const cloneA = cloneBlock(blockA, {
+    [selectionA.attributeKey]: toHTMLString({
+      value: valueA,
+      ...mapRichTextSettings(attributeDefinitionA)
+    })
+  });
+  const cloneB = cloneBlock(blockB, {
+    [selectionB.attributeKey]: toHTMLString({
+      value: valueB,
+      ...mapRichTextSettings(attributeDefinitionB)
+    })
+  });
+  const followingBlock = isForward ? cloneA : cloneB; // We can only merge blocks with similar types
+  // thus, we transform the block to merge first
+
+  const blocksWithTheSameType = blockA.name === blockB.name ? [followingBlock] : switchToBlockType(followingBlock, targetBlockType.name); // If the block types can not match, do nothing
+
+  if (!blocksWithTheSameType || !blocksWithTheSameType.length) {
+    return;
+  }
+
+  let updatedAttributes;
+
+  if (isForward) {
+    const blockToMerge = blocksWithTheSameType.pop();
+    updatedAttributes = targetBlockType.merge(blockToMerge.attributes, cloneB.attributes);
+  } else {
+    const blockToMerge = blocksWithTheSameType.shift();
+    updatedAttributes = targetBlockType.merge(cloneA.attributes, blockToMerge.attributes);
+  }
+
+  const newAttributeKey = findKey(updatedAttributes, v => typeof v === 'string' && v.indexOf(START_OF_SELECTED_AREA) !== -1);
+  const convertedHtml = updatedAttributes[newAttributeKey];
+  const convertedValue = create({
+    html: convertedHtml,
+    ...mapRichTextSettings(targetBlockType.attributes[newAttributeKey])
+  });
+  const newOffset = convertedValue.text.indexOf(START_OF_SELECTED_AREA);
+  const newValue = remove(convertedValue, newOffset, newOffset + 1);
+  const newHtml = toHTMLString({
+    value: newValue,
+    ...mapRichTextSettings(targetBlockType.attributes[newAttributeKey])
+  });
+  updatedAttributes[newAttributeKey] = newHtml;
+  const selectedBlockClientIds = select.getSelectedBlockClientIds();
+  const replacement = [...(isForward ? blocksWithTheSameType : []), { // Preserve the original client ID.
+    ...targetBlock,
+    attributes: { ...targetBlock.attributes,
+      ...updatedAttributes
+    }
+  }, ...(isForward ? [] : blocksWithTheSameType)];
+  registry.batch(() => {
+    dispatch.selectionChange(targetBlock.clientId, newAttributeKey, newOffset, newOffset);
+    dispatch.replaceBlocks(selectedBlockClientIds, replacement, 0, // If we don't pass the `indexToSelect` it will default to the last block.
+    select.getSelectedBlocksInitialCaretPosition());
+  });
+};
+/**
+ * Split the current selection.
+ */
+
+export const __unstableSplitSelection = () => _ref13 => {
+  let {
+    select,
+    dispatch
+  } = _ref13;
+  const selectionAnchor = select.getSelectionStart();
+  const selectionFocus = select.getSelectionEnd();
+  if (selectionAnchor.clientId === selectionFocus.clientId) return; // Can't split if the selection is not set.
+
+  if (!selectionAnchor.attributeKey || !selectionFocus.attributeKey || typeof selectionAnchor.offset === 'undefined' || typeof selectionFocus.offset === 'undefined') return;
+  const anchorRootClientId = select.getBlockRootClientId(selectionAnchor.clientId);
+  const focusRootClientId = select.getBlockRootClientId(selectionFocus.clientId); // It's not splittable if the selection doesn't start and end in the same
+  // block list. Maybe in the future it should be allowed.
+
+  if (anchorRootClientId !== focusRootClientId) {
+    return;
+  }
+
+  const blockOrder = select.getBlockOrder(anchorRootClientId);
+  const anchorIndex = blockOrder.indexOf(selectionAnchor.clientId);
+  const focusIndex = blockOrder.indexOf(selectionFocus.clientId); // Reassign selection start and end based on order.
+
+  let selectionStart, selectionEnd;
+
+  if (anchorIndex > focusIndex) {
+    selectionStart = selectionFocus;
+    selectionEnd = selectionAnchor;
+  } else {
+    selectionStart = selectionAnchor;
+    selectionEnd = selectionFocus;
+  }
+
+  const selectionA = selectionStart;
+  const selectionB = selectionEnd;
+  const blockA = select.getBlock(selectionA.clientId);
+  const blockAType = getBlockType(blockA.name);
+  const blockB = select.getBlock(selectionB.clientId);
+  const blockBType = getBlockType(blockB.name);
+  const htmlA = blockA.attributes[selectionA.attributeKey];
+  const htmlB = blockB.attributes[selectionB.attributeKey];
+  const attributeDefinitionA = blockAType.attributes[selectionA.attributeKey];
+  const attributeDefinitionB = blockBType.attributes[selectionB.attributeKey];
+  let valueA = create({
+    html: htmlA,
+    ...mapRichTextSettings(attributeDefinitionA)
+  });
+  let valueB = create({
+    html: htmlB,
+    ...mapRichTextSettings(attributeDefinitionB)
+  });
+  valueA = remove(valueA, selectionA.offset, valueA.text.length);
+  valueB = remove(valueB, 0, selectionB.offset);
+  dispatch.replaceBlocks(select.getSelectedBlockClientIds(), [{ // Preserve the original client ID.
+    ...blockA,
+    attributes: { ...blockA.attributes,
+      [selectionA.attributeKey]: toHTMLString({
+        value: valueA,
+        ...mapRichTextSettings(attributeDefinitionA)
+      })
+    }
+  }, createBlock(getDefaultBlockName()), { // Preserve the original client ID.
+    ...blockB,
+    attributes: { ...blockB.attributes,
+      [selectionB.attributeKey]: toHTMLString({
+        value: valueB,
+        ...mapRichTextSettings(attributeDefinitionB)
+      })
+    }
+  }], 1, // If we don't pass the `indexToSelect` it will default to the last block.
+  select.getSelectedBlocksInitialCaretPosition());
+};
+/**
+ * Expand the selection to cover the entire blocks, removing partial selection.
+ */
+
+export const __unstableExpandSelection = () => _ref14 => {
+  let {
+    select,
+    dispatch
+  } = _ref14;
+  const selectionAnchor = select.getSelectionStart();
+  const selectionFocus = select.getSelectionEnd();
+  dispatch.selectionChange({
+    start: {
+      clientId: selectionAnchor.clientId
+    },
+    end: {
+      clientId: selectionFocus.clientId
+    }
+  });
+};
 /**
  * Action that merges two blocks.
  *
@@ -664,11 +901,11 @@ export const synchronizeTemplate = () => _ref11 => {
  * @param {string} secondBlockClientId Client ID of the second block to merge.
  */
 
-export const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref12 => {
+export const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref15 => {
   let {
     select,
     dispatch
-  } = _ref12;
+  } = _ref15;
   const blocks = [firstBlockClientId, secondBlockClientId];
   dispatch({
     type: 'MERGE_BLOCKS',
@@ -716,21 +953,13 @@ export const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref12 =
   if (canRestoreTextSelection) {
     const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
     const html = selectedBlock.attributes[attributeKey];
-    const {
-      multiline: multilineTag,
-      __unstableMultilineWrapperTags: multilineWrapperTags,
-      __unstablePreserveWhiteSpace: preserveWhiteSpace
-    } = attributeDefinition;
     const value = insert(create({
       html,
-      multilineTag,
-      multilineWrapperTags,
-      preserveWhiteSpace
+      ...mapRichTextSettings(attributeDefinition)
     }), START_OF_SELECTED_AREA, offset, offset);
     selectedBlock.attributes[attributeKey] = toHTMLString({
       value,
-      multilineTag,
-      preserveWhiteSpace
+      ...mapRichTextSettings(attributeDefinition)
     });
   } // We can only merge blocks with similar types
   // thus, we transform the block to merge first.
@@ -748,23 +977,15 @@ export const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref12 =
   if (canRestoreTextSelection) {
     const newAttributeKey = findKey(updatedAttributes, v => typeof v === 'string' && v.indexOf(START_OF_SELECTED_AREA) !== -1);
     const convertedHtml = updatedAttributes[newAttributeKey];
-    const {
-      multiline: multilineTag,
-      __unstableMultilineWrapperTags: multilineWrapperTags,
-      __unstablePreserveWhiteSpace: preserveWhiteSpace
-    } = blockAType.attributes[newAttributeKey];
     const convertedValue = create({
       html: convertedHtml,
-      multilineTag,
-      multilineWrapperTags,
-      preserveWhiteSpace
+      ...mapRichTextSettings(blockAType.attributes[newAttributeKey])
     });
     const newOffset = convertedValue.text.indexOf(START_OF_SELECTED_AREA);
     const newValue = remove(convertedValue, newOffset, newOffset + 1);
     const newHtml = toHTMLString({
       value: newValue,
-      multilineTag,
-      preserveWhiteSpace
+      ...mapRichTextSettings(blockAType.attributes[newAttributeKey])
     });
     updatedAttributes[newAttributeKey] = newHtml;
     dispatch.selectionChange(blockA.clientId, newAttributeKey, newOffset, newOffset);
@@ -788,11 +1009,11 @@ export const mergeBlocks = (firstBlockClientId, secondBlockClientId) => _ref12 =
 
 export const removeBlocks = function (clientIds) {
   let selectPrevious = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return _ref13 => {
+  return _ref16 => {
     let {
       select,
       dispatch
-    } = _ref13;
+    } = _ref16;
 
     if (!clientIds || !clientIds.length) {
       return;
@@ -948,21 +1169,28 @@ export function exitFormattedText() {
 /**
  * Action that changes the position of the user caret.
  *
- * @param {string} clientId     The selected block client ID.
- * @param {string} attributeKey The selected block attribute key.
- * @param {number} startOffset  The start offset.
- * @param {number} endOffset    The end offset.
+ * @param {string|WPSelection} clientId     The selected block client ID.
+ * @param {string}             attributeKey The selected block attribute key.
+ * @param {number}             startOffset  The start offset.
+ * @param {number}             endOffset    The end offset.
  *
  * @return {Object} Action object.
  */
 
 export function selectionChange(clientId, attributeKey, startOffset, endOffset) {
+  if (typeof clientId === 'string') {
+    return {
+      type: 'SELECTION_CHANGE',
+      clientId,
+      attributeKey,
+      startOffset,
+      endOffset
+    };
+  }
+
   return {
     type: 'SELECTION_CHANGE',
-    clientId,
-    attributeKey,
-    startOffset,
-    endOffset
+    ...clientId
   };
 }
 /**
@@ -974,10 +1202,10 @@ export function selectionChange(clientId, attributeKey, startOffset, endOffset)
  * @param {?number} index        Optional index where to insert the default block.
  */
 
-export const insertDefaultBlock = (attributes, rootClientId, index) => _ref14 => {
+export const insertDefaultBlock = (attributes, rootClientId, index) => _ref17 => {
   let {
     dispatch
-  } = _ref14;
+  } = _ref17;
   // Abort if there is no default block type (if it has been unregistered).
   const defaultBlockName = getDefaultBlockName();
 
@@ -1066,10 +1294,10 @@ export function __unstableMarkNextChangeAsNotPersistent() {
  * selection changes have been recorded.
  */
 
-export const __unstableMarkAutomaticChange = () => _ref15 => {
+export const __unstableMarkAutomaticChange = () => _ref18 => {
   let {
     dispatch
-  } = _ref15;
+  } = _ref18;
   dispatch({
     type: 'MARK_AUTOMATIC_CHANGE'
   });
@@ -1090,10 +1318,10 @@ export const __unstableMarkAutomaticChange = () => _ref15 => {
 
 export const setNavigationMode = function () {
   let isNavigationMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-  return _ref16 => {
+  return _ref19 => {
     let {
       dispatch
-    } = _ref16;
+    } = _ref19;
     dispatch({
       type: 'SET_NAVIGATION_MODE',
       isNavigationMode
@@ -1114,10 +1342,10 @@ export const setNavigationMode = function () {
 
 export const setBlockMovingClientId = function () {
   let hasBlockMovingClientId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  return _ref17 => {
+  return _ref20 => {
     let {
       dispatch
-    } = _ref17;
+    } = _ref20;
     dispatch({
       type: 'SET_BLOCK_MOVING_MODE',
       hasBlockMovingClientId
@@ -1137,11 +1365,11 @@ export const setBlockMovingClientId = function () {
 
 export const duplicateBlocks = function (clientIds) {
   let updateSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return _ref18 => {
+  return _ref21 => {
     let {
       select,
       dispatch
-    } = _ref18;
+    } = _ref21;
 
     if (!clientIds || !clientIds.length) {
       return;
@@ -1179,11 +1407,11 @@ export const duplicateBlocks = function (clientIds) {
  * @param {string} clientId
  */
 
-export const insertBeforeBlock = clientId => _ref19 => {
+export const insertBeforeBlock = clientId => _ref22 => {
   let {
     select,
     dispatch
-  } = _ref19;
+  } = _ref22;
 
   if (!clientId) {
     return;
@@ -1205,11 +1433,11 @@ export const insertBeforeBlock = clientId => _ref19 => {
  * @param {string} clientId
  */
 
-export const insertAfterBlock = clientId => _ref20 => {
+export const insertAfterBlock = clientId => _ref23 => {
   let {
     select,
     dispatch
-  } = _ref20;
+  } = _ref23;
 
   if (!clientId) {
     return;
@@ -1245,10 +1473,10 @@ export function toggleBlockHighlight(clientId, isHighlighted) {
  * @param {string} clientId Target block client ID.
  */
 
-export const flashBlock = clientId => async _ref21 => {
+export const flashBlock = clientId => async _ref24 => {
   let {
     dispatch
-  } = _ref21;
+  } = _ref24;
   dispatch(toggleBlockHighlight(clientId, true));
   await new Promise(resolve => setTimeout(resolve, 150));
   dispatch(toggleBlockHighlight(clientId, false));