document.execCommand　の代わりになるAPIやライブラリなどありますでしょうか

document.execCommandが廃止されることに伴い下記のように
実行することがいつかできなくなってしまうため、代替のAPIやライブラリなど
ご教授いただけますでしょうか。

※Clipboard APIにて、COPYとPASTEとCUTを利用するように書かれている情報が多いですが
実現したいことは特定の領域内で「選択された文字」に対して<b>タグや<a >タグで囲むことです。　
(https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative)

※追記

var designDoc = document.getElementById("design-area").contentDocument;
designDoc.designMode = "On";

designDoc.excuteCommand(command)でしたら、一部の実現が可能であることを確認しましたが
シングルページアプリケーション(SPA)にて、複数のリッチテキストをそれぞれ配置する場合オブジェクの紐づきが面倒になるかも...

javascript
1  $('.toolbar a').click(function(e) {
2    var command = $(this).data('command');
3    if (command == 'createlink' ) {
4      url = prompt('Enter the link here: ', 'http://');
5      document.execCommand($(this).data('command'), false, url);
6    } else document.execCommand($(this).data('command'), false, null);
7  });

html
1<div class="toolbar">
2      <a href="#" data-command='undo'><i class='fa fa-undo'></i></a>
3      <a href="#" data-command='redo'><i class='fa fa-repeat'></i></a>
4      <a href="#" data-command='bold'><i class='fa fa-bold'></i></a>
5      <a href="#" data-command='createlink'><i class='fa fa-link'></i></a>
6      <a href="#" data-command='unlink'><i class='fa fa-unlink'></i></a>
7    </div>
8    <div id='editor' contenteditable>
9      <p>Try making some changes here. Add your own text or maybe an image.</p>
10    </div>

m.ts10806

2021/07/14 19:51

execcommand 代替で検索して出てくる情報では足りませんか？

yuki_naki

2021/07/15 02:14

ご回答ありがとうございます。探してみましたが実現したいことと少し離れていたような情報がほとんどでしたので質問してみました。

m.ts10806

2021/07/15 02:16

どのように離れていたのでしょう？探した内容と共に質問本文に記載してください。

yuki_naki

2021/07/15 02:28

Clipboard APIにて、COPYとPASTEとCUTを利用するように書かれている情報が多いですが実現したいことは特定の領域内で「選択された文字」に対して<b>タグや<a >タグで囲むことです。 (https://stackoverflow.com/questions/60581285/execcommand-is-now-obsolete-whats-the-alternative) ご確認をよろしくお願いいたします。

m.ts10806

2021/07/15 02:33

質問は編集できますしこちらはあくまで質問の追記修正依頼のコメント欄なので本文に

m.ts10806

2021/07/15 02:35 編集

ただ、それって、元々コマンドなくても良いような。teratailのマークダウンや、WYSIWYGで実現されてるようなことですよね

Lhankor_Mhy

2021/07/15 02:39

m.ts10806 さんのおっしゃるとおり、Range.surroundContents でいいかと思いますね。 https://developer.mozilla.org/en-US/docs/Web/API/Range/surroundContents ただ、要素をまたぐような選択をした場合には、結構泥臭い処理が必要だったような記憶があります。

yuki_naki

2021/07/15 02:45

ご確認ありがとうございます。 >m.ts10806さん WYSIWYG Editorでも実現は可能と思いますが今回は自作のリッチテキストでボタンをボチボチして文字列を自由に変換可能なものを作成したいと考えておりますため、そのまま利用することが難しいです。 >Lhankor_Mhyさんおっしゃる通りです私も結構時間がかかるかなと思いましたため、何かいいライブラリもしくはAPIがあれば、と思いこちらにて質問させて頂きました。