cycle.jsとcodemirrorを組み合わせてみるとこうなる.js

import { Rx } from '@cycle/core'
import { h } from '@cycle/dom'
import CodeMirror from 'codemirror'

class CodeMirrorRenderer {
  constructor(events) {
    this.events = events;
  }

  hook(node, propertyName, previousValue) {
    if (!previousValue) {
      this.onRendered(node);
    }
  }

  insertCodeMirrorInto(node) {
    const codeMirror = new CodeMirror(node);
    Object.keys(this.events).forEach((eventName) => {
      codeMirror.on(eventName, (...event) => {
        this.events[eventName].onNext(event);
      });
    });
  }

  onRendered(node) {
    this.insertCodeMirrorInto(node);
  }
}

function template({ events }) {
  return h('div.editor', { hook: new CodeMirrorRenderer(events) });
}

export default function (responses) {
  const events = {
    blur: new Rx.Subject(),
    changes: new Rx.Subject(),
    focus: new Rx.Subject()
  };
  return {
    DOM: Rx.Observable.just(template({ events })),
    events
  };
}

main.js

import { makeDOMDriver } from '@cycle/dom';
import Cycle, { Rx } from '@cycle/core'
import editor from './widgets/editor'
import intent from './intent'
import model from './model'
import view from './view'

Cycle.run(
  (responses) => view(model(intent(responses))),
  {
    DOM: makeDOMDriver('body', { editor })
  }
);

Cycle.jsのcutsom elements と virtual-domのhooks の仕組みを使って、DOMを描画したときにフックしてCodeMirrorを挿入する。custom elementsを使うことで外部にCustomEventを発行できるので、CodeMirror起因のイベントを配信することで、アプリケーション側でCodeMirrorのイベントを利用して任意の処理を実行できるようになる。