From b3246f3ef477b226064a6befa6651c15d50872b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Wed, 12 Jun 2019 20:49:07 +0200 Subject: [PATCH] add basic styling --- build/packages/config.js | 2 ++ package.json | 1 + packages/tiptap/src/Editor.js | 18 ++++++++---- packages/tiptap/src/Utils/index.js | 1 + packages/tiptap/src/Utils/injectCSS.js | 13 +++++++++ packages/tiptap/src/style.css | 40 ++++++++++++++++++++++++++ yarn.lock | 10 ++++++- 7 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 packages/tiptap/src/Utils/injectCSS.js create mode 100644 packages/tiptap/src/style.css diff --git a/build/packages/config.js b/build/packages/config.js index c3100f263..99ae0f248 100644 --- a/build/packages/config.js +++ b/build/packages/config.js @@ -5,6 +5,7 @@ import flow from 'rollup-plugin-flow-no-whitespace' import cjs from 'rollup-plugin-commonjs' import node from 'rollup-plugin-node-resolve' import replace from 'rollup-plugin-replace' +import cssOnly from 'rollup-plugin-css-only' const resolve = _path => path.resolve(__dirname, '../../', _path) @@ -21,6 +22,7 @@ function genConfig(opts) { input: { input: opts.input, plugins: [ + cssOnly({ output: false }), flow(), node(), cjs(), diff --git a/package.json b/package.json index ef214dc7c..f883f07b3 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "rollup": "^1.13.1", "rollup-plugin-babel": "^4.3.2", "rollup-plugin-commonjs": "^10.0.0", + "rollup-plugin-css-only": "^1.0.0", "rollup-plugin-flow-no-whitespace": "^1.0.0", "rollup-plugin-node-resolve": "^5.0.1", "rollup-plugin-replace": "^2.2.0", diff --git a/packages/tiptap/src/Editor.js b/packages/tiptap/src/Editor.js index aa914b02e..46f94c35e 100644 --- a/packages/tiptap/src/Editor.js +++ b/packages/tiptap/src/Editor.js @@ -13,9 +13,14 @@ import { baseKeymap } from 'prosemirror-commands' import { inputRules, undoInputRule } from 'prosemirror-inputrules' import { markIsActive, nodeIsActive, getMarkAttrs } from 'tiptap-utils' import { - camelCase, Emitter, ExtensionManager, ComponentView, + injectCSS, + camelCase, + Emitter, + ExtensionManager, + ComponentView, } from './Utils' import { Doc, Paragraph, Text } from './Nodes' +import css from './style.css' export default class Editor extends Emitter { @@ -39,6 +44,7 @@ export default class Editor extends Emitter { disablePasteRules: false, dropCursor: {}, parseOptions: {}, + injectCSS: true, onInit: () => {}, onTransaction: () => {}, onUpdate: () => {}, @@ -79,6 +85,10 @@ export default class Editor extends Emitter { this.commands = this.createCommands() this.setActiveNodesAndMarks() + if (this.options.injectCSS) { + injectCSS(css) + } + if (this.options.autoFocus !== null) { this.focus(this.options.autoFocus) } @@ -254,16 +264,12 @@ export default class Editor extends Emitter { } createView() { - const view = new EditorView(this.element, { + return new EditorView(this.element, { state: this.createState(), handlePaste: (...args) => { this.emit('paste', ...args) }, handleDrop: (...args) => { this.emit('drop', ...args) }, dispatchTransaction: this.dispatchTransaction.bind(this), }) - - view.dom.style.whiteSpace = 'pre-wrap' - - return view } setParentComponent(component = null) { diff --git a/packages/tiptap/src/Utils/index.js b/packages/tiptap/src/Utils/index.js index 75b1c3ab8..56e2c697f 100644 --- a/packages/tiptap/src/Utils/index.js +++ b/packages/tiptap/src/Utils/index.js @@ -3,5 +3,6 @@ export { default as ComponentView } from './ComponentView' export { default as Emitter } from './Emitter' export { default as Extension } from './Extension' export { default as ExtensionManager } from './ExtensionManager' +export { default as injectCSS } from './injectCSS' export { default as Mark } from './Mark' export { default as Node } from './Node' diff --git a/packages/tiptap/src/Utils/injectCSS.js b/packages/tiptap/src/Utils/injectCSS.js new file mode 100644 index 000000000..730d3dc8f --- /dev/null +++ b/packages/tiptap/src/Utils/injectCSS.js @@ -0,0 +1,13 @@ +export default function (css) { + const style = document.createElement('style') + style.type = 'text/css' + style.textContent = css + const { head } = document + const { firstChild } = head + + if (firstChild) { + head.insertBefore(style, firstChild) + } else { + head.appendChild(style) + } +} diff --git a/packages/tiptap/src/style.css b/packages/tiptap/src/style.css new file mode 100644 index 000000000..ee421fcd3 --- /dev/null +++ b/packages/tiptap/src/style.css @@ -0,0 +1,40 @@ +.ProseMirror { + position: relative; +} + +.ProseMirror { + word-wrap: break-word; + white-space: pre-wrap; + -webkit-font-variant-ligatures: none; + font-variant-ligatures: none; +} + +.ProseMirror pre { + white-space: pre-wrap; +} + +.ProseMirror-gapcursor { + display: none; + pointer-events: none; + position: absolute; +} + +.ProseMirror-gapcursor:after { + content: ""; + display: block; + position: absolute; + top: -2px; + width: 20px; + border-top: 1px solid black; + animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; +} + +@keyframes ProseMirror-cursor-blink { + to { + visibility: hidden; + } +} + +.ProseMirror-focused .ProseMirror-gapcursor { + display: block; +} diff --git a/yarn.lock b/yarn.lock index 328f902b1..0f6fc4b8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10531,6 +10531,14 @@ rollup-plugin-commonjs@^10.0.0: resolve "^1.10.1" rollup-pluginutils "^2.7.0" +rollup-plugin-css-only@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-css-only/-/rollup-plugin-css-only-1.0.0.tgz#dc027d657d02e7706b855d856dcb0fdd49935135" + integrity sha512-WY8bISLKzWCnUmHMOhsgbQ/bZz1J1eigwMROixTWZb4yPrMCA4vbfQog6n3bsOQMfq39Kih6jWY9Xn9rYjiqXw== + dependencies: + mkdirp "^0.5.1" + rollup-pluginutils "^2.3.3" + rollup-plugin-flow-no-whitespace@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/rollup-plugin-flow-no-whitespace/-/rollup-plugin-flow-no-whitespace-1.0.0.tgz#bd4ba1bcd99ad5b88234d72e6e2dacea9aa02d16" @@ -10581,7 +10589,7 @@ rollup-pluginutils@^1.5.2: estree-walker "^0.2.1" minimatch "^3.0.2" -rollup-pluginutils@^2.3.0, rollup-pluginutils@^2.4.1, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.7.0, rollup-pluginutils@^2.8.0: +rollup-pluginutils@^2.3.0, rollup-pluginutils@^2.3.3, rollup-pluginutils@^2.4.1, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.7.0, rollup-pluginutils@^2.8.0: version "2.8.1" resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz#8fa6dd0697344938ef26c2c09d2488ce9e33ce97" integrity sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==