TypeScript editor.Delta类代码示例

    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();
      }
    }

export function decorate(root: HTMLElement, contents: Delta) {
  const decorators = new Decorators(contents);
  root.dispatchEvent(new CustomEvent('decorate', { detail: decorators }));
  const change = decorators.getChange();

  if (change.ops.length) {
    change.forEach(op => {
      if (op.delete || (op.retain && op.attributes && !op.attributes.decorator) || (op.insert && !op.insert.decorator)) {
        throw new Error('Decorators may not insert text or delete contents.');
      }
    });
    contents = contents.compose(change);
  }
  return contents;
}

  private updatePosition(from: number, to?: number): any {
    if (this.change) {
      from = this.change.transformPosition(from);
      if (to != null) to = this.change.transformPosition(to);
    }

    // Optimize by adding to the existing delta when possible, compose is slow
    if (this.position < from) {
      this.delta.retain(from - this.position);
      this.position = from;
    } else if (this.position) {
      this.change = this.getChange();
      from = this.change.transformPosition(from);
      if (to != null) to = this.change.transformPosition(to);
      this.delta = new Delta();
      this.delta.retain(from);
      this.position = from;
    }

    return to != null ? [ from, to ] : from;
  }

export function deltaToVdom(delta: Delta, paper: Paper) {
  const { blocks, marks, embeds } = paper;
  const blockData = [];

  delta.eachLine(({ ops, attributes }) => {
    let inlineChildren = [];

    // Collect block children
    ops.forEach((op, i, array) => {
      if (op.insert) {
        let children = [];
        if (typeof op.insert === 'string') {
          const prev = array[i - 1];
          const next = array[i + 1];
          let text = op.insert.replace(/  /g, '\xA0 ');
          if (!prev) text = text.replace(/^ /, '\xA0');
          if (!next || (typeof next.insert === 'string' && next.insert[0] === ' ')) text = text.replace(/ $/, '\xA0');
          children.push(text);
        } else {
          const embed = embeds.findByAttributes(op.insert);
          let component: Function;
          if (embed && (component = getComponent(embed.name))) {
            const node = component(op.insert);
            children.push(node);
          }
        }

        if (op.attributes) {
          // Sort them by the order found in marks and be efficient
          Object.keys(op.attributes).sort((a, b) => marks.priority(b) - marks.priority(a)).forEach(name => {
            const mark = marks.get(name);
            let component: Function;
            if (mark && (component = getComponent(mark.name))) {
              const node = component(op.attributes, children);
              nodeMarks.set(node, mark); // Store for merging
              children = [ node ];
            }
          });
        }
        inlineChildren.push.apply(inlineChildren, children);
      }
    });

    // Merge marks to optimize
    inlineChildren = mergeChildren(inlineChildren);
    const lastChild = inlineChildren[inlineChildren.length - 1];
    if (!inlineChildren.length || (lastChild && (lastChild.name === 'br' || (inlineChildren.length === 1 && isDecoratorEmbed(lastChild))))) {
      inlineChildren.push(BR);
    }

    let block = blocks.findByAttributes(attributes);
    if (!block) block = blocks.getDefault();

    blockData.push([ block, inlineChildren, attributes ]);
  });

  // If a block has optimize=true on it, vdom will be called with all sibling nodes of the same block
  let blockChildren = [], prevBlock;
  let collect = [];
  blockData.forEach((data, i) => {
    const [ block, children, attr ] = data;
    const component = getComponent(block.name);
    if (component && (component as any).rendersMultiple) {
      collect.push([ attr, children ]);
      const next = blockData[i + 1];
      if (!next || next[0] !== block) {
        const children = component(collect);
        blockChildren = blockChildren.concat(children);
        collect = [];
      }
    } else if (component) {
      const node = component(attr, children);
      blockChildren.push(node);
    }
  });

  return blockChildren;
}

