remove custom selection

editors/demo/src/Editoria/config/config.js

@@ -47,8 +47,6 @@ import {
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
 
-import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
-
 import invisibles, {
   space,
   hardBreak,
@@ -139,12 +137,7 @@ export default {
       reject: true,
     },
   },
-  PmPlugins: [
-    columnResizing(),
-    tableEditing(),
-    invisibles([hardBreak()]),
-    WaxSelectionPlugin,
-  ],
+  PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
   CustomTagService: {
     tags: [
       { label: 'custom-tag-label-1', tagType: 'inline' },

editors/demo/src/HHMI/config/config.js

@@ -30,7 +30,6 @@ import {
 } from 'wax-prosemirror-services';
 
 import { DefaultSchema } from 'wax-prosemirror-utilities';
-import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
 import invisibles, { hardBreak } from '@guardian/prosemirror-invisibles';
 
 export default {
@@ -63,12 +62,7 @@ export default {
   SchemaService: DefaultSchema,
   RulesService: [emDash, ellipsis],
 
-  PmPlugins: [
-    columnResizing(),
-    tableEditing(),
-    invisibles([hardBreak()]),
-    WaxSelectionPlugin,
-  ],
+  PmPlugins: [columnResizing(), tableEditing(), invisibles([hardBreak()])],
 
   services: [
     new FillTheGapQuestionService(),

editors/demo/src/NCBI/layout/EditorElements.js

@@ -10,4 +10,13 @@ const fontWriting = css`
   font-size: ${th('fontSizeBase')};
 `;
 
-export default css``;
+export default css`
+  .ProseMirror {
+    background: white;
+    counter-reset: footnote;
+    line-height: 12px;
+    width: 497px;
+    white-space: pre !important;
+    overflow-x: auto;
+  }
+`;

wax-prosemirror-core/src/styles/styles.css

@@ -230,21 +230,7 @@ img.ProseMirror-separator {
     opacity: 0.8;
   }
 
-  .ProseMirror p::selection,
-   .ProseMirror h1::selection,
-   .ProseMirror h2::selection,
-   .ProseMirror h3::selection,
-   .ProseMirror code::selection,
-   .ProseMirror span::selection,
-   .ProseMirror p span::selection,
-   .ProseMirror h1 span::selection,
-   .ProseMirror h2 span::selection,
-   .ProseMirror h3 span::selection,
-   .ProseMirror h4 span::selection,
-   .ProseMirror code span::selection,
-   .ProseMirror custom-tag-block::selection,
-   .ProseMirror custom-tag-inline::selection,
-    #notes-container div::selection {
-      background-color: transparent;
-      color: #000;
-    }
\ No newline at end of file
+ .ProseMirror *::selection{
+   background-color: #C5D7FE;
+  color: #000;
+}
\ No newline at end of file

wax-prosemirror-plugins/src/WaxSelectionPlugin.js

@@ -9,24 +9,21 @@ const WaxSelectionPlugin = new Plugin({
     init(config, instance) {
       return { deco: DecorationSet.empty };
     },
-    apply(transaction, state, prevEditorState, editorState) {
-      const sel = transaction.curSelection;
-
-      const decos = [
-        Decoration.inline(sel.$from.pos, sel.$to.pos, {
+    apply(tr, prev, previousState, newState) {
+      const { selection } = tr;
+      const createDecoration = DecorationSet.create(newState.doc, [
+        Decoration.inline(selection.$from.pos, selection.$to.pos, {
           class: 'wax-selection-marker',
         }),
-      ];
-      const deco = DecorationSet.create(editorState.doc, decos);
-      return { deco };
+      ]);
+      return { createDecoration };
     },
   },
   props: {
     decorations(state) {
-      if (state && this.getState(state)) {
-        return this.getState(state).deco;
-      }
-      return null;
+      const waxSelectionPluginState =
+        state && waxSelectionPlugin.getState(state);
+      return waxSelectionPluginState.createDecoration;
     },
   },
 });