Add font awesome custom renderer

Additionally update build_uneditable_token
to differentiate between the default node type
of block and add inline option as well

app/assets/javascripts/vue_shared/components/rich_content_editor/services/build_custom_renderer.js

@@ -3,7 +3,9 @@ import renderKramdownList from './renderers/render_kramdown_list';
 import renderKramdownText from './renderers/render_kramdown_text';
 import renderIdentifierParagraph from './renderers/render_identifier_paragraph';
 import renderEmbeddedRubyText from './renderers/render_embedded_ruby_text';
+import renderFontAwesomeHtmlInline from './renderers/render_font_awesome_html_inline';
 
+const htmlInlineRenderers = [renderFontAwesomeHtmlInline];
 const htmlRenderers = [renderHtml];
 const listRenderers = [renderKramdownList];
 const paragraphRenderers = [renderIdentifierParagraph];
@@ -26,7 +28,7 @@ const buildCustomRendererFunctions = (customRenderers, defaults) => {
 };
 
 const buildCustomHTMLRenderer = (
-  customRenderers = { htmlBlock: [], list: [], paragraph: [], text: [] },
+  customRenderers = { htmlBlock: [], htmlInline: [], list: [], paragraph: [], text: [] },
 ) => {
   const defaults = {
     htmlBlock(node, context) {
@@ -34,6 +36,11 @@ const buildCustomHTMLRenderer = (
 
       return executeRenderer(allHtmlRenderers, node, context);
     },
+    htmlInline(node, context) {
+      const allHtmlInlineRenderers = [...customRenderers.htmlInline, ...htmlInlineRenderers];
+
+      return executeRenderer(allHtmlInlineRenderers, node, context);
+    },
     list(node, context) {
       const allListRenderers = [...customRenderers.list, ...listRenderers];
 

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token.js

@@ -2,9 +2,14 @@ const buildToken = (type, tagName, props) => {
   return { type, tagName, ...props };
 };
 
-export const buildUneditableOpenTokens = token => {
+const TAG_TYPES = {
+  block: 'div',
+  inline: 'span',
+};
+
+export const buildUneditableOpenTokens = (token, type = TAG_TYPES.block) => {
   return [
-    buildToken('openTag', 'div', {
+    buildToken('openTag', type, {
       attributes: { contenteditable: false },
       classNames: [
         'gl-px-4 gl-py-2 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
@@ -14,10 +19,17 @@ export const buildUneditableOpenTokens = token => {
   ];
 };
 
-export const buildUneditableCloseToken = () => buildToken('closeTag', 'div');
+export const buildUneditableCloseToken = (type = TAG_TYPES.block) => buildToken('closeTag', type);
+
+export const buildUneditableCloseTokens = (token, type = TAG_TYPES.block) => {
+  return [token, buildUneditableCloseToken(type)];
+};
 
-export const buildUneditableCloseTokens = token => {
-  return [token, buildToken('closeTag', 'div')];
+export const buildUneditableInlineTokens = token => {
+  return [
+    ...buildUneditableOpenTokens(token, TAG_TYPES.inline),
+    buildUneditableCloseToken(TAG_TYPES.inline),
+  ];
 };
 
 export const buildUneditableTokens = token => {

app/assets/javascripts/vue_shared/components/rich_content_editor/services/renderers/render_font_awesome_html_inline.js

+import { buildUneditableInlineTokens } from './build_uneditable_token';
+
+const fontAwesomeRegexOpen = /<i class="fa.+>/;
+
+const canRender = ({ literal }) => {
+  return fontAwesomeRegexOpen.test(literal);
+};
+
+const render = (_, { origin }) => buildUneditableInlineTokens(origin());
+
+export default { canRender, render };

changelogs/unreleased/36361-custom-renderer-font-awesome.yml

+---
+title: Add a custom HTML renderer to the Static Site Editor for font awesome inline HTML syntax
+merge_request: 36361
+author:
+type: added

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token_spec.js

@@ -2,14 +2,17 @@ import {
   buildUneditableOpenTokens,
   buildUneditableCloseToken,
   buildUneditableCloseTokens,
+  buildUneditableInlineTokens,
   buildUneditableTokens,
 } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
 
 import {
+  originInlineToken,
   originToken,
   uneditableOpenTokens,
   uneditableCloseToken,
   uneditableCloseTokens,
+  uneditableInlineTokens,
   uneditableTokens,
 } from './mock_data';
 
@@ -38,8 +41,17 @@ describe('Build Uneditable Token renderer helper', () => {
     });
   });
 
+  describe('buildUneditableInlineTokens', () => {
+    it('returns a 3-item array of tokens with the originInlineToken wrapped in the middle of inline tokens', () => {
+      const result = buildUneditableInlineTokens(originInlineToken);
+
+      expect(result).toHaveLength(3);
+      expect(result).toStrictEqual(uneditableInlineTokens);
+    });
+  });
+
   describe('buildUneditableTokens', () => {
-    it('returns a 3-item array of tokens with the originToken wrapped in the middle', () => {
+    it('returns a 3-item array of tokens with the originToken wrapped in the middle of block tokens', () => {
       const result = buildUneditableTokens(originToken);
 
       expect(result).toHaveLength(3);

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/mock_data.js

@@ -12,20 +12,36 @@ export const normalTextNode = buildMockTextNode('This is just normal text.');
 
 // Token spec helpers
 
-const uneditableOpenToken = {
+const buildUneditableOpenToken = type => {
+  return {
     type: 'openTag',
-  tagName: 'div',
+    tagName: type,
     attributes: { contenteditable: false },
     classNames: [
       'gl-px-4 gl-py-2 gl-opacity-5 gl-bg-gray-100 gl-user-select-none gl-cursor-not-allowed',
     ],
+  };
+};
+
+const buildUneditableCloseToken = type => {
+  return { type: 'closeTag', tagName: type };
 };
 
-export const uneditableCloseToken = { type: 'closeTag', tagName: 'div' };
 export const originToken = {
   type: 'text',
   content: '{:.no_toc .hidden-md .hidden-lg}',
 };
-export const uneditableOpenTokens = [uneditableOpenToken, originToken];
+export const uneditableCloseToken = buildUneditableCloseToken('div');
+export const uneditableOpenTokens = [buildUneditableOpenToken('div'), originToken];
 export const uneditableCloseTokens = [originToken, uneditableCloseToken];
 export const uneditableTokens = [...uneditableOpenTokens, uneditableCloseToken];
+
+export const originInlineToken = {
+  type: 'text',
+  content: '<i>Inline</i> content',
+};
+export const uneditableInlineTokens = [
+  buildUneditableOpenToken('span'),
+  originInlineToken,
+  buildUneditableCloseToken('span'),
+];

spec/frontend/vue_shared/components/rich_content_editor/services/renderers/render_font_awesome_html_inline_spec.js

+import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_font_awesome_html_inline';
+import { buildUneditableInlineTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+
+import { normalTextNode } from './mock_data';
+
+const fontAwesomeInlineHtmlNode = {
+  firstChild: null,
+  literal: '<i class="far fa-paper-plane" id="biz-tech-icons">',
+  type: 'html',
+};
+
+describe('Render Font Awesome Inline HTML renderer', () => {
+  describe('canRender', () => {
+    it('should return true when the argument `literal` has font awesome inline html syntax', () => {
+      expect(renderer.canRender(fontAwesomeInlineHtmlNode)).toBe(true);
+    });
+
+    it('should return false when the argument `literal` lacks font awesome inline html syntax', () => {
+      expect(renderer.canRender(normalTextNode)).toBe(false);
+    });
+  });
+
+  describe('render', () => {
+    it('should return uneditable inline tokens', () => {
+      const token = { type: 'text', tagName: null, content: fontAwesomeInlineHtmlNode.literal };
+      const context = { origin: () => token };
+
+      expect(renderer.render(fontAwesomeInlineHtmlNode, context)).toStrictEqual(
+        buildUneditableInlineTokens(token),
+      );
+    });
+  });
+});