diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js index 097a236ab7f0ca2c48d9a65b2ff3a323caaebc87..b7278d0813ccea4e4e664ae4a6e7bd353a22f37e 100644 --- a/wax-prosemirror-core/src/WaxView.js +++ b/wax-prosemirror-core/src/WaxView.js @@ -6,18 +6,17 @@ import React, { useEffect, useState, } from 'react'; - +import styled from 'styled-components'; import applyDevTools from 'prosemirror-dev-tools'; import { EditorState } from 'prosemirror-state'; import { EditorView } from 'prosemirror-view'; -import 'prosemirror-view/style/prosemirror.css'; import { trackedTransaction } from 'wax-prosemirror-services'; - -import ComponentPlugin from './ComponentPlugin'; import { WaxContext } from './WaxContext'; import { PortalContext } from './PortalContext'; import transformPasted from './helpers/TransformPasted'; +import ComponentPlugin from './ComponentPlugin'; import WaxOptions from './WaxOptions'; +import styles from './styles/styles'; const WaxPortals = ComponentPlugin('waxPortals'); @@ -147,11 +146,15 @@ export default props => { } }; + const WaxEditor = styled.div` + ${styles}; + `; + const editor = ( - <> + <WaxEditor> <div ref={setEditorRef} /> <WaxPortals /> - </> + </WaxEditor> ); return useMemo( diff --git a/wax-prosemirror-core/src/plugins/defaultPlugins.js b/wax-prosemirror-core/src/plugins/defaultPlugins.js index 7ec2465b647eeac3a32b8e181381b9b3d4c1b963..88158c86b7cace5cf58ed3c872a94fc0fecc2f18 100644 --- a/wax-prosemirror-core/src/plugins/defaultPlugins.js +++ b/wax-prosemirror-core/src/plugins/defaultPlugins.js @@ -1,6 +1,5 @@ -import { history } from "prosemirror-history"; -import { dropCursor } from "prosemirror-dropcursor"; -import { gapCursor } from "prosemirror-gapcursor"; -import "prosemirror-gapcursor/style/gapcursor.css"; +import { history } from 'prosemirror-history'; +import { dropCursor } from 'prosemirror-dropcursor'; +import { gapCursor } from 'prosemirror-gapcursor'; export default [dropCursor(), gapCursor(), history()]; diff --git a/wax-prosemirror-core/src/styles/styles.js b/wax-prosemirror-core/src/styles/styles.js new file mode 100644 index 0000000000000000000000000000000000000000..288fccfd809a2bc39cec78302d116c1611e57598 --- /dev/null +++ b/wax-prosemirror-core/src/styles/styles.js @@ -0,0 +1,93 @@ +import { css } from 'styled-components'; + +/* Basic styles for proseMirror view and gapCursor */ + +export default css` + .ProseMirror { + position: relative; + } + + .ProseMirror { + font-feature-settings: 'liga' 0; /* the above doesn't seem to work in Edge */ + font-variant-ligatures: none; + word-wrap: break-word; + white-space: pre-wrap; + white-space: break-spaces; + -webkit-font-variant-ligatures: none; + } + + .ProseMirror pre { + white-space: pre-wrap; + } + + .ProseMirror li { + position: relative; + } + + .ProseMirror-hideselection *::selection { + background: transparent; + } + + .ProseMirror-hideselection *::-moz-selection { + background: transparent; + } + + .ProseMirror-hideselection { + caret-color: transparent; + } + + .ProseMirror-selectednode { + outline: 2px solid #8cf; + } + + /* Make sure li selections wrap around markers */ + + li.ProseMirror-selectednode { + outline: none; + } + + li.ProseMirror-selectednode:after { + border: 2px solid #8cf; + bottom: -2px; + content: ''; + left: -32px; + pointer-events: none; + position: absolute; + right: -2px; + top: -2px; + } + + /* Protect against generic img rules */ + + img.ProseMirror-separator { + border: none !important; + display: inline !important; + margin: 0 !important; + } + + .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; + } +`;