@contentful/field-editor-rich-text 2.0.0-next.12 → 2.0.0-next.15

package/dist/field-editor-rich-text.cjs.development.js

@@ -6,7 +6,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var contentfulSlatejsAdapter = require('@contentful/contentful-slatejs-adapter');
 var fieldEditorReference = require('@contentful/field-editor-reference');
 var fieldEditorShared = require('@contentful/field-editor-shared');
 var Contentful = require('@contentful/rich-text-types');
@@ -14,12 +13,12 @@ var plateCore = require('@udecode/plate-core');
 var emotion = require('emotion');
 var deepEquals = _interopDefault(require('fast-deep-equal'));
 var noop = _interopDefault(require('lodash/noop'));
-var constate = _interopDefault(require('constate'));
 var plateSerializerDocx = require('@udecode/plate-serializer-docx');
 var plateBreak = require('@udecode/plate-break');
 var isHotkey = _interopDefault(require('is-hotkey'));
 var slate = require('slate');
 var Slate = require('slate-react');
+var constate = _interopDefault(require('constate'));
 var f36Components = require('@contentful/f36-components');
 var mimetype = _interopDefault(require('@contentful/mimetype'));
 var get = _interopDefault(require('lodash/get'));
@@ -34,7 +33,10 @@ var isPlainObject = _interopDefault(require('is-plain-obj'));
 var plateParagraph = require('@udecode/plate-paragraph');
 var plateSelect = require('@udecode/plate-select');
 var plateTable = require('@udecode/plate-table');
+var contentfulSlateJSAdapter = require('@contentful/contentful-slatejs-adapter');
+var richTextPlainTextRenderer = require('@contentful/rich-text-plain-text-renderer');
 var plateTrailingBlock = require('@udecode/plate-trailing-block');
