@atlaskit/adf-schema 28.1.6 → 28.1.7

package/src/__tests__/unit/schema/nodes/block-card.ts

@@ -0,0 +1,184 @@
+import { toDOM, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { createSchema } from '../../../../schema/create-schema';
+import { blockCard } from '../../../../schema/nodes/block-card';
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema blockCard node`, () => {
+  const schema = createSchema({
+    nodes: ['doc', 'paragraph', 'blockCard', 'text'],
+  });
+
+  const url = 'https://product-fabric.atlassian.net/browse/ED-1';
+  const data = {
+    '@type': 'Document',
+    generator: {
+      '@type': 'Application',
+      name: 'Confluence',
+    },
+    url: 'https://extranet.atlassian.com/pages/viewpage.action?pageId=3088533424',
+    name: 'Founder Update 76: Hello, Trello!',
+    summary:
+      'Today is a big day for Atlassian – we have entered into an agreement to buy Trello. (boom)',
+  };
+  const datasource = {
+    id: 'datasource-id',
+    parameters: { jql: 'EDM=jql', cloudId: 'cloud-id' },
+    views: [
+      {
+        type: 'table',
+        properties: { columns: [{ key: 'col1' }, { key: 'col2' }] },
+      },
+    ],
+  };
+
+  describe('blockCard with "url" attribute', () => {
+    describe('parse html', () => {
+      it('converts to blockCard PM node', () => {
+        const doc = fromHTML(`<a data-block-card href="${url}" />`, schema);
+        const node = doc.firstChild!;
+        expect(node.type.spec).toEqual(blockCard);
+      });
+
+      it('gets attributes from html', () => {
+        const doc = fromHTML(`<a data-block-card href="${url}" />`, schema);
+
+        const node = doc.firstChild!;
+        expect(node.attrs.url).toEqual(url);
+        expect(node.attrs.data).toEqual(null);
+      });
+    });
+
+    describe('encode html', () => {
+      it('converts html data attributes to node attributes', () => {
+        const dom = toDOM(schema.nodes.blockCard.create({ url }), schema)
+          .firstChild as HTMLElement;
+
+        expect(dom.getAttribute('href')).toEqual(url);
+        expect(dom.getAttribute('data-card-data')).toEqual('');
+      });
+
+      it('encodes and decodes to the same node', () => {
+        const node = schema.nodes.blockCard.create({ url });
+        const dom = toDOM(node, schema).firstChild as HTMLElement;
+        const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!;
+        expect(parsedNode).toEqual(node);
+      });
+    });
+  });
+
+  describe('blockCard with "data" attribute', () => {
+    describe('parse html', () => {
+      it('converts to blockCard PM node', () => {
+        const doc = fromHTML(
+          `<a data-block-card href="" data-card-data='${JSON.stringify(
+            data,
+          )}' />`,
+          schema,
+        );
+        const node = doc.firstChild!;
+        expect(node.type.spec).toEqual(blockCard);
+      });
+
+      it('gets attributes from html', () => {
+        const doc = fromHTML(
+          `<a data-block-card href="" data-card-data='${JSON.stringify(
+            data,
+          )}' />`,
+          schema,
+        );
+
+        const node = doc.firstChild!;
+        expect(node.attrs.data).toEqual(data);
+      });
+    });
+
+    describe('encode html', () => {
+      it('converts html data attributes to node attributes', () => {
+        const dom = toDOM(schema.nodes.blockCard.create({ data }), schema)
+          .firstChild as HTMLElement;
+
+        expect(dom.getAttribute('href')).toEqual('');
+        expect(dom.getAttribute('data-card-data')).toEqual(
+          JSON.stringify(data),
+        );
+      });
+
+      it('encodes and decodes to the same node', () => {
+        const node = schema.nodes.blockCard.create({ data });
+        const dom = toDOM(node, schema).firstChild as HTMLElement;
+        const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!;
+        expect(parsedNode).toEqual(node);
+      });
+    });
+  });
+
+  describe('blockCard with "datasource" attribute', () => {
+    describe('parse html', () => {
+      it('converts to blockCard PM node', () => {
+        const doc = fromHTML(
+          `<a data-block-card href="" data-datasource='${JSON.stringify(
+            datasource,
+          )}' />`,
+          schema,
+        );
+        const node = doc.firstChild!;
+        expect(node.type.spec).toEqual(blockCard);
+      });
+
+      it('gets attributes from html', () => {
+        const doc = fromHTML(
+          `<a data-block-card href="" data-datasource='${JSON.stringify(
+            datasource,
+          )}' />`,
+          schema,
+        );
+
+        const node = doc.firstChild!;
+        expect(node.attrs.datasource).toEqual(datasource);
+      });
+
+      it('get attributes from html when layout is not set', () => {
+        const doc = fromHTML(
+          `<a
+                    data-block-card
+                    href=""
+                    data-datasource='${JSON.stringify(datasource)}' />`,
+          schema,
+        );
+
+        const node = doc.firstChild!;
+        expect(node.attrs.layout).toEqual('center');
+      });
+    });
+
+    describe('encode html', () => {
+      it('converts html datasource attributes to node attributes', () => {
+        const dom = toDOM(schema.nodes.blockCard.create({ datasource }), schema)
+          .firstChild as HTMLElement;
+
+        expect(dom.getAttribute('href')).toEqual('');
+        expect(dom.getAttribute('data-datasource')).toEqual(
+          JSON.stringify(datasource),
+        );
+      });
+
+      it('encodes and decodes to the same node', () => {
+        const node = schema.nodes.blockCard.create({ datasource });
+        const dom = toDOM(node, schema).firstChild as HTMLElement;
+
+        const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!;
+
+        // Defaults to center
+        expect(node.attrs.layout).toBeNull();
+        expect(parsedNode).toEqual({
+          ...node,
+          attrs: {
+            ...node.attrs,
+            layout: 'center',
+          },
+        });
+      });
+    });
+  });
+});

