[Unity]PowerPointのように入力文字の色と大きさを設定・入力できるようにしたい

前提・実現したいこと

Zoomなどのバーチャル動画背景を作成するツールを開発しています。

下の画像のように、右上のinputTextに文字を入力し、その文字が左上のTextMeshProに反映されるようになっています。

現在は<color=#000000></color>や<size=100%></size>などのタグを用いることで左上のTextMeshProの文字の色や大きさを変更することができますが、ユーザーに使いやすくするために、タグを使わないで色と文字の大きさを設定できるようにしたいです。
色はカラーピッカーを使い、文字の大きさは大・中・小のボタンを押すことで、右上に追加で入力した文字列を、設定した色と大きさで左上に表示させる予定です。

これをAssetや既にある方法で簡単に実装する方法はあるのでしょうか。

https://teratail.com/questions/175312
現在は上記のサイトを参考にしようと考えています。

もし他にもっと簡単な方法があるのであれば、そちらを試したいと考えて質問をしました。現在私が考えている方法で実装することが最も簡単である可能性が高い場合は、そのままでよいと教えていただけると助かります。

###実際の操作例
まず始めにカラーピッカーで#000000、文字の大きさボタンを「中」を選択した状態で右上のinputTextに「あいうえお」と入力します。
すると、左上のTextMeshProには<color=#000000><size=100%>あ</size></color><color=#000000><size=100%>い</size></color><color=#000000><size=100%>う</size></color><color=#000000><size=100%>え</size></color><color=#000000><size=100%>お</size></color>の文字列が入力されます。

次にカラーピッカーで#555555、文字の大きさボタンを「小」を選択した状態で右上のinputTextに「あい」と「うえお」の間にカーソルを合わせ、「か」を入力します。
すると、左上のTextMeshProには<color=#000000><size=100%>あ</size></color><color=#000000><size=100%>い</size></color><color=#555555><size=50%>か</size></color><color=#000000><size=100%>う</size></color><color=#000000><size=100%>え</size></color><color=#000000><size=100%>お</size></color>の文字列が入力されます。
このようにTextMeshProに表示する文字は、1文字ずつ色や大きさが異なった状態で表示することもあります。

この実装を簡単にするため、先にカラーピッカーで色と文字の大きさボタンを選択しておき、その状態で右上のInputTextに追加入力した文字列のみの色と大きさを指定した状態で左上のTextMeshProに表示したいです。

現在考えている方法は、
1文字目色000000, 文字の大きさ100%,
2文字目色000000, 文字の大きさ100%,
3文字目色555555, 文字の大きさ50%,
4文字目色000000, 文字の大きさ100%,
5文字目色000000, 文字の大きさ100%,
6文字目色000000, 文字の大きさ100%,

のようなデータを配列で保存し、右上のinputTextから左上のTextMeshProに変換する際に1文字ずつタグを付けることを考えています。

また、例えば<color=#000000><size=100%>あいうえお</size></color>のようにタグの指定範囲を2文字以上してしまうと、文字列を部分的に削除や追加したときにタグを削除するなどの条件が難しくなると思い、TextMeshProの1文字ごとにタグを付けるのが良いと考えています。

補足情報（FW/ツールのバージョンなど）

Unity2019.4.2

###補足
「カーソルで入力されている文字列を選択し、その前後にカラーコードを挟む（teratailの質問・回答欄のUIっぽい感じ）の機能」はなくても良いです。(あったほうがユーザーに使いやすくなるとは思いますが、実装が難しそうなので後回しで良いです。)

「文字列全体の文字サイズが変わる（この場合タグではなく、表示する方のTextコンポーネントの文字サイズを変えるというやり方も考えられる）」は、私が考えているものと異なります。TextMeshProに表示される文字の色と大きさは、1文字ずつ変更することも可能にしたいです。

長い説明となってしまいましたが、私が実装したい機能は以下のものになります。

左上のTextMeshProに表示される文字の色と大きさを1文字ずつ変更することも可能にしたい
右上のinputTextに<color=#000000><size=100%>あ</size></color>のようなタグをユーザーに理解・入力することは難しいため、カラーピッカーやボタンのようなもので簡単に文字の色と大きさを設定できるようにしたいです。

理想としては、PowerPointのように文字の色や大きさをマウスのクリックのみで簡単に設定できることです。

参考になるアセットやサイト、もしくは私の実装方法よりも良い方法などがありましたら、教えていただけると助かります。

分かりづらい点があるかと思います。その時は補足すべき部分などを教えて欲しいです。
よろしくお願いします。

sakura_hana

2020/08/20 00:47

もう少し具体的にやりたいことを記載してください。「右上に入力後、文字列を選択し、その前後にカラーコードを挟む（teratailの質問・回答欄のUIっぽい感じ）」なのか、「文字列全体の文字サイズが変わる（この場合タグではなく、表示する方のTextコンポーネントの文字サイズを変えるというやり方も考えられる）」なのか等方針が変わります。