@onereach/ui-components 4.5.0 → 4.6.0-beta.2747.0

package/src/components/or-rich-text-editor-v3/utils/markdown.ts

@@ -0,0 +1,120 @@
+import {
+  MarkdownSerializer as ProseMirrorMarkdownSerializer,
+  defaultMarkdownSerializer,
+} from 'prosemirror-markdown';
+import { DOMParser as ProseMirrorDOMParser, Node, Mark } from 'prosemirror-model';
+import { marked } from 'marked';
+
+import Paragraph from '@tiptap/extension-paragraph';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Strike from '@tiptap/extension-strike';
+import Italic from '@tiptap/extension-italic';
+import HardBreak from '@tiptap/extension-hard-break';
+import Bold from '@tiptap/extension-bold';
+import CodeBlock from '@tiptap/extension-code-block';
+import Blockquote from '@tiptap/extension-blockquote';
+import Link from '@tiptap/extension-link';
+import Highlight from '@tiptap/extension-highlight';
+import Underline from '@tiptap/extension-underline';
+
+const serializerNodes = {
+  ...defaultMarkdownSerializer.nodes,
+  [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
+  [BulletList.name]: defaultMarkdownSerializer.nodes.bullet_list,
+  [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
+  [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list,
+  [HardBreak.name]: defaultMarkdownSerializer.nodes.hard_break,
+  [CodeBlock.name]: defaultMarkdownSerializer.nodes.code_block,
+  [Blockquote.name]: defaultMarkdownSerializer.nodes.blockquote,
+};
+
+const serializerMarks = {
+  ...defaultMarkdownSerializer.marks,
+  [Bold.name]: defaultMarkdownSerializer.marks.strong,
+  [Strike.name]: {
+    open: '~~',
+    close: '~~',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Italic.name]: {
+    open: ' _',
+    close: '_ ',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Highlight.name]: {
+    open: '==',
+    close: '==',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Underline.name]: {
+    open: '',
+    close: '',
+    mixable: true,
+    expelEnclosingWhitespace: true,
+  },
+  [Link.name]: {
+    open(state: any, mark: Mark, parent: Node, index: number) {
+      return isPlainURL(mark, parent, index, 1) ? '<' : '[';
+    },
+    close(state: any, mark: Mark, parent: Node, index: number) {
+      const href = mark.attrs.canonicalSrc || mark.attrs.href;
+
+      return isPlainURL(mark, parent, index, -1)
+        ? '>'
+        : `](${state.esc(href)}${
+          mark.attrs.title ? ` ${state.quote(mark.attrs.title)}` : ''
+        })`;
+    },
+  },
+};
+
+const isPlainURL = (link: Mark, parent: Node, index: number, side: number) => {
+  if (link.attrs.title || !/^\w+:/.test(link.attrs.href)) return false;
+  const content = parent.child(index + (side < 0 ? -1 : 0));
+  if (
+    !content.isText ||
+  content.text !== link.attrs.href ||
+  content.marks[content.marks.length - 1] !== link
+  )
+    return false;
+  if (index === (side < 0 ? 1 : parent.childCount - 1)) return true;
+  const next = parent.child(index + (side < 0 ? -2 : 1));
+  return !link.isInSet(next.marks);
+};
+
+const serialize = (schema: any, content: any) => {
+  const proseMirrorDocument = schema.nodeFromJSON(content);
+  const serializer = new ProseMirrorMarkdownSerializer(
+    serializerNodes,
+    serializerMarks,
+  );
+
+  return serializer.serialize(proseMirrorDocument, { tightLists: true });
+};
+
+const deserialize = (schema: any, content: any) => {
+  if (!content) return null;
+
+  const html = marked(content, {
+    gfm: true,
+    breaks: true,
+  });
+
+  if (!html) return null;
+
+  const parser = new DOMParser();
+  const { body } = parser.parseFromString(html, 'text/html');
+
+  // append original source as a comment that nodes can access
+  body.append(document.createComment(content));
+
+  const state = ProseMirrorDOMParser.fromSchema(schema).parse(body);
+  return state.toJSON();
+};
+
+export { serialize, deserialize };