Initial html custom renderer

Wrap HTML tokens in uneditable blocks
as a v1 implementation.

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

+import renderHtml from './renderers/render_html';
 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';
 
+const htmlRenderers = [renderHtml];
 const listRenderers = [renderKramdownList];
 const paragraphRenderers = [renderIdentifierParagraph];
 const textRenderers = [renderKramdownText, renderEmbeddedRubyText];
@@ -23,8 +25,15 @@ const buildCustomRendererFunctions = (customRenderers, defaults) => {
   return Object.fromEntries(customEntries);
 };
 
-const buildCustomHTMLRenderer = (customRenderers = { list: [], paragraph: [], text: [] }) => {
+const buildCustomHTMLRenderer = (
+  customRenderers = { htmlBlock: [], list: [], paragraph: [], text: [] },
+) => {
   const defaults = {
+    htmlBlock(node, context) {
+      const allHtmlRenderers = [...customRenderers.list, ...htmlRenderers];
+
+      return executeRenderer(allHtmlRenderers, node, context);
+    },
     list(node, context) {
       const allListRenderers = [...customRenderers.list, ...listRenderers];
 

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

+import { buildUneditableTokens } from './build_uneditable_token';
+
+const canRender = ({ type }) => {
+  return type === 'htmlBlock';
+};
+
+const render = (_, { origin }) => buildUneditableTokens(origin());
+
+export default { canRender, render };

changelogs/unreleased/36250-custom-renderer-html.yml

+---
+title: Add initial custom HTML renderer to the Static Site Editor to prevent editing in WYSIWYG mode
+merge_request: 36250
+author:
+type: added

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

+import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_html';
+import { buildUneditableTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+
+import { normalTextNode } from './mock_data';
+
+const htmlLiteral = '<div><h1>Heading</h1><p>Paragraph.</p></div>';
+const htmlBlockNode = {
+  firstChild: null,
+  literal: htmlLiteral,
+  type: 'htmlBlock',
+};
+
+describe('Render HTML renderer', () => {
+  describe('canRender', () => {
+    it('should return true when the argument is an html block', () => {
+      expect(renderer.canRender(htmlBlockNode)).toBe(true);
+    });
+
+    it('should return false when the argument is not an html block', () => {
+      expect(renderer.canRender(normalTextNode)).toBe(false);
+    });
+  });
+
+  describe('render', () => {
+    it('should return uneditable tokens wrapping the origin token', () => {
+      const origin = jest.fn();
+      const context = { origin };
+
+      expect(renderer.render(htmlBlockNode, context)).toStrictEqual(
+        buildUneditableTokens(origin()),
+      );
+    });
+  });
+});