@licium/editor-plugin-text-align 1.0.0

package/dist/toastui-editor-plugin-text-align.css

@@ -0,0 +1,38 @@
+/*!
+ * TOAST UI Editor : Text Align Plugin
+ * @version 1.0.0 | Sat Jan 03 2026
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+.toastui-editor-toolbar-icons.alignLeft,
+.toastui-editor-toolbar-icons.alignCenter,
+.toastui-editor-toolbar-icons.alignRight {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDk2IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICA8bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIyNCIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9IjgiIHkxPSIxMCIgeDI9IjIwIiB5Mj0iMTAiIC8+CiAgPGxpbmUgeDE9IjgiIHkxPSIxNCIgeDI9IjI0IiB5Mj0iMTQiIC8+CiAgPGxpbmUgeDE9IjgiIHkxPSIxOCIgeDI9IjIwIiB5Mj0iMTgiIC8+CgogIDxsaW5lIHgxPSI0MCIgeTE9IjYiIHgyPSI1NiIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9IjQyIiB5MT0iMTAiIHgyPSI1NCIgeTI9IjEwIiAvPgogIDxsaW5lIHgxPSI0MCIgeTE9IjE0IiB4Mj0iNTYiIHkyPSIxNCIgLz4KICA8bGluZSB4MT0iNDIiIHkxPSIxOCIgeDI9IjU0IiB5Mj0iMTgiIC8+CgogIDxsaW5lIHgxPSI3MiIgeTE9IjYiIHgyPSI4OCIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9Ijc2IiB5MT0iMTAiIHgyPSI4OCIgeTI9IjEwIiAvPgogIDxsaW5lIHgxPSI3MiIgeTE9IjE0IiB4Mj0iODgiIHkyPSIxNCIgLz4KICA8bGluZSB4MT0iNzYiIHkxPSIxOCIgeDI9Ijg4IiB5Mj0iMTgiIC8+Cjwvc3ZnPg==);
+    background-size: 96px 24px;
+    background-repeat: no-repeat;
+    text-indent: -9999px;
+    /* Hide text fallback */
+}
+
+.toastui-editor-toolbar-icons.alignLeft {
+    background-position: 0 4px;
+}
+
+.toastui-editor-toolbar-icons.alignCenter {
+    background-position: -32px 4px;
+}
+
+.toastui-editor-toolbar-icons.alignRight {
+    background-position: -64px 4px;
+}
+
+.toastui-editor-defaultUI-toolbar button.active {
+    background-color: #fca0704d;
+    color: #333;
+}
+
+.toastui-editor-dark .toastui-editor-toolbar-icons.alignLeft,
+.toastui-editor-dark .toastui-editor-toolbar-icons.alignCenter,
+.toastui-editor-dark .toastui-editor-toolbar-icons.alignRight {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDk2IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNlZWUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICA8bGluZSB4MT0iOCIgeTE9IjYiIHgyPSIyNCIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9IjgiIHkxPSIxMCIgeDI9IjIwIiB5Mj0iMTAiIC8+CiAgPGxpbmUgeDE9IjgiIHkxPSIxNCIgeDI9IjI0IiB5Mj0iMTQiIC8+CiAgPGxpbmUgeDE9IjgiIHkxPSIxOCIgeDI9IjIwIiB5Mj0iMTgiIC8+CgogIDxsaW5lIHgxPSI0MCIgeTE9IjYiIHgyPSI1NiIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9IjQyIiB5MT0iMTAiIHgyPSI1NCIgeTI9IjEwIiAvPgogIDxsaW5lIHgxPSI0MCIgeTE9IjE0IiB4Mj0iNTYiIHkyPSIxNCIgLz4KICA8bGluZSB4MT0iNDIiIHkxPSIxOCIgeDI9IjU0IiB5Mj0iMTgiIC8+CgogIDxsaW5lIHgxPSI3MiIgeTE9IjYiIHgyPSI4OCIgeTI9IjYiIC8+CiAgPGxpbmUgeDE9Ijc2IiB5MT0iMTAiIHgyPSI4OCIgeTI9IjEwIiAvPgogIDxsaW5lIHgxPSI3MiIgeTE9IjE0IiB4Mj0iODgiIHkyPSIxNCIgLz4KICA8bGluZSB4MT0iNzYiIHkxPSIxOCIgeDI9Ijg4IiB5Mj0iMTgiIC8+Cjwvc3ZnPg==);
+}

package/dist/toastui-editor-plugin-text-align.js

