From 6fa8bbcc2c624dbeededf3a0e466cbb51b344470 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 26 Jun 2020 10:27:02 +0300
Subject: [PATCH] create WaxSelectionPlugin to keep showing selection
---
editors/editoria/src/config/config.js | 9 ++++-
.../src/layouts/EditorElements.js | 6 ++++
wax-prosemirror-plugins/index.js | 1 +
.../src/WaxSelectionPlugin.js | 34 +++++++++++++++++++
4 files changed, 49 insertions(+), 1 deletion(-)
create mode 100644 wax-prosemirror-plugins/src/WaxSelectionPlugin.js
diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js
index a1187692d..319094f1a 100644
--- a/editors/editoria/src/config/config.js
+++ b/editors/editoria/src/config/config.js
@@ -23,6 +23,8 @@ import {
CommentsService
} from "wax-prosemirror-services";
+import { WaxSelectionPlugin } from "wax-prosemirror-plugins";
+
import invisibles, {
space,
hardBreak,
@@ -54,7 +56,12 @@ export default {
RulesService: [emDash, ellipsis],
ShortCutsService: {},
- PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
+ PmPlugins: [
+ columnResizing(),
+ tableEditing(),
+ invisibles([hardBreak()]),
+ WaxSelectionPlugin
+ ],
// Always load first CommentsService and LinkService,
//as it matters on how PM treats nodes and marks
diff --git a/wax-prosemirror-layouts/src/layouts/EditorElements.js b/wax-prosemirror-layouts/src/layouts/EditorElements.js
index 9fa4996bc..439dff10d 100644
--- a/wax-prosemirror-layouts/src/layouts/EditorElements.js
+++ b/wax-prosemirror-layouts/src/layouts/EditorElements.js
@@ -10,6 +10,12 @@ export default css`
outline: none;
}
}
+
+ .ProseMirror .wax-selection-marker {
+ background: #0a78ff;
+ color: white;
+ }
+
.ProseMirror footnote {
font-size: 0;
display: inline-block;
diff --git a/wax-prosemirror-plugins/index.js b/wax-prosemirror-plugins/index.js
index 162ffb9f9..aceed8d2f 100644
--- a/wax-prosemirror-plugins/index.js
+++ b/wax-prosemirror-plugins/index.js
@@ -3,3 +3,4 @@ export {
} from "./src/trackChanges/TrackChangePlugin";
export { default as ActiveComment } from "./src/comments/ActiveComment";
+export { default as WaxSelectionPlugin } from "./src/WaxSelectionPlugin";
diff --git a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
new file mode 100644
index 000000000..d01481851
--- /dev/null
+++ b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
@@ -0,0 +1,34 @@
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { Plugin } from "prosemirror-state";
+
+const WaxSelectionPlugin = new Plugin({
+ state: {
+ init(config, instance) {
+ return { deco: DecorationSet.empty };
+ },
+ apply(transaction, state, prevEditorState, editorState) {
+ const sel = transaction.curSelection;
+ if (sel) {
+ const decos = [
+ Decoration.inline(sel.$from.pos, sel.$to.pos, {
+ class: "wax-selection-marker"
+ })
+ ];
+ const deco = DecorationSet.create(editorState.doc, decos);
+ return { deco };
+ }
+
+ return state;
+ }
+ },
+ props: {
+ decorations(state) {
+ if (state && this.getState(state)) {
+ return this.getState(state).deco;
+ }
+ return null;
+ }
+ }
+});
+
+export default WaxSelectionPlugin;
--
GitLab