@licium/editor-plugin-color-syntax 3.2.11 → 3.2.13

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

@@ -1,21 +1,20 @@
 /*!
  * TOAST UI Editor : Color Syntax Plugin
- * @version 3.2.11 | Thu Jan 08 2026
+ * @version 3.2.13 | Fri Jan 09 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;
+  width: 178px;
 }
 
 .toastui-editor-popup-color .tui-colorpicker-container ul {
-  width: 152px;
+  width: 178px;
   margin-bottom: 10px;
 }
 
@@ -62,16 +61,17 @@
 
 .toastui-editor-popup-color button {
   height: 32px;
-  width: 40px;
   color: #555;
   background: #f7f9fc;
   border: 1px solid #e1e3e9;
-  top: 68px;
-  position: absolute;
-  right: 15px;
+  cursor: pointer;
+  padding: 0 8px;
+  width: auto;
+  min-width: 40px;
 }
 
 .toastui-editor-popup-color button:hover {
+  background-color: #dff4ff !important;
   border-color: #cbcfdb;
 }
 
@@ -138,3 +138,13 @@
   border-color: rgba(255, 255, 255, 0.05);
 }
 
+.toastui-editor-button-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  padding-right: 2px;
+}
+
+.toastui-editor-button-container button {
+  margin-left: 5px;
+}

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

@@ -1,6 +1,6 @@
 /*!
  * TOAST UI Editor : Color Syntax Plugin
- * @version 3.2.11 | Thu Jan 08 2026
+ * @version 3.2.13 | Fri Jan 09 2026
  * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
  * @license MIT
  */
@@ -223,9 +223,9 @@ function createToolbarItemOption(colorPickerContainer, i18n) {
     return {
         name: 'color',
         tooltip: i18n.get('Text color'),
-        className: PREFIX + "toolbar-icons color",
+        className: "".concat(PREFIX, "toolbar-icons color"),
         popup: {
-            className: PREFIX + "popup-color",
+            className: "".concat(PREFIX, "popup-color"),
             body: colorPickerContainer,
             style: { width: 'auto' },
         },
@@ -241,8 +241,8 @@ function createSelection(tr, selection, SelectionClass, openTag, closeTag) {
         : SelectionClass.create(doc, mappedFrom, mappedTo);
 }
 function getCurrentEditorEl(colorPickerEl, containerClassName) {
-    var editorDefaultEl = findParentByClassName(colorPickerEl, PREFIX + "defaultUI");
-    return editorDefaultEl.querySelector("." + containerClassName + " .ProseMirror");
+    var editorDefaultEl = findParentByClassName(colorPickerEl, "".concat(PREFIX, "defaultUI"));
+    return editorDefaultEl.querySelector(".".concat(containerClassName, " .ProseMirror"));
 }
 var containerClassName;
 var currentEditorEl;
@@ -268,7 +268,7 @@ function colorSyntaxPlugin(context, options) {
     var button = createApplyButton(i18n.get('OK'));
     var clearButton = createApplyButton(i18n.get('Clear')); // @TODO: Add translation key if needed
     eventEmitter.listen('focus', function (editType) {
-        containerClassName = "" + PREFIX + (editType === 'markdown' ? 'md' : 'ww') + "-container";
+        containerClassName = "".concat(PREFIX).concat(editType === 'markdown' ? 'md' : 'ww', "-container");
     });
     container.addEventListener('click', function (ev) {
         if (ev.target.getAttribute('type') === 'button') {
@@ -281,12 +281,15 @@ function colorSyntaxPlugin(context, options) {
             eventEmitter.emit('command', 'color', { selectedColor: selectedColor });
             eventEmitter.emit('closePopup');
             // force the current editor to focus for preventing to lose focus
-            currentEditorEl.focus();
+            currentEditorEl.focus({ preventScroll: true });
         }
     });
     colorPicker.slider.toggle(true);
-    container.appendChild(button);
-    container.appendChild(clearButton);
+    var buttonContainer = document.createElement('div');
+    buttonContainer.className = "".concat(PREFIX, "button-container");
+    buttonContainer.appendChild(button);
+    buttonContainer.appendChild(clearButton);
+    container.appendChild(buttonContainer);
     var toolbarItem = createToolbarItemOption(container, i18n);
     return {
         markdownCommands: {
@@ -296,9 +299,9 @@ function colorSyntaxPlugin(context, options) {
                 if (selectedColor) {
                     var slice = selection.content();
                     var textContent = slice.content.textBetween(0, slice.content.size, '\n');
-                    var openTag = "<span style=\"color: " + selectedColor + "\">";
+                    var openTag = "<span style=\"color: ".concat(selectedColor, "\">");
                     var closeTag = "</span>";
-                    var colored = "" + openTag + textContent + closeTag;
+                    var colored = "".concat(openTag).concat(textContent).concat(closeTag);
                     tr.replaceSelectionWith(schema.text(colored)).setSelection(createSelection(tr, selection, pmState.TextSelection, openTag, closeTag));
                     dispatch(tr);
                     return true;
@@ -323,7 +326,7 @@ function colorSyntaxPlugin(context, options) {
                 var tr = _b.tr, selection = _b.selection, schema = _b.schema;
                 if (selectedColor) {
                     var from = selection.from, to = selection.to;
-                    var attrs = { htmlAttrs: { style: "color: " + selectedColor } };
+                    var attrs = { htmlAttrs: { style: "color: ".concat(selectedColor) } };
                     var mark = schema.marks.span.create(attrs);
                     tr.addMark(from, to, mark);
                     dispatch(tr);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licium/editor-plugin-color-syntax",
-  "version": "3.2.11",
+  "version": "3.2.13",
   "description": "TOAST UI Editor : Color Syntax Plugin",
   "keywords": [
     "nhn",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "07cd62ac6be507292818851d306829ab9f2e2982"
+  "gitHead": "019ce2e0c8210746f0072903ebec7efe79a8374a"
 }