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
committed by
Erez Rokah
Erez Rokah
parent
be46293f82
commit
18c579d0e9
@ -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);
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
Reference in New Issue
Block a user