summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/content_editor/services/markdown_serializer.js
blob: e3b5775e3202e824c80a5fc344bc6db5393e577d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import {
  MarkdownSerializer as ProseMirrorMarkdownSerializer,
  defaultMarkdownSerializer,
} from 'prosemirror-markdown';
import { DOMParser as ProseMirrorDOMParser } from 'prosemirror-model';

const wrapHtmlPayload = (payload) => `<div>${payload}</div>`;

/**
 * A markdown serializer converts arbitrary Markdown content
 * into a ProseMirror document and viceversa. To convert Markdown
 * into a ProseMirror document, the Markdown should be rendered.
 *
 * The client should provide a render function to allow flexibility
 * on the desired rendering approach.
 *
 * @param {Function} params.render Render function
 * that parses the Markdown and converts it into HTML.
 * @returns a markdown serializer
 */
const create = ({ render = () => null }) => {
  return {
    /**
     * Converts a Markdown string into a ProseMirror JSONDocument based
     * on a ProseMirror schema.
     * @param {ProseMirror.Schema} params.schema A ProseMirror schema that defines
     * the types of content supported in the document
     * @param {String} params.content An arbitrary markdown string
     * @returns A ProseMirror JSONDocument
     */
    deserialize: async ({ schema, content }) => {
      const html = await render(content);

      if (!html) {
        return null;
      }

      const parser = new DOMParser();
      const {
        body: { firstElementChild },
      } = parser.parseFromString(wrapHtmlPayload(html), 'text/html');
      const state = ProseMirrorDOMParser.fromSchema(schema).parse(firstElementChild);

      return state.toJSON();
    },

    /**
     * Converts a ProseMirror JSONDocument based
     * on a ProseMirror schema into Markdown
     * @param {ProseMirror.Schema} params.schema A ProseMirror schema that defines
     * the types of content supported in the document
     * @param {String} params.content A ProseMirror JSONDocument
     * @returns A Markdown string
     */
    serialize: ({ schema, content }) => {
      const document = schema.nodeFromJSON(content);
      const serializer = new ProseMirrorMarkdownSerializer(defaultMarkdownSerializer.nodes, {
        ...defaultMarkdownSerializer.marks,
        bold: {
          // creates a bold alias for the strong mark converter
          ...defaultMarkdownSerializer.marks.strong,
        },
        italic: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
      });

      return serializer.serialize(document, {
        tightLists: true,
      });
    },
  };
};

export default create;