Demo of a ProseMirror editor that uses a nested code editor

node-view.js

const {EditorState, Selection} = require("prosemirror-state")
const {MenuBarEditorView} = require("prosemirror-menu")
const {DOMParser, DOMSerializer, Schema} = require("prosemirror-model")
const {schema: baseSchema} = require("prosemirror-schema-basic")
const {exampleSetup} = require("prosemirror-example-setup")
const {keymap} = require("prosemirror-keymap")
const CodeMirror = require("codemirror")
require("codemirror/mode/javascript/javascript")

let view, menuView, schema = new Schema({
  nodes: baseSchema.nodeSpec.update("code_block", {
    group: "block",
    attrs: {text: {default: ""},
            language: {default: "text/plain"}},
    parseDOM: [
      {tag: "pre", getAttrs: dom => ({text: dom.textContent, language: dom.getAttribute("data-language") || "text/plain"})},
    ],
    toDOM(node) {
      return ["pre", {"data-language": node.attrs.language}, node.attrs.text]
    }
  }),
  marks: baseSchema.markSpec
})

function maybeEscapeCode(sendAction, unit, dir) {
  return function(cm) {
    let pos = cm.getCursor()
    if (cm.somethingSelected() || pos.line != (dir < 0 ? cm.firstLine() : cm.lastLine()) ||
        (unit == "char" && pos.ch != (dir < 0 ? 0 : cm.getLine(pos.line).length)))
      return CodeMirror.Pass
    view.focus()
    sendAction((state, pos) => Selection.near(state.doc.resolve(pos + (dir < 0 ? 0 : 1)), dir).action())
  }
}

function incrementalNewValue(cm, oldVal, newVal) {
  let start = 0, oldEnd = oldVal.length, newEnd = newVal.length
  while (start < oldEnd && oldVal.charCodeAt(start) == newVal.charCodeAt(start)) ++start
  while (oldEnd > start && newEnd > start &&
         oldVal.charCodeAt(oldEnd - 1) == newVal.charCodeAt(newEnd - 1)) { oldEnd--; newEnd-- }
  cm.replaceRange(newVal.slice(start, newEnd), cm.posFromIndex(start), cm.posFromIndex(oldEnd), "docUpdate")
}

function codeBlockView(node, sendAction) {
  let cm = new CodeMirror(null, {
    value: node.attrs.text,
    mode: node.attrs.language,
    lineNumbers: true,
    extraKeys: {
      Up: maybeEscapeCode(sendAction, "line", -1),
      Left: maybeEscapeCode(sendAction, "char", -1),
      Down: maybeEscapeCode(sendAction, "line", 1),
      Right: maybeEscapeCode(sendAction, "char", 1)
    }
  })
  cm.getScrollerElement().contentEditable = false
  let updating = false, attrs = node.attrs
  cm.on("changes", () => {
    if (updating) return
    attrs = {text: cm.getValue(), language: attrs.language}
    sendAction((state, pos) => state.tr.setNodeType(pos, null, attrs).action())
  })
  setTimeout(() => cm.refresh(), 50)
  return {
    update(node) {
      if (attrs.text != node.attrs.text)
        incrementalNewValue(cm, attrs.text, node.attrs.text)
      if (attrs.language != node.attrs.language)
        cm.setOption("mode", node.attrs.language)
      attrs = node.attrs
      return true
    },

    parseRule() {
      return {node: "code_block", attrs}
    },

    dom: cm.getWrapperElement(),

    select() {
      cm.focus()
      return true
    }
  }
}

menuView = new MenuBarEditorView(document.querySelector("#editor"), {
  state: EditorState.create({
    doc: DOMParser.fromSchema(schema).parse(document.querySelector("#content")),
    plugins: exampleSetup({schema}),
  }),
  onAction(action) { menuView.updateState(view.state.applyAction(action)) },
  handleClickOn(_view, _pos, node) { return node.type.name == "code_block" },
  nodeViews: {code_block: codeBlockView}
})
view = window.view = menuView.editor