diff --git a/editors/editoria/src/config/config.js b/editors/editoria/src/config/config.js index a1187692dce33a230e0a4905560553ed9b79b022..319094f1a7c8abbc3b3c5b71224b78a255949f01 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 9fa4996bc4def8a2fbf810e48d0659b0eae86444..439dff10d81a983eb374d8e44802c6e05c22df13 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 162ffb9f999494e3ef9cb71660dd2a378aa3bba5..aceed8d2f7e65b45b655590e393fd66f0b636c01 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 0000000000000000000000000000000000000000..d01481851c4e35485f854fa6dab701770591380a --- /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;