feat: [RichText] add data-cui-href when the href of the link is removed

Author: akai

src/components/RichText/configDOMPurify.ts

@@ -1,19 +1,27 @@
 import DOMPurify from 'dompurify';
 
-function getLinkAttr(node: Element, attr: string) {
-  return (node.nodeName === 'A' && node.getAttribute(attr)) || '';
-}
-
-// set `a` element owning target to `target=_blank`
-// https://github.com/cure53/DOMPurify/issues/317
 DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
-  if (getLinkAttr(node, 'target')) {
-    node.setAttribute('rel', 'noopener');
+  if (node instanceof HTMLElement && node.hasAttribute('href')) {
+    const href = node.getAttribute('href');
+
+    if (href) {
+      node.dataset.cuiHref = href;
+    }
+    if (node.getAttribute('target') === '_blank') {
+      node.dataset.cuiTarget = '1';
+    }
   }
 });
 
 DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
-  if (getLinkAttr(node, 'rel') === 'noopener') {
-    node.setAttribute('target', '_blank');
+  if (node instanceof HTMLElement) {
+    if (node.dataset.cuiHref && node.hasAttribute('href')) {
+      node.removeAttribute('data-cui-href');
+    }
+    if (node.dataset.cuiTarget) {
+      node.setAttribute('target', '_blank');
+      node.setAttribute('rel', 'noopener noreferrer');
+      node.removeAttribute('data-cui-target');
+    }
   }
 });

storybook/stories/RichText.stories.tsx

@@ -18,8 +18,12 @@ Default.args = {
 export const Anchor = () => {
   const content = `
     <div>
-      <p>Link to <a href="http://chatui.io/">ChatUI1</a></p>
-      <p>Link to <a href="http://chatui.io/" target="_blank">ChatUI2</a> (new window)</p>
+      <p>Link to <a href="https://chatui.io/">ChatUI1</a> (no target)</p>
+      <p>Link to <a href="//chatui.io/" target="_self">ChatUI2</a> (target="_self")</p>
+      <p>Link to <a href="http://chatui.io/" target="_blank">ChatUI2</a> (target="_blank)</p>
+      <p>Link to <a href="https://chatui.io/" target="_parent">ChatUI2</a> (target="_parent)</p>
+      <p>Link to <a href="https://chatui.io/" target="_top">ChatUI2</a> (target="_top)</p>
+      <p>Open <a href="alipay://home">Alipay</a> App</p>
     </div>
   `;
   return <RichText content={content} />;