How to use the codemirror.Doc function in codemirror

open (name, content) {
        if (!this.el) {
            // Create DOM element
            this.el = document.createElement('ul');
            this.el.className = 'ge_panel';
        }

        if (this.main.change && this.current === 'untitled') {
            console.log('Open Current in a different tab');
            this.open(this.current, this.main.getContent());
        }

        this.buffers[name] = CodeMirror.Doc(content, 'x-shader/x-fragment');

        // Create a new tab
        let tab = document.createElement('li');
        tab.setAttribute('class', 'ge_panel_tab');
        tab.textContent = name;
        CodeMirror.on(tab, 'click', () => {
            this.select(name);
        });

        let close = tab.appendChild(document.createElement('a'));
        close.textContent = 'x';
        close.setAttribute('class', 'ge_panel_tab_close');
        CodeMirror.on(close, 'click', () => {
            this.close(name);
        });

export function createCodeMirrorDoc(content) {
  // Remove any instances of Tangram Play's default API key
  const scrubbedContent = suppressAPIKeys(content, config.TILES.API_KEYS.SUPPRESSED);

  // Create a new instance of a CodeMirror document
  return new CodeMirror.Doc(scrubbedContent, 'yaml-tangram');
}

componentWillUnmount() {
    if (typeof navigator !== 'undefined') {
      const {filename} = this.props
      const CodeMirror = require('codemirror')

      // Store a reference to the current linked doc
      const linkedDoc = this.cm.doc

      this.cm.swapDoc(new CodeMirror.Doc('', options.mode))

      // Unlink the doc
      docCache[filename].unlinkDoc(linkedDoc)
    }
  }

createDocument() {
    return new CodeMirror.Doc("");
  }

createDocument() {
    return new CodeMirror.Doc("");
  }

lineNumbers       : false,
				lineWrapping      : true,
				theme             : 'default',
				keyMap            : 'piledmap',
				extraKeys         : extraKeys,
				indentUnit        : 4,
				smartIndent       : true,
				tabSize           : 4,
				indentWithTabs    : true,
				cursorBlinkRate   : 540,
				addModeClass      : true,
				autoCloseBrackets : true,
				scrollbarStyle    : 'native',
				cursorScrollMargin: 10,
				placeholder       : '',
				value             : this.note ? new CodeMirror.Doc(this.note.body, 'epiphanymode') : undefined
			})
			this.cm = cm
			this.$root.codeMirror = cm

			cm.on('change', this.updateNoteBody)
			cm.on('blur', this.updateNoteBeforeSaving)

			cm.on('drop', (cm, event) => {
				if (event.dataTransfer.files.length > 0) {
					var p = cm.coordsChar({ top: event.y, left: event.x })
					cm.setCursor(p)
					this.uploadFiles(cm, event.dataTransfer.files)
				} else {
					return true
				}
			})

changeModule = async (newModule: Module) => {
    this.currentModule = newModule;

    const { currentModule } = this;

    if (!documentCache[currentModule.id]) {
      const mode = (await this.getMode(currentModule.title)) || 'typescript';

      documentCache[currentModule.id] = new CodeMirror.Doc(
        currentModule.code || '',
        mode
      );
    }

    this.codemirror.swapDoc(documentCache[currentModule.id]);

    this.changeCode(currentModule.code || '');
    this.configureEmmet();
  };

getCodeMirror = async (el: Element) => {
    const { code, id, title, highlightedLines } = this.props;
    if (!this.props.onlyViewMode) {
      CodeMirror.commands.save = this.handleSaveCode;
    }
    const mode = await this.getMode(title);
    documentCache[id] = new CodeMirror.Doc(code || '', mode);

    this.codemirror = getCodeMirror(el, documentCache[id]);

    if (!this.props.onlyViewMode) {
      this.codemirror.on('change', this.handleChange);
      this.setCodeMirrorPreferences();
    } else {
      this.codemirror.setOption('readOnly', true);
    }

    if (highlightedLines) {
      highlightLines(this.codemirror, highlightedLines);
    }
  };

componentWillReceiveProps (nextProps) {
    if (this.props.docKey !== nextProps.docKey) {
      let nextDoc = docMap.get(nextProps.docKey)
      let currentDoc = this.codemirror.getDoc()
      docMap = docMap.set(this.props.docKey, currentDoc)

      if (nextDoc == null) {
        let syntax = CodeMirror.findModeByName(nextProps.mode)
        nextDoc = new CodeMirror.Doc(nextProps.value, syntax.mime)
        docMap = docMap.set(nextProps.docKey, nextDoc)
      }
      this.codemirror.swapDoc(nextDoc)
    }

    if (this.props.mode !== nextProps.mode) this.setSyntaxMode(nextProps.mode)
  }

private open(rpc: RPC) {
    if (rpc.request_schema) {
      let doc = this.docs.get(rpc)
      if (doc === undefined) {
        const js = new JSONRenderer(this.props.md).render(rpc.request_schema!)
        doc = new CodeMirror.Doc(js, {
          name: "javascript",
          json: true
        })
        this.docs.set(rpc, doc)
      }
      this.cm.current?.open(doc)
    }
    this.setState({response: undefined, respErr: undefined})
  }