Separate serializers and tiptap extensions

Move node and mark serializers out of the
tiptap extension files. Define the serializer
config in the Markdown Serializer factory
module

app/assets/javascripts/content_editor/extensions/blockquote.js

-import { Blockquote } from '@tiptap/extension-blockquote';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = Blockquote;
-export const serializer = defaultMarkdownSerializer.nodes.blockquote;
+export { Blockquote as default } from '@tiptap/extension-blockquote';

app/assets/javascripts/content_editor/extensions/bold.js

-import { Bold } from '@tiptap/extension-bold';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = Bold;
-export const serializer = defaultMarkdownSerializer.marks.strong;
+export { Bold as default } from '@tiptap/extension-bold';

app/assets/javascripts/content_editor/extensions/bullet_list.js

-import { BulletList } from '@tiptap/extension-bullet-list';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = BulletList;
-export const serializer = defaultMarkdownSerializer.nodes.bullet_list;
+export { BulletList as default } from '@tiptap/extension-bullet-list';

app/assets/javascripts/content_editor/extensions/code.js

-import { Code } from '@tiptap/extension-code';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = Code;
-export const serializer = defaultMarkdownSerializer.marks.code;
+export { Code as default } from '@tiptap/extension-code';

app/assets/javascripts/content_editor/extensions/code_block_highlight.js

 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
 import * as lowlight from 'lowlight';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
 const extractLanguage = (element) => element.getAttribute('lang');
 
