@techie_doubts/editor-plugin-color-syntax 3.1.0

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

@@ -0,0 +1,521 @@
+/*!
+ * TOAST UI Editor : Color Syntax Plugin
+ * @version 3.1.0 | Sat Feb 21 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("@techie_doubts/tui.color-picker.2026"));
+	else if(typeof define === 'function' && define.amd)
+		define(["@techie_doubts/tui.color-picker.2026"], factory);
+	else if(typeof exports === 'object')
+		exports["toastui"] = factory(require("@techie_doubts/tui.color-picker.2026"));
+	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__0__) {
+return /******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ([
+/* 0 */
+/***/ (function(module) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
+
+/***/ })
+/******/ 	]);
+/************************************************************************/
+/******/ 	// 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":"@techie_doubts/tui.color-picker.2026","commonjs2":"@techie_doubts/tui.color-picker.2026","amd":"@techie_doubts/tui.color-picker.2026","root":["tui","colorPicker"]}
+var tui_color_picker_2026_root_tui_colorPicker_ = __webpack_require__(0);
+var tui_color_picker_2026_root_tui_colorPicker_default = /*#__PURE__*/__webpack_require__.n(tui_color_picker_2026_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 = tui_color_picker_2026_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/dist/toastui-editor-plugin-color-syntax.css

@@ -0,0 +1,153 @@
+/*!
+ * 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
+ */
+
+.toastui-editor-popup-color {
+  padding: 0;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container,
+.toastui-editor-popup-color .tui-colorpicker-palette-container {
+  width: 147px;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container ul {
+  width: 152px;
+  margin-bottom: 10px;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container li {
+  padding: 0 3px 3px 0;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+}
+
+.toastui-editor-popup-color .tui-popup-body {
+  padding: 10px;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-toggle-slider {
+  display: none;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider {
+  border-radius: 3px;
+  border: solid 1px rgba(0, 0, 0, 0.05);
+}
+
+
+.toastui-editor-popup-color .tui-colorpicker-palette-hex {
+  float: right;
+}
+
+.toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
+  font-family: inherit;
+  font-size: 13px;
+  height: 24px;
+  width: 65px;
+  padding: 3px 25px 3px 10px;
+  border: 1px solid #e1e3e9;
+  border-radius: 2px;
+  float: left;
+}
+
+.toastui-editor-popup-color button {
+  height: 32px;
+  width: 40px;
+  color: #555;
+  background: #f7f9fc;
+  border: 1px solid #e1e3e9;
+  top: 68px;
+  position: absolute;
+  right: 15px;
+}
+
+.toastui-editor-popup-color button:hover {
+  border-color: #cbcfdb;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container div.tui-colorpicker-clearfix {
+  display: inline-block;
+  margin: 5px 0;
+  width: 102px;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview {
+  margin-top: 8px;
+  margin-left: -22px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-slider-right {
+  width: 19px;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
+  border: solid 1px rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  overflow: auto;
+}
+
+.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-huebar-handle {
+  display: none;
+}
+
+.toastui-editor-toolbar-icons.color {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMTYiIHZpZXdCb3g9IjAgMCAyNCAxMTYiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAwIC0xOTIpIHRyYW5zbGF0ZSg2MDAgMTkyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjNTU1IiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM1NTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjRUVFIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiNFRUUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZGNDg0OCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDI2KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjMDBBOUZGIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiMwMEE5RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDc4KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjNjdDQ0ZGIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM2N0NDRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZGNDg0OCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9Ii4yIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNiAuNWMxLjUxOSAwIDIuODk0LjYxNiAzLjg5IDEuNjEuOTk0Ljk5NiAxLjYxIDIuMzcxIDEuNjEgMy44OSAwIDEuNTE5LS42MTYgMi44OTQtMS42MSAzLjg5LS45OTYuOTk0LTIuMzcxIDEuNjEtMy44OSAxLjYxLTEuNTE5IDAtMi44OTQtLjYxNi0zLjg5LTEuNjFDMS4xMTcgOC44OTMuNSA3LjUxOC41IDZjMC0xLjUxOS42MTYtMi44OTQgMS42MS0zLjg5QzMuMTA3IDEuMTE3IDQuNDgyLjUgNiAuNXpNNiAzYy0uODI4IDAtMS41NzguMzM2LTIuMTIxLjg3OUMzLjMzNiA0LjQyMiAzIDUuMTcyIDMgNmMwIC44MjguMzM2IDEuNTc4Ljg3OSAyLjEyMUM0LjQyMiA4LjY2NCA1LjE3MiA5IDYgOWMuODI4IDAgMS41NzgtLjMzNiAyLjEyMS0uODc5QzguNjY0IDcuNTc4IDkgNi44MjggOSA2YzAtLjgyOC0uMzM2LTEuNTc4LS44NzktMi4xMjFDNy41NzggMy4zMzYgNi44MjggMyA2IDN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAwIC0xOTIpIHRyYW5zbGF0ZSg2MDAgMTkyKSB0cmFuc2xhdGUoMCAxMDQpIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=);
+  background-size: 23px 112px;
+  background-position: 3px 3px;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons.color {
+  background-position-y: -47px;
+}
+
+.toastui-editor-dark .toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
+  border-color: #303238;
+}
+
+.toastui-editor-dark .toastui-editor-popup-color button {
+  color: #eee;
+  border-color: #303238;
+  background-color: #232428;
+}
+
+.toastui-editor-dark .toastui-editor-popup-color button:hover {
+  border-color: #494c56;
+}
+
+.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider,
+.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
+  border-color: rgba(255, 255, 255, 0.05);
+}
+
+.toastui-editor-toolbar-icons.bgcolor {
+  background: none;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 30px;
+  text-indent: 0;
+  color: #555;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons.bgcolor {
+  color: #eee;
+}
+