Prosemirror-selection-leaf-plugin

A plugin designed to help make the behaviour of selections within prosemirror behave more like those found in conventional desktop publishing suites. See the GIF below for a demo

installation

npm i --save prosemirror-selection-leaf-plugin

add the following import and plugin to your code

...
import { createSelectionLeafPlugin } from 'prosemirror-selection-leaf-plugin'

EditorState.create({
  doc: DOMParser.fromSchema(schema).parse(ed.doc),
  plugins: [
    createSelectionLeafPlugin()
    ...
  ]
})

By default, the plugin assumes that your prosemirror schema implementation supports <br/> tags of the type "hardBreak". Should your schema specify a different name for <br/> tags, simply supply the name as an argument to the method:

createSelectionLeafPlugin('myBreakPoint')

finally, ensure you add CSS as below to your main css file/style tag (though feel free to choose the colours!)

::selection {
  background: #a8d1ff;
}
::-moz-selection {
  background: #a8d1ff;
}

.selection-after-edge::after,
.selection-before-edge::before {
  content: ' ';
  background: #a8d1ff;
}