Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@toast-ui/editor-plugin-color-syntax

Package Overview
Dependencies
Maintainers
2
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@toast-ui/editor-plugin-color-syntax - npm Package Compare versions

Comparing version 1.0.1 to 3.0.0-alpha.0

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

1099

dist/toastui-editor-plugin-color-syntax.js
/*!
* TOAST UI Editor : Color Syntax Plugin
* @version 1.0.1 | Mon Jul 20 2020
* @version 3.0.0-alpha.0 | Thu May 27 2021
* @author NHN FE Development Lab <dl_javascript@nhn.com>
* @license MIT
*/
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* 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;
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })
/******/ }();
/******/
/******/ /* 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); }
/******/ }();
/******/
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var __webpack_exports__ = {};
"use strict";
/**
* @fileoverview Check whether the given variable is a string or not.
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ colorSyntaxPlugin; }
});
;// CONCATENATED 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_namespaceObject = require("tui-color-picker");;
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_namespaceObject);
;// CONCATENATED MODULE: ./src/index.ts
/**
* Check whether the given variable is a string or not.
* If the given variable is a string, return true.
* @param {*} obj - Target for checking
* @returns {boolean} Is string?
* @memberof module:type
*/
function isString(obj) {
return typeof obj === 'string' || obj instanceof String;
}
module.exports = isString;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Execute the provided callback once for each property of object(or element of array) which actually exist.
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
var isArray = __webpack_require__(8);
var forEachArray = __webpack_require__(9);
var forEachOwnProperties = __webpack_require__(10);
/**
* @module collection
*/
/**
* Execute the provided callback once for each property of object(or element of array) which actually exist.
* If the object is Array-like object(ex-arguments object), It needs to transform to Array.(see 'ex2' of example).
* If the callback function returns false, the loop will be stopped.
* Callback function(iteratee) is invoked with three arguments:
* 1) The value of the property(or The value of the element)
* 2) The name of the property(or The index of the element)
* 3) The object being traversed
* @param {Object} obj The object that will be traversed
* @param {function} iteratee Callback function
* @param {Object} [context] Context(this) of callback function
* @memberof module:collection
* @example
* var forEach = require('tui-code-snippet/collection/forEach'); // node, commonjs
*
* var sum = 0;
*
* forEach([1,2,3], function(value){
* sum += value;
* });
* alert(sum); // 6
*
* // In case of Array-like object
* var array = Array.prototype.slice.call(arrayLike); // change to array
* forEach(array, function(value){
* sum += value;
* });
*/
function forEach(obj, iteratee, context) {
if (isArray(obj)) {
forEachArray(obj, iteratee, context);
} else {
forEachOwnProperties(obj, iteratee, context);
}
}
module.exports = forEach;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Get event collection for specific HTML element
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
var EVENT_KEY = '_feEventKey';
/**
* Get event collection for specific HTML element
* @param {HTMLElement} element - HTML element
* @param {string} type - event type
* @returns {array}
* @private
*/
function safeEvent(element, type) {
var events = element[EVENT_KEY];
var handlers;
if (!events) {
events = element[EVENT_KEY] = {};
}
handlers = events[type];
if (!handlers) {
handlers = events[type] = [];
}
return handlers;
}
module.exports = safeEvent;
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = require("tui-color-picker");
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Setting element style
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
var isString = __webpack_require__(0);
var forEach = __webpack_require__(1);
/**
* Setting element style
* @param {(HTMLElement|SVGElement)} element - element to setting style
* @param {(string|object)} key - style prop name or {prop: value} pair object
* @param {string} [value] - style value
* @memberof module:domUtil
*/
function css(element, key, value) {
var style = element.style;
if (isString(key)) {
style[key] = value;
return;
}
forEach(key, function(v, k) {
style[k] = v;
});
}
module.exports = css;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Bind DOM events
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
var isString = __webpack_require__(0);
var forEach = __webpack_require__(1);
var safeEvent = __webpack_require__(2);
/**
* Bind DOM events.
* @param {HTMLElement} element - element to bind events
* @param {(string|object)} types - Space splitted events names or eventName:handler object
* @param {(function|object)} handler - handler function or context for handler method
* @param {object} [context] context - context for handler method.
* @memberof module:domEvent
* @example
* var div = document.querySelector('div');
*
* // Bind one event to an element.
* on(div, 'click', toggle);
*
* // Bind multiple events with a same handler to multiple elements at once.
* // Use event names splitted by a space.
* on(div, 'mouseenter mouseleave', changeColor);
*
* // Bind multiple events with different handlers to an element at once.
* // Use an object which of key is an event name and value is a handler function.
* on(div, {
* keydown: highlight,
* keyup: dehighlight
* });
*
* // Set a context for handler method.
* var name = 'global';
* var repository = {name: 'CodeSnippet'};
* on(div, 'drag', function() {
* console.log(this.name);
* }, repository);
* // Result when you drag a div: "CodeSnippet"
*/
function on(element, types, handler, context) {
if (isString(types)) {
forEach(types.split(/\s+/g), function(type) {
bindEvent(element, type, handler, context);
});
return;
}
forEach(types, function(func, type) {
bindEvent(element, type, func, handler);
});
}
/**
* Bind DOM events
* @param {HTMLElement} element - element to bind events
* @param {string} type - events name
* @param {function} handler - handler function or context for handler method
* @param {object} [context] context - context for handler method.
* @private
*/
function bindEvent(element, type, handler, context) {
/**
* Event handler
* @param {Event} e - event object
*/
function eventHandler(e) {
handler.call(context || element, e || window.event);
}
if ('addEventListener' in element) {
element.addEventListener(type, eventHandler);
} else if ('attachEvent' in element) {
element.attachEvent('on' + type, eventHandler);
}
memorizeHandler(element, type, handler, eventHandler);
}
/**
* Memorize DOM event handler for unbinding.
* @param {HTMLElement} element - element to bind events
* @param {string} type - events name
* @param {function} handler - handler function that user passed at on() use
* @param {function} wrappedHandler - handler function that wrapped by domevent for implementing some features
* @private
*/
function memorizeHandler(element, type, handler, wrappedHandler) {
var events = safeEvent(element, type);
var existInEvents = false;
forEach(events, function(obj) {
if (obj.handler === handler) {
existInEvents = true;
return false;
}
return true;
});
if (!existInEvents) {
events.push({
handler: handler,
wrappedHandler: wrappedHandler
});
}
}
module.exports = on;
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Unbind DOM events
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
var isString = __webpack_require__(0);
var forEach = __webpack_require__(1);
var safeEvent = __webpack_require__(2);
/**
* Unbind DOM events
* If a handler function is not passed, remove all events of that type.
* @param {HTMLElement} element - element to unbind events
* @param {(string|object)} types - Space splitted events names or eventName:handler object
* @param {function} [handler] - handler function
* @memberof module:domEvent
* @example
* // Following the example of domEvent#on
*
* // Unbind one event from an element.
* off(div, 'click', toggle);
*
* // Unbind multiple events with a same handler from multiple elements at once.
* // Use event names splitted by a space.
* off(element, 'mouseenter mouseleave', changeColor);
*
* // Unbind multiple events with different handlers from an element at once.
* // Use an object which of key is an event name and value is a handler function.
* off(div, {
* keydown: highlight,
* keyup: dehighlight
* });
*
* // Unbind events without handlers.
* off(div, 'drag');
*/
function off(element, types, handler) {
if (isString(types)) {
forEach(types.split(/\s+/g), function(type) {
unbindEvent(element, type, handler);
});
return;
}
forEach(types, function(func, type) {
unbindEvent(element, type, func);
});
}
/**
* Unbind DOM events
* If a handler function is not passed, remove all events of that type.
* @param {HTMLElement} element - element to unbind events
* @param {string} type - events name
* @param {function} [handler] - handler function
* @private
*/
function unbindEvent(element, type, handler) {
var events = safeEvent(element, type);
var index;
if (!handler) {
forEach(events, function(item) {
removeHandler(element, type, item.wrappedHandler);
});
events.splice(0, events.length);
} else {
forEach(events, function(item, idx) {
if (handler === item.handler) {
removeHandler(element, type, item.wrappedHandler);
index = idx;
return false;
}
return true;
});
events.splice(index, 1);
}
}
/**
* Remove an event handler
* @param {HTMLElement} element - An element to remove an event
* @param {string} type - event type
* @param {function} handler - event handler
* @private
*/
function removeHandler(element, type, handler) {
if ('removeEventListener' in element) {
element.removeEventListener(type, handler);
} else if ('detachEvent' in element) {
element.detachEvent('on' + type, handler);
}
}
module.exports = off;
/***/ }),
/* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return colorSyntaxPlugin; });
/* harmony import */ var tui_color_picker__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
/* harmony import */ var tui_color_picker__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(tui_color_picker__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var tui_code_snippet_domUtil_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var tui_code_snippet_domUtil_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(tui_code_snippet_domUtil_css__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var tui_code_snippet_domEvent_on__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
/* harmony import */ var tui_code_snippet_domEvent_on__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(tui_code_snippet_domEvent_on__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var tui_code_snippet_domEvent_off__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
/* harmony import */ var tui_code_snippet_domEvent_off__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(tui_code_snippet_domEvent_off__WEBPACK_IMPORTED_MODULE_3__);
/**
* @fileoverview Implements color syntax plugin
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
var colorSyntaxRx = /\{color:(.+?)}(.*?)\{color}/g;
var colorHtmlRx = /<span (?:class="colour" )?style="color:(.+?)"(?: class="colour")?>(.*?)/g;
var colorHtmlCompleteRx = /<span (?:class="colour" )?style="color:(.+?)"(?: class="colour")?>(.*?)<\/span>/g;
var decimalColorRx = /rgb\((\d+)[, ]+(\d+)[, ]+(\d+)\)/g;
var RESET_COLOR = '#181818';
var lastScrollTop = 0;
/**
* Set style color
* @param {SquireExt} sq - squire ext instance
* @param {string} color - color sting value
* @ignore
*/
function setStyleColor(sq, color) {
if (!sq.hasFormat('PRE')) {
if (color === RESET_COLOR) {
sq.changeFormat(null, {
class: 'colour',
tag: 'span'
});
} else {
sq.setTextColour(color);
}
}
}
/**
* Get scrollTop of squire
* @param {SquireExt} sq - squire ext instance
* @ignore
*/
function getScrollTopForReFocus(sq) {
return sq.getRoot().parentNode.scrollTop;
}
/**
* Create button element for applying color
* @param {string} text - button's text
* @returns {HTMLElement} button element
* @ignore
*/
var PREFIX = 'toastui-editor-';
function createApplyButton(text) {
var button = document.createElement('button');
button.setAttribute('type', 'button');
button.className = 'te-apply-button';
button.innerHTML = text;
return button;
var button = document.createElement('button');
button.setAttribute('type', 'button');
button.textContent = text;
return button;
}
/**
* Initialize UI
* @param {object} editor - Editor instance
* @param {Array.<string>} preset - Preset for color palette
* @ignore
*/
function initUI(editor, preset) {
var name = 'colorSyntax';
var className = 'tui-color';
var i18n = editor.i18n;
var toolbar = editor.getUI().getToolbar();
var usageStatistics = editor.options.usageStatistics;
editor.eventManager.addEventType('colorButtonClicked');
toolbar.insertItem(3, {
type: 'button',
options: {
name: name,
className: className,
event: 'colorButtonClicked',
tooltip: i18n.get('Text color')
}
});
var colorSyntaxButtonIndex = toolbar.indexOfItem(name);
var _toolbar$getItem = toolbar.getItem(colorSyntaxButtonIndex),
button = _toolbar$getItem.el;
var colorPickerContainer = document.createElement('div');
var buttonBar = createApplyButton("" + i18n.get('OK'));
var cpOptions = {
container: colorPickerContainer,
usageStatistics: usageStatistics
};
if (preset) {
cpOptions.preset = preset;
}
var colorPicker = tui_color_picker__WEBPACK_IMPORTED_MODULE_0___default.a.create(cpOptions);
var selectedColor = colorPicker.getColor();
colorPickerContainer.appendChild(buttonBar);
var popup = editor.getUI().createPopup({
header: false,
title: null,
content: colorPickerContainer,
className: 'tui-popup-color',
target: editor.getUI().getToolbar().el,
css: {
width: 'auto',
position: 'absolute'
}
});
editor.eventManager.listen('focus', function () {
popup.hide();
if (editor.isWysiwygMode() && lastScrollTop) {
editor.getSquire().getRoot().parentNode.scrollTop = lastScrollTop;
lastScrollTop = 0;
}
});
editor.eventManager.listen('colorButtonClicked', function () {
if (popup.isShow()) {
popup.hide();
return;
}
var offsetTop = button.offsetTop,
offsetLeft = button.offsetLeft,
offsetHeight = button.offsetHeight;
tui_code_snippet_domUtil_css__WEBPACK_IMPORTED_MODULE_1___default()(popup.el, {
top: offsetTop + offsetHeight + "px",
left: offsetLeft + "px"
});
colorPicker.slider.toggle(true);
editor.eventManager.emit('closeAllPopup');
popup.show();
});
editor.eventManager.listen('closeAllPopup', function () {
popup.hide();
});
editor.eventManager.listen('removeEditor', function () {
colorPicker.off('selectColor');
tui_code_snippet_domEvent_off__WEBPACK_IMPORTED_MODULE_3___default()(popup.el.querySelector('.te-apply-button'), 'click');
popup.remove();
});
colorPicker.on('selectColor', function (e) {
selectedColor = e.color;
if (e.origin === 'palette') {
editor.exec('color', selectedColor);
popup.hide();
}
});
tui_code_snippet_domEvent_on__WEBPACK_IMPORTED_MODULE_2___default()(popup.el.querySelector('.te-apply-button'), 'click', function () {
editor.exec('color', selectedColor);
});
function createToolbarItemOption(colorPickerContainer) {
return {
name: 'color',
tooltip: 'Text color',
className: PREFIX + "toolbar-icons color",
popup: {
className: PREFIX + "popup-color",
body: colorPickerContainer,
style: { width: 'auto' },
},
};
}
// @TODO: add custom syntax for plugin
/**
* Make custom color syntax
* @param {string} text - Text content
* @param {string} color - Color value
* @returns {object} - wrapped text and range(from, to)
* @ignore
*/
function makeCustomColorSyntaxAndTextRange(text, color) {
return wrapTextAndGetRange("{color:" + color + "}", text, '{color}');
}
/**
* Make HTML color syntax by given text content and color value
* @param {string} text Text - content
* @param {string} color Color - value
* @returns {object} - wrapped text and range(from, to)
* @ignore
*/
function makeHTMLColorSyntaxAndTextRange(text, color) {
return wrapTextAndGetRange("<span style=\"color:" + color + "\">", text, '</span>');
}
/**
* Wrap text with pre & post and return with text range
* @param {string} pre - text pre
* @param {string} text - text
* @param {string} post - text post
* @returns {object} - wrapped text and range(from, to)
* @ignore
*/
function wrapTextAndGetRange(pre, text, post) {
return {
result: "" + pre + text + post,
from: pre.length,
to: pre.length + text.length
};
}
/**
* Change decimal color values to hexadecimal color value
* @param {string} color Color value string
* @returns {string}
* @ignore
*/
function changeDecColorsToHex(color) {
return color.replace(decimalColorRx, function (colorValue, r, g, b) {
var hr = changeDecColorToHex(r);
var hg = changeDecColorToHex(g);
var hb = changeDecColorToHex(b);
return "#" + hr + hg + hb;
});
}
/**
* Change individual dec color value to hex color
* @param {string} color - individual color value
* @returns {string} - zero padded color string
* @ignore
*/
function changeDecColorToHex(color) {
var hexColor = parseInt(color, 10);
hexColor = hexColor.toString(16);
hexColor = addDoubleZeroPad(hexColor);
return hexColor;
}
/**
* Add leading 2 zeros number string
* @param {string} numberStr - number string
* @returns {string}
* @ignore
*/
function addDoubleZeroPad(numberStr) {
var padded = "00" + numberStr;
return padded.substr(padded.length - 2);
}
/**
* Color syntax plugin
* @param {Editor|Viewer} editor - instance of Editor or Viewer
* @param {Object} context - plugin context for communicating with editor
* @param {Object} options - options for plugin

@@ -755,238 +83,75 @@ * @param {Array.<string>} [options.preset] - preset for color palette (ex: ['#181818', '#292929'])

*/
function colorSyntaxPlugin(editor, options) {
if (options === void 0) {
options = {};
}
var _options = options,
preset = _options.preset,
_options$useCustomSyn = _options.useCustomSyntax,
useCustomSyntax = _options$useCustomSyn === void 0 ? false : _options$useCustomSyn;
editor.eventManager.listen('convertorAfterMarkdownToHtmlConverted', function (html) {
var replacement;
if (!useCustomSyntax) {
replacement = html;
} else {
replacement = html.replace(colorSyntaxRx, function (matched, p1, p2) {
return makeHTMLColorSyntaxAndTextRange(p2, p1).result;
});
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;
var preset = options.preset;
var container = document.createElement('div');
var colorPickerOption = { container: container, usageStatistics: usageStatistics };
if (preset) {
colorPickerOption.preset = preset;
}
return replacement;
});
editor.eventManager.listen('convertorAfterHtmlToMarkdownConverted', function (markdown) {
var findRx = useCustomSyntax ? colorHtmlCompleteRx : colorHtmlRx;
return markdown.replace(findRx, function (founded, color, text) {
var replacement;
if (color.match(decimalColorRx)) {
color = changeDecColorsToHex(color);
}
if (!useCustomSyntax) {
replacement = founded.replace(/ ?class="colour" ?/g, ' ').replace(decimalColorRx, color);
} else {
replacement = makeCustomColorSyntaxAndTextRange(text, color).result;
}
return replacement;
var colorPicker = external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default().create(colorPickerOption);
var button = createApplyButton(i18n.get('OK'));
button.addEventListener('click', function () {
var selectedColor = colorPicker.getColor();
eventEmitter.emit('command', 'color', { selectedColor: selectedColor });
eventEmitter.emit('closePopup');
});
});
if (!editor.isViewer() && editor.getUI().name === 'default') {
editor.addCommand('markdown', {
name: 'color',
exec: function exec(mde, color) {
var cm = mde.getEditor();
var rangeFrom = cm.getCursor('from');
var rangeTo = cm.getCursor('to');
var replacedText;
var replacedFrom;
if (!color) {
return;
}
if (!useCustomSyntax) {
var _makeHTMLColorSyntaxA = makeHTMLColorSyntaxAndTextRange(cm.getSelection(), color);
replacedText = _makeHTMLColorSyntaxA.result;
replacedFrom = _makeHTMLColorSyntaxA.from;
cm.replaceSelection(replacedText);
} else {
var _makeCustomColorSynta = makeCustomColorSyntaxAndTextRange(cm.getSelection(), color);
replacedText = _makeCustomColorSynta.result;
replacedFrom = _makeCustomColorSynta.from;
cm.replaceSelection(replacedText);
}
cm.setSelection({
line: rangeFrom.line,
ch: rangeFrom.ch + replacedFrom
}, {
line: rangeTo.line,
ch: rangeFrom.line === rangeTo.line ? rangeTo.ch + replacedFrom : rangeTo.ch
});
mde.focus();
}
});
editor.addCommand('wysiwyg', {
name: 'color',
exec: function exec(wwe, color) {
if (!color) {
return;
}
var sq = wwe.getEditor();
var tableSelectionManager = wwe.componentManager.getManager('tableSelection'); // Cache scrollTop before change text color.
// Because scrollTop is set 0 when focus() is called.
// focus() is called when change text color.
lastScrollTop = getScrollTopForReFocus(sq);
if (sq.hasFormat('table') && tableSelectionManager.getSelectedCells().length) {
tableSelectionManager.styleToSelectedCells(setStyleColor, color);
var range = sq.getSelection();
range.collapse(true);
sq.setSelection(range);
} else {
setStyleColor(sq, color);
}
}
});
initUI(editor, preset);
}
colorPicker.slider.toggle(true);
container.appendChild(button);
var toolbarItem = createToolbarItemOption(container);
return {
markdownCommands: {
color: function (_a, _b, dispatch) {
var selectedColor = _a.selectedColor;
var tr = _b.tr, selection = _b.selection, schema = _b.schema;
if (selectedColor) {
var slice = selection.content();
var textContent = slice.content.textBetween(0, slice.content.size, '\n');
var colored = "<span style=\"color: " + selectedColor + "\">" + textContent + "</span>";
tr.replaceSelectionWith(schema.text(colored));
dispatch(tr);
return true;
}
return false;
},
},
wysiwygCommands: {
color: function (_a, _b, dispatch) {
var selectedColor = _a.selectedColor;
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 mark = schema.marks.span.create(attrs);
tr.addMark(from, to, mark);
dispatch(tr);
return true;
}
return false;
},
},
toolbarItems: [
{
groupIndex: 0,
itemIndex: 3,
item: toolbarItem,
},
],
toHTMLRenderers: {
htmlInline: {
// @ts-expect-error
span: function (node, _a) {
var entering = _a.entering;
return entering
? { type: 'openTag', tagName: 'span', attributes: node.attrs }
: { type: 'closeTag', tagName: 'span' };
},
},
},
};
}
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Check whether the given variable is an instance of Array or not.
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
/**
* Check whether the given variable is an instance of Array or not.
* If the given variable is an instance of Array, return true.
* @param {*} obj - Target for checking
* @returns {boolean} Is array instance?
* @memberof module:type
*/
function isArray(obj) {
return obj instanceof Array;
}
module.exports = isArray;
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Execute the provided callback once for each element present in the array(or Array-like object) in ascending order.
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
/**
* Execute the provided callback once for each element present
* in the array(or Array-like object) in ascending order.
* If the callback function returns false, the loop will be stopped.
* Callback function(iteratee) is invoked with three arguments:
* 1) The value of the element
* 2) The index of the element
* 3) The array(or Array-like object) being traversed
* @param {Array|Arguments|NodeList} arr The array(or Array-like object) that will be traversed
* @param {function} iteratee Callback function
* @param {Object} [context] Context(this) of callback function
* @memberof module:collection
* @example
* var forEachArray = require('tui-code-snippet/collection/forEachArray'); // node, commonjs
*
* var sum = 0;
*
* forEachArray([1,2,3], function(value){
* sum += value;
* });
* alert(sum); // 6
*/
function forEachArray(arr, iteratee, context) {
var index = 0;
var len = arr.length;
context = context || null;
for (; index < len; index += 1) {
if (iteratee.call(context, arr[index], index, arr) === false) {
break;
}
}
}
module.exports = forEachArray;
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/**
* @fileoverview Execute the provided callback once for each property of object which actually exist.
* @author NHN FE Development Lab <dl_javascript@nhn.com>
*/
/**
* Execute the provided callback once for each property of object which actually exist.
* If the callback function returns false, the loop will be stopped.
* Callback function(iteratee) is invoked with three arguments:
* 1) The value of the property
* 2) The name of the property
* 3) The object being traversed
* @param {Object} obj The object that will be traversed
* @param {function} iteratee Callback function
* @param {Object} [context] Context(this) of callback function
* @memberof module:collection
* @example
* var forEachOwnProperties = require('tui-code-snippet/collection/forEachOwnProperties'); // node, commonjs
*
* var sum = 0;
*
* forEachOwnProperties({a:1,b:2,c:3}, function(value){
* sum += value;
* });
* alert(sum); // 6
*/
function forEachOwnProperties(obj, iteratee, context) {
var key;
context = context || null;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (iteratee.call(context, obj[key], key, obj) === false) {
break;
}
}
}
}
module.exports = forEachOwnProperties;
/***/ })
/******/ ])["default"];
module.exports = __webpack_exports__.default;
/******/ })()
;

