javascript - Rangy SurroundContents の交換

Question

選択したテキストを H1 見出しと H2 の間で切り替えるために、Web ページに単純な 2 ボタン トグルを実装することを検討しています。SurroundContents メソッドはうまく機能しますが、既存の親タグ要素ノードを置き換えようとすると問題が発生します。私はこれを行うためにあらゆる種類の方法を試しましたが、あまり成功しませんでした。

基本的な機能は以下です。選択した同じテキストを使用して、これらの関数を次々に実行すると、次のような出力が得られます。

「テスト テキスト」のテキストを選択し、H1 オプションを選択した後: <h1>test text</h1>

同じテキストが再度選択され、今度は H2 オプションが押された場合:<h1><h2>test text</h2></h1>

function surroundSelectedWithH1() {
    var element = document.createElement("h1");

    // removed code to setup range to save space
    if (range) {
        range.surroundContents(element);
    }
}

function surroundSelectedWithH2() {
    var element = document.createElement("h2");

    // removed code to setup range to save space
    if (range) {
        range.surroundContents(element);
    }
}

これは問題なく、予想されることですが、見出し要素がネストされないように、元の親見出し要素を削除する方法を本当に探しています (たとえば、テキストは h1 または h2 ではなく、h1 または h2 で囲まれています)。両方）。私はparentNodeなどへのアクセスを実験しましたが、このアプローチを機能させることができませんでした。次のparentElementの提案Getting the parent node for selected text with rangy libraryを見てみましたが、変更された親要素をrangeでDOMに書き戻したり、DOMのどこにあるのかを判断する満足のいく方法を持っていませんでしたオブジェクトはそれを交換するためのものでした。それはすぐに扱いにくいアプローチになり、より良いオプションが必要になりました。

範囲の広い CssApplier モジュールがこの状況を処理できることは知っていますが、css ではなく実際の要素を操作する必要があります。

また、テキスト エディターの実装に rangy を使用する raptor エディターでは、見出しを適用するときにまったく同じ問題が発生することにも気付きました: http://www.raptor-editor.com/demo

この質問も関連していましたが、私が知る限り、この特定の要素の問題は execCommand では処理できません - Javascript: how to un-surroundContents range

親切に受け取った助けやアドバイス。