package/src/__tests__/unit/schema/nodes/blockquote.ts

@@ -0,0 +1,44 @@
+import {
+  fromHTML,
+  toHTML,
+  schema,
+  doc,
+  p,
+  blockquote,
+} from 'adf-test-helpers/src/adf-schema';
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema blockquote node`, () => {
+  it('should be possible to create a blockquote with a paragraph', () => {
+    const html = toHTML(
+      schema.nodes.blockquote.create({}, schema.nodes.paragraph.create()),
+      schema,
+    );
+    expect(html).toEqual('<blockquote><p></p></blockquote>');
+  });
+
+  it('should not be possible to have heading inside blockquote', () => {
+    const docFromHTML = fromHTML(
+      '<blockquote><h2>text</h2></blockquote>',
+      schema,
+    );
+    expect(docFromHTML.toJSON()).toEqual(doc(blockquote(p('text'))).toJSON());
+  });
+
+  it('should be possible to have paragraph inside blockquote', () => {
+    const docFromHTML = fromHTML(
+      '<blockquote><p>text</p></blockquote>',
+      schema,
+    );
+    expect(docFromHTML.toJSON()).toEqual(doc(blockquote(p('text'))).toJSON());
+  });
+
+  it('should not be possible to have list inside blockquote', () => {
+    const docFromHTML = fromHTML(
+      '<blockquote><ol><li>text</li></ol></blockquote>',
+      schema,
+    );
+    expect(docFromHTML.toJSON()).toEqual(doc(blockquote(p('text'))).toJSON());
+  });
+});

package/src/__tests__/unit/schema/nodes/bodied-extension.ts

@@ -0,0 +1,101 @@
+import {
+  schema,
+  toDOM,
+  fromHTML,
+  toContext,
+} from 'adf-test-helpers/src/adf-schema';
+import { bodiedExtension } from '../../../..';
+import {
+  doc,
+  bodiedExtension as bodiedExt,
+  p,
+} from 'adf-test-helpers/src/doc-builder';
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema bodiedExtension node`, () => {
+  describe('parse html', () => {
+    it('converts to extension PM node', () => {
+      const doc = fromHTML(
+        '<div data-node-type="bodied-extension" data-extension-type="com.example.ext" data-extension-key="ext-007" />',
+        schema,
+      );
+      const node = doc.firstChild!;
+      expect(node.type.spec).toEqual(bodiedExtension);
+    });
+
+    it('gets attributes from html', () => {
+      const extensionType = 'com.atlassian.confluence.macro.core';
+      const extensionKey = 'superMacro';
+      const parameters = { macroparams: { super: true } };
+
+      const doc = fromHTML(
+        `
+        <div
+          data-node-type="bodied-extension"
+          data-extension-type="${extensionType}"
+          data-extension-key="${extensionKey}"
+          data-parameters='${JSON.stringify(parameters)}'
+        ><p>hello</p></div>
+      `,
+        schema,
+      );
+
+      const node = doc.firstChild!;
+      expect(node.attrs.extensionType).toEqual(extensionType);
+      expect(node.attrs.extensionKey).toEqual(extensionKey);
+      expect(node.attrs.parameters).toEqual(parameters);
+    });
+
+    it('should not parse extension when pasted inside extension', () => {
+      const document = doc(
+        bodiedExt({ extensionKey: '', extensionType: '' })(p('{<>}')),
+      );
+      const context = toContext(document, schema);
+      const pmDoc = fromHTML(
+        '<div data-node-type="bodied-extension" />',
+        schema,
+        { context },
+      );
+      const node = pmDoc.firstChild!;
+      expect(node.type.name).toEqual('paragraph');
+    });
+  });
+
+  describe('encode html', () => {
+    it('converts html data attributes to node attributes', () => {
+      const attrs = {
+        extensionType: 'com.atlassian.confluence.macro',
+        extensionKey: 'superMacro',
+        parameters: { macroparams: { super: true } },
+      };
+      const content = schema.nodes.paragraph.create(schema.text('hello'));
+      const node = schema.nodes.bodiedExtension.create(attrs, content);
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+
+      expect(dom.getAttribute('data-node-type')).toEqual('bodied-extension');
+      expect(dom.getAttribute('data-extension-type')).toEqual(
+        attrs.extensionType,
+      );
+      expect(dom.getAttribute('data-extension-key')).toEqual(
+        attrs.extensionKey,
+      );
+      expect(dom.getAttribute('data-parameters')).toEqual(
+        JSON.stringify(attrs.parameters),
+      );
+    });
+
+    it('encodes and decodes to the same node', () => {
+      const attrs = {
+        extensionType: 'com.atlassian.confluence.macro',
+        extensionKey: 'superMacro',
+        parameters: { macroparams: { super: true } },
+      };
+      const content = schema.nodes.paragraph.create(schema.text('hello'));
+      const node = schema.nodes.bodiedExtension.create(attrs, content);
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+      const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!;
+      expect(parsedNode).toEqual(node);
+    });
+  });
+});

