Widget richtext

.eslintrc.js

@@ -70,6 +70,7 @@ module.exports = {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
+      exports: {},
     },
     'import/core-modules': [...packages, 'decap-cms-app/dist/esm'],
   },

cypress/e2e/richtext_widget_backspace_spec.js

@@ -0,0 +1,96 @@
+import '../utils/dismiss-local-backup';
+
+describe('Markdown widget', () => {
+
+  before(() => {
+    Cypress.config('defaultCommandTimeout', 4000);
+    cy.task('setupBackend', { backend: 'test' });
+    cy.task('useRichTextWidget');
+  });
+
+  beforeEach(() => {
+    cy.loginAndNewPost();
+    cy.clearMarkdownEditorContent();
+  });
+
+  after(() => {
+    cy.task('teardownBackend', { backend: 'test' });
+  });
+
+  // describe('pressing backspace', () => {
+    it('sets non-default block to default when empty', () => {
+      cy.focused()
+        .clickHeadingOneButton()
+        .backspace()
+        .confirmMarkdownEditorContent(`
+          <p></p>
+        `);
+    });
+    it('moves to previous block when no character left to delete', () => {
+      cy.focused()
+        .type('foo')
+        .enter()
+        .clickHeadingOneButton()
+        .type('a')
+        .backspace({times: 2})
+        .confirmMarkdownEditorContent(`
+          <p>foo</p>
+        `);
+    });
+    // behaviour change: resets the block to default
+    it('does nothing at start of first block in document when non-empty and non-default', () => {
+      cy.focused()
+        .clickHeadingOneButton()
+        .type('foo')
+        .setCursorBefore('foo')
+        .backspace({ times: 4 })
+        .confirmMarkdownEditorContent(`
+          <p>foo</p>
+        `);
+    });
+    // behaviour change: also resets the block to default (as in previous test)
+    it('deletes individual characters in middle of non-empty non-default block in document', () => {
+      cy.focused()
+        .clickHeadingOneButton()
+        .type('foo')
+        .setCursorAfter('fo')
+        .backspace({ times: 3 })
+        .confirmMarkdownEditorContent(`
+          <p>o</p>
+        `);
+    });
+    it('at beginning of non-first block, moves default block content to previous block', () => {
+      cy.focused()
+        .clickHeadingOneButton()
+        .type('foo')
+        .enter()
+        .type('bar')
+        .setCursorBefore('bar')
+        .backspace()
+        .confirmMarkdownEditorContent(`
+          <h1>foobar</h1>
+        `);
+    });
+    it('at beginning of non-first block, moves non-default block content to previous block', () => {
+      cy.focused()
+        .type('foo')
+        .enter()
+        .clickHeadingOneButton()
+        .type('bar')
+        .enter()
+        .clickHeadingTwoButton()
+        .type('baz')
+        .setCursorBefore('baz')
+        .backspace()
+        .confirmMarkdownEditorContent(`
+          <p>foo</p>
+          <h1>barbaz</h1>
+        `)
+        .setCursorBefore('bar')
+        .backspace()
+        .confirmMarkdownEditorContent(`
+          <p>foobarbaz</p>
+        `);
+    // });
+  });
+});

cypress/e2e/richtext_widget_code_block_spec.js

