Add support to render References with human readable name in plain text (#26)

Co-authored-by: Dobromir Hristov <[email protected]>

Author: hqhhuang

src/components/ContentNode.vue

@@ -313,6 +313,8 @@ function renderNode(createElement, references) {
           kind: reference.kind,
           role: reference.role,
           isActive: node.isActive,
+          ideTitle: reference.ideTitle,
+          titleStyle: reference.titleStyle,
         },
       }, (
         titleInlineContent ? renderChildren(titleInlineContent) : titlePlainText

src/components/ContentNode/Reference.vue

@@ -46,11 +46,17 @@ export default {
       return this.kind === 'symbol'
         && (this.role === TopicRole.symbol || this.role === TopicRole.dictionarySymbol);
     },
+    isDisplaySymbol({ isSymbolReference, titleStyle, ideTitle }) {
+      return ideTitle ? (isSymbolReference && titleStyle === 'symbol') : isSymbolReference;
+    },
     refComponent() {
-      if (this.isInternal) {
-        return this.isSymbolReference ? ReferenceInternalSymbol : ReferenceInternal;
+      if (!this.isInternal) {
+        return ReferenceExternal;
+      }
+      if (this.isDisplaySymbol) {
+        return ReferenceInternalSymbol;
       }
-      return ReferenceExternal;
+      return ReferenceInternal;
     },
     urlWithParams({ isInternal }) {
       return isInternal ? buildUrl(this.url, this.$route.query) : this.url;
@@ -77,6 +83,14 @@ export default {
       required: false,
       default: true,
     },
+    ideTitle: {
+      type: String,
+      required: false,
+    },
+    titleStyle: {
+      type: String,
+      required: false,
+    },
   },
 };
 </script>

tests/unit/components/ContentNode.spec.js

@@ -412,12 +412,16 @@ describe('ContentNode', () => {
         foobar: {
           title: 'FooBar',
           url: '/foo/bar',
+          ideTitle: 'IDETitle',
+          titleStyle: 'symbol',
         },
       });
 
       const reference = wrapper.find('.content').find(Reference);
       expect(reference.exists()).toBe(true);
       expect(reference.props('url')).toBe('/foo/bar');
+      expect(reference.props('ideTitle')).toBe('IDETitle');
+      expect(reference.props('titleStyle')).toBe('symbol');
       expect(reference.isEmpty()).toBe(false);
       expect(reference.text()).toBe('FooBar');
     });

tests/unit/components/ContentNode/Reference.spec.js

@@ -78,6 +78,23 @@ describe('Reference', () => {
     expect(ref.props('url')).toBe('/documentation/uikit/uiview');
   });
 
+  it('renders a `ReferenceInternal` for external "symbol" kind references with human readable name', () => {
+    const wrapper = shallowMount(Reference, {
+      localVue,
+      router,
+      propsData: {
+        url: '/documentation/uikit/uiview',
+        kind: 'symbol',
+        role: TopicRole.symbol,
+        ideTitle: 'UIView',
+      },
+      slots: { default: 'UIView' },
+    });
+    const ref = wrapper.find(ReferenceInternal);
+    expect(ref.exists()).toBe(true);
+    expect(ref.props('url')).toBe('/documentation/uikit/uiview');
+  });
+
   it('renders a `ReferenceInternalSymbol` for external "dictionarySymbol" kind references', () => {
     const wrapper = shallowMount(Reference, {
       localVue,
@@ -94,6 +111,42 @@ describe('Reference', () => {
     expect(ref.props('url')).toBe('/documentation/uikit/uiview');
   });
 
+  it('renders a `ReferenceInternal` for external "dictionarySymbol" kind references with a human readable name', () => {
+    const wrapper = shallowMount(Reference, {
+      localVue,
+      router,
+      propsData: {
+        url: '/documentation/uikit/uiview',
+        kind: 'symbol',
+        role: TopicRole.dictionarySymbol,
+        ideTitle: 'UIView',
+        titleStyle: 'title',
+      },
+      slots: { default: 'UIView' },
+    });
+    const ref = wrapper.find(ReferenceInternal);
+    expect(ref.exists()).toBe(true);
+    expect(ref.props('url')).toBe('/documentation/uikit/uiview');
+  });
+
+  it('renders a `ReferenceInternalSymbol` for external "dictionarySymbol" kind references with `symbol` title style', () => {
+    const wrapper = shallowMount(Reference, {
+      localVue,
+      router,
+      propsData: {
+        url: '/documentation/uikit/uiview',
+        kind: 'symbol',
+        role: TopicRole.dictionarySymbol,
+        ideTitle: 'UIView',
+        titleStyle: 'symbol',
+      },
+      slots: { default: 'UIView' },
+    });
+    const ref = wrapper.find(ReferenceInternalSymbol);
+    expect(ref.exists()).toBe(true);
+    expect(ref.props('url')).toBe('/documentation/uikit/uiview');
+  });
+
   it('renders a `ReferenceInternal` for references that have a "role" other than "symbol"', () => {
     const wrapper = shallowMount(Reference, {
       localVue,