Contenteditable islands prevents selection

1

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

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

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

    if (isTextBlock(node)) {
      selectNodeText($anchor,state,dispatch)
    }
    else {
      selectNode($anchor,state,dispatch)
    }
    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
</div>

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

2

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>
  <div class=mynode-content>
     ...
  </div>
</div>
1 Like