リッチテキストデルタへのアップグレード

2014 年 10 月 19 日 -ジェイソン・チェン

新しいリッチテキストタイプは現在公開されており、Quill v0.18.0 で使用されています。これは 1.0 に向けた大きな一歩であり、今後ドキュメントと変更を表現する方法になります。ほとんどの場合、このアップデートは中断を伴わず、バージョン番号を単純に増やすだけでアップグレードできます。¹。

ただし、古いデルタ形式を保存していた場合は、移行方法に関する簡単なガイドを以下に示します。

新旧のデルタの主な相違点は次のとおりです。

明示的な削除 - 古いデルタを調べ、暗黙的な削除を見つけて、新しいデルタに明示的な削除操作を挿入する必要があります。
埋め込みのサポート - 埋め込みの不正な表現が見つかった場合は、新しい表現に置き換えます。

もっと

var richText = require('rich-text');

var newDelta = new richText.Delta();
var index = 0;
var changeLength = 0;
oldDelta.ops.forEach(function (op) {
  if (_.isString(op.value)) {
    // Insert operation
    if (op.value === '!' && op.attributes && _.isString(op.attributes.src)) {
      // Found the old hacky representation for an embed
      // Quill only supports images so far so we can be confident this is an image
      // which is represented by 1
      newDelta.insert(1, op.attributes);
    } else {
      newDelta.insert(op.value, op.attributes);
    }
    changeLength += op.value.length;
  } else if (_.isNumber(op.start) && _.isNumber(op.end)) {
    // Retain operation
    if (op.start > index) {
      // Delete operation was implied by the current retain operation
      var length = op.start - index;
      newDelta.delete(length);
      changeLength -= length;
    }
    // Now handle or retain operation
    newDelta.retain(op.end - op.start, op.attributes);
    index = op.end;
  } else {
    throw new Error('You have a misformed delta');
  }
});

// Handle implied deletes at the end of the document
if (oldDelta.endLength < oldDelta.startLength + changeLength) {
  var length = oldDelta.startLength + changeLength - oldDelta.endLength;
  newDelta.delete(length);
}

リッチテキストモジュールを使用できない場合、またはこれを別の言語の一般的なガイドとして使用している場合は、挿入、削除、保持の操作を作成する際に次のものが役立つ可能性があります。

var nweDelta = { ops: [] };
oldDelta.ops.forEach(function () {
  // Following a similar logic to the earlier snippet
  // except replacing .insert(), .retain(), .delete() with:
  // insertOp(newDelta.ops, value, formats)
  // retainOp(newDelta.ops, length, formats)
  // deleteOp(newDelta.ops, length)
});

function insertOp(opsArr, text, formats) {
  var op = { insert: text };
  if (formats && Object.keys(formats).length > 0) {
    op.attributes = formats;
  }
  opsArr.push(op);
};

function deleteOp(opsArr, length) {
  opsArr.push({ delete: length });
}

function retainOp(opsArr, length, formats) {
  var op = { retain: length };
  if (formats && Object.keys(formats).length > 0) {
    op.attributes = formats;
  }
  opsArr.push(op);
}

no-ops の除外 (0 文字の削除) や、同じタイプの 2 つの隣接する操作のマージなど、リッチテキストによって実行される最適化がいくつかあります (「A」の挿入に続いて「B」の挿入がマージされ、単一の挿入「AB」になります)手術）。ただし、古いデルタ形式でも同様の最適化が行われているため、これらのケースについて心配する必要はありません。

quilljs.com のサンプルをアップグレードするために必要なのは次のとおりです。2580c2 ↩