@wordpress/rich-text - npm Package Compare versions

Comparing version 3.24.0 to 3.24.1

build-module/component/index.native.js

@@ -30,3 +30,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { View, Platform } from 'react-native';
-import { addMention } from '@wordpress/react-native-bridge';
+import { showUserSuggestions, showXpostSuggestions } from '@wordpress/react-native-bridge';
 import { get, pickBy, debounce } from 'lodash';
@@ -40,3 +40,2 @@ import memize from 'memize';
 import { Component } from '@wordpress/element';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -48,3 +47,3 @@ import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
-import { Icon, atSymbol } from '@wordpress/icons';
+import { atSymbol, plus } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -68,2 +67,4 @@ /**
 import styles from './style.scss';
+import ToolbarButtonWithOptions from './toolbar-button-with-options';
+import { store as richTextStore } from '../store';
 
@@ -114,3 +115,2 @@ var unescapeSpaces = function unescapeSpaces(text) {
     _this.handleDelete = _this.handleDelete.bind(_assertThisInitialized(_this));
-    _this.handleMention = _this.handleMention.bind(_assertThisInitialized(_this));
     _this.onPaste = _this.onPaste.bind(_assertThisInitialized(_this));
@@ -131,3 +131,6 @@ _this.onFocus = _this.onFocus.bind(_assertThisInitialized(_this));
     _this.getHtmlToRender = _this.getHtmlToRender.bind(_assertThisInitialized(_this));
-    _this.showMention = _this.showMention.bind(_assertThisInitialized(_this));
+    _this.handleSuggestionFunc = _this.handleSuggestionFunc.bind(_assertThisInitialized(_this));
+    _this.handleUserSuggestion = _this.handleSuggestionFunc(showUserSuggestions, '@').bind(_assertThisInitialized(_this));
+    _this.handleXpostSuggestion = _this.handleSuggestionFunc(showXpostSuggestions, '+').bind(_assertThisInitialized(_this));
+    _this.suggestionOptions = _this.suggestionOptions.bind(_assertThisInitialized(_this));
     _this.insertString = _this.insertString.bind(_assertThisInitialized(_this));
@@ -386,3 +389,3 @@ _this.state = {
       this.handleEnter(event);
-      this.handleMention(event);
+      this.handleTriggerKeyCodes(event);
     }
@@ -465,28 +468,63 @@ }, {
   }, {
-    key: "handleMention",
-    value: function handleMention(event) {
+    key: "handleTriggerKeyCodes",
+    value: function handleTriggerKeyCodes(event) {
       var keyCode = event.keyCode;
+      var triggeredOption = this.suggestionOptions().find(function (option) {
+        var triggeredKeyCode = option.triggerChar.charCodeAt(0);
+        return triggeredKeyCode === keyCode;
+      });
 
-      if (keyCode !== '@'.charCodeAt(0)) {
-        return;
-      }
+      if (triggeredOption) {
+        var record = this.getRecord();
+        var text = getTextContent(record); // Only respond to the trigger if the selection is on the start of text or line
+        // or if the character before is a space
 
-      var record = this.getRecord();
-      var text = getTextContent(record); // Only start the mention UI if the selection is on the start of text or the character before is a space
+        var useTrigger = text.length === 0 || record.start === 0 || text.charAt(record.start - 1) === '\n' || text.charAt(record.start - 1) === ' ';
 
-      if (text.length === 0 || record.start === 0 || text.charAt(record.start - 1) === ' ') {
-        this.showMention();
-      } else {
-        this.insertString(record, '@');
+        if (useTrigger && triggeredOption.onClick) {
+          triggeredOption.onClick();
+        } else {
+          this.insertString(record, triggeredOption.triggerChar);
+        }
       }
     }
   }, {
-    key: "showMention",
-    value: function showMention() {
+    key: "suggestionOptions",
+    value: function suggestionOptions() {
+      var _this$props3 = this.props,
+          areMentionsSupported = _this$props3.areMentionsSupported,
+          areXPostsSupported = _this$props3.areXPostsSupported;
+      var allOptions = [{
+        supported: areMentionsSupported,
+        title: __('Insert mention'),
+        onClick: this.handleUserSuggestion,
+        triggerChar: '@',
+        value: 'mention',
+        label: __('Mention'),
+        icon: atSymbol
+      }, {
+        supported: areXPostsSupported,
+        title: __('Insert crosspost'),
+        onClick: this.handleXpostSuggestion,
+        triggerChar: '+',
+        value: 'crosspost',
+        label: __('Crosspost'),
+        icon: plus
+      }];
+      return allOptions.filter(function (op) {
+        return op.supported;
+      });
+    }
+  }, {
+    key: "handleSuggestionFunc",
+    value: function handleSuggestionFunc(suggestionFunction, prefix) {
       var _this3 = this;
 
-      var record = this.getRecord();
-      addMention().then(function (mentionUserId) {
-        _this3.insertString(record, "@".concat(mentionUserId, " "));
-      }).catch(function () {});
+      return function () {
+        var record = _this3.getRecord();
+
+        suggestionFunction().then(function (suggestion) {
+          _this3.insertString(record, "".concat(prefix).concat(suggestion, " "));
+        }).catch(function () {});
+      };
     }
@@ -502,5 +540,5 @@ /**
     value: function onPaste(event) {
-      var _this$props3 = this.props,
-          onPaste = _this$props3.onPaste,
-          onChange = _this$props3.onChange;
+      var _this$props4 = this.props,
+          onPaste = _this$props4.onPaste,
+          onChange = _this$props4.onChange;
       var _this$state$activeFor = this.state.activeFormats,
@@ -548,5 +586,5 @@ activeFormats = _this$state$activeFor === void 0 ? [] : _this$state$activeFor;
       this.isTouched = true;
-      var _this$props4 = this.props,
-          unstableOnFocus = _this$props4.unstableOnFocus,
-          onSelectionChange = _this$props4.onSelectionChange;
+      var _this$props5 = this.props,
+          unstableOnFocus = _this$props5.unstableOnFocus,
+          onSelectionChange = _this$props5.onSelectionChange;
 
@@ -722,3 +760,3 @@ if (unstableOnFocus) {
     value: function componentWillUnmount() {
-      if (this._editor.isFocused() && this.props.shouldBlurOnUnmount) {
+      if (this._editor.isFocused()) {
         this._editor.blur();
@@ -788,17 +826,16 @@ }
 
-      var _this$props5 = this.props,
-          tagName = _this$props5.tagName,
-          style = _this$props5.style,
-          isSelected = _this$props5.__unstableIsSelected,
-          children = _this$props5.children,
-          getStylesFromColorScheme = _this$props5.getStylesFromColorScheme,
-          minWidth = _this$props5.minWidth,
-          maxWidth = _this$props5.maxWidth,
-          formatTypes = _this$props5.formatTypes,
-          parentBlockStyles = _this$props5.parentBlockStyles,
-          withoutInteractiveFormatting = _this$props5.withoutInteractiveFormatting,
-          accessibilityLabel = _this$props5.accessibilityLabel,
-          _this$props5$disableE = _this$props5.disableEditingMenu,
-          disableEditingMenu = _this$props5$disableE === void 0 ? false : _this$props5$disableE,
-          isMentionsSupported = _this$props5.isMentionsSupported;
+      var _this$props6 = this.props,
+          tagName = _this$props6.tagName,
+          style = _this$props6.style,
+          isSelected = _this$props6.__unstableIsSelected,
+          children = _this$props6.children,
+          getStylesFromColorScheme = _this$props6.getStylesFromColorScheme,
+          minWidth = _this$props6.minWidth,
+          maxWidth = _this$props6.maxWidth,
+          formatTypes = _this$props6.formatTypes,
+          parentBlockStyles = _this$props6.parentBlockStyles,
+          withoutInteractiveFormatting = _this$props6.withoutInteractiveFormatting,
+          accessibilityLabel = _this$props6.accessibilityLabel,
+          _this$props6$disableE = _this$props6.disableEditingMenu,
+          disableEditingMenu = _this$props6$disableE === void 0 ? false : _this$props6$disableE;
       var record = this.getRecord();
@@ -903,3 +940,5 @@ var html = this.getHtmlToRender(record, tagName);
         onKeyDown: this.onKeyDown,
-        triggerKeyCodes: disableEditingMenu === false && isMentionsSupported ? ['@'] : [],
+        triggerKeyCodes: this.suggestionOptions().map(function (op) {
+          return op.triggerChar;
+        }),
         onPaste: this.onPaste,
@@ -934,10 +973,5 @@ activeFormats: this.getActiveFormatNames(record),
         onFocus: function onFocus() {}
-      }), createElement(BlockFormatControls, null, // eslint-disable-next-line no-undef
-      isMentionsSupported && createElement(Toolbar, null, createElement(ToolbarButton, {
-        title: __('Insert mention'),
-        icon: createElement(Icon, {
-          icon: atSymbol
-        }),
-        onClick: this.showMention
-      })))));
+      }), createElement(BlockFormatControls, null, createElement(ToolbarButtonWithOptions, {
+        options: this.suggestionOptions()
+      }))));
     }
@@ -965,4 +999,5 @@ }]);
   return _objectSpread({
-    formatTypes: select('core/rich-text').getFormatTypes(),
-    isMentionsSupported: getSettings('capabilities').mentions === true
+    formatTypes: select(richTextStore).getFormatTypes(),
+    areMentionsSupported: getSettings('capabilities').mentions === true,
+    areXPostsSupported: getSettings('capabilities').xposts === true
   }, {
@@ -969,0 +1004,0 @@ parentBlockStyles: parentBlockStyles

build-module/component/use-format-types.js

@@ -11,5 +11,10 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useSelect, useDispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
 
+import { store as richTextStore } from '../store';
+
 function formatTypesSelector(select) {
-  return select('core/rich-text').getFormatTypes();
+  return select(richTextStore).getFormatTypes();
 }
@@ -16,0 +21,0 @@ /**

build-module/get-format-type.js

@@ -5,2 +5,7 @@ /**
 import { select } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+
+import { store as richTextStore } from './store';
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -17,4 +22,4 @@
 export function getFormatType(name) {
-  return select('core/rich-text').getFormatType(name);
+  return select(richTextStore).getFormatType(name);
 }
 //# sourceMappingURL=get-format-type.js.map

build-module/get-format-types.js

@@ -5,2 +5,7 @@ /**
 import { select } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+
+import { store as richTextStore } from './store';
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -15,4 +20,4 @@
 export function getFormatTypes() {
-  return select('core/rich-text').getFormatTypes();
+  return select(richTextStore).getFormatTypes();
 }
 //# sourceMappingURL=get-format-types.js.map

build-module/register-format-type.js

@@ -12,2 +12,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 /**
+ * Internal dependencies
+ */
+
+import { store as richTextStore } from './store';
+/**
  * @typedef {Object} WPFormat
@@ -51,3 +56,3 @@ *
 
-  if (select('core/rich-text').getFormatType(settings.name)) {
+  if (select(richTextStore).getFormatType(settings.name)) {
     window.console.error('Format "' + settings.name + '" is already registered.');
@@ -73,3 +78,3 @@ return;
   if (settings.className === null) {
-    var formatTypeForBareElement = select('core/rich-text').getFormatTypeForBareElement(settings.tagName);
+    var formatTypeForBareElement = select(richTextStore).getFormatTypeForBareElement(settings.tagName);
 
@@ -81,3 +86,3 @@ if (formatTypeForBareElement) {
   } else {
-    var formatTypeForClassName = select('core/rich-text').getFormatTypeForClassName(settings.className);
+    var formatTypeForClassName = select(richTextStore).getFormatTypeForClassName(settings.className);
 
@@ -105,5 +110,5 @@ if (formatTypeForClassName) {
 
-  dispatch('core/rich-text').addFormatTypes(settings);
+  dispatch(richTextStore).addFormatTypes(settings);
   return settings;
 }
 //# sourceMappingURL=register-format-type.js.map

build-module/unregister-format-type.js

@@ -5,2 +5,7 @@ /**
 import { select, dispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+
+import { store as richTextStore } from './store';
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -19,3 +24,3 @@
 export function unregisterFormatType(name) {
-  var oldFormat = select('core/rich-text').getFormatType(name);
+  var oldFormat = select(richTextStore).getFormatType(name);
 
@@ -27,5 +32,5 @@ if (!oldFormat) {
 
-  dispatch('core/rich-text').removeFormatTypes(name);
+  dispatch(richTextStore).removeFormatTypes(name);
   return oldFormat;
 }
 //# sourceMappingURL=unregister-format-type.js.map

build/component/index.native.js

@@ -40,4 +40,2 @@ "use strict";
 
-var _components = require("@wordpress/components");
-
 var _compose = require("@wordpress/compose");
@@ -85,2 +83,6 @@
 
+var _toolbarButtonWithOptions = _interopRequireDefault(require("./toolbar-button-with-options"));
+
+var _store = require("../store");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -137,3 +139,2 @@
     _this.handleDelete = _this.handleDelete.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleMention = _this.handleMention.bind((0, _assertThisInitialized2.default)(_this));
     _this.onPaste = _this.onPaste.bind((0, _assertThisInitialized2.default)(_this));
@@ -154,3 +155,6 @@ _this.onFocus = _this.onFocus.bind((0, _assertThisInitialized2.default)(_this));
     _this.getHtmlToRender = _this.getHtmlToRender.bind((0, _assertThisInitialized2.default)(_this));
-    _this.showMention = _this.showMention.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleSuggestionFunc = _this.handleSuggestionFunc.bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleUserSuggestion = _this.handleSuggestionFunc(_reactNativeBridge.showUserSuggestions, '@').bind((0, _assertThisInitialized2.default)(_this));
+    _this.handleXpostSuggestion = _this.handleSuggestionFunc(_reactNativeBridge.showXpostSuggestions, '+').bind((0, _assertThisInitialized2.default)(_this));
+    _this.suggestionOptions = _this.suggestionOptions.bind((0, _assertThisInitialized2.default)(_this));
     _this.insertString = _this.insertString.bind((0, _assertThisInitialized2.default)(_this));
@@ -409,3 +413,3 @@ _this.state = {
       this.handleEnter(event);
-      this.handleMention(event);
+      this.handleTriggerKeyCodes(event);
     }
@@ -488,28 +492,63 @@ }, {
   }, {
-    key: "handleMention",
-    value: function handleMention(event) {
+    key: "handleTriggerKeyCodes",
+    value: function handleTriggerKeyCodes(event) {
       var keyCode = event.keyCode;
+      var triggeredOption = this.suggestionOptions().find(function (option) {
+        var triggeredKeyCode = option.triggerChar.charCodeAt(0);
+        return triggeredKeyCode === keyCode;
+      });
 
-      if (keyCode !== '@'.charCodeAt(0)) {
-        return;
-      }
+      if (triggeredOption) {
+        var record = this.getRecord();
+        var text = (0, _getTextContent.getTextContent)(record); // Only respond to the trigger if the selection is on the start of text or line
+        // or if the character before is a space
 
-      var record = this.getRecord();
-      var text = (0, _getTextContent.getTextContent)(record); // Only start the mention UI if the selection is on the start of text or the character before is a space
+        var useTrigger = text.length === 0 || record.start === 0 || text.charAt(record.start - 1) === '\n' || text.charAt(record.start - 1) === ' ';
 
-      if (text.length === 0 || record.start === 0 || text.charAt(record.start - 1) === ' ') {
-        this.showMention();
-      } else {
-        this.insertString(record, '@');
+        if (useTrigger && triggeredOption.onClick) {
+          triggeredOption.onClick();
+        } else {
+          this.insertString(record, triggeredOption.triggerChar);
+        }
       }
     }
   }, {
-    key: "showMention",
-    value: function showMention() {
+    key: "suggestionOptions",
+    value: function suggestionOptions() {
+      var _this$props3 = this.props,
+          areMentionsSupported = _this$props3.areMentionsSupported,
+          areXPostsSupported = _this$props3.areXPostsSupported;
+      var allOptions = [{
+        supported: areMentionsSupported,
+        title: (0, _i18n.__)('Insert mention'),
+        onClick: this.handleUserSuggestion,
+        triggerChar: '@',
+        value: 'mention',
+        label: (0, _i18n.__)('Mention'),
+        icon: _icons.atSymbol
+      }, {
+        supported: areXPostsSupported,
+        title: (0, _i18n.__)('Insert crosspost'),
+        onClick: this.handleXpostSuggestion,
+        triggerChar: '+',
+        value: 'crosspost',
+        label: (0, _i18n.__)('Crosspost'),
+        icon: _icons.plus
+      }];
+      return allOptions.filter(function (op) {
+        return op.supported;
+      });
+    }
+  }, {
+    key: "handleSuggestionFunc",
+    value: function handleSuggestionFunc(suggestionFunction, prefix) {
       var _this3 = this;
 
-      var record = this.getRecord();
-      (0, _reactNativeBridge.addMention)().then(function (mentionUserId) {
-        _this3.insertString(record, "@".concat(mentionUserId, " "));
-      }).catch(function () {});
+      return function () {
+        var record = _this3.getRecord();
+
+        suggestionFunction().then(function (suggestion) {
+          _this3.insertString(record, "".concat(prefix).concat(suggestion, " "));
+        }).catch(function () {});
+      };
     }
@@ -525,5 +564,5 @@ /**
     value: function onPaste(event) {
-      var _this$props3 = this.props,
-          onPaste = _this$props3.onPaste,
-          onChange = _this$props3.onChange;
+      var _this$props4 = this.props,
+          onPaste = _this$props4.onPaste,
+          onChange = _this$props4.onChange;
       var _this$state$activeFor = this.state.activeFormats,
@@ -571,5 +610,5 @@ activeFormats = _this$state$activeFor === void 0 ? [] : _this$state$activeFor;
       this.isTouched = true;
-      var _this$props4 = this.props,
-          unstableOnFocus = _this$props4.unstableOnFocus,
-          onSelectionChange = _this$props4.onSelectionChange;
+      var _this$props5 = this.props,
+          unstableOnFocus = _this$props5.unstableOnFocus,
+          onSelectionChange = _this$props5.onSelectionChange;
 
@@ -745,3 +784,3 @@ if (unstableOnFocus) {
     value: function componentWillUnmount() {
-      if (this._editor.isFocused() && this.props.shouldBlurOnUnmount) {
+      if (this._editor.isFocused()) {
         this._editor.blur();
@@ -811,17 +850,16 @@ }
 
-      var _this$props5 = this.props,
-          tagName = _this$props5.tagName,
-          style = _this$props5.style,
-          isSelected = _this$props5.__unstableIsSelected,
-          children = _this$props5.children,
-          getStylesFromColorScheme = _this$props5.getStylesFromColorScheme,
-          minWidth = _this$props5.minWidth,
-          maxWidth = _this$props5.maxWidth,
-          formatTypes = _this$props5.formatTypes,
-          parentBlockStyles = _this$props5.parentBlockStyles,
-          withoutInteractiveFormatting = _this$props5.withoutInteractiveFormatting,
-          accessibilityLabel = _this$props5.accessibilityLabel,
-          _this$props5$disableE = _this$props5.disableEditingMenu,
-          disableEditingMenu = _this$props5$disableE === void 0 ? false : _this$props5$disableE,
-          isMentionsSupported = _this$props5.isMentionsSupported;
+      var _this$props6 = this.props,
+          tagName = _this$props6.tagName,
+          style = _this$props6.style,
+          isSelected = _this$props6.__unstableIsSelected,
+          children = _this$props6.children,
+          getStylesFromColorScheme = _this$props6.getStylesFromColorScheme,
+          minWidth = _this$props6.minWidth,
+          maxWidth = _this$props6.maxWidth,
+          formatTypes = _this$props6.formatTypes,
+          parentBlockStyles = _this$props6.parentBlockStyles,
+          withoutInteractiveFormatting = _this$props6.withoutInteractiveFormatting,
+          accessibilityLabel = _this$props6.accessibilityLabel,
+          _this$props6$disableE = _this$props6.disableEditingMenu,
+          disableEditingMenu = _this$props6$disableE === void 0 ? false : _this$props6$disableE;
       var record = this.getRecord();
@@ -926,3 +964,5 @@ var html = this.getHtmlToRender(record, tagName);
         onKeyDown: this.onKeyDown,
-        triggerKeyCodes: disableEditingMenu === false && isMentionsSupported ? ['@'] : [],
+        triggerKeyCodes: this.suggestionOptions().map(function (op) {
+          return op.triggerChar;
+        }),
         onPaste: this.onPaste,
@@ -957,10 +997,5 @@ activeFormats: this.getActiveFormatNames(record),
         onFocus: function onFocus() {}
-      }), (0, _element.createElement)(_blockEditor.BlockFormatControls, null, // eslint-disable-next-line no-undef
-      isMentionsSupported && (0, _element.createElement)(_components.Toolbar, null, (0, _element.createElement)(_components.ToolbarButton, {
-        title: (0, _i18n.__)('Insert mention'),
-        icon: (0, _element.createElement)(_icons.Icon, {
-          icon: _icons.atSymbol
-        }),
-        onClick: this.showMention
-      })))));
+      }), (0, _element.createElement)(_blockEditor.BlockFormatControls, null, (0, _element.createElement)(_toolbarButtonWithOptions.default, {
+        options: this.suggestionOptions()
+      }))));
     }
@@ -990,4 +1025,5 @@ }]);
   return _objectSpread({
-    formatTypes: select('core/rich-text').getFormatTypes(),
-    isMentionsSupported: getSettings('capabilities').mentions === true
+    formatTypes: select(_store.store).getFormatTypes(),
+    areMentionsSupported: getSettings('capabilities').mentions === true,
+    areXPostsSupported: getSettings('capabilities').xposts === true
   }, {
@@ -994,0 +1030,0 @@ parentBlockStyles: parentBlockStyles

build/component/use-format-types.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _store = require("../store");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -20,3 +22,3 @@
 function formatTypesSelector(select) {
-  return select('core/rich-text').getFormatTypes();
+  return select(_store.store).getFormatTypes();
 }
@@ -23,0 +25,0 @@ /**

build/get-format-type.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _store = require("./store");
+
 /**
@@ -15,2 +17,6 @@ * WordPress dependencies
 
+/**
+ * Internal dependencies
+ */
+
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -26,4 +32,4 @@
 function getFormatType(name) {
-  return (0, _data.select)('core/rich-text').getFormatType(name);
+  return (0, _data.select)(_store.store).getFormatType(name);
 }
 //# sourceMappingURL=get-format-type.js.map