export function deltaFromDom(root: Element, paper: Paper, options: any = {}) {
  const inDom = root.ownerDocument.contains(root);
  const { blocks, marks, embeds } = paper;
  if (!options) options = defaultOptions;

  var walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
    acceptNode: node => {
      if (SKIP_ELEMENTS[node.nodeName]) {
        return NodeFilter.FILTER_REJECT;
      } else if (node.nodeType === Node.TEXT_NODE && node.nodeValue === '') {
        node.nodeType === Node.TEXT_NODE;
      } else if (node.nodeType === Node.TEXT_NODE || options.notInDom || inDom) {
        return NodeFilter.FILTER_ACCEPT;
      } else {
        return NodeFilter.FILTER_REJECT;
      }
    }
  });
  const delta = new Delta();
  let currentBlock: any, firstBlockSeen = false, unknownBlock = false, empty = true, node: Node;
  let lastNode = false;

  if (options.startNode) {
    walker.currentNode = options.startNode;
    walker.previousNode();
    if (options.offset) delta.retain(options.offset, undefined);
  } else {
    walker.currentNode = root;
  }

  while ((node = walker.nextNode())) {
    if (node === options.endNode) lastNode = true;
    else if (lastNode) break;

    if (isBRPlaceholder(paper, node)) {
      empty = false;
    } else if (node.nodeType === Node.TEXT_NODE) {
      let parent = node.parentNode as Element;

      // If all newlines, we can ignore
      if (node.nodeValue.replace(/\n+/g, '') === '') continue;

      // non-breaking spaces ( ) are spaces in a delta
      const text = node.nodeValue.replace(/\xA0/g, ' ').replace(/\n+/g, ' ');

      // Word gives us end-of-paragraph nodes with a single space. Ignore them.
      if (!text || (text === ' ' && parent.classList.contains('EOP'))) continue;

      // Gather up all the marks for this text node, walking up to the block level
      const attributes = gatherMarks(parent, root, paper);

      empty = false;
      delta.insert(text, attributes);
    } else if (node.className.indexOf('decorator') !== -1) {
      continue;
    } else if (embeds.matches(node)) {
      const embed = embeds.findByNode(node);
      if (embed) {
        const attributes = gatherMarks(node.parentNode as Element, root, paper);
        delta.insert(embed.fromDom ? embed.fromDom(node, paper) : { [embed.name]: true }, attributes);
      }
    } else if (blocks.matches(node) || (node.nodeType === Node.ELEMENT_NODE && (node as Element).matches(BLOCK_ELEMENTS))) {
      unknownBlock = !blocks.matches(node);

      if (unknownBlock) {
        let parent = node.parentNode;
        while (parent && !blocks.matches(parent) && parent !== root) {
          parent = parent.parentNode;
        }
        // If this block element is inside a recognized block, ignore it
        if (parent && parent !== root) {
          continue;
        }
      }

      const block = blocks.findByNode(node, true);

      // Skip paragraphs/divs inside blockquotes and list items etc.
      if (block === blocks.getDefault() && blocks.matches(node.parentNode)) {
        continue;
      }

      if (firstBlockSeen) {
        if (!currentBlock.unknownBlock || !empty) {
          delta.insert('\n', currentBlock.unknownBlock ? {} : currentBlock);
          empty = true;
        }
      } else {
        firstBlockSeen = true;
      }

      if (unknownBlock) {
        currentBlock = { unknownBlock };
      } else if (block !== blocks.getDefault()) {
        currentBlock = block.fromDom ? block.fromDom(node, paper) : { [block.name]: true };
      } else {
        currentBlock = {};
      }
    }
  }
//.........这里部分代码省略.........

 line(at: number, attributes: { [name: string]: any }) {
   const line = this.contents.getLines(at, at)[0];
   if (!line) return;
   this.updatePosition(line.end - 1);
   this.delta.retain(1, { decorator: attributes });
   this.position += 1;
 }

 getChange() {
   return this.change ? this.change.compose(this.delta) : this.delta;
 }

 embed(at: number, attributes: { [name: string]: any }) {
   this.updatePosition(at);
   this.delta.insert({ decorator: attributes });
   this.position += 1;
 }

 mark(from: number, to: number, attributes: { [name: string]: any }) {
   [ from, to ] = this.updatePosition(from, to);
   const length = to - from;
   this.delta.retain(length, { decorator: attributes });
   this.position += length;
 }

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