TypeScript Editor.on方法代碼示例

  return (editor: Editor) => {

    function onTextChange({ change, source, selection }) {
      if (source !== 'user' || !editor.selection || !isTextEntry(change)) return;

      const index = editor.selection[1];
      const lastOp = change.ops[change.ops.length - 1];
      const lastChars = editor.getText(index - 1, index) + lastOp.insert.slice(-1);

      const replaced = lastChars.replace(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(")$/, '“')
              .replace(/"$/, '”')
              .replace(/(?:^|[\s\{\[\(\<'"\u2018\u201C])(')$/, '‘')
              .replace(/'$/, '’');

      if (replaced !== lastChars) {
        const quote = replaced.slice(-1);
        lastOp.insert = lastOp.insert.slice(0, -1) + quote;
        editor.updateContents(change, source, selection);
        return false;
      }
    }

    editor.on('text-changing', onTextChange);

    return {
      onDestroy() {
        editor.off('text-changing', onTextChange);
      }
    }
  }

  /**
   * Initializes the view, setting up listeners in the DOM and on the editor.
   */
  init() {
    // already inited
    let renderQueued = false;
    if (this.hasOwnProperty('uninit')) return;

    const onSelectionChange = () => {
      this.updateEditorSelection(SOURCE_USER);
    };

    const onEditorChange = async event => {
      if (renderQueued) return;
      renderQueued = true;
      await Promise.resolve();
      if (event.change) this.render();
      else this.updateBrowserSelection();
      renderQueued = false;
    };

    const rerender = () => this.render();

    this.doc.addEventListener('selectionchange', onSelectionChange);
    this.editor.on('editor-change', onEditorChange);
    this.editor.on('render', rerender);

    if (this.options.modules) {
      Object.keys(this.options.modules).forEach(key => this.modules[key] = this.options.modules[key](this.editor, this.root, this.paper));
    }

    this.render();

    this.uninit = () => {
      this.doc.removeEventListener('selectionchange', onSelectionChange);
      this.editor.off('editor-change', onEditorChange);
      this.editor.off('render', rerender);
      Object.keys(this.modules).forEach(key => {
        const api = this.modules[key];
        if (api && typeof api.onDestroy === 'function') api.onDestroy();
        delete this.modules[key];
      });
      delete this.uninit;
    }
  }

  return (editor: Editor) => {
    let ignore = false;

    function onTextChange({ change, source }) {
      if (ignore || source !== 'user' || !editor.selection || !isTextEntry(change)) return;
      const index = editor.selection[1];
      const text = editor.getExactText();
      const lineStart = text.lastIndexOf('\n', index - 1) + 1;
      const prefix = text.slice(lineStart, index);

      ignore = true;
      handlers.some(handler => handler(editor, index, prefix));
      ignore = false;
    }

    editor.on('text-change', onTextChange);

    return {
      onDestroy() {
        editor.off('text-change', onTextChange);
      }
    }
  };

  return function(editor: Editor, root: HTMLElement) {
    options = { ...defaultOptions, ...options };

    const stack = options.stack || {
      undo: [],
      redo: [],
    };
    let lastRecorded = 0;
    let lastAction = '';
    let ignoreChange = false;

    function undo(event: Event) {
      action(event, 'undo', 'redo');
    }

    function redo(event: Event) {
      action(event, 'redo', 'undo');
    }

    function cutoff() {
      lastRecorded = 0;
    }

    function clear() {
      stack.undo.length = 0;
      stack.redo.length = 0;
    }

    function action(event: Event, source: string, dest: string) {
      if (event.defaultPrevented) return;
      event.preventDefault();
      if (stack[source].length === 0) return;
      const entry = stack[source].pop();
      stack[dest].push(entry);
      cutoff();
      ignoreChange = true;
      if (typeof entry[source] === 'function') {
        entry[source]();
      } else {
        editor.updateContents(entry[source], SOURCE_USER, entry[source + 'Selection']);
      }
      ignoreChange = false;
    }

    function record(change: Delta, contents: Delta, oldContents: Delta, selection: Selection, oldSelection: Selection) {
      const timestamp = Date.now();
      const action = getAction(change);
      stack.redo.length = 0;

      let undoChange = contents.diff(oldContents);
      // Break combining if actions are different (e.g. a delete then an insert should break it)
      if (!action || lastAction !== action) cutoff();
      lastAction = action;

      if (lastRecorded && (!options.delay || lastRecorded + options.delay > timestamp) && stack.undo.length > 0) {
        // Combine with the last change
        const entry = stack.undo.pop();
        oldSelection = entry.undoSelection;
        undoChange = undoChange.compose(entry.undo);
        change = entry.redo.compose(change);
      } else {
        lastRecorded = timestamp;
      }

      stack.undo.push({
        redo: change,
        undo: undoChange,
        redoSelection: selection,
        undoSelection: oldSelection,
      });

      if (stack.undo.length > options.maxStack) {
        stack.undo.shift();
      }
    }


    function transform(change: Delta) {
      stack.undo.forEach(function(entry) {
        entry.undo = change.transform(entry.undo, true);
        entry.redo = change.transform(entry.redo, true);
      });
      stack.redo.forEach(function(entry) {
        entry.undo = change.transform(entry.undo, true);
        entry.redo = change.transform(entry.redo, true);
      });
    }


    function onTextChange({ change, contents, oldContents, selection, oldSelection, source }) {
      if (ignoreChange) return;
      if (source === SOURCE_USER) {
        record(change, contents, oldContents, selection, oldSelection);
      } else if (source !== SOURCE_SILENT) {
        transform(change);
      }
    }

    function onSelectionChange({ change }) {
      if (change) return;
//.........這裏部分代碼省略.........