-const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
+export default CodeBlockLowlight.extend({
   addAttributes() {
     return {
       language: {
@@ -38,6 +37,3 @@ const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
 }).configure({
   lowlight,
 });
-
-export const tiptapExtension = ExtendedCodeBlockLowlight;
-export const serializer = defaultMarkdownSerializer.nodes.code_block;

app/assets/javascripts/content_editor/extensions/document.js

-import Document from '@tiptap/extension-document';
-
-export const tiptapExtension = Document;
+export { Document as default } from '@tiptap/extension-document';

app/assets/javascripts/content_editor/extensions/dropcursor.js

-import Dropcursor from '@tiptap/extension-dropcursor';
-
-export const tiptapExtension = Dropcursor;
+export { Dropcursor as default } from '@tiptap/extension-dropcursor';

app/assets/javascripts/content_editor/extensions/gapcursor.js

-import Gapcursor from '@tiptap/extension-gapcursor';
-
-export const tiptapExtension = Gapcursor;
+export { Gapcursor as default } from '@tiptap/extension-gapcursor';

app/assets/javascripts/content_editor/extensions/hard_break.js

 import { HardBreak } from '@tiptap/extension-hard-break';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-const ExtendedHardBreak = HardBreak.extend({
+export default HardBreak.extend({
   addKeyboardShortcuts() {
     return {
       'Shift-Enter': () => this.editor.commands.setHardBreak(),
     };
   },
 });
-
-export const tiptapExtension = ExtendedHardBreak;
-export const serializer = defaultMarkdownSerializer.nodes.hard_break;

app/assets/javascripts/content_editor/extensions/heading.js

-import { Heading } from '@tiptap/extension-heading';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = Heading;
-export const serializer = defaultMarkdownSerializer.nodes.heading;
+export { Heading as default } from '@tiptap/extension-heading';

app/assets/javascripts/content_editor/extensions/history.js

-import History from '@tiptap/extension-history';
-
-export const tiptapExtension = History;
+export { History as default } from '@tiptap/extension-history';

app/assets/javascripts/content_editor/extensions/horizontal_rule.js

 import { nodeInputRule } from '@tiptap/core';
 import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
 export const hrInputRuleRegExp = /^---$/;
 
-export const tiptapExtension = HorizontalRule.extend({
+export default HorizontalRule.extend({
   addInputRules() {
     return [nodeInputRule(hrInputRuleRegExp, this.type)];
   },
 });
-export const serializer = defaultMarkdownSerializer.nodes.horizontal_rule;

app/assets/javascripts/content_editor/extensions/image.js

@@ -48,11 +48,12 @@ const handleFileEvent = ({ editor, file, uploadsPath, renderMarkdown }) => {
   return false;
 };
 
-const ExtendedImage = Image.extend({
+export default Image.extend({
   defaultOptions: {
     ...Image.options,
     uploadsPath: null,
     renderMarkdown: null,
+    inline: true,
   },
   addAttributes() {
     return {
@@ -152,17 +153,3 @@ const ExtendedImage = Image.extend({
     return VueNodeViewRenderer(ImageWrapper);
   },
 });
-
-const serializer = (state, node) => {
-  const { alt, canonicalSrc, src, title } = node.attrs;
-  const quotedTitle = title ? ` ${state.quote(title)}` : '';
-
-  state.write(`![${state.esc(alt || '')}](${state.esc(canonicalSrc || src)}${quotedTitle})`);
-};
-
-export const configure = ({ renderMarkdown, uploadsPath }) => {
-  return {
-    tiptapExtension: ExtendedImage.configure({ inline: true, renderMarkdown, uploadsPath }),
-    serializer,
-  };
-};

app/assets/javascripts/content_editor/extensions/italic.js

-import { Italic } from '@tiptap/extension-italic';
-
-export const tiptapExtension = Italic;
-export const serializer = { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true };
+export { Italic as default } from '@tiptap/extension-italic';

app/assets/javascripts/content_editor/extensions/link.js

@@ -20,7 +20,7 @@ export const extractHrefFromMarkdownLink = (match) => {
   return extractHrefFromMatch(match);
 };
 
-export const tiptapExtension = Link.extend({
+export default Link.extend({
   addInputRules() {
     return [
       markInputRule(markdownLinkSyntaxInputRuleRegExp, this.type, extractHrefFromMarkdownLink),
@@ -51,13 +51,3 @@ export const tiptapExtension = Link.extend({
 }).configure({
   openOnClick: false,
 });
-
-export const serializer = {
-  open() {
-    return '[';
-  },
-  close(state, mark) {
-    const href = mark.attrs.canonicalSrc || mark.attrs.href;
-    return `](${state.esc(href)}${mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''})`;
-  },
-};

app/assets/javascripts/content_editor/extensions/list_item.js

-import { ListItem } from '@tiptap/extension-list-item';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = ListItem;
-export const serializer = defaultMarkdownSerializer.nodes.list_item;
+export { ListItem as default } from '@tiptap/extension-list-item';

app/assets/javascripts/content_editor/extensions/ordered_list.js

-import { OrderedList } from '@tiptap/extension-ordered-list';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = OrderedList;
-export const serializer = defaultMarkdownSerializer.nodes.ordered_list;
+export { OrderedList as default } from '@tiptap/extension-ordered-list';

app/assets/javascripts/content_editor/extensions/paragraph.js

-import { Paragraph } from '@tiptap/extension-paragraph';
-import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
-
-export const tiptapExtension = Paragraph;
-export const serializer = defaultMarkdownSerializer.nodes.paragraph;
+export { Paragraph as default } from '@tiptap/extension-paragraph';

app/assets/javascripts/content_editor/extensions/strike.js

-import { Strike } from '@tiptap/extension-strike';
-
-export const tiptapExtension = Strike;
-export const serializer = {
-  open: '~~',
-  close: '~~',
-  mixable: true,
-  expelEnclosingWhitespace: true,
-};
+export { Strike as default } from '@tiptap/extension-strike';

app/assets/javascripts/content_editor/extensions/table.js

-import { Table } from '@tiptap/extension-table';
-
-export const tiptapExtension = Table;
-
-export function serializer(state, node) {
-  state.renderContent(node);
-}
+export { Table as default } from '@tiptap/extension-table';