@@ -0,0 +1,117 @@
+import { oneLineTrim, stripIndent } from 'common-tags';
+import '../utils/dismiss-local-backup';
+
+describe('Markdown widget code block', () => {
+  before(() => {
+    Cypress.config('defaultCommandTimeout', 4000);
+    cy.task('setupBackend', { backend: 'test' });
+    cy.task('useRichTextWidget');
+  });
+
+  beforeEach(() => {
+    cy.loginAndNewPost();
+    cy.clearMarkdownEditorContent();
+  });
+
+  after(() => {
+    cy.task('teardownBackend', { backend: 'test' });
+  });
+  describe('code block', () => {
+    // behaviour change: changes how the raw editor is rendered - single block mode
+    it('outputs code', () => {
+      // eslint-disable-next-line cypress/no-unnecessary-waiting
+      cy
+        .insertCodeBlock()
+        .type('foo')
+        .enter()
+        .type('bar')
+        .confirmMarkdownEditorContent(
+          `
+          ${codeBlock(`
+            foo
+            bar
+          `)}
+        `,
+        )
+        .wait(500)
+        .clickModeToggle().confirmRawEditorContent('``` foo bar ```');
+    });
+  });
+});
+
+function codeBlock(content) {
+  const lines = stripIndent(content)
+    .split('\n')
+    .map(
+      (line, idx) => `
+    <div>
+      <div>
+        <div>${idx + 1}</div>
+      </div>
+      <pre><span>${line}</span></pre>
+    </div>
+  `,
+    )
+    .join('');
+
+  return oneLineTrim`
+    <div>
+      <div></div>
+      <div>
+        <div>
+          <div><label>Code Block</label></div>
+          <div><button><span><svg>
+                  <path></path>
+                </svg></span></button>
+            <div>
+              <div>
+                <div><textarea></textarea></div>
+                <div>
+                  <div></div>
+                </div>
+                <div>
+                  <div></div>
+                </div>
+                <div></div>
+                <div></div>
+                <div>
+                  <div>
+                    <div>
+                      <div>
+                        <div>
+                          <div>
+                            <pre><span>xxxxxxxxxx</span></pre>
+                          </div>
+                          <div></div>
+                          <div></div>
+                          <div>
+                            <div> </div>
+                          </div>
+                          <div>
+                            ${lines}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div></div>
+                  <div>
+                    <div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+            <span>
+                <span>
+                    <span></span>
+                </span>
+            </span>
+        </div>
+      </div>
+      <div></div>
+    </div>
+  `;
+}

cypress/e2e/richtext_widget_enter_spec.js

@@ -0,0 +1,113 @@
+import '../utils/dismiss-local-backup';
+
+describe('Richtext widget breaks', () => {
+  before(() => {
+    Cypress.config('defaultCommandTimeout', 4000);
+    cy.task('setupBackend', { backend: 'test' });
+    cy.task('useRichTextWidget');
+  });
+
+  beforeEach(() => {
+    cy.loginAndNewPost();
+    cy.clearMarkdownEditorContent();
+  });
+
+  after(() => {
+    cy.task('teardownBackend', { backend: 'test' });
+  });
+
+  describe('pressing enter', () => {
+    it('creates new default block from empty block', () => {
+      cy.focused()
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <p></p>
+          <p></p>
+        `);
+    });
+    it('creates new default block when selection collapsed at end of block', () => {
+      cy.focused()
+        .type('foo')
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <p>foo</p>
+          <p></p>
+        `);
+    });
+    it('creates new default block when selection collapsed at end of non-default block', () => {
+      cy.clickHeadingOneButton()
+        .type('foo')
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <h1>foo</h1>
+          <p></p>
+        `);
+    });
+    // behaviour change: plate now creates the new default block before the non-default block
+    it('creates new default block when selection collapsed in empty non-default block', () => {
+      cy.clickHeadingOneButton()
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <p></p>
+          <h1></h1>
+        `);
+    });
+    // behaviour change: plate now creates the new default block before the non-default block
+    it('splits block into two same-type blocks when collapsed selection at block start', () => {
+      cy.clickHeadingOneButton()
+        .type('foo')
+        .setCursorBefore('foo')
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <p></p>
+          <h1>foo</h1>
+        `);
+    });
+    // behaviour change: plate now splits into default block
+    it('splits block into two same-type blocks when collapsed in middle of selection at block start', () => {
+      cy.clickHeadingOneButton()
+        .type('foo')
+        .setCursorBefore('oo')
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <h1>f</h1>
+          <p>oo</p>
+        `);
+    });
+    it('deletes selected content and splits to same-type block when selection is expanded', () => {
+      cy.clickHeadingOneButton()
+        .type('foo bar')
+        .setSelection('o b')
+        .enter()
+        .confirmMarkdownEditorContent(`
+          <h1>fo</h1>
+          <h1>ar</h1>
+        `);
+    });
+  });
+
+  // skipped: cypress type event does not trigger actual keyboard event for the Plate to detect
+  describe.skip('pressing shift+enter', () => {
+    it('creates line break', () => {
+      cy.focused()
+        .enter({ shift: true })
+        .confirmMarkdownEditorContent(`
+          <p>
+            a<br>
+          </p>
+        `);
+    });
+    it('creates consecutive line break', () => {
+      cy.focused()
+        .enter({ shift: true, times: 4 })
+        .confirmMarkdownEditorContent(`
+          <p>
+            <br>
+            <br>
+            <br>
+            <br>
+          </p>
+        `);
+    });
+  });
+});