package/src/__tests__/unit/schema/nodes/code-block.ts

@@ -0,0 +1,221 @@
+import { createSchema } from '../../../../schema/create-schema';
+import { codeBlock } from '../../../../schema/nodes/code-block';
+import { fromHTML, toHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema codeBlock node`, () => {
+  const schema = makeSchema();
+
+  it('should have code property to be true', () => {
+    expect(schema.nodes.codeBlock.spec.code).toEqual(true);
+  });
+
+  describe('parse from html', () => {
+    describe('parse from editor encoded HTML', () => {
+      describe('when language is not set', () => {
+        it('converts to block code node', () => {
+          const doc = fromHTML(
+            '<pre><span>window.alert("hello");<span></pre>',
+            schema,
+          );
+
+          expect(doc.firstChild!.type.name).toEqual('codeBlock');
+        });
+
+        it('has language attribute as null', () => {
+          const doc = fromHTML(
+            '<pre><span>window.alert("hello");<span></pre>',
+            schema,
+          );
+
+          expect(doc.firstChild!.attrs['language']).toEqual(null);
+        });
+      });
+
+      describe('when language is set', () => {
+        it('converts to block code node', () => {
+          const doc = fromHTML(
+            '<pre data-language="javascript"><span>window.alert("hello");<span></pre>',
+            schema,
+          );
+
+          expect(doc.firstChild!.type.spec).toEqual(codeBlock);
+        });
+
+        it(`extracts language "python" from data-language attribute`, () => {
+          const doc = fromHTML(
+            `<pre data-language='python'><span>window.alert("hello");<span></pre>`,
+            schema,
+          );
+
+          expect(doc.firstChild!.attrs['language']).toEqual('python');
+        });
+      });
+
+      it('preserves all newlines and whitespace', () => {
+        const doc = fromHTML(
+          '<pre><span></span>    bar\n       baz\n</pre>',
+          schema,
+        );
+
+        expect(doc.firstChild!.textContent).toEqual('    bar\n       baz\n');
+      });
+    });
+
+    describe('parse from Bitbucket', () => {
+      describe('when language is not set', () => {
+        it('converts to block code node', () => {
+          const doc = fromHTML(
+            '<div class="codehilite"><pre><span>window.alert("hello");<span></pre></div>',
+            schema,
+          );
+
+          expect(doc.firstChild!.type.spec).toEqual(codeBlock);
+        });
+
+        it('has language attribute as null', () => {
+          const doc = fromHTML(
+            '<div class="codehilite"><pre><span>window.alert("hello");<span></pre></div>',
+            schema,
+          );
+          const codeBlock = doc.firstChild!;
+
+          expect(codeBlock.attrs.language).toEqual(null);
+        });
+      });
+
+      describe('when other class similar to language is set', () => {
+        it('has language attribute as null', () => {
+          const doc = fromHTML(
+            '<div class="codehilite nolanguage-javascript"><pre><span>window.alert("hello");<span></pre></div>',
+            schema,
+          );
+          const codeBlock = doc.firstChild!;
+
+          expect(codeBlock.attrs.language).toEqual(null);
+        });
+      });
+    });
+
+    it('should parse code block from tag with font-family monospace css', () => {
+      const doc = fromHTML(
+        `<meta charset="utf-8"><div style="font-family: Menlo, Monaco, 'Courier New', monospace;">Code :D</div>`,
+        schema,
+      );
+      expect(doc.firstChild!.type.spec).toEqual(codeBlock);
+    });
+
+    it('should parse code block from tag with `whitespace: pre` css', () => {
+      const doc = fromHTML(
+        '<meta charset="utf-8"><div style="white-space: pre;">Hello</div>',
+        schema,
+      );
+      expect(doc.firstChild!.type.name).toEqual('codeBlock');
+    });
+
+    it('should not create code block for `whitespace pre-wrap` css', () => {
+      const doc = fromHTML(
+        '<meta charset="utf-8"><div style="white-space: pre-wrap;">Hello</div>',
+        schema,
+      );
+      expect(doc.firstChild!.type.name).toEqual('paragraph');
+    });
+
+    describe('when language is set', () => {
+      it('converts to block code node', () => {
+        const doc = fromHTML(
+          '<div class="codehilite language-javascript"><pre><span>window.alert("hello");<span></pre></div>',
+          schema,
+        );
+
+        expect(doc.firstChild!.type.spec).toEqual(codeBlock);
+      });
+
+      it(`extracts language attribute from class "language-python"`, () => {
+        const doc = fromHTML(
+          `<div class="codehilite language-python"><pre><span>window.alert("hello");<span></pre></div>`,
+          schema,
+        );
+        const codeBlock = doc.firstChild!;
+
+        expect(codeBlock.attrs.language).toEqual('python');
+      });
+
+      it('removes last new line', () => {
+        const doc = fromHTML(
+          '<div class="codehilite"><pre><span>hello world;<span><span>\n<span></pre></div>',
+          schema,
+        );
+
+        expect(doc.firstChild!.textContent).toEqual('hello world;');
+      });
+
+      it('preserves newlines in the middle and whitespace', () => {
+        const doc = fromHTML(
+          '<div class="codehilite"><pre><span></span>    bar\n       baz</pre></div>',
+          schema,
+        );
+
+        expect(doc.firstChild!.textContent).toEqual('    bar\n       baz');
+      });
+    });
+  });
+
+  describe('convert to HTML', () => {
+    const schema = makeSchema();
+
+    describe('when language is not set', () => {
+      it('converts to pre tag', () => {
+        const codeBlock = schema.nodes.codeBlock.create();
+        expect(toHTML(codeBlock, schema)).toContain('<pre');
+      });
+
+      it('does not set data-language attributes', () => {
+        const codeBlock = schema.nodes.codeBlock.create();
+        expect(toHTML(codeBlock, schema)).not.toContain('data-language');
+      });
+    });
+
+    describe('when language is set to null', () => {
+      it('does not set data-language attributes', () => {
+        const codeBlock = schema.nodes.codeBlock.create({ language: null });
+        expect(toHTML(codeBlock, schema)).not.toContain('data-language');
+      });
+    });
+
+    describe('when language is set to undefined', () => {
+      it('does not set data-language attributes', () => {
+        const codeBlock = schema.nodes.codeBlock.create({
+          language: undefined,
+        });
+        expect(toHTML(codeBlock, schema)).not.toContain('data-language');
+      });
+    });
+
+    describe('when language is set to a value', () => {
+      it('converts to pre tag', () => {
+        const codeBlock = schema.nodes.codeBlock.create({
+          language: 'javascript',
+        });
+        expect(toHTML(codeBlock, schema)).toContain('<pre');
+      });
+
+      it('sets data-language attributes', () => {
+        const codeBlock = schema.nodes.codeBlock.create({
+          language: 'javascript',
+        });
+        expect(toHTML(codeBlock, schema)).toContain(
+          'data-language="javascript"',
+        );
+      });
+    });
+  });
+});
+
+function makeSchema() {
+  return createSchema({
+    nodes: ['doc', 'paragraph', 'text', 'codeBlock', 'unsupportedInline'],
+    marks: ['unsupportedMark', 'unsupportedNodeAttribute'],
+  });
+}

package/src/__tests__/unit/schema/nodes/confluence-unsupported-block.ts

@@ -0,0 +1,36 @@
+import {
+  schema,
+  toDOM,
+  fromHTML,
+} from 'adf-test-helpers/src/adf-schema';
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema unsupportedBlock node`, () => {
+  it('should parse unsupported block nodes', () => {
+    const doc = fromHTML(
+      '<div data-node-type="confluenceUnsupportedBlock" data-confluence-unsupported="block" data-confluence-unsupported-block-cxhtml="foobar"/>',
+      schema,
+    );
+    const unsupportedBlockNode = doc.firstChild!;
+    expect(unsupportedBlockNode.type).toEqual(
+      schema.nodes.confluenceUnsupportedBlock,
+    );
+    expect(unsupportedBlockNode.attrs.cxhtml).toEqual('foobar');
+  });
+
+  it('should encode unsupported block nodes to html', () => {
+    const unsupportedBlockNode = schema.nodes.confluenceUnsupportedBlock.create(
+      { cxhtml: 'foobar' },
+    );
+    const domNode = toDOM(unsupportedBlockNode, schema)
+      .firstChild as HTMLElement;
+
+    expect(domNode.getAttribute('data-confluence-unsupported')).toEqual(
+      'block',
+    );
+    expect(
+      domNode.getAttribute('data-confluence-unsupported-block-cxhtml'),
+    ).toEqual('foobar');
+  });
+});

