diff --git a/editors/demo/src/Editoria/config/config.js b/editors/demo/src/Editoria/config/config.js index cdf2dec711ca584f0eb9797096a32596ff1c923c..12a61879e82dfecfdbc7052fcdba44d61be8796c 100644 --- a/editors/demo/src/Editoria/config/config.js +++ b/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' }, diff --git a/editors/demo/src/HHMI/config/config.js b/editors/demo/src/HHMI/config/config.js index 28e67c5350011f29da3d189d1ee609acc70689aa..ebb2aa943e75778aff327812db5a9ece284ecbeb 100644 --- a/editors/demo/src/HHMI/config/config.js +++ b/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(), diff --git a/editors/demo/src/NCBI/layout/EditorElements.js b/editors/demo/src/NCBI/layout/EditorElements.js index 6afafdfe43360117963bc324d86d217f038ace97..c5fd423e6c92c29fbd4b5698a011717b5ae43eda 100644 --- a/editors/demo/src/NCBI/layout/EditorElements.js +++ b/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; + } +`; diff --git a/wax-prosemirror-core/src/styles/styles.css b/wax-prosemirror-core/src/styles/styles.css index ef185effd7733f364651d8e1a9914091f416b4d3..c9790cf95743b105902e9be769b21df24b8c3ab1 100644 --- a/wax-prosemirror-core/src/styles/styles.css +++ b/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 diff --git a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js index 66955860343a9107e074aebf466599161faaf0e4..ef1663091b2a0d9b1a7ef567bd8a5eb1fca3bced 100644 --- a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js +++ b/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; }, }, });