@techie_doubts/editor-plugin-code-syntax-highlight 3.1.0

package/dist/toastui-editor-plugin-code-syntax-highlight.js

@@ -0,0 +1,803 @@
+/*!
+ * TOAST UI Editor : Code Syntax Highlight Plugin
+ * @version 3.1.0 | Fri Feb 20 2026
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+/******/ (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 */ src; }
+});
+
+;// ./src/renderers/toHTMLRenderers.ts
+var BACKTICK_COUNT = 3;
+var LINE_NUM_RE = /^(.+?)=(\d*)$/;
+function parseInfoString(raw) {
+    var match = raw.match(LINE_NUM_RE);
+    if (match) {
+        return { lang: match[1], lineNumber: match[2] ? Number(match[2]) : 1 };
+    }
+    return { lang: raw, lineNumber: null };
+}
+function buildGutterHTML(lineNumber, lineCount) {
+    var nums = [];
+    for (var i = 0; i < lineCount; i += 1) {
+        nums.push(String(lineNumber + i));
+    }
+    return nums.join('\n');
+}
+function getHTMLRenderers(prism) {
+    return {
+        codeBlock: function (node) {
+            var _a = node, fenceLength = _a.fenceLength, info = _a.info;
+            var infoWords = info ? info.split(/\s+/) : [];
+            var preClasses = [];
+            var codeAttrs = {};
+            var preAttrs = {};
+            var lineNumber = null;
+            if (fenceLength > BACKTICK_COUNT) {
+                codeAttrs['data-backticks'] = fenceLength;
+            }
+            var content = node.literal;
+            if (infoWords.length && infoWords[0].length) {
+                var parsed = parseInfoString(infoWords[0]);
+                var lang = parsed.lang;
+                lineNumber = parsed.lineNumber;
+                preClasses.push("lang-" + lang);
+                codeAttrs['data-language'] = lang;
+                var registeredLang = prism.languages[lang];
+                if (registeredLang) {
+                    content = prism.highlight(node.literal, registeredLang, lang);
+                }
+            }
+            if (lineNumber !== null) {
+                var lineCount = (node.literal || '').replace(/\n$/, '').split('\n').length;
+                var gutterText = buildGutterHTML(lineNumber, lineCount);
+                preClasses.push('line-numbers');
+                preAttrs['data-line-numbers'] = gutterText;
+            }
+            return [
+                { type: 'openTag', tagName: 'pre', classNames: preClasses, attributes: preAttrs },
+                { type: 'openTag', tagName: 'code', attributes: codeAttrs },
+                { type: 'html', content: content },
+                { type: 'closeTag', tagName: 'code' },
+                { type: 'closeTag', tagName: 'pre' },
+            ];
+        },
+    };
+}
+
+;// ./src/utils/common.ts
+function flatten(arr) {
+    return arr.reduce(function (a, b) { return a.concat(Array.isArray(b) ? flatten(b) : b); }, []);
+}
+
+;// ./src/plugins/codeSyntaxHighlighting.ts
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+
+var NODE_TYPE = 'codeBlock';
+function findCodeBlocks(doc) {
+    var descendants = [];
+    doc.descendants(function (node, pos) {
+        if (node.isBlock && node.type.name === NODE_TYPE) {
+            descendants.push({ node: node, pos: pos });
+        }
+    });
+    return descendants;
+}
+function parseTokens(tokens, classNames) {
+    if (classNames === void 0) { classNames = []; }
+    if (typeof tokens === 'string') {
+        return [{ text: tokens, classes: classNames }];
+    }
+    return tokens.map(function (token) {
+        var _a = token, type = _a.type, alias = _a.alias;
+        var typeClassNames = [];
+        var aliasClassNames = [];
+        if (type) {
+            typeClassNames = ['token', type];
+        }
+        if (alias) {
+            aliasClassNames = typeof alias === 'string' ? [alias] : alias;
+        }
+        var classes = __spreadArray(__spreadArray(__spreadArray([], classNames), typeClassNames), aliasClassNames);
+        return typeof token === 'string'
+            ? {
+                text: token,
+                classes: classes,
+            }
+            : parseTokens(token.content, classes);
+    });
+}
+function getDecorations(doc, context, prism) {
+    var pmView = context.pmView;
+    var decorations = [];
+    var codeBlocks = findCodeBlocks(doc);
+    codeBlocks.forEach(function (_a) {
+        var pos = _a.pos, node = _a.node;
+        var language = node.attrs.language;
+        var registeredLang = prism.languages[language];
+        var prismTokens = registeredLang ? prism.tokenize(node.textContent, registeredLang) : [];
+        var nodeInfos = flatten(parseTokens(prismTokens));
+        var startPos = pos + 1;
+        nodeInfos.forEach(function (_a) {
+            var text = _a.text, classes = _a.classes;
+            var from = startPos;
+            var to = from + text.length;
+            startPos = to;
+            var classNames = classes.join(' ');
+            var decoration = pmView.Decoration.inline(from, to, {
+                class: classNames,
+            });
+            if (classNames.length) {
+                decorations.push(decoration);
+            }
+        });
+    });
+    return pmView.DecorationSet.create(doc, decorations);
+}
+function codeSyntaxHighlighting(context, prism) {
+    return new context.pmState.Plugin({
+        state: {
+            init: function (_, _a) {
+                var doc = _a.doc;
+                return getDecorations(doc, context, prism);
+            },
+            apply: function (tr, set) {
+                if (!tr.docChanged) {
+                    return set.map(tr.mapping, tr.doc);
+                }
+                return getDecorations(tr.doc, context, prism);
+            },
+        },
+        props: {
+            decorations: function (state) {
+                return this.getState(state);
+            },
+        },
+    });
+}
+
+;// external "prosemirror-state"
+var external_prosemirror_state_namespaceObject = require("prosemirror-state");
+;// ./src/utils/dom.ts
+function stringToNumber(value) {
+    return parseInt(value, 10);
+}
+function isPositionInBox(style, offsetX, offsetY) {
+    var left = stringToNumber(style.left);
+    var top = stringToNumber(style.top);
+    var width = stringToNumber(style.width) +
+        stringToNumber(style.paddingLeft) +
+        stringToNumber(style.paddingRight);
+    var height = stringToNumber(style.height) +
+        stringToNumber(style.paddingTop) +
+        stringToNumber(style.paddingBottom);
+    return offsetX >= left && offsetX <= left + width && offsetY >= top && offsetY <= top + height;
+}
+function removeNode(node) {
+    if (node.parentNode) {
+        node.parentNode.removeChild(node);
+    }
+}
+var CLS_PREFIX = 'toastui-editor-';
+function cls() {
+    var names = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        names[_i] = arguments[_i];
+    }
+    return names.map(function (className) { return "" + CLS_PREFIX + className; }).join(' ');
+}
+
+;// ./src/nodeViews/languageSelectBox.ts
+
+function css(element, key, value) {
+    if (typeof key === 'string') {
+        element.style[key] = value;
+        return;
+    }
+    Object.keys(key).forEach(function (k) {
+        element.style[k] = key[k];
+    });
+}
+var WRAPPER_CLASS_NAME = 'code-block-language';
+var INPUT_CLASS_NANE = 'code-block-language-input';
+var LIST_CLASS_NAME = 'code-block-language-list';
+var LANG_ATTR = 'data-language';
+var CODE_BLOCK_PADDING = 10;
+function getButtonsHTML(languages) {
+    return languages
+        .map(function (language) { return "<button type=\"button\" data-language=\"" + language + "\">" + language + "</button>"; })
+        .join('');
+}
+var LanguageSelectBox = /** @class */ (function () {
+    function LanguageSelectBox(rootEl, eventEmitter, languages) {
+        var _this = this;
+        this.buttons = [];
+        this.prevStoredLanguage = '';
+        this.onSelectToggleButton = function (ev) {
+            var target = ev.target;
+            var style = getComputedStyle(target, ':after');
+            var offsetX = ev.offsetX, offsetY = ev.offsetY;
+            if (isPositionInBox(style, offsetX, offsetY)) {
+                ev.preventDefault();
+                _this.toggleFocus();
+            }
+        };
+        this.onSelectLanguageButtons = function (ev) {
+            var target = ev.target;
+            var language = target.getAttribute(LANG_ATTR);
+            if (language) {
+                _this.selectLanguage(language);
+            }
+        };
+        this.handleKeydown = function (ev) {
+            var key = ev.key;
+            if (key === 'ArrowUp') {
+                _this.selectPrevLanguage();
+                ev.preventDefault();
+            }
+            else if (key === 'ArrowDown') {
+                _this.selectNextLanguage();
+                ev.preventDefault();
+            }
+            else if (key === 'Enter' || key === 'Tab') {
+                _this.storeInputLanguage();
+                ev.preventDefault();
+            }
+            else {
+                _this.hideList();
+            }
+        };
+        this.showLangugaeSelectBox = function (_a, language) {
+            var top = _a.top, right = _a.right;
+            if (language) {
+                _this.setLanguage(language);
+            }
+            _this.show();
+            var width = _this.input.parentElement.getBoundingClientRect().width;
+            css(_this.wrapper, {
+                top: top + CODE_BLOCK_PADDING + "px",
+                left: right - width - CODE_BLOCK_PADDING + "px",
+            });
+            _this.toggleFocus();
+        };
+        this.rootEl = rootEl;
+        this.eventEmitter = eventEmitter;
+        this.languages = languages;
+        this.createElement();
+        this.bindDOMEvent();
+        this.bindEvent();
+    }
+    LanguageSelectBox.prototype.createElement = function () {
+        this.wrapper = document.createElement('div');
+        this.wrapper.classList.add(cls(WRAPPER_CLASS_NAME));
+        this.createInputElement();
+        this.createLanguageListElement();
+        this.rootEl.appendChild(this.wrapper);
+        this.hide();
+    };
+    LanguageSelectBox.prototype.createInputElement = function () {
+        var wrapper = document.createElement('span');
+        wrapper.classList.add(cls(INPUT_CLASS_NANE));
+        var input = document.createElement('input');
+        input.type = 'text';
+        input.setAttribute('maxlength', '20');
+        this.input = input;
+        wrapper.appendChild(this.input);
+        this.wrapper.appendChild(wrapper);
+    };
+    LanguageSelectBox.prototype.createLanguageListElement = function () {
+        this.list = document.createElement('div');
+        this.list.classList.add(cls(LIST_CLASS_NAME));
+        var buttonsContainer = document.createElement('div');
+        buttonsContainer.classList.add('buttons');
+        buttonsContainer.innerHTML = getButtonsHTML(this.languages);
+        this.buttons = Array.from(buttonsContainer.children);
+        this.list.appendChild(buttonsContainer);
+        this.wrapper.appendChild(this.list);
+        this.activateButtonByIndex(0);
+        this.hideList();
+    };
+    LanguageSelectBox.prototype.bindDOMEvent = function () {
+        var _this = this;
+        this.wrapper.addEventListener('mousedown', this.onSelectToggleButton);
+        this.input.addEventListener('keydown', this.handleKeydown);
+        this.input.addEventListener('focus', function () { return _this.activateSelectBox(); });
+        this.input.addEventListener('blur', function () { return _this.inactivateSelectBox(); });
+        this.list.addEventListener('mousedown', this.onSelectLanguageButtons);
+    };
+    LanguageSelectBox.prototype.bindEvent = function () {
+        this.eventEmitter.listen('showCodeBlockLanguages', this.showLangugaeSelectBox);
+    };
+    LanguageSelectBox.prototype.activateSelectBox = function () {
+        this.wrapper.classList.add('active');
+        css(this.list, { display: 'block' });
+    };
+    LanguageSelectBox.prototype.inactivateSelectBox = function () {
+        this.input.value = this.prevStoredLanguage;
+        this.wrapper.classList.remove('active');
+        this.hideList();
+    };
+    LanguageSelectBox.prototype.toggleFocus = function () {
+        if (this.wrapper.classList.contains('active')) {
+            this.input.blur();
+        }
+        else {
+            this.input.focus();
+        }
+    };
+    LanguageSelectBox.prototype.storeInputLanguage = function () {
+        var selectedLanguage = this.input.value;
+        this.setLanguage(selectedLanguage);
+        this.hideList();
+        this.eventEmitter.emit('selectLanguage', selectedLanguage);
+    };
+    LanguageSelectBox.prototype.activateButtonByIndex = function (index) {
+        if (this.currentButton) {
+            this.currentButton.classList.remove('active');
+        }
+        if (this.buttons.length) {
+            this.currentButton = this.buttons[index];
+            this.input.value = this.currentButton.getAttribute(LANG_ATTR);
+            this.currentButton.classList.add('active');
+            this.currentButton.scrollIntoView();
+        }
+    };
+    LanguageSelectBox.prototype.selectLanguage = function (selectedLanguage) {
+        this.input.value = selectedLanguage;
+        this.storeInputLanguage();
+    };
+    LanguageSelectBox.prototype.selectPrevLanguage = function () {
+        var index = this.buttons.indexOf(this.currentButton) - 1;
+        if (index < 0) {
+            index = this.buttons.length - 1;
+        }
+        this.activateButtonByIndex(index);
+    };
+    LanguageSelectBox.prototype.selectNextLanguage = function () {
+        var index = this.buttons.indexOf(this.currentButton) + 1;
+        if (index >= this.buttons.length) {
+            index = 0;
+        }
+        this.activateButtonByIndex(index);
+    };
+    LanguageSelectBox.prototype.hideList = function () {
+        css(this.list, { display: 'none' });
+    };
+    LanguageSelectBox.prototype.show = function () {
+        css(this.wrapper, { display: 'inline-block' });
+    };
+    LanguageSelectBox.prototype.hide = function () {
+        css(this.wrapper, { display: 'none' });
+    };
+    LanguageSelectBox.prototype.setLanguage = function (language) {
+        this.prevStoredLanguage = language;
+        this.input.value = language;
+        var item = this.buttons.filter(function (button) { return button.getAttribute(LANG_ATTR) === language; });
+        if (item.length) {
+            var index = this.buttons.indexOf(item[0]);
+            this.activateButtonByIndex(index);
+        }
+    };
+    LanguageSelectBox.prototype.destroy = function () {
+        removeNode(this.wrapper);
+        this.eventEmitter.removeEventHandler('showCodeBlockLanguages', this.showLangugaeSelectBox);
+    };
+    return LanguageSelectBox;
+}());
+
+
+;// ./src/nodeViews/codeSyntaxHighlightView.ts
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+
+
+var codeSyntaxHighlightView_WRAPPER_CLASS_NAME = 'ww-code-block-highlighting';
+var GUTTER_CLASS_NAME = 'toastui-editor-ww-code-block-gutter';
+var TOOLBAR_CLASS = 'toastui-editor-code-block-toolbar';
+var LANG_LABEL_CLASS = 'toastui-editor-code-block-lang-label';
+var LINE_NUM_BADGE_CLASS = 'toastui-editor-line-number-badge';
+var LINE_NUM_INPUT_CLASS = 'toastui-editor-line-number-input';
+var COPY_BTN_CLASS = 'toastui-editor-code-block-copy';
+function getCustomAttrs(attrs) {
+    var htmlAttrs = attrs.htmlAttrs, classNames = attrs.classNames;
+    return __assign(__assign({}, htmlAttrs), { class: classNames ? classNames.join(' ') : null });
+}
+var CodeSyntaxHighlightView = /** @class */ (function () {
+    // eslint-disable-next-line max-params
+    function CodeSyntaxHighlightView(node, view, getPos, eventEmitter, languages) {
+        var _this = this;
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.eventEmitter = eventEmitter;
+        this.languages = languages;
+        this.contentDOM = null;
+        this.languageSelectBox = null;
+        this.languageEditing = false;
+        this.gutter = null;
+        this.toolbar = null;
+        this.languageBadge = null;
+        this.lineNumberBadge = null;
+        this.lineNumberInput = null;
+        this.copyBtn = null;
+        this.onCopyClick = function () {
+            var text = _this.node.textContent;
+            navigator.clipboard.writeText(text).then(function () {
+                if (_this.copyBtn) {
+                    _this.copyBtn.classList.add('copied');
+                    setTimeout(function () {
+                        if (_this.copyBtn) {
+                            _this.copyBtn.classList.remove('copied');
+                        }
+                    }, 1500);
+                }
+            });
+        };
+        this.commitLineNumber = function () {
+            if (!_this.lineNumberInput || typeof _this.getPos !== 'function') {
+                return;
+            }
+            var raw = _this.lineNumberInput.value.trim();
+            var parsed = parseInt(raw, 10);
+            var newLineNumber = Number.isNaN(parsed) || parsed < 0 ? null : parsed;
+            var current = _this.node.attrs.lineNumber;
+            if (newLineNumber === current) {
+                _this.lineNumberInput.value = current !== null ? String(current) : 'off';
+                return;
+            }
+            var pos = _this.getPos();
+            var tr = _this.view.state.tr;
+            tr.setNodeMarkup(pos, null, __assign(__assign({}, _this.node.attrs), { lineNumber: newLineNumber }));
+            _this.view.dispatch(tr);
+        };
+        this.onLineNumberKeyDown = function (e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                _this.commitLineNumber();
+            }
+            else if (e.key === 'Escape' && _this.lineNumberInput) {
+                var lineNumber = _this.node.attrs.lineNumber;
+                _this.lineNumberInput.value = lineNumber !== null ? String(lineNumber) : 'off';
+                _this.lineNumberInput.blur();
+            }
+        };
+        this.onToolbarMouseDown = function (ev) {
+            var tag = ev.target.tagName;
+            if (tag !== 'INPUT' && tag !== 'BUTTON') {
+                ev.preventDefault();
+            }
+            ev.stopPropagation();
+        };
+        this.onClickLanguageBadge = function (ev) {
+            ev.stopPropagation();
+            if (typeof _this.getPos === 'function') {
+                var pos = _this.view.coordsAtPos(_this.getPos());
+                _this.openLanguageSelectBox(pos);
+            }
+        };
+        this.onCodeBlockKeyDown = function (ev) {
+            var isSelectAllShortcut = (ev.metaKey || ev.ctrlKey) && !ev.shiftKey && !ev.altKey && ev.key.toLowerCase() === 'a';
+            if (!isSelectAllShortcut || typeof _this.getPos !== 'function') {
+                return;
+            }
+            if (_this.toolbar && ev.target instanceof Node && _this.toolbar.contains(ev.target)) {
+                return;
+            }
+            var pos = _this.getPos();
+            var state = _this.view.state;
+            var from = pos + 1;
+            var to = pos + _this.node.nodeSize - 1;
+            var maxPos = state.doc.content.size;
+            var safeFrom = Math.max(1, Math.min(from, maxPos));
+            var safeTo = Math.max(safeFrom, Math.min(to, maxPos));
+            _this.view.focus();
+            _this.view.dispatch(state.tr.setSelection(external_prosemirror_state_namespaceObject.TextSelection.create(state.doc, safeFrom, safeTo)));
+            ev.preventDefault();
+        };
+        this.onSelectLanguage = function (language) {
+            if (_this.languageEditing) {
+                _this.changeLanguage(language);
+            }
+        };
+        this.finishLanguageEditing = function () {
+            if (_this.languageEditing) {
+                _this.reset();
+            }
+        };
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.eventEmitter = eventEmitter;
+        this.languages = languages;
+        this.createElement();
+        this.bindDOMEvent();
+        this.bindEvent();
+    }
+    CodeSyntaxHighlightView.prototype.createElement = function () {
+        var _a = this.node.attrs, language = _a.language, lineNumber = _a.lineNumber;
+        var wrapper = document.createElement('div');
+        wrapper.setAttribute('data-language', language || 'text');
+        wrapper.classList.add(cls(codeSyntaxHighlightView_WRAPPER_CLASS_NAME));
+        wrapper.classList.add('has-toolbar');
+        if (lineNumber !== null) {
+            wrapper.classList.add('has-line-numbers');
+        }
+        var pre = this.createCodeBlockElement();
+        var code = pre.firstChild;
+        if (language) {
+            pre.classList.add("language-" + language);
+            code.classList.add("language-" + language);
+        }
+        if (lineNumber !== null) {
+            this.gutter = this.createGutter();
+            wrapper.appendChild(this.gutter);
+        }
+        wrapper.appendChild(pre);
+        this.toolbar = document.createElement('div');
+        this.toolbar.className = TOOLBAR_CLASS;
+        this.toolbar.contentEditable = 'false';
+        this.copyBtn = this.createCopyButton();
+        this.toolbar.appendChild(this.copyBtn);
+        this.lineNumberBadge = this.createLineNumberBadge();
+        this.toolbar.appendChild(this.lineNumberBadge);
+        this.languageBadge = document.createElement('div');
+        this.languageBadge.className = LANG_LABEL_CLASS;
+        this.languageBadge.textContent = language || 'text';
+        this.toolbar.appendChild(this.languageBadge);
+        wrapper.appendChild(this.toolbar);
+        this.dom = wrapper;
+        this.contentDOM = code;
+    };
+    CodeSyntaxHighlightView.prototype.createCodeBlockElement = function () {
+        var pre = document.createElement('pre');
+        var code = document.createElement('code');
+        var language = this.node.attrs.language;
+        var attrs = getCustomAttrs(this.node.attrs);
+        if (language) {
+            code.setAttribute('data-language', language);
+        }
+        Object.keys(attrs).forEach(function (attrName) {
+            if (attrs[attrName]) {
+                pre.setAttribute(attrName, attrs[attrName]);
+            }
+        });
+        pre.appendChild(code);
+        return pre;
+    };
+    CodeSyntaxHighlightView.prototype.createGutter = function () {
+        var el = document.createElement('div');
+        el.className = GUTTER_CLASS_NAME;
+        el.contentEditable = 'false';
+        this.fillGutter(el);
+        return el;
+    };
+    CodeSyntaxHighlightView.prototype.fillGutter = function (el) {
+        var lineNumber = this.node.attrs.lineNumber;
+        if (lineNumber === null) {
+            return;
+        }
+        var text = this.node.textContent;
+        var lineCount = text.split('\n').length;
+        var lines = [];
+        for (var i = 0; i < lineCount; i += 1) {
+            lines.push(String(lineNumber + i));
+        }
+        el.textContent = lines.join('\n');
+    };
+    CodeSyntaxHighlightView.prototype.updateGutter = function () {
+        var lineNumber = this.node.attrs.lineNumber;
+        if (lineNumber === null) {
+            if (this.gutter && this.gutter.parentElement) {
+                this.gutter.parentElement.removeChild(this.gutter);
+                this.gutter = null;
+                this.dom.classList.remove('has-line-numbers');
+            }
+            return;
+        }
+        if (!this.gutter) {
+            this.gutter = this.createGutter();
+            this.dom.insertBefore(this.gutter, this.dom.firstChild);
+            this.dom.classList.add('has-line-numbers');
+        }
+        else {
+            this.fillGutter(this.gutter);
+        }
+    };
+    CodeSyntaxHighlightView.prototype.createLineNumberBadge = function () {
+        var badge = document.createElement('div');
+        badge.className = LINE_NUM_BADGE_CLASS;
+        var label = document.createElement('span');
+        label.textContent = '#';
+        badge.appendChild(label);
+        var input = document.createElement('input');
+        var lineNumber = this.node.attrs.lineNumber;
+        input.type = 'text';
+        input.className = LINE_NUM_INPUT_CLASS;
+        input.value = lineNumber !== null ? String(lineNumber) : 'off';
+        input.placeholder = 'off';
+        badge.appendChild(input);
+        this.lineNumberInput = input;
+        return badge;
+    };
+    CodeSyntaxHighlightView.prototype.createCopyButton = function () {
+        var btn = document.createElement('button');
+        btn.className = COPY_BTN_CLASS;
+        btn.type = 'button';
+        btn.title = 'Copy code';
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('width', '14');
+        svg.setAttribute('height', '14');
+        var p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        p.setAttribute('fill', 'currentColor');
+        p.setAttribute('d', 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z');
+        svg.appendChild(p);
+        btn.appendChild(svg);
+        return btn;
+    };
+    CodeSyntaxHighlightView.prototype.bindDOMEvent = function () {
+        if (this.toolbar) {
+            this.toolbar.addEventListener('mousedown', this.onToolbarMouseDown);
+        }
+        if (this.languageBadge) {
+            this.languageBadge.addEventListener('click', this.onClickLanguageBadge);
+        }
+        if (this.copyBtn) {
+            this.copyBtn.addEventListener('click', this.onCopyClick);
+        }
+        if (this.lineNumberInput) {
+            this.lineNumberInput.addEventListener('blur', this.commitLineNumber);
+            this.lineNumberInput.addEventListener('keydown', this.onLineNumberKeyDown);
+        }
+        this.dom.addEventListener('keydown', this.onCodeBlockKeyDown);
+        this.view.dom.addEventListener('mousedown', this.finishLanguageEditing);
+        window.addEventListener('resize', this.finishLanguageEditing);
+    };
+    CodeSyntaxHighlightView.prototype.bindEvent = function () {
+        this.eventEmitter.listen('selectLanguage', this.onSelectLanguage);
+        this.eventEmitter.listen('scroll', this.finishLanguageEditing);
+        this.eventEmitter.listen('finishLanguageEditing', this.finishLanguageEditing);
+    };
+    CodeSyntaxHighlightView.prototype.openLanguageSelectBox = function (pos) {
+        this.languageSelectBox = new LanguageSelectBox(this.view.dom.parentElement, this.eventEmitter, this.languages);
+        this.eventEmitter.emit('showCodeBlockLanguages', pos, this.node.attrs.language);
+        this.languageEditing = true;
+    };
+    CodeSyntaxHighlightView.prototype.changeLanguage = function (language) {
+        if (typeof this.getPos === 'function') {
+            this.reset();
+            var pos = this.getPos();
+            var tr = this.view.state.tr;
+            tr.setNodeMarkup(pos, null, __assign(__assign({}, this.node.attrs), { language: language }));
+            this.view.dispatch(tr);
+        }
+    };
+    CodeSyntaxHighlightView.prototype.reset = function () {
+        if (this.languageSelectBox) {
+            this.languageSelectBox.destroy();
+            this.languageSelectBox = null;
+        }
+        this.languageEditing = false;
+    };
+    CodeSyntaxHighlightView.prototype.stopEvent = function () {
+        return true;
+    };
+    CodeSyntaxHighlightView.prototype.update = function (node) {
+        if (!node.sameMarkup(this.node)) {
+            return false;
+        }
+        this.node = node;
+        this.updateGutter();
+        return true;
+    };
+    CodeSyntaxHighlightView.prototype.destroy = function () {
+        this.reset();
+        if (this.toolbar) {
+            this.toolbar.removeEventListener('mousedown', this.onToolbarMouseDown);
+        }
+        if (this.languageBadge) {
+            this.languageBadge.removeEventListener('click', this.onClickLanguageBadge);
+        }
+        if (this.copyBtn) {
+            this.copyBtn.removeEventListener('click', this.onCopyClick);
+        }
+        if (this.lineNumberInput) {
+            this.lineNumberInput.removeEventListener('blur', this.commitLineNumber);
+            this.lineNumberInput.removeEventListener('keydown', this.onLineNumberKeyDown);
+        }
+        this.dom.removeEventListener('keydown', this.onCodeBlockKeyDown);
+        this.view.dom.removeEventListener('mousedown', this.finishLanguageEditing);
+        window.removeEventListener('resize', this.finishLanguageEditing);
+        this.eventEmitter.removeEventHandler('selectLanguage', this.onSelectLanguage);
+        this.eventEmitter.removeEventHandler('scroll', this.finishLanguageEditing);
+        this.eventEmitter.removeEventHandler('finishLanguageEditing', this.finishLanguageEditing);
+    };
+    return CodeSyntaxHighlightView;
+}());
+function createCodeSyntaxHighlightView(languages) {
+    return function (node, view, getPos, emitter) {
+        return new CodeSyntaxHighlightView(node, view, getPos, emitter, languages);
+    };
+}
+
+;// ./src/plugin.ts
+
+
+
+function codeSyntaxHighlightPlugin(context, options) {
+    if (options) {
+        var eventEmitter = context.eventEmitter;
+        var prism_1 = options.highlighter;
+        eventEmitter.addEventType('showCodeBlockLanguages');
+        eventEmitter.addEventType('selectLanguage');
+        eventEmitter.addEventType('finishLanguageEditing');
+        var languages_1 = prism_1.languages;
+        var registerdlanguages = Object.keys(languages_1).filter(function (language) { return typeof languages_1[language] !== 'function'; });
+        return {
+            toHTMLRenderers: getHTMLRenderers(prism_1),
+            wysiwygPlugins: [function () { return codeSyntaxHighlighting(context, prism_1); }],
+            wysiwygNodeViews: {
+                codeBlock: createCodeSyntaxHighlightView(registerdlanguages),
+            },
+        };
+    }
+    return {};
+}
+
+;// ./src/index.ts
+
+
+// Prevent to highlight all code elements automatically.
+// @link https://prismjs.com/docs/Prism.html#.manual
+// eslint-disable-next-line no-undefined
+if (typeof window !== 'undefined') {
+    window.Prism = window.Prism || {};
+    window.Prism.manual = true;
+}
+/* harmony default export */ var src = (codeSyntaxHighlightPlugin);
+
+module.exports = __webpack_exports__["default"];
+/******/ })()
+;