@techie_doubts/editor-plugin-chart 3.0.1 → 3.1.0

package/dist/td-editor-plugin-chart.js

@@ -1,6 +1,6 @@
 /*!
  * TOAST UI Editor : Chart Plugin
- * @version 3.0.1 | Sat Feb 21 2026
+ * @version 3.1.0 | Sat Feb 28 2026
  * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  * @license MIT
  */
@@ -6449,6 +6449,7 @@ var DEFAULT_DIMENSION_OPTIONS = {
 };
 var FALLBACK_CONTAINER_WIDTH = 600;
 var RESERVED_KEYS = ['type', 'url'];
+var TOOLTIP_FRACTION_DIGITS = 2;
 var chart = {
     bar: (tui_chart_2026_root_toastui_Chart_default()).barChart,
     column: (tui_chart_2026_root_toastui_Chart_default()).columnChart,
@@ -6458,6 +6459,7 @@ var chart = {
 };
 var chartMap = {};
 var effectiveDarkMode = null;
+var chartStyleInjected = false;
 var DARK_CHART_THEME = {
     chart: { backgroundColor: '#1a1a1a' },
     title: { color: '#e0e0e0' },
@@ -6483,6 +6485,16 @@ var DARK_CHART_THEME = {
         body: { color: '#d1d5db' },
     },
 };
+function ensureChartStyles() {
+    if (chartStyleInjected || typeof document === 'undefined') {
+        return;
+    }
+    var style = document.createElement('style');
+    style.setAttribute('data-toastui-chart-plugin', '1');
+    style.textContent = "\n.toastui-chart-block {\n  text-align: center;\n}\n\n.toastui-chart-block > * {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.toastui-chart-block svg,\n.toastui-chart-block canvas {\n  max-width: 100%;\n}\n  ".trim();
+    document.head.appendChild(style);
+    chartStyleInjected = true;
+}
 function parse(text, callback) {
     var _a;
     text = trimKeepingTabs(text);
@@ -6644,11 +6656,331 @@ function getChartDimension(chartOptions, pluginOptions, chartContainer) {
         height: clamp(height, minHeight, maxHeight),
     };
 }
-function setDefaultOptions(chartOptions, pluginOptions, chartContainer) {
+function isPlainObject(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function mergeChartOptions(baseOptions, overrideOptions) {
+    var base = isPlainObject(baseOptions) ? baseOptions : {};
+    var override = isPlainObject(overrideOptions) ? overrideOptions : {};
+    var merged = __assign({}, base);
+    Object.keys(override).forEach(function (key) {
+        var baseValue = merged[key];
+        var overrideValue = override[key];
+        merged[key] =
+            isPlainObject(baseValue) && isPlainObject(overrideValue)
+                ? mergeChartOptions(baseValue, overrideValue)
+                : overrideValue;
+    });
+    return merged;
+}
+function getPluginChartOptions(pluginOptions) {
+    var chartOptions = pluginOptions.chartOptions;
+    return isPlainObject(chartOptions) ? chartOptions : {};
+}
+function normalizeSeriesStyleKey(value) {
+    var normalized = typeof value.normalize === 'function' ? value.normalize('NFKC') : value;
+    return normalized
+        .replace(/\uFEFF/g, '')
+        .trim()
+        .replace(/^['"]|['"]$/g, '')
+        .trim()
+        .replace(/\s+/g, ' ')
+        .toLowerCase();
+}
+function assignSeriesStyleByIndex(chartOptions, chartData) {
+    if (!chartData || !isPlainObject(chartOptions.series)) {
+        return;
+    }
+    var seriesOptions = chartOptions.series;
+    if (!isPlainObject(seriesOptions.styles)) {
+        return;
+    }
+    var styles = seriesOptions.styles;
+    var indexBySeriesName = new Map();
+    chartData.series.forEach(function (seriesItem, seriesIndex) {
+        if (typeof (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.name) === 'string' && seriesItem.name.trim()) {
+            indexBySeriesName.set(normalizeSeriesStyleKey(seriesItem.name), seriesIndex);
+        }
+    });
+    Object.keys(styles).forEach(function (styleKey) {
+        if (/^\d+$/.test(styleKey.trim())) {
+            return;
+        }
+        var seriesIndex = indexBySeriesName.get(normalizeSeriesStyleKey(styleKey));
+        if (typeof seriesIndex !== 'number') {
+            return;
+        }
+        var indexKey = String(seriesIndex);
+        if (typeof styles[indexKey] === 'undefined') {
+            styles[indexKey] = styles[styleKey];
+        }
+    });
+}
+function escapeHTML(value) {
+    return String(value !== null && value !== void 0 ? value : '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function isNil(value) {
+    return value === null || typeof value === 'undefined';
+}
+function isThousandsOptions(value) {
+    return (isPlainObject(value) &&
+        typeof value.mode === 'string' &&
+        ['none', 'locale', 'custom'].includes(value.mode));
+}
+function resolveThousandsOptions(value) {
+    if (typeof value === 'string') {
+        return value.length ? { mode: 'custom', separator: value } : { mode: 'none' };
+    }
+    if (value === true || value === 1) {
+        return { mode: 'locale' };
+    }
+    return { mode: 'none' };
+}
+function splitNumericText(value) {
+    var matched = value.match(/^([+-]?)(\d+)(\.\d+)?$/);
+    if (!matched) {
+        return null;
+    }
+    return {
+        sign: matched[1] || '',
+        integer: matched[2],
+        fraction: matched[3] || '',
+    };
+}
+function applyCustomThousandsSeparator(value, separator) {
+    var parts = splitNumericText(value);
+    if (!parts) {
+        return value;
+    }
+    return "" + parts.sign + parts.integer.replace(/\B(?=(\d{3})+(?!\d))/g, separator) + parts.fraction;
+}
+function formatAxisValueWithThousands(value, options) {
+    if (options.mode === 'none') {
+        return value;
+    }
+    if (options.mode === 'custom') {
+        return applyCustomThousandsSeparator(value, options.separator || ' ');
+    }
+    var numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) {
+        return value;
+    }
+    var fractionMatched = value.match(/\.(\d+)$/);
+    var fractionLength = fractionMatched ? fractionMatched[1].length : 0;
+    return numericValue.toLocaleString([], {
+        useGrouping: true,
+        minimumFractionDigits: fractionLength,
+        maximumFractionDigits: fractionLength,
+    });
+}
+function inferThousandsOptionsFromFormatter(formatter) {
+    try {
+        var probe = String(formatter('1000'));
+        var matched = probe.match(/1([^0-9])000/);
+        if (matched) {
+            return { mode: 'custom', separator: matched[1] };
+        }
+    }
+    catch (error) {
+        return { mode: 'none' };
+    }
+    return { mode: 'none' };
+}
+function getYAxisThousandsOptions(tooltipComponent) {
+    var _a, _b, _c;
+    var chartOptions = (_b = (_a = tooltipComponent === null || tooltipComponent === void 0 ? void 0 : tooltipComponent.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.options;
+    var yAxisOptions = Array.isArray(chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.yAxis)
+        ? chartOptions.yAxis[0]
+        : chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.yAxis;
+    if (!isPlainObject(yAxisOptions)) {
+        return { mode: 'none' };
+    }
+    var metadata = yAxisOptions.__editorThousands;
+    if (isThousandsOptions(metadata)) {
+        return metadata;
+    }
+    if (metadata === true) {
+        return { mode: 'locale' };
+    }
+    var yAxisFormatter = (_c = yAxisOptions.label) === null || _c === void 0 ? void 0 : _c.formatter;
+    if (typeof yAxisFormatter === 'function') {
+        return inferThousandsOptionsFromFormatter(yAxisFormatter);
+    }
+    return { mode: 'none' };
+}
+function getTooltipFontStyle(themePart) {
+    if (!themePart || typeof themePart !== 'object') {
+        return '';
+    }
+    var declarations = [];
+    if (!isNil(themePart.fontWeight)) {
+        declarations.push("font-weight: " + themePart.fontWeight);
+    }
+    if (themePart.fontFamily) {
+        declarations.push("font-family: " + themePart.fontFamily);
+    }
+    if (!isNil(themePart.fontSize)) {
+        declarations.push("font-size: " + themePart.fontSize + "px");
+    }
+    if (themePart.color) {
+        declarations.push("color: " + themePart.color);
+    }
+    return declarations.join('; ');
+}
+function formatTooltipNumber(value, tooltipComponent) {
+    var thousandsOptions = getYAxisThousandsOptions(tooltipComponent);
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        if (thousandsOptions.mode === 'locale') {
+            return value.toLocaleString([], {
+                useGrouping: true,
+                minimumFractionDigits: TOOLTIP_FRACTION_DIGITS,
+                maximumFractionDigits: TOOLTIP_FRACTION_DIGITS,
+            });
+        }
+        var formatted = value.toFixed(TOOLTIP_FRACTION_DIGITS);
+        if (thousandsOptions.mode === 'custom') {
+            return applyCustomThousandsSeparator(formatted, thousandsOptions.separator || ' ');
+        }
+        return formatted;
+    }
+    if (Array.isArray(value)) {
+        return value.map(function (item) { return formatTooltipNumber(item, tooltipComponent); }).join(' - ');
+    }
+    return String(value !== null && value !== void 0 ? value : '');
+}
+function getTooltipSeriesCollection(tooltipComponent) {
+    var _a, _b;
+    var seriesState = (_b = (_a = tooltipComponent === null || tooltipComponent === void 0 ? void 0 : tooltipComponent.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.series;
+    if (!seriesState || typeof seriesState !== 'object') {
+        return [];
+    }
+    var supportedSeriesTypes = ['line', 'area', 'column', 'bar', 'scatter', 'bubble', 'radar'];
+    for (var _i = 0, supportedSeriesTypes_1 = supportedSeriesTypes; _i < supportedSeriesTypes_1.length; _i++) {
+        var seriesType = supportedSeriesTypes_1[_i];
+        var seriesCollection = seriesState[seriesType];
+        if (Array.isArray(seriesCollection === null || seriesCollection === void 0 ? void 0 : seriesCollection.data) && seriesCollection.data.length) {
+            return seriesCollection.data;
+        }
+    }
+    return [];
+}
+function getTooltipCategoryIndex(model) {
+    if (!Array.isArray(model === null || model === void 0 ? void 0 : model.data)) {
+        return null;
+    }
+    var indexOwner = model.data.find(function (item) { return Number.isInteger(item === null || item === void 0 ? void 0 : item.index); });
+    return indexOwner ? indexOwner.index : null;
+}
+function getTooltipSeriesColor(colorValue) {
+    if (Array.isArray(colorValue)) {
+        var firstColor = colorValue.find(function (value) { return typeof value === 'string' && value.trim(); });
+        return firstColor || '#8ea0bf';
+    }
+    if (typeof colorValue === 'string' && colorValue.trim()) {
+        return colorValue;
+    }
+    return '#8ea0bf';
+}
+function normalizeTooltipSeriesValue(rawValue) {
+    if (isNil(rawValue)) {
+        return null;
+    }
+    if (typeof rawValue === 'number') {
+        return Number.isFinite(rawValue) ? rawValue : null;
+    }
+    if (typeof rawValue === 'string') {
+        var trimmed = rawValue.trim();
+        if (!trimmed) {
+            return null;
+        }
+        var asNumber = Number(trimmed);
+        return Number.isFinite(asNumber) ? asNumber : trimmed;
+    }
+    if (Array.isArray(rawValue)) {
+        if (!rawValue.length) {
+            return null;
+        }
+        if (rawValue.length >= 2) {
+            var secondValue = normalizeTooltipSeriesValue(rawValue[1]);
+            if (!isNil(secondValue)) {
+                return secondValue;
+            }
+        }
+        for (var index = rawValue.length - 1; index >= 0; index -= 1) {
+            var candidate = normalizeTooltipSeriesValue(rawValue[index]);
+            if (!isNil(candidate)) {
+                return candidate;
+            }
+        }
+        return null;
+    }
+    if (typeof rawValue === 'object') {
+        if ('y' in rawValue) {
+            return normalizeTooltipSeriesValue(rawValue.y);
+        }
+        if ('value' in rawValue) {
+            return normalizeTooltipSeriesValue(rawValue.value);
+        }
+    }
+    return null;
+}
+function wrapTooltipTemplate(theme, headerMarkup, bodyMarkup) {
+    var borderWidth = Number.isFinite(theme === null || theme === void 0 ? void 0 : theme.borderWidth) ? theme.borderWidth : 1;
+    var borderStyle = (theme === null || theme === void 0 ? void 0 : theme.borderStyle) || 'solid';
+    var borderColor = (theme === null || theme === void 0 ? void 0 : theme.borderColor) || '#d7dce8';
+    var borderRadius = Number.isFinite(theme === null || theme === void 0 ? void 0 : theme.borderRadius) ? theme.borderRadius : 8;
+    var background = (theme === null || theme === void 0 ? void 0 : theme.background) || '#ffffff';
+    var containerStyle = "border: " + borderWidth + "px " + borderStyle + " " + borderColor + ";border-radius: " + borderRadius + "px;background: " + background + ";";
+    return "<div class=\"td-chart-tooltip\" style=\"" + containerStyle + "\">" + headerMarkup + bodyMarkup + "</div>";
+}
+function buildFullSeriesTooltip(tooltipComponent, model, defaultTemplate, theme) {
+    var seriesCollection = getTooltipSeriesCollection(tooltipComponent);
+    var categoryIndex = getTooltipCategoryIndex(model);
+    if (!seriesCollection.length || isNil(categoryIndex) || categoryIndex < 0) {
+        return wrapTooltipTemplate(theme, (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.header) || '', (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.body) || '');
+    }
+    var visibleModelSeries = new Map();
+    for (var _i = 0, _a = model.data || []; _i < _a.length; _i++) {
+        var tooltipData = _a[_i];
+        if (Number.isInteger(tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.seriesIndex)) {
+            visibleModelSeries.set(tooltipData.seriesIndex, tooltipData);
+        }
+    }
+    var seriesRows = seriesCollection
+        .map(function (seriesItem, seriesIndex) {
+        var _a, _b;
+        var tooltipData = visibleModelSeries.get(seriesIndex);
+        var label = (tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.label) || (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.name) || "Series " + (seriesIndex + 1);
+        var color = getTooltipSeriesColor((_a = tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.color) !== null && _a !== void 0 ? _a : seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.color);
+        var rawSeriesValue = Array.isArray(seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.rawData)
+            ? seriesItem.rawData[categoryIndex]
+            : null;
+        var rawValue = (_b = tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.value) !== null && _b !== void 0 ? _b : rawSeriesValue;
+        var normalizedValue = normalizeTooltipSeriesValue(rawValue);
+        var valueMarkup = isNil(normalizedValue)
+            ? '<span class="td-chart-tooltip-none">None</span>'
+            : escapeHTML(formatTooltipNumber(normalizedValue, tooltipComponent));
+        return "<div class=\"td-chart-tooltip-series\">\n        <span class=\"td-chart-series-name\">\n          <i class=\"td-chart-icon\" style=\"background: " + escapeHTML(color) + "\"></i>\n          <span class=\"td-chart-name\">" + escapeHTML(label) + "</span>\n        </span>\n        <span class=\"td-chart-series-value\">" + valueMarkup + "</span>\n      </div>";
+    })
+        .join('');
+    var headerMarkup = model.category
+        ? "<div class=\"td-chart-tooltip-category\" style=\"" + getTooltipFontStyle(theme === null || theme === void 0 ? void 0 : theme.header) + "\">" + escapeHTML(model.category) + "</div>"
+        : '';
+    var bodyMarkup = "<div class=\"td-chart-tooltip-series-wrapper\" style=\"" + getTooltipFontStyle(theme === null || theme === void 0 ? void 0 : theme.body) + "\">" + seriesRows + "</div>";
+    return wrapTooltipTemplate(theme, headerMarkup, bodyMarkup);
+}
+function setDefaultOptions(chartOptions, pluginOptions, chartContainer, chartData) {
+    chartOptions = mergeChartOptions(getPluginChartOptions(pluginOptions), chartOptions);
     chartOptions = Object.assign({
         editorChart: {},
         chart: {},
         exportMenu: {},
+        tooltip: {},
     }, chartOptions);
     var _a = getChartDimension(chartOptions, pluginOptions, chartContainer), width = _a.width, height = _a.height;
     chartOptions.chart.width = width;
@@ -6657,28 +6989,49 @@ function setDefaultOptions(chartOptions, pluginOptions, chartContainer) {
     chartOptions.editorChart.type = chartOptions.editorChart.type || 'column';
     // default visibility of export menu
     chartOptions.exportMenu.visible = !!chartOptions.exportMenu.visible;
+    if (typeof chartOptions.tooltip.transition === 'undefined') {
+        chartOptions.tooltip.transition = false;
+    }
+    if (typeof chartOptions.tooltip.formatter !== 'function') {
+        chartOptions.tooltip.formatter = function formatter(value) {
+            return formatTooltipNumber(value, this);
+        };
+    }
+    if (typeof chartOptions.tooltip.template !== 'function') {
+        chartOptions.tooltip.template = function template(model, defaultTemplate, theme) {
+            return buildFullSeriesTooltip(this, model, defaultTemplate, theme);
+        };
+    }
     ['xAxis', 'yAxis'].forEach(function (axis) {
         var axisOpts = chartOptions[axis];
         if (!axisOpts) {
             return;
         }
-        var suffix = axisOpts.suffix, thousands = axisOpts.thousands;
-        delete axisOpts.suffix;
-        delete axisOpts.thousands;
-        if (suffix || thousands) {
-            axisOpts.label = axisOpts.label || {};
-            axisOpts.label.formatter = function (value) {
-                var result = String(value);
-                if (thousands) {
-                    result = result.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-                }
-                if (suffix) {
-                    result = "" + result + suffix;
-                }
-                return result;
-            };
-        }
+        var axisList = Array.isArray(axisOpts) ? axisOpts : [axisOpts];
+        axisList.forEach(function (axisOption) {
+            if (!isPlainObject(axisOption)) {
+                return;
+            }
+            var normalizedAxisOption = axisOption;
+            var _a = normalizedAxisOption, suffix = _a.suffix, thousands = _a.thousands;
+            var thousandsOptions = resolveThousandsOptions(thousands);
+            normalizedAxisOption.__editorThousands = thousandsOptions;
+            delete normalizedAxisOption.suffix;
+            delete normalizedAxisOption.thousands;
+            if (suffix || thousandsOptions.mode !== 'none') {
+                normalizedAxisOption.label = normalizedAxisOption.label || {};
+                normalizedAxisOption.label.formatter = function (value) {
+                    var result = String(value);
+                    result = formatAxisValueWithThousands(result, thousandsOptions);
+                    if (suffix) {
+                        result = "" + result + suffix;
+                    }
+                    return result;
+                };
+            }
+        });
     });
+    assignSeriesStyleByIndex(chartOptions, chartData);
     return chartOptions;
 }
 function isDarkMode(el) {
@@ -6687,7 +7040,7 @@ function isDarkMode(el) {
 }
 function destroyChart() {
     Object.keys(chartMap).forEach(function (id) {
-        var container = document.querySelector("[data-chart-id=" + id + "]");
+        var container = document.querySelector("[data-chart-id=\"" + id + "\"]");
         if (!container) {
             chartMap[id].destroy();
             delete chartMap[id];
@@ -6699,7 +7052,7 @@ function doRenderChart(id, text, usageStatistics, pluginOptions, chartContainer)
     try {
         parse(text, function (parsedInfo) {
             var _a = parsedInfo || {}, data = _a.data, options = _a.options;
-            var chartOptions = setDefaultOptions(options, pluginOptions, chartContainer);
+            var chartOptions = setDefaultOptions(options, pluginOptions, chartContainer, data);
             var chartType = chartOptions.editorChart.type;
             var dark = effectiveDarkMode !== null ? effectiveDarkMode : isDarkMode(chartContainer);
             if (dark) {
@@ -6725,13 +7078,20 @@ function doRenderChart(id, text, usageStatistics, pluginOptions, chartContainer)
         chartContainer.innerHTML = 'invalid chart data';
     }
 }
-function renderChart(id, text, usageStatistics, pluginOptions) {
+function renderChart(id, text, usageStatistics, pluginOptions, retryCount) {
+    if (retryCount === void 0) { retryCount = 0; }
     // should draw the chart after rendering container element
-    var chartContainer = document.querySelector("[data-chart-id=" + id + "]");
-    destroyChart();
-    if (chartContainer) {
-        doRenderChart(id, text, usageStatistics, pluginOptions, chartContainer);
+    var chartContainer = document.querySelector("[data-chart-id=\"" + id + "\"]");
+    if (!chartContainer) {
+        if (retryCount < 8) {
+            requestAnimationFrame(function () {
+                renderChart(id, text, usageStatistics, pluginOptions, retryCount + 1);
+            });
+        }
+        return;
     }
+    destroyChart();
+    doRenderChart(id, text, usageStatistics, pluginOptions, chartContainer);
 }
 function reRenderAllCharts(usageStatistics, pluginOptions, forceDark) {
     effectiveDarkMode = forceDark;
@@ -6750,15 +7110,8 @@ function reRenderAllCharts(usageStatistics, pluginOptions, forceDark) {
 function generateId() {
     return "chart-" + Math.random().toString(36).substr(2, 10);
 }
-var timer = null;
-function clearTimer() {
-    if (timer) {
-        clearTimeout(timer);
-        timer = null;
-    }
-}
 function getEditorRoot(instance) {
-    var _a, _b, _c;
+    var _a;
     var elements = null;
     try {
         elements = (_a = instance.getEditorElements) === null || _a === void 0 ? void 0 : _a.call(instance);
@@ -6766,13 +7119,19 @@ function getEditorRoot(instance) {
     catch (e) {
         elements = null;
     }
-    return (((_b = elements === null || elements === void 0 ? void 0 : elements.mdPreview) === null || _b === void 0 ? void 0 : _b.closest('.toastui-editor-defaultUI')) ||
-        ((_c = elements === null || elements === void 0 ? void 0 : elements.wwEditor) === null || _c === void 0 ? void 0 : _c.closest('.toastui-editor-defaultUI')) ||
-        document.querySelector('.toastui-editor-defaultUI'));
+    var selectors = ['.toastui-editor-defaultUI', '.td-editor-defaultUI'];
+    return (selectors
+        .map(function (selector) { var _a, _b; return ((_a = elements === null || elements === void 0 ? void 0 : elements.mdPreview) === null || _a === void 0 ? void 0 : _a.closest(selector)) || ((_b = elements === null || elements === void 0 ? void 0 : elements.wwEditor) === null || _b === void 0 ? void 0 : _b.closest(selector)); })
+        .find(Boolean) ||
+        selectors.map(function (selector) { return document.querySelector(selector); }).find(Boolean) ||
+        null);
 }
 function detectDarkMode(instance) {
-    var _a;
-    return !!((_a = getEditorRoot(instance)) === null || _a === void 0 ? void 0 : _a.classList.contains('toastui-editor-dark'));
+    var root = getEditorRoot(instance);
+    if (!root) {
+        return false;
+    }
+    return (root.classList.contains('toastui-editor-dark') || root.classList.contains('td-editor-dark'));
 }
 /**
  * Chart plugin
@@ -6786,6 +7145,7 @@ function detectDarkMode(instance) {
  * @param {number|string} [options.height='auto'] - default height
  */
 function chartPlugin(context, options) {
+    ensureChartStyles();
     var _a = context.usageStatistics, usageStatistics = _a === void 0 ? true : _a;
     var instance = context.instance;
     var scheduled = false;
@@ -6833,7 +7193,11 @@ function chartPlugin(context, options) {
         rootObserver.observe(root, { attributes: true, attributeFilter: ['class'] });
     };
     context.eventEmitter.listen('changeTheme', function (theme) {
-        scheduleReRender({ themeOverride: theme === 'dark' });
+        if (theme === 'dark' || theme === 'light') {
+            scheduleReRender({ themeOverride: theme === 'dark' });
+            return;
+        }
+        scheduleReRender({ deferFrames: 2 });
     });
     context.eventEmitter.listen('changeMode', function () {
         bindThemeObserver();
@@ -6854,8 +7218,8 @@ function chartPlugin(context, options) {
         toHTMLRenderers: {
             chart: function (node) {
                 var id = generateId();
-                clearTimer();
-                timer = setTimeout(function () {
+                var encodedText = encodeURIComponent(node.literal || '');
+                requestAnimationFrame(function () {
                     renderChart(id, node.literal, usageStatistics, options);
                 });
                 return [
@@ -6863,7 +7227,11 @@ function chartPlugin(context, options) {
                         type: 'openTag',
                         tagName: 'div',
                         outerNewLine: true,
-                        attributes: { 'data-chart-id': id },
+                        attributes: {
+                            class: 'toastui-chart-block',
+                            'data-chart-id': id,
+                            'data-chart-text': encodedText,
+                        },
                     },
                     { type: 'closeTag', tagName: 'div', outerNewLine: true },
                 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techie_doubts/editor-plugin-chart",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "TOAST UI Editor : Chart Plugin",
   "keywords": [
     "nhn",

package/types/index.d.ts

@@ -1,12 +1,14 @@
 import type { PluginContext, PluginInfo } from '@techie_doubts/tui.editor.2026';
+import type { BaseOptions } from '@techie_doubts/tui.chart.2026';
 
 export interface PluginOptions {
-  minWidth: number;
-  maxWidth: number;
-  minHeight: number;
-  maxHeight: number;
-  width: number | 'auto';
-  height: number | 'auto';
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  width?: number | 'auto';
+  height?: number | 'auto';
+  chartOptions?: BaseOptions;
 }
 
 export default function chartPlugin(context: PluginContext, options: PluginOptions): PluginInfo;