From 4fcb4e94bd339aed04bde69a57d878b9f33e1c76 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 30 Sep 2020 17:12:17 +0200 Subject: [PATCH 1/5] refactor style loading for the Editor --- packages/core/src/Editor.ts | 16 ++++++++++++---- packages/core/src/{style.css => style.ts} | 6 ++++-- packages/core/src/utils/createStyleTag.ts | 8 ++++++++ 3 files changed, 24 insertions(+), 6 deletions(-) rename packages/core/src/{style.css => style.ts} (94%) create mode 100644 packages/core/src/utils/createStyleTag.ts diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index 3e4b448e..b474ac8b 100644 --- a/packages/core/src/Editor.ts +++ b/packages/core/src/Editor.ts @@ -10,6 +10,7 @@ import getMarkAttrs from './utils/getMarkAttrs' import removeElement from './utils/removeElement' import getSchemaTypeByName from './utils/getSchemaTypeByName' import getHtmlFromFragment from './utils/getHtmlFromFragment' +import createStyleTag from './utils/createStyleTag' import CommandManager from './CommandManager' import ExtensionManager from './ExtensionManager' import EventEmitter from './EventEmitter' @@ -18,6 +19,7 @@ import Node from './Node' import Mark from './Mark' import defaultPlugins from './plugins' import * as coreCommands from './commands' +import style from './style' export type Command = (props: { editor: Editor, @@ -118,10 +120,7 @@ export class Editor extends EventEmitter { this.extensionManager.resolveConfigs() this.createView() this.registerCommands(coreCommands) - - if (this.options.injectCSS) { - require('./style.css') - } + this.injectCSS() this.proxy.focus(this.options.autoFocus) } @@ -143,6 +142,15 @@ export class Editor extends EventEmitter { return this.commandManager.createChain() } + /** + * Inject CSS styles. + */ + private injectCSS() { + if (this.options.injectCSS && document) { + this.css = createStyleTag(style) + } + } + /** * Update editor options. * diff --git a/packages/core/src/style.css b/packages/core/src/style.ts similarity index 94% rename from packages/core/src/style.css rename to packages/core/src/style.ts index b41718f4..ce819062 100644 --- a/packages/core/src/style.css +++ b/packages/core/src/style.ts @@ -1,4 +1,4 @@ -.ProseMirror { +const style = `.ProseMirror { position: relative; } @@ -49,4 +49,6 @@ .ProseMirror-focused .ProseMirror-gapcursor { display: block; -} +}` + +export default style diff --git a/packages/core/src/utils/createStyleTag.ts b/packages/core/src/utils/createStyleTag.ts new file mode 100644 index 00000000..b9078034 --- /dev/null +++ b/packages/core/src/utils/createStyleTag.ts @@ -0,0 +1,8 @@ +export default function createStyleTag(style: string): HTMLStyleElement { + const styleNode = document.createElement('style') + + styleNode.innerHTML = style + document.getElementsByTagName('head')[0].appendChild(styleNode) + + return styleNode +} From 82a9654189802c511b52a5c8e8def76a799b353c Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 30 Sep 2020 17:12:34 +0200 Subject: [PATCH 2/5] enable typescript support for cypress --- packages/core/index.ts | 1 + tests/cypress.json | 4 ++-- tests/cypress/integration/core/capitalize.spec.ts | 9 +++++++++ tests/cypress/integration/core/example.spec.ts | 5 +++++ tests/cypress/tsconfig.json | 11 +++++++++++ 5 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 tests/cypress/integration/core/capitalize.spec.ts create mode 100644 tests/cypress/integration/core/example.spec.ts create mode 100644 tests/cypress/tsconfig.json diff --git a/packages/core/index.ts b/packages/core/index.ts index 822ac111..eb825360 100644 --- a/packages/core/index.ts +++ b/packages/core/index.ts @@ -12,6 +12,7 @@ export { default as nodeInputRule } from './src/inputRules/nodeInputRule' export { default as markInputRule } from './src/inputRules/markInputRule' export { default as markPasteRule } from './src/pasteRules/markPasteRule' +export { default as capitalize } from './src/utils/capitalize' export { default as getSchema } from './src/utils/getSchema' export { default as generateHtml } from './src/utils/generateHtml' export { default as getHtmlFromFragment } from './src/utils/getHtmlFromFragment' diff --git a/tests/cypress.json b/tests/cypress.json index 3db2baab..e99c1117 100644 --- a/tests/cypress.json +++ b/tests/cypress.json @@ -1,7 +1,7 @@ { "baseUrl": "http://localhost:3000", - "integrationFolder": "../docs/src/", - "testFiles": "**/*.spec.js", + "integrationFolder": "../", + "testFiles": "{docs,tests}/**/*.spec.{js,ts}", "viewportWidth": 1280, "viewportHeight": 1280 } diff --git a/tests/cypress/integration/core/capitalize.spec.ts b/tests/cypress/integration/core/capitalize.spec.ts new file mode 100644 index 00000000..9523d0f0 --- /dev/null +++ b/tests/cypress/integration/core/capitalize.spec.ts @@ -0,0 +1,9 @@ +import { capitalize } from '@tiptap/core' + +describe('capitalize test', () => { + it('capitalize a word', () => { + const capitalized = capitalize('test') + + expect(capitalized).to.eq('Test') + }) +}) diff --git a/tests/cypress/integration/core/example.spec.ts b/tests/cypress/integration/core/example.spec.ts new file mode 100644 index 00000000..985f70da --- /dev/null +++ b/tests/cypress/integration/core/example.spec.ts @@ -0,0 +1,5 @@ +describe('example test', () => { + it('should work', () => { + expect('

Example Text

').to.eq('

Example Text

') + }) +}) diff --git a/tests/cypress/tsconfig.json b/tests/cypress/tsconfig.json new file mode 100644 index 00000000..dcb69cf8 --- /dev/null +++ b/tests/cypress/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "noEmit": false, + "sourceMap": false + }, + "include": [ + "../node_modules/cypress", + "./*/*.ts" + ] +} From 70fc578cfdc204a5eb1d5430bdff1fea874e46e1 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 30 Sep 2020 17:34:05 +0200 Subject: [PATCH 3/5] fix cypress types for VS code --- tests/cypress/plugins/index.js | 2 ++ tests/cypress/tsconfig.json | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/tests/cypress/plugins/index.js b/tests/cypress/plugins/index.js index 94620a2c..6aca8d7d 100644 --- a/tests/cypress/plugins/index.js +++ b/tests/cypress/plugins/index.js @@ -11,6 +11,8 @@ // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) +/// + // eslint-disable-next-line module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits diff --git a/tests/cypress/tsconfig.json b/tests/cypress/tsconfig.json index dcb69cf8..974e84cd 100644 --- a/tests/cypress/tsconfig.json +++ b/tests/cypress/tsconfig.json @@ -2,10 +2,12 @@ "extends": "../../tsconfig.json", "compilerOptions": { "noEmit": false, - "sourceMap": false + "sourceMap": false, + "types": [ + "cypress", + ], }, "include": [ - "../node_modules/cypress", "./*/*.ts" ] } From de05deb16973f167293aa863b57ba6527039098e Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 30 Sep 2020 17:35:41 +0200 Subject: [PATCH 4/5] =?UTF-8?q?whatever,=20doesn=E2=80=99t=20work?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/cypress/plugins/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/cypress/plugins/index.js b/tests/cypress/plugins/index.js index 6aca8d7d..94620a2c 100644 --- a/tests/cypress/plugins/index.js +++ b/tests/cypress/plugins/index.js @@ -11,8 +11,6 @@ // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) -/// - // eslint-disable-next-line module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits From 462bd26353ba4c9469400600b729edfb342c15f3 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 30 Sep 2020 17:36:25 +0200 Subject: [PATCH 5/5] add this stupid comment to all typescript tests --- tests/cypress/integration/core/capitalize.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/cypress/integration/core/capitalize.spec.ts b/tests/cypress/integration/core/capitalize.spec.ts index 9523d0f0..2693a958 100644 --- a/tests/cypress/integration/core/capitalize.spec.ts +++ b/tests/cypress/integration/core/capitalize.spec.ts @@ -1,3 +1,5 @@ +/// + import { capitalize } from '@tiptap/core' describe('capitalize test', () => {