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

package/dist/field-editor-rich-text.esm.js

@@ -1,18 +1,17 @@
-import React__default, { useMemo, createElement, useEffect, useState, memo, Fragment, useCallback } from 'react';
-import { toSlatejsDocument, toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
+import React__default, { useContext, createContext, useMemo, createElement, useEffect, useState, memo, Fragment, useCallback } from 'react';
 import { useEntities, ScheduledIconWithTooltip, MissingEntityCard, AssetThumbnail, getScheduleTooltipContent, EntityProvider } from '@contentful/field-editor-reference';
 import { entityHelpers, shortenStorageUnit, isValidImage, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
-import { TOP_LEVEL_BLOCKS, BLOCKS, CONTAINERS, VOID_BLOCKS, INLINES, TABLE_BLOCKS, HEADINGS, TEXT_CONTAINERS, LIST_ITEM_BLOCKS, MARKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { usePlateEditorRef, getNodes, getText, toggleNodeType, getAbove, onKeyDownToggleElement, setNodes, isAncestorEmpty, getParent, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, someHtmlElement, isMarkActive, toggleMark, match, KEY_DESERIALIZE_HTML, someNode, getChildren as getChildren$1, getBlockAbove, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, Plate } from '@udecode/plate-core';
+import { BLOCKS, INLINES, TABLE_BLOCKS, HEADINGS, TEXT_CONTAINERS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
+import { usePlateEditorState, usePlateEditorRef, getNodes, getText, toggleNodeType, getAbove, setNodes, isAncestorEmpty, getParent, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, isMarkActive, toggleMark, someHtmlElement, match, KEY_DESERIALIZE_HTML, someNode, getChildren as getChildren$1, getBlockAbove, getLastChildPath, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
-import constate from 'constate';
 import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
 import isHotkey from 'is-hotkey';
-import { Text, Element, Editor, Transforms, Range, Path, Node } from 'slate';
+import { Text, Element, Editor, Transforms, Range, Node, Path, Point } from 'slate';
 import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
+import constate from 'constate';
 import { AssetCard, Menu, Text as Text$1, Notification, EntryCard, MenuItem, Button, Flex, Icon, InlineEntryCard, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
 import mimetype from '@contentful/mimetype';
 import get from 'lodash-es/get';
@@ -27,7 +26,10 @@ import isPlainObject from 'is-plain-obj';
 import { createParagraphPlugin as createParagraphPlugin$1 } from '@udecode/plate-paragraph';
 import { createSelectOnBackspacePlugin as createSelectOnBackspacePlugin$1 } from '@udecode/plate-select';
 import { ELEMENT_TABLE, ELEMENT_TR, getEmptyRowNode, ELEMENT_TD, ELEMENT_TH, getEmptyCellNode, insertTable, deleteRow, deleteColumn, deleteTable, createTablePlugin as createTablePlugin$1, onKeyDownTable } from '@udecode/plate-table';
+import { toContentfulDocument, toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
+import { documentToPlainTextString } from '@contentful/rich-text-plain-text-renderer';
 import { createTrailingBlockPlugin } from '@udecode/plate-trailing-block';
+import debounce from 'lodash-es/debounce';
 import PropTypes from 'prop-types';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -237,126 +239,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(INLINES).map(function (type) {
-  return {
-    type: type
-  };
-});
-var schema = {
-  document: {
-    nodes: [{
-      types: /*#__PURE__*/TOP_LEVEL_BLOCKS.map(function (type) {
-        return {
-          type: type
-        };
-      })
-    }]
-  },
-  blocks: /*#__PURE__*/_extends((_extends2 = {}, _extends2[BLOCKS.PARAGRAPH] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[BLOCKS.HEADING_1] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[BLOCKS.HEADING_2] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[BLOCKS.HEADING_3] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[BLOCKS.HEADING_4] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[BLOCKS.HEADING_5] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2[BLOCKS.HEADING_6] = {
-    nodes: [{
-      match: /*#__PURE__*/[].concat(inlines, [{
-        object: 'text'
-      }])
-    }]
-  }, _extends2), /*#__PURE__*/VOID_BLOCKS.reduce(function (blocks, nodeType) {
-    var _extends3;
-
-    return _extends({}, blocks, (_extends3 = {}, _extends3[nodeType] = {
-      isVoid: true
-    }, _extends3));
-  }, {}), (_extends4 = {}, _extends4[BLOCKS.QUOTE] = {
-    nodes: [{
-      match: [/*#__PURE__*/CONTAINERS[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, BLOCKS.QUOTE);
-      }
-    }
-  }, _extends4)),
-  inlines: (_inlines = {}, _inlines[INLINES.HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[INLINES.ENTRY_HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[INLINES.ASSET_HYPERLINK] = {
-    nodes: [{
-      match: [{
-        object: 'text'
-      }]
-    }]
-  }, _inlines[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__*/createContext('');
+var ContentfulEditorIdProvider = editorContext.Provider;
+function useContentfulEditorId() {
+  var id = 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 = usePlateEditorState(editorId);
+  return editor;
+} // This doesn't re-render when the value changes
+
+function useContentfulEditorRef() {
+  var editorId = useContentfulEditorId();
   var editor = usePlateEditorRef(editorId);
   return editor;
 }
 
-var _constate = /*#__PURE__*/constate(useContentfulEditorHook),
-    ContentfulEditorProvider = _constate[0],
-    useContentfulEditor = _constate[1];
-
 var createSoftBreakPlugin = function createSoftBreakPlugin() {
   return createSoftBreakPlugin$1({
     then: function then(editor) {
@@ -536,6 +449,10 @@ function insertLink(editor, options) {
 } // TODO: move to hyperlink plugin
 
 function isLinkActive(editor) {
+  if (!editor) {
+    return false;
+  }
+
   var _Array$from2 = Array.from(Editor.nodes(editor, {
     match: function match(node) {
       return !Editor.isEditor(node) && Element.isElement(node) && LINK_TYPES.includes(node.type);
@@ -695,12 +612,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
     }));
   };
 }
@@ -714,9 +633,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__*/css({
@@ -1966,12 +1885,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) {
@@ -1979,6 +1897,9 @@ function _selectEntityAndInsert() {
               break;
             }
 
+            logAction('cancelCreateEmbedDialog', {
+              nodeType: nodeType
+            });
             return _context.abrupt("return");
 
           case 12:
@@ -1987,31 +1908,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);
 }
@@ -2058,7 +1961,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();
@@ -2067,7 +1969,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);
@@ -2134,20 +2036,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
       },
@@ -2365,44 +2267,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: INLINES.EMBEDDED_ENTRY
+            });
             config = _extends({}, newEntitySelectorConfigFromRichTextField(sdk.field, 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: 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 () {
               Transforms.setSelection(editor, selection);
               Transforms.insertNodes(editor, inlineEntryNode);
             }, 0);
+            logAction('insert', {
+              nodeType: INLINES.EMBEDDED_ENTRY
+            });
 
-          case 10:
+          case 13:
           case "end":
             return _context2.stop();
         }
@@ -2416,7 +2327,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
   var editor = useContentfulEditor();
   var sdk = useSdkContext();
 
-  function handleClick(_x3) {
+  function handleClick(_x4) {
     return _handleClick.apply(this, arguments);
   }
 
@@ -2438,7 +2349,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":
@@ -2471,7 +2382,7 @@ function ToolbarEmbeddedEntityInlineButton(props) {
     className: "rich-text__embedded-entry-list-icon " + styles$6.icon
   }), /*#__PURE__*/createElement("span", null, "Inline entry")));
 }
-function createEmbeddedEntityInlinePlugin(sdk, tracking) {
+function createEmbeddedEntityInlinePlugin(sdk) {
   var htmlAttributeName = 'data-embedded-entity-inline-id';
   return {
     key: INLINES.EMBEDDED_ENTRY,
@@ -2479,7 +2390,7 @@ function createEmbeddedEntityInlinePlugin(sdk, tracking) {
     isElement: true,
     isInline: true,
     isVoid: true,
-    component: withLinkTracking(tracking, EmbeddedEntityInline),
+    component: withLinkTracking(EmbeddedEntityInline),
     options: {
       hotkey: 'mod+shift+2'
     },
@@ -2505,7 +2416,7 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
       if (!editor) return;
 
       if (hotkey && isHotkey(hotkey, event)) {
-        selectEntityAndInsert$1(editor, sdk);
+        selectEntityAndInsert$1(editor, sdk, editor.tracking.onShortcutAction);
       }
     };
   };
@@ -2608,6 +2519,10 @@ function ToolbarHeadingButton(props) {
         prevOnChange.apply(void 0, arguments);
       };
 
+      var isActive = isBlockSelected(editor, type);
+      editor.tracking.onToolbarAction(isActive ? 'remove' : 'insert', {
+        nodeType: type
+      });
       toggleNodeType(editor, {
         activeType: type,
         inactiveType: type
@@ -2729,6 +2644,24 @@ function createHeading(Tag, block) {
 
 var HeadingComponents = (_HeadingComponents = {}, _HeadingComponents[BLOCKS.HEADING_1] = /*#__PURE__*/memo( /*#__PURE__*/createHeading('h1', BLOCKS.HEADING_1)), _HeadingComponents[BLOCKS.HEADING_2] = /*#__PURE__*/memo( /*#__PURE__*/createHeading('h2', BLOCKS.HEADING_2)), _HeadingComponents[BLOCKS.HEADING_3] = /*#__PURE__*/memo( /*#__PURE__*/createHeading('h3', BLOCKS.HEADING_3)), _HeadingComponents[BLOCKS.HEADING_4] = /*#__PURE__*/memo( /*#__PURE__*/createHeading('h4', BLOCKS.HEADING_4)), _HeadingComponents[BLOCKS.HEADING_5] = /*#__PURE__*/memo( /*#__PURE__*/createHeading('h5', BLOCKS.HEADING_5)), _HeadingComponents[BLOCKS.HEADING_6] = /*#__PURE__*/memo( /*#__PURE__*/createHeading('h6', 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
+        });
+        toggleNodeType(editor, {
+          activeType: type,
+          inactiveType: BLOCKS.PARAGRAPH
+        });
+      }
+    };
+  };
+};
+
 var createHeadingPlugin = function createHeadingPlugin() {
   var _transform;
 
@@ -2745,8 +2678,8 @@ var createHeadingPlugin = function createHeadingPlugin() {
       match: {
         type: HEADINGS
       },
-      validChildren: function validChildren(_, _ref) {
-        var node = _ref[0];
+      validChildren: function validChildren(_, _ref2) {
+        var node = _ref2[0];
         return isInlineOrText(node);
       },
       transform: (_transform = {}, _transform[BLOCKS.PARAGRAPH] = transformUnwrap, _transform["default"] = transformLift, _transform)
@@ -2763,8 +2696,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 !getAbove(editor, {
                 at: path,
                 match: {
@@ -2788,7 +2721,7 @@ var createHeadingPlugin = function createHeadingPlugin() {
           hotkey: ["mod+alt+" + level]
         },
         handlers: {
-          onKeyDown: onKeyDownToggleElement
+          onKeyDown: buildHeadingEventHandler(nodeType)
         },
         deserializeHtml: {
           rules: [{
@@ -2860,10 +2793,6 @@ function withHrEvents(editor) {
         pathToSelectedHr = _getNodeEntryFromSele[1];
 
     if (pathToSelectedHr) {
-      if (shouldUnwrapBlockquote(editor, BLOCKS.HR)) {
-        unwrapFromRoot(editor);
-      }
-
       var isBackspace = event.key === 'Backspace';
       var isDelete = event.key === 'Delete';
 
@@ -2881,11 +2810,6 @@ function ToolbarHrButton(props) {
 
   function handleOnClick() {
     if (!(editor != null && editor.selection)) return;
-
-    if (shouldUnwrapBlockquote(editor, BLOCKS.HR)) {
-      unwrapFromRoot(editor);
-    }
-
     var hr = {
       type: BLOCKS.HR,
       data: {},
@@ -3318,13 +3242,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) {
@@ -3349,9 +3275,11 @@ function _addOrEditLink() {
 
             selectionBeforeBlur = _extends({}, editor.selection);
             currentLinkText = linkText || Editor.string(editor, editor.selection);
-            _context3.next = 8;
+            isEditing = Boolean(node && path);
+            logAction(isEditing ? 'openEditHyperlinkDialog' : 'openCreateHyperlinkDialog');
+            _context3.next = 10;
             return ModalDialogLauncher.openDialog({
-              title: linkType ? 'Edit hyperlink' : 'Insert hyperlink',
+              title: isEditing ? 'Edit hyperlink' : 'Insert hyperlink',
               width: 'large',
               shouldCloseOnEscapePress: true,
               shouldCloseOnOverlayClick: true,
@@ -3368,17 +3296,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;
             Transforms.select(editor, selectionBeforeBlur);
             Editor.withoutNormalizing(editor, function () {
@@ -3390,9 +3319,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();
         }
@@ -3456,7 +3389,7 @@ function UrlHyperlink(props) {
     event.preventDefault();
     event.stopPropagation();
     if (!editor) return;
-    addOrEditLink(editor, sdk);
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
@@ -3492,7 +3425,7 @@ function EntityHyperlink(props) {
     event.preventDefault();
     event.stopPropagation();
     if (!editor) return;
-    addOrEditLink(editor, sdk);
+    addOrEditLink(editor, sdk, editor.tracking.onViewportAction);
   }
 
   return /*#__PURE__*/createElement(Tooltip, {
@@ -3539,8 +3472,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:
@@ -3589,8 +3523,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);
       }
     };
   };
@@ -3616,7 +3551,7 @@ var getNodeOfType = function getNodeOfType(type) {
   };
 };
 
-var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
+var createHyperlinkPlugin = function createHyperlinkPlugin(sdk) {
   var common = {
     isElement: true,
     isInline: true
@@ -3647,7 +3582,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
     _extends({}, common, {
       key: INLINES.ENTRY_HYPERLINK,
       type: INLINES.ENTRY_HYPERLINK,
-      component: withLinkTracking(tracking, EntityHyperlink),
+      component: withLinkTracking(EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -3661,7 +3596,7 @@ var createHyperlinkPlugin = function createHyperlinkPlugin(sdk, tracking) {
     _extends({}, common, {
       key: INLINES.ASSET_HYPERLINK,
       type: INLINES.ASSET_HYPERLINK,
-      component: withLinkTracking(tracking, EntityHyperlink),
+      component: withLinkTracking(EntityHyperlink),
       deserializeHtml: {
         rules: [{
           validNodeName: ['A']
@@ -4135,6 +4070,7 @@ var createListPlugin = function createListPlugin() {
     }, _overrideByKey[ELEMENT_LI] = {
       type: BLOCKS.LIST_ITEM,
       component: ListItem,
+      // @ts-expect-error
       normalizer: [{
         validNode: hasListAsDirectParent,
         transform: normalizeOrphanedListItem
@@ -4187,26 +4123,62 @@ function ToolbarListButton(props) {
   }, /*#__PURE__*/createElement(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;
-    toggleMark(editor, {
-      key: MARKS.BOLD
-    });
-    focus(editor);
-  }
+  var Mark = function Mark(_ref2) {
+    var isDisabled = _ref2.isDisabled;
+    var editor = useContentfulEditor();
+    var handleClick = useCallback(function () {
+      if (!(editor != null && editor.selection)) return;
+      var isActive = isMarkActive(editor, mark);
+      editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
+        markType: mark
+      });
+      toggleMark(editor, {
+        key: mark
+      });
+      focus(editor);
+    }, [editor]);
+    if (!editor) return null;
+    return /*#__PURE__*/createElement(ToolbarButton, {
+      title: title,
+      testId: mark + "-toolbar-button",
+      onClick: handleClick,
+      isActive: isMarkActive(editor, mark),
+      isDisabled: isDisabled
+    }, icon);
+  };
 
-  if (!editor) return null;
-  return /*#__PURE__*/createElement(ToolbarButton, {
-    title: "Bold",
-    testId: "bold-toolbar-button",
-    onClick: handleClick,
-    isActive: isMarkActive(editor, MARKS.BOLD),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/createElement(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 = isMarkActive(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
+          markType: type
+        });
+        toggleMark(editor, {
+          key: type
+        });
+      }
+    };
+  };
+};
+
+var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Bold',
+  mark: MARKS.BOLD,
+  icon: /*#__PURE__*/createElement(FormatBoldIcon, null)
+});
 var styles$e = {
   bold: /*#__PURE__*/css({
     fontWeight: 600
@@ -4229,6 +4201,9 @@ var createBoldPlugin = function createBoldPlugin() {
     options: {
       hotkey: ['mod+b']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(MARKS.BOLD)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['STRONG', 'B']
@@ -4246,26 +4221,11 @@ var createBoldPlugin = function createBoldPlugin() {
   });
 };
 
-function ToolbarCodeButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    toggleMark(editor, {
-      key: MARKS.CODE
-    });
-    focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/createElement(ToolbarButton, {
-    title: "Code",
-    testId: "code-toolbar-button",
-    onClick: handleClick,
-    isActive: isMarkActive(editor, MARKS.CODE),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/createElement(CodeIcon, null));
-}
+var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Code',
+  mark: MARKS.CODE,
+  icon: /*#__PURE__*/createElement(CodeIcon, null)
+});
 var styles$f = {
   code: /*#__PURE__*/css({
     fontFamily: 'monospace',
@@ -4284,6 +4244,9 @@ var createCodePlugin = function createCodePlugin() {
     options: {
       hotkey: ['mod+/']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(MARKS.CODE)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['CODE', 'PRE']
@@ -4296,26 +4259,11 @@ var createCodePlugin = function createCodePlugin() {
   });
 };
 
-function ToolbarItalicButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    toggleMark(editor, {
-      key: MARKS.ITALIC
-    });
-    focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/createElement(ToolbarButton, {
-    title: "Italic",
-    testId: "italic-toolbar-button",
-    onClick: handleClick,
-    isActive: isMarkActive(editor, MARKS.ITALIC),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/createElement(FormatItalicIcon, null));
-}
+var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Italic',
+  mark: MARKS.ITALIC,
+  icon: /*#__PURE__*/createElement(FormatItalicIcon, null)
+});
 var styles$g = {
   italic: /*#__PURE__*/css({
     fontStyle: 'italic'
@@ -4333,6 +4281,9 @@ var createItalicPlugin = function createItalicPlugin() {
     options: {
       hotkey: ['mod+i']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(MARKS.ITALIC)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['I', 'EM']
@@ -4350,26 +4301,11 @@ var createItalicPlugin = function createItalicPlugin() {
   });
 };
 
-function ToolbarUnderlineButton(props) {
-  var editor = useContentfulEditor();
-
-  function handleClick() {
-    if (!(editor != null && editor.selection)) return;
-    toggleMark(editor, {
-      key: MARKS.UNDERLINE
-    });
-    focus(editor);
-  }
-
-  if (!editor) return null;
-  return /*#__PURE__*/createElement(ToolbarButton, {
-    title: "Underline",
-    testId: "underline-toolbar-button",
-    onClick: handleClick,
-    isActive: isMarkActive(editor, MARKS.UNDERLINE),
-    isDisabled: props.isDisabled
-  }, /*#__PURE__*/createElement(FormatUnderlinedIcon, null));
-}
+var ToolbarUnderlineButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Underline',
+  mark: MARKS.UNDERLINE,
+  icon: /*#__PURE__*/createElement(FormatUnderlinedIcon, null)
+});
 function Underline(props) {
   return /*#__PURE__*/createElement("u", Object.assign({}, props.attributes), props.children);
 }
@@ -4380,6 +4316,9 @@ var createUnderlinePlugin = function createUnderlinePlugin() {
     options: {
       hotkey: ['mod+u']
     },
+    handlers: {
+      onKeyDown: buildMarkEventHandler(MARKS.UNDERLINE)
+    },
     deserializeHtml: {
       rules: [{
         validNodeName: ['U']
@@ -4602,6 +4541,7 @@ var withNormalizer = function withNormalizer(editor) {
 var createNormalizerPlugin = function createNormalizerPlugin() {
   return {
     key: 'NormalizerPlugin',
+    // @ts-expect-error
     withOverrides: withNormalizer
   };
 };
@@ -4745,11 +4685,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[KEY_DESERIALIZE_HTML] = {
         editor: {
@@ -4779,9 +4762,12 @@ function Quote(props) {
   }), props.children);
 }
 
-function toggleQuote(editor) {
+function toggleQuote(editor, logAction) {
   if (!editor.selection) return;
   var isActive = isBlockSelected(editor, BLOCKS.QUOTE);
+  logAction(isActive ? 'remove' : 'insert', {
+    nodeType: BLOCKS.QUOTE
+  });
   Editor.withoutNormalizing(editor, function () {
     if (!editor.selection) return;
     Transforms.unwrapNodes(editor, {
@@ -4813,7 +4799,7 @@ var onKeyDownToggleQuote = function onKeyDownToggleQuote(editor, plugin) {
 
     if (hotkey && isHotkey(hotkey, event)) {
       event.preventDefault();
-      toggleQuote(editor);
+      toggleQuote(editor, editor.tracking.onShortcutAction);
     }
   };
 };
@@ -4840,7 +4826,54 @@ function createQuotePlugin() {
     normalizer: [{
       validChildren: CONTAINERS[BLOCKS.QUOTE],
       transform: (_transform = {}, _transform[BLOCKS.QUOTE] = transformUnwrap, _transform[BLOCKS.HEADING_1] = transformUnwrap, _transform[BLOCKS.HEADING_2] = transformUnwrap, _transform[BLOCKS.HEADING_3] = transformUnwrap, _transform[BLOCKS.HEADING_4] = transformUnwrap, _transform[BLOCKS.HEADING_5] = transformUnwrap, _transform[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 = Element.isElement(startingNode) && startingNode.type === BLOCKS.QUOTE;
+        var containerEntry = getAbove(editor, {
+          match: {
+            type: TEXT_CONTAINERS
+          }
+        });
+        var containerIsNotEmpty = containerEntry && Node.string(containerEntry[0]) !== '';
+
+        if (startsWithBlockquote && containerIsNotEmpty) {
+          var selection = editor.selection;
+
+          var isContentSelected = function isContentSelected(selection) {
+            return !!selection && Point.compare(selection.anchor, selection.focus) !== 0;
+          }; // if something is selected (highlighted) we replace the selection
+
+
+          if (isContentSelected(selection)) {
+            Transforms["delete"](editor, {
+              at: selection
+            });
+          } // get the cursor entry again, it may be different after deletion
+
+
+          var _containerEntry = getAbove(editor, {
+            match: {
+              type: TEXT_CONTAINERS
+            }
+          });
+
+          var _containerIsNotEmpty = _containerEntry && Node.string(_containerEntry[0]) !== '';
+
+          if (_containerIsNotEmpty) {
+            Transforms.insertNodes(editor, fragment);
+            return;
+          }
+        }
+
+        insertFragment(fragment);
+      };
+
+      return editor;
+    }
   };
 }
 
@@ -4849,7 +4882,7 @@ function ToolbarQuoteButton(props) {
 
   function handleOnClick() {
     if (!editor) return;
-    toggleQuote(editor);
+    toggleQuote(editor, editor.tracking.onToolbarAction);
     focus(editor);
   }
 
@@ -4898,8 +4931,7 @@ function hasHeadersOutsideFirstRow(nodes) {
   });
 }
 
-function addTableTrackingEvents(editor, _ref6) {
-  var onViewportAction = _ref6.onViewportAction;
+function addTableTrackingEvents(editor) {
   var insertData = editor.insertData;
 
   editor.insertData = function (data) {
@@ -4913,7 +4945,7 @@ function addTableTrackingEvents(editor, _ref6) {
         if (hasTables(markupBefore)) return;
 
         if (hasTables(markupAfter)) {
-          onViewportAction('paste', {
+          editor.tracking.onViewportAction('paste', {
             tablePasted: true,
             hasHeadersOutsideFirstRow: hasHeadersOutsideFirstRow(markupAfter)
           });
@@ -4925,29 +4957,6 @@ function addTableTrackingEvents(editor, _ref6) {
   };
 }
 
-function useTracking(_ref) {
-  var onAction = _ref.onAction;
-  var trackingMemo = 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 (someNode(editor, {
     match: {
@@ -5193,9 +5202,6 @@ var TableActions = function TableActions() {
   var editor = useContentfulEditor();
   var isDisabled = useReadOnly();
 
-  var _useTrackingContext = useTrackingContext(),
-      onViewportAction = _useTrackingContext.onViewportAction;
-
   var _React$useState = React__default.useState(false),
       isOpen = _React$useState[0],
       setOpen = _React$useState[1];
@@ -5245,11 +5251,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;
@@ -5340,7 +5346,7 @@ var createTableOnKeyDown = function createTableOnKeyDown(editor, plugin) {
   };
 };
 
-var createTablePlugin = function createTablePlugin(tracking) {
+var createTablePlugin = function createTablePlugin() {
   var _overrideByKey;
 
   return createTablePlugin$1({
@@ -5349,7 +5355,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) {
@@ -5449,10 +5455,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() {
@@ -5473,7 +5475,7 @@ function ToolbarTableButton(props) {
               return _context.abrupt("return");
 
             case 2:
-              onViewportAction('insertTable');
+              editor.tracking.onToolbarAction('insertTable');
               insertTableAndFocusFirstCell(editor);
               focus(editor);
 
@@ -5578,35 +5580,199 @@ function deleteEmptyParagraph(unit, editor, deleteFunction) {
   }
 }
 
-var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
-  return createTrailingBlockPlugin({
-    options: {
-      type: BLOCKS.PARAGRAPH,
-      level: 0
+var _extends2, _extends4, _inlines;
+var inlines = /*#__PURE__*/Object.values(INLINES).map(function (type) {
+  return {
+    type: type
+  };
+});
+var schema = {
+  document: {
+    nodes: [{
+      types: /*#__PURE__*/TOP_LEVEL_BLOCKS.map(function (type) {
+        return {
+          type: type
+        };
+      })
+    }]
+  },
+  blocks: /*#__PURE__*/_extends((_extends2 = {}, _extends2[BLOCKS.PARAGRAPH] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[BLOCKS.HEADING_1] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[BLOCKS.HEADING_2] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[BLOCKS.HEADING_3] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[BLOCKS.HEADING_4] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[BLOCKS.HEADING_5] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2[BLOCKS.HEADING_6] = {
+    nodes: [{
+      match: /*#__PURE__*/[].concat(inlines, [{
+        object: 'text'
+      }])
+    }]
+  }, _extends2), /*#__PURE__*/VOID_BLOCKS.reduce(function (blocks, nodeType) {
+    var _extends3;
+
+    return _extends({}, blocks, (_extends3 = {}, _extends3[nodeType] = {
+      isVoid: true
+    }, _extends3));
+  }, {}), (_extends4 = {}, _extends4[BLOCKS.QUOTE] = {
+    nodes: [{
+      match: [/*#__PURE__*/CONTAINERS[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, BLOCKS.QUOTE);
+      }
     }
+  }, _extends4)),
+  inlines: (_inlines = {}, _inlines[INLINES.HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[INLINES.ENTRY_HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[INLINES.ASSET_HYPERLINK] = {
+    nodes: [{
+      match: [{
+        object: 'text'
+      }]
+    }]
+  }, _inlines[INLINES.EMBEDDED_ENTRY] = {
+    isVoid: true
+  }, _inlines)
+};
+
+function getCharacterCount(editor) {
+  var document = toContentfulDocument({
+    document: editor.children,
+    schema: schema
   });
+  return 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
+            });
+          });
+        }
 
-  Transforms.removeNodes(editor, {
-    at: path
-  });
-  Transforms.insertNodes(editor, [validVoid], {
-    at: path
+        insertData(data);
+      };
+
+      return editor;
+    }
+  };
+};
+
+var createTrailingParagraphPlugin = function createTrailingParagraphPlugin() {
+  return createTrailingBlockPlugin({
+    options: {
+      type: BLOCKS.PARAGRAPH,
+      level: 0
+    }
   });
 };
 
@@ -5638,34 +5804,17 @@ var createVoidsPlugin = function createVoidsPlugin() {
           return !(isRootLevel(path) && isFirstChild(path)) && !!node.isVoid;
         }
       }
-    }],
-    normalizer: [{
-      match: {
-        isVoid: true
-      },
-      validNode: function validNode(editor, _ref3) {
-        var path = _ref3[1];
-        var children = Array.from(Node.children(editor, path));
-
-        if (children.length !== 1) {
-          return false;
-        }
-
-        var _children$ = children[0],
-            textNode = _children$[0];
-        return 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
-  createDeserializeHtmlPlugin(), createDeserializeAstPlugin(), createDeserializeDocxPlugin(), // Global shortcuts
+  createDeserializeHtmlPlugin(), createDeserializeAstPlugin(), 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
@@ -5887,10 +6036,10 @@ var Toolbar = function Toolbar(_ref) {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
     className: styles$k.divider
-  }), isNodeTypeEnabled(sdk.field, BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
-    isDisabled: isDisabled || !canInsertBlocks
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
+  }), isNodeTypeEnabled(sdk.field, BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
+    isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, BLOCKS.HR) && /*#__PURE__*/React__default.createElement(ToolbarHrButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
@@ -5974,18 +6123,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 = useMemo(function () {
+    return debounce(function (document) {
+      handler == null ? void 0 : handler(toContentfulDocument({
+        document: document,
+        schema: schema
+      }));
+    }, 500);
+  }, [handler]);
+  return 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 = cx(styles$j.editor, props.minHeight !== undefined ? css({
     minHeight: props.minHeight
   }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
@@ -6001,12 +6188,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
       className: classNames,
       readOnly: props.isDisabled
     },
-    onChange: function onChange(document) {
-      props.onChange == null ? void 0 : props.onChange(toContentfulDocument({
-        document: document,
-        schema: schema
-      }));
-    }
+    onChange: onValueChanged
   }, !props.isToolbarHidden && /*#__PURE__*/React__default.createElement(StickyToolbarWrapper, {
     isDisabled: props.isDisabled
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
@@ -6023,12 +6205,11 @@ var RichTextEditor = function RichTextEditor(props) {
   var isEmptyValue = useCallback(function (value) {
     return !value || deepEquals(value, EMPTY_DOCUMENT);
   }, []);
+  var editorId = getContentfulEditorId(sdk);
   return /*#__PURE__*/React__default.createElement(EntityProvider, {
     sdk: sdk
   }, /*#__PURE__*/React__default.createElement(SdkProvider, {
     sdk: sdk
-  }, /*#__PURE__*/React__default.createElement(TrackingProvider, {
-    onAction: onAction || noop
   }, /*#__PURE__*/React__default.createElement(FieldConnector, {
     throttle: 0,
     field: sdk.field,
@@ -6040,17 +6221,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 = {