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
|
const buildToken = (type, tagName, props) => {
return { type, tagName, ...props };
};
const TAG_TYPES = {
block: 'div',
inline: 'a',
};
// Open helpers (singular and multiple)
const buildUneditableOpenToken = (tagType = TAG_TYPES.block) =>
buildToken('openTag', tagType, {
attributes: { contenteditable: false },
classNames: [
'gl-px-4 gl-py-2 gl-my-5 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
],
});
export const buildUneditableOpenTokens = (token, tagType = TAG_TYPES.block) => {
return [buildUneditableOpenToken(tagType), token];
};
// Close helpers (singular and multiple)
export const buildUneditableCloseToken = (tagType = TAG_TYPES.block) =>
buildToken('closeTag', tagType);
export const buildUneditableCloseTokens = (token, tagType = TAG_TYPES.block) => {
return [token, buildUneditableCloseToken(tagType)];
};
// Complete helpers (open plus close)
export const buildTextToken = (content) => buildToken('text', null, { content });
export const buildUneditableBlockTokens = (token) => {
return [...buildUneditableOpenTokens(token), buildUneditableCloseToken()];
};
export const buildUneditableInlineTokens = (token) => {
return [
...buildUneditableOpenTokens(token, TAG_TYPES.inline),
buildUneditableCloseToken(TAG_TYPES.inline),
];
};
export const buildUneditableHtmlAsTextTokens = (node) => {
/*
Toast UI internally appends ' data-tomark-pass ' attribute flags so it can target certain
nested nodes for internal use during Markdown <=> WYSIWYG conversions. In our case, we want
to prevent HTML being rendered completely in WYSIWYG mode and thus we use a `text` vs. `html`
type when building the token. However, in doing so, we need to strip out the ` data-tomark-pass `
to prevent their persistence within the `text` content as the user did not intend these as edits.
https://github.com/nhn/tui.editor/blob/cc54ec224fc3a4b6e5a2b19a71650959f41adc0e/apps/editor/src/js/convertor.js#L72
*/
const regex = / data-tomark-pass /gm;
const content = node.literal.replace(regex, '');
const htmlAsTextToken = buildToken('text', null, { content });
return [buildUneditableOpenToken(), htmlAsTextToken, buildUneditableCloseToken()];
};
|
