@commercetools-uikit/rich-text-utils 19.24.0 → 19.25.0

package/dist/commercetools-uikit-rich-text-utils.cjs.dev.js

@@ -12,9 +12,11 @@ var utils = require('@commercetools-uikit/utils');
 var uniq = require('lodash/uniq');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var _flatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat');
-var _Array$from3 = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -28,11 +30,12 @@ var slateHyperscript = require('slate-hyperscript');
 var parse = require('style-to-object');
 var isEmpty$2 = require('lodash/isEmpty');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var react = require('react');
 var slateReact = require('slate-react');
+var isUrl = require('is-url');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var _pt = require('prop-types');
-var react = require('react');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _styled = require('@emotion/styled/base');
@@ -55,9 +58,11 @@ var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var uniq__default = /*#__PURE__*/_interopDefault(uniq);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
 var _flatInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatInstanceProperty);
-var _Array$from3__default = /*#__PURE__*/_interopDefault(_Array$from3);
 var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -69,6 +74,7 @@ var escapeHtml__default = /*#__PURE__*/_interopDefault(escapeHtml);
 var parse__default = /*#__PURE__*/_interopDefault(parse);
 var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty$2);
 var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var isUrl__default = /*#__PURE__*/_interopDefault(isUrl);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
@@ -89,7 +95,8 @@ const BLOCK_TAGS = {
   pre: 'code',
   li: 'list-item',
   ol: 'numbered-list',
-  ul: 'bulleted-list'
+  ul: 'bulleted-list',
+  a: 'link'
 };
 
 // Add a dictionary of mark tags.
@@ -173,6 +180,13 @@ const Element = _ref => {
       }, attributes), {}, {
         children: children
       }));
