feat(editor-components): support title in image component (#1862)

packages/netlify-cms-editor-component-image/src/__tests__/index.spec.js

@@ -0,0 +1,72 @@
+import component from '../index';
+
+const getAsset = path => path;
+const image = '/image';
+const alt = 'alt';
+const title = 'title';
+
+describe('editor component image', () => {
+  it('should generate empty markdown image from empty object', () => {
+    expect(component.toBlock({})).toEqual(`![]()`);
+  });
+
+  it('should generate valid markdown from path', () => {
+    expect(component.toBlock({ image })).toEqual(`![](/image)`);
+  });
+
+  it('should generate valid markdown from path and alt text', () => {
+    expect(component.toBlock({ image, alt })).toEqual(`![alt](/image)`);
+  });
+
+  it('should generate valid markdown from path and title', () => {
+    expect(component.toBlock({ image, title })).toEqual(`![](/image "title")`);
+  });
+
+  it('should generate valid markdown from path, alt text, and title ', () => {
+    expect(component.toBlock({ image, alt, title })).toEqual(`![alt](/image "title")`);
+  });
+
+  it('should escape quotes in title', () => {
+    expect(component.toBlock({ image, alt, title: `"ti"tle"` })).toEqual(
+      `![alt](/image "\\"ti\\"tle\\"")`,
+    );
+  });
+
+  it('should generate valid react props', () => {
+    expect(component.toPreview({ image, alt, title }, getAsset)).toMatchObject({
+      props: { src: image, alt, title },
+    });
+  });
+
+  it('should match markdown with no properties defined', () => {
+    expect(`![]()`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with path', () => {
+    expect(`![](/image)`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with path and alt text', () => {
+    expect(`![alt](/image)`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with path and title', () => {
+    expect(`![](/image "title")`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with path, alt text, and title', () => {
+    expect(`![alt](/image "title")`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with path, alt text, and title', () => {
+    expect(`![alt](/image "title")`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with arbitrary amount of whitespace', () => {
+    expect(`![alt](/image    "title")`).toMatch(component.pattern);
+  });
+
+  it('should match markdown with quoted title', () => {
+    expect(`![alt](/image "\\"ti\\"tle\\"")`).toMatch(component.pattern);
+  });
+});

packages/netlify-cms-editor-component-image/src/index.js

@@ -7,11 +7,15 @@ const image = {
     match && {
       image: match[2],
       alt: match[1],
+      title: match[4],
     },
-  toBlock: data => `![${data.alt || ''}](${data.image || ''})`,
+  toBlock: ({ alt, image, title }) =>
+    `![${alt || ''}](${image || ''}${title ? ` "${title.replace(/"/g, '\\"')}"` : ''})`,
   // eslint-disable-next-line react/display-name
-  toPreview: (data, getAsset) => <img src={getAsset(data.image) || ''} alt={data.alt || ''} />,
-  pattern: /^!\[(.*)\]\((.*)\)$/,
+  toPreview: ({ alt, image, title }, getAsset) => (
+    <img src={getAsset(image) || ''} alt={alt || ''} title={title || ''} />
+  ),
+  pattern: /^!\[(.*)\]\((.*?)(\s"(.*)")?\)$/,
   fields: [
     {
       label: 'Image',
@@ -25,6 +29,10 @@ const image = {
       label: 'Alt Text',
       name: 'alt',
     },
+    {
+      label: 'Title',
+      name: 'title',
+    },
   ],
 };
 

packages/netlify-cms-widget-markdown/src/serializers/remarkImagesToText.js

@@ -15,8 +15,8 @@ export default function remarkImagesToText() {
         child.children.length === 1 &&
         child.children[0].type === 'image'
       ) {
-        const { alt, url } = child.children[0];
-        const value = `![${alt || ''}](${url || ''})`;
+        const { alt, url, title } = child.children[0];
+        const value = `![${alt || ''}](${url || ''}${title ? ` "${title}"` : ''})`;
         child.children = [{ type: 'text', value }];
       }
       return child;