46

package.json
{
"name": "@toast-ui/editor-plugin-color-syntax",
"version": "1.0.1",
"version": "3.0.0-alpha.0",
"description": "TOAST UI Editor : Color Syntax Plugin",

@@ -18,3 +18,4 @@ "keywords": [

"dist/*.js",
"index.d.ts"
"dist/*.css",
"types/index.d.ts"
],

@@ -34,37 +35,12 @@ "author": "NHN FE Development Lab <dl_javascript@nhn.com>",

"scripts": {
"test": "karma start --no-single-run",
"test:ne": "cross-env KARMA_SERVER=ne karma start",
"serve": "webpack-dev-server",
"build:cdn": "webpack --mode=production --cdn & webpack --mode=production --cdn --minify",
"build": "webpack --mode=production && npm run build:cdn"
"lint": "eslint .",
"test:types": "tsc",
"test": "jest --watch",
"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": {
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"@toast-ui/editor": "^2.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-istanbul": "^6.0.0",
"cross-env": "^6.0.3",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-config-tui": "^3.0.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine-core": "^3.5.0",
"karma": "^4.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "^3.1.0",
"karma-jasmine-ajax": "^0.1.13",
"karma-jasmine-jquery": "^0.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webdriver-launcher": "github:nhn/karma-webdriver-launcher#v1.2.0",
"karma-webpack": "^4.0.2",
"prettier": "^1.19.1",
"terser-webpack-plugin": "^2.3.1",
"tui-code-snippet": "^2.3.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
"cross-env": "^6.0.3"
},

@@ -71,0 +47,0 @@ "dependencies": {

index.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc