Commit 1de2f6ee authored by derek-knox's avatar derek-knox

Minor refactoring for clarity

Additionally updated inline type to a
from span as I know another pending
MR has this change
parent 0523e401
...@@ -4,33 +4,38 @@ const buildToken = (type, tagName, props) => { ...@@ -4,33 +4,38 @@ const buildToken = (type, tagName, props) => {
const TAG_TYPES = { const TAG_TYPES = {
block: 'div', block: 'div',
inline: 'span', inline: 'a',
}; };
// Open helpers (singular and multiple) // Open helpers (singular and multiple)
const buildUneditableOpenToken = (type = TAG_TYPES.block) => const buildUneditableOpenToken = (tagType = TAG_TYPES.block) =>
buildToken('openTag', type, { buildToken('openTag', tagType, {
attributes: { contenteditable: false }, attributes: { contenteditable: false },
classNames: [ classNames: [
'gl-px-4 gl-py-2 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed', 'gl-px-4 gl-py-2 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
], ],
}); });
export const buildUneditableOpenTokens = (token, type = TAG_TYPES.block) => { export const buildUneditableOpenTokens = (token, tagType = TAG_TYPES.block) => {
return [buildUneditableOpenToken(type), token]; return [buildUneditableOpenToken(tagType), token];
}; };
// Close helpers (singular and multiple) // Close helpers (singular and multiple)
export const buildUneditableCloseToken = (type = TAG_TYPES.block) => buildToken('closeTag', type); export const buildUneditableCloseToken = (tagType = TAG_TYPES.block) =>
buildToken('closeTag', tagType);
export const buildUneditableCloseTokens = (token, type = TAG_TYPES.block) => { export const buildUneditableCloseTokens = (token, tagType = TAG_TYPES.block) => {
return [token, buildUneditableCloseToken(type)]; return [token, buildUneditableCloseToken(tagType)];
}; };
// Complete helpers (open plus close) // Complete helpers (open plus close)
export const buildUneditableTokens = token => {
return [...buildUneditableOpenTokens(token), buildUneditableCloseToken()];
};
export const buildUneditableInlineTokens = token => { export const buildUneditableInlineTokens = token => {
return [ return [
...buildUneditableOpenTokens(token, TAG_TYPES.inline), ...buildUneditableOpenTokens(token, TAG_TYPES.inline),
...@@ -38,11 +43,7 @@ export const buildUneditableInlineTokens = token => { ...@@ -38,11 +43,7 @@ export const buildUneditableInlineTokens = token => {
]; ];
}; };
export const buildUneditableTokens = token => { export const buildUneditableHtmlAsTextTokens = node => {
return [...buildUneditableOpenTokens(token), buildUneditableCloseToken()];
};
export const buildUneditableHtmlTokens = node => {
/* /*
Toast UI internally appends ' data-tomark-pass ' attribute flags so it can target certain 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 nested nodes for internal use during Markdown <=> WYSIWYG conversions. In our case, we want
......
import { buildUneditableHtmlTokens } from './build_uneditable_token'; import { buildUneditableHtmlAsTextTokens } from './build_uneditable_token';
const canRender = ({ type }) => { const canRender = ({ type }) => {
return type === 'htmlBlock'; return type === 'htmlBlock';
}; };
const render = node => buildUneditableHtmlTokens(node); const render = node => buildUneditableHtmlAsTextTokens(node);
export default { canRender, render }; export default { canRender, render };
...@@ -41,7 +41,7 @@ export const originInlineToken = { ...@@ -41,7 +41,7 @@ export const originInlineToken = {
content: '<i>Inline</i> content', content: '<i>Inline</i> content',
}; };
export const uneditableInlineTokens = [ export const uneditableInlineTokens = [
buildUneditableOpenToken('span'), buildUneditableOpenToken('a'),
originInlineToken, originInlineToken,
buildUneditableCloseToken('span'), buildUneditableCloseToken('a'),
]; ];
import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_html_block'; import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_html_block';
import { buildUneditableHtmlTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token'; import { buildUneditableHtmlAsTextTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
import { normalTextNode } from './mock_data'; import { normalTextNode } from './mock_data';
...@@ -32,7 +32,7 @@ describe('Render HTML renderer', () => { ...@@ -32,7 +32,7 @@ describe('Render HTML renderer', () => {
${htmlBlockNode} ${htmlBlockNode}
${htmlBlockNodeToMark} ${htmlBlockNodeToMark}
`('should return uneditable tokens wrapping the $node as a token', ({ node }) => { `('should return uneditable tokens wrapping the $node as a token', ({ node }) => {
expect(renderer.render(node)).toStrictEqual(buildUneditableHtmlTokens(node)); expect(renderer.render(node)).toStrictEqual(buildUneditableHtmlAsTextTokens(node));
}); });
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment