create WaxSelectionPlugin to keep showing selection

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

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;

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";

wax-prosemirror-plugins/src/WaxSelectionPlugin.js

+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;