build/get-format-types.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _store = require("./store");
+
 /**
@@ -15,2 +17,6 @@ * WordPress dependencies
 
+/**
+ * Internal dependencies
+ */
+
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -24,4 +30,4 @@
 function getFormatTypes() {
-  return (0, _data.select)('core/rich-text').getFormatTypes();
+  return (0, _data.select)(_store.store).getFormatTypes();
 }
 //# sourceMappingURL=get-format-types.js.map

build/register-format-type.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _store = require("./store");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -57,3 +59,3 @@
 
-  if ((0, _data.select)('core/rich-text').getFormatType(settings.name)) {
+  if ((0, _data.select)(_store.store).getFormatType(settings.name)) {
     window.console.error('Format "' + settings.name + '" is already registered.');
@@ -79,3 +81,3 @@ return;
   if (settings.className === null) {
-    var formatTypeForBareElement = (0, _data.select)('core/rich-text').getFormatTypeForBareElement(settings.tagName);
+    var formatTypeForBareElement = (0, _data.select)(_store.store).getFormatTypeForBareElement(settings.tagName);
 
@@ -87,3 +89,3 @@ if (formatTypeForBareElement) {
   } else {
-    var formatTypeForClassName = (0, _data.select)('core/rich-text').getFormatTypeForClassName(settings.className);
+    var formatTypeForClassName = (0, _data.select)(_store.store).getFormatTypeForClassName(settings.className);
 
@@ -111,5 +113,5 @@ if (formatTypeForClassName) {
 
-  (0, _data.dispatch)('core/rich-text').addFormatTypes(settings);
+  (0, _data.dispatch)(_store.store).addFormatTypes(settings);
   return settings;
 }
 //# sourceMappingURL=register-format-type.js.map

build/unregister-format-type.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _store = require("./store");
+
 /**
@@ -15,2 +17,6 @@ * WordPress dependencies
 
+/**
+ * Internal dependencies
+ */
+
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -28,3 +34,3 @@
 function unregisterFormatType(name) {
-  var oldFormat = (0, _data.select)('core/rich-text').getFormatType(name);
+  var oldFormat = (0, _data.select)(_store.store).getFormatType(name);
 
@@ -36,5 +42,5 @@ if (!oldFormat) {
 
-  (0, _data.dispatch)('core/rich-text').removeFormatTypes(name);
+  (0, _data.dispatch)(_store.store).removeFormatTypes(name);
   return oldFormat;
 }
 //# sourceMappingURL=unregister-format-type.js.map

package.json

 {
 	"name": "@wordpress/rich-text",
-	"version": "3.24.0",
+	"version": "3.24.1",
 	"description": "Rich text value and manipulation API.",
@@ -30,4 +30,4 @@ "author": "The WordPress Contributors",
 		"@babel/runtime": "^7.12.5",
-		"@wordpress/compose": "^3.23.0",
-		"@wordpress/data": "^4.26.0",
+		"@wordpress/compose": "^3.23.1",
+		"@wordpress/data": "^4.26.1",
 		"@wordpress/deprecated": "^2.11.0",
@@ -38,3 +38,3 @@ "@wordpress/dom": "^2.16.0",
 		"@wordpress/is-shallow-equal": "^3.0.0",
-		"@wordpress/keycodes": "^2.17.0",
+		"@wordpress/keycodes": "^2.18.0",
 		"classnames": "^2.2.5",
@@ -48,3 +48,3 @@ "lodash": "^4.17.19",
 	},
-	"gitHead": "0f57de12b3c47128b216629b08e5c1657e1ee329"
+	"gitHead": "defb705bb3e6285f27d29ea4e32a393b3a9b06ca"
 }

src/component/index.native.js

@@ -11,3 +11,6 @@ /*eslint no-console: ["error", { allow: ["warn"] }] */
 import { View, Platform } from 'react-native';
-import { addMention } from '@wordpress/react-native-bridge';
+import {
+	showUserSuggestions,
+	showXpostSuggestions,
+} from '@wordpress/react-native-bridge';
 import { get, pickBy, debounce } from 'lodash';
@@ -21,3 +24,2 @@ import memize from 'memize';
 import { Component } from '@wordpress/element';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
@@ -29,3 +31,3 @@ import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
-import { Icon, atSymbol } from '@wordpress/icons';
+import { atSymbol, plus } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -49,2 +51,4 @@
 import styles from './style.scss';
+import ToolbarButtonWithOptions from './toolbar-button-with-options';
+import { store as richTextStore } from '../store';
 
@@ -89,3 +93,2 @@ const unescapeSpaces = ( text ) => {
 		this.handleDelete = this.handleDelete.bind( this );
-		this.handleMention = this.handleMention.bind( this );
 		this.onPaste = this.onPaste.bind( this );
@@ -108,3 +111,12 @@ this.onFocus = this.onFocus.bind( this );
 		this.getHtmlToRender = this.getHtmlToRender.bind( this );
-		this.showMention = this.showMention.bind( this );
+		this.handleSuggestionFunc = this.handleSuggestionFunc.bind( this );
+		this.handleUserSuggestion = this.handleSuggestionFunc(
+			showUserSuggestions,
+			'@'
+		).bind( this );
+		this.handleXpostSuggestion = this.handleSuggestionFunc(
+			showXpostSuggestions,
+			'+'
+		).bind( this );
+		this.suggestionOptions = this.suggestionOptions.bind( this );
 		this.insertString = this.insertString.bind( this );
@@ -330,3 +342,3 @@ this.state = {
 		this.handleEnter( event );
-		this.handleMention( event );
+		this.handleTriggerKeyCodes( event );
 	}
@@ -410,31 +422,64 @@
 
-	handleMention( event ) {
+	handleTriggerKeyCodes( event ) {
 		const { keyCode } = event;
+		const triggeredOption = this.suggestionOptions().find( ( option ) => {
+			const triggeredKeyCode = option.triggerChar.charCodeAt( 0 );
+			return triggeredKeyCode === keyCode;
+		} );
 
-		if ( keyCode !== '@'.charCodeAt( 0 ) ) {
-			return;
+		if ( triggeredOption ) {
+			const record = this.getRecord();
+			const text = getTextContent( record );
+			// Only respond to the trigger if the selection is on the start of text or line
+			// or if the character before is a space
+			const useTrigger =
+				text.length === 0 ||
+				record.start === 0 ||
+				text.charAt( record.start - 1 ) === '\n' ||
+				text.charAt( record.start - 1 ) === ' ';
+
+			if ( useTrigger && triggeredOption.onClick ) {
+				triggeredOption.onClick();
+			} else {
+				this.insertString( record, triggeredOption.triggerChar );
+			}
 		}
-		const record = this.getRecord();
-		const text = getTextContent( record );
-		// Only start the mention UI if the selection is on the start of text or the character before is a space
-		if (
-			text.length === 0 ||
-			record.start === 0 ||
-			text.charAt( record.start - 1 ) === ' '
-		) {
-			this.showMention();
-		} else {
-			this.insertString( record, '@' );
-		}
 	}
 
-	showMention() {
-		const record = this.getRecord();
-		addMention()
-			.then( ( mentionUserId ) => {
-				this.insertString( record, `@${ mentionUserId } ` );
-			} )
-			.catch( () => {} );
+	suggestionOptions() {
+		const { areMentionsSupported, areXPostsSupported } = this.props;
+		const allOptions = [
+			{
+				supported: areMentionsSupported,
+				title: __( 'Insert mention' ),
+				onClick: this.handleUserSuggestion,
+				triggerChar: '@',
+				value: 'mention',
+				label: __( 'Mention' ),
+				icon: atSymbol,
+			},
+			{
+				supported: areXPostsSupported,
+				title: __( 'Insert crosspost' ),
+				onClick: this.handleXpostSuggestion,
+				triggerChar: '+',
+				value: 'crosspost',
+				label: __( 'Crosspost' ),
+				icon: plus,
+			},
+		];
+		return allOptions.filter( ( op ) => op.supported );
 	}
 
+	handleSuggestionFunc( suggestionFunction, prefix ) {
+		return () => {
+			const record = this.getRecord();
+			suggestionFunction()
+				.then( ( suggestion ) => {
+					this.insertString( record, `${ prefix }${ suggestion } ` );
+				} )
+				.catch( () => {} );
+		};
+	}
+
 	/**
@@ -696,3 +741,3 @@ * Handles a paste event from the native Aztec Wrapper.
 	componentWillUnmount() {
-		if ( this._editor.isFocused() && this.props.shouldBlurOnUnmount ) {
+		if ( this._editor.isFocused() ) {
 			this._editor.blur();
@@ -769,3 +814,2 @@ }
 			disableEditingMenu = false,
-			isMentionsSupported,
 		} = this.props;
@@ -886,7 +930,5 @@
 					onKeyDown={ this.onKeyDown }
-					triggerKeyCodes={
-						disableEditingMenu === false && isMentionsSupported
-							? [ '@' ]
-							: []
-					}
+					triggerKeyCodes={ this.suggestionOptions().map(
+						( op ) => op.triggerChar
+					) }
 					onPaste={ this.onPaste }
@@ -932,14 +974,5 @@ activeFormats={ this.getActiveFormatNames( record ) }
 						<BlockFormatControls>
-							{
-								// eslint-disable-next-line no-undef
-								isMentionsSupported && (
-									<Toolbar>
-										<ToolbarButton
-											title={ __( 'Insert mention' ) }
-											icon={ <Icon icon={ atSymbol } /> }
-											onClick={ this.showMention }
-										/>
-									</Toolbar>
-								)
-							}
+							<ToolbarButtonWithOptions
+								options={ this.suggestionOptions() }
+							/>
 						</BlockFormatControls>
@@ -970,5 +1003,6 @@ </>
 		return {
-			formatTypes: select( 'core/rich-text' ).getFormatTypes(),
-			isMentionsSupported:
+			formatTypes: select( richTextStore ).getFormatTypes(),
+			areMentionsSupported:
 				getSettings( 'capabilities' ).mentions === true,
+			areXPostsSupported: getSettings( 'capabilities' ).xposts === true,
 			...{ parentBlockStyles },
@@ -975,0 +1009,0 @@ };

src/component/use-format-types.js

@@ -5,5 +5,9 @@ /**
 import { useSelect, useDispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as richTextStore } from '../store';
 
 function formatTypesSelector( select ) {
-	return select( 'core/rich-text' ).getFormatTypes();
+	return select( richTextStore ).getFormatTypes();
 }
@@ -10,0 +14,0 @@

src/get-format-type.js

@@ -5,2 +5,6 @@ /**
 import { select } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as richTextStore } from './store';
 
@@ -17,3 +21,3 @@ /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
 export function getFormatType( name ) {
-	return select( 'core/rich-text' ).getFormatType( name );
+	return select( richTextStore ).getFormatType( name );
 }

src/get-format-types.js

@@ -5,2 +5,6 @@ /**
 import { select } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as richTextStore } from './store';
 
@@ -15,3 +19,3 @@ /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
 export function getFormatTypes() {
-	return select( 'core/rich-text' ).getFormatTypes();
+	return select( richTextStore ).getFormatTypes();
 }

src/register-format-type.js

@@ -5,4 +5,7 @@ /**
 import { select, dispatch } from '@wordpress/data';
-
 /**
+ * Internal dependencies
+ */
+import { store as richTextStore } from './store';
+/**
  * @typedef {Object} WPFormat
@@ -48,3 +51,3 @@ *
 
-	if ( select( 'core/rich-text' ).getFormatType( settings.name ) ) {
+	if ( select( richTextStore ).getFormatType( settings.name ) ) {
 		window.console.error(
@@ -81,3 +84,3 @@ 'Format "' + settings.name + '" is already registered.'
 		const formatTypeForBareElement = select(
-			'core/rich-text'
+			richTextStore
 		).getFormatTypeForBareElement( settings.tagName );
@@ -93,3 +96,3 @@
 		const formatTypeForClassName = select(
-			'core/rich-text'
+			richTextStore
 		).getFormatTypeForClassName( settings.className );
@@ -126,5 +129,5 @@
 
-	dispatch( 'core/rich-text' ).addFormatTypes( settings );
+	dispatch( richTextStore ).addFormatTypes( settings );
 
 	return settings;
 }

src/test/register-format-type.js

@@ -12,2 +12,3 @@ /**
 import { getFormatType } from '../get-format-type';
+import { store as richTextStore } from '../store';
 
@@ -21,3 +22,3 @@ describe( 'registerFormatType', () => {
 	afterEach( () => {
-		select( 'core/rich-text' )
+		select( richTextStore )
 			.getFormatTypes()
@@ -24,0 +25,0 @@ .forEach( ( { name } ) => {

src/unregister-format-type.js

@@ -6,2 +6,7 @@ /**
 
+/**
+ * Internal dependencies
+ */
+import { store as richTextStore } from './store';
+
 /** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
@@ -19,3 +24,3 @@
 export function unregisterFormatType( name ) {
-	const oldFormat = select( 'core/rich-text' ).getFormatType( name );
+	const oldFormat = select( richTextStore ).getFormatType( name );
 
@@ -27,5 +32,5 @@ if ( ! oldFormat ) {
 
-	dispatch( 'core/rich-text' ).removeFormatTypes( name );
+	dispatch( richTextStore ).removeFormatTypes( name );
 
 	return oldFormat;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1314900

increased by1.77%

Number of package files

317

increased by1.6%

Lines of code

18615

increased by1.72%

Dependency changes

• Updated@wordpress/compose@^3.23.1

• Updated@wordpress/data@^4.26.1

• Updated@wordpress/keycodes@^2.18.0