classcard-ui 0.2.1497 → 0.2.1498-beta.0

package/src/components/CTokenEditor/CTokenEditor.vue

@@ -1,804 +1,804 @@
-<template>
-  <div class="text-sm">
-    <div v-if="label || hint" class="flex justify-between">
-      <p v-if="label" class="font-medium text-gray-900">{{ label }}</p>
-      <p v-if="hint" class="text-gray-500">{{ hint }}</p>
-    </div>
-    <quill-editor
-      ref="myQuillEditor"
-      :class="`mt-1 rounded-md bg-white ${
-        disabled ? 'cursor-not-allowed opacity-50' : ''
-      } shadow-sm`"
-      :value="content"
-      :options="editorOption"
-      :id="id"
-      @change="onChange($event)"
-      @ready="onReady($event)"
-      @focus="handleFocus"
-      @blur="onEditorBlur"
-      :disabled="disabled"
-    ></quill-editor>
-    <p v-if="helpText" class="mt-2 text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-<script>
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
-import { quillEditor } from "vue-quill-editor";
-import Quill from "quill";
-
-const Embed = Quill.import("blots/embed");
-const Delta = Quill.import("delta");
-const TOKEN_PATTERN = /\{\{([^{}]+)\}\}/g;
-const DEFAULT_TOKEN_STYLE = {
-  wrapper:
-    "inline-flex overflow-hidden rounded-md border border-gray-200 text-sm leading-5",
-  group: "p-1 text-sm text-gray-500 bg-gray-50",
-  separator: "bg-white py-1 pr-1 text-sm text-gray-400 bg-gray-50",
-  label: "bg-indigo-50 px-2 py-1 text-sm text-indigo-600",
-  remove: "token-remove bg-indigo-50 py-1 pr-2 text-indigo-600",
-};
-const INVALID_TOKEN_STYLE = {
-  wrapper:
-    "inline-flex overflow-hidden rounded-md border border-red-300 text-sm leading-5",
-  group: "p-1 text-sm text-gray-500 bg-gray-50",
-  separator: "bg-white py-1 pr-1 text-sm text-gray-400 bg-gray-50",
-  label: "bg-red-50 px-2 py-1 text-sm text-red-600",
-  remove: "token-remove bg-red-50 py-1 pr-2 text-red-600",
-};
-
-function createTokenChipContent({
-  tokenStyle,
-  tokenGroup,
-  tokenSeparator,
-  tokenLabel,
-}) {
-  const wrapper = document.createElement("span");
-  wrapper.className = tokenStyle.wrapper;
-
-  const groupEl = document.createElement("span");
-  groupEl.className = tokenStyle.group;
-  groupEl.textContent = tokenGroup;
-
-  const separatorEl = document.createElement("span");
-  separatorEl.className = tokenStyle.separator;
-  separatorEl.textContent = tokenSeparator;
-
-  const labelEl = document.createElement("span");
-  labelEl.className = tokenStyle.label;
-  labelEl.textContent = tokenLabel;
-
-  const removeBtn = document.createElement("button");
-  removeBtn.type = "button";
-  removeBtn.className = tokenStyle.remove;
-  removeBtn.setAttribute("data-token-remove", "true");
-  removeBtn.setAttribute("aria-label", "Remove token");
-  removeBtn.textContent = "✕";
-
-  wrapper.appendChild(groupEl);
-  wrapper.appendChild(separatorEl);
-  wrapper.appendChild(labelEl);
-  wrapper.appendChild(removeBtn);
-
-  return wrapper;
-}
-
-class TokenBlot extends Embed {
-  static create(value) {
-    const node = super.create();
-    let tokenValue = "";
-    let tokenLabel = "";
-    let tokenGroup = "Variable";
-    let tokenSeparator = "→";
-    let tokenStyle = { ...DEFAULT_TOKEN_STYLE };
-
-    if (typeof value === "string") {
-      tokenValue = value;
-      tokenLabel = value;
-    } else if (value && typeof value === "object") {
-      tokenValue = value.value || "";
-      tokenLabel = value.label || tokenValue;
-      tokenGroup = value.group || "Variable";
-      tokenSeparator = value.separator || "→";
-      if (value.style) {
-        tokenStyle = { ...tokenStyle, ...value.style };
-      }
-    }
-
-    node.setAttribute("contenteditable", "false");
-    node.setAttribute("data-token", tokenValue);
-    node.setAttribute("data-label", tokenLabel);
-    node.setAttribute("data-group", tokenGroup);
-    node.setAttribute("data-separator", tokenSeparator);
-    node.setAttribute("data-token-style", JSON.stringify(tokenStyle));
-    node.className = "ql-token-chip inline-flex align-middle";
-    node.appendChild(
-      createTokenChipContent({
-        tokenStyle,
-        tokenGroup,
-        tokenSeparator,
-        tokenLabel,
-      }),
-    );
-    return node;
-  }
-
-  static value(node) {
-    let tokenStyle = {};
-    const styleAttr = node.getAttribute("data-token-style");
-    if (styleAttr) {
-      try {
-        const parsed = JSON.parse(styleAttr);
-        if (parsed && typeof parsed === "object") {
-          tokenStyle = parsed;
-        }
-      } catch (error) {
-        tokenStyle = {};
-      }
-    }
-    return {
-      value: node.getAttribute("data-token") || "",
-      label: node.getAttribute("data-label") || "",
-      group: node.getAttribute("data-group") || "",
-      separator: node.getAttribute("data-separator") || "→",
-      style: tokenStyle,
-    };
-  }
-}
-
-TokenBlot.blotName = "token";
-TokenBlot.tagName = "span";
-// Scope the blot to spans carrying the token marker class. Without this, the
-// blot matches EVERY <span> (Quill registers globally by tagName), so plain
-// spans in other editors (e.g. CEditor content) get swallowed and rendered as
-// generic "Variable →" chips.
-TokenBlot.className = "ql-token-chip";
-
-const existingTokenFormat = Quill.import("formats/token");
-if (!existingTokenFormat || typeof existingTokenFormat.create !== "function") {
-  Quill.register({ "formats/token": TokenBlot }, true);
-}
-export default {
-  name: "CTokenEditor",
-  components: { quillEditor },
-  props: {
-    id: {
-      type: String,
-    },
-    content: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    hint: {
-      type: String,
-    },
-    helpText: {
-      type: String,
-    },
-    toolbarOptions: {
-      type: Array,
-    },
-    onEditorChange: {
-      type: Function,
-    },
-    placeholder: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    templateVariables: {
-      type: Array,
-      default: () => [],
-    },
-    tokenChipStyles: {
-      type: Object,
-      default: () => ({}),
-    },
-    tokenSeparator: {
-      type: String,
-      default: "→",
-    },
-    enableTokenChips: {
-      type: Boolean,
-      default: false,
-    },
-    containerMinHeight: {
-      type: [String, Number],
-      default: "5rem",
-    },
-    editorMaxHeight: {
-      type: [String, Number],
-      default: "200px",
-    },
-  },
-  data() {
-    return {
-      editorInstance: null,
-      isRenderingTokens: false,
-      rootClickHandler: null,
-      pasteHandler: null,
-      renderedRawContent: "",
-      renderedHtmlContent: "",
-      lastSelectionRange: null,
-      selectionChangeHandler: null,
-      templateVariablesSignature: "",
-    };
-  },
-  watch: {
-    content: {
-      immediate: true,
-      handler(newValue) {
-        const normalized = newValue || "";
-        if (!this.editorInstance) return;
-        if (this.enableTokenChips) {
-          if (this.hasHtmlTags(normalized)) {
-            if (
-              normalized === this.renderedHtmlContent &&
-              !this.shouldRetokenizeHtml(normalized)
-            ) {
-              return;
-            }
-            this.renderTokensFromHtml(normalized);
-            return;
-          }
-          if (normalized === this.renderedRawContent) return;
-          this.renderTokensFromRaw(normalized);
-          return;
-        }
-        if (normalized === this.renderedHtmlContent) return;
-        this.renderHtmlContent(normalized);
-      },
-    },
-    tokenChipStyles: {
-      deep: true,
-      handler() {
-        if (!this.editorInstance || !this.enableTokenChips) return;
-        this.renderCurrentTokenContent();
-      },
-    },
-    tokenSeparator() {
-      if (!this.editorInstance || !this.enableTokenChips) return;
-      this.renderCurrentTokenContent();
-    },
-    templateVariables: {
-      deep: true,
-      handler(newValue) {
-        if (this.isRenderingTokens) return;
-        const nextSignature = this.buildTemplateVariablesSignature(newValue);
-        this.templateVariablesSignature = nextSignature;
-        if (!this.editorInstance || !this.enableTokenChips) return;
-        this.$nextTick(() => {
-          this.renderCurrentTokenContent();
-          this.$nextTick(() => this.refreshTokenNodes());
-        });
-      },
-    },
-    containerMinHeight() {
-      this.$nextTick(() => this.applyEditorHeights());
-    },
-    editorMaxHeight() {
-      this.$nextTick(() => this.applyEditorHeights());
-    },
-  },
-  methods: {
-    normalizeCssSize(value, fallback) {
-      if (value === null || value === undefined || value === "") {
-        return fallback;
-      }
-      if (typeof value === "number" || !isNaN(Number(value))) {
-        return `${value}px`;
-      }
-      return String(value);
-    },
-    buildTemplateVariablesSignature(variables = []) {
-      return (variables || [])
-        .map((item) => {
-          const value = item && item.value ? String(item.value) : "";
-          const label = item && item.label ? String(item.label) : "";
-          const group = item && item.group ? String(item.group) : "";
-          return `${value}|${label}|${group}`;
-        })
-        .sort()
-        .join("||");
-    },
-    hasHtmlTags(value) {
-      return /<(p|div|span|strong|em|u|s|ol|ul|li|h[1-6]|br|img|a)\b[^>]*>/i.test(value || "");
-    },
-    hasMustacheTokens(value) {
-      TOKEN_PATTERN.lastIndex = 0;
-      return TOKEN_PATTERN.test(value || "");
-    },
-    shouldRetokenizeHtml(htmlContent) {
-      if (!this.hasMustacheTokens(htmlContent)) {
-        return false;
-      }
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill || !quill.root) {
-        return false;
-      }
-      const tokenCount = quill.root.querySelectorAll("[data-token]").length;
-      return tokenCount === 0;
-    },
-    applyEditorHeights() {
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill) return;
-      quill.container.style.minHeight = this.normalizeCssSize(
-        this.containerMinHeight,
-        "5rem",
-      );
-      quill.root.style.maxHeight = this.normalizeCssSize(
-        this.editorMaxHeight,
-        "200px",
-      );
-    },
-    renderHtmlContent(htmlContent) {
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill) return;
-      this.isRenderingTokens = true;
-      const contentToRender = htmlContent || "";
-      const previousSelection = quill.getSelection() || this.lastSelectionRange;
-      quill.clipboard.dangerouslyPasteHTML(contentToRender, "silent");
-      const length = Math.max(quill.getLength() - 1, 0);
-      const nextIndex = previousSelection
-        ? Math.min(previousSelection.index, length)
-        : length;
-      quill.setSelection(nextIndex, 0, "silent");
-      this.lastSelectionRange = { index: nextIndex, length: 0 };
-      this.renderedHtmlContent = contentToRender;
-      this.renderedRawContent = this.extractRawText(quill);
-      this.isRenderingTokens = false;
-    },
-    renderCurrentTokenContent() {
-      const contentToRender =
-        this.content ||
-        this.renderedHtmlContent ||
-        this.renderedRawContent ||
-        "";
-      if (this.hasHtmlTags(contentToRender)) {
-        this.renderTokensFromHtml(contentToRender);
-        return;
-      }
-      this.renderTokensFromRaw(contentToRender);
-    },
-    renderTokensFromHtml(htmlContent) {
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill) return;
-
-      const contentToRender = htmlContent || "";
-      const previousSelection = quill.getSelection() || this.lastSelectionRange;
-      const converted = quill.clipboard.convert(contentToRender);
-      const nextDelta = new Delta();
-
-      (converted.ops || []).forEach((op) => {
-        if (typeof op.insert !== "string") {
-          nextDelta.push(op);
-          return;
-        }
-
-        TOKEN_PATTERN.lastIndex = 0;
-        const tokenRegex = TOKEN_PATTERN;
-        const text = op.insert;
-        let lastIndex = 0;
-        let match = null;
-
-        while ((match = tokenRegex.exec(text)) !== null) {
-          const plainText = text.slice(lastIndex, match.index);
-          if (plainText) {
-            nextDelta.insert(plainText, op.attributes || undefined);
-          }
-
-          const tokenKey = (match[1] || "").trim();
-          if (tokenKey) {
-            const isKnownToken = this.isKnownToken(tokenKey);
-            nextDelta.insert({
-              token: {
-                value: tokenKey,
-                label: this.getTokenLabel(tokenKey),
-                group: this.getTokenGroup(tokenKey),
-                style: this.getTokenStyleConfig({ isInvalid: !isKnownToken }),
-                separator: this.tokenSeparator,
-              },
-            });
-          } else {
-            nextDelta.insert(match[0], op.attributes || undefined);
-          }
-
-          lastIndex = tokenRegex.lastIndex;
-        }
-
-        const remainingText = text.slice(lastIndex);
-        if (remainingText) {
-          nextDelta.insert(remainingText, op.attributes || undefined);
-        }
-      });
-
-      this.isRenderingTokens = true;
-      try {
-        quill.setContents(nextDelta, "silent");
-
-        const length = Math.max(quill.getLength() - 1, 0);
-        const nextIndex = previousSelection
-          ? Math.min(previousSelection.index, length)
-          : length;
-        quill.setSelection(nextIndex, 0, "silent");
-        this.lastSelectionRange = { index: nextIndex, length: 0 };
-        this.renderedHtmlContent = contentToRender;
-        this.renderedRawContent = this.extractRawText(quill);
-      } finally {
-        this.isRenderingTokens = false;
-      }
-      this.$nextTick(() => this.refreshTokenNodes());
-    },
-    onChange(params) {
-      if (this.isRenderingTokens) return;
-      if (!this.enableTokenChips) {
-        const htmlText =
-          params && typeof params.html === "string" ? params.html : "";
-        this.renderedHtmlContent = htmlText;
-        this.renderedRawContent = htmlText;
-        this.$emit("input", htmlText);
-        this.$emit("update:content", htmlText);
-        this.$emit("onEditorChange", {
-          ...params,
-          rawText: this.extractRawText(params.quill),
-        });
-        return;
-      }
-      const rawText = this.extractRawText(params.quill);
-      const htmlText =
-        params && typeof params.html === "string" ? params.html : rawText;
-      this.renderedRawContent = rawText;
-      this.renderedHtmlContent = htmlText;
-      this.$emit("input", rawText);
-      this.$emit("update:content", rawText);
-      this.$emit("onEditorChange", { ...params, rawText });
-    },
-    onReady(params) {
-      this.editorInstance = params;
-      this.templateVariablesSignature = this.buildTemplateVariablesSignature(
-        this.templateVariables,
-      );
-      this.attachSelectionTracking();
-      this.attachTokenRemoveHandler();
-      this.attachPlainTextPasteHandler();
-      const initialContent = this.content || "";
-      if (this.enableTokenChips && !this.hasHtmlTags(initialContent)) {
-        this.renderTokensFromRaw(initialContent);
-      } else if (this.enableTokenChips) {
-        this.renderTokensFromHtml(initialContent);
-      } else {
-        this.renderHtmlContent(initialContent);
-      }
-      this.applyEditorHeights();
-      this.$emit("onEditorReady", params);
-    },
-    handleFocus() {
-      let quill = this.$refs.myQuillEditor.quill;
-      if (quill) {
-        this.$emit("handleFocus", quill);
-      }
-    },
-    onEditorBlur() {
-      this.$emit("onEditorBlur");
-    },
-    insertToken({ value, label, group }) {
-      if (!this.enableTokenChips) return;
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill || !value) return;
-
-      const selection = quill.getSelection(true) || this.lastSelectionRange;
-      const index = selection ? selection.index : quill.getLength();
-      quill.insertEmbed(
-        index,
-        "token",
-        {
-          value,
-          label: label || this.getTokenLabel(value),
-          group: group || this.getTokenGroup(value),
-          style: this.getTokenStyleConfig(),
-          separator: this.tokenSeparator,
-        },
-        "user",
-      );
-      quill.setSelection(index + 1, 0, "silent");
-      this.lastSelectionRange = { index: index + 1, length: 0 };
-    },
-    extractRawText(quill) {
-      if (!quill) return "";
-      const delta = quill.getContents();
-      const raw = (delta.ops || [])
-        .map((op) => {
-          if (typeof op.insert === "string") return op.insert;
-          if (op.insert && op.insert.token) {
-            return `{{${op.insert.token.value}}}`;
-          }
-          return "";
-        })
-        .join("");
-
-      return raw.endsWith("\n") ? raw.slice(0, -1) : raw;
-    },
-    renderTokensFromRaw(rawText) {
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill) return;
-
-      const source = rawText || "";
-      const previousSelection = quill.getSelection() || this.lastSelectionRange;
-      const tokenRegex = /\{\{([^{}]+)\}\}/g;
-      let currentIndex = 0;
-      let lastIndex = 0;
-      let match = null;
-
-      this.isRenderingTokens = true;
-      quill.setContents([], "silent");
-
-      while ((match = tokenRegex.exec(source)) !== null) {
-        const plainText = source.slice(lastIndex, match.index);
-        if (plainText) {
-          quill.insertText(currentIndex, plainText, "silent");
-          currentIndex += plainText.length;
-        }
-
-        const tokenKey = (match[1] || "").trim();
-        if (!tokenKey) {
-          quill.insertText(currentIndex, match[0], "silent");
-          currentIndex += match[0].length;
-          lastIndex = tokenRegex.lastIndex;
-          continue;
-        }
-        const isKnownToken = this.isKnownToken(tokenKey);
-        quill.insertEmbed(
-          currentIndex,
-          "token",
-          {
-            value: tokenKey,
-            label: this.getTokenLabel(tokenKey),
-            group: this.getTokenGroup(tokenKey),
-            style: this.getTokenStyleConfig({ isInvalid: !isKnownToken }),
-            separator: this.tokenSeparator,
-          },
-          "silent",
-        );
-        currentIndex += 1;
-        lastIndex = tokenRegex.lastIndex;
-      }
-
-      const remainingText = source.slice(lastIndex);
-      if (remainingText) {
-        quill.insertText(currentIndex, remainingText, "silent");
-        currentIndex += remainingText.length;
-      }
-
-      const nextIndex = previousSelection
-        ? Math.min(previousSelection.index, currentIndex)
-        : currentIndex;
-      quill.setSelection(nextIndex, 0, "silent");
-      this.lastSelectionRange = { index: nextIndex, length: 0 };
-      this.renderedRawContent = source;
-      this.renderedHtmlContent = quill.root.innerHTML;
-      this.isRenderingTokens = false;
-      this.$nextTick(() => this.refreshTokenNodes());
-    },
-    attachSelectionTracking() {
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill || this.selectionChangeHandler) return;
-      this.selectionChangeHandler = (range) => {
-        if (range) {
-          this.lastSelectionRange = range;
-        }
-      };
-      quill.on("selection-change", this.selectionChangeHandler);
-    },
-    attachPlainTextPasteHandler() {
-      if (!this.enableTokenChips) return;
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill || this.pasteHandler) return;
-      this.pasteHandler = (event) => {
-        const clipboardText =
-          event.clipboardData && event.clipboardData.getData("text/plain");
-        if (typeof clipboardText !== "string") return;
-        event.preventDefault();
-        const selection = quill.getSelection(true) || this.lastSelectionRange;
-        const index = selection ? selection.index : quill.getLength();
-        const length = selection ? selection.length || 0 : 0;
-
-        const pasteDelta = new Delta().retain(index);
-        if (length > 0) {
-          pasteDelta.delete(length);
-        }
-
-        TOKEN_PATTERN.lastIndex = 0;
-        const tokenRegex = TOKEN_PATTERN;
-        let lastIndex = 0;
-        let match = null;
-        let insertedLength = 0;
-
-        while ((match = tokenRegex.exec(clipboardText)) !== null) {
-          const plainText = clipboardText.slice(lastIndex, match.index);
-          if (plainText) {
-            pasteDelta.insert(plainText);
-            insertedLength += plainText.length;
-          }
-          const tokenKey = (match[1] || "").trim();
-          if (tokenKey) {
-            const isKnownToken = this.isKnownToken(tokenKey);
-            pasteDelta.insert({
-              token: {
-                value: tokenKey,
-                label: this.getTokenLabel(tokenKey),
-                group: this.getTokenGroup(tokenKey),
-                style: this.getTokenStyleConfig({ isInvalid: !isKnownToken }),
-                separator: this.tokenSeparator,
-              },
-            });
-            insertedLength += 1;
-          } else {
-            pasteDelta.insert(match[0]);
-            insertedLength += match[0].length;
-          }
-          lastIndex = tokenRegex.lastIndex;
-        }
-
-        const remainingText = clipboardText.slice(lastIndex);
-        if (remainingText) {
-          pasteDelta.insert(remainingText);
-          insertedLength += remainingText.length;
-        }
-
-        quill.updateContents(pasteDelta, "user");
-        const nextIndex = index + insertedLength;
-        quill.setSelection(nextIndex, 0, "silent");
-        this.lastSelectionRange = {
-          index: nextIndex,
-          length: 0,
-        };
-      };
-      quill.root.addEventListener("paste", this.pasteHandler);
-    },
-    getTokenLabel(key) {
-      const variable = this.templateVariablesMap.get(key);
-      return variable && variable.label ? variable.label : key;
-    },
-    getTokenGroup(key) {
-      const variable = this.templateVariablesMap.get(key);
-      return variable && variable.group ? variable.group : "Variable";
-    },
-    isKnownToken(key) {
-      return this.templateVariablesMap.has(key);
-    },
-    getTokenStyleConfig({ isInvalid = false } = {}) {
-      const baseStyle = isInvalid ? INVALID_TOKEN_STYLE : DEFAULT_TOKEN_STYLE;
-      return {
-        ...baseStyle,
-        ...this.tokenChipStyles,
-      };
-    },
-    refreshTokenNodes() {
-      if (!this.enableTokenChips) return;
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill || !quill.root) return;
-      const tokenNodes = quill.root.querySelectorAll("[data-token]");
-      tokenNodes.forEach((node) => {
-        const value = (node.getAttribute("data-token") || "").trim();
-        if (!value) return;
-        const variable = (this.templateVariables || []).find(
-          (item) => item.value === value,
-        );
-        const isInvalid = !variable;
-        const separator =
-          node.getAttribute("data-separator") || this.tokenSeparator;
-        const group =
-          (variable && variable.group) ||
-          node.getAttribute("data-group") ||
-          "Variable";
-        const label =
-          (variable && variable.label) ||
-          node.getAttribute("data-label") ||
-          value;
-        const tokenStyle = this.getTokenStyleConfig({ isInvalid });
-
-        node.setAttribute("data-label", label);
-        node.setAttribute("data-group", group);
-        node.setAttribute("data-separator", separator);
-        node.setAttribute("data-token-style", JSON.stringify(tokenStyle));
-
-        node.innerHTML = "";
-        node.appendChild(
-          createTokenChipContent({
-            tokenStyle,
-            tokenGroup: group,
-            tokenSeparator: separator,
-            tokenLabel: label,
-          }),
-        );
-      });
-    },
-    attachTokenRemoveHandler() {
-      if (!this.enableTokenChips) return;
-      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-      if (!quill || this.rootClickHandler) return;
-
-      this.rootClickHandler = (event) => {
-        const removeTarget = event.target.closest("[data-token-remove='true']");
-        if (!removeTarget) return;
-        event.preventDefault();
-        event.stopPropagation();
-
-        const tokenNode = removeTarget.closest("[data-token]");
-        if (!tokenNode) return;
-
-        const blot = Quill.find(tokenNode);
-        if (!blot) return;
-
-        const index = quill.getIndex(blot);
-        quill.deleteText(index, 1, "user");
-      };
-
-      quill.root.addEventListener("click", this.rootClickHandler);
-    },
-  },
-  beforeDestroy() {
-    this.isRenderingTokens = false;
-    const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
-    if (quill && this.rootClickHandler) {
-      quill.root.removeEventListener("click", this.rootClickHandler);
-    }
-    if (quill && this.pasteHandler) {
-      quill.root.removeEventListener("paste", this.pasteHandler);
-    }
-    if (quill && this.selectionChangeHandler) {
-      quill.off("selection-change", this.selectionChangeHandler);
-    }
-  },
-  computed: {
-    templateVariablesMap() {
-      const map = new Map();
-      (this.templateVariables || []).forEach((v) => {
-        if (v && v.value) map.set(v.value, v);
-      });
-      return map;
-    },
-    editorOption() {
-      const hasToolbar =
-        Array.isArray(this.toolbarOptions) && this.toolbarOptions.length > 0;
-      return {
-        modules: {
-          toolbar: hasToolbar
-            ? {
-                container: this.toolbarOptions,
-              }
-            : false,
-        },
-        placeholder: this.placeholder,
-      };
-    },
-  },
-};
-</script>
-<style>
-.ql-toolbar.ql-snow {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
-}
-
-.ql-container.ql-snow {
-  border-bottom-left-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-  min-height: var(--test-editor-container-min-height, 5rem);
-}
-
-.ql-editor {
-  @apply text-sm text-gray-900;
-  max-height: var(--test-editor-max-height, 200px);
-}
-.ql-editor.ql-blank::before {
-  @apply not-italic text-gray-500;
-}
-</style>
+<template>
+  <div class="text-sm">
+    <div v-if="label || hint" class="flex justify-between">
+      <p v-if="label" class="font-medium text-gray-900">{{ label }}</p>
+      <p v-if="hint" class="text-gray-500">{{ hint }}</p>
+    </div>
+    <quill-editor
+      ref="myQuillEditor"
+      :class="`mt-1 rounded-md bg-white ${
+        disabled ? 'cursor-not-allowed opacity-50' : ''
+      } shadow-sm`"
+      :value="content"
+      :options="editorOption"
+      :id="id"
+      @change="onChange($event)"
+      @ready="onReady($event)"
+      @focus="handleFocus"
+      @blur="onEditorBlur"
+      :disabled="disabled"
+    ></quill-editor>
+    <p v-if="helpText" class="mt-2 text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+<script>
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor } from "vue-quill-editor";
+import Quill from "quill";
+
+const Embed = Quill.import("blots/embed");
+const Delta = Quill.import("delta");
+const TOKEN_PATTERN = /\{\{([^{}]+)\}\}/g;
+const DEFAULT_TOKEN_STYLE = {
+  wrapper:
+    "inline-flex overflow-hidden rounded-md border border-gray-200 text-sm leading-5",
+  group: "p-1 text-sm text-gray-500 bg-gray-50",
+  separator: "bg-white py-1 pr-1 text-sm text-gray-400 bg-gray-50",
+  label: "bg-indigo-50 px-2 py-1 text-sm text-indigo-600",
+  remove: "token-remove bg-indigo-50 py-1 pr-2 text-indigo-600",
+};
+const INVALID_TOKEN_STYLE = {
+  wrapper:
+    "inline-flex overflow-hidden rounded-md border border-red-300 text-sm leading-5",
+  group: "p-1 text-sm text-gray-500 bg-gray-50",
+  separator: "bg-white py-1 pr-1 text-sm text-gray-400 bg-gray-50",
+  label: "bg-red-50 px-2 py-1 text-sm text-red-600",
+  remove: "token-remove bg-red-50 py-1 pr-2 text-red-600",
+};
+
+function createTokenChipContent({
+  tokenStyle,
+  tokenGroup,
+  tokenSeparator,
+  tokenLabel,
+}) {
+  const wrapper = document.createElement("span");
+  wrapper.className = tokenStyle.wrapper;
+
+  const groupEl = document.createElement("span");
+  groupEl.className = tokenStyle.group;
+  groupEl.textContent = tokenGroup;
+
+  const separatorEl = document.createElement("span");
+  separatorEl.className = tokenStyle.separator;
+  separatorEl.textContent = tokenSeparator;
+
+  const labelEl = document.createElement("span");
+  labelEl.className = tokenStyle.label;
+  labelEl.textContent = tokenLabel;
+
+  const removeBtn = document.createElement("button");
+  removeBtn.type = "button";
+  removeBtn.className = tokenStyle.remove;
+  removeBtn.setAttribute("data-token-remove", "true");
+  removeBtn.setAttribute("aria-label", "Remove token");
+  removeBtn.textContent = "✕";
+
+  wrapper.appendChild(groupEl);
+  wrapper.appendChild(separatorEl);
+  wrapper.appendChild(labelEl);
+  wrapper.appendChild(removeBtn);
+
+  return wrapper;
+}
+
+class TokenBlot extends Embed {
+  static create(value) {
+    const node = super.create();
+    let tokenValue = "";
+    let tokenLabel = "";
+    let tokenGroup = "Variable";
+    let tokenSeparator = "→";
+    let tokenStyle = { ...DEFAULT_TOKEN_STYLE };
+
+    if (typeof value === "string") {
+      tokenValue = value;
+      tokenLabel = value;
+    } else if (value && typeof value === "object") {
+      tokenValue = value.value || "";
+      tokenLabel = value.label || tokenValue;
+      tokenGroup = value.group || "Variable";
+      tokenSeparator = value.separator || "→";
+      if (value.style) {
+        tokenStyle = { ...tokenStyle, ...value.style };
+      }
+    }
+
+    node.setAttribute("contenteditable", "false");
+    node.setAttribute("data-token", tokenValue);
+    node.setAttribute("data-label", tokenLabel);
+    node.setAttribute("data-group", tokenGroup);
+    node.setAttribute("data-separator", tokenSeparator);
+    node.setAttribute("data-token-style", JSON.stringify(tokenStyle));
+    node.className = "ql-token-chip inline-flex align-middle";
+    node.appendChild(
+      createTokenChipContent({
+        tokenStyle,
+        tokenGroup,
+        tokenSeparator,
+        tokenLabel,
+      }),
+    );
+    return node;
+  }
+
+  static value(node) {
+    let tokenStyle = {};
+    const styleAttr = node.getAttribute("data-token-style");
+    if (styleAttr) {
+      try {
+        const parsed = JSON.parse(styleAttr);
+        if (parsed && typeof parsed === "object") {
+          tokenStyle = parsed;
+        }
+      } catch (error) {
+        tokenStyle = {};
+      }
+    }
+    return {
+      value: node.getAttribute("data-token") || "",
+      label: node.getAttribute("data-label") || "",
+      group: node.getAttribute("data-group") || "",
+      separator: node.getAttribute("data-separator") || "→",
+      style: tokenStyle,
+    };
+  }
+}
+
+TokenBlot.blotName = "token";
+TokenBlot.tagName = "span";
+// Scope the blot to spans carrying the token marker class. Without this, the
+// blot matches EVERY <span> (Quill registers globally by tagName), so plain
+// spans in other editors (e.g. CEditor content) get swallowed and rendered as
+// generic "Variable →" chips.
+TokenBlot.className = "ql-token-chip";
+
+const existingTokenFormat = Quill.import("formats/token");
+if (!existingTokenFormat || typeof existingTokenFormat.create !== "function") {
+  Quill.register({ "formats/token": TokenBlot }, true);
+}
+export default {
+  name: "CTokenEditor",
+  components: { quillEditor },
+  props: {
+    id: {
+      type: String,
+    },
+    content: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    hint: {
+      type: String,
+    },
+    helpText: {
+      type: String,
+    },
+    toolbarOptions: {
+      type: Array,
+    },
+    onEditorChange: {
+      type: Function,
+    },
+    placeholder: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    templateVariables: {
+      type: Array,
+      default: () => [],
+    },
+    tokenChipStyles: {
+      type: Object,
+      default: () => ({}),
+    },
+    tokenSeparator: {
+      type: String,
+      default: "→",
+    },
+    enableTokenChips: {
+      type: Boolean,
+      default: false,
+    },
+    containerMinHeight: {
+      type: [String, Number],
+      default: "5rem",
+    },
+    editorMaxHeight: {
+      type: [String, Number],
+      default: "200px",
+    },
+  },
+  data() {
+    return {
+      editorInstance: null,
+      isRenderingTokens: false,
+      rootClickHandler: null,
+      pasteHandler: null,
+      renderedRawContent: "",
+      renderedHtmlContent: "",
+      lastSelectionRange: null,
+      selectionChangeHandler: null,
+      templateVariablesSignature: "",
+    };
+  },
+  watch: {
+    content: {
+      immediate: true,
+      handler(newValue) {
+        const normalized = newValue || "";
+        if (!this.editorInstance) return;
+        if (this.enableTokenChips) {
+          if (this.hasHtmlTags(normalized)) {
+            if (
+              normalized === this.renderedHtmlContent &&
+              !this.shouldRetokenizeHtml(normalized)
+            ) {
+              return;
+            }
+            this.renderTokensFromHtml(normalized);
+            return;
+          }
+          if (normalized === this.renderedRawContent) return;
+          this.renderTokensFromRaw(normalized);
+          return;
+        }
+        if (normalized === this.renderedHtmlContent) return;
+        this.renderHtmlContent(normalized);
+      },
+    },
+    tokenChipStyles: {
+      deep: true,
+      handler() {
+        if (!this.editorInstance || !this.enableTokenChips) return;
+        this.renderCurrentTokenContent();
+      },
+    },
+    tokenSeparator() {
+      if (!this.editorInstance || !this.enableTokenChips) return;
+      this.renderCurrentTokenContent();
+    },
+    templateVariables: {
+      deep: true,
+      handler(newValue) {
+        if (this.isRenderingTokens) return;
+        const nextSignature = this.buildTemplateVariablesSignature(newValue);
+        this.templateVariablesSignature = nextSignature;
+        if (!this.editorInstance || !this.enableTokenChips) return;
+        this.$nextTick(() => {
+          this.renderCurrentTokenContent();
+          this.$nextTick(() => this.refreshTokenNodes());
+        });
+      },
+    },
+    containerMinHeight() {
+      this.$nextTick(() => this.applyEditorHeights());
+    },
+    editorMaxHeight() {
+      this.$nextTick(() => this.applyEditorHeights());
+    },
+  },
+  methods: {
+    normalizeCssSize(value, fallback) {
+      if (value === null || value === undefined || value === "") {
+        return fallback;
+      }
+      if (typeof value === "number" || !isNaN(Number(value))) {
+        return `${value}px`;
+      }
+      return String(value);
+    },
+    buildTemplateVariablesSignature(variables = []) {
+      return (variables || [])
+        .map((item) => {
+          const value = item && item.value ? String(item.value) : "";
+          const label = item && item.label ? String(item.label) : "";
+          const group = item && item.group ? String(item.group) : "";
+          return `${value}|${label}|${group}`;
+        })
+        .sort()
+        .join("||");
+    },
+    hasHtmlTags(value) {
+      return /<(p|div|span|strong|em|u|s|ol|ul|li|h[1-6]|br|img|a)\b[^>]*>/i.test(value || "");
+    },
+    hasMustacheTokens(value) {
+      TOKEN_PATTERN.lastIndex = 0;
+      return TOKEN_PATTERN.test(value || "");
+    },
+    shouldRetokenizeHtml(htmlContent) {
+      if (!this.hasMustacheTokens(htmlContent)) {
+        return false;
+      }
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill || !quill.root) {
+        return false;
+      }
+      const tokenCount = quill.root.querySelectorAll("[data-token]").length;
+      return tokenCount === 0;
+    },
+    applyEditorHeights() {
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill) return;
+      quill.container.style.minHeight = this.normalizeCssSize(
+        this.containerMinHeight,
+        "5rem",
+      );
+      quill.root.style.maxHeight = this.normalizeCssSize(
+        this.editorMaxHeight,
+        "200px",
+      );
+    },
+    renderHtmlContent(htmlContent) {
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill) return;
+      this.isRenderingTokens = true;
+      const contentToRender = htmlContent || "";
+      const previousSelection = quill.getSelection() || this.lastSelectionRange;
+      quill.clipboard.dangerouslyPasteHTML(contentToRender, "silent");
+      const length = Math.max(quill.getLength() - 1, 0);
+      const nextIndex = previousSelection
+        ? Math.min(previousSelection.index, length)
+        : length;
+      quill.setSelection(nextIndex, 0, "silent");
+      this.lastSelectionRange = { index: nextIndex, length: 0 };
+      this.renderedHtmlContent = contentToRender;
+      this.renderedRawContent = this.extractRawText(quill);
+      this.isRenderingTokens = false;
+    },
+    renderCurrentTokenContent() {
+      const contentToRender =
+        this.content ||
+        this.renderedHtmlContent ||
+        this.renderedRawContent ||
+        "";
+      if (this.hasHtmlTags(contentToRender)) {
+        this.renderTokensFromHtml(contentToRender);
+        return;
+      }
+      this.renderTokensFromRaw(contentToRender);
+    },
+    renderTokensFromHtml(htmlContent) {
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill) return;
+
+      const contentToRender = htmlContent || "";
+      const previousSelection = quill.getSelection() || this.lastSelectionRange;
+      const converted = quill.clipboard.convert(contentToRender);
+      const nextDelta = new Delta();
+
+      (converted.ops || []).forEach((op) => {
+        if (typeof op.insert !== "string") {
+          nextDelta.push(op);
+          return;
+        }
+
+        TOKEN_PATTERN.lastIndex = 0;
+        const tokenRegex = TOKEN_PATTERN;
+        const text = op.insert;
+        let lastIndex = 0;
+        let match = null;
+
+        while ((match = tokenRegex.exec(text)) !== null) {
+          const plainText = text.slice(lastIndex, match.index);
+          if (plainText) {
+            nextDelta.insert(plainText, op.attributes || undefined);
+          }
+
+          const tokenKey = (match[1] || "").trim();
+          if (tokenKey) {
+            const isKnownToken = this.isKnownToken(tokenKey);
+            nextDelta.insert({
+              token: {
+                value: tokenKey,
+                label: this.getTokenLabel(tokenKey),
+                group: this.getTokenGroup(tokenKey),
+                style: this.getTokenStyleConfig({ isInvalid: !isKnownToken }),
+                separator: this.tokenSeparator,
+              },
+            });
+          } else {
+            nextDelta.insert(match[0], op.attributes || undefined);
+          }
+
+          lastIndex = tokenRegex.lastIndex;
+        }
+
+        const remainingText = text.slice(lastIndex);
+        if (remainingText) {
+          nextDelta.insert(remainingText, op.attributes || undefined);
+        }
+      });
+
+      this.isRenderingTokens = true;
+      try {
+        quill.setContents(nextDelta, "silent");
+
+        const length = Math.max(quill.getLength() - 1, 0);
+        const nextIndex = previousSelection
+          ? Math.min(previousSelection.index, length)
+          : length;
+        quill.setSelection(nextIndex, 0, "silent");
+        this.lastSelectionRange = { index: nextIndex, length: 0 };
+        this.renderedHtmlContent = contentToRender;
+        this.renderedRawContent = this.extractRawText(quill);
+      } finally {
+        this.isRenderingTokens = false;
+      }
+      this.$nextTick(() => this.refreshTokenNodes());
+    },
+    onChange(params) {
+      if (this.isRenderingTokens) return;
+      if (!this.enableTokenChips) {
+        const htmlText =
+          params && typeof params.html === "string" ? params.html : "";
+        this.renderedHtmlContent = htmlText;
+        this.renderedRawContent = htmlText;
+        this.$emit("input", htmlText);
+        this.$emit("update:content", htmlText);
+        this.$emit("onEditorChange", {
+          ...params,
+          rawText: this.extractRawText(params.quill),
+        });
+        return;
+      }
+      const rawText = this.extractRawText(params.quill);
+      const htmlText =
+        params && typeof params.html === "string" ? params.html : rawText;
+      this.renderedRawContent = rawText;
+      this.renderedHtmlContent = htmlText;
+      this.$emit("input", rawText);
+      this.$emit("update:content", rawText);
+      this.$emit("onEditorChange", { ...params, rawText });
+    },
+    onReady(params) {
+      this.editorInstance = params;
+      this.templateVariablesSignature = this.buildTemplateVariablesSignature(
+        this.templateVariables,
+      );
+      this.attachSelectionTracking();
+      this.attachTokenRemoveHandler();
+      this.attachPlainTextPasteHandler();
+      const initialContent = this.content || "";
+      if (this.enableTokenChips && !this.hasHtmlTags(initialContent)) {
+        this.renderTokensFromRaw(initialContent);
+      } else if (this.enableTokenChips) {
+        this.renderTokensFromHtml(initialContent);
+      } else {
+        this.renderHtmlContent(initialContent);
+      }
+      this.applyEditorHeights();
+      this.$emit("onEditorReady", params);
+    },
+    handleFocus() {
+      let quill = this.$refs.myQuillEditor.quill;
+      if (quill) {
+        this.$emit("handleFocus", quill);
+      }
+    },
+    onEditorBlur() {
+      this.$emit("onEditorBlur");
+    },
+    insertToken({ value, label, group }) {
+      if (!this.enableTokenChips) return;
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill || !value) return;
+
+      const selection = quill.getSelection(true) || this.lastSelectionRange;
+      const index = selection ? selection.index : quill.getLength();
+      quill.insertEmbed(
+        index,
+        "token",
+        {
+          value,
+          label: label || this.getTokenLabel(value),
+          group: group || this.getTokenGroup(value),
+          style: this.getTokenStyleConfig(),
+          separator: this.tokenSeparator,
+        },
+        "user",
+      );
+      quill.setSelection(index + 1, 0, "silent");
+      this.lastSelectionRange = { index: index + 1, length: 0 };
+    },
+    extractRawText(quill) {
+      if (!quill) return "";
+      const delta = quill.getContents();
+      const raw = (delta.ops || [])
+        .map((op) => {
+          if (typeof op.insert === "string") return op.insert;
+          if (op.insert && op.insert.token) {
+            return `{{${op.insert.token.value}}}`;
+          }
+          return "";
+        })
+        .join("");
+
+      return raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+    },
+    renderTokensFromRaw(rawText) {
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill) return;
+
+      const source = rawText || "";
+      const previousSelection = quill.getSelection() || this.lastSelectionRange;
+      const tokenRegex = /\{\{([^{}]+)\}\}/g;
+      let currentIndex = 0;
+      let lastIndex = 0;
+      let match = null;
+
+      this.isRenderingTokens = true;
+      quill.setContents([], "silent");
+
+      while ((match = tokenRegex.exec(source)) !== null) {
+        const plainText = source.slice(lastIndex, match.index);
+        if (plainText) {
+          quill.insertText(currentIndex, plainText, "silent");
+          currentIndex += plainText.length;
+        }
+
+        const tokenKey = (match[1] || "").trim();
+        if (!tokenKey) {
+          quill.insertText(currentIndex, match[0], "silent");
+          currentIndex += match[0].length;
+          lastIndex = tokenRegex.lastIndex;
+          continue;
+        }
+        const isKnownToken = this.isKnownToken(tokenKey);
+        quill.insertEmbed(
+          currentIndex,
+          "token",
+          {
+            value: tokenKey,
+            label: this.getTokenLabel(tokenKey),
+            group: this.getTokenGroup(tokenKey),
+            style: this.getTokenStyleConfig({ isInvalid: !isKnownToken }),
+            separator: this.tokenSeparator,
+          },
+          "silent",
+        );
+        currentIndex += 1;
+        lastIndex = tokenRegex.lastIndex;
+      }
+
+      const remainingText = source.slice(lastIndex);
+      if (remainingText) {
+        quill.insertText(currentIndex, remainingText, "silent");
+        currentIndex += remainingText.length;
+      }
+
+      const nextIndex = previousSelection
+        ? Math.min(previousSelection.index, currentIndex)
+        : currentIndex;
+      quill.setSelection(nextIndex, 0, "silent");
+      this.lastSelectionRange = { index: nextIndex, length: 0 };
+      this.renderedRawContent = source;
+      this.renderedHtmlContent = quill.root.innerHTML;
+      this.isRenderingTokens = false;
+      this.$nextTick(() => this.refreshTokenNodes());
+    },
+    attachSelectionTracking() {
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill || this.selectionChangeHandler) return;
+      this.selectionChangeHandler = (range) => {
+        if (range) {
+          this.lastSelectionRange = range;
+        }
+      };
+      quill.on("selection-change", this.selectionChangeHandler);
+    },
+    attachPlainTextPasteHandler() {
+      if (!this.enableTokenChips) return;
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill || this.pasteHandler) return;
+      this.pasteHandler = (event) => {
+        const clipboardText =
+          event.clipboardData && event.clipboardData.getData("text/plain");
+        if (typeof clipboardText !== "string") return;
+        event.preventDefault();
+        const selection = quill.getSelection(true) || this.lastSelectionRange;
+        const index = selection ? selection.index : quill.getLength();
+        const length = selection ? selection.length || 0 : 0;
+
+        const pasteDelta = new Delta().retain(index);
+        if (length > 0) {
+          pasteDelta.delete(length);
+        }
+
+        TOKEN_PATTERN.lastIndex = 0;
+        const tokenRegex = TOKEN_PATTERN;
+        let lastIndex = 0;
+        let match = null;
+        let insertedLength = 0;
+
+        while ((match = tokenRegex.exec(clipboardText)) !== null) {
+          const plainText = clipboardText.slice(lastIndex, match.index);
+          if (plainText) {
+            pasteDelta.insert(plainText);
+            insertedLength += plainText.length;
+          }
+          const tokenKey = (match[1] || "").trim();
+          if (tokenKey) {
+            const isKnownToken = this.isKnownToken(tokenKey);
+            pasteDelta.insert({
+              token: {
+                value: tokenKey,
+                label: this.getTokenLabel(tokenKey),
+                group: this.getTokenGroup(tokenKey),
+                style: this.getTokenStyleConfig({ isInvalid: !isKnownToken }),
+                separator: this.tokenSeparator,
+              },
+            });
+            insertedLength += 1;
+          } else {
+            pasteDelta.insert(match[0]);
+            insertedLength += match[0].length;
+          }
+          lastIndex = tokenRegex.lastIndex;
+        }
+
+        const remainingText = clipboardText.slice(lastIndex);
+        if (remainingText) {
+          pasteDelta.insert(remainingText);
+          insertedLength += remainingText.length;
+        }
+
+        quill.updateContents(pasteDelta, "user");
+        const nextIndex = index + insertedLength;
+        quill.setSelection(nextIndex, 0, "silent");
+        this.lastSelectionRange = {
+          index: nextIndex,
+          length: 0,
+        };
+      };
+      quill.root.addEventListener("paste", this.pasteHandler);
+    },
+    getTokenLabel(key) {
+      const variable = this.templateVariablesMap.get(key);
+      return variable && variable.label ? variable.label : key;
+    },
+    getTokenGroup(key) {
+      const variable = this.templateVariablesMap.get(key);
+      return variable && variable.group ? variable.group : "Variable";
+    },
+    isKnownToken(key) {
+      return this.templateVariablesMap.has(key);
+    },
+    getTokenStyleConfig({ isInvalid = false } = {}) {
+      const baseStyle = isInvalid ? INVALID_TOKEN_STYLE : DEFAULT_TOKEN_STYLE;
+      return {
+        ...baseStyle,
+        ...this.tokenChipStyles,
+      };
+    },
+    refreshTokenNodes() {
+      if (!this.enableTokenChips) return;
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill || !quill.root) return;
+      const tokenNodes = quill.root.querySelectorAll("[data-token]");
+      tokenNodes.forEach((node) => {
+        const value = (node.getAttribute("data-token") || "").trim();
+        if (!value) return;
+        const variable = (this.templateVariables || []).find(
+          (item) => item.value === value,
+        );
+        const isInvalid = !variable;
+        const separator =
+          node.getAttribute("data-separator") || this.tokenSeparator;
+        const group =
+          (variable && variable.group) ||
+          node.getAttribute("data-group") ||
+          "Variable";
+        const label =
+          (variable && variable.label) ||
+          node.getAttribute("data-label") ||
+          value;
+        const tokenStyle = this.getTokenStyleConfig({ isInvalid });
+
+        node.setAttribute("data-label", label);
+        node.setAttribute("data-group", group);
+        node.setAttribute("data-separator", separator);
+        node.setAttribute("data-token-style", JSON.stringify(tokenStyle));
+
+        node.innerHTML = "";
+        node.appendChild(
+          createTokenChipContent({
+            tokenStyle,
+            tokenGroup: group,
+            tokenSeparator: separator,
+            tokenLabel: label,
+          }),
+        );
+      });
+    },
+    attachTokenRemoveHandler() {
+      if (!this.enableTokenChips) return;
+      const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+      if (!quill || this.rootClickHandler) return;
+
+      this.rootClickHandler = (event) => {
+        const removeTarget = event.target.closest("[data-token-remove='true']");
+        if (!removeTarget) return;
+        event.preventDefault();
+        event.stopPropagation();
+
+        const tokenNode = removeTarget.closest("[data-token]");
+        if (!tokenNode) return;
+
+        const blot = Quill.find(tokenNode);
+        if (!blot) return;
+
+        const index = quill.getIndex(blot);
+        quill.deleteText(index, 1, "user");
+      };
+
+      quill.root.addEventListener("click", this.rootClickHandler);
+    },
+  },
+  beforeDestroy() {
+    this.isRenderingTokens = false;
+    const quill = this.$refs.myQuillEditor && this.$refs.myQuillEditor.quill;
+    if (quill && this.rootClickHandler) {
+      quill.root.removeEventListener("click", this.rootClickHandler);
+    }
+    if (quill && this.pasteHandler) {
+      quill.root.removeEventListener("paste", this.pasteHandler);
+    }
+    if (quill && this.selectionChangeHandler) {
+      quill.off("selection-change", this.selectionChangeHandler);
+    }
+  },
+  computed: {
+    templateVariablesMap() {
+      const map = new Map();
+      (this.templateVariables || []).forEach((v) => {
+        if (v && v.value) map.set(v.value, v);
+      });
+      return map;
+    },
+    editorOption() {
+      const hasToolbar =
+        Array.isArray(this.toolbarOptions) && this.toolbarOptions.length > 0;
+      return {
+        modules: {
+          toolbar: hasToolbar
+            ? {
+                container: this.toolbarOptions,
+              }
+            : false,
+        },
+        placeholder: this.placeholder,
+      };
+    },
+  },
+};
+</script>
+<style>
+.ql-toolbar.ql-snow {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
+.ql-container.ql-snow {
+  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  min-height: var(--test-editor-container-min-height, 5rem);
+}
+
+.ql-editor {
+  @apply text-sm text-gray-900;
+  max-height: var(--test-editor-max-height, 200px);
+}
+.ql-editor.ql-blank::before {
+  @apply not-italic text-gray-500;
+}
+</style>