TypeScript codemirror類代碼示例

            }).then(kernel => {

                // Create a codemirror instance
                let code = require('../widget_code.json').join("\n");
                let inputarea = document.getElementsByClassName("inputarea")[0] as HTMLElement;
                let editor = CodeMirror(inputarea, {
                    value: code,
                    mode: "python",
                    tabSize: 4,
                    showCursorWhenSelecting: true,
                    viewportMargin: Infinity,
                    readOnly: true
                });

                // Create the widget area and widget manager
                let widgetarea = document.getElementsByClassName("widgetarea")[0] as HTMLElement;
                let manager = new WidgetManager(kernel, widgetarea);

                // Run backend code to create the widgets.  You could also create the
                // widgets in the frontend, like the other widget examples demonstrate.
                let request = kernel.requestExecute({ code: code });
                request.onIOPub = (msg) => {
                    // If we have a display message, display the widget.
                    console.log(msg);
                }
            });

    }).then(kernel => {

        // Create a codemirror instance
        let code = require('../widget_code.json').join('\n');
        let inputarea = document.getElementsByClassName('inputarea')[0] as HTMLElement;
        let editor = CodeMirror(inputarea, {
            value: code,
            mode: 'python',
            tabSize: 4,
            showCursorWhenSelecting: true,
            viewportMargin: Infinity,
            readOnly: true
        });

        // Create the widget area and widget manager
        let widgetarea = document.getElementsByClassName('widgetarea')[0] as HTMLElement;
        let manager = new WidgetManager(kernel, widgetarea);

        // Run backend code to create the widgets.  You could also create the
        // widgets in the frontend, like the other widget examples demonstrate.
        let execution = kernel.requestExecute({ code: code });
        execution.onIOPub = (msg) => {
            // If we have a display message, display the widget.
            if (KernelMessage.isDisplayDataMsg(msg)) {
                let widgetData: any = msg.content.data['application/vnd.jupyter.widget-view+json'];
                if (widgetData !== undefined && widgetData.version_major === 2) {
                    let model = manager.get_model(widgetData.model_id);
                    if (model !== undefined) {
                        model.then(model => {
                            manager.display_model(msg, model);
                        });
                    }
                }
            }
        };
    });

    initialize(): void {
        this._editor = CodeMirror(this.editorHostEl, this.getEditorOptions());

        this.changeEventListener = () => {
            this.onValueChanged();
        };

        this.keyDownEventListener = (_, event: KeyboardEvent) => {
            this.onKeyDown(event);
        };

        this.focusEventListener = () => {
            this.handleFocus(true);
            this.emitEvent(new NoteSnippetEditorFocusedEvent(this._ref));
        };

        this.blurEventListener = () => {
            this.handleFocus(false);
            this.emitEvent(new NoteSnippetEditorBlurredEvent(this._ref));
        };

        this._editor.on('change', this.changeEventListener);
        this._editor.on('keydown', this.keyDownEventListener);
        this._editor.on('focus', this.focusEventListener);
        this._editor.on('blur', this.blurEventListener);

        this._afterInitialized.next();
    }

  init(pane: HTMLElement, edit: CodeMirror.Editor, options: CodeMirror.MergeView.MergeViewEditorConfiguration) {
    this.edit = edit;
    (this.edit.state.diffViews || (this.edit.state.diffViews = [])).push(this);
    let orig = this.model.remote;
    this.orig = CodeMirror(pane, copyObj({value: orig}, copyObj(options)));
    this.orig.state.diffViews = [this];

    this.chunks = this.model.getChunks();
    this.dealigned = false;

    this.showDifferences = options.showDifferences !== false;
    this.forceUpdate = this.registerUpdate();
    this.setScrollLock(true, false);
    this.registerScroll();
  }

  constructor(node: Node, options: MergeViewEditorConfiguration) {
    this.options = options;
    var remote = options.remote;
    var local = options.local;
    var merged = null; //options.merged;
    
    var wrap = []
    var left: DiffView = this.left = null;
    var right: DiffView = this.right = null;
    var merge: DiffView = this.merge = null
    this.base = null;
    var self = this;
    this.diffViews = [];
    this.aligners = [];
    options.value = (options.remote.base !== null ?
      options.remote.base : options.remote.remote);
    options.lineNumbers = options.lineNumbers !== false;
    
    /** 
     * Different cases possible:
     *   - Local and merged supplied: Merge:
     *     - Always use left, right and merge panes
     *     - Use base if `showBase` not set to false
     *   - Only remote supplied: Diff:
     *     - No change: Use ony base editor
     *     - Entire content added/deleted: Use only base editor,
     *       but with different classes
     *     - Partial changes: Use base + right editor
     * */ 
    
    var hasMerge = local !== null && merged !== null;
    if (hasMerge) {
      console.assert(remote.base == local.base);
      
      left = this.left = new DiffView(local, 'left', this.alignChunks);
      this.diffViews.push(left);
      //wrap.push(left.buildGap());
      var leftPane = elt('div', null, 'CodeMirror-merge-pane');
      wrap.push(leftPane);
      
      let showBase = options.showBase !== false;
      if (showBase) {
        var basePane = elt('div', null, 'CodeMirror-merge-pane');
        wrap.push(basePane);
      }
      
      right = this.right = new DiffView(remote, 'right', this.alignChunks);
      this.diffViews.push(right);
      //wrap.push(right.buildGap());
      var rightPane = elt('div', null, 'CodeMirror-merge-pane');
      wrap.push(rightPane);
      rightPane.className += ' CodeMirror-merge-pane-rightmost';
      
      wrap.push(elt('div', null, null, 'height: 0; clear: both;'));
      
      /*merge = this.merge = new DiffView(merged, 'merge', this.alignChunks);
      var mergePane = elt('div', null, 'CodeMirror-merge-pane');
      wrap.push(mergePane);*/
      var panes = 3 + (showBase ? 1 : 0);
    } else {
      // Base always used
      var basePane = elt('div', null, 'CodeMirror-merge-pane');
      wrap.push(basePane);
      if (remote.unchanged || remote.added || remote.deleted) {
        if (remote.unchanged) {
          basePane.className += ' CodeMirror-merge-pane-unchanged';
        } else if (remote.added) {
          basePane.className += ' CodeMirror-merge-pane-added';
        } else if (remote.deleted) {
          basePane.className += ' CodeMirror-merge-pane-deleted';
        }
        var panes = 1;
      } else {
        right = this.right = new DiffView(remote, 'right', this.alignChunks.bind(this));
        this.diffViews.push(right);
        var rightPane = elt('div', null, 'CodeMirror-merge-pane');
        wrap.push(right.buildGap());
        wrap.push(rightPane);
        rightPane.className += ' CodeMirror-merge-pane-rightmost';
        var panes = 2;
      }
      wrap.push(elt('div', null, null, 'height: 0; clear: both;'));
    }

    var wrapElt = this.wrap = node.appendChild(elt('div', wrap, 'CodeMirror-merge CodeMirror-merge-' + panes + 'pane'));
    if (basePane !== undefined) {
      this.base = CodeMirror(basePane, copyObj(options));
    }

    if (left) left.init(leftPane, this.base, 
      copyObj({readOnly: true}, copyObj(options)) as CodeMirror.MergeView.MergeViewEditorConfiguration);
    if (right) right.init(rightPane, this.base,
      copyObj({readOnly: true}, copyObj(options)) as CodeMirror.MergeView.MergeViewEditorConfiguration);
    //if (merge) right.init(mergePane, this.base, copyObj({readOnly: false}, copyObj(options)));

    if (options.collapseIdentical) {
      this.base.operation(function() {
          collapseIdenticalStretches(self, options.collapseIdentical);
      });
    }
//.........這裏部分代碼省略.........