@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineNodeViewSharedStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _templateObject;
+
+// For reasoning behind styles, see comments in:
+// ./getInlineNodeViewProducer -> portalChildren()
+var InlineNodeViewSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .inlineNodeViewOuterContainer {\n    display: inline;\n  }\n\n  .inlineNodeViewAddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), _utils.ZERO_WIDTH_SPACE);
+exports.InlineNodeViewSharedStyles = InlineNodeViewSharedStyles;

package/dist/cjs/nodeviews/getPerformanceOptions.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPerformanceOptions = getPerformanceOptions;
+exports.nodeViewRenderedEventsCounter = void 0;
+exports.startMeasureReactNodeViewRendered = startMeasureReactNodeViewRendered;
+exports.stopMeasureReactNodeViewRendered = stopMeasureReactNodeViewRendered;
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _getParticipantsCount = require("../plugins/collab-edit/get-participants-count");
+
+var _pluginKey = require("../plugins/analytics/plugin-key");
+
+var _analytics = require("../plugins/analytics");
+
+// This was existing logic when converting from ReactNodeView
+// our current sampling for this event is not bound by node.type
+var nodeViewRenderedEventsCounter = 0;
+exports.nodeViewRenderedEventsCounter = nodeViewRenderedEventsCounter;
+var DEFAULT_SAMPLING_RATE = 100;
+var DEFAULT_SLOW_THRESHOLD = 7;
+
+function getPerformanceOptions(view) {
+  var pluginState = _pluginKey.analyticsPluginKey.getState(view.state);
+
+  var nodeViewTracking = pluginState && pluginState.performanceTracking ? pluginState.performanceTracking.nodeViewTracking || {} : {};
+  var samplingRate = nodeViewTracking.samplingRate || DEFAULT_SAMPLING_RATE;
+  var slowThreshold = nodeViewTracking.slowThreshold || DEFAULT_SLOW_THRESHOLD;
+  return {
+    trackingEnabled: !!nodeViewTracking.enabled,
+    samplingRate: samplingRate,
+    slowThreshold: slowThreshold
+  };
+}
+
+function startMeasureReactNodeViewRendered(_ref) {
+  var nodeTypeName = _ref.nodeTypeName;
+  (0, _utils.startMeasure)("\uD83E\uDD89".concat(nodeTypeName, "::ReactNodeView"));
+}
+
+function stopMeasureReactNodeViewRendered(_ref2) {
+  var nodeTypeName = _ref2.nodeTypeName,
+      dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+      editorState = _ref2.editorState,
+      samplingRate = _ref2.samplingRate,
+      slowThreshold = _ref2.slowThreshold;
+  (0, _utils.stopMeasure)("\uD83E\uDD89".concat(nodeTypeName, "::ReactNodeView"), function (duration) {
+    if ((exports.nodeViewRenderedEventsCounter = nodeViewRenderedEventsCounter = +nodeViewRenderedEventsCounter + 1) % samplingRate === 0 && duration > slowThreshold) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.REACT_NODEVIEW_RENDERED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          node: nodeTypeName,
+          duration: duration,
+          participants: (0, _getParticipantsCount.getParticipantsCount)(editorState)
+        }
+      });
+    }
+  });
+}

package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
@@ -103,7 +105,9 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
           disabled = _this$props.disabled,
           intl = _this$props.intl;
       var title = intl.formatMessage(_messages.messages.alignment);
-      return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+      return (0, _react2.jsx)("span", {
+        css: _styles.wrapper
+      }, (0, _react2.jsx)(_Dropdown.default, {
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
@@ -112,7 +116,7 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         handleEscapeKeydown: this.hide,
         fitWidth: 112,
         fitHeight: 80,
-        trigger: /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+        trigger: (0, _react2.jsx)(_ToolbarButton.default, {
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: disabled,
           selected: isOpen,
@@ -122,18 +126,24 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
           "aria-expanded": isOpen,
           "aria-haspopup": true,
           onClick: this.toggleOpen,
-          iconBefore: /*#__PURE__*/_react.default.createElement(_styles.TriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_iconMap.IconMap, {
+          iconBefore: (0, _react2.jsx)("div", {
+            css: _styles.triggerWrapper
+          }, (0, _react2.jsx)(_iconMap.IconMap, {
             alignment: pluginState.align
-          }), /*#__PURE__*/_react.default.createElement(_styles.ExpandIconWrapper, null, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          }), (0, _react2.jsx)("span", {
+            css: _styles.expandIconWrapper
+          }, (0, _react2.jsx)(_chevronDown.default, {
             label: ""
           })))
         })
-      }, /*#__PURE__*/_react.default.createElement(_Alignment.default, {
+      }, (0, _react2.jsx)(_Alignment.default, {
         onClick: function onClick(align) {
           return _this2.changeAlignment(align);
         },
         selectedAlignment: pluginState.align
-      })), /*#__PURE__*/_react.default.createElement(_styles.Separator, null));
+      })), (0, _react2.jsx)("span", {
+        css: _styles.separator
+      }));
     }
   }]);
   return AlignmentToolbar;

