prosemirror-selection-leaf-plugin

1.1.0 • Public • Published

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

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i prosemirror-selection-leaf-plugin

    Weekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    64.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • jaysaurus