@techie_doubts/editor-plugin-uml 3.0.1
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/README.md +186 -0
- package/dist/td-editor-plugin-uml.js +244 -0
- package/dist/toastui-editor-plugin-uml.js +244 -0
- package/index.d.ts +7 -0
- package/package.json +53 -0
package/README.md
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
# TOAST UI Editor : UML Plugin
|
|
2
|
+
|
|
3
|
+
> This is a plugin of [TOAST UI Editor](https://github.com/nhn/tui.editor/tree/master/apps/editor) to render UML.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@techie_doubts/editor-plugin-uml)
|
|
6
|
+
|
|
7
|
+
|
|
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
|
+
- @techie_doubts/
|
|
22
|
+
- editor-plugin-uml/
|
|
23
|
+
- dist/
|
|
24
|
+
- td-editor-plugin-uml.js
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Files Distributed on CDN
|
|
28
|
+
|
|
29
|
+
The bundle files include all dependencies of this plugin.
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
- uicdn.toast.com/
|
|
33
|
+
- editor-plugin-uml/
|
|
34
|
+
- latest/
|
|
35
|
+
- td-editor-plugin-uml.js
|
|
36
|
+
- td-editor-plugin-uml.min.js
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 📦 Usage npm
|
|
40
|
+
|
|
41
|
+
To use the plugin, [`@techie_doubts/tui.editor.2026`](https://github.com/nhn/tui.editor/tree/master/apps/editor) must be installed.
|
|
42
|
+
|
|
43
|
+
> Ref. [Getting Started](https://github.com/nhn/tui.editor/blob/master/docs/en/getting-started.md)
|
|
44
|
+
|
|
45
|
+
### Install
|
|
46
|
+
|
|
47
|
+
```sh
|
|
48
|
+
$ npm install @techie_doubts/editor-plugin-uml
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Import Plugin
|
|
52
|
+
|
|
53
|
+
#### ES Modules
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
import uml from '@techie_doubts/editor-plugin-uml';
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### CommonJS
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
const uml = require('@techie_doubts/editor-plugin-uml');
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Create Instance
|
|
66
|
+
|
|
67
|
+
#### Basic
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
71
|
+
import uml from '@techie_doubts/editor-plugin-uml';
|
|
72
|
+
|
|
73
|
+
const editor = new Editor({
|
|
74
|
+
// ...
|
|
75
|
+
plugins: [uml]
|
|
76
|
+
});
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### With Viewer
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
import Viewer from '@techie_doubts/tui.editor.2026/dist/toustui-editor-viewer';
|
|
83
|
+
import uml from '@techie_doubts/editor-plugin-uml';
|
|
84
|
+
|
|
85
|
+
const viewer = new Viewer({
|
|
86
|
+
// ...
|
|
87
|
+
plugins: [uml]
|
|
88
|
+
});
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
or
|
|
92
|
+
|
|
93
|
+
```js
|
|
94
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
95
|
+
import uml from '@techie_doubts/editor-plugin-uml';
|
|
96
|
+
|
|
97
|
+
const viewer = Editor.factory({
|
|
98
|
+
// ...
|
|
99
|
+
plugins: [uml],
|
|
100
|
+
viewer: true
|
|
101
|
+
});
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## 🗂 Usage CDN
|
|
105
|
+
|
|
106
|
+
To use the plugin, the CDN files(CSS, Script) of `@techie_doubts/tui.editor.2026` must be included.
|
|
107
|
+
|
|
108
|
+
### Include Files
|
|
109
|
+
|
|
110
|
+
```html
|
|
111
|
+
...
|
|
112
|
+
<body>
|
|
113
|
+
...
|
|
114
|
+
<!-- Editor -->
|
|
115
|
+
<script src="https://uicdn.toast.com/editor/latest/td-editor-all.min.js"></script>
|
|
116
|
+
<!-- Editor's Plugin -->
|
|
117
|
+
<script src="https://uicdn.toast.com/editor-plugin-uml/latest/td-editor-plugin-uml.min.js"></script>
|
|
118
|
+
...
|
|
119
|
+
</body>
|
|
120
|
+
...
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Create Instance
|
|
124
|
+
|
|
125
|
+
#### Basic
|
|
126
|
+
|
|
127
|
+
```js
|
|
128
|
+
const { Editor } = toastui;
|
|
129
|
+
const { uml } = Editor.plugin;
|
|
130
|
+
|
|
131
|
+
const editor = new Editor({
|
|
132
|
+
// ...
|
|
133
|
+
plugins: [uml]
|
|
134
|
+
});
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
#### With Viewer
|
|
138
|
+
|
|
139
|
+
```js
|
|
140
|
+
const Viewer = toastui.Editor;
|
|
141
|
+
const { uml } = Viewer.plugin;
|
|
142
|
+
|
|
143
|
+
const viewer = new Viewer({
|
|
144
|
+
// ...
|
|
145
|
+
plugins: [uml]
|
|
146
|
+
});
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
or
|
|
150
|
+
|
|
151
|
+
```js
|
|
152
|
+
const { Editor } = toastui;
|
|
153
|
+
const { uml } = Editor.plugin;
|
|
154
|
+
|
|
155
|
+
const viewer = Editor.factory({
|
|
156
|
+
// ...
|
|
157
|
+
plugins: [uml],
|
|
158
|
+
viewer: true
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### [Optional] Use Plugin with Options
|
|
163
|
+
|
|
164
|
+
The `uml` 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.
|
|
165
|
+
|
|
166
|
+
The following option is available in the `uml` plugin.
|
|
167
|
+
|
|
168
|
+
| Name | Type | Default Value | Description |
|
|
169
|
+
| ------------- | -------- | ----------------------------------------- | ------------------------- |
|
|
170
|
+
| `rendererURL` | `string` | `'http://www.plantuml.com/plantuml/png/'` | URL of plant uml renderer |
|
|
171
|
+
|
|
172
|
+
```js
|
|
173
|
+
// ...
|
|
174
|
+
|
|
175
|
+
import Editor from '@techie_doubts/tui.editor.2026';
|
|
176
|
+
import uml from '@techie_doubts/editor-plugin-uml';
|
|
177
|
+
|
|
178
|
+
const umlOptions = {
|
|
179
|
+
rendererURL: // ...
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
const editor = new Editor({
|
|
183
|
+
// ...
|
|
184
|
+
plugins: [[uml, umlOptions]]
|
|
185
|
+
});
|
|
186
|
+
```
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* TOAST UI Editor : UML Plugin
|
|
3
|
+
* @version 3.0.1 | Sat Feb 21 2026
|
|
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("plantuml-encoder"));
|
|
10
|
+
else if(typeof define === 'function' && define.amd)
|
|
11
|
+
define(["plantuml-encoder"], factory);
|
|
12
|
+
else if(typeof exports === 'object')
|
|
13
|
+
exports["toastui"] = factory(require("plantuml-encoder"));
|
|
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["plantuml-encoder"]);
|
|
16
|
+
})(self, function(__WEBPACK_EXTERNAL_MODULE__564__) {
|
|
17
|
+
return /******/ (function() { // webpackBootstrap
|
|
18
|
+
/******/ "use strict";
|
|
19
|
+
/******/ var __webpack_modules__ = ({
|
|
20
|
+
|
|
21
|
+
/***/ 564:
|
|
22
|
+
/***/ (function(module) {
|
|
23
|
+
|
|
24
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__564__;
|
|
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
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
87
|
+
/* harmony export */ "default": function() { return /* binding */ umlPlugin; }
|
|
88
|
+
/* harmony export */ });
|
|
89
|
+
/* harmony import */ var plantuml_encoder__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(564);
|
|
90
|
+
/* harmony import */ var plantuml_encoder__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plantuml_encoder__WEBPACK_IMPORTED_MODULE_0__);
|
|
91
|
+
/**
|
|
92
|
+
* @fileoverview Implements uml plugin
|
|
93
|
+
* @author NHN FE Development Lab <dl_javascript@nhn.com>
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
var DEFAULT_RENDERER_URL = '//www.plantuml.com/plantuml/png/';
|
|
97
|
+
var DARK_PLANTUML_THEME = 'cyborg';
|
|
98
|
+
function applyThemeDirective(text, theme) {
|
|
99
|
+
var directive = "!theme " + theme + "\n";
|
|
100
|
+
var startMatch = text.match(/^(@start\w+[^\n]*\n?)/);
|
|
101
|
+
if (startMatch) {
|
|
102
|
+
return text.replace(startMatch[1], startMatch[1] + directive);
|
|
103
|
+
}
|
|
104
|
+
return directive + text;
|
|
105
|
+
}
|
|
106
|
+
function buildImgSrc(text, rendererURL, isDark) {
|
|
107
|
+
var themed = isDark ? applyThemeDirective(text, DARK_PLANTUML_THEME) : text;
|
|
108
|
+
return "" + rendererURL + plantuml_encoder__WEBPACK_IMPORTED_MODULE_0___default().encode(themed);
|
|
109
|
+
}
|
|
110
|
+
function createUMLTokens(text, rendererURL, isDark) {
|
|
111
|
+
var renderedHTML;
|
|
112
|
+
var source = encodeURIComponent(text);
|
|
113
|
+
try {
|
|
114
|
+
if (!(plantuml_encoder__WEBPACK_IMPORTED_MODULE_0___default())) {
|
|
115
|
+
throw new Error('plantuml-encoder dependency required');
|
|
116
|
+
}
|
|
117
|
+
renderedHTML = "<img src=\"" + buildImgSrc(text, rendererURL, isDark) + "\" />";
|
|
118
|
+
}
|
|
119
|
+
catch (err) {
|
|
120
|
+
renderedHTML = "Error occurred on encoding uml: " + err.message;
|
|
121
|
+
}
|
|
122
|
+
return [
|
|
123
|
+
{
|
|
124
|
+
type: 'openTag',
|
|
125
|
+
tagName: 'div',
|
|
126
|
+
outerNewLine: true,
|
|
127
|
+
attributes: { 'data-plantuml-source': source },
|
|
128
|
+
},
|
|
129
|
+
{ type: 'html', content: renderedHTML },
|
|
130
|
+
{ type: 'closeTag', tagName: 'div', outerNewLine: true },
|
|
131
|
+
];
|
|
132
|
+
}
|
|
133
|
+
function findContentsRoot(root) {
|
|
134
|
+
if (!root)
|
|
135
|
+
return null;
|
|
136
|
+
return root.querySelector('.toastui-editor-contents') || root;
|
|
137
|
+
}
|
|
138
|
+
function updateUmlImagesIn(root, rendererURL, isDark) {
|
|
139
|
+
if (!root)
|
|
140
|
+
return;
|
|
141
|
+
var containers = root.querySelectorAll('[data-plantuml-source]');
|
|
142
|
+
containers.forEach(function (container) {
|
|
143
|
+
var encoded = container.getAttribute('data-plantuml-source');
|
|
144
|
+
if (!encoded)
|
|
145
|
+
return;
|
|
146
|
+
var text;
|
|
147
|
+
try {
|
|
148
|
+
text = decodeURIComponent(encoded);
|
|
149
|
+
}
|
|
150
|
+
catch (e) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
var img = container.querySelector('img');
|
|
154
|
+
if (!img)
|
|
155
|
+
return;
|
|
156
|
+
try {
|
|
157
|
+
img.src = buildImgSrc(text, rendererURL, isDark);
|
|
158
|
+
}
|
|
159
|
+
catch (e) {
|
|
160
|
+
// encoding error — leave the current image
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* UML plugin
|
|
166
|
+
* @param {Object} context - plugin context for communicating with editor
|
|
167
|
+
* @param {Object} options - options for plugin
|
|
168
|
+
* @param {string} [options.rendererURL] - url of plant uml renderer
|
|
169
|
+
*/
|
|
170
|
+
function umlPlugin(context, options) {
|
|
171
|
+
if (options === void 0) { options = {}; }
|
|
172
|
+
var _a = options.rendererURL, rendererURL = _a === void 0 ? DEFAULT_RENDERER_URL : _a;
|
|
173
|
+
var instance = context.instance;
|
|
174
|
+
function isDarkTheme() {
|
|
175
|
+
var _a;
|
|
176
|
+
try {
|
|
177
|
+
return ((_a = instance.getTheme) === null || _a === void 0 ? void 0 : _a.call(instance)) === 'dark';
|
|
178
|
+
}
|
|
179
|
+
catch (e) {
|
|
180
|
+
return false;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
function getEditorRoots() {
|
|
184
|
+
var _a;
|
|
185
|
+
var elements = (_a = instance.getEditorElements) === null || _a === void 0 ? void 0 : _a.call(instance);
|
|
186
|
+
if (!elements) {
|
|
187
|
+
return {
|
|
188
|
+
previewRoot: null,
|
|
189
|
+
wysiwygRoot: null,
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
return {
|
|
193
|
+
previewRoot: findContentsRoot((elements.mdPreview || null)),
|
|
194
|
+
wysiwygRoot: findContentsRoot((elements.wwEditor || null)),
|
|
195
|
+
};
|
|
196
|
+
}
|
|
197
|
+
var scheduled = false;
|
|
198
|
+
var pendingThemeOverride = null;
|
|
199
|
+
var scheduleUpdate = function (themeOverride) {
|
|
200
|
+
if (typeof themeOverride === 'boolean') {
|
|
201
|
+
pendingThemeOverride = themeOverride;
|
|
202
|
+
}
|
|
203
|
+
if (scheduled) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
scheduled = true;
|
|
207
|
+
requestAnimationFrame(function () {
|
|
208
|
+
var _a, _b;
|
|
209
|
+
scheduled = false;
|
|
210
|
+
var _c = getEditorRoots(), previewRoot = _c.previewRoot, wysiwygRoot = _c.wysiwygRoot;
|
|
211
|
+
var dark = pendingThemeOverride !== null
|
|
212
|
+
? pendingThemeOverride
|
|
213
|
+
: ((_a = previewRoot === null || previewRoot === void 0 ? void 0 : previewRoot.closest('.toastui-editor-defaultUI')) === null || _a === void 0 ? void 0 : _a.classList.contains('toastui-editor-dark')) ||
|
|
214
|
+
((_b = wysiwygRoot === null || wysiwygRoot === void 0 ? void 0 : wysiwygRoot.closest('.toastui-editor-defaultUI')) === null || _b === void 0 ? void 0 : _b.classList.contains('toastui-editor-dark')) ||
|
|
215
|
+
false;
|
|
216
|
+
pendingThemeOverride = null;
|
|
217
|
+
updateUmlImagesIn(previewRoot, rendererURL, dark);
|
|
218
|
+
updateUmlImagesIn(wysiwygRoot, rendererURL, dark);
|
|
219
|
+
});
|
|
220
|
+
};
|
|
221
|
+
context.eventEmitter.listen('changeTheme', function (theme) {
|
|
222
|
+
scheduleUpdate(theme === 'dark');
|
|
223
|
+
});
|
|
224
|
+
context.eventEmitter.listen('change', function () { return scheduleUpdate(); });
|
|
225
|
+
context.eventEmitter.listen('changeMode', function () { return scheduleUpdate(); });
|
|
226
|
+
context.eventEmitter.listen('load', function () { return scheduleUpdate(); });
|
|
227
|
+
context.eventEmitter.listen('loadUI', function () { return scheduleUpdate(); });
|
|
228
|
+
return {
|
|
229
|
+
toHTMLRenderers: {
|
|
230
|
+
uml: function (node) {
|
|
231
|
+
return createUMLTokens(node.literal, rendererURL, isDarkTheme());
|
|
232
|
+
},
|
|
233
|
+
plantUml: function (node) {
|
|
234
|
+
return createUMLTokens(node.literal, rendererURL, isDarkTheme());
|
|
235
|
+
},
|
|
236
|
+
},
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
__webpack_exports__ = __webpack_exports__["default"];
|
|
241
|
+
/******/ return __webpack_exports__;
|
|
242
|
+
/******/ })()
|
|
243
|
+
;
|
|
244
|
+
});
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* TOAST UI Editor : UML Plugin
|
|
3
|
+
* @version 3.0.1 | Fri Feb 20 2026
|
|
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("plantuml-encoder"));
|
|
10
|
+
else if(typeof define === 'function' && define.amd)
|
|
11
|
+
define(["plantuml-encoder"], factory);
|
|
12
|
+
else if(typeof exports === 'object')
|
|
13
|
+
exports["toastui"] = factory(require("plantuml-encoder"));
|
|
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["plantuml-encoder"]);
|
|
16
|
+
})(self, function(__WEBPACK_EXTERNAL_MODULE__564__) {
|
|
17
|
+
return /******/ (function() { // webpackBootstrap
|
|
18
|
+
/******/ "use strict";
|
|
19
|
+
/******/ var __webpack_modules__ = ({
|
|
20
|
+
|
|
21
|
+
/***/ 564:
|
|
22
|
+
/***/ (function(module) {
|
|
23
|
+
|
|
24
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__564__;
|
|
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
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
87
|
+
/* harmony export */ "default": function() { return /* binding */ umlPlugin; }
|
|
88
|
+
/* harmony export */ });
|
|
89
|
+
/* harmony import */ var plantuml_encoder__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(564);
|
|
90
|
+
/* harmony import */ var plantuml_encoder__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(plantuml_encoder__WEBPACK_IMPORTED_MODULE_0__);
|
|
91
|
+
/**
|
|
92
|
+
* @fileoverview Implements uml plugin
|
|
93
|
+
* @author NHN FE Development Lab <dl_javascript@nhn.com>
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
var DEFAULT_RENDERER_URL = '//www.plantuml.com/plantuml/png/';
|
|
97
|
+
var DARK_PLANTUML_THEME = 'cyborg';
|
|
98
|
+
function applyThemeDirective(text, theme) {
|
|
99
|
+
var directive = "!theme " + theme + "\n";
|
|
100
|
+
var startMatch = text.match(/^(@start\w+[^\n]*\n?)/);
|
|
101
|
+
if (startMatch) {
|
|
102
|
+
return text.replace(startMatch[1], startMatch[1] + directive);
|
|
103
|
+
}
|
|
104
|
+
return directive + text;
|
|
105
|
+
}
|
|
106
|
+
function buildImgSrc(text, rendererURL, isDark) {
|
|
107
|
+
var themed = isDark ? applyThemeDirective(text, DARK_PLANTUML_THEME) : text;
|
|
108
|
+
return "" + rendererURL + plantuml_encoder__WEBPACK_IMPORTED_MODULE_0___default().encode(themed);
|
|
109
|
+
}
|
|
110
|
+
function createUMLTokens(text, rendererURL, isDark) {
|
|
111
|
+
var renderedHTML;
|
|
112
|
+
var source = encodeURIComponent(text);
|
|
113
|
+
try {
|
|
114
|
+
if (!(plantuml_encoder__WEBPACK_IMPORTED_MODULE_0___default())) {
|
|
115
|
+
throw new Error('plantuml-encoder dependency required');
|
|
116
|
+
}
|
|
117
|
+
renderedHTML = "<img src=\"" + buildImgSrc(text, rendererURL, isDark) + "\" />";
|
|
118
|
+
}
|
|
119
|
+
catch (err) {
|
|
120
|
+
renderedHTML = "Error occurred on encoding uml: " + err.message;
|
|
121
|
+
}
|
|
122
|
+
return [
|
|
123
|
+
{
|
|
124
|
+
type: 'openTag',
|
|
125
|
+
tagName: 'div',
|
|
126
|
+
outerNewLine: true,
|
|
127
|
+
attributes: { 'data-plantuml-source': source },
|
|
128
|
+
},
|
|
129
|
+
{ type: 'html', content: renderedHTML },
|
|
130
|
+
{ type: 'closeTag', tagName: 'div', outerNewLine: true },
|
|
131
|
+
];
|
|
132
|
+
}
|
|
133
|
+
function findContentsRoot(root) {
|
|
134
|
+
if (!root)
|
|
135
|
+
return null;
|
|
136
|
+
return root.querySelector('.toastui-editor-contents') || root;
|
|
137
|
+
}
|
|
138
|
+
function updateUmlImagesIn(root, rendererURL, isDark) {
|
|
139
|
+
if (!root)
|
|
140
|
+
return;
|
|
141
|
+
var containers = root.querySelectorAll('[data-plantuml-source]');
|
|
142
|
+
containers.forEach(function (container) {
|
|
143
|
+
var encoded = container.getAttribute('data-plantuml-source');
|
|
144
|
+
if (!encoded)
|
|
145
|
+
return;
|
|
146
|
+
var text;
|
|
147
|
+
try {
|
|
148
|
+
text = decodeURIComponent(encoded);
|
|
149
|
+
}
|
|
150
|
+
catch (e) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
var img = container.querySelector('img');
|
|
154
|
+
if (!img)
|
|
155
|
+
return;
|
|
156
|
+
try {
|
|
157
|
+
img.src = buildImgSrc(text, rendererURL, isDark);
|
|
158
|
+
}
|
|
159
|
+
catch (e) {
|
|
160
|
+
// encoding error — leave the current image
|
|
161
|
+
}
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* UML plugin
|
|
166
|
+
* @param {Object} context - plugin context for communicating with editor
|
|
167
|
+
* @param {Object} options - options for plugin
|
|
168
|
+
* @param {string} [options.rendererURL] - url of plant uml renderer
|
|
169
|
+
*/
|
|
170
|
+
function umlPlugin(context, options) {
|
|
171
|
+
if (options === void 0) { options = {}; }
|
|
172
|
+
var _a = options.rendererURL, rendererURL = _a === void 0 ? DEFAULT_RENDERER_URL : _a;
|
|
173
|
+
var instance = context.instance;
|
|
174
|
+
function isDarkTheme() {
|
|
175
|
+
var _a;
|
|
176
|
+
try {
|
|
177
|
+
return ((_a = instance.getTheme) === null || _a === void 0 ? void 0 : _a.call(instance)) === 'dark';
|
|
178
|
+
}
|
|
179
|
+
catch (e) {
|
|
180
|
+
return false;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
function getEditorRoots() {
|
|
184
|
+
var _a;
|
|
185
|
+
var elements = (_a = instance.getEditorElements) === null || _a === void 0 ? void 0 : _a.call(instance);
|
|
186
|
+
if (!elements) {
|
|
187
|
+
return {
|
|
188
|
+
previewRoot: null,
|
|
189
|
+
wysiwygRoot: null,
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
return {
|
|
193
|
+
previewRoot: findContentsRoot((elements.mdPreview || null)),
|
|
194
|
+
wysiwygRoot: findContentsRoot((elements.wwEditor || null)),
|
|
195
|
+
};
|
|
196
|
+
}
|
|
197
|
+
var scheduled = false;
|
|
198
|
+
var pendingThemeOverride = null;
|
|
199
|
+
var scheduleUpdate = function (themeOverride) {
|
|
200
|
+
if (typeof themeOverride === 'boolean') {
|
|
201
|
+
pendingThemeOverride = themeOverride;
|
|
202
|
+
}
|
|
203
|
+
if (scheduled) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
scheduled = true;
|
|
207
|
+
requestAnimationFrame(function () {
|
|
208
|
+
var _a, _b;
|
|
209
|
+
scheduled = false;
|
|
210
|
+
var _c = getEditorRoots(), previewRoot = _c.previewRoot, wysiwygRoot = _c.wysiwygRoot;
|
|
211
|
+
var dark = pendingThemeOverride !== null
|
|
212
|
+
? pendingThemeOverride
|
|
213
|
+
: ((_a = previewRoot === null || previewRoot === void 0 ? void 0 : previewRoot.closest('.toastui-editor-defaultUI')) === null || _a === void 0 ? void 0 : _a.classList.contains('toastui-editor-dark')) ||
|
|
214
|
+
((_b = wysiwygRoot === null || wysiwygRoot === void 0 ? void 0 : wysiwygRoot.closest('.toastui-editor-defaultUI')) === null || _b === void 0 ? void 0 : _b.classList.contains('toastui-editor-dark')) ||
|
|
215
|
+
false;
|
|
216
|
+
pendingThemeOverride = null;
|
|
217
|
+
updateUmlImagesIn(previewRoot, rendererURL, dark);
|
|
218
|
+
updateUmlImagesIn(wysiwygRoot, rendererURL, dark);
|
|
219
|
+
});
|
|
220
|
+
};
|
|
221
|
+
context.eventEmitter.listen('changeTheme', function (theme) {
|
|
222
|
+
scheduleUpdate(theme === 'dark');
|
|
223
|
+
});
|
|
224
|
+
context.eventEmitter.listen('change', function () { return scheduleUpdate(); });
|
|
225
|
+
context.eventEmitter.listen('changeMode', function () { return scheduleUpdate(); });
|
|
226
|
+
context.eventEmitter.listen('load', function () { return scheduleUpdate(); });
|
|
227
|
+
context.eventEmitter.listen('loadUI', function () { return scheduleUpdate(); });
|
|
228
|
+
return {
|
|
229
|
+
toHTMLRenderers: {
|
|
230
|
+
uml: function (node) {
|
|
231
|
+
return createUMLTokens(node.literal, rendererURL, isDarkTheme());
|
|
232
|
+
},
|
|
233
|
+
plantUml: function (node) {
|
|
234
|
+
return createUMLTokens(node.literal, rendererURL, isDarkTheme());
|
|
235
|
+
},
|
|
236
|
+
},
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
__webpack_exports__ = __webpack_exports__["default"];
|
|
241
|
+
/******/ return __webpack_exports__;
|
|
242
|
+
/******/ })()
|
|
243
|
+
;
|
|
244
|
+
});
|
package/index.d.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@techie_doubts/editor-plugin-uml",
|
|
3
|
+
"version": "3.0.1",
|
|
4
|
+
"description": "TOAST UI Editor : UML Plugin",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"nhn",
|
|
7
|
+
"nhn cloud",
|
|
8
|
+
"toast",
|
|
9
|
+
"toastui",
|
|
10
|
+
"toast-ui",
|
|
11
|
+
"editor",
|
|
12
|
+
"plugin",
|
|
13
|
+
"uml"
|
|
14
|
+
],
|
|
15
|
+
"main": "dist/td-editor-plugin-uml.js",
|
|
16
|
+
"types": "index.d.ts",
|
|
17
|
+
"files": [
|
|
18
|
+
"dist/*.js",
|
|
19
|
+
"index.d.ts"
|
|
20
|
+
],
|
|
21
|
+
"author": "NHN Cloud FE Development Lab <dl_javascript@nhn.com>",
|
|
22
|
+
"license": "MIT",
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "https://github.com/nhn/tui.editor.git",
|
|
26
|
+
"directory": "plugins/uml"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://github.com/nhn/tui.editor/issues"
|
|
30
|
+
},
|
|
31
|
+
"homepage": "https://ui.toast.com",
|
|
32
|
+
"browserslist": "last 2 versions, not ie <= 10",
|
|
33
|
+
"scripts": {
|
|
34
|
+
"lint": "eslint .",
|
|
35
|
+
"test:types": "tsc",
|
|
36
|
+
"test": "jest --watch",
|
|
37
|
+
"test:ci": "jest",
|
|
38
|
+
"serve": "snowpack dev",
|
|
39
|
+
"serve:ie": "webpack serve",
|
|
40
|
+
"build:cdn": "webpack build --env cdn & webpack build --env cdn minify",
|
|
41
|
+
"build": "webpack build && npm run build:cdn"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@types/plantuml-encoder": "^1.4.0",
|
|
45
|
+
"cross-env": "^6.0.3"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"plantuml-encoder": "^1.4.0"
|
|
49
|
+
},
|
|
50
|
+
"publishConfig": {
|
|
51
|
+
"access": "public"
|
|
52
|
+
}
|
|
53
|
+
}
|