package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -5,28 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.TriggerWrapper = exports.Separator = exports.ExpandIconWrapper = void 0;
+exports.wrapper = exports.triggerWrapper = exports.separator = exports.expandIconWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var TriggerWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
-
-exports.TriggerWrapper = TriggerWrapper;
-
-var Separator = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), _colors.N30);
-
-exports.Separator = Separator;
-
-var Wrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
-
-exports.Wrapper = Wrapper;
-
-var ExpandIconWrapper = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
-
-exports.ExpandIconWrapper = ExpandIconWrapper;
+var triggerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+exports.triggerWrapper = triggerWrapper;
+var separator = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), _colors.N30);
+exports.separator = separator;
+var wrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
+exports.wrapper = wrapper;
+var expandIconWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
+exports.expandIconWrapper = expandIconWrapper;

package/dist/cjs/plugins/analytics/types/enums.js

@@ -51,6 +51,7 @@ exports.ACTION = ACTION;
   ACTION["RE_RENDERED"] = "reRendered";
   ACTION["ENTERED"] = "entered";
   ACTION["ERRORED"] = "errored";
+  ACTION["EXPOSED"] = "exposed";
   ACTION["FAILED_TO_UNMOUNT"] = "failedToUnmount";
   ACTION["FIND_NEXT_PERFORMED"] = "findNextPerformed";
   ACTION["FIND_PERFORMED"] = "findPerformed";
@@ -169,6 +170,7 @@ exports.ACTION_SUBJECT = ACTION_SUBJECT;
   ACTION_SUBJECT["EMBEDS"] = "embeds";
   ACTION_SUBJECT["EXPAND"] = "expand";
   ACTION_SUBJECT["EXTENSION"] = "extension";
+  ACTION_SUBJECT["FEATURE"] = "feature";
   ACTION_SUBJECT["FEEDBACK_DIALOG"] = "feedbackDialog";
   ACTION_SUBJECT["FIND_REPLACE_DIALOG"] = "findReplaceDialog";
   ACTION_SUBJECT["FLOATING_CONTEXTUAL_BUTTON"] = "floatingContextualButton";

package/dist/cjs/plugins/avatar-group/ui/AvatarGroupPluginWrapper.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,11 +9,11 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _avatarsWithPluginState = _interopRequireDefault(require("../../collab-edit/ui/avatars-with-plugin-state"));
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _avatarsWithPluginState = _interopRequireDefault(require("../../collab-edit/ui/avatars-with-plugin-state"));
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -23,15 +21,10 @@ var _messages = require("../messages");
 
 var _analytics = require("../../analytics");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var ToolbarButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-grow: ", ";\n  justify-content: flex-end;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])), function (props) {
-  return props.takeFullWidth ? 1 : 0;
-});
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 0;\n  align-items: center;\n  & > div {\n    margin-right: 0;\n  }\n"])));
+var toolbarButtonWrapperFullWidth = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  flex-grow: 1;\n"])), toolbarButtonWrapper);
 
 var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
   var dispatchAnalyticsEvent = props.dispatchAnalyticsEvent;
@@ -48,11 +41,11 @@ var AvatarGroupPluginWrapper = function AvatarGroupPluginWrapper(props) {
       eventType: _analytics.EVENT_TYPE.UI
     });
   }, [dispatchAnalyticsEvent]);
