@contentful/field-editor-rich-text 3.4.9 → 3.4.11

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

@@ -11,11 +11,11 @@ import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
 import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
 import { createResetNodePlugin as createResetNodePlugin$1, onKeyDownResetNode, SIMULATE_BACKSPACE } from '@udecode/plate-reset-node';
 import { usePopper } from 'react-popper';
-import { ScreenReaderOnly, Popover, SectionHeading, Stack, Flex, AssetCard, EntryCard, Menu, Icon, InlineEntryCard, MenuItem, Text as Text$1, Button, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
+import { ScreenReaderOnly, Popover, SectionHeading, Stack, Flex, AssetCard, EntryCard, Menu, Icon, InlineEntryCard, MenuItem, Text as Text$2, Button, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
 import { Portal } from '@contentful/f36-utils';
 import constate from 'constate';
 import isHotkey from 'is-hotkey';
-import { Path, Range, Text, Node, Element, Point } from 'slate';
+import { Path, Range, Text as Text$1, Node, Element, Point } from 'slate';
 import find from 'lodash-es/find';
 import flow from 'lodash-es/flow';
 import get from 'lodash-es/get';
@@ -552,7 +552,7 @@ var someNode = function someNode(editor, options) {
 };
 var getChildren = function getChildren(entry) {
   // Node.children crashes when given a text node
-  if (Text.isText(entry[0])) {
+  if (Text$1.isText(entry[0])) {
     return [];
   }
 
@@ -3196,7 +3196,7 @@ function FetchingWrappedInlineEntryCard(props) {
     className: styles$3.scheduledIcon,
     variant: "muted",
     testId: "scheduled-icon"
-  })), /*#__PURE__*/React__default.createElement(Text$1, null, title));
+  })), /*#__PURE__*/React__default.createElement(Text$2, null, title));
 }
 
 function createInlineEntryNode$1(id) {
@@ -6089,6 +6089,62 @@ var createParagraphPlugin = function createParagraphPlugin() {
   return createParagraphPlugin$1(config);
 };
 
+var wrapSpaceAround = function wrapSpaceAround(el) {
+  var spacer = new Text(' ');
+  var parent = el.parentNode;
+
+  if (!parent) {
+    return;
+  }
+
+  if (el.previousSibling) {
+    parent.insertBefore(spacer, el);
+  }
+
+  if (el.nextSibling) {
+    parent.insertBefore(spacer, el.nextSibling);
+  }
+};
+
+var unwrap = function unwrap(el) {
+  // add a spacer to avoid the content being cramped together with
+  // the element siblings after it's unwrapped. It may not always
+  // be desired but it should be easy to adjust by the end user.
+  wrapSpaceAround(el);
+  el.replaceWith.apply(el, Array.from(el.childNodes));
+};
+/**
+ * In HTML it's a valid structure to have a block element inside a link
+ *
+ * e.g: <a href="..."><h1> My link </h1><h2>is fancy</h2></a>
+ *
+ * However, that's not supported in Slate. There are generally two ways to
+ * handle this:
+ *
+ * a) Unwrap inner blocks while preserving the content.
+ *    e.g. <a href="...">My link is fancy</a>
+ *
+ * b) Break the link into multiple elements with having each block
+ *    element as a wrapper for an anchor with the same URL
+ *    e.g. <h1><a href="...">My link</a></h1>
+ *         and <h2><a href="...">is fancy</a></h2>
+ *
+ * We take approach (a) in here.
+ */
+
+
+var sanitizeAnchors = function sanitizeAnchors(doc) {
+  var unsupportedTagSelector = "a :not(" + [// Bold
+  'b', 'strong', // Code
+  'code', 'pre', // Italic
+  'em', 'i', // Super/subscript
+  'sub', 'sup', // Underline
+  'u', // Other
+  'span'].join(',') + ")";
+  doc.querySelectorAll(unsupportedTagSelector).forEach(unwrap);
+  return doc;
+};
+
 /**
  * Remove empty spreadsheets columns/rows for performance reasons.
  */
@@ -6167,15 +6223,43 @@ var stripStyleTags = function stripStyleTags(doc) {
   });
   return doc;
 };
+/**
+ * Remove all <meta /> tags
+ */
+
+
+var stripMetaTags = function stripMetaTags(doc) {
+  doc.querySelectorAll('meta').forEach(function (el) {
+    return el.remove();
+  });
+  return doc;
+}; // Attention: Order is important
+
 
-var transformers = [stripStyleTags, sanitizeSheets];
+var transformers = [stripStyleTags, sanitizeSheets, stripMetaTags, sanitizeAnchors];
 var sanitizeHTML = function sanitizeHTML(html) {
   // Parse the HTML string and pipe it through our transformers
   var doc = transformers.reduce(function (value, cb) {
     return cb(value);
   }, new DOMParser().parseFromString(html, 'text/html'));
-  return doc.body.innerHTML.replace(/>\s+</g, '><') // Remove whitespace between tags
-  .replace(/(.*)<div.*>(<table.*<\/table>)<\/div>(.*)/g, '$1$2$3'); // remove div containers from tables
+  var previous;
+
+  do {
+    // save previous first before doing modifications
+    previous = doc.body.innerHTML; // Update the body with the cleaned up content
+
+    doc.body.innerHTML = doc.body.innerHTML // remove div container from tables
+    // capture groups explained:
+    // 1. and 3. every content/linebreaks before and after the div container
+    // 2. the table inside the container, including content and linebreaks
+    // The div container including attributes and possible linebreaks inside wil be removed
+    .replace(/(.*\s)?<div.*>\s*(<table(?:.|\s)*<\/table>)\s*<\/div>(.*\s)?/g, '$1$2$3') // remove whitespaces between some tags, as this can lead to unwanted behaviour:
+    // - table -> empty table cells
+    // - list -> leading whitespaces
+    .replace(/<(\/)?(table|thead|tbody|tr|td|th|caption|col|colgroup|ol|ul|li)(.*)>\s+</g, '<$1$2$3><');
+  } while (doc.body.innerHTML !== previous);
+
+  return doc.body.innerHTML;
 };
 
 /**