@@ -0,0 +1,304 @@
+/*!
+ * TOAST UI Editor : Text Align Plugin
+ * @version 1.0.0 | Sat Jan 03 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();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["toastui"] = factory();
+	else
+		root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = root["toastui"]["Editor"] || {}, root["toastui"]["Editor"]["plugin"] = root["toastui"]["Editor"]["plugin"] || {}, root["toastui"]["Editor"]["plugin"]["textAlign"] = factory();
+})(self, function() {
+return /******/ (function() { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* 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 */ textAlignPlugin; }
+});
+
+;// CONCATENATED MODULE: ./src/i18n/langs.ts
+function addLangs(i18n) {
+    i18n.setLanguage(['en', 'en-US'], {
+        alignLeft: 'Align left',
+        alignCenter: 'Align center',
+        alignRight: 'Align right',
+    });
+    i18n.setLanguage(['de', 'de-DE'], {
+        alignLeft: 'Linksbündig',
+        alignCenter: 'Zentriert',
+        alignRight: 'Rechtsbündig',
+    });
+    // Add other languages as needed
+}
+
+;// CONCATENATED MODULE: ./src/index.ts
+
+
+var PREFIX = 'toastui-editor-';
+function createToolbarItemOption(text, commandName, i18n) {
+    return {
+        name: commandName,
+        command: commandName,
+        tooltip: i18n.get(commandName),
+        text: text,
+        className: PREFIX + "toolbar-icons " + commandName,
+    };
+}
+function textAlignPlugin(context, options) {
+    if (options === void 0) { options = {}; }
+    var i18n = context.i18n, eventEmitter = context.eventEmitter, _a = context.usageStatistics, usageStatistics = _a === void 0 ? true : _a;
+    addLangs(i18n);
+    // Active state listener
+    eventEmitter.listen('caretChange', function () {
+        updateToolbarState();
+    });
+    return {
+        markdownCommands: {
+            alignLeft: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                return execMarkdownAlign('left', selection, schema, tr, dispatch);
+            },
+            alignCenter: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                return execMarkdownAlign('center', selection, schema, tr, dispatch);
+            },
+            alignRight: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                return execMarkdownAlign('right', selection, schema, tr, dispatch);
+            },
+        },
+        wysiwygCommands: {
+            alignLeft: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                return execWysiwygAlign('left', selection, schema, tr, dispatch);
+            },
+            alignCenter: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                return execWysiwygAlign('center', selection, schema, tr, dispatch);
+            },
+            alignRight: function (payload, _a, dispatch) {
+                var tr = _a.tr, selection = _a.selection, schema = _a.schema;
+                return execWysiwygAlign('right', selection, schema, tr, dispatch);
+            },
+        },
+        toolbarItems: [
+            {
+                groupIndex: 0,
+                itemIndex: 3,
+                item: createToolbarItemOption('', 'alignLeft', i18n),
+            },
+            {
+                groupIndex: 0,
+                itemIndex: 4,
+                item: createToolbarItemOption('', 'alignCenter', i18n),
+            },
+            {
+                groupIndex: 0,
+                itemIndex: 5,
+                item: createToolbarItemOption('', 'alignRight', i18n),
+            },
+        ],
+        toHTMLRenderers: {
+            htmlInline: {
+                span: function (node, _a) {
+                    var entering = _a.entering, origin = _a.origin;
+                    var style = node.attrs ? node.attrs.style : null;
+                    if (style && style.indexOf('text-align') > -1) {
+                        return entering
+                            ? { type: 'openTag', tagName: 'span', attributes: { style: style } }
+                            : { type: 'closeTag', tagName: 'span' };
+                    }
+                    return origin();
+                },
+            },
+        },
+    };
+}
+function updateToolbarState() {
+    // 1. Reset all buttons
+    var buttons = document.querySelectorAll('.toastui-editor-toolbar-icons.alignLeft, .toastui-editor-toolbar-icons.alignCenter, .toastui-editor-toolbar-icons.alignRight');
+    buttons.forEach(function (btn) { return btn.classList.remove('active'); });
+    // 2. Determine active state
+    // Getting state from plugin context is hard.
+    // For Markdown: Parse current line of cursor?
+    // For WYSIWYG: Parse selection marks?
+    // Naive checker for demo quality:
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return;
+    var range = selection.getRangeAt(0);
+    var container = range.commonAncestorContainer;
+    if (container.nodeType === 3)
+        container = container.parentElement; // Text node -> Element
+    var el = container;
+    // Check for span with style
+    var activeAlign = null;
+    var current = el;
+    // Walk up a few levels to find span
+    while (current &&
+        current.classList &&
+        !current.classList.contains('ProseMirror') &&
+        !current.classList.contains('toastui-editor-contents')) {
+        if (current.tagName === 'SPAN' && current.style.textAlign) {
+            activeAlign = current.style.textAlign;
+            break;
+        }
+        current = current.parentElement;
+    }
+    if (!activeAlign) {
+        // Check inner text if in Markdown mode (Textarea)
+        // This is very hard because DOM is just text.
+        // We skip Markdown active state highlight for this iteration,
+        // focusing on WYSIWYG visual feedback.
+    }
+    if (activeAlign) {
+        var activeBtn = document.querySelector(".toastui-editor-toolbar-icons.align" + capitalize(activeAlign));
+        if (activeBtn)
+            activeBtn.classList.add('active');
+    }
+}
+function capitalize(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function execMarkdownAlign(alignType, selection, schema, tr, dispatch) {
+    var doc = tr.doc;
+    var from = selection.from, to = selection.to;
+    // Always expand to full line(s) to avoid nesting inside words
+    var $from = doc.resolve(from);
+    var $to = doc.resolve(to);
+    // In Markdown mode (CodeMirror-like), we usually want to operate on lines.
+    // We can use doc.resolve(from).blockRange() -> this gives the text block (paragraph).
+    // This is safer than char-level selection for block alignment.
+    var fromLine = $from.pos - $from.parentOffset; // Start of line
+    var toLine = $to.pos + ($to.parent.content.size - $to.parentOffset); // End of line
+    // Wait, doc.resolve in Markdown mode... TUI's internal doc structure for Markdown is just a series of blocks?
+    // Let's rely on blockRange() which TUI implementation respects.
+    var blockRange = $from.blockRange($to);
+    var targetFrom = from;
+    var targetTo = to;
+    if (blockRange) {
+        targetFrom = blockRange.start + 1; // +1 to skip start token? No, text nodes.
+        targetTo = blockRange.end - 1;
+        // Actually, let's look at the Slice content.
+        // If we use blockRange, we get the whole "Paragraph" structure.
+    }
+    // Fallback: If no blockRange (rare), use raw selection.
+    // But to fix the "nesting" issue, we MUST select the whole line content including any existing HTML tags.
+    // In TUI Markdown, each line is likely a textblock.
+    // Let's try to grab the whole block content.
+    var resolvedFrom = doc.resolve(from);
+    var startPos = resolvedFrom.start();
+    var endPos = resolvedFrom.end();
+    targetFrom = startPos;
+    targetTo = endPos;
+    var slice = doc.slice(targetFrom, targetTo);
+    var textContent = slice.content.textBetween(0, slice.content.size, '\n');
+    // Looser regex to match existing tags
+    // Matches: <span ...> ... </span>
+    var regex = /^\s*<span\s+[^>]*style="[^"]*text-align:\s*(left|center|right)[^"]*"[^>]*>([\s\S]*?)<\/span>\s*$/i;
+    var match = textContent.match(regex);
+    var newText = textContent;
+    var currentAlign = null;
+    if (match) {
+        currentAlign = match[1].toLowerCase();
+        newText = match[2]; // Inner content
+    }
+    var finalWrapped = newText;
+    if (currentAlign === alignType) {
+        // Toggle off: Just return the inner text (unwrap)
+        // newText is already stripped of the span
+    }
+    else {
+        // Apply new alignment
+        var style = "display: block; text-align: " + alignType;
+        finalWrapped = "<span style=\"" + style + "\">" + newText + "</span>";
+    }
+    try {
+        tr.replaceWith(targetFrom, targetTo, schema.text(finalWrapped));
+        dispatch(tr);
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}
+function execWysiwygAlign(alignType, selection, schema, tr, dispatch) {
+    var empty = selection.empty;
+    var styleBase = 'display: block; text-align: ';
+    var targetFrom = selection.from;
+    var targetTo = selection.to;
+    var markType = schema.marks.span;
+    if (!markType)
+        return false;
+    if (empty) {
+        var $from = selection.$from;
+        var blockRange = $from.blockRange();
+        if (blockRange) {
+            targetFrom = blockRange.start;
+            targetTo = blockRange.end;
+        }
+    }
+    var existingMark = null;
+    var existingAlign = null;
+    tr.doc.nodesBetween(targetFrom, targetTo, function (node) {
+        if (existingMark)
+            return false;
+        node.marks.forEach(function (mark) {
+            if (mark.type === markType && mark.attrs.style && mark.attrs.style.indexOf(styleBase) > -1) {
+                existingMark = mark;
+                var match = mark.attrs.style.match(/text-align: (left|center|right)/);
+                if (match)
+                    existingAlign = match[1];
+            }
+        });
+        return true;
+    });
+    if (existingMark) {
+        tr.removeMark(targetFrom, targetTo, existingMark);
+    }
+    if (existingAlign === alignType) {
+        dispatch(tr);
+        return true;
+    }
+    var style = "" + styleBase + alignType;
+    var attrs = { htmlAttrs: { style: style } };
+    var mark = markType.create(attrs);
+    tr.addMark(targetFrom, targetTo, mark);
+    dispatch(tr);
+    return true;
+}
+
+__webpack_exports__ = __webpack_exports__["default"];
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@licium/editor-plugin-text-align",
+    "version": "1.0.0",
+    "description": "TOAST UI Editor : Text Align Plugin",
+    "keywords": [
+        "nhn",
+        "nhn cloud",
+        "toast",
+        "toastui",
+        "toast-ui",
+        "editor",
+        "plugin",
+        "text-align",
+        "align"
+    ],
+    "main": "dist/toastui-editor-plugin-text-align.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/text-align"
+    },
+    "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"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import type { PluginContext, PluginInfo } from '@licium/editor';
+
+export type PluginOptions = object;
+
+export default function textAlignPlugin(context: PluginContext, options: PluginOptions): PluginInfo;