1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import Vue from 'vue';
import { defaults } from 'lodash';
import ToolbarItem from '../toolbar_item.vue';
import buildHtmlToMarkdownRenderer from './build_html_to_markdown_renderer';
import buildCustomHTMLRenderer from './build_custom_renderer';
import { TOOLBAR_ITEM_CONFIGS, VIDEO_ATTRIBUTES } from '../constants';
import sanitizeHTML from './sanitize_html';
const buildWrapper = propsData => {
const instance = new Vue({
render(createElement) {
return createElement(ToolbarItem, propsData);
},
});
instance.$mount();
return instance.$el;
};
const buildVideoIframe = src => {
const wrapper = document.createElement('figure');
const iframe = document.createElement('iframe');
const videoAttributes = { ...VIDEO_ATTRIBUTES, src };
const wrapperClasses = ['gl-relative', 'gl-h-0', 'video_container'];
const iframeClasses = ['gl-absolute', 'gl-top-0', 'gl-left-0', 'gl-w-full', 'gl-h-full'];
wrapper.setAttribute('contenteditable', 'false');
wrapper.classList.add(...wrapperClasses);
iframe.classList.add(...iframeClasses);
Object.assign(iframe, videoAttributes);
wrapper.appendChild(iframe);
return wrapper;
};
const buildImg = (alt, originalSrc, file) => {
const img = document.createElement('img');
const src = file ? URL.createObjectURL(file) : originalSrc;
const attributes = { alt, src };
if (file) {
img.dataset.originalSrc = originalSrc;
}
Object.assign(img, attributes);
return img;
};
export const generateToolbarItem = config => {
const { icon, classes, event, command, tooltip, isDivider } = config;
if (isDivider) {
return 'divider';
}
return {
type: 'button',
options: {
el: buildWrapper({ props: { icon, tooltip }, class: classes }),
event,
command,
},
};
};
export const addCustomEventListener = (editorApi, event, handler) => {
editorApi.eventManager.addEventType(event);
editorApi.eventManager.listen(event, handler);
};
export const removeCustomEventListener = (editorApi, event, handler) =>
editorApi.eventManager.removeEventHandler(event, handler);
export const addImage = ({ editor }, { altText, imageUrl }, file) => {
if (editor.isWysiwygMode()) {
const img = buildImg(altText, imageUrl, file);
editor.getSquire().insertElement(img);
} else {
editor.insertText(``);
}
};
export const insertVideo = ({ editor }, url) => {
const videoIframe = buildVideoIframe(url);
if (editor.isWysiwygMode()) {
editor.getSquire().insertElement(videoIframe);
} else {
editor.insertText(videoIframe.outerHTML);
}
};
export const getMarkdown = editorInstance => editorInstance.invoke('getMarkdown');
/**
* This function allow us to extend Toast UI HTML to Markdown renderer. It is
* a temporary measure because Toast UI does not provide an API
* to achieve this goal.
*/
export const registerHTMLToMarkdownRenderer = editorApi => {
const { renderer } = editorApi.toMarkOptions;
Object.assign(editorApi.toMarkOptions, {
renderer: renderer.constructor.factory(renderer, buildHtmlToMarkdownRenderer(renderer)),
});
};
export const getEditorOptions = externalOptions => {
return defaults({
customHTMLRenderer: buildCustomHTMLRenderer(externalOptions?.customRenderers),
toolbarItems: TOOLBAR_ITEM_CONFIGS.map(toolbarItem => generateToolbarItem(toolbarItem)),
customHTMLSanitizer: html => sanitizeHTML(html),
});
};
|
