fix: support special superlink's display

Author: Sawtone

src/slate-convert/md-to-slate/transform.js

@@ -26,13 +26,35 @@ const INLINE_KEY_MAP = {
   emphasis: 'italic',
 };
 
+const transformLinkTextNodes = (nodes, marks = {}) => {
+  if (!Array.isArray(nodes)) return null;
+
+  const textNodes = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.type === 'text') {
+      textNodes.push({ id: slugid.nice(), text: node.value || '', ...marks });
+      continue;
+    }
+
+    const mark = INLINE_KEY_MAP[node.type];
+    if (!mark) return null;
+
+    const children = transformLinkTextNodes(node.children, { ...marks, [mark]: true });
+    if (!children) return null;
+    textNodes.push(...children);
+  }
+  return textNodes;
+};
+
 // <strong><em>aa<em>bb<em></strong>
 const applyMarkForInlineItem = (result, item, textNode = {}) => {
   const { type, children, value } = item;
 
   if (type === LINK) {
     const child = children.length === 0 ? { type: 'text', value: '' } : children[0];
-    const linkChildren = [{ id: slugid.nice(), text: child.value || '' }];
+    const textNodes = transformLinkTextNodes(children);
+    const linkChildren = textNodes?.length ? textNodes : [{ id: slugid.nice(), text: child.value || '' }];
     const link = {
       id: slugid.nice(),
       type: LINK,
@@ -455,4 +477,3 @@ export const formatMdToSlate = (children) => {
     return handler(child);
   }).flat();
 };
-

src/slate-convert/slate-to-md/transform.js

@@ -111,7 +111,7 @@ const transformInlineChildren = (result, item) => {
       type: 'link',
       url: getElementHref(item),
       title: item.title || null,
-      children: [transformTextNode(item.children[0])],
+      children: item.children.map(transformTextNode),
     };
     result.push(link);
     return result;

tests/slate-convert/md-to-slate/link.test.js

@@ -27,4 +27,117 @@ describe('link test', () => {
 
     expect(formatChildren(nodes)).toEqual(expectResult);
   });
+
+  it('paragraph > bold link', () => {
+    const mdString = '[**example**](https://example.com)';
+    const nodes = mdStringToSlate(mdString);
+    const expectResult = [{
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+        {
+          type: 'link',
+          url: 'https://example.com',
+          title: null,
+          children: [
+            { text: 'example', bold: true }
+          ]
+        },
+        {
+          text: ''
+        }
+      ]
+    }];
+
+    expect(formatChildren(nodes)).toEqual(expectResult);
+  });
+
+  it('paragraph > italic link', () => {
+    const mdString = '[*example*](https://example.com)';
+    const nodes = mdStringToSlate(mdString);
+    const expectResult = [{
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+        {
+          type: 'link',
+          url: 'https://example.com',
+          title: null,
+          children: [
+            { text: 'example', italic: true }
+          ]
+        },
+        {
+          text: ''
+        }
+      ]
+    }];
+
+    expect(formatChildren(nodes)).toEqual(expectResult);
+  });
+
+  it('paragraph > bold italic link', () => {
+    const mdString = '[***example***](https://example.com)';
+    const nodes = mdStringToSlate(mdString);
+    const expectResult = [{
+      type: 'paragraph',
+      children: [
+        {
+          text: '',
+        },
+        {
+          type: 'link',
+          url: 'https://example.com',
+          title: null,
+          children: [
+            { text: 'example', italic: true, bold: true }
+          ]
+        },
+        {
+          text: ''
+        }
+      ]
+    }];
+
+    expect(formatChildren(nodes)).toEqual(expectResult);
+  });
+
+  it('paragraph > link with nested styles', () => {
+    const mdString = '[**bold and *italic***](https://example.com)';
+    const nodes = mdStringToSlate(mdString);
+    const link = formatChildren(nodes)[0].children[1];
+
+    expect(link.children).toEqual([
+      { text: 'bold and ', bold: true },
+      { text: 'italic', bold: true, italic: true },
+    ]);
+  });
+
+  it('paragraph > link with plain and bold text', () => {
+    const mdString = '[a **bold** b](https://example.com)';
+    const nodes = mdStringToSlate(mdString);
+    const link = formatChildren(nodes)[0].children[1];
+
+    expect(link.children).toEqual([
+      { text: 'a ' },
+      { text: 'bold', bold: true },
+      { text: ' b' },
+    ]);
+  });
+
+  it('paragraph > link with multiple bold texts', () => {
+    const mdString = '[**a** **b**](https://example.com)';
+    const nodes = mdStringToSlate(mdString);
+    const link = formatChildren(nodes)[0].children[1];
+
+    expect(link.children).toEqual([
+      { text: 'a', bold: true },
+      { text: ' ' },
+      { text: 'b', bold: true },
+    ]);
+  });
 });

tests/slate-convert/slate-to-md/link.test.js

@@ -49,4 +49,47 @@ describe('link test', () => {
 
     expect(formatSlateToMd(nodes)).toEqual(expectResult);
   });
+
+  it('paragraph > link with styled children', () => {
+    const nodes = [{
+      type: 'paragraph',
+      children: [
+        { text: '' },
+        {
+          type: 'link',
+          url: 'https://example.com',
+          title: null,
+          children: [
+            { text: 'a ' },
+            { text: 'bold', bold: true },
+            { text: ' b' },
+          ]
+        },
+        { text: '' }
+      ]
+    }];
+
+    const expectResult = [{
+      type: 'paragraph',
+      children: [
+        { type: 'text', value: '' },
+        {
+          type: 'link',
+          url: 'https://example.com',
+          title: null,
+          children: [
+            { type: 'text', value: 'a ' },
+            {
+              type: 'strong',
+              children: [{ type: 'text', value: 'bold' }]
+            },
+            { type: 'text', value: ' b' },
+          ]
+        },
+        { type: 'text', value: '' },
+      ]
+    }];
+
+    expect(formatSlateToMd(nodes)).toEqual(expectResult);
+  });
 });