package/src/__tests__/unit/schema/nodes/confluence-unsupported-inline.ts

@@ -0,0 +1,35 @@
+import { toDOM, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+
+import { schema } from 'adf-test-helpers/src/adf-schema'
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema unsupportedInline node`, () => {
+  it('should parse unsupported inline nodes', () => {
+    const doc = fromHTML(
+      '<div data-node-type="confluenceUnsupportedInline" data-confluence-unsupported="inline" data-confluence-unsupported-inline-cxhtml="foobar"/>',
+      schema,
+    );
+    const paragraph = doc.firstChild!;
+    const unsupportedInlineNode = paragraph.firstChild!;
+
+    expect(unsupportedInlineNode.type).toEqual(
+      schema.nodes.confluenceUnsupportedInline,
+    );
+    expect(unsupportedInlineNode.attrs.cxhtml).toEqual('foobar');
+  });
+
+  it('should encode unsupported inline nodes to html', () => {
+    const unsupportedInlineNode =
+      schema.nodes.confluenceUnsupportedInline.create({ cxhtml: 'foobar' });
+    const domNode = toDOM(unsupportedInlineNode, schema)
+      .firstChild as HTMLElement;
+
+    expect(domNode.getAttribute('data-confluence-unsupported')).toEqual(
+      'inline',
+    );
+    expect(
+      domNode.getAttribute('data-confluence-unsupported-inline-cxhtml'),
+    ).toEqual('foobar');
+  });
+});

package/src/__tests__/unit/schema/nodes/date.ts

@@ -0,0 +1,51 @@
+import { toDOM, fromHTML } from 'adf-test-helpers/src/adf-schema/html-helpers';
+import { date } from '../../../..';
+
+import { schema } from 'adf-test-helpers/src/adf-schema'
+
+const packageName = process.env._PACKAGE_NAME_ as string;
+
+describe(`${packageName}/schema date node`, () => {
+  describe('parse html', () => {
+    it('converts to date PM node', () => {
+      const doc = fromHTML('<span data-node-type="date" />', schema);
+      const node = doc.firstChild!.firstChild!;
+      expect(node.type.spec).toEqual(date);
+    });
+
+    it('gets attributes from html', () => {
+      const timestamp = '1515639075805';
+      const doc = fromHTML(
+        `
+        <span
+          data-node-type="date"
+          data-timestamp="${timestamp}"
+        />
+      `,
+        schema,
+      );
+      const node = doc.firstChild!.firstChild!;
+      expect(node.attrs.timestamp).toEqual(timestamp);
+    });
+  });
+
+  describe('encode html', () => {
+    it('converts html data attributes to node attributes', () => {
+      const attrs = { timestamp: '1515639075805' };
+      // extension node can contain no content
+      const node = schema.nodes.date.create(attrs);
+      const dom = toDOM(node, schema).firstChild! as HTMLElement;
+      expect(dom.getAttribute('data-node-type')).toEqual('date');
+      expect(dom.getAttribute('data-timestamp')).toEqual(attrs.timestamp);
+    });
+
+    it('encodes and decodes to the same node', () => {
+      const attrs = { timestamp: '1515639075805' };
+      const node = schema.nodes.date.create(attrs);
+      const dom = toDOM(node, schema).firstChild as HTMLElement;
+      const parsedNode = fromHTML(dom.outerHTML, schema).firstChild!
+        .firstChild!;
+      expect(parsedNode).toEqual(node);
+    });
+  });
+});