Merge branch '221079-custom-renderer-embedded-ruby' into 'master'

Resolve "Display non-markdown content in the WYSIWYG mode of the SSE::Embedded Ruby"

Closes #221079

See merge request gitlab-org/gitlab!35261

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

 import renderKramdownList from './renderers/render_kramdown_list';
 import renderKramdownText from './renderers/render_kramdown_text';
 import renderIdentifierText from './renderers/render_identifier_text';
+import renderEmbeddedRubyText from './renderers/render_embedded_ruby_text';
 
 const listRenderers = [renderKramdownList];
-const textRenderers = [renderKramdownText, renderIdentifierText];
+const textRenderers = [renderKramdownText, renderIdentifierText, renderEmbeddedRubyText];
 
 const executeRenderer = (renderers, node, context) => {
   const availableRenderer = renderers.find(renderer => renderer.canRender(node, context));

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

+import { buildUneditableTokens } from './build_uneditable_token';
+
+const embeddedRubyRegex = /(^<%.+%>$)/;
+
+const canRender = ({ literal }) => {
+  return embeddedRubyRegex.test(literal);
+};
+
+const render = (_, { origin }) => {
+  return buildUneditableTokens(origin());
+};
+
+export default { canRender, render };

changelogs/unreleased/35261-custom-renderer-embedded-ruby.yml

+---
+title: Add a custom HTML renderer to the Static Site Editor for embedded ruby (ERB) syntax
+merge_request: 35261
+author:
+type: added

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

@@ -45,6 +45,7 @@ export const kramdownTextNode = buildMockTextNode('{:toc}');
 export const identifierTextNode = buildMockTextNode('[Some text]: https://link.com');
 export const identifierInlineCodeTextEnteringNode = buildMockTextNodeWithAdjacentInlineCode(true);
 export const identifierInlineCodeTextExitingNode = buildMockTextNodeWithAdjacentInlineCode(false);
+export const embeddedRubyTextNode = buildMockTextNode('<%= partial("some/path") %>');
 export const normalTextNode = buildMockTextNode('This is just normal text.');
 
 const uneditableOpenToken = {

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

+import renderer from '~/vue_shared/components/rich_content_editor/services/renderers/render_embedded_ruby_text';
+import { buildUneditableTokens } from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
+
+import { embeddedRubyTextNode, normalTextNode } from '../../mock_data';
+
+describe('Render Embedded Ruby Text renderer', () => {
+  describe('canRender', () => {
+    it('should return true when the argument `literal` has embedded ruby syntax', () => {
+      expect(renderer.canRender(embeddedRubyTextNode)).toBe(true);
+    });
+
+    it('should return false when the argument `literal` lacks embedded ruby syntax', () => {
+      expect(renderer.canRender(normalTextNode)).toBe(false);
+    });
+  });
+
+  describe('render', () => {
+    const origin = jest.fn();
+
+    it('should return uneditable tokens', () => {
+      const context = { origin };
+
+      expect(renderer.render(embeddedRubyTextNode, context)).toStrictEqual(
+        buildUneditableTokens(origin()),
+      );
+    });
+  });
+});

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

@@ -3,7 +3,7 @@ import {
   buildUneditableOpenTokens,
   buildUneditableCloseTokens,
   buildUneditableTokens,
-} from '~/vue_shared/components/rich_content_editor/services/renderers//build_uneditable_token';
+} from '~/vue_shared/components/rich_content_editor/services/renderers/build_uneditable_token';
 
 import {
   identifierTextNode,