+var debounce = _interopDefault(require('lodash/debounce'));
 var PropTypes = _interopDefault(require('prop-types'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -244,126 +246,37 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var _extends2, _extends4, _inlines;
-var inlines = /*#__PURE__*/Object.values(Contentful.INLINES).map(function (type) {
-  return {
-    type: type
-  };
-});
-var schema = {
-  document: {
-    nodes: [{
-      types: /*#__PURE__*/Contentful.TOP_LEVEL_BLOCKS.map(function (type) {
-        return {
-          type: type
-        };
-      })
-    }]
-  },
-  blocks: /*#__PURE__*/_extends((_extends2 = {}, _extends2[Contentful.BLOCKS.PARAGRAPH] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_1] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_2] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_3] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_4] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_5] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[Contentful.BLOCKS.HEADING_6] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2), /*#__PURE__*/Contentful.VOID_BLOCKS.reduce(function (blocks, nodeType) {
-    var _extends3;
-
-    return _extends({}, blocks, (_extends3 = {}, _extends3[nodeType] = {
-      isVoid: true
-    }, _extends3));
-  }, {}), (_extends4 = {}, _extends4[Contentful.BLOCKS.QUOTE] = {
-    nodes: [{
-      match: [/*#__PURE__*/Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE].map(function (type) {
-        return {
-          type: type
-        };
-      })],
-      min: 1
-    }],
-    normalize: function normalize(editor, error) {
-      if (error.code === 'child_type_invalid') {
-        return editor.unwrapBlockByKey(error.node.key, Contentful.BLOCKS.QUOTE);
-      }
-    }
-  }, _extends4)),
-  inlines: (_inlines = {}, _inlines[Contentful.INLINES.HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[Contentful.INLINES.ENTRY_HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[Contentful.INLINES.ASSET_HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[Contentful.INLINES.EMBEDDED_ENTRY] = {
-    isVoid: true
-  }, _inlines)
-};
-
 function getContentfulEditorId(sdk) {
   var entry = sdk.entry,
       field = sdk.field;
   var sys = entry.getSys();
   return "rich-text-editor-" + sys.id + "-" + field.id + "-" + field.locale;
 }
+var editorContext = /*#__PURE__*/React.createContext('');
+var ContentfulEditorIdProvider = editorContext.Provider;
+function useContentfulEditorId() {
+  var id = React.useContext(editorContext);
 
-function useContentfulEditorHook(_ref) {
-  var sdk = _ref.sdk;
-  var editorId = getContentfulEditorId(sdk);
+  if (!id) {
+    throw new Error('could not find editor id. Please ensure the component is wrapped in <ContentfulEditorIdProvider> ');
+  }
+
+  return id;
+} // This hook re-renders when the value changes
+// Use case: Toolbar icons, for example
+
+function useContentfulEditor() {
+  var editorId = useContentfulEditorId();
+  var editor = plateCore.usePlateEditorState(editorId);
+  return editor;
+} // This doesn't re-render when the value changes
+
+function useContentfulEditorRef() {
+  var editorId = useContentfulEditorId();
   var editor = plateCore.usePlateEditorRef(editorId);
   return editor;
 }
 
-var _constate = /*#__PURE__*/constate(useContentfulEditorHook),
-    ContentfulEditorProvider = _constate[0],
-    useContentfulEditor = _constate[1];
-
 var createSoftBreakPlugin = function createSoftBreakPlugin() {
   return plateBreak.createSoftBreakPlugin({
     then: function then(editor) {
@@ -543,6 +456,10 @@ function insertLink(editor, options) {
 } // TODO: move to hyperlink plugin
 
 function isLinkActive(editor) {
+  if (!editor) {
+    return false;
+  }
+
   var _Array$from2 = Array.from(slate.Editor.nodes(editor, {
     match: function match(node) {
       return !slate.Editor.isEditor(node) && slate.Element.isElement(node) && LINK_TYPES.includes(node.type);
@@ -702,12 +619,14 @@ var focus = function focus(editor) {
   }
 };
 
-function withLinkTracking(tracking, Component) {
+function withLinkTracking(Component) {
   return function ComponentWithTracking(props) {
+    var editor = useContentfulEditorRef();
+    var onEntityFetchComplete = React__default.useCallback(function () {
+      return editor.tracking.onViewportAction('linkRendered');
+    }, [editor]);
     return /*#__PURE__*/React__default.createElement(Component, Object.assign({}, props, {
-      onEntityFetchComplete: function onEntityFetchComplete() {
-        tracking.onViewportAction('linkRendered');
-      }
+      onEntityFetchComplete: onEntityFetchComplete
     }));
   };
 }
@@ -721,9 +640,9 @@ function useSdk(_ref) {
   return sdkMemo;
 }
 
-var _constate$1 = /*#__PURE__*/constate(useSdk),
-    SdkProvider = _constate$1[0],
-    useSdkContext = _constate$1[1];
+var _constate = /*#__PURE__*/constate(useSdk),
+    SdkProvider = _constate[0],
+    useSdkContext = _constate[1];
 
 var styles = {
   scheduleIcon: /*#__PURE__*/emotion.css({
@@ -1973,12 +1892,11 @@ function _selectEntityAndInsert() {
             config = _extends({}, baseConfig, {
               withCreate: true
             });
-            _context.prev = 5;
             selection = editor.selection;
-            _context.next = 9;
+            _context.next = 8;
             return selectEntity(config);
 
-          case 9:
+          case 8:
             entity = _context.sent;
 
             if (entity) {
@@ -1986,6 +1904,9 @@ function _selectEntityAndInsert() {
               break;
             }
 
+            logAction('cancelCreateEmbedDialog', {
+              nodeType: nodeType
+            });
             return _context.abrupt("return");
 
           case 12:
@@ -1994,31 +1915,13 @@ function _selectEntityAndInsert() {
             logAction('insert', {
               nodeType: nodeType
             });
-            _context.next = 24;
-            break;
-
-          case 17:
-            _context.prev = 17;
-            _context.t0 = _context["catch"](5);
 
-            if (!_context.t0) {
-              _context.next = 23;
-              break;
-            }
-
-            throw _context.t0;
-
-          case 23:
-            logAction('cancelCreateEmbedDialog', {
-              nodeType: nodeType
-            });
-
-          case 24:
+          case 15:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[5, 17]]);
+    }, _callee);
   }));
   return _selectEntityAndInsert.apply(this, arguments);
 }
@@ -2065,7 +1968,6 @@ var styles$4 = {
 function EmbeddedEntityBlockToolbarIcon(_ref) {
   var isButton = _ref.isButton,
       isDisabled = _ref.isDisabled,
-      logAction = _ref.logAction,
       nodeType = _ref.nodeType,
       onClose = _ref.onClose;
   var editor = useContentfulEditor();
@@ -2074,7 +1976,7 @@ function EmbeddedEntityBlockToolbarIcon(_ref) {
   var handleClick = function handleClick(event) {
     event.preventDefault();
     onClose();
-    selectEntityAndInsert(nodeType, sdk, editor, logAction || noop);
+    selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onToolbarAction);
   };
 
   var type = getEntityTypeFromNodeType(nodeType);
@@ -2141,20 +2043,20 @@ function getWithEmbeddedEntityEvents(nodeType, sdk) {
       }
 
       if (hotkey && isHotkey(hotkey, event)) {
-        selectEntityAndInsert(nodeType, sdk, editor, noop);
+        selectEntityAndInsert(nodeType, sdk, editor, editor.tracking.onShortcutAction);
       }
     };
   };
 }
 
 var createEmbeddedEntityPlugin = function createEmbeddedEntityPlugin(nodeType, hotkey) {
-  return function (sdk, tracking) {
+  return function (sdk) {
     return {
       key: nodeType,
       type: nodeType,
       isElement: true,
       isVoid: true,
-      component: withLinkTracking(tracking, LinkedEntityBlock),
+      component: withLinkTracking(LinkedEntityBlock),
       options: {
         hotkey: hotkey
       },
@@ -2372,44 +2274,53 @@ function EmbeddedEntityInline(props) {
   })), props.children);
 }
 
-function selectEntityAndInsert$1(_x, _x2) {
+function selectEntityAndInsert$1(_x, _x2, _x3) {
   return _selectEntityAndInsert$1.apply(this, arguments);
 }
 
 function _selectEntityAndInsert$1() {
-  _selectEntityAndInsert$1 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(editor, sdk) {
+  _selectEntityAndInsert$1 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(editor, sdk, logAction) {
     var config, selection, entry, inlineEntryNode;
     return runtime_1.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            logAction('openCreateEmbedDialog', {
+              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            });
             config = _extends({}, newEntitySelectorConfigFromRichTextField(sdk.field, Contentful.INLINES.EMBEDDED_ENTRY), {
               withCreate: true
             });
             selection = editor.selection;
-            _context2.next = 4;
+            _context2.next = 5;
             return sdk.dialogs.selectSingleEntry(config);
 
-          case 4:
+          case 5:
             entry = _context2.sent;
             focus(editor); // Dialog steals focus from editor, return it.
 
             if (entry) {
-              _context2.next = 8;
+              _context2.next = 10;
               break;
             }
 
+            logAction('cancelCreateEmbedDialog', {
+              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            });
             return _context2.abrupt("return");
 
-          case 8:
+          case 10:
             inlineEntryNode = createInlineEntryNode(entry.sys.id); // Got to wait until focus is really back on the editor or setSelection() won't work.
 
             setTimeout(function () {
               slate.Transforms.setSelection(editor, selection);
               slate.Transforms.insertNodes(editor, inlineEntryNode);
             }, 0);
+            logAction('insert', {
+              nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+            });
 
-          case 10:
+          case 13:
           case "end":
             return _context2.stop();
         }
@@ -2423,7 +2334,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
 
-  function handleClick(_x3) {
+  function handleClick(_x4) {
     return _handleClick.apply(this, arguments);
   }
 
@@ -2445,7 +2356,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
             case 3:
               props.onClose();
               _context.next = 6;
-              return selectEntityAndInsert$1(editor, sdk);
+              return selectEntityAndInsert$1(editor, sdk, editor.tracking.onToolbarAction);
 
             case 6:
             case "end":
@@ -2478,7 +2389,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     className: "rich-text__embedded-entry-list-icon " + styles$6.icon
   }), /*#__PURE__*/React.createElement("span", null, "Inline entry")));
 }
-function createEmbeddedEntityInlinePlugin(sdk, tracking) {
+function createEmbeddedEntityInlinePlugin(sdk) {
   var htmlAttributeName = 'data-embedded-entity-inline-id';
   return {
     key: Contentful.INLINES.EMBEDDED_ENTRY,
@@ -2486,7 +2397,7 @@ function createEmbeddedEntityInlinePlugin(sdk, tracking) {
     isElement: true,
     isInline: true,
     isVoid: true,
-    component: withLinkTracking(tracking, EmbeddedEntityInline),
+    component: withLinkTracking(EmbeddedEntityInline),
     options: {
       hotkey: 'mod+shift+2'
     },
@@ -2512,7 +2423,7 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
       if (!editor) return;
 
       if (hotkey && isHotkey(hotkey, event)) {
-        selectEntityAndInsert$1(editor, sdk);
+        selectEntityAndInsert$1(editor, sdk, editor.tracking.onShortcutAction);
       }
     };
   };
@@ -2615,6 +2526,10 @@ function ToolbarHeadingButton(props) {
         prevOnChange.apply(void 0, arguments);
       };
 
+      var isActive = isBlockSelected(editor, type);
+      editor.tracking.onToolbarAction(isActive ? 'remove' : 'insert', {
+        nodeType: type
+      });
       plateCore.toggleNodeType(editor, {
         activeType: type,
         inactiveType: type
@@ -2736,6 +2651,24 @@ function createHeading(Tag, block) {
 
 var HeadingComponents = (_HeadingComponents = {}, _HeadingComponents[Contentful.BLOCKS.HEADING_1] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h1', Contentful.BLOCKS.HEADING_1)), _HeadingComponents[Contentful.BLOCKS.HEADING_2] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h2', Contentful.BLOCKS.HEADING_2)), _HeadingComponents[Contentful.BLOCKS.HEADING_3] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h3', Contentful.BLOCKS.HEADING_3)), _HeadingComponents[Contentful.BLOCKS.HEADING_4] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h4', Contentful.BLOCKS.HEADING_4)), _HeadingComponents[Contentful.BLOCKS.HEADING_5] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h5', Contentful.BLOCKS.HEADING_5)), _HeadingComponents[Contentful.BLOCKS.HEADING_6] = /*#__PURE__*/React.memo( /*#__PURE__*/createHeading('h6', Contentful.BLOCKS.HEADING_6)), _HeadingComponents);
 
+var buildHeadingEventHandler = function buildHeadingEventHandler(type) {
+  return function (editor, _ref) {
+    var hotkey = _ref.options.hotkey;
+    return function (event) {
+      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+        var isActive = isBlockSelected(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'remove' : 'insert', {
+          nodeType: type
+        });
+        plateCore.toggleNodeType(editor, {
+          activeType: type,
+          inactiveType: Contentful.BLOCKS.PARAGRAPH
+        });
+      }
+    };
+  };
+};
+
 var createHeadingPlugin = function createHeadingPlugin() {
   var _transform;
 
@@ -2752,8 +2685,8 @@ var createHeadingPlugin = function createHeadingPlugin() {
       match: {
         type: Contentful.HEADINGS
       },
-      validChildren: function validChildren(_, _ref) {
-        var node = _ref[0];
+      validChildren: function validChildren(_, _ref2) {
+        var node = _ref2[0];
         return isInlineOrText(node);
       },
       transform: (_transform = {}, _transform[Contentful.BLOCKS.PARAGRAPH] = transformUnwrap, _transform["default"] = transformLift, _transform)
@@ -2770,8 +2703,8 @@ var createHeadingPlugin = function createHeadingPlugin() {
             start: true,
             // Exclude headings inside lists as it interferes with the list's
             // insertBreak implementation
-            filter: function filter(_ref2) {
-              var path = _ref2[1];
+            filter: function filter(_ref3) {
+              var path = _ref3[1];
               return !plateCore.getAbove(editor, {
                 at: path,
                 match: {
@@ -2795,7 +2728,7 @@ var createHeadingPlugin = function createHeadingPlugin() {
           hotkey: ["mod+alt+" + level]
         },
         handlers: {
-          onKeyDown: plateCore.onKeyDownToggleElement
+          onKeyDown: buildHeadingEventHandler(nodeType)
         },
         deserializeHtml: {
           rules: [{
@@ -2867,10 +2800,6 @@ function withHrEvents(editor) {
         pathToSelectedHr = _getNodeEntryFromSele[1];
 
     if (pathToSelectedHr) {
-      if (shouldUnwrapBlockquote(editor, Contentful.BLOCKS.HR)) {
-        unwrapFromRoot(editor);
-      }
-
       var isBackspace = event.key === 'Backspace';
       var isDelete = event.key === 'Delete';
 
@@ -2888,11 +2817,6 @@ function ToolbarHrButton(props) {
 
   function handleOnClick() {
     if (!(editor != null && editor.selection)) return;
-
-    if (shouldUnwrapBlockquote(editor, Contentful.BLOCKS.HR)) {
-      unwrapFromRoot(editor);
-    }
-
     var hr = {
       type: Contentful.BLOCKS.HR,
       data: {},
@@ -3325,13 +3249,15 @@ function HyperlinkModal(props) {
     testId: "confirm-cta"
   }, props.linkType ? 'Update' : 'Insert'))));
 }
-function addOrEditLink(_x, _x2) {
+function addOrEditLink(_x, _x2, _x3) {
   return _addOrEditLink.apply(this, arguments);
 }
 
 function _addOrEditLink() {
-  _addOrEditLink = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(editor, sdk) {
-    var linkType, linkText, linkTarget, linkEntity, _getNodeEntryFromSele, node, path, selectionBeforeBlur, currentLinkText, data, text, url, type, target;
+  _addOrEditLink = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(editor, sdk, logAction) {
+    var _target$sys$linkType;
+
+    var linkType, linkText, linkTarget, linkEntity, _getNodeEntryFromSele, node, path, selectionBeforeBlur, currentLinkText, isEditing, data, text, url, type, target;
 
     return runtime_1.wrap(function _callee3$(_context3) {
       while (1) {
@@ -3356,9 +3282,11 @@ function _addOrEditLink() {
 
             selectionBeforeBlur = _extends({}, editor.selection);
             currentLinkText = linkText || slate.Editor.string(editor, editor.selection);
-            _context3.next = 8;
+            isEditing = Boolean(node && path);
+            logAction(isEditing ? 'openEditHyperlinkDialog' : 'openCreateHyperlinkDialog');
+            _context3.next = 10;
             return fieldEditorShared.ModalDialogLauncher.openDialog({
-              title: linkType ? 'Edit hyperlink' : 'Insert hyperlink',
+              title: isEditing ? 'Edit hyperlink' : 'Insert hyperlink',
               width: 'large',
               shouldCloseOnEscapePress: true,
               shouldCloseOnOverlayClick: true,
@@ -3375,17 +3303,18 @@ function _addOrEditLink() {
               });
             });
 
-          case 8:
+          case 10:
             data = _context3.sent;
 
             if (data) {
-              _context3.next = 11;
+              _context3.next = 14;
               break;
             }
 
+            logAction(isEditing ? 'cancelEditHyperlinkDialog' : 'cancelCreateHyperlinkDialog');
             return _context3.abrupt("return");
 
-          case 11:
+          case 14:
             text = data.linkText, url = data.linkTarget, type = data.linkType, target = data.linkEntity;
             slate.Transforms.select(editor, selectionBeforeBlur);
             slate.Editor.withoutNormalizing(editor, function () {
@@ -3397,9 +3326,13 @@ function _addOrEditLink() {
                 path: path
               });
             });
+            logAction(isEditing ? 'edit' : 'insert', {
+              nodeType: type,
+              linkType: (_target$sys$linkType = target == null ? void 0 : target.sys.linkType) != null ? _target$sys$linkType : 'uri'
+            });
             focus(editor);
 
-          case 15:
+          case 19:
           case "end":
             return _context3.stop();
         }
@@ -3463,7 +3396,7 @@ function UrlHyperlink(props) {
     event.preventDefault();
     event.stopPropagation();
     if (!editor) return;
-    addOrEditLink(editor, sdk);
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
@@ -3499,7 +3432,7 @@ function EntityHyperlink(props) {
     event.preventDefault();
     event.stopPropagation();
     if (!editor) return;
-    addOrEditLink(editor, sdk);
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
   }
 
   return /*#__PURE__*/React.createElement(f36Components.Tooltip, {
@@ -3546,8 +3479,9 @@ function ToolbarHyperlinkButton(props) {
             case 2:
               if (isActive) {
                 unwrapLink(editor);
+                editor.tracking.onToolbarAction('unlinkHyperlinks');
               } else {
-                addOrEditLink(editor, sdk);
+                addOrEditLink(editor, sdk, editor.tracking.onToolbarAction);
               }
 
             case 3:
@@ -3596,8 +3530,9 @@ var buildHyperlinkEventHandler = function buildHyperlinkEventHandler(sdk) {
 
       if (isLinkActive(editor)) {
         unwrapLink(editor);
+        editor.tracking.onShortcutAction('unlinkHyperlinks');
       } else {
-        addOrEditLink(editor, sdk);
+        addOrEditLink(editor, sdk, editor.tracking.onShortcutAction);
       }
     };
   };
@@ -3623,7 +3558,7 @@ var getNodeOfType = function getNodeOfType(type) {
   };
 };
 
-var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
+var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
   var common = {
     isElement: true,
     isInline: true
@@ -3654,7 +3589,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
     _extends({}, common, {
       key: Contentful.INLINES.ENTRY_HYPERLINK,
       type: Contentful.INLINES.ENTRY_HYPERLINK,
-      component: withLinkTracking(tracking, EntityHyperlink),
+      component: withLinkTracking(EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3668,7 +3603,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
     _extends({}, common, {
       key: Contentful.INLINES.ASSET_HYPERLINK,
       type: Contentful.INLINES.ASSET_HYPERLINK,
-      component: withLinkTracking(tracking, EntityHyperlink),
+      component: withLinkTracking(EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -4142,6 +4077,7 @@ var createListPlugin = function createListPlugin() {
     }, _overrideByKey[plateList.ELEMENT_LI] = {
       type: Contentful.BLOCKS.LIST_ITEM,
       component: ListItem,
+      // @ts-expect-error
       normalizer: [{
         validNode: hasListAsDirectParent,
         transform: normalizeOrphanedListItem
@@ -4194,26 +4130,62 @@ function ToolbarListButton(props) {
   }, /*#__PURE__*/React.createElement(f36Icons.ListNumberedIcon, null)));
 }
 
-function ToolbarBoldButton(props) {
-  var editor = useContentfulEditor();
+var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
+  var mark = _ref.mark,
+      title = _ref.title,
+      icon = _ref.icon;
 
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.BOLD
-    });
-    focus(editor);
-  }
+  var Mark = function Mark(_ref2) {
+    var isDisabled = _ref2.isDisabled;
+    var editor = useContentfulEditor();
+    var handleClick = React.useCallback(function () {
+      if (!(editor != null && editor.selection)) return;
+      var isActive = plateCore.isMarkActive(editor, mark);
+      editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
+        markType: mark
+      });
+      plateCore.toggleMark(editor, {
+        key: mark
+      });
+      focus(editor);
+    }, [editor]);
+    if (!editor) return null;
+    return /*#__PURE__*/React.createElement(ToolbarButton, {
+      title: title,
+      testId: mark + "-toolbar-button",
+      onClick: handleClick,
+      isActive: plateCore.isMarkActive(editor, mark),
+      isDisabled: isDisabled
+    }, icon);
+  };
 
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Bold",
-    testId: "bold-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.BOLD),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null));
-}
+  Mark.displayName = mark;
+  return Mark;
+};
+
+var buildMarkEventHandler = function buildMarkEventHandler(type) {
+  return function (editor, _ref) {
+    var hotkey = _ref.options.hotkey;
+    return function (event) {
+      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+        event.preventDefault();
+        var isActive = plateCore.isMarkActive(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
+          markType: type
+        });
+        plateCore.toggleMark(editor, {
+          key: type
+        });
+      }
+    };
+  };
+};
+
+var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Bold',
+  mark: Contentful.MARKS.BOLD,
+  icon: /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null)
+});
 var styles$e = {
   bold: /*#__PURE__*/emotion.css({
     fontWeight: 600
@@ -4236,6 +4208,9 @@ var createBoldPlugin = function createBoldPlugin() {
     options: {
       hotkey: ['mod+b']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.BOLD)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['STRONG', 'B']
@@ -4253,26 +4228,11 @@ var createBoldPlugin = function createBoldPlugin() {
   });
 };
 
-function ToolbarCodeButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.CODE
-    });
-    focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Code",
-    testId: "code-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.CODE),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null));
-}
+var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Code',
+  mark: Contentful.MARKS.CODE,
+  icon: /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null)
+});
 var styles$f = {
   code: /*#__PURE__*/emotion.css({
     fontFamily: 'monospace',
@@ -4291,6 +4251,9 @@ var createCodePlugin = function createCodePlugin() {
     options: {
       hotkey: ['mod+/']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.CODE)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['CODE', 'PRE']
@@ -4303,26 +4266,11 @@ var createCodePlugin = function createCodePlugin() {
   });
 };
 
-function ToolbarItalicButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.ITALIC
-    });
-    focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Italic",
-    testId: "italic-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.ITALIC),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null));
-}
+var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Italic',
+  mark: Contentful.MARKS.ITALIC,
+  icon: /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null)
+});
 var styles$g = {
   italic: /*#__PURE__*/emotion.css({
     fontStyle: 'italic'
@@ -4340,6 +4288,9 @@ var createItalicPlugin = function createItalicPlugin() {
     options: {
       hotkey: ['mod+i']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.ITALIC)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['I', 'EM']
@@ -4357,26 +4308,11 @@ var createItalicPlugin = function createItalicPlugin() {
   });
 };
 
-function ToolbarUnderlineButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    plateCore.toggleMark(editor, {
-      key: Contentful.MARKS.UNDERLINE
-    });
-    focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/React.createElement(ToolbarButton, {
-    title: "Underline",
-    testId: "underline-toolbar-button",
-    onClick: handleClick,
-    isActive: plateCore.isMarkActive(editor, Contentful.MARKS.UNDERLINE),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/React.createElement(f36Icons.FormatUnderlinedIcon, null));
-}
+var ToolbarUnderlineButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Underline',
+  mark: Contentful.MARKS.UNDERLINE,
+  icon: /*#__PURE__*/React.createElement(f36Icons.FormatUnderlinedIcon, null)
+});
 function Underline(props) {
   return /*#__PURE__*/React.createElement("u", Object.assign({}, props.attributes), props.children);
 }
@@ -4387,6 +4323,9 @@ var createUnderlinePlugin = function createUnderlinePlugin() {
     options: {
       hotkey: ['mod+u']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(Contentful.MARKS.UNDERLINE)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['U']
@@ -4609,6 +4548,7 @@ var withNormalizer = function withNormalizer(editor) {
 var createNormalizerPlugin = function createNormalizerPlugin() {
   return {
     key: 'NormalizerPlugin',
+    // @ts-expect-error
     withOverrides: withNormalizer
   };
 };
@@ -4752,11 +4692,54 @@ var sanitizeHTML = function sanitizeHTML(html) {
   return doc.body.innerHTML.replace(/>\s+</g, '><');
 };
 
+/**
+ * Get x-slate-fragment attribute from data-slate-fragment
+ */
+
+var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
+var getSlateFragmentAttribute = function getSlateFragmentAttribute(dataTransfer) {
+  var htmlData = dataTransfer.getData('text/html');
+
+  var _ref = htmlData.match(catchSlateFragment) || [],
+      fragment = _ref[1];
+
+  return fragment;
+};
+/**
+ * Get the x-slate-fragment attribute that exist in text/html data
+ * and append it to the DataTransfer object
+ */
+
+var ensureXSlateFragment = function ensureXSlateFragment(dataTransfer) {
+  if (!dataTransfer.getData('application/x-slate-fragment')) {
+    var fragment = getSlateFragmentAttribute(dataTransfer);
+
+    if (fragment) {
+      var clipboardData = new DataTransfer();
+      dataTransfer.types.forEach(function (type) {
+        clipboardData.setData(type, dataTransfer.getData(type));
+      });
+      clipboardData.setData('application/x-slate-fragment', fragment);
+      return clipboardData;
+    }
+  }
+
+  return dataTransfer;
+};
 var createPasteHTMLPlugin = function createPasteHTMLPlugin() {
   var _pluginsByKey;
 
   return {
     key: 'PasteHTMLPlugin',
+    withOverrides: function withOverrides(editor) {
+      var insertData = editor.insertData;
+
+      editor.insertData = function (data) {
+        return insertData(ensureXSlateFragment(data));
+      };
+
+      return editor;
+    },
     inject: {
       pluginsByKey: (_pluginsByKey = {}, _pluginsByKey[plateCore.KEY_DESERIALIZE_HTML] = {
         editor: {
@@ -4786,9 +4769,12 @@ function Quote(props) {
   }), props.children);
 }
 
-function toggleQuote(editor) {
+function toggleQuote(editor, logAction) {
   if (!editor.selection) return;
   var isActive = isBlockSelected(editor, Contentful.BLOCKS.QUOTE);
+  logAction(isActive ? 'remove' : 'insert', {
+    nodeType: Contentful.BLOCKS.QUOTE
+  });
   slate.Editor.withoutNormalizing(editor, function () {
     if (!editor.selection) return;
     slate.Transforms.unwrapNodes(editor, {
@@ -4820,7 +4806,7 @@ var onKeyDownToggleQuote = function onKeyDownToggleQuote(editor, plugin) {
 
     if (hotkey && isHotkey(hotkey, event)) {
       event.preventDefault();
-      toggleQuote(editor);
+      toggleQuote(editor, editor.tracking.onShortcutAction);
     }
   };
 };
@@ -4847,7 +4833,54 @@ function createQuotePlugin() {
     normalizer: [{
       validChildren: Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE],
       transform: (_transform = {}, _transform[Contentful.BLOCKS.QUOTE] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_1] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_2] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_3] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_4] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_5] = transformUnwrap, _transform[Contentful.BLOCKS.HEADING_6] = transformUnwrap, _transform["default"] = transformLift, _transform)
-    }]
+    }],
+    withOverrides: function withOverrides(editor) {
+      var insertFragment = editor.insertFragment;
+
+      editor.insertFragment = function (fragment) {
+        var startingNode = fragment.length && fragment[0];
+        var startsWithBlockquote = slate.Element.isElement(startingNode) && startingNode.type === Contentful.BLOCKS.QUOTE;
+        var containerEntry = plateCore.getAbove(editor, {
+          match: {
+            type: Contentful.TEXT_CONTAINERS
+          }
+        });
+        var containerIsNotEmpty = containerEntry && slate.Node.string(containerEntry[0]) !== '';
+
+        if (startsWithBlockquote && containerIsNotEmpty) {
+          var selection = editor.selection;
+
+          var isContentSelected = function isContentSelected(selection) {
+            return !!selection && slate.Point.compare(selection.anchor, selection.focus) !== 0;
+          }; // if something is selected (highlighted) we replace the selection
+
+
+          if (isContentSelected(selection)) {
+            slate.Transforms["delete"](editor, {
+              at: selection
+            });
+          } // get the cursor entry again, it may be different after deletion
+
+
+          var _containerEntry = plateCore.getAbove(editor, {
+            match: {
+              type: Contentful.TEXT_CONTAINERS
+            }
+          });
+
+          var _containerIsNotEmpty = _containerEntry && slate.Node.string(_containerEntry[0]) !== '';
+
+          if (_containerIsNotEmpty) {
+            slate.Transforms.insertNodes(editor, fragment);
+            return;
+          }
+        }
+
+        insertFragment(fragment);
+      };
+
+      return editor;
+    }
   };
 }
 
@@ -4856,7 +4889,7 @@ function ToolbarQuoteButton(props) {
 
   function handleOnClick() {
     if (!editor) return;
-    toggleQuote(editor);
+    toggleQuote(editor, editor.tracking.onToolbarAction);
     focus(editor);
   }
 
@@ -4905,8 +4938,7 @@ function hasHeadersOutsideFirstRow(nodes) {
   });
 }
 
-function addTableTrackingEvents(editor, _ref6) {
-  var onViewportAction = _ref6.onViewportAction;
+function addTableTrackingEvents(editor) {
   var insertData = editor.insertData;
 
   editor.insertData = function (data) {
@@ -4920,7 +4952,7 @@ function addTableTrackingEvents(editor, _ref6) {
         if (hasTables(markupBefore)) return;
 
         if (hasTables(markupAfter)) {
-          onViewportAction('paste', {
+          editor.tracking.onViewportAction('paste', {
             tablePasted: true,
             hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
           });
@@ -4932,29 +4964,6 @@ function addTableTrackingEvents(editor, _ref6) {
   };
 }
 
-function useTracking(_ref) {
-  var onAction = _ref.onAction;
-  var trackingMemo = React.useMemo(function () {
-    return {
-      onViewportAction: function onViewportAction(actionName, data) {
-        if (data === void 0) {
-          data = {};
-        }
-
-        return onAction(actionName, _extends({
-          origin: 'viewport-interaction'
-        }, data));
-      }
-    };
-  }, [] // eslint-disable-line
-  );
-  return trackingMemo;
-}
-
-var _constate$2 = /*#__PURE__*/constate(useTracking),
-    TrackingProvider = _constate$2[0],
-    useTrackingContext = _constate$2[1];
-
 var addRow = function addRow(editor, getNextRowPath) {
   if (plateCore.someNode(editor, {
     match: {
@@ -5200,9 +5209,6 @@ var TableActions = function TableActions() {
   var editor = useContentfulEditor();
   var isDisabled = Slate.useReadOnly();
 
-  var _useTrackingContext = useTrackingContext(),
-      onViewportAction = _useTrackingContext.onViewportAction;
-
   var _React$useState = React__default.useState(false),
       isOpen = _React$useState[0],
       setOpen = _React$useState[1];
@@ -5252,11 +5258,11 @@ var TableActions = function TableActions() {
       }); // Tracking
 
       var actionName = type + "Table" + (element === 'Table' ? '' : element);
-      onViewportAction(actionName, {
+      editor.tracking.onViewportAction(actionName, {
         tableSize: tableSize
       });
     };
-  }, [editor, isHeaderEnabled, close, onViewportAction]);
+  }, [editor, isHeaderEnabled, close]);
 
   if (isDisabled) {
     return null;
@@ -5347,7 +5353,7 @@ var createTableOnKeyDown = function createTableOnKeyDown(editor, plugin) {
   };
 };
 
-var createTablePlugin = function createTablePlugin(tracking) {
+var createTablePlugin = function createTablePlugin() {
   var _overrideByKey;
 
   return plateTable.createTablePlugin({
@@ -5356,7 +5362,7 @@ var createTablePlugin = function createTablePlugin(tracking) {
       onKeyDown: createTableOnKeyDown
     },
     withOverrides: function withOverrides(editor) {
-      addTableTrackingEvents(editor, tracking);
+      addTableTrackingEvents(editor);
       var insertFragment = editor.insertFragment;
 
       editor.insertFragment = function (fragments) {
@@ -5456,10 +5462,6 @@ var createTablePlugin = function createTablePlugin(tracking) {
 
 function ToolbarTableButton(props) {
   var editor = useContentfulEditor();
-
-  var _useTrackingContext = useTrackingContext(),
-      onViewportAction = _useTrackingContext.onViewportAction;
-
   var isActive = editor && isTableActive(editor);
 
   function handleClick() {
@@ -5480,7 +5482,7 @@ function ToolbarTableButton(props) {
               return _context.abrupt("return");
 
             case 2:
-              onViewportAction('insertTable');
+              editor.tracking.onToolbarAction('insertTable');
               insertTableAndFocusFirstCell(editor);
               focus(editor);
 
@@ -5585,35 +5587,199 @@ function deleteEmptyParagraph(unit, editor, deleteFunction) {
   }
 }
 
-var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
-  return plateTrailingBlock.createTrailingBlockPlugin({
-    options: {
-      type: Contentful.BLOCKS.PARAGRAPH,
-      level: 0
+var _extends2, _extends4, _inlines;
+var inlines = /*#__PURE__*/Object.values(Contentful.INLINES).map(function (type) {
+  return {
+    type: type
+  };
+});
+var schema = {
+  document: {
+    nodes: [{
+      types: /*#__PURE__*/Contentful.TOP_LEVEL_BLOCKS.map(function (type) {
+        return {
+          type: type
+        };
+      })
+    }]
+  },
+  blocks: /*#__PURE__*/_extends((_extends2 = {}, _extends2[Contentful.BLOCKS.PARAGRAPH] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_1] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_2] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_3] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_4] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_5] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[Contentful.BLOCKS.HEADING_6] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2), /*#__PURE__*/Contentful.VOID_BLOCKS.reduce(function (blocks, nodeType) {
+    var _extends3;
+
+    return _extends({}, blocks, (_extends3 = {}, _extends3[nodeType] = {
+      isVoid: true
+    }, _extends3));
+  }, {}), (_extends4 = {}, _extends4[Contentful.BLOCKS.QUOTE] = {
+    nodes: [{
+      match: [/*#__PURE__*/Contentful.CONTAINERS[Contentful.BLOCKS.QUOTE].map(function (type) {
+        return {
+          type: type
+        };
+      })],
+      min: 1
+    }],
+    normalize: function normalize(editor, error) {
+      if (error.code === 'child_type_invalid') {
+        return editor.unwrapBlockByKey(error.node.key, Contentful.BLOCKS.QUOTE);
+      }
     }
+  }, _extends4)),
+  inlines: (_inlines = {}, _inlines[Contentful.INLINES.HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[Contentful.INLINES.ENTRY_HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[Contentful.INLINES.ASSET_HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[Contentful.INLINES.EMBEDDED_ENTRY] = {
+    isVoid: true
+  }, _inlines)
+};
+
+function getCharacterCount(editor) {
+  var document = contentfulSlateJSAdapter.toContentfulDocument({
+    document: editor.children,
+    schema: schema
   });
+  return richTextPlainTextRenderer.documentToPlainTextString(document).length;
+}
+
+var actionOrigin = {
+  TOOLBAR: 'toolbar-icon',
+  SHORTCUT: 'shortcut',
+  VIEWPORT: 'viewport-interaction',
+  COMMAND_PALETTE: 'command-palette'
 };
+var createTrackingPlugin = function createTrackingPlugin(onAction) {
+  var trackingActions = {
+    onViewportAction: function onViewportAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
 
-/**
- * Re-creates a void node with valid children.
- */
+      return onAction(actionName, _extends({
+        origin: actionOrigin.VIEWPORT
+      }, data));
+    },
+    onShortcutAction: function onShortcutAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
 
-var transformVoid = function transformVoid(editor, _ref) {
-  var node = _ref[0],
-      path = _ref[1];
+      return onAction(actionName, _extends({
+        origin: actionOrigin.SHORTCUT
+      }, data));
+    },
+    onToolbarAction: function onToolbarAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
 
-  var validVoid = _extends({}, node, {
-    children: [{
-      text: ''
-    }]
-  }); // A workaround because Slate doesn't allow adjusting void nodes children
+      return onAction(actionName, _extends({
+        origin: actionOrigin.TOOLBAR
+      }, data));
+    },
+    onCommandPaletteAction: function onCommandPaletteAction(actionName, data) {
+      if (data === void 0) {
+        data = {};
+      }
 
+      return onAction(actionName, _extends({
+        origin: actionOrigin.COMMAND_PALETTE
+      }, data));
+    }
+  };
+  return {
+    key: 'TrackingPlugin',
+    withOverrides: function withOverrides(editor) {
+      var insertData = editor.insertData;
+      editor.tracking = trackingActions;
+
+      editor.insertData = function (data) {
+        var isCopyAndPaste = data.types.length !== 0;
+
+        if (isCopyAndPaste) {
+          var _window$getSelection;
+
+          var characterCountSelection = (_window$getSelection = window.getSelection()) == null ? void 0 : _window$getSelection.toString().length;
+          var characterCountBefore = getCharacterCount(editor);
+          setTimeout(function () {
+            var characterCountAfter = getCharacterCount(editor);
+            trackingActions.onShortcutAction('paste', {
+              characterCountAfter: characterCountAfter,
+              characterCountBefore: characterCountBefore,
+              characterCountSelection: characterCountSelection
+            });
+          });
+        }
 
-  slate.Transforms.removeNodes(editor, {
-    at: path
-  });
-  slate.Transforms.insertNodes(editor, [validVoid], {
-    at: path
+        insertData(data);
+      };
+
+      return editor;
+    }
+  };
+};
+
+var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
+  return plateTrailingBlock.createTrailingBlockPlugin({
+    options: {
+      type: Contentful.BLOCKS.PARAGRAPH,
+      level: 0
+    }
   });
 };
 
@@ -5645,34 +5811,17 @@ var createVoidsPlugin = function createVoidsPlugin() {
           return !(isRootLevel(path) && plateCore.isFirstChild(path)) && !!node.isVoid;
         }
       }
-    }],
-    normalizer: [{
-      match: {
-        isVoid: true
-      },
-      validNode: function validNode(editor, _ref3) {
-        var path = _ref3[1];
-        var children = Array.from(slate.Node.children(editor, path));
-
-        if (children.length !== 1) {
-          return false;
-        }
-
-        var _children$ = children[0],
-            textNode = _children$[0];
-        return slate.Text.isText(textNode) && textNode.text === '';
-      },
-      transform: transformVoid
     }]
   };
 };
 
-var getPlugins = function getPlugins(sdk, tracking) {
+var getPlugins = function getPlugins(sdk, onAction) {
   return [// AST must come after the HTML deserializer
-  plateCore.createDeserializeHtmlPlugin(), plateCore.createDeserializeAstPlugin(), plateSerializerDocx.createDeserializeDocxPlugin(), // Global shortcuts
+  plateCore.createDeserializeHtmlPlugin(), plateCore.createDeserializeAstPlugin(), plateSerializerDocx.createDeserializeDocxPlugin(), // Tracking - This should come first so all plugins below will have access to `editor.tracking`
+  createTrackingPlugin(onAction), // Global / Global shortcuts
   createDragAndDropPlugin(), // Block Elements
-  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(tracking), createEmbeddedEntryBlockPlugin(sdk, tracking), createEmbeddedAssetBlockPlugin(sdk, tracking), // Inline elements
-  createHyperlinkPlugin(sdk, tracking), createEmbeddedEntityInlinePlugin(sdk, tracking), // Marks
+  createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
+  createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createMarksPlugin(), // Other
   createTrailingParagraphPlugin(), createTextPlugin(), createVoidsPlugin(), createSelectOnBackspacePlugin(), // Pasting content from other sources
   createPasteHTMLPlugin(), // These plugins drive their configurations from the list of plugins
@@ -5894,10 +6043,10 @@ var Toolbar = function Toolbar(_ref) {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
     className: styles$k.divider
-  }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
-    isDisabled: isDisabled || !canInsertBlocks
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
+  }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
+    isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.HR) && /*#__PURE__*/React__default.createElement(ToolbarHrButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
@@ -5967,7 +6116,7 @@ var useNormalizedSlateValue = function useNormalizedSlateValue(_ref) {
       plugins: plugins,
       disableCorePlugins: disableCorePlugins
     });
-    var doc = contentfulSlatejsAdapter.toSlatejsDocument({
+    var doc = contentfulSlateJSAdapter.toSlatejsDocument({
       document: hasContent(incomingDoc) ? incomingDoc : Contentful.EMPTY_DOCUMENT,
       schema: schema
     }); // Sets editor value & kicks normalization
@@ -5981,18 +6130,56 @@ var useNormalizedSlateValue = function useNormalizedSlateValue(_ref) {
   }, [id, plugins, incomingDoc]);
 };
 
+/**
+ * Returns whether a given operation is relevant enough to trigger a save.
+ */
+
+var isRelevantOperation = function isRelevantOperation(op) {
+  if (op.type === 'set_selection') {
+    return false;
+  }
+
+  return true;
+};
+
+var useOnValueChanged = function useOnValueChanged(_ref) {
+  var editor = _ref.editor,
+      handler = _ref.handler;
+  var onChange = React.useMemo(function () {
+    return debounce(function (document) {
+      handler == null ? void 0 : handler(contentfulSlateJSAdapter.toContentfulDocument({
+        document: document,
+        schema: schema
+      }));
+    }, 500);
+  }, [handler]);
+  return React.useCallback(function (value) {
+    var operations = editor.operations.filter(isRelevantOperation);
+
+    if (operations.length > 0) {
+      onChange(value);
+    }
+  }, [editor, onChange]);
+};
+
 var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
 var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
-  var id = getContentfulEditorId(props.sdk);
-  var tracking = useTrackingContext();
+  var id = useContentfulEditorId();
+  var editor = useContentfulEditor();
   var plugins = React__default.useMemo(function () {
-    return getPlugins(props.sdk, tracking);
-  }, [props.sdk, tracking]);
+    var _props$onAction;
+
+    return getPlugins(props.sdk, (_props$onAction = props.onAction) != null ? _props$onAction : noop);
+  }, [props.sdk, props.onAction]);
   var initialValue = useNormalizedSlateValue({
     id: id,
     incomingDoc: props.value,
     plugins: plugins
   });
+  var onValueChanged = useOnValueChanged({
+    editor: editor,
+    handler: props.onChange
+  });
   var classNames = emotion.cx(styles$j.editor, props.minHeight !== undefined ? emotion.css({
     minHeight: props.minHeight
   }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
@@ -6008,12 +6195,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
       className: classNames,
       readOnly: props.isDisabled
     },
-    onChange: function onChange(document) {
-      props.onChange == null ? void 0 : props.onChange(contentfulSlatejsAdapter.toContentfulDocument({
-        document: document,
-        schema: schema
-      }));
-    }
+    onChange: onValueChanged
   }, !props.isToolbarHidden && /*#__PURE__*/React__default.createElement(StickyToolbarWrapper, {
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
@@ -6030,12 +6212,11 @@ var RichTextEditor = function RichTextEditor(props) {
   var isEmptyValue = React.useCallback(function (value) {
     return !value || deepEquals(value, Contentful.EMPTY_DOCUMENT);
   }, []);
+  var editorId = getContentfulEditorId(sdk);
   return /*#__PURE__*/React__default.createElement(fieldEditorReference.EntityProvider, {
     sdk: sdk
   }, /*#__PURE__*/React__default.createElement(SdkProvider, {
     sdk: sdk
-  }, /*#__PURE__*/React__default.createElement(TrackingProvider, {
-    onAction: onAction || noop
   }, /*#__PURE__*/React__default.createElement(fieldEditorShared.FieldConnector, {
     throttle: 0,
     field: sdk.field,
@@ -6047,17 +6228,17 @@ var RichTextEditor = function RichTextEditor(props) {
         disabled = _ref.disabled,
         setValue = _ref.setValue,
         externalReset = _ref.externalReset;
-    return /*#__PURE__*/React__default.createElement(ContentfulEditorProvider, {
-      sdk: sdk
+    return /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
+      value: editorId
     }, /*#__PURE__*/React__default.createElement(ConnectedRichTextEditor, Object.assign({}, otherProps, {
       key: "rich-text-editor-" + externalReset,
       value: lastRemoteValue,
       sdk: sdk,
-      onAction: onAction || noop,
+      onAction: onAction,
       isDisabled: disabled,
       onChange: setValue
     })));
-  }))));
+  })));
 };
 
 var LINK_TYPES$1 = {