@techie_doubts/editor-plugin-color-syntax 3.1.0

package/dist/toastui-editor-plugin-color-syntax.js

@@ -0,0 +1,523 @@
+/*!
+ * TOAST UI Editor : Color Syntax Plugin
+ * @version 3.1.0 | Fri Feb 20 2026
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("tui-color-picker"));
+	else if(typeof define === 'function' && define.amd)
+		define(["tui-color-picker"], factory);
+	else if(typeof exports === 'object')
+		exports["toastui"] = factory(require("tui-color-picker"));
+	else
+		root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = root["toastui"]["Editor"] || {}, root["toastui"]["Editor"]["plugin"] = root["toastui"]["Editor"]["plugin"] || {}, root["toastui"]["Editor"]["plugin"]["uml"] = factory(root["tui"]["colorPicker"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__262__) {
+return /******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 262:
+/***/ (function(module) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__262__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	!function() {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = function(module) {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				function() { return module['default']; } :
+/******/ 				function() { return module; };
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	!function() {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	}();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	!function() {
+/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
+/******/ 	}();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": function() { return /* binding */ colorSyntaxPlugin; }
+});
+
+// EXTERNAL MODULE: external {"commonjs":"tui-color-picker","commonjs2":"tui-color-picker","amd":"tui-color-picker","root":["tui","colorPicker"]}
+var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_ = __webpack_require__(262);
+var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_);
+;// ./src/i18n/langs.ts
+function addLangs(i18n) {
+    i18n.setLanguage('ar', {
+        'Text color': 'لون النص',
+        'Background color': 'لون الخلفية',
+    });
+    i18n.setLanguage(['cs', 'cs-CZ'], {
+        'Text color': 'Barva textu',
+        'Background color': 'Barva pozadí',
+    });
+    i18n.setLanguage(['de', 'de-DE'], {
+        'Text color': 'Textfarbe',
+        'Background color': 'Hintergrundfarbe',
+    });
+    i18n.setLanguage(['en', 'en-US'], {
+        'Text color': 'Text color',
+        'Background color': 'Background color',
+    });
+    i18n.setLanguage(['es', 'es-ES'], {
+        'Text color': 'Color del texto',
+        'Background color': 'Color de fondo',
+    });
+    i18n.setLanguage(['fi', 'fi-FI'], {
+        'Text color': 'Tekstin väri',
+        'Background color': 'Taustaväri',
+    });
+    i18n.setLanguage(['fr', 'fr-FR'], {
+        'Text color': 'Couleur du texte',
+        'Background color': 'Couleur de fond',
+    });
+    i18n.setLanguage(['gl', 'gl-ES'], {
+        'Text color': 'Cor do texto',
+        'Background color': 'Cor de fondo',
+    });
+    i18n.setLanguage(['hr', 'hr-HR'], {
+        'Text color': 'Boja teksta',
+        'Background color': 'Boja pozadine',
+    });
+    i18n.setLanguage(['it', 'it-IT'], {
+        'Text color': 'Colore del testo',
+        'Background color': 'Colore di sfondo',
+    });
+    i18n.setLanguage(['ja', 'ja-JP'], {
+        'Text color': '文字色相',
+        'Background color': '背景色',
+    });
+    i18n.setLanguage(['ko', 'ko-KR'], {
+        'Text color': '글자 색상',
+        'Background color': '배경 색상',
+    });
+    i18n.setLanguage(['nb', 'nb-NO'], {
+        'Text color': 'Tekstfarge',
+        'Background color': 'Bakgrunnsfarge',
+    });
+    i18n.setLanguage(['nl', 'nl-NL'], {
+        'Text color': 'Tekstkleur',
+        'Background color': 'Achtergrondkleur',
+    });
+    i18n.setLanguage(['pl', 'pl-PL'], {
+        'Text color': 'Kolor tekstu',
+        'Background color': 'Kolor tła',
+    });
+    i18n.setLanguage(['pt', 'pt-BR'], {
+        'Text color': 'Cor do texto',
+        'Background color': 'Cor de fundo',
+    });
+    i18n.setLanguage(['ru', 'ru-RU'], {
+        'Text color': 'Цвет текста',
+        'Background color': 'Цвет фона',
+    });
+    i18n.setLanguage(['sv', 'sv-SE'], {
+        'Text color': 'Textfärg',
+        'Background color': 'Bakgrundsfärg',
+    });
+    i18n.setLanguage(['tr', 'tr-TR'], {
+        'Text color': 'Metin rengi',
+        'Background color': 'Arka plan rengi',
+    });
+    i18n.setLanguage(['uk', 'uk-UA'], {
+        'Text color': 'Колір тексту',
+        'Background color': 'Колір фону',
+    });
+    i18n.setLanguage('zh-CN', {
+        'Text color': '文字颜色',
+        'Background color': '背景颜色',
+    });
+    i18n.setLanguage('zh-TW', {
+        'Text color': '文字顏色',
+        'Background color': '背景顏色',
+    });
+}
+
+;// ./src/utils/dom.ts
+function hasClass(element, className) {
+    return element.classList.contains(className);
+}
+function findParentByClassName(el, className) {
+    var currentEl = el;
+    while (currentEl && !hasClass(currentEl, className)) {
+        currentEl = currentEl.parentElement;
+    }
+    return currentEl;
+}
+function removeProseMirrorHackNodes(html) {
+    var reProseMirrorImage = /<img class="ProseMirror-separator" alt="">/g;
+    var reProseMirrorTrailingBreak = / class="ProseMirror-trailingBreak"/g;
+    var resultHTML = html;
+    resultHTML = resultHTML.replace(reProseMirrorImage, '');
+    resultHTML = resultHTML.replace(reProseMirrorTrailingBreak, '');
+    return resultHTML;
+}
+
+;// ./src/index.ts
+
+
+
+
+var PREFIX = 'toastui-editor-';
+// ---------------------------------------------------------------------------
+// Style helpers
+// ---------------------------------------------------------------------------
+function parseStyleString(style) {
+    var result = {};
+    if (!style) {
+        return result;
+    }
+    style.split(';').forEach(function (part) {
+        var colon = part.indexOf(':');
+        if (colon > 0) {
+            var key = part.slice(0, colon).trim();
+            var val = part.slice(colon + 1).trim();
+            if (key && val) {
+                result[key] = val;
+            }
+        }
+    });
+    return result;
+}
+function buildStyleString(styles) {
+    return Object.keys(styles)
+        .map(function (k) { return k + ": " + styles[k]; })
+        .join('; ');
+}
+function getExistingSpanStyle(selection, schema) {
+    var $from = selection.$from;
+    var spanType = schema.marks.span;
+    if (!spanType) {
+        return '';
+    }
+    if (!selection.empty) {
+        var from = selection.from, to = selection.to;
+        var style_1 = '';
+        $from.doc.nodesBetween(from, to, function (node) {
+            if (style_1 || !node.isText) {
+                return;
+            }
+            var m = spanType.isInSet(node.marks);
+            if (m) {
+                style_1 = (m.attrs.htmlAttrs && m.attrs.htmlAttrs.style) || '';
+            }
+        });
+        return style_1;
+    }
+    var mark = spanType.isInSet($from.marks());
+    if (mark) {
+        return (mark.attrs.htmlAttrs && mark.attrs.htmlAttrs.style) || '';
+    }
+    if ($from.nodeBefore) {
+        var m = spanType.isInSet($from.nodeBefore.marks);
+        if (m) {
+            return (m.attrs.htmlAttrs && m.attrs.htmlAttrs.style) || '';
+        }
+    }
+    return '';
+}
+// ---------------------------------------------------------------------------
+// Markdown helpers: detect and rewrite existing <span style="..."> wrappers
+// ---------------------------------------------------------------------------
+var RE_SPAN_WRAP = /^<span\s+style="([^"]*)">([\s\S]*)<\/span>$/i;
+function parseMdSpanStyle(text) {
+    var m = RE_SPAN_WRAP.exec(text);
+    if (!m) {
+        return null;
+    }
+    return { inner: m[2], styles: parseStyleString(m[1]) };
+}
+// ---------------------------------------------------------------------------
+// DOM helpers
+// ---------------------------------------------------------------------------
+function createApplyButton(text) {
+    var button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    button.textContent = text;
+    return button;
+}
+function getCurrentEditorEl(el, containerCls) {
+    var root = findParentByClassName(el, PREFIX + "defaultUI");
+    return root.querySelector("." + containerCls + " .ProseMirror");
+}
+function createColorPicker(preset, usageStatistics, i18n) {
+    var container = document.createElement('div');
+    var option = {
+        container: container,
+        usageStatistics: usageStatistics,
+    };
+    if (preset) {
+        option.preset = preset;
+    }
+    var picker = external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default().create(option);
+    var button = createApplyButton(i18n.get('OK'));
+    picker.slider.toggle(true);
+    container.appendChild(button);
+    return { container: container, picker: picker, button: button };
+}
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+var containerClassName;
+var currentEditorEl;
+/**
+ * Color syntax plugin with text color and background color toolbar buttons.
+ */
+function colorSyntaxPlugin(context, options) {
+    if (options === void 0) { options = {}; }
+    var eventEmitter = context.eventEmitter, i18n = context.i18n, _a = context.usageStatistics, usageStatistics = _a === void 0 ? true : _a, pmState = context.pmState;
+    var preset = options.preset;
+    addLangs(i18n);
+    // --- text color picker (original) --------------------------------------
+    var textPicker = createColorPicker(preset, usageStatistics, i18n);
+    // --- background color picker (new) -------------------------------------
+    var bgPicker = createColorPicker(preset, usageStatistics, i18n);
+    // --- focus tracking ----------------------------------------------------
+    eventEmitter.listen('focus', function (editType) {
+        containerClassName = "" + PREFIX + (editType === 'markdown' ? 'md' : 'ww') + "-container";
+    });
+    // --- text color OK click -----------------------------------------------
+    textPicker.container.addEventListener('click', function (ev) {
+        if (ev.target.getAttribute('type') === 'button') {
+            var hexInput = textPicker.container.querySelector('.tui-colorpicker-palette-hex');
+            var selectedColor = hexInput ? hexInput.value.trim() : textPicker.picker.getColor();
+            currentEditorEl = getCurrentEditorEl(textPicker.container, containerClassName);
+            currentEditorEl.focus();
+            eventEmitter.emit('command', 'color', { selectedColor: selectedColor });
+            eventEmitter.emit('closePopup');
+        }
+    });
+    // --- background color OK click -----------------------------------------
+    bgPicker.container.addEventListener('click', function (ev) {
+        if (ev.target.getAttribute('type') === 'button') {
+            var hexInput = bgPicker.container.querySelector('.tui-colorpicker-palette-hex');
+            var selectedColor = hexInput ? hexInput.value.trim() : bgPicker.picker.getColor();
+            currentEditorEl = getCurrentEditorEl(bgPicker.container, containerClassName);
+            currentEditorEl.focus();
+            eventEmitter.emit('command', 'bgColor', { selectedColor: selectedColor });
+            eventEmitter.emit('closePopup');
+        }
+    });
+    // --- toolbar items -----------------------------------------------------
+    var textToolbarItem = {
+        name: 'color',
+        tooltip: i18n.get('Text color'),
+        className: PREFIX + "toolbar-icons color",
+        popup: {
+            className: PREFIX + "popup-color",
+            body: textPicker.container,
+            style: { width: 'auto' },
+        },
+    };
+    var bgToolbarItem = {
+        name: 'bgColor',
+        tooltip: i18n.get('Background color'),
+        className: PREFIX + "toolbar-icons bgcolor",
+        text: 'BG',
+        popup: {
+            className: PREFIX + "popup-color",
+            body: bgPicker.container,
+            style: { width: 'auto' },
+        },
+    };
+    // --- commands -----------------------------------------------------------
+    return {
+        markdownCommands: {
+            color: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                var selectedColor = (payload || {}).selectedColor;
+                if (typeof selectedColor === 'undefined') {
+                    return false;
+                }
+                var slice = selection.content();
+                var rawText = slice.content.textBetween(0, slice.content.size, '\n');
+                var parsed = parseMdSpanStyle(rawText);
+                var existing = parsed ? parsed.styles : {};
+                var inner = parsed ? parsed.inner : rawText;
+                if (selectedColor) {
+                    existing.color = selectedColor;
+                }
+                else {
+                    delete existing.color;
+                }
+                var styleStr = buildStyleString(existing);
+                if (styleStr) {
+                    var fullText = "<span style=\"" + styleStr + "\">" + inner + "</span>";
+                    tr.replaceSelectionWith(schema.text(fullText));
+                    var start = tr.mapping.map(selection.from);
+                    tr.setSelection(pmState.TextSelection.create(tr.doc, start, start + fullText.length));
+                }
+                else if (inner) {
+                    tr.replaceSelectionWith(schema.text(inner));
+                }
+                dispatch(tr);
+                return true;
+            },
+            bgColor: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                var selectedColor = (payload || {}).selectedColor;
+                if (typeof selectedColor === 'undefined') {
+                    return false;
+                }
+                var slice = selection.content();
+                var rawText = slice.content.textBetween(0, slice.content.size, '\n');
+                var parsed = parseMdSpanStyle(rawText);
+                var existing = parsed ? parsed.styles : {};
+                var inner = parsed ? parsed.inner : rawText;
+                if (selectedColor) {
+                    existing.background = selectedColor;
+                }
+                else {
+                    delete existing.background;
+                }
+                var styleStr = buildStyleString(existing);
+                if (styleStr) {
+                    var fullText = "<span style=\"" + styleStr + "\">" + inner + "</span>";
+                    tr.replaceSelectionWith(schema.text(fullText));
+                    var start = tr.mapping.map(selection.from);
+                    tr.setSelection(pmState.TextSelection.create(tr.doc, start, start + fullText.length));
+                }
+                else if (inner) {
+                    tr.replaceSelectionWith(schema.text(inner));
+                }
+                dispatch(tr);
+                return true;
+            },
+        },
+        wysiwygCommands: {
+            color: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                var selectedColor = (payload || {}).selectedColor;
+                if (typeof selectedColor === 'undefined') {
+                    return false;
+                }
+                var from = selection.from, to = selection.to;
+                var existingStyle = getExistingSpanStyle(selection, schema);
+                var existing = parseStyleString(existingStyle);
+                if (selectedColor) {
+                    existing.color = selectedColor;
+                }
+                else {
+                    delete existing.color;
+                }
+                var styleStr = buildStyleString(existing);
+                if (styleStr) {
+                    var attrs = { htmlAttrs: { style: styleStr } };
+                    tr.addMark(from, to, schema.marks.span.create(attrs));
+                }
+                else {
+                    tr.removeMark(from, to, schema.marks.span);
+                }
+                tr.setSelection(pmState.TextSelection.create(tr.doc, from, to));
+                dispatch(tr);
+                return true;
+            },
+            bgColor: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                var selectedColor = (payload || {}).selectedColor;
+                if (typeof selectedColor === 'undefined') {
+                    return false;
+                }
+                var from = selection.from, to = selection.to;
+                var existingStyle = getExistingSpanStyle(selection, schema);
+                var existing = parseStyleString(existingStyle);
+                if (selectedColor) {
+                    existing.background = selectedColor;
+                }
+                else {
+                    delete existing.background;
+                }
+                var styleStr = buildStyleString(existing);
+                if (styleStr) {
+                    var attrs = { htmlAttrs: { style: styleStr } };
+                    tr.addMark(from, to, schema.marks.span.create(attrs));
+                }
+                else {
+                    tr.removeMark(from, to, schema.marks.span);
+                }
+                tr.setSelection(pmState.TextSelection.create(tr.doc, from, to));
+                dispatch(tr);
+                return true;
+            },
+        },
+        toolbarItems: [
+            {
+                groupIndex: 0,
+                itemIndex: 3,
+                item: textToolbarItem,
+            },
+            {
+                groupIndex: 0,
+                itemIndex: 4,
+                item: bgToolbarItem,
+            },
+        ],
+        toHTMLRenderers: {
+            htmlInline: {
+                span: function (node, _a) {
+                    var entering = _a.entering;
+                    return entering
+                        ? { type: 'openTag', tagName: 'span', attributes: node.attrs }
+                        : { type: 'closeTag', tagName: 'span' };
+                },
+            },
+        },
+    };
+}
+
+__webpack_exports__ = __webpack_exports__["default"];
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@techie_doubts/editor-plugin-color-syntax",
+  "version": "3.1.0",
+  "description": "TOAST UI Editor : Color Syntax Plugin",
+  "keywords": [
+    "nhn",
+    "nhn cloud",
+    "toast",
+    "toastui",
+    "toast-ui",
+    "editor",
+    "plugin",
+    "color-syntax",
+    "color-picker"
+  ],
+  "main": "dist/td-editor-plugin-color-syntax.js",
+  "files": [
+    "dist/*.js",
+    "dist/*.css",
+    "types/index.d.ts"
+  ],
+  "types": "types/index.d.ts",
+  "author": "NHN Cloud FE Development Lab <dl_javascript@nhn.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nhn/tui.editor.git",
+    "directory": "plugins/color-syntax"
+  },
+  "bugs": {
+    "url": "https://github.com/nhn/tui.editor/issues"
+  },
+  "homepage": "https://ui.toast.com",
+  "browserslist": "last 2 versions, not ie <= 10",
+  "scripts": {
+    "lint": "eslint .",
+    "test:types": "tsc",
+    "test": "jest --watch",
+    "test:ci": "jest",
+    "serve": "snowpack dev",
+    "serve:ie": "webpack serve",
+    "build:cdn": "webpack build --env cdn & webpack build --env cdn minify",
+    "build": "webpack build && npm run build:cdn"
+  },
+  "devDependencies": {
+    "cross-env": "^6.0.3"
+  },
+  "dependencies": {
+    "@techie_doubts/tui.color-picker.2026": "^2.2.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { PluginContext, PluginInfo } from '@techie_doubts/tui.editor.2026';
+
+export interface PluginOptions {
+  preset?: string[];
+}
+
+export default function colorPlugin(context: PluginContext, options: PluginOptions): PluginInfo;