@licium/editor-plugin-color-syntax 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 NHN Cloud Corp.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,167 @@
1
+ # TOAST UI Editor : Color Syntax Plugin
2
+
3
+ > This is a plugin of [TOAST UI Editor](https://github.com/nhn/tui.editor/tree/master/apps/editor) to color editing text.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@toast-ui/editor-plugin-color-syntax.svg)](https://www.npmjs.com/package/@toast-ui/editor-plugin-color-syntax)
6
+
7
+ ![color-syntax](https://user-images.githubusercontent.com/37766175/121813686-28710680-cca8-11eb-87c6-1dc9625369b0.png)
8
+
9
+ ## 🚩 Table of Contents
10
+
11
+ - [Bundle File Structure](#-bundle-file-structure)
12
+ - [Usage npm](#-usage-npm)
13
+ - [Usage CDN](#-usage-cdn)
14
+
15
+ ## 📁 Bundle File Structure
16
+
17
+ ### Files Distributed on npm
18
+
19
+ ```
20
+ - node_modules/
21
+ - @toast-ui/
22
+ - editor-plugin-color-syntax/
23
+ - dist/
24
+ - toastui-editor-plugin-color-syntax.js
25
+ - toastui-editor-plugin-color-syntax.css
26
+ ```
27
+
28
+ ### Files Distributed on CDN
29
+
30
+ The bundle files include all dependencies of this plugin.
31
+
32
+ ```
33
+ - uicdn.toast.com/
34
+ - editor-plugin-color-syntax/
35
+ - latest/
36
+ - toastui-editor-plugin-color-syntax.js
37
+ - toastui-editor-plugin-color-syntax.min.js
38
+ - toastui-editor-plugin-color-syntax.css
39
+ - toastui-editor-plugin-color-syntax.min.css
40
+ ```
41
+
42
+ ## 📦 Usage npm
43
+
44
+ To use the plugin, [`@toast-ui/editor`](https://github.com/nhn/tui.editor/tree/master/apps/editor) must be installed.
45
+
46
+ > Ref. [Getting Started](https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md)
47
+
48
+ ### Install
49
+
50
+ ```sh
51
+ $ npm install @toast-ui/editor-plugin-color-syntax
52
+ ```
53
+
54
+ ### Import Plugin
55
+
56
+ Along with the plugin, the plugin's dependency style must be imported. The `color-syntax` plugin has [TOAST UI Color Picker](https://github.com/nhn/tui.color-picker) as a dependency, and you need to add a CSS file of TOAST UI Color Picker.
57
+
58
+ #### ES Modules
59
+
60
+ ```js
61
+ import 'tui-color-picker/dist/tui-color-picker.css';
62
+ import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
63
+
64
+ import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
65
+ ```
66
+
67
+ #### CommonJS
68
+
69
+ ```js
70
+ require('tui-color-picker/dist/tui-color-picker.css');
71
+ require('@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css');
72
+
73
+ const colorSyntax = require('@toast-ui/editor-plugin-color-syntax');
74
+ ```
75
+
76
+ ### Create Instance
77
+
78
+ #### Basic
79
+
80
+ ```js
81
+ // ...
82
+ import 'tui-color-picker/dist/tui-color-picker.css';
83
+ import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
84
+
85
+ import Editor from '@toast-ui/editor';
86
+ import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
87
+
88
+ const editor = new Editor({
89
+ // ...
90
+ plugins: [colorSyntax]
91
+ });
92
+ ```
93
+
94
+ ## 🗂 Usage CDN
95
+
96
+ To use the plugin, the CDN files(CSS, Script) of `@toast-ui/editor` must be included.
97
+
98
+ ### Include Files
99
+
100
+ ```html
101
+ ...
102
+ <head>
103
+ ...
104
+ <link
105
+ rel="stylesheet"
106
+ href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css"
107
+ />
108
+ <link
109
+ rel="stylesheet"
110
+ href="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.css"
111
+ />
112
+ ...
113
+ </head>
114
+ <body>
115
+ ...
116
+ <!-- Color Picker -->
117
+ <script src="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.js"></script>
118
+ <!-- Editor -->
119
+ <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
120
+ <!-- Editor's Plugin -->
121
+ <script src="https://uicdn.toast.com/editor-plugin-color-syntax/latest/toastui-editor-plugin-color-syntax.min.js"></script>
122
+ ...
123
+ </body>
124
+ ...
125
+ ```
126
+
127
+ ### Create Instance
128
+
129
+ #### Basic
130
+
131
+ ```js
132
+ const { Editor } = toastui;
133
+ const { colorSyntax } = Editor.plugin;
134
+
135
+ const editor = new Editor({
136
+ // ...
137
+ plugins: [colorSyntax]
138
+ });
139
+ ```
140
+
141
+ ### [Optional] Use Plugin with Options
142
+
143
+ The `color-syntax` plugin can set options when used. Just add the plugin function and options related to the plugin to the array(`[pluginFn, pluginOptions]`) and push them to the `plugins` option of the editor.
144
+
145
+ The following options are available in the `color-syntax` plugin.
146
+
147
+ | Name | Type | Default Value | Description |
148
+ | ----------------- | ---------------- | ------------- | -------------------------------- |
149
+ | `preset` | `Array.<string>` | | Preset for color palette |
150
+
151
+ ```js
152
+ // ...
153
+ import 'tui-color-picker/dist/tui-color-picker.css';
154
+ import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
155
+
156
+ import Editor from '@toast-ui/editor';
157
+ import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
158
+
159
+ const colorSyntaxOptions = {
160
+ preset: ['#181818', '#292929', '#393939']
161
+ };
162
+
163
+ const editor = new Editor({
164
+ // ...
165
+ plugins: [[colorSyntax, colorSyntaxOptions]]
166
+ });
167
+ ```
@@ -0,0 +1,140 @@
1
+ /*!
2
+ * TOAST UI Editor : Color Syntax Plugin
3
+ * @version 3.1.0 | Sun Dec 28 2025
4
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
5
+ * @license MIT
6
+ */
7
+
8
+ .toastui-editor-popup-color {
9
+ padding: 0;
10
+ }
11
+
12
+ .toastui-editor-popup-color .tui-colorpicker-container,
13
+ .toastui-editor-popup-color .tui-colorpicker-palette-container {
14
+ width: 147px;
15
+ }
16
+
17
+ .toastui-editor-popup-color .tui-colorpicker-container ul {
18
+ width: 152px;
19
+ margin-bottom: 10px;
20
+ }
21
+
22
+ .toastui-editor-popup-color .tui-colorpicker-container li {
23
+ padding: 0 3px 3px 0;
24
+ }
25
+
26
+ .toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
27
+ border: solid 1px rgba(0, 0, 0, 0.1);
28
+ border-radius: 50%;
29
+ box-sizing: border-box;
30
+ width: 16px;
31
+ height: 16px;
32
+ }
33
+
34
+ .toastui-editor-popup-color .tui-popup-body {
35
+ padding: 10px;
36
+ }
37
+
38
+ .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-toggle-slider {
39
+ display: none;
40
+ }
41
+
42
+ .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider {
43
+ border-radius: 3px;
44
+ border: solid 1px rgba(0, 0, 0, 0.05);
45
+ }
46
+
47
+
48
+ .toastui-editor-popup-color .tui-colorpicker-palette-hex {
49
+ float: right;
50
+ }
51
+
52
+ .toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
53
+ font-family: inherit;
54
+ font-size: 13px;
55
+ height: 24px;
56
+ width: 65px;
57
+ padding: 3px 25px 3px 10px;
58
+ border: 1px solid #e1e3e9;
59
+ border-radius: 2px;
60
+ float: left;
61
+ }
62
+
63
+ .toastui-editor-popup-color button {
64
+ height: 32px;
65
+ width: 40px;
66
+ color: #555;
67
+ background: #f7f9fc;
68
+ border: 1px solid #e1e3e9;
69
+ top: 68px;
70
+ position: absolute;
71
+ right: 15px;
72
+ }
73
+
74
+ .toastui-editor-popup-color button:hover {
75
+ border-color: #cbcfdb;
76
+ }
77
+
78
+ .toastui-editor-popup-color .tui-colorpicker-container div.tui-colorpicker-clearfix {
79
+ display: inline-block;
80
+ margin: 5px 0;
81
+ width: 102px;
82
+ }
83
+
84
+ .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview {
85
+ margin-top: 8px;
86
+ margin-left: -22px;
87
+ width: 16px;
88
+ height: 16px;
89
+ border-radius: 50%;
90
+ border: solid 1px rgba(0, 0, 0, 0.1);
91
+ box-sizing: border-box;
92
+ }
93
+
94
+ .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-slider-right {
95
+ width: 19px;
96
+ }
97
+
98
+ .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
99
+ border: solid 1px rgba(0, 0, 0, 0.05);
100
+ border-radius: 3px;
101
+ overflow: auto;
102
+ }
103
+
104
+ .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-huebar-handle {
105
+ display: none;
106
+ }
107
+
108
+ .toastui-editor-toolbar-icons.color {
109
+ 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=);
110
+ background-size: 23px 112px;
111
+ background-position: 3px 3px;
112
+ }
113
+
114
+ .toastui-editor-dark .toastui-editor-toolbar-icons.color {
115
+ background-position-y: -47px;
116
+ }
117
+
118
+ .toastui-editor-dark .toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
119
+ border-color: #303238;
120
+ }
121
+
122
+ .toastui-editor-dark .toastui-editor-popup-color button {
123
+ color: #eee;
124
+ border-color: #303238;
125
+ background-color: #232428;
126
+ }
127
+
128
+ .toastui-editor-dark .toastui-editor-popup-color button:hover {
129
+ border-color: #494c56;
130
+ }
131
+
132
+ .toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
133
+ border-color: rgba(255, 255, 255, 0.1);
134
+ }
135
+
136
+ .toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider,
137
+ .toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
138
+ border-color: rgba(255, 255, 255, 0.05);
139
+ }
140
+
@@ -0,0 +1,320 @@
1
+ /*!
2
+ * TOAST UI Editor : Color Syntax Plugin
3
+ * @version 3.1.0 | Sun Dec 28 2025
4
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
5
+ * @license MIT
6
+ */
7
+ (function webpackUniversalModuleDefinition(root, factory) {
8
+ if(typeof exports === 'object' && typeof module === 'object')
9
+ module.exports = factory(require("tui-color-picker"));
10
+ else if(typeof define === 'function' && define.amd)
11
+ define(["tui-color-picker"], factory);
12
+ else if(typeof exports === 'object')
13
+ exports["toastui"] = factory(require("tui-color-picker"));
14
+ else
15
+ 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"]);
16
+ })(self, function(__WEBPACK_EXTERNAL_MODULE__858__) {
17
+ return /******/ (function() { // webpackBootstrap
18
+ /******/ "use strict";
19
+ /******/ var __webpack_modules__ = ({
20
+
21
+ /***/ 858:
22
+ /***/ (function(module) {
23
+
24
+ module.exports = __WEBPACK_EXTERNAL_MODULE__858__;
25
+
26
+ /***/ })
27
+
28
+ /******/ });
29
+ /************************************************************************/
30
+ /******/ // The module cache
31
+ /******/ var __webpack_module_cache__ = {};
32
+ /******/
33
+ /******/ // The require function
34
+ /******/ function __webpack_require__(moduleId) {
35
+ /******/ // Check if module is in cache
36
+ /******/ var cachedModule = __webpack_module_cache__[moduleId];
37
+ /******/ if (cachedModule !== undefined) {
38
+ /******/ return cachedModule.exports;
39
+ /******/ }
40
+ /******/ // Create a new module (and put it into the cache)
41
+ /******/ var module = __webpack_module_cache__[moduleId] = {
42
+ /******/ // no module.id needed
43
+ /******/ // no module.loaded needed
44
+ /******/ exports: {}
45
+ /******/ };
46
+ /******/
47
+ /******/ // Execute the module function
48
+ /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
49
+ /******/
50
+ /******/ // Return the exports of the module
51
+ /******/ return module.exports;
52
+ /******/ }
53
+ /******/
54
+ /************************************************************************/
55
+ /******/ /* webpack/runtime/compat get default export */
56
+ /******/ !function() {
57
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
58
+ /******/ __webpack_require__.n = function(module) {
59
+ /******/ var getter = module && module.__esModule ?
60
+ /******/ function() { return module['default']; } :
61
+ /******/ function() { return module; };
62
+ /******/ __webpack_require__.d(getter, { a: getter });
63
+ /******/ return getter;
64
+ /******/ };
65
+ /******/ }();
66
+ /******/
67
+ /******/ /* webpack/runtime/define property getters */
68
+ /******/ !function() {
69
+ /******/ // define getter functions for harmony exports
70
+ /******/ __webpack_require__.d = function(exports, definition) {
71
+ /******/ for(var key in definition) {
72
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
73
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
74
+ /******/ }
75
+ /******/ }
76
+ /******/ };
77
+ /******/ }();
78
+ /******/
79
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
80
+ /******/ !function() {
81
+ /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
82
+ /******/ }();
83
+ /******/
84
+ /************************************************************************/
85
+ var __webpack_exports__ = {};
86
+ // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
87
+ !function() {
88
+
89
+ // EXPORTS
90
+ __webpack_require__.d(__webpack_exports__, {
91
+ "default": function() { return /* binding */ colorSyntaxPlugin; }
92
+ });
93
+
94
+ // EXTERNAL MODULE: external {"commonjs":"tui-color-picker","commonjs2":"tui-color-picker","amd":"tui-color-picker","root":["tui","colorPicker"]}
95
+ var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_ = __webpack_require__(858);
96
+ 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_);
97
+ ;// CONCATENATED MODULE: ./src/i18n/langs.ts
98
+ function addLangs(i18n) {
99
+ i18n.setLanguage('ar', {
100
+ 'Text color': 'لون النص',
101
+ });
102
+ i18n.setLanguage(['cs', 'cs-CZ'], {
103
+ 'Text color': 'Barva textu',
104
+ });
105
+ i18n.setLanguage(['de', 'de-DE'], {
106
+ 'Text color': 'Textfarbe',
107
+ });
108
+ i18n.setLanguage(['en', 'en-US'], {
109
+ 'Text color': 'Text color',
110
+ });
111
+ i18n.setLanguage(['es', 'es-ES'], {
112
+ 'Text color': 'Color del texto',
113
+ });
114
+ i18n.setLanguage(['fi', 'fi-FI'], {
115
+ 'Text color': 'Tekstin väri',
116
+ });
117
+ i18n.setLanguage(['fr', 'fr-FR'], {
118
+ 'Text color': 'Couleur du texte',
119
+ });
120
+ i18n.setLanguage(['gl', 'gl-ES'], {
121
+ 'Text color': 'Cor do texto',
122
+ });
123
+ i18n.setLanguage(['hr', 'hr-HR'], {
124
+ 'Text color': 'Boja teksta',
125
+ });
126
+ i18n.setLanguage(['it', 'it-IT'], {
127
+ 'Text color': 'Colore del testo',
128
+ });
129
+ i18n.setLanguage(['ja', 'ja-JP'], {
130
+ 'Text color': '文字色相',
131
+ });
132
+ i18n.setLanguage(['ko', 'ko-KR'], {
133
+ 'Text color': '글자 색상',
134
+ });
135
+ i18n.setLanguage(['nb', 'nb-NO'], {
136
+ 'Text color': 'Tekstfarge',
137
+ });
138
+ i18n.setLanguage(['nl', 'nl-NL'], {
139
+ 'Text color': 'Tekstkleur',
140
+ });
141
+ i18n.setLanguage(['pl', 'pl-PL'], {
142
+ 'Text color': 'Kolor tekstu',
143
+ });
144
+ i18n.setLanguage(['pt', 'pt-BR'], {
145
+ 'Text color': 'Cor do texto',
146
+ });
147
+ i18n.setLanguage(['ru', 'ru-RU'], {
148
+ 'Text color': 'Цвет текста',
149
+ });
150
+ i18n.setLanguage(['sv', 'sv-SE'], {
151
+ 'Text color': 'Textfärg',
152
+ });
153
+ i18n.setLanguage(['tr', 'tr-TR'], {
154
+ 'Text color': 'Metin rengi',
155
+ });
156
+ i18n.setLanguage(['uk', 'uk-UA'], {
157
+ 'Text color': 'Колір тексту',
158
+ });
159
+ i18n.setLanguage('zh-CN', {
160
+ 'Text color': '文字颜色',
161
+ });
162
+ i18n.setLanguage('zh-TW', {
163
+ 'Text color': '文字顏色',
164
+ });
165
+ }
166
+
167
+ ;// CONCATENATED MODULE: ./src/utils/dom.ts
168
+ function hasClass(element, className) {
169
+ return element.classList.contains(className);
170
+ }
171
+ function findParentByClassName(el, className) {
172
+ var currentEl = el;
173
+ while (currentEl && !hasClass(currentEl, className)) {
174
+ currentEl = currentEl.parentElement;
175
+ }
176
+ return currentEl;
177
+ }
178
+ function removeProseMirrorHackNodes(html) {
179
+ var reProseMirrorImage = /<img class="ProseMirror-separator" alt="">/g;
180
+ var reProseMirrorTrailingBreak = / class="ProseMirror-trailingBreak"/g;
181
+ var resultHTML = html;
182
+ resultHTML = resultHTML.replace(reProseMirrorImage, '');
183
+ resultHTML = resultHTML.replace(reProseMirrorTrailingBreak, '');
184
+ return resultHTML;
185
+ }
186
+
187
+ ;// CONCATENATED MODULE: ./src/index.ts
188
+
189
+
190
+
191
+
192
+ var PREFIX = 'toastui-editor-';
193
+ function createApplyButton(text) {
194
+ var button = document.createElement('button');
195
+ button.setAttribute('type', 'button');
196
+ button.textContent = text;
197
+ return button;
198
+ }
199
+ function createToolbarItemOption(colorPickerContainer, i18n) {
200
+ return {
201
+ name: 'color',
202
+ tooltip: i18n.get('Text color'),
203
+ className: PREFIX + "toolbar-icons color",
204
+ popup: {
205
+ className: PREFIX + "popup-color",
206
+ body: colorPickerContainer,
207
+ style: { width: 'auto' },
208
+ },
209
+ };
210
+ }
211
+ function createSelection(tr, selection, SelectionClass, openTag, closeTag) {
212
+ var mapping = tr.mapping, doc = tr.doc;
213
+ var from = selection.from, to = selection.to, empty = selection.empty;
214
+ var mappedFrom = mapping.map(from) + openTag.length;
215
+ var mappedTo = mapping.map(to) - closeTag.length;
216
+ return empty
217
+ ? SelectionClass.create(doc, mappedTo, mappedTo)
218
+ : SelectionClass.create(doc, mappedFrom, mappedTo);
219
+ }
220
+ function getCurrentEditorEl(colorPickerEl, containerClassName) {
221
+ var editorDefaultEl = findParentByClassName(colorPickerEl, PREFIX + "defaultUI");
222
+ return editorDefaultEl.querySelector("." + containerClassName + " .ProseMirror");
223
+ }
224
+ var containerClassName;
225
+ var currentEditorEl;
226
+ // @TODO: add custom syntax for plugin
227
+ /**
228
+ * Color syntax plugin
229
+ * @param {Object} context - plugin context for communicating with editor
230
+ * @param {Object} options - options for plugin
231
+ * @param {Array.<string>} [options.preset] - preset for color palette (ex: ['#181818', '#292929'])
232
+ * @param {boolean} [options.useCustomSyntax=false] - whether use custom syntax or not
233
+ */
234
+ function colorSyntaxPlugin(context, options) {
235
+ if (options === void 0) { options = {}; }
236
+ var eventEmitter = context.eventEmitter, i18n = context.i18n, _a = context.usageStatistics, usageStatistics = _a === void 0 ? true : _a, pmState = context.pmState;
237
+ var preset = options.preset;
238
+ var container = document.createElement('div');
239
+ var colorPickerOption = { container: container, usageStatistics: usageStatistics };
240
+ addLangs(i18n);
241
+ if (preset) {
242
+ colorPickerOption.preset = preset;
243
+ }
244
+ var colorPicker = external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default().create(colorPickerOption);
245
+ var button = createApplyButton(i18n.get('OK'));
246
+ eventEmitter.listen('focus', function (editType) {
247
+ containerClassName = "" + PREFIX + (editType === 'markdown' ? 'md' : 'ww') + "-container";
248
+ });
249
+ container.addEventListener('click', function (ev) {
250
+ if (ev.target.getAttribute('type') === 'button') {
251
+ var selectedColor = colorPicker.getColor();
252
+ currentEditorEl = getCurrentEditorEl(container, containerClassName);
253
+ eventEmitter.emit('command', 'color', { selectedColor: selectedColor });
254
+ eventEmitter.emit('closePopup');
255
+ // force the current editor to focus for preventing to lose focus
256
+ currentEditorEl.focus();
257
+ }
258
+ });
259
+ colorPicker.slider.toggle(true);
260
+ container.appendChild(button);
261
+ var toolbarItem = createToolbarItemOption(container, i18n);
262
+ return {
263
+ markdownCommands: {
264
+ color: function (_a, _b, dispatch) {
265
+ var selectedColor = _a.selectedColor;
266
+ var tr = _b.tr, selection = _b.selection, schema = _b.schema;
267
+ if (selectedColor) {
268
+ var slice = selection.content();
269
+ var textContent = slice.content.textBetween(0, slice.content.size, '\n');
270
+ var openTag = "<span style=\"color: " + selectedColor + "\">";
271
+ var closeTag = "</span>";
272
+ var colored = "" + openTag + textContent + closeTag;
273
+ tr.replaceSelectionWith(schema.text(colored)).setSelection(createSelection(tr, selection, pmState.TextSelection, openTag, closeTag));
274
+ dispatch(tr);
275
+ return true;
276
+ }
277
+ return false;
278
+ },
279
+ },
280
+ wysiwygCommands: {
281
+ color: function (_a, _b, dispatch) {
282
+ var selectedColor = _a.selectedColor;
283
+ var tr = _b.tr, selection = _b.selection, schema = _b.schema;
284
+ if (selectedColor) {
285
+ var from = selection.from, to = selection.to;
286
+ var attrs = { htmlAttrs: { style: "color: " + selectedColor } };
287
+ var mark = schema.marks.span.create(attrs);
288
+ tr.addMark(from, to, mark);
289
+ dispatch(tr);
290
+ return true;
291
+ }
292
+ return false;
293
+ },
294
+ },
295
+ toolbarItems: [
296
+ {
297
+ groupIndex: 0,
298
+ itemIndex: 3,
299
+ item: toolbarItem,
300
+ },
301
+ ],
302
+ toHTMLRenderers: {
303
+ htmlInline: {
304
+ span: function (node, _a) {
305
+ var entering = _a.entering;
306
+ return entering
307
+ ? { type: 'openTag', tagName: 'span', attributes: node.attrs }
308
+ : { type: 'closeTag', tagName: 'span' };
309
+ },
310
+ },
311
+ },
312
+ };
313
+ }
314
+
315
+ }();
316
+ __webpack_exports__ = __webpack_exports__["default"];
317
+ /******/ return __webpack_exports__;
318
+ /******/ })()
319
+ ;
320
+ });
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@licium/editor-plugin-color-syntax",
3
+ "version": "3.1.0",
4
+ "description": "TOAST UI Editor : Color Syntax Plugin",
5
+ "keywords": [
6
+ "nhn",
7
+ "nhn cloud",
8
+ "toast",
9
+ "toastui",
10
+ "toast-ui",
11
+ "editor",
12
+ "plugin",
13
+ "color-syntax",
14
+ "color-picker"
15
+ ],
16
+ "main": "dist/toastui-editor-plugin-color-syntax.js",
17
+ "files": [
18
+ "dist/*.js",
19
+ "dist/*.css",
20
+ "types/index.d.ts"
21
+ ],
22
+ "types": "types/index.d.ts",
23
+ "author": "NHN Cloud FE Development Lab <dl_javascript@nhn.com>",
24
+ "license": "MIT",
25
+ "repository": {
26
+ "type": "git",
27
+ "url": "https://github.com/nhn/tui.editor.git",
28
+ "directory": "plugins/color-syntax"
29
+ },
30
+ "bugs": {
31
+ "url": "https://github.com/nhn/tui.editor/issues"
32
+ },
33
+ "homepage": "https://ui.toast.com",
34
+ "browserslist": "last 2 versions, not ie <= 10",
35
+ "scripts": {
36
+ "lint": "eslint .",
37
+ "test:types": "tsc",
38
+ "test": "jest --watch",
39
+ "test:ci": "jest",
40
+ "serve": "snowpack dev",
41
+ "serve:ie": "webpack serve",
42
+ "build:cdn": "webpack build --env cdn & webpack build --env cdn minify",
43
+ "build": "webpack build && npm run build:cdn"
44
+ },
45
+ "devDependencies": {
46
+ "cross-env": "^6.0.3"
47
+ },
48
+ "dependencies": {
49
+ "tui-color-picker": "^2.2.6"
50
+ },
51
+ "publishConfig": {
52
+ "access": "public"
53
+ },
54
+ "gitHead": "cbc7cab7b3f081a1aaf1d338b8138512ace132b9"
55
+ }
@@ -0,0 +1,7 @@
1
+ import type { PluginContext, PluginInfo } from '@licium/editor';
2
+
3
+ export interface PluginOptions {
4
+ preset?: string[];
5
+ }
6
+
7
+ export default function colorPlugin(context: PluginContext, options: PluginOptions): PluginInfo;