+    case BLOCK_TAGS.a:
+      return jsxRuntime.jsx("a", _objectSpread$g(_objectSpread$g({
+        style: style
+      }, attributes), {}, {
+        rel: "noopener noreferrer",
+        children: children
+      }));
     default:
       return jsxRuntime.jsx("p", _objectSpread$g(_objectSpread$g({
         style: style
@@ -259,7 +273,7 @@ const toggleMark = (editor, format) => {
 const isBlockActive = (editor, format) => {
   const selection = editor.selection;
   if (!selection) return false;
-  const _Array$from = _Array$from3__default["default"](slate.Editor.nodes(editor, {
+  const _Array$from = _Array$from__default["default"](slate.Editor.nodes(editor, {
       at: slate.Editor.unhangRange(editor, selection),
       match: n => !slate.Editor.isEditor(n) && slate.Element.isElement(n) && n.type === format
     })),
@@ -362,9 +376,74 @@ const Softbreaker = {
     return html.split(this.placeholderCharacter).join('');
   }
 };
+const isLinkActive = editor => {
+  const _Editor$nodes = slate.Editor.nodes(editor, {
+      match: n => !slate.Editor.isEditor(n) && slate.Element.isElement(n) && n.type === 'link'
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    link = _Editor$nodes2[0];
+  return !!link;
+};
+const unwrapLink = editor => {
+  slate.Transforms.unwrapNodes(editor, {
+    match: n => !slate.Editor.isEditor(n) && slate.Element.isElement(n) && n.type === 'link'
+  });
+};
+const wrapLink = (editor, url) => {
+  if (isLinkActive(editor)) {
+    unwrapLink(editor);
+  }
+  const selection = editor.selection;
+  const isCollapsed = selection && slate.Range.isCollapsed(selection);
+  const linkNode = {
+    type: 'link',
+    url,
+    children: isCollapsed ? [{
+      text: url
+    }] : []
+  };
+  if (isCollapsed) {
+    slate.Transforms.insertNodes(editor, linkNode);
+  } else {
+    slate.Transforms.wrapNodes(editor, linkNode, {
+      split: true
+    });
+    slate.Transforms.collapse(editor, {
+      edge: 'end'
+    });
+  }
+};
+const withLinks = editor => {
+  const insertText = editor.insertText,
+    insertData = editor.insertData,
+    isInline = editor.isInline;
+
+  // Mark link elements as inline (from example)
+  editor.isInline = element => {
+    return element.type === 'link' || isInline(element);
+  };
+
+  // Handle URL pasting/typing to automatically create links (from example)
+  editor.insertText = text => {
+    if (text && isUrl__default["default"](text)) {
+      wrapLink(editor, text);
+    } else {
+      insertText(text);
+    }
+  };
+  editor.insertData = data => {
+    const text = data.getData('text/plain');
+    if (text && isUrl__default["default"](text)) {
+      wrapLink(editor, text);
+    } else {
+      insertData(data);
+    }
+  };
+  return editor;
+};
 
 function ownKeys$f(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys$f(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys$f(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys$f(Object(t), !0)).call(_context8, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys$f(Object(t))).call(_context9, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 
 // Slate's way of providing custom type annotations comes down to extending `CustomTypes` interface
 // more: https://docs.slatejs.org/concepts/12-typescript
@@ -401,15 +480,16 @@ const serializeNode = node => {
     return string;
   }
   const children = _mapInstanceProperty__default["default"](_context = node.children).call(_context, serializeNode).join('');
-  switch (node.type) {
+  const element = node; // Use updated CustomElement
+
+  switch (element.type) {
     case 'block-quote':
       return `<blockquote>${children}</blockquote>`;
     case 'paragraph':
       return `<p>${children}</p>`;
     case 'code':
       return `<pre>
-            <code>${children}</code>
-          </pre>`;
+            <code>${children}</code>`;
     case 'span':
       return `<span>${children}</span>`;
     case 'bulleted-list':
@@ -418,6 +498,36 @@ const serializeNode = node => {
       return `<ol>${children}</ol>`;
     case 'list-item':
       return `<li>${children}</li>`;
+    case BLOCK_TAGS.a:
+      // Handle link serialization
+      // eslint-disable-next-line no-case-declarations
+      let hrefAttr = '';
+      if (element.url) {
+        // Sanitize href to prevent javascript: URLs during serialization as well
+        const sanitizedUrl = (_context2 => {
+          const url = _trimInstanceProperty__default["default"](_context2 = String(element.url)).call(_context2).toLowerCase();
+          if (_startsWithInstanceProperty__default["default"](url).call(url, 'javascript:') || _startsWithInstanceProperty__default["default"](url).call(url, 'data:') || _startsWithInstanceProperty__default["default"](url).call(url, 'vbscript:')) {
+            return '#';
+          }
+          return String(element.url);
+        })();
+        hrefAttr = ` href="${escapeHtml__default["default"](sanitizedUrl)}"`;
+      }
+      // eslint-disable-next-line no-case-declarations
+      let otherAttrsString = '';
+      if (element.htmlAttributes && typeof element.htmlAttributes === 'object') {
+        for (const _ref of _Object$entries__default["default"](element.htmlAttributes)) {
+          var _context3;
+          var _ref2 = _slicedToArray(_ref, 2);
+          const key = _ref2[0];
+          const value = _ref2[1];
+          // Strip event handlers during serialization too
+          if (!_startsWithInstanceProperty__default["default"](_context3 = key.toLowerCase()).call(_context3, 'on')) {
+            otherAttrsString += ` ${escapeHtml__default["default"](key)}="${escapeHtml__default["default"](String(value))}"`;
+          }
+        }
+      }
+      return `<a${hrefAttr}${otherAttrsString}>${children}</a>`;
     case 'heading-one':
       return `<h1>${children}</h1>`;
     case 'heading-two':
@@ -425,7 +535,7 @@ const serializeNode = node => {
     case 'heading-three':
       return `<h3>${children}</h3>`;
     case 'heading-four':
-      return `<h4}>${children}</h4>`;
+      return `<h4>${children}</h4>`;
     case 'heading-five':
       return `<h5>${children}</h5>`;
     default:
@@ -447,6 +557,35 @@ const serialize = value => {
   return outputHtml;
 };
 const ELEMENT_TAGS = {
+  A: el => {
+    const props = {
+      type: BLOCK_TAGS.a
+    };
+    const htmlAttributes = {};
+    for (const attr of _Array$from__default["default"](el.attributes)) {
+      const attrName = attr.name.toLowerCase();
+      const attrValue = attr.value;
+      if (attrName === 'href') {
+        var _context4;
+        // Sanitize href to prevent javascript: URLs
+        const sanitizedValue = _trimInstanceProperty__default["default"](_context4 = decodeURI(attrValue)).call(_context4).toLowerCase();
+        if (
+        // eslint-disable-next-line no-script-url
+        _startsWithInstanceProperty__default["default"](sanitizedValue).call(sanitizedValue, 'javascript:') || _startsWithInstanceProperty__default["default"](sanitizedValue).call(sanitizedValue, 'data:') || _startsWithInstanceProperty__default["default"](sanitizedValue).call(sanitizedValue, 'vbscript:')) {
+          props.url = '#'; // Replace with a safe value
+        } else {
+          props.url = attrValue;
+        }
+      } else if (!_startsWithInstanceProperty__default["default"](attrName).call(attrName, 'on')) {
+        // Strip event handlers
+        htmlAttributes[attrName] = attrValue;
+      }
+    }
+    if (_Object$keys__default["default"](htmlAttributes).length > 0) {
+      props.htmlAttributes = htmlAttributes;
+    }
+    return props;
+  },
   BLOCKQUOTE: () => ({
     type: 'quote'
   }),
@@ -552,7 +691,7 @@ const wrapWithParagraph = textContent => slateHyperscript.jsx('element', {
 const wrapWithParagraphIfRootElement = (el, textContent) => el.parentNode?.nodeName === 'BODY' // root element, because body is eventually turned to React fragment
 ? wrapWithParagraph(textContent) : textContent;
 const deserializeElement = el => {
-  var _context2, _context3;
+  var _context5, _context6;
   // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#value
   if (el.nodeType === 3) {
     return wrapWithParagraphIfRootElement(el, {
@@ -569,7 +708,7 @@ const deserializeElement = el => {
   if (nodeName === 'PRE' && el.childNodes[0] && el.childNodes[0].nodeName === 'CODE') {
     parent = el.childNodes[0];
   }
-  let children = _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = _Array$from3__default["default"](parent.childNodes)).call(_context3, deserializeElement)).call(_context2);
+  let children = _flatInstanceProperty__default["default"](_context5 = _mapInstanceProperty__default["default"](_context6 = _Array$from__default["default"](parent.childNodes)).call(_context6, deserializeElement)).call(_context5);
   if (children.length === 0) {
     children = [{
       text: ''
@@ -588,11 +727,11 @@ const deserializeElement = el => {
         type: 'span'
       }, children));
     } else {
-      var _context4;
-      attrs = _reduceInstanceProperty__default["default"](_context4 = _Object$entries__default["default"](styleObj || {})).call(_context4, (mappedAttrObj, _ref) => {
-        let _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
+      var _context7;
+      attrs = _reduceInstanceProperty__default["default"](_context7 = _Object$entries__default["default"](styleObj || {})).call(_context7, (mappedAttrObj, _ref3) => {
+        let _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
         const values = value.split(' '); // to cover the case of space-separated values e.g. `text-decoration-line: "underline line-through"`
 
         _forEachInstanceProperty__default["default"](values).call(values, splittedValue => {
@@ -614,8 +753,11 @@ const deserializeElement = el => {
       _mapInstanceProperty__default["default"](children).call(children, child => slate.Text.isText(child) ? slateHyperscript.jsx('text', attrs, child) : slateHyperscript.jsx('element', attrs, child)));
     }
   }
+
+  // Modified to use the updated ELEMENT_TAGS for 'A'
   if (ELEMENT_TAGS[nodeName]) {
-    const attrs = ELEMENT_TAGS[nodeName]();
+    const attrs = ELEMENT_TAGS[nodeName](el // Pass element to access its attributes
+    );
     return slateHyperscript.jsx('element', attrs, children);
   }
   if (TEXT_TAGS[nodeName]) {
@@ -1838,7 +1980,7 @@ RichTextEditorBody.displayName = 'RichTextEditorBody';
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.24.0";
+var version = "19.25.0";
 
 exports.Element = Element;
 exports.HiddenInput = HiddenInput$1;
@@ -1856,3 +1998,4 @@ exports.toggleBlock = toggleBlock;
 exports.toggleMark = toggleMark;
 exports.validSlateStateAdapter = validSlateStateAdapter;
 exports.version = version;
+exports.withLinks = withLinks;

package/dist/commercetools-uikit-rich-text-utils.cjs.prod.js

@@ -12,9 +12,11 @@ require('@commercetools-uikit/utils');
 var uniq = require('lodash/uniq');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
+var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
+var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var _flatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat');
-var _Array$from3 = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -28,11 +30,12 @@ var slateHyperscript = require('slate-hyperscript');
 var parse = require('style-to-object');
 var isEmpty$2 = require('lodash/isEmpty');
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var react = require('react');
 var slateReact = require('slate-react');
+var isUrl = require('is-url');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 require('prop-types');
-var react = require('react');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _styled = require('@emotion/styled/base');
@@ -55,9 +58,11 @@ var _Object$entries__default = /*#__PURE__*/_interopDefault(_Object$entries);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var uniq__default = /*#__PURE__*/_interopDefault(uniq);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
+var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
+var _startsWithInstanceProperty__default = /*#__PURE__*/_interopDefault(_startsWithInstanceProperty);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
 var _flatInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatInstanceProperty);
-var _Array$from3__default = /*#__PURE__*/_interopDefault(_Array$from3);
 var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -69,6 +74,7 @@ var escapeHtml__default = /*#__PURE__*/_interopDefault(escapeHtml);
 var parse__default = /*#__PURE__*/_interopDefault(parse);
 var isEmpty__default = /*#__PURE__*/_interopDefault(isEmpty$2);
 var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var isUrl__default = /*#__PURE__*/_interopDefault(isUrl);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
@@ -88,7 +94,8 @@ const BLOCK_TAGS = {
   pre: 'code',
   li: 'list-item',
   ol: 'numbered-list',
-  ul: 'bulleted-list'
+  ul: 'bulleted-list',
+  a: 'link'
 };
 
 // Add a dictionary of mark tags.
@@ -172,6 +179,13 @@ const Element = _ref => {
       }, attributes), {}, {
         children: children
       }));
+    case BLOCK_TAGS.a:
+      return jsxRuntime.jsx("a", _objectSpread$g(_objectSpread$g({
+        style: style
+      }, attributes), {}, {
+        rel: "noopener noreferrer",
+        children: children
+      }));
     default:
       return jsxRuntime.jsx("p", _objectSpread$g(_objectSpread$g({
         style: style
@@ -258,7 +272,7 @@ const toggleMark = (editor, format) => {
 const isBlockActive = (editor, format) => {
   const selection = editor.selection;
   if (!selection) return false;
-  const _Array$from = _Array$from3__default["default"](slate.Editor.nodes(editor, {
+  const _Array$from = _Array$from__default["default"](slate.Editor.nodes(editor, {
       at: slate.Editor.unhangRange(editor, selection),
       match: n => !slate.Editor.isEditor(n) && slate.Element.isElement(n) && n.type === format
     })),
@@ -361,9 +375,74 @@ const Softbreaker = {
     return html.split(this.placeholderCharacter).join('');
   }
 };
+const isLinkActive = editor => {
+  const _Editor$nodes = slate.Editor.nodes(editor, {
+      match: n => !slate.Editor.isEditor(n) && slate.Element.isElement(n) && n.type === 'link'
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    link = _Editor$nodes2[0];
+  return !!link;
+};
+const unwrapLink = editor => {
+  slate.Transforms.unwrapNodes(editor, {
+    match: n => !slate.Editor.isEditor(n) && slate.Element.isElement(n) && n.type === 'link'
+  });
+};
+const wrapLink = (editor, url) => {
+  if (isLinkActive(editor)) {
+    unwrapLink(editor);
+  }
+  const selection = editor.selection;
+  const isCollapsed = selection && slate.Range.isCollapsed(selection);
+  const linkNode = {
+    type: 'link',
+    url,
+    children: isCollapsed ? [{
+      text: url
+    }] : []
+  };
+  if (isCollapsed) {
+    slate.Transforms.insertNodes(editor, linkNode);
+  } else {
+    slate.Transforms.wrapNodes(editor, linkNode, {
+      split: true
+    });
+    slate.Transforms.collapse(editor, {
+      edge: 'end'
+    });
+  }
+};
+const withLinks = editor => {
+  const insertText = editor.insertText,
+    insertData = editor.insertData,
+    isInline = editor.isInline;
+
+  // Mark link elements as inline (from example)
+  editor.isInline = element => {
+    return element.type === 'link' || isInline(element);
+  };
+
+  // Handle URL pasting/typing to automatically create links (from example)
+  editor.insertText = text => {
+    if (text && isUrl__default["default"](text)) {
+      wrapLink(editor, text);
+    } else {
+      insertText(text);
+    }
+  };
+  editor.insertData = data => {
+    const text = data.getData('text/plain');
+    if (text && isUrl__default["default"](text)) {
+      wrapLink(editor, text);
+    } else {
+      insertData(data);
+    }
+  };
+  return editor;
+};
 
 function ownKeys$f(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys$f(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys$f(Object(t))).call(_context6, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys$f(Object(t), !0)).call(_context8, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys$f(Object(t))).call(_context9, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 
 // Slate's way of providing custom type annotations comes down to extending `CustomTypes` interface
 // more: https://docs.slatejs.org/concepts/12-typescript
@@ -400,15 +479,16 @@ const serializeNode = node => {
     return string;
   }
   const children = _mapInstanceProperty__default["default"](_context = node.children).call(_context, serializeNode).join('');
-  switch (node.type) {
+  const element = node; // Use updated CustomElement
+
+  switch (element.type) {
     case 'block-quote':
       return `<blockquote>${children}</blockquote>`;
     case 'paragraph':
       return `<p>${children}</p>`;
     case 'code':
       return `<pre>
-            <code>${children}</code>
-          </pre>`;
+            <code>${children}</code>`;
     case 'span':
       return `<span>${children}</span>`;
     case 'bulleted-list':
@@ -417,6 +497,36 @@ const serializeNode = node => {
       return `<ol>${children}</ol>`;
     case 'list-item':
       return `<li>${children}</li>`;
+    case BLOCK_TAGS.a:
+      // Handle link serialization
+      // eslint-disable-next-line no-case-declarations
+      let hrefAttr = '';
+      if (element.url) {
+        // Sanitize href to prevent javascript: URLs during serialization as well
+        const sanitizedUrl = (_context2 => {
+          const url = _trimInstanceProperty__default["default"](_context2 = String(element.url)).call(_context2).toLowerCase();
+          if (_startsWithInstanceProperty__default["default"](url).call(url, 'javascript:') || _startsWithInstanceProperty__default["default"](url).call(url, 'data:') || _startsWithInstanceProperty__default["default"](url).call(url, 'vbscript:')) {
+            return '#';
+          }
+          return String(element.url);
+        })();
+        hrefAttr = ` href="${escapeHtml__default["default"](sanitizedUrl)}"`;
+      }
+      // eslint-disable-next-line no-case-declarations
+      let otherAttrsString = '';
+      if (element.htmlAttributes && typeof element.htmlAttributes === 'object') {
+        for (const _ref of _Object$entries__default["default"](element.htmlAttributes)) {
+          var _context3;
+          var _ref2 = _slicedToArray(_ref, 2);
+          const key = _ref2[0];
+          const value = _ref2[1];
+          // Strip event handlers during serialization too
+          if (!_startsWithInstanceProperty__default["default"](_context3 = key.toLowerCase()).call(_context3, 'on')) {
+            otherAttrsString += ` ${escapeHtml__default["default"](key)}="${escapeHtml__default["default"](String(value))}"`;
+          }
+        }
+      }
+      return `<a${hrefAttr}${otherAttrsString}>${children}</a>`;
     case 'heading-one':
       return `<h1>${children}</h1>`;
     case 'heading-two':
@@ -424,7 +534,7 @@ const serializeNode = node => {
     case 'heading-three':
       return `<h3>${children}</h3>`;
     case 'heading-four':
-      return `<h4}>${children}</h4>`;
+      return `<h4>${children}</h4>`;
     case 'heading-five':
       return `<h5>${children}</h5>`;
     default:
@@ -446,6 +556,35 @@ const serialize = value => {
   return outputHtml;
 };
 const ELEMENT_TAGS = {
+  A: el => {
+    const props = {
+      type: BLOCK_TAGS.a
+    };
+    const htmlAttributes = {};
+    for (const attr of _Array$from__default["default"](el.attributes)) {
+      const attrName = attr.name.toLowerCase();
+      const attrValue = attr.value;
+      if (attrName === 'href') {
+        var _context4;
+        // Sanitize href to prevent javascript: URLs
+        const sanitizedValue = _trimInstanceProperty__default["default"](_context4 = decodeURI(attrValue)).call(_context4).toLowerCase();
+        if (
+        // eslint-disable-next-line no-script-url
+        _startsWithInstanceProperty__default["default"](sanitizedValue).call(sanitizedValue, 'javascript:') || _startsWithInstanceProperty__default["default"](sanitizedValue).call(sanitizedValue, 'data:') || _startsWithInstanceProperty__default["default"](sanitizedValue).call(sanitizedValue, 'vbscript:')) {
+          props.url = '#'; // Replace with a safe value
+        } else {
+          props.url = attrValue;
+        }
+      } else if (!_startsWithInstanceProperty__default["default"](attrName).call(attrName, 'on')) {
+        // Strip event handlers
+        htmlAttributes[attrName] = attrValue;
+      }
+    }
+    if (_Object$keys__default["default"](htmlAttributes).length > 0) {
+      props.htmlAttributes = htmlAttributes;
+    }
+    return props;
+  },
   BLOCKQUOTE: () => ({
     type: 'quote'
   }),
@@ -551,7 +690,7 @@ const wrapWithParagraph = textContent => slateHyperscript.jsx('element', {
 const wrapWithParagraphIfRootElement = (el, textContent) => el.parentNode?.nodeName === 'BODY' // root element, because body is eventually turned to React fragment
 ? wrapWithParagraph(textContent) : textContent;
 const deserializeElement = el => {
-  var _context2, _context3;
+  var _context5, _context6;
   // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#value
   if (el.nodeType === 3) {
     return wrapWithParagraphIfRootElement(el, {
@@ -568,7 +707,7 @@ const deserializeElement = el => {
   if (nodeName === 'PRE' && el.childNodes[0] && el.childNodes[0].nodeName === 'CODE') {
     parent = el.childNodes[0];
   }
-  let children = _flatInstanceProperty__default["default"](_context2 = _mapInstanceProperty__default["default"](_context3 = _Array$from3__default["default"](parent.childNodes)).call(_context3, deserializeElement)).call(_context2);
+  let children = _flatInstanceProperty__default["default"](_context5 = _mapInstanceProperty__default["default"](_context6 = _Array$from__default["default"](parent.childNodes)).call(_context6, deserializeElement)).call(_context5);
   if (children.length === 0) {
     children = [{
       text: ''
@@ -587,11 +726,11 @@ const deserializeElement = el => {
         type: 'span'
       }, children));
     } else {
-      var _context4;
-      attrs = _reduceInstanceProperty__default["default"](_context4 = _Object$entries__default["default"](styleObj || {})).call(_context4, (mappedAttrObj, _ref) => {
-        let _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
+      var _context7;
+      attrs = _reduceInstanceProperty__default["default"](_context7 = _Object$entries__default["default"](styleObj || {})).call(_context7, (mappedAttrObj, _ref3) => {
+        let _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
         const values = value.split(' '); // to cover the case of space-separated values e.g. `text-decoration-line: "underline line-through"`
 
         _forEachInstanceProperty__default["default"](values).call(values, splittedValue => {
@@ -613,8 +752,11 @@ const deserializeElement = el => {
       _mapInstanceProperty__default["default"](children).call(children, child => slate.Text.isText(child) ? slateHyperscript.jsx('text', attrs, child) : slateHyperscript.jsx('element', attrs, child)));
     }
   }
+
+  // Modified to use the updated ELEMENT_TAGS for 'A'
   if (ELEMENT_TAGS[nodeName]) {
-    const attrs = ELEMENT_TAGS[nodeName]();
+    const attrs = ELEMENT_TAGS[nodeName](el // Pass element to access its attributes
+    );
     return slateHyperscript.jsx('element', attrs, children);
   }
   if (TEXT_TAGS[nodeName]) {
@@ -1731,7 +1873,7 @@ RichTextEditorBody.displayName = 'RichTextEditorBody';
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.24.0";
+var version = "19.25.0";
 
 exports.Element = Element;
 exports.HiddenInput = HiddenInput$1;
@@ -1749,3 +1891,4 @@ exports.toggleBlock = toggleBlock;
 exports.toggleMark = toggleMark;
 exports.validSlateStateAdapter = validSlateStateAdapter;
 exports.version = version;
+exports.withLinks = withLinks;

package/dist/commercetools-uikit-rich-text-utils.esm.js

@@ -8,9 +8,11 @@ import { warning } from '@commercetools-uikit/utils';
 import uniq from 'lodash/uniq';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
+import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
+import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
+import _Array$from from '@babel/runtime-corejs3/core-js-stable/array/from';
 import _flatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/flat';
-import _Array$from3 from '@babel/runtime-corejs3/core-js-stable/array/from';
 import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -19,16 +21,17 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import escapeHtml from 'escape-html';
-import { Editor, Element as Element$1, Transforms, Text } from 'slate';
+import { Editor, Element as Element$1, Transforms, Text, Range } from 'slate';
 import { jsx as jsx$1 } from 'slate-hyperscript';
 import parse from 'style-to-object';
 import isEmpty$2 from 'lodash/isEmpty';
 import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import { useCallback, forwardRef } from 'react';
 import { ReactEditor, useSlate } from 'slate-react';
+import isUrl from 'is-url';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import _pt from 'prop-types';
-import { useCallback, forwardRef } from 'react';
 import { accessibleHiddenInputStyles } from '@commercetools-uikit/input-utils';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import _styled from '@emotion/styled/base';
@@ -53,7 +56,8 @@ const BLOCK_TAGS = {
   pre: 'code',
   li: 'list-item',
   ol: 'numbered-list',
-  ul: 'bulleted-list'
+  ul: 'bulleted-list',
+  a: 'link'
 };
 
 // Add a dictionary of mark tags.
@@ -137,6 +141,13 @@ const Element = _ref => {
       }, attributes), {}, {
         children: children
       }));
+    case BLOCK_TAGS.a:
+      return jsx("a", _objectSpread$g(_objectSpread$g({
+        style: style
+      }, attributes), {}, {
+        rel: "noopener noreferrer",
+        children: children
+      }));
     default:
       return jsx("p", _objectSpread$g(_objectSpread$g({
         style: style
@@ -223,11 +234,11 @@ const toggleMark = (editor, format) => {
 const isBlockActive = (editor, format) => {
   const selection = editor.selection;
   if (!selection) return false;
-  const _Array$from = _Array$from3(Editor.nodes(editor, {
+  const _Array$from$1 = _Array$from(Editor.nodes(editor, {
       at: Editor.unhangRange(editor, selection),
       match: n => !Editor.isEditor(n) && Element$1.isElement(n) && n.type === format
     })),
-    _Array$from2 = _slicedToArray(_Array$from, 1),
+    _Array$from2 = _slicedToArray(_Array$from$1, 1),
     match = _Array$from2[0];
   return Boolean(match);
 };
@@ -326,9 +337,74 @@ const Softbreaker = {
     return html.split(this.placeholderCharacter).join('');
   }
 };
+const isLinkActive = editor => {
+  const _Editor$nodes = Editor.nodes(editor, {
+      match: n => !Editor.isEditor(n) && Element$1.isElement(n) && n.type === 'link'
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    link = _Editor$nodes2[0];
+  return !!link;
+};
+const unwrapLink = editor => {
+  Transforms.unwrapNodes(editor, {
+    match: n => !Editor.isEditor(n) && Element$1.isElement(n) && n.type === 'link'
+  });
+};
+const wrapLink = (editor, url) => {
+  if (isLinkActive(editor)) {
+    unwrapLink(editor);
+  }
+  const selection = editor.selection;
+  const isCollapsed = selection && Range.isCollapsed(selection);
+  const linkNode = {
+    type: 'link',
+    url,
+    children: isCollapsed ? [{
+      text: url
+    }] : []
+  };
+  if (isCollapsed) {
+    Transforms.insertNodes(editor, linkNode);
+  } else {
+    Transforms.wrapNodes(editor, linkNode, {
+      split: true
+    });
+    Transforms.collapse(editor, {
+      edge: 'end'
+    });
+  }
+};
+const withLinks = editor => {
+  const insertText = editor.insertText,
+    insertData = editor.insertData,
+    isInline = editor.isInline;
+
+  // Mark link elements as inline (from example)
+  editor.isInline = element => {
+    return element.type === 'link' || isInline(element);
+  };
+
+  // Handle URL pasting/typing to automatically create links (from example)
+  editor.insertText = text => {
+    if (text && isUrl(text)) {
+      wrapLink(editor, text);
+    } else {
+      insertText(text);
+    }
+  };
+  editor.insertData = data => {
+    const text = data.getData('text/plain');
+    if (text && isUrl(text)) {
+      wrapLink(editor, text);
+    } else {
+      insertData(data);
+    }
+  };
+  return editor;
+};
 
 function ownKeys$f(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys$f(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys$f(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context8, _context9; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context8 = ownKeys$f(Object(t), !0)).call(_context8, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context9 = ownKeys$f(Object(t))).call(_context9, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Slate's way of providing custom type annotations comes down to extending `CustomTypes` interface
 // more: https://docs.slatejs.org/concepts/12-typescript
@@ -365,15 +441,16 @@ const serializeNode = node => {
     return string;
   }
   const children = _mapInstanceProperty(_context = node.children).call(_context, serializeNode).join('');
-  switch (node.type) {
+  const element = node; // Use updated CustomElement
+
+  switch (element.type) {
     case 'block-quote':
       return `<blockquote>${children}</blockquote>`;
     case 'paragraph':
       return `<p>${children}</p>`;
     case 'code':
       return `<pre>
-            <code>${children}</code>
-          </pre>`;
+            <code>${children}</code>`;
     case 'span':
       return `<span>${children}</span>`;
     case 'bulleted-list':
@@ -382,6 +459,36 @@ const serializeNode = node => {
       return `<ol>${children}</ol>`;
     case 'list-item':
       return `<li>${children}</li>`;
+    case BLOCK_TAGS.a:
+      // Handle link serialization
+      // eslint-disable-next-line no-case-declarations
+      let hrefAttr = '';
+      if (element.url) {
+        // Sanitize href to prevent javascript: URLs during serialization as well
+        const sanitizedUrl = (_context2 => {
+          const url = _trimInstanceProperty(_context2 = String(element.url)).call(_context2).toLowerCase();
+          if (_startsWithInstanceProperty(url).call(url, 'javascript:') || _startsWithInstanceProperty(url).call(url, 'data:') || _startsWithInstanceProperty(url).call(url, 'vbscript:')) {
+            return '#';
+          }
+          return String(element.url);
+        })();
+        hrefAttr = ` href="${escapeHtml(sanitizedUrl)}"`;
+      }
+      // eslint-disable-next-line no-case-declarations
+      let otherAttrsString = '';
+      if (element.htmlAttributes && typeof element.htmlAttributes === 'object') {
+        for (const _ref of _Object$entries(element.htmlAttributes)) {
+          var _context3;
+          var _ref2 = _slicedToArray(_ref, 2);
+          const key = _ref2[0];
+          const value = _ref2[1];
+          // Strip event handlers during serialization too
+          if (!_startsWithInstanceProperty(_context3 = key.toLowerCase()).call(_context3, 'on')) {
+            otherAttrsString += ` ${escapeHtml(key)}="${escapeHtml(String(value))}"`;
+          }
+        }
+      }
+      return `<a${hrefAttr}${otherAttrsString}>${children}</a>`;
     case 'heading-one':
       return `<h1>${children}</h1>`;
     case 'heading-two':
@@ -389,7 +496,7 @@ const serializeNode = node => {
     case 'heading-three':
       return `<h3>${children}</h3>`;
     case 'heading-four':
-      return `<h4}>${children}</h4>`;
+      return `<h4>${children}</h4>`;
     case 'heading-five':
       return `<h5>${children}</h5>`;
     default:
@@ -411,6 +518,35 @@ const serialize = value => {
   return outputHtml;
 };
 const ELEMENT_TAGS = {
+  A: el => {
+    const props = {
+      type: BLOCK_TAGS.a
+    };
+    const htmlAttributes = {};
+    for (const attr of _Array$from(el.attributes)) {
+      const attrName = attr.name.toLowerCase();
+      const attrValue = attr.value;
+      if (attrName === 'href') {
+        var _context4;
+        // Sanitize href to prevent javascript: URLs
+        const sanitizedValue = _trimInstanceProperty(_context4 = decodeURI(attrValue)).call(_context4).toLowerCase();
+        if (
+        // eslint-disable-next-line no-script-url
+        _startsWithInstanceProperty(sanitizedValue).call(sanitizedValue, 'javascript:') || _startsWithInstanceProperty(sanitizedValue).call(sanitizedValue, 'data:') || _startsWithInstanceProperty(sanitizedValue).call(sanitizedValue, 'vbscript:')) {
+          props.url = '#'; // Replace with a safe value
+        } else {
+          props.url = attrValue;
+        }
+      } else if (!_startsWithInstanceProperty(attrName).call(attrName, 'on')) {
+        // Strip event handlers
+        htmlAttributes[attrName] = attrValue;
+      }
+    }
+    if (_Object$keys(htmlAttributes).length > 0) {
+      props.htmlAttributes = htmlAttributes;
+    }
+    return props;
+  },
   BLOCKQUOTE: () => ({
     type: 'quote'
   }),
@@ -516,7 +652,7 @@ const wrapWithParagraph = textContent => jsx$1('element', {
 const wrapWithParagraphIfRootElement = (el, textContent) => el.parentNode?.nodeName === 'BODY' // root element, because body is eventually turned to React fragment
 ? wrapWithParagraph(textContent) : textContent;
 const deserializeElement = el => {
-  var _context2, _context3;
+  var _context5, _context6;
   // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#value
   if (el.nodeType === 3) {
     return wrapWithParagraphIfRootElement(el, {
@@ -533,7 +669,7 @@ const deserializeElement = el => {
   if (nodeName === 'PRE' && el.childNodes[0] && el.childNodes[0].nodeName === 'CODE') {
     parent = el.childNodes[0];
   }
-  let children = _flatInstanceProperty(_context2 = _mapInstanceProperty(_context3 = _Array$from3(parent.childNodes)).call(_context3, deserializeElement)).call(_context2);
+  let children = _flatInstanceProperty(_context5 = _mapInstanceProperty(_context6 = _Array$from(parent.childNodes)).call(_context6, deserializeElement)).call(_context5);
   if (children.length === 0) {
     children = [{
       text: ''
@@ -552,11 +688,11 @@ const deserializeElement = el => {
         type: 'span'
       }, children));
     } else {
-      var _context4;
-      attrs = _reduceInstanceProperty(_context4 = _Object$entries(styleObj || {})).call(_context4, (mappedAttrObj, _ref) => {
-        let _ref2 = _slicedToArray(_ref, 2),
-          key = _ref2[0],
-          value = _ref2[1];
+      var _context7;
+      attrs = _reduceInstanceProperty(_context7 = _Object$entries(styleObj || {})).call(_context7, (mappedAttrObj, _ref3) => {
+        let _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          value = _ref4[1];
         const values = value.split(' '); // to cover the case of space-separated values e.g. `text-decoration-line: "underline line-through"`
 
         _forEachInstanceProperty(values).call(values, splittedValue => {
@@ -578,8 +714,11 @@ const deserializeElement = el => {
       _mapInstanceProperty(children).call(children, child => Text.isText(child) ? jsx$1('text', attrs, child) : jsx$1('element', attrs, child)));
     }
   }
+
+  // Modified to use the updated ELEMENT_TAGS for 'A'
   if (ELEMENT_TAGS[nodeName]) {
-    const attrs = ELEMENT_TAGS[nodeName]();
+    const attrs = ELEMENT_TAGS[nodeName](el // Pass element to access its attributes
+    );
     return jsx$1('element', attrs, children);
   }
   if (TEXT_TAGS[nodeName]) {
@@ -1802,6 +1941,6 @@ RichTextEditorBody.displayName = 'RichTextEditorBody';
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.24.0";
+var version = "19.25.0";
 
-export { Element, HiddenInput$1 as HiddenInput, Leaf, RichTextEditorBody$1 as RichTextBody, Softbreaker, focusEditor, html$1 as html, isBlockActive, isRichTextEmpty as isEmpty, isMarkActive, index as localized, resetEditor, toggleBlock, toggleMark, validSlateStateAdapter, version };
+export { Element, HiddenInput$1 as HiddenInput, Leaf, RichTextEditorBody$1 as RichTextBody, Softbreaker, focusEditor, html$1 as html, isBlockActive, isRichTextEmpty as isEmpty, isMarkActive, index as localized, resetEditor, toggleBlock, toggleMark, validSlateStateAdapter, version, withLinks };

package/dist/declarations/src/html/html.d.ts

@@ -7,6 +7,8 @@ export type CustomElement = {
     type: Format;
     children: CustomText[];
     align?: string;
+    url?: string;
+    htmlAttributes?: Record<string, string>;
 };
 type CustomText = BaseText & {
     bold?: boolean;

package/dist/declarations/src/index.d.ts

@@ -3,4 +3,4 @@ export { default as html } from "./html/index.js";
 export { default as isEmpty } from "./is-empty/index.js";
 export { HiddenInput, RichTextBody } from "./rich-text-body/index.js";
 export { default as version } from "./version.js";
-export { Element, Leaf, Softbreaker, isMarkActive, isBlockActive, toggleMark, toggleBlock, validSlateStateAdapter, resetEditor, focusEditor, } from "./slate-helpers.js";
+export { Element, Leaf, Softbreaker, isMarkActive, isBlockActive, toggleMark, toggleBlock, validSlateStateAdapter, resetEditor, focusEditor, withLinks, } from "./slate-helpers.js";

package/dist/declarations/src/slate-helpers.d.ts

@@ -37,4 +37,9 @@ declare const Softbreaker: {
      */
     cleanHtml(html: string): string;
 };
-export { Element, Leaf, Softbreaker, isMarkActive, isBlockActive, toggleMark, toggleBlock, validSlateStateAdapter, resetEditor, focusEditor, };
+export declare const isLinkActive: (editor: Editor) => boolean;
+export declare const unwrapLink: (editor: Editor) => void;
+export declare const wrapLink: (editor: Editor, url: string) => void;
+export declare const insertLink: (editor: Editor, url: string) => void;
+declare const withLinks: (editor: Editor) => Editor;
+export { Element, Leaf, Softbreaker, isMarkActive, isBlockActive, toggleMark, toggleBlock, validSlateStateAdapter, resetEditor, focusEditor, withLinks, };

package/dist/declarations/src/tags.d.ts

@@ -10,6 +10,7 @@ export declare const BLOCK_TAGS: {
     li: string;
     ol: string;
     ul: string;
+    a: string;
 };
 export declare const MARK_TAGS: {
     em: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/rich-text-utils",
   "description": "Utilities for working with rich-text components.",
-  "version": "19.24.0",
+  "version": "19.25.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -24,18 +24,19 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/design-system": "19.24.0",
-    "@commercetools-uikit/icons": "19.24.0",
-    "@commercetools-uikit/input-utils": "19.24.0",
-    "@commercetools-uikit/spacings-inline": "19.24.0",
-    "@commercetools-uikit/tooltip": "19.24.0",
-    "@commercetools-uikit/utils": "19.24.0",
+    "@commercetools-uikit/design-system": "19.25.0",
+    "@commercetools-uikit/icons": "19.25.0",
+    "@commercetools-uikit/input-utils": "19.25.0",
+    "@commercetools-uikit/spacings-inline": "19.25.0",
+    "@commercetools-uikit/tooltip": "19.25.0",
+    "@commercetools-uikit/utils": "19.25.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@types/escape-html": "1.0.4",
     "downshift": "6.1.12",
     "escape-html": "1.0.3",
     "is-hotkey": "0.2.0",
+    "is-url": "^1.2.4",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
     "slate": "0.75.0",