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/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
+}
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..2693a958
--- /dev/null
+++ b/tests/cypress/integration/core/capitalize.spec.ts
@@ -0,0 +1,11 @@
+///
Example Text
').to.eq('Example Text
') + }) +}) diff --git a/tests/cypress/tsconfig.json b/tests/cypress/tsconfig.json new file mode 100644 index 00000000..974e84cd --- /dev/null +++ b/tests/cypress/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "noEmit": false, + "sourceMap": false, + "types": [ + "cypress", + ], + }, + "include": [ + "./*/*.ts" + ] +}