Add support for the @Image directive (#404)

fixes rdar://97715120, rdar://97739628

* refactor: allow wrapping inline-image in a Figure, if there is an abstract, but not anchor. use the `metadata.title` to determine if a figure caption should be above/below the content

Author: Dobromir Hristov

src/components/ContentNode.vue

@@ -185,19 +185,20 @@ function renderNode(createElement, references) {
 
   const renderFigure = ({
     metadata: {
-      abstract,
+      abstract = [],
       anchor,
       title,
     },
     ...node
-  }) => createElement(Figure, { props: { anchor } }, [
-    ...(title && abstract && abstract.length ? [
-      createElement(FigureCaption, { props: { title } }, (
-        renderChildren(abstract)
-      )),
-    ] : []),
-    renderChildren([node]),
-  ]);
+  }) => {
+    const figureContent = [renderChildren([node])];
+    if ((title && abstract.length) || abstract.length) {
+      // if there is a `title`, it should be above, otherwise below
+      figureContent.splice(title ? 0 : 1, 0,
+        createElement(FigureCaption, { props: { title } }, renderChildren(abstract)));
+    }
+    return createElement(Figure, { props: { anchor } }, figureContent);
+  };
 
   return function render(node) {
     switch (node.type) {
@@ -284,7 +285,7 @@ function renderNode(createElement, references) {
         renderChildren(node.inlineContent)
       ));
     case InlineType.image: {
-      if (node.metadata && node.metadata.anchor) {
+      if (node.metadata && (node.metadata.anchor || node.metadata.abstract)) {
         return renderFigure(node);
       }
 

src/components/ContentNode/Figure.vue

@@ -18,7 +18,7 @@ export default {
   props: {
     anchor: {
       type: String,
-      required: true,
+      required: false,
     },
   },
 };

src/components/ContentNode/FigureCaption.vue

@@ -10,7 +10,7 @@
 
 <template>
   <figcaption class="caption">
-    <strong>{{ title }}</strong>&nbsp;<slot />
+    <strong v-if="title">{{ title }}</strong>&nbsp;<slot />
   </figcaption>
 </template>
 
@@ -20,7 +20,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
   },
 };

tests/unit/components/ContentNode.spec.js

@@ -431,6 +431,83 @@ describe('ContentNode', () => {
       expect(caption.props('title')).toBe(metadata.title);
       expect(caption.text()).toContain('blah');
     });
+
+    it('renders a `Figure`/`FigureCaption` without an anchor, with text under the image', () => {
+      const metadata = {
+        abstract: [{
+          type: 'paragraph',
+          inlineContent: [{ type: 'text', text: 'blah' }],
+        }],
+      };
+      const wrapper = mountWithItem({
+        type: 'image',
+        identifier: 'figure1.png',
+        metadata,
+      }, references);
+
+      const figure = wrapper.find(Figure);
+      expect(figure.exists()).toBe(true);
+      expect(figure.props('anchor')).toBeFalsy();
+      expect(figure.contains(InlineImage)).toBe(true);
+
+      const caption = wrapper.find(FigureCaption);
+      expect(caption.exists()).toBe(true);
+      expect(caption.contains('p')).toBe(true);
+      expect(caption.props('title')).toBeFalsy();
+      expect(caption.text()).toContain('blah');
+      // assert figurerecaption is below the image
+      expect(figure.html()).toMatchInlineSnapshot(`
+        <figure-stub>
+          <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
+          <figurecaption-stub>
+            <p>blah</p>
+          </figurecaption-stub>
+        </figure-stub>
+      `);
+    });
+
+    it('renders a `FigureCaption` before the image, if it has a title', () => {
+      const metadata = {
+        title: 'foo',
+        abstract: [{
+          type: 'paragraph',
+          inlineContent: [{ type: 'text', text: 'blah' }],
+        }],
+      };
+      const wrapper = mountWithItem({
+        type: 'image',
+        identifier: 'figure1.png',
+        metadata,
+      }, references);
+      expect(wrapper.find(Figure).html()).toMatchInlineSnapshot(`
+        <figure-stub>
+          <figurecaption-stub title="foo">
+            <p>blah</p>
+          </figurecaption-stub>
+          <inlineimage-stub alt="" variants="[object Object],[object Object]"></inlineimage-stub>
+        </figure-stub>
+      `);
+    });
+
+    it('renders no `FigureCaption`, if there is a `title`, but no `abstract`', () => {
+      const metadata = {
+        postTitle: true,
+        title: 'Foo',
+        anchor: 'foo-figure',
+      };
+      const wrapper = mountWithItem({
+        type: 'image',
+        identifier: 'figure1.png',
+        metadata,
+      }, references);
+
+      const figure = wrapper.find(Figure);
+      expect(figure.exists()).toBe(true);
+      expect(figure.props('anchor')).toBe('foo-figure');
+      expect(figure.contains(InlineImage)).toBe(true);
+
+      expect(wrapper.find(FigureCaption).exists()).toBe(false);
+    });
   });
 
   describe('with type="link"', () => {

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

@@ -25,4 +25,15 @@ describe('Figure', () => {
     expect(p.exists()).toBe(true);
     expect(p.text()).toBe('blah');
   });
+
+  it('renders a <figure> without an id, just slot content', () => {
+    const wrapper = shallowMount(Figure, { slots });
+
+    expect(wrapper.is('figure')).toBe(true);
+    expect(wrapper.attributes('id')).toBeFalsy();
+
+    const p = wrapper.find('p');
+    expect(p.exists()).toBe(true);
+    expect(p.text()).toBe('blah');
+  });
 });

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

@@ -20,4 +20,11 @@ describe('FigureCaption', () => {
     expect(wrapper.is('figcaption')).toBe(true);
     expect(wrapper.text()).toMatch(/Figure 1\sBlah/);
   });
+  it('renders a <figcaption> with slot content only', () => {
+    const slots = { default: '<p>Blah</p>' };
+    const wrapper = shallowMount(FigureCaption, { slots });
+
+    expect(wrapper.is('figcaption')).toBe(true);
+    expect(wrapper.text()).toBe('Blah');
+  });
 });