From 697b49b109687e8d40aa2bf485f4b83a1dad32c3 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 23 Sep 2021 16:17:56 +0300
Subject: [PATCH] add gapCursor styles
---
wax-prosemirror-core/src/WaxView.js | 15 +--
.../src/plugins/defaultPlugins.js | 7 +-
wax-prosemirror-core/src/styles/styles.js | 93 +++++++++++++++++++
3 files changed, 105 insertions(+), 10 deletions(-)
create mode 100644 wax-prosemirror-core/src/styles/styles.js
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 097a236ab..b7278d081 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 7ec2465b6..88158c86b 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 000000000..288fccfd8
--- /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;
+ }
+`;
--
GitLab