-  return /*#__PURE__*/_react.default.createElement(ToolbarButtonWrapper, {
+  return (0, _react2.jsx)("div", {
     "aria-label": intl.formatMessage(_messages.avatarGroupMessages.editors),
     "data-testid": 'avatar-group-in-plugin',
-    takeFullWidth: props.takeFullWidth
-  }, /*#__PURE__*/_react.default.createElement(_avatarsWithPluginState.default, {
+    css: props.takeFullWidth ? toolbarButtonWrapperFullWidth : toolbarButtonWrapper
+  }, (0, _react2.jsx)(_avatarsWithPluginState.default, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: props.collabEdit && props.collabEdit.inviteToEditComponent,

package/dist/cjs/plugins/base/index.js

@@ -61,12 +61,31 @@ var basePlugin = function basePlugin(options) {
           var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
           return (0, _filterSteps.default)(dispatchAnalyticsEvent);
         }
-      }, {
-        name: 'inlineCursorTargetPlugin',
-        plugin: function plugin() {
-          return options && options.allowInlineCursorTarget ? (0, _inlineCursorTarget.default)() : undefined;
-        }
-      }, {
+      }]; // In Chrome, when the selection is placed between adjacent nodes which are not contenteditatble
+      // the cursor appears at the right most point of the parent container.
+      // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
+      // no cursor is presented to users.
+      // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
+      // the cursor appears inside the adjacent nodes.
+      // This plugin workarounds the issues with chrome and firefox by inserting decorations between
+      // inline nodes which are set as contenteditable, and have a zero width space.
+      // At time of development, using this workaround in Safari caused additional issues;
+      // - visual artifacts when moving across inline nodes (ie. using the arrow key to traverse a
+      //   series of inline nodes)
+      // - blocking the right arrow key when at the start of a line from moving to the end of the
+      //   previous line.
+      // As such we only apply the workaround for firefox and chrome.
+
+      if (_utils.browser.chrome || _utils.browser.gecko) {
+        plugins.push({
+          name: 'inlineCursorTargetPlugin',
+          plugin: function plugin() {
+            return options && options.allowInlineCursorTarget ? (0, _inlineCursorTarget.default)() : undefined;
+          }
+        });
+      }
+
+      plugins.push({
         name: 'focusHandlerPlugin',
         plugin: function plugin(_ref2) {
           var dispatch = _ref2.dispatch;
@@ -125,7 +144,7 @@ var basePlugin = function basePlugin(options) {
               providerFactory = _ref5.providerFactory;
           return (0, _betterTypeHistory.default)();
         }
-      }];
+      });
 
       if (options && options.allowScrollGutter) {
         plugins.push({

package/dist/cjs/plugins/base/pm-plugins/inline-cursor-target.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSpecial = exports.inlineCursorTargetStateKey = exports.findSpecialNodeBefore = exports.findSpecialNodeAfter = exports.default = exports.SPECIAL_NODES = void 0;
+exports.isInlineNodeView = exports.inlineCursorTargetStateKey = exports.findInlineNodeViewBefore = exports.findInlineNodeViewAfter = exports.default = void 0;
 
 var _prosemirrorView = require("prosemirror-view");
 
@@ -13,64 +13,30 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _utils = require("@atlaskit/editor-common/utils");
 
+var _utils2 = require("../../../utils");
+
 var inlineCursorTargetStateKey = new _prosemirrorState.PluginKey('inlineCursorTargetPlugin');
 exports.inlineCursorTargetStateKey = inlineCursorTargetStateKey;
-var SPECIAL_NODES = ['mention', 'emoji'];
-exports.SPECIAL_NODES = SPECIAL_NODES;
 
-var isSpecial = function isSpecial(node) {
-  return node && SPECIAL_NODES.indexOf(node.type.name) !== -1;
+var isInlineNodeView = function isInlineNodeView(node) {
+  return node && node.type.isInline && !node.type.isText;
 };
 
-exports.isSpecial = isSpecial;
-
-var findSpecialNodeAfter = function findSpecialNodeAfter($pos, tr) {
-  if (isSpecial($pos.nodeAfter)) {
-    return $pos.pos + 1;
-  }
-
-  var parentOffset = $pos.parentOffset,
-      parent = $pos.parent;
-  var docSize = tr.doc.nodeSize - 2;
-
-  if (parentOffset === parent.content.size && $pos.pos + 1 < docSize - 2) {
-    var _tr$doc$resolve = tr.doc.resolve($pos.pos + 1),
-        nodeAfter = _tr$doc$resolve.nodeAfter;
+exports.isInlineNodeView = isInlineNodeView;
 
-    if (nodeAfter && isSpecial(nodeAfter.firstChild)) {
-      return $pos.pos + 2;
-    }
-  }
-
-  return;
+var findInlineNodeViewAfter = function findInlineNodeViewAfter($pos) {
+  return isInlineNodeView($pos.nodeAfter);
 };
 
-exports.findSpecialNodeAfter = findSpecialNodeAfter;
-
-var findSpecialNodeBefore = function findSpecialNodeBefore($pos, tr) {
-  if (isSpecial($pos.nodeBefore)) {
-    return $pos.pos - 1;
-  }
-
-  if ($pos.pos === 0) {
-    return;
-  }
-
-  var parentOffset = $pos.parentOffset;
-
-  if (parentOffset === 0) {
-    var _tr$doc$resolve2 = tr.doc.resolve($pos.pos - 1),
-        nodeBefore = _tr$doc$resolve2.nodeBefore;
-
-    if (nodeBefore && isSpecial(nodeBefore.firstChild)) {
-      return $pos.pos - 2;
-    }
-  }
+exports.findInlineNodeViewAfter = findInlineNodeViewAfter;
 
-  return;
+var findInlineNodeViewBefore = function findInlineNodeViewBefore($pos) {
+  return isInlineNodeView($pos.nodeBefore) || // This prevents the cursor from disappearing when at the beginning
+  // of a paragraph and next to an inline node view.
+  $pos.parentOffset === 0 && isInlineNodeView($pos.nodeAfter);
 };
 
-exports.findSpecialNodeBefore = findSpecialNodeBefore;
+exports.findInlineNodeViewBefore = findInlineNodeViewBefore;
 
 var _default = function _default() {
   return new _safePlugin.SafePlugin({
@@ -78,26 +44,49 @@ var _default = function _default() {
     state: {
       init: function init() {
         return {
-          positions: []
+          cursorTarget: undefined
         };
       },
       apply: function apply(tr) {
         var selection = tr.selection;
-        var $from = selection.$from;
-        var positions = [];
-        var posAfter = findSpecialNodeAfter($from, tr);
-        var posBefore = findSpecialNodeBefore($from, tr);
-
-        if (posAfter !== undefined) {
-          positions.push(posAfter);
-        }
-
-        if (posBefore !== undefined) {
-          positions.push(posBefore);
+        var $from = selection.$from,
+            $to = selection.$to;
+
+        if (selection && (0, _utils2.isTextSelection)(selection)) {
+          var hasInlineNodeViewAfter = findInlineNodeViewAfter($from);
+          var hasInlineNodeViewBefore = findInlineNodeViewBefore($from); // Create editable widgets either side of the cursor to allow
+          // text input. This prevents issues with the cursor disappearing
+          // or apperaing in the wrong place when positioned between
+          // non contenteditable nodes.
+          // We check beforeInput events below to prevent content
+          // being added to the decorations.
+
+          if (hasInlineNodeViewAfter && hasInlineNodeViewBefore) {
+            var createWidget = function createWidget(side) {
+              var node = document.createElement('span');
+              node.contentEditable = 'true';
+              node.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
+              return _prosemirrorView.Decoration.widget(selection.from, node, {
+                raw: true,
+                side: side === 'left' ? -1 : 1,
+                key: 'inlineCursor'
+              });
+            };
+
+            return {
+              cursorTarget: {
+                decorations: [createWidget('left'), createWidget('right')],
+                positions: {
+                  from: $from.pos,
+                  to: $to.pos
+                }
+              }
+            };
+          }
         }
 
         return {
-          positions: positions
+          cursorTarget: undefined
         };
       }
     },
@@ -105,26 +94,102 @@ var _default = function _default() {
       decorations: function decorations(state) {
         var doc = state.doc;
 
-        var _inlineCursorTargetSt = inlineCursorTargetStateKey.getState(state),
-            positions = _inlineCursorTargetSt.positions;
-
-        if (positions && positions.length) {
-          var decorations = positions.map(function (position) {
-            var node = document.createElement('span');
-            node.appendChild(document.createTextNode(_utils.ZERO_WIDTH_SPACE));
-            return _prosemirrorView.Decoration.widget(position, node, {
-              raw: true,
-              side: -1,
-              key: 'inlineCursor'
-            });
-          });
-          return _prosemirrorView.DecorationSet.create(doc, decorations);
+        var _ref = inlineCursorTargetStateKey.getState(state),
+            cursorTarget = _ref.cursorTarget;
+
+        if (cursorTargetHasValidDecorations(cursorTarget)) {
+          return _prosemirrorView.DecorationSet.create(doc, cursorTarget.decorations);
         }
 
         return null;
+      },
+      handleDOMEvents: {
+        // Check the DOM to see if there are inline cursor targets
+        // after a composition event ends. If so, manually insert the
+        // event data in order to prevent contents ending up inside
+        // of the cursor target decorations.
+        compositionend: function compositionend(view, incorrectlyTypedEvent) {
+          // This is typed by the prosemirror definitions as Event,
+          // this type is incorrect, and it is actually an InputEvent
+          var event = incorrectlyTypedEvent;
+          var state = view.state;
+
+          var _ref2 = inlineCursorTargetStateKey.getState(state),
+              cursorTarget = _ref2.cursorTarget;
+
+          if (cursorTarget !== undefined) {
+            handleTextInputInsideCursorTargetDecoration({
+              event: event,
+              cursorTarget: cursorTarget,
+              view: view
+            });
+            return true;
+          }
+
+          return false;
+        },
+        // Check the DOM to see if there are inline cursor targets
+        // before any input event. If so, manually insert the
+        // event data in order to prevent contents ending up inside
+        // of the cursor target decorations.
+        beforeinput: function beforeinput(view, incorrectlyTypedEvent) {
+          // This is typed by the prosemirror definitions as Event,
+          // this type is incorrect, and it is actually an InputEvent
+          var event = incorrectlyTypedEvent;
+          var state = view.state;
+
+          var _ref3 = inlineCursorTargetStateKey.getState(state),
+              cursorTarget = _ref3.cursorTarget;
+
+          if (!event.isComposing && cursorTarget !== undefined) {
+            handleTextInputInsideCursorTargetDecoration({
+              event: event,
+              cursorTarget: cursorTarget,
+              view: view
+            });
+            return true;
+          }
+
+          return false;
+        }
       }
     }
   });
 };
 
-exports.default = _default;
+exports.default = _default;
+
+function cursorTargetHasValidDecorations(cursorTarget) {
+  if (!cursorTarget || // Decorations can end up as null when the decorations prop is
+  // called after the decorations have been removed from the dom.
+  // https://github.com/ProseMirror/prosemirror-view/blob/8f0d313a6389b86a335274fba36534ba1cb21f12/src/decoration.js#L30
+  cursorTarget.decorations.includes(null)) {
+    return false;
+  }
+
+  return true;
+}
+
+function handleTextInputInsideCursorTargetDecoration(_ref4) {
+  var event = _ref4.event,
+      view = _ref4.view,
+      cursorTarget = _ref4.cursorTarget;
+  event.stopPropagation();
+  event.preventDefault();
+  var content = event.data || '';
+  var tr = view.state.tr; // ensure any custom handleTextInput handlers are called for the input event
+  // ie. type ahead, emoji shortcuts.
+
+  var potentiallyHandleByHandleTextInput = view.someProp('handleTextInput', function (f) {
+    return f(view, cursorTarget.positions.from, cursorTarget.positions.to, content);
+  });
+
+  if (potentiallyHandleByHandleTextInput) {
+    // if a handleTextInput handler has handled the event, we don't want to
+    // manually update the document.
+    return;
+  }
+
+  tr.insertText(content);
+  view.dispatch(tr);
+}

package/dist/cjs/plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper.js

@@ -5,22 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BeforePrimaryToolbarWrapper = exports.BeforePrimaryToolbarPluginWrapper = void 0;
+exports.BeforePrimaryToolbarWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject;
 
-var BeforePrimaryToolbarPluginWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
-
-exports.BeforePrimaryToolbarPluginWrapper = BeforePrimaryToolbarPluginWrapper;
+var beforePrimaryToolbarPluginWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 8px;\n  flex-grow: 1;\n  justify-content: flex-end;\n  align-items: center;\n"])));
 
 var BeforePrimaryToolbarWrapper = function BeforePrimaryToolbarWrapper(props) {
-  return /*#__PURE__*/_react.default.createElement(BeforePrimaryToolbarPluginWrapper, {
+  return (0, _react.jsx)("div", {
+    css: beforePrimaryToolbarPluginWrapper,
     "data-testid": 'before-primary-toolbar-components-plugin'
   }, props.beforePrimaryToolbarComponents);
 };