planning

node_modules/decap-cms-editor-component-image/src/__tests__/index.spec.js

@@ -0,0 +1,75 @@
+import component from '../index';
+
+function getAsset(path) {
+  return 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);
+  });
+});

node_modules/decap-cms-editor-component-image/src/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const image = {
+  label: 'Image',
+  id: 'image',
+  fromBlock: match =>
+    match && {
+      image: match[2],
+      alt: match[1],
+      title: match[4],
+    },
+  toBlock: ({ alt, image, title }) =>
+    `![${alt || ''}](${image || ''}${title ? ` "${title.replace(/"/g, '\\"')}"` : ''})`,
+  // eslint-disable-next-line react/display-name
+  toPreview: ({ alt, image, title }, getAsset, fields) => {
+    const imageField = fields?.find(f => f.get('widget') === 'image');
+    const src = getAsset(image, imageField);
+    return <img src={src || ''} alt={alt || ''} title={title || ''} />;
+  },
+  pattern: /^!\[(.*)\]\((.*?)(\s"(.*)")?\)$/,
+  fields: [
+    {
+      label: 'Image',
+      name: 'image',
+      widget: 'image',
+      media_library: {
+        allow_multiple: false,
+      },
+    },
+    {
+      label: 'Alt Text',
+      name: 'alt',
+    },
+    {
+      label: 'Title',
+      name: 'title',
+    },
+  ],
+};
+
+export const DecapCmsEditorComponentImage = image;
+export default image;