@contentful/field-editor-rich-text 2.0.0-next.14 → 2.0.0-next.17

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

@@ -1,15 +1,15 @@
 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 { 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 { BLOCKS, INLINES, TABLE_BLOCKS, TEXT_CONTAINERS, HEADINGS, 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, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, getPluginType, ELEMENT_DEFAULT, findNode, isMarkActive, toggleMark, someHtmlElement, match, KEY_DESERIALIZE_HTML, someNode, getChildren as getChildren$1, 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 { 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, Point } 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';
@@ -532,17 +532,6 @@ function getAncestorPathFromSelection(editor) {
     return level.length === 1;
   });
 }
-function shouldUnwrapBlockquote(editor, type) {
-  var isQuoteSelected = isBlockSelected(editor, BLOCKS.QUOTE);
-  var isValidType = [].concat(HEADINGS, [BLOCKS.OL_LIST, BLOCKS.UL_LIST, BLOCKS.HR]).includes(type);
-  return isQuoteSelected && isValidType;
-}
-function unwrapFromRoot(editor) {
-  var ancestorPath = getAncestorPathFromSelection(editor);
-  Transforms.unwrapNodes(editor, {
-    at: ancestorPath
-  });
-}
 var isAtEndOfTextSelection = function isAtEndOfTextSelection(editor) {
   var _editor$selection, _editor$selection2;
 
@@ -2499,11 +2488,6 @@ function ToolbarHeadingButton(props) {
       if (!(editor != null && editor.selection)) return;
       setSelected(type);
       setOpen(false);
-
-      if (shouldUnwrapBlockquote(editor, type)) {
-        unwrapFromRoot(editor);
-      }
-
       var prevOnChange = editor.onChange;
       /*
        The focus might happen at point in time when
@@ -2793,10 +2777,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';
 
@@ -2814,11 +2794,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: {},
@@ -3728,6 +3703,16 @@ var replaceNodeWithListItems = function replaceNodeWithListItems(editor, entry)
     at: path
   });
 };
+var isListTypeActive = function isListTypeActive(editor, type) {
+  // Lists can be nested. Here, we take the list type at the lowest level
+  var listNode = getBlockAbove(editor, {
+    match: {
+      type: [BLOCKS.OL_LIST, BLOCKS.UL_LIST]
+    },
+    mode: 'lowest'
+  });
+  return (listNode == null ? void 0 : listNode[0].type) === type;
+};
 
 /**
  * Build a new list item node while preserving marks
@@ -4104,11 +4089,6 @@ function ToolbarListButton(props) {
   function handleClick(type) {
     return function () {
       if (!(editor != null && editor.selection)) return;
-
-      if (shouldUnwrapBlockquote(editor, type)) {
-        unwrapFromRoot(editor);
-      }
-
       toggleList(editor, {
         type: type
       });
@@ -4121,13 +4101,13 @@ function ToolbarListButton(props) {
     title: "UL",
     testId: "ul-toolbar-button",
     onClick: handleClick(BLOCKS.UL_LIST),
-    isActive: isBlockSelected(editor, BLOCKS.UL_LIST),
+    isActive: isListTypeActive(editor, BLOCKS.UL_LIST),
     isDisabled: props.isDisabled
   }, /*#__PURE__*/createElement(ListBulletedIcon, null)), isNodeTypeEnabled(sdk.field, BLOCKS.OL_LIST) && /*#__PURE__*/createElement(ToolbarButton, {
     title: "OL",
     testId: "ol-toolbar-button",
     onClick: handleClick(BLOCKS.OL_LIST),
-    isActive: isBlockSelected(editor, BLOCKS.OL_LIST),
+    isActive: isListTypeActive(editor, BLOCKS.OL_LIST),
     isDisabled: props.isDisabled
   }, /*#__PURE__*/createElement(ListNumberedIcon, null)));
 }
@@ -4694,11 +4674,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: {
@@ -4717,10 +4740,7 @@ var style$1 = /*#__PURE__*/css({
   margin: '0 0 1.3125rem',
   borderLeft: "6px solid " + tokens.gray200,
   paddingLeft: '0.875rem',
-  fontStyle: 'normal',
-  '& a': {
-    color: 'inherit'
-  }
+  fontStyle: 'normal'
 });
 function Quote(props) {
   return /*#__PURE__*/createElement("blockquote", Object.assign({}, props.attributes, {
@@ -4791,7 +4811,7 @@ 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)
+      transform: (_transform = {}, _transform[BLOCKS.QUOTE] = transformUnwrap, _transform["default"] = transformLift, _transform)
     }],
     withOverrides: function withOverrides(editor) {
       var insertFragment = editor.insertFragment;