テラテイルの様な入力フォームを作りたいです。

Question

テラテイルの様な入力フォームを作成しています。
その際に、コードを記入するような場所を用意し、テキストエリアとプレビューとで連動させたいです。
また、コード記入エリアを随時追加しても問題ない様な実装をしたいです。

※Typescriptも採用しておりますが、まだ本腰入れて組み込んでいないのでスルーしてください…

            <div class="options">
              <div @click="addOptions('code')" class="icon">
                <img
                  src="../assets/images/code_icon.png"
                  alt="ソースコード追加"
                />
              </div>
            </div>

           <textarea
              v-model="mainText"
              @input="updatePreview"
              id="textarea1"
              placeholder="本文"
              class="materialize-textarea validate textarea"
            >
            </textarea>
            </div>
            <div class="preview">
              <p>プレビュー：</p>
              <div class="preview-body" v-html="preview"></div>
            </div>

<script setup lang="ts">
import { ref, computed } from "vue";
// import codeEditor from "@/components/codeEditor.vue";

const title = ref("");
const mainText = ref("");
const preview = ref("");
const codeText = ref("");

// テキストエリアとプレビューを同期させる
const updatePreview = () => {
  const texts = mainText.value.split("\n");
  const paragraphs = texts.map((text) => {
    if (text === "") {
      return "<br>";
    } else {
      return `<p>${text}</p>`;
    }
  });
  preview.value = paragraphs.join("");
};

// フォーム内各オプション実装
const addOptions = function (type: string) {
  // コードエディター挿入
  if (type === "code") {
    mainText.value += `----ここに言語を入力\n${codeText.value}\n----\n`;
    preview.value += `<div><code>コード${codeText.value}</code></div>`;
  }
};

【①実装画面】

【②通常テキスト入力時】

【③コード挿入ボタン押下後】

【④「----ここに言語を入力----」の中に入力時】

【問題点】
最低限の入力と同期は実装できました
しかし③の時に生成されたテキストエリア何の「----ここに言語を入力----」内に入力されると
生成された「<div><code>コード${codeText.value}</code></div>」が削除され、④の画像の様に上書きされてしまいます。

これらの原因と解決方法をどなたか何卒ご教示ください。

※Vue3、Composition API を採用しております

Answer 1

原因は

----ここに言語を入力
コード
----

を、処理するコードが実装されていないことではないですか？

同期をとらせるため、「コード」という文字が追加するとして、

  if (type === "code") {
    mainText.value += `----ここに言語を入力\nコード${codeText.value}\n----\n`;
    preview.value += `<div><code>コード${codeText.value}</code></div>`;
  }

updatePreviewで、----が来たときの処理を追加してみたらどうでしょう？