Merge branch 'himkp-reorg-markdown-serializer-3' into 'master'

Split markdown serializer for some nodes in separate files (iteration 2)

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/159706



Merged-by: Enrique Alcántara <ealcantara@gitlab.com>
Approved-by: Enrique Alcántara <ealcantara@gitlab.com>
Co-authored-by: Himanshu Kapoor <hkapoor@gitlab.com>

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -28,14 +28,26 @@ import {
   renderTableCell,
   renderTableRow,
   renderOrderedList,
-  renderHeading,
   renderHTMLNode,
-  renderContent,
   renderBulletList,
   renderReference,
   renderReferenceLabel,
   preserveUnchanged,
 } from './serialization_helpers';
+import descriptionList from './serializer/description_list';
+import descriptionItem from './serializer/description_item';
+import details from './serializer/details';
+import detailsContent from './serializer/details_content';
+import emoji from './serializer/emoji';
+import footnoteDefinition from './serializer/footnote_definition';
+import footnoteReference from './serializer/footnote_reference';
+import frontmatter from './serializer/frontmatter';
+import figure from './serializer/figure';
+import figureCaption from './serializer/figure_caption';
+import heading from './serializer/heading';
+import horizontalRule from './serializer/horizontal_rule';
+import listItem from './serializer/list_item';
+import loading from './serializer/loading';
 
 const defaultSerializerConfig = {
   marks: {
@@ -66,61 +78,22 @@ const defaultSerializerConfig = {
     [extensions.Diagram.name]: diagram,
     [extensions.CodeSuggestion.name]: codeSuggestion,
     [extensions.DrawioDiagram.name]: drawioDiagram,
-    [extensions.DescriptionList.name]: renderHTMLNode('dl', true),
-    [extensions.DescriptionItem.name]: (state, node, parent, index) => {
-      if (index === 1) state.ensureNewLine();
-      renderHTMLNode(node.attrs.isTerm ? 'dt' : 'dd')(state, node);
-      if (index === parent.childCount - 1) state.ensureNewLine();
-    },
-    [extensions.Details.name]: renderHTMLNode('details', true),
-    [extensions.DetailsContent.name]: (state, node, parent, index) => {
-      if (!index) renderHTMLNode('summary')(state, node);
-      else {
-        if (index === 1) state.ensureNewLine();
-        renderContent(state, node);
-        if (index === parent.childCount - 1) state.ensureNewLine();
-      }
-    },
-    [extensions.Emoji.name]: (state, node) => {
-      const { name } = node.attrs;
-
-      state.write(`:${name}:`);
-    },
-    [extensions.FootnoteDefinition.name]: preserveUnchanged((state, node) => {
-      state.write(`[^${node.attrs.identifier}]: `);
-      state.renderInline(node);
-      state.ensureNewLine();
-    }),
-    [extensions.FootnoteReference.name]: preserveUnchanged({
-      render: (state, node) => {
-        state.write(`[^${node.attrs.identifier}]`);
-      },
-      inline: true,
-    }),
-    [extensions.Frontmatter.name]: preserveUnchanged((state, node) => {
-      const { language } = node.attrs;
-      const syntax = {
-        toml: '+++',
-        json: ';;;',
-        yaml: '---',
-      }[language];
-
-      state.write(`${syntax}\n`);
-      state.text(node.textContent, false);
-      state.ensureNewLine();
-      state.write(syntax);
-      state.closeBlock(node);
-    }),
-    [extensions.Figure.name]: renderHTMLNode('figure'),
-    [extensions.FigureCaption.name]: renderHTMLNode('figcaption'),
+    [extensions.DescriptionList.name]: descriptionList,
+    [extensions.DescriptionItem.name]: descriptionItem,
+    [extensions.Details.name]: details,
+    [extensions.DetailsContent.name]: detailsContent,
+    [extensions.Emoji.name]: emoji,
+    [extensions.FootnoteDefinition.name]: footnoteDefinition,
+    [extensions.FootnoteReference.name]: footnoteReference,
+    [extensions.Frontmatter.name]: frontmatter,
+    [extensions.Figure.name]: figure,
+    [extensions.FigureCaption.name]: figureCaption,
     [extensions.HardBreak.name]: preserveUnchanged(renderHardBreak),
-    [extensions.Heading.name]: preserveUnchanged(renderHeading),
-    [extensions.HorizontalRule.name]: preserveUnchanged(
-      defaultMarkdownSerializer.nodes.horizontal_rule,
-    ),
+    [extensions.Heading.name]: heading,
+    [extensions.HorizontalRule.name]: horizontalRule,
     [extensions.Image.name]: image,
-    [extensions.ListItem.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.list_item),
-    [extensions.Loading.name]: () => {},
+    [extensions.ListItem.name]: listItem,
+    [extensions.Loading.name]: loading,
     [extensions.OrderedList.name]: preserveUnchanged(renderOrderedList),
     [extensions.Paragraph.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.paragraph),
     [extensions.HTMLComment.name]: (state, node) => {

app/assets/javascripts/content_editor/services/serialization_helpers.js

 import { uniq, omit, isFunction } from 'lodash';
-import { defaultMarkdownSerializer } from '~/lib/prosemirror_markdown_serializer';
 
 const defaultAttrs = {
   td: { colspan: 1, rowspan: 1, colwidth: null, align: 'left' },
@@ -337,12 +336,6 @@ export function renderHardBreak(state, node, parent, index) {
   }
 }
 
-export function renderHeading(state, node) {
-  if (state.options.skipEmptyNodes && !node.childCount) return;
-
-  defaultMarkdownSerializer.nodes.heading(state, node);
-}
-
 const expandPreserveUnchangedConfig = (configOrRender) =>
   isFunction(configOrRender)
     ? { render: configOrRender, overwriteSourcePreservationStrategy: false, inline: false }

app/assets/javascripts/content_editor/services/serializer/description_item.js

+import { renderHTMLNode } from '../serialization_helpers';
+
+const descriptionItem = (state, node, parent, index) => {
+  if (index === 1) state.ensureNewLine();
+  renderHTMLNode(node.attrs.isTerm ? 'dt' : 'dd')(state, node);
+  if (index === parent.childCount - 1) state.ensureNewLine();
+};
+
+export default descriptionItem;

app/assets/javascripts/content_editor/services/serializer/description_list.js

+import { renderHTMLNode } from '../serialization_helpers';
+
+const descriptionList = renderHTMLNode('dl', true);
+
+export default descriptionList;

app/assets/javascripts/content_editor/services/serializer/details.js

+import { renderHTMLNode } from '../serialization_helpers';
+
+const details = renderHTMLNode('details', true);
+
+export default details;

app/assets/javascripts/content_editor/services/serializer/details_content.js

+import { renderContent, renderHTMLNode } from '../serialization_helpers';
+
+const detailsContent = (state, node, parent, index) => {
+  if (!index) renderHTMLNode('summary')(state, node);
+  else {
+    if (index === 1) state.ensureNewLine();
+    renderContent(state, node);
+    if (index === parent.childCount - 1) state.ensureNewLine();
+  }
+};
+
+export default detailsContent;

app/assets/javascripts/content_editor/services/serializer/emoji.js

+const emoji = (state, node) => {
+  const { name } = node.attrs;
+
+  state.write(`:${name}:`);
+};
+
+export default emoji;

app/assets/javascripts/content_editor/services/serializer/figure.js

+import { renderHTMLNode } from '../serialization_helpers';
+
+const figure = renderHTMLNode('figure');
+
+export default figure;

app/assets/javascripts/content_editor/services/serializer/figure_caption.js

+import { renderHTMLNode } from '../serialization_helpers';
+
+const figureCaption = renderHTMLNode('figcaption');
+
+export default figureCaption;

app/assets/javascripts/content_editor/services/serializer/footnote_definition.js

+import { preserveUnchanged } from '../serialization_helpers';
+
+const footnoteDefinition = preserveUnchanged((state, node) => {
+  state.write(`[^${node.attrs.identifier}]: `);
+  state.renderInline(node);
+  state.ensureNewLine();
+});
+
+export default footnoteDefinition;

app/assets/javascripts/content_editor/services/serializer/footnote_reference.js

+import { preserveUnchanged } from '../serialization_helpers';
+
+const footnoteReference = preserveUnchanged({
+  render: (state, node) => {
+    state.write(`[^${node.attrs.identifier}]`);
+  },
+  inline: true,
+});
+
+export default footnoteReference;

app/assets/javascripts/content_editor/services/serializer/frontmatter.js

+import { preserveUnchanged } from '../serialization_helpers';
+
+const frontmatter = preserveUnchanged((state, node) => {
+  const { language } = node.attrs;
+  const syntax = {
+    toml: '+++',
+    json: ';;;',
+    yaml: '---',
+  }[language];
+
+  state.write(`${syntax}\n`);
+  state.text(node.textContent, false);
+  state.ensureNewLine();
+  state.write(syntax);
+  state.closeBlock(node);
+});
+
+export default frontmatter;

app/assets/javascripts/content_editor/services/serializer/heading.js

+import { defaultMarkdownSerializer } from '~/lib/prosemirror_markdown_serializer';
+import { preserveUnchanged } from '../serialization_helpers';
+
+const heading = preserveUnchanged((state, node) => {
+  if (state.options.skipEmptyNodes && !node.childCount) return;
+
+  defaultMarkdownSerializer.nodes.heading(state, node);
+});
+
+export default heading;

app/assets/javascripts/content_editor/services/serializer/horizontal_rule.js

+import { defaultMarkdownSerializer } from '~/lib/prosemirror_markdown_serializer';
+import { preserveUnchanged } from '../serialization_helpers';
+
+const horizontalRule = preserveUnchanged(defaultMarkdownSerializer.nodes.horizontal_rule);
+
+export default horizontalRule;

app/assets/javascripts/content_editor/services/serializer/list_item.js

+import { defaultMarkdownSerializer } from '~/lib/prosemirror_markdown_serializer';
+import { preserveUnchanged } from '../serialization_helpers';
+
+const listItem = preserveUnchanged(defaultMarkdownSerializer.nodes.list_item);
+
+export default listItem;

app/assets/javascripts/content_editor/services/serializer/loading.js

+const loading = () => {};
+
+export default loading;