Contenteditable islands prevents selection

I am trying to make certain parts of a block editable since i’m creating forums that can be embedded into the editor. One of the features I want to enable is to select all text within a forum field (not the entire doc just within the block) using Ctrl+A so I implemented a keydownhandler with this general structure

  "Mod-a": (state: EditorState, dispatch: any, view) => {
    const {$anchor,$head} =
    const node = $anchor.node()

    if (hasSelection($anchor,state,dispatch)) {
      return selectAll(state,dispatch)

    if (isTextBlock(node)) {
    else {
    return true


I’ve noticed that when a node is wrapped in an contenteditable=“false” like so

//Some NodeView
<div contenteditable='false'> //some wrapper for the content
   <node-content contenteditable='true'/> //block-content

it does not allow for selection to appear. What is a solution around this? I thought about having the forum disconnected from ProseMirror but I would like to use plugins for the text-fields to insert references and to have certain functionality such as undo/redo that the editor would provide like inputRules

Don’t create contenteditable=false parent of editable content. If you need uneditable elements for your block-level nodes, do something more like this:

<div class=mynode>
  <div contenteditable=false>
     uneditable controls go here
  <div class=mynode-content>
1 Like