feat: Code Widget + Markdown Widget Internal Overhaul (#2828)

* wip - upgrade to slate 0.43

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* finish list handling logic

* add plugins directory

* tests wip

* setup testing

* wip

* add selection commands

* finish list testing

* stuff

* add codemirror

* abstract codemirror from slate

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* codemirror mostly working, some bugs

* upgrade to slate 46

* upgrade to slate 47

* wip

* wip

* progress

* wip

* mostly working links with surrounding marks

* wip

* tests passing

* add test

* fix formatting

* update snapshots

* close self closing tag in markdown html output

* wip - commonmark

* hold on commonmark work

* all tests passing

* fix e2e specs

* ignore tests in esm builds

* break/backspace plugins wip

* finish enter/backspace spec

* fix soft break handling

* wip - editor component deletion

* add insertion points

* make insertion points invisible

* fix empty mark nodes output to markdown

* fix pasting

* improve insertion points

* add static bottom insertion point

* improve click handling at insertion points

* restore current table functionality

* add paste support for Slate fragments

* support cut/copy markdown, paste between rich/raw editor

* fix copy paste

* wip - paste/select bug fixing

* fixed known slate issues

* split plugins

* fix editor toggles

* force text cursor in code widget

* wip - reorg plugins

* finish markdown control reorg

* configure plugin types

* quote block adjacent handling with tests

* wip

* finish quote logic and tests

* fix copy paste plugin migration regressions

* fix force insert before node

* fix trailing insertion point

* remove empty headers

* codemirror working properly in markdown widget

* return focus to codemirror on lang select enter

* fix state issues for widgets with local state

* wip - vim working, just need to work out distribution

* add settings pane

* wip - default modes

* fix deps

* add programming language data

* implement linguist langs in code widget

* everything built in

* remove old registration code, fix focus styling

* fix/update linting setup

* fix js lint errors

* remove stylelint from format script

* fix remaining linting errors

* fix reducer test failures

* chore: update commitlint for worktree support

* chore: fix remaining tests

* chore: drop unused monaco plugin

* chore: remove extraneous global styles rendering

* chore: fix failing tests

* fix: tests

* fix: quote/list nesting (tests still broken)

* fix: update quote tests

* chore: bring back code widget test config

* fix: autofocus

* fix: code blocks without the code widget

* fix: code editor component state issues

* fix: error

* fix: add code block test, few fixes

* chore: remove notes

* fix: [wip] update stateful shortcodes on undo/redo

* fix: support code styled links, handle unknown langs

* fix: few fixes

* fix: autofocus on insert, focus on all clicks

* fix: linting

* fix: autofocus

* fix: update code block fixture

* fix: remove unused cypress snapshot plugin

* fix: drop node 8 test, add node 12

* fix: use lodash.flatten instead of Array.flat

* fix: remove console logs
This commit is contained in:
Shawn Erquhart
2019-12-16 12:17:37 -05:00
committed by Erez Rokah
parent be46293f82
commit 18c579d0e9
110 changed files with 12693 additions and 8516 deletions

View File

@ -23,8 +23,11 @@
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
const { escapeRegExp } = require('../utils/regexp');
const path = require('path');
import path from 'path';
import rehype from 'rehype';
import visit from 'unist-util-visit';
import { oneLineTrim } from 'common-tags';
import { escapeRegExp } from '../utils/regexp';
const matchRoute = (route, fetchArgs) => {
const url = fetchArgs[0];
@ -86,3 +89,241 @@ Cypress.Commands.add('stubFetch', ({ fixture }) => {
cy.on('window:before:load', win => stubFetch(win, routes));
});
});
function runTimes(cyInstance, fn, count = 1) {
let chain = cyInstance, i = count;
while (i) {
i -= 1;
chain = fn(chain);
}
return chain;
}
[
'enter',
'backspace',
['selectAll', 'selectall'],
['up', 'upArrow'],
['down', 'downArrow'],
['left', 'leftArrow'],
['right', 'rightArrow'],
].forEach(key => {
const [ cmd, keyName ] = typeof key === 'object' ? key : [key, key];
Cypress.Commands.add(cmd, { prevSubject: true }, (subject, { shift, times = 1 } = {}) => {
const fn = chain => chain.type(`${shift ? '{shift}' : ''}{${keyName}}`);
return runTimes(cy.wrap(subject), fn, times);
});
});
// Convert `tab` command from plugin to a child command with `times` support
Cypress.Commands.add('tabkey', { prevSubject: true }, (subject, { shift, times } = {}) => {
const fn = chain => chain.tab({ shift });
return runTimes(cy, fn, times).wrap(subject);
});
Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
cy.wrap(subject)
.trigger('mousedown')
.then(fn)
.trigger('mouseup')
cy.document().trigger('selectionchange');
return cy.wrap(subject);
});
Cypress.Commands.add('print', { prevSubject: 'optional' }, (subject, str) => {
cy.log(str);
console.log(`cy.log: ${str}`);
return cy.wrap(subject);
});
Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
return cy.wrap(subject)
.selection($el => {
if (typeof query === 'string') {
const anchorNode = getTextNode($el[0], query);
const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
const anchorOffset = anchorNode.wholeText.indexOf(query);
const focusOffset = endQuery ?
focusNode.wholeText.indexOf(endQuery) + endQuery.length :
anchorOffset + query.length;
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
} else if (typeof query === 'object') {
const el = $el[0];
const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
const anchorOffset = query.anchorOffset || 0;
const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
const focusOffset = query.focusOffset || 0;
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
}
});
});
Cypress.Commands.add('setCursor', { prevSubject: true }, (subject, query, atStart) => {
return cy.wrap(subject)
.selection($el => {
const node = getTextNode($el[0], query);
const offset = node.wholeText.indexOf(query) + (atStart ? 0 : query.length);
const document = node.ownerDocument;
document.getSelection().removeAllRanges();
document.getSelection().collapse(node, offset);
});
});
Cypress.Commands.add('setCursorBefore', { prevSubject: true }, (subject, query) => {
cy.wrap(subject).setCursor(query, true);
});
Cypress.Commands.add('setCursorAfter', { prevSubject: true }, (subject, query) => {
cy.wrap(subject).setCursor(query);
});
Cypress.Commands.add('login', () => {
cy.viewport(1200, 1200);
cy.visit('/');
cy.contains('button', 'Login').click();
});
Cypress.Commands.add('loginAndNewPost', () => {
cy.login();
cy.contains('a', 'New Post').click();
});
Cypress.Commands.add('drag', { prevSubject: true }, subject => {
return cy.wrap(subject)
.trigger('dragstart', {
dataTransfer: {},
force: true,
});
});
Cypress.Commands.add('drop', { prevSubject: true }, subject => {
return cy.wrap(subject)
.trigger('drop', {
dataTransfer: {},
force: true,
});
});
Cypress.Commands.add('clickToolbarButton', (title, { times } = {}) => {
const isHeading = title.startsWith('Heading')
if (isHeading) {
cy.get('button[title="Headings"]').click();
}
const instance = isHeading ? cy.contains('div', title) : cy.get(`button[title="${title}"]`);
const fn = chain => chain.click();
return runTimes(instance, fn, times).focused();
});
Cypress.Commands.add('insertEditorComponent', title => {
cy.get('button[title="Add Component"]').click()
cy.contains('div', title).click().focused();
});
[
['clickHeadingOneButton', 'Heading 1'],
['clickHeadingTwoButton', 'Heading 2'],
['clickOrderedListButton', 'Numbered List'],
['clickUnorderedListButton', 'Bulleted List'],
['clickCodeButton', 'Code'],
['clickItalicButton', 'Italic'],
['clickQuoteButton', 'Quote'],
].forEach(([commandName, toolbarButtonName]) => {
Cypress.Commands.add(commandName, opts => {
return cy.clickToolbarButton(toolbarButtonName, opts);
});
});
Cypress.Commands.add('clickModeToggle', () => {
cy.get('button[role="switch"]')
.click()
.focused();
});
[
['insertCodeBlock', 'Code Block'],
].forEach(([commandName, componentTitle]) => {
Cypress.Commands.add(commandName, () => {
return cy.insertEditorComponent(componentTitle);
});
});
Cypress.Commands.add('getMarkdownEditor', () => {
return cy.get('[data-slate-editor]');
});
Cypress.Commands.add('confirmMarkdownEditorContent', expectedDomString => {
return cy.getMarkdownEditor()
.should(([element]) => {
// Slate makes the following representations:
// - blank line: 2 BOM's + <br>
// - blank element (placed inside empty elements): 1 BOM + <br>
// We replace to represent a blank line as a single <br>, and remove the
// contents of elements that are actually empty.
const actualDomString = toPlainTree(element.innerHTML)
.replace(/\uFEFF\uFEFF<br>/g, '<br>')
.replace(/\uFEFF<br>/g, '');
expect(actualDomString).toEqual(oneLineTrim(expectedDomString));
});
});
Cypress.Commands.add('clearMarkdownEditorContent', () => {
return cy.getMarkdownEditor()
.selectAll()
.backspace({ times: 2 });
});
function toPlainTree(domString) {
return rehype()
.use(removeSlateArtifacts)
.data('settings', { fragment: true })
.processSync(domString)
.contents;
}
function getActualBlockChildren(node) {
if (node.tagName === 'span') {
return node.children.flatMap(getActualBlockChildren);
}
if (node.children) {
return { ...node, children: node.children.flatMap(getActualBlockChildren) };
}
return node;
}
function removeSlateArtifacts() {
return function transform(tree) {
visit(tree, 'element', node => {
// remove all element attributes
delete node.properties;
// remove slate padding spans to simplify test cases
if (['h1', 'p'].includes(node.tagName)) {
node.children = node.children.flatMap(getActualBlockChildren);
}
});
}
}
function getTextNode(el, match){
const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
if (!match) {
return walk.nextNode();
}
const nodes = [];
let node;
while(node = walk.nextNode()) {
if (node.wholeText.includes(match)) {
return node;
}
}
}
function setBaseAndExtent(...args) {
const document = args[0].ownerDocument;
document.getSelection().removeAllRanges();
document.getSelection().setBaseAndExtent(...args);
}

View File

@ -12,9 +12,11 @@
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
require('cypress-plugin-tab');
// Import commands.js using ES2015 syntax:
import './commands'
import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')
import 'cypress-jest-adapter';