@seafile/seafile-editor 0.4.8 → 1.0.0

package/src/slate-convert/html-to-slate/rules/text.js

@@ -0,0 +1,63 @@
+import slugid from 'slugid';
+
+const textRule = (element, parseChild) => {
+  const { nodeName, nodeType } = element;
+
+  if (nodeName === 'SPAN') {
+    return {
+      id: slugid.nice(),
+      text: element.textContent,
+    };
+  }
+
+  if (nodeName === 'STRONG' || nodeName === 'B') {
+    return {
+      id: slugid.nice(),
+      bold: true,
+      text: element.textContent,
+    };
+  }
+
+  if (nodeName === 'CODE' && element.parentElement.nodeName !== 'PRE') {
+    return {
+      id: slugid.nice(),
+      code: true,
+      text: element.textContent
+    };
+  }
+
+  if (nodeName === 'DEL') {
+    return {
+      id: slugid.nice(),
+      delete: true,
+      text: element.textContent
+    };
+  }
+
+  if (nodeName === 'I') {
+    return {
+      id: slugid.nice(),
+      italic: true,
+      text: element.textContent
+    };
+  }
+
+  if (nodeName === 'INS') {
+    return {
+      id: slugid.nice(),
+      add: true,
+      text: element.textContent
+    };
+  }
+
+  if (nodeType === 3) {
+    return {
+      id: slugid.nice(),
+      text: element.textContent,
+    };
+  }
+
+  return;
+};
+
+export default textRule;

package/src/slate-convert/index.js

@@ -0,0 +1,11 @@
+import mdStringToSlate from './md-to-slate';
+import slateToMdString from './slate-to-md';
+import processor from './md-to-html';
+import deserializeHtml from './html-to-slate';
+
+export {
+  mdStringToSlate,
+  slateToMdString,
+  processor, // md string to html
+  deserializeHtml, // html -> slate notes
+};

package/src/slate-convert/md-to-html/index.js

@@ -0,0 +1,44 @@
+import { unified } from 'unified';
+import markdown from 'remark-parse';
+import gfm from 'remark-gfm';
+import math from 'remark-math';
+import breaks from 'remark-breaks';
+import remarkRehype from 'remark-rehype';
+import mathjax from 'rehype-mathjax/browser';
+import rehypeSlug from 'rehype-slug';
+import rehypeRaw from 'rehype-raw';
+import rehypeFormat from 'rehype-format';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import sanitizeSchema from './sanitize-schema';
+
+
+// mdString -> mdast -> html ast -> html
+const processor = unified()
+  // Handles markdown basic syntax
+  // https://github.com/remarkjs/remark/tree/main
+  .use(markdown)
+  // Handle markdown extension syntax
+  // https://github.com/remarkjs/remark-gfm
+  .use(gfm)
+  // https://github.com/remarkjs/remark-math
+  .use(math)
+  // https://github.com/remarkjs/remark-breaks
+  .use(breaks)
+  .use(remarkRehype, { allowDangerousHtml: true }) // convert mdast -> hast
+  // https://www.npmjs.com/package/rehype-mathjax
+  .use(mathjax, { displayMath: ['$$', '$$'] })
+  // https://www.npmjs.com/package/rehype-raw
+  .use(rehypeRaw)
+  // https://www.npmjs.com/package/rehype-format
+  .use(rehypeFormat, { blanks: ['pre', 'code'] })
+  // https://github.com/rehypejs/rehype-slug
+  .use(rehypeSlug)
+  // https://github.com/rehypejs/rehype-sanitize
+  .use(rehypeSanitize, sanitizeSchema)
+  // https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify
+  .use(rehypeStringify);
+
+// transform rules: https://github.com/syntax-tree/mdast-util-to-hast
+
+export default processor;

package/src/slate-convert/md-to-html/sanitize-schema.js

@@ -0,0 +1,41 @@
+import deepmerge from 'deepmerge';
+import { defaultSchema } from 'hast-util-sanitize';
+
+const customSchema = {
+  'tagNames': [
+    'input',
+    'code',
+    'span',
+    'div',
+    'blockquote',
+    'pre',
+  ],
+  'attributes': {
+    'input': [
+      'type',
+    ],
+    'li': [
+      'className'
+    ],
+    'code': [
+      'className',
+    ],
+    'span': [
+      'className'
+    ],
+    'div': [
+      'className'
+    ]
+  },
+  'protocols': {
+    'src': [
+      'http',
+      'https',
+      'cid',
+    ],
+  }
+};
+
+const sanitizeSchema = deepmerge(defaultSchema, customSchema);
+
+export default sanitizeSchema;

package/src/slate-convert/md-to-slate/index.js

@@ -0,0 +1,42 @@
+import { unified } from 'unified';
+import markdown from 'remark-parse';
+import gfm from 'remark-gfm';
+import math from 'remark-math';
+import { generateDefaultParagraph } from '../../extension/core';
+import { formatMdToSlate } from './transform';
+
+// md string -> md ast
+const getProcessor = () => {
+  const processor = unified()
+    .use(markdown)  // Handles markdown basic syntax
+    .use(gfm)       // Handle markdown extension syntax
+    .use(math);     // Handles markdown math formulas
+
+  return processor;
+};
+
+const reconciledSlateNodes = (nodes) => {
+  return nodes;
+};
+
+// md string --> md ast --> slate ast
+// https://github.com/syntax-tree/mdast
+const mdStringToSlate = (mdString) => {
+  if (!mdString) return generateDefaultParagraph();
+
+  let content = mdString;
+  if (typeof mdString === 'number') {
+    content = mdString + '';
+  }
+
+  // md string --> md ast
+  const root = getProcessor().parse(content);
+
+  // md ast --> slate ast
+  const slateNodes = formatMdToSlate(root.children);
+
+  // Format the document
+  return reconciledSlateNodes(slateNodes);
+};
+
+export default mdStringToSlate;

package/src/slate-convert/md-to-slate/transform.js

@@ -0,0 +1,336 @@
+import slugid from 'slugid';
+import { generateDefaultText } from '../../extension/core';
+import {
+  BLOCKQUOTE,
+  HEADER,
+  IMAGE,
+  LINK,
+  PARAGRAPH,
+  TABLE,
+  CODE_BLOCK,
+  LIST_ITEM,
+  ORDERED_LIST,
+  UNORDERED_LIST,
+  CHECK_LIST_ITEM,
+  CODE_LINE,
+  TABLE_ROW,
+  TABLE_CELL,
+} from '../../extension/constants/element-types';
+
+const INLINE_KEY_MAP = {
+  strong: 'bold',
+  emphasis: 'italic',
+};
+
+// <strong><em>aa<em>bb<em></strong>
+const applyMarkForInlineItem = (result, item, textNode = {}) => {
+  const { type, children, value } = item;
+
+  if (type === LINK) {
+    const child = children.length === 0 ? { type: 'text', value: '' } : children[0];
+    const linkChildren = [{ id: slugid.nice(), text: child.value }];
+    const link = {
+      id: slugid.nice(),
+      type: LINK,
+      url: item.url,
+      title: item.title,
+      children: linkChildren,
+    };
+    result.push([
+      generateDefaultText(),
+      link,
+      generateDefaultText(),
+    ]);
+    return result;
+  }
+
+  if (type === IMAGE) {
+    const data = {
+      src: item.url,
+      ...(item.title && { title: item.title }),
+      ...(item.alt && { alt: item.alt }),
+      ...(item.width && { width: item.width }),
+      ...(item.height && { height: item.height }),
+    };
+    const image = {
+      id: slugid.nice(),
+      data: data,
+      type: IMAGE,
+      children: [generateDefaultText()]
+    };
+    result.push([
+      generateDefaultText(),
+      image,
+      generateDefaultText(),
+    ]);
+    return result;
+  }
+
+  // Handle special images
+  if (type === 'html') {
+    const nodes = transformHtml(item);
+    result.push(nodes);
+    return result;
+  }
+
+  if (type === 'text') {
+    textNode['text'] = value || '';
+    result.push(textNode);
+    return;
+  }
+
+  if (type === 'inlineCode') {
+    textNode['code'] = true;
+    textNode['text'] = value || '';
+    result.push(textNode);
+    return;
+  }
+
+  const attr_key = INLINE_KEY_MAP[type];
+  if (!Array.isArray(children) || children.length === 0 || !attr_key) {
+    textNode['text'] = value || '';
+    result.push(textNode);
+    return;
+  }
+
+  textNode[attr_key] = true;
+  children.forEach(item => {
+    applyMarkForInlineItem(result, item, textNode);
+  });
+};
+
+const transformNodeWithInlineChildren = (node) => {
+  const { children } = node;
+  const defaultChildren = [generateDefaultText()];
+  if (!children || !Array.isArray(children) || children.length === 0) {
+    return defaultChildren;
+  }
+  const result = [];
+  children.forEach(item => applyMarkForInlineItem(result, item));
+  return result.flat();
+};
+
+export const transformHeader = (node) => {
+  const { depth } = node;
+  const type = `${HEADER}${depth}`;
+  return {
+    id: slugid.nice(),
+    type: type,
+    children: transformNodeWithInlineChildren(node),
+  };
+};
+
+export const transformParagraph = (node) => {
+  return {
+    id: slugid.nice(),
+    type: PARAGRAPH,
+    children: transformNodeWithInlineChildren(node),
+  };
+};
+
+export const transformBlockquote = (node) => {
+  const { children } = node;
+  return {
+    id: slugid.nice(),
+    type: BLOCKQUOTE,
+    children: children.map(child => {
+      const handler = elementHandlers[child.type];
+      return handler(child);
+    }).flat(), // flat
+  };
+};
+
+export const transformListContent = (node) => {
+  return {
+    id: slugid.nice(),
+    type: PARAGRAPH,
+    children: transformNodeWithInlineChildren(node),
+  };
+};
+
+export const transformListItem = (node) => {
+  const { children } = node;
+  return {
+    id: slugid.nice(),
+    type: LIST_ITEM,
+    // eslint-disable-next-line array-callback-return
+    children: children.map(child => {
+      if (child.type === PARAGRAPH) {
+        return transformListContent(child);
+      } else {
+        return transformList(child);
+      }
+    }),
+  };
+};
+
+export const transformOrderedList = (node) => {
+  const { children } = node;
+  return {
+    id: slugid.nice(),
+    type: ORDERED_LIST,
+    children: children.map(child => transformListItem(child)),
+  };
+};
+
+export const transformUnorderedList = (node) => {
+  const { children } = node;
+  return {
+    id: slugid.nice(),
+    type: UNORDERED_LIST,
+    children: children.map(child => transformListItem(child)),
+  };
+};
+
+export const transformCheckListItem = (node) => {
+  const { children, checked } = node;
+  return {
+    id: slugid.nice(),
+    type: CHECK_LIST_ITEM,
+    checked: checked,
+    children: children.map(child => transformNodeWithInlineChildren(child)).flat()
+  };
+};
+
+export const transformCheckList = (node) => {
+  const { children } = node;
+  return children.map(child => transformCheckListItem(child));
+};
+
+export const transformList = (node) => {
+  const { ordered, children } = node;
+  const firstChild = children[0];
+  if (ordered === true) {
+    return transformOrderedList(node);
+  }
+  if (ordered === false && firstChild.checked === null) {
+    return transformUnorderedList(node);
+  }
+  return transformCheckList(node);
+};
+
+export const transformTableCell = (cell, align) => {
+  return {
+    id: slugid.nice(),
+    type: TABLE_CELL,
+    align: align || null,
+    children: transformNodeWithInlineChildren(cell),
+  };
+};
+
+export const transformTableRow = (row, align) => {
+  const { children: cells } = row;
+  return {
+    id: slugid.nice(),
+    type: TABLE_ROW,
+    children: cells.map(cell => transformTableCell(cell, align)),
+  };
+};
+
+export const transformTable = (node) => {
+  const { children: rows, align = [] } = node;
+  return {
+    id: slugid.nice(),
+    type: TABLE,
+    children: rows.map((row, index) => transformTableRow(row, align[index])),
+  };
+};
+
+export const transformCodeLine = (text) => {
+  return {
+    id: slugid.nice(),
+    type: CODE_LINE,
+    children: [
+      {
+        id: slugid.nice(),
+        text: text,
+      }
+    ]
+  };
+};
+
+export const transformCodeBlock = (node) => {
+  const { lang, value } = node;
+  const children = value.split('\n');
+  return {
+    id: slugid.nice(),
+    type: CODE_BLOCK,
+    lang: lang,
+    children: children.map(text => transformCodeLine(text)),
+  };
+};
+
+export const transformHr = (node) => {
+  return {
+    id: slugid.nice(),
+    type: 'hr',
+    children: [
+      generateDefaultText(),
+    ]
+  };
+};
+
+export const transformHtml = (node) => {
+  const defaultTextNode = generateDefaultText();
+  if (node.value.slice(0, 4).toLowerCase() === '<img') {
+    const { body } = new DOMParser().parseFromString(node.value, 'text/html');
+    const img = body.firstChild;
+    const src = img.getAttribute('src');
+    if (src) return defaultTextNode;
+
+    const alt = img.getAttribute('alt');
+    const title = img.getAttribute('title');
+    const width = img.getAttribute('width');
+    const height = img.getAttribute('height');
+    const data = {
+      src: src,
+      ...(alt && { alt }),
+      ...(title && { title }),
+      ...(!isNaN(width) && width > 0 && { width }),
+      ...(!isNaN(height) && height > 0 && { height }),
+    };
+    const image = {
+      id: slugid.nice(),
+      data: data,
+      type: IMAGE,
+      children: [generateDefaultText()]
+    };
+    return [defaultTextNode, image, defaultTextNode];
+  }
+
+  return defaultTextNode;
+};
+
+export const transformMath = (node) => {
+  return {
+    id: slugid.nice(),
+    type: 'formula',
+    data: {
+      formula: node.value
+    },
+    children: [
+      generateDefaultText(),
+    ]
+  };
+};
+
+const elementHandlers = {
+  'paragraph': transformParagraph,
+  'heading': transformHeader,
+  'blockquote': transformBlockquote,
+  'table': transformTable,
+  'list': transformList,  // ordered_list | unordered_list | check_list_item
+  'code': transformCodeBlock,
+  'thematicBreak': transformHr,
+  'math': transformMath,
+};
+
+export const formatMdToSlate = (children) => {
+  const validChildren = children.filter(child => elementHandlers[child.type]);
+  return validChildren.map(child => {
+    const handler = elementHandlers[child.type];
+    return handler(child);
+  }).flat();
+};
+
+

package/src/slate-convert/slate-to-md/index.js

@@ -0,0 +1,44 @@
+import { unified } from 'unified';
+import markdown from 'remark-parse';
+import gfm from 'remark-gfm';
+import remarkStringify from 'remark-stringify';
+import remarkMath from 'remark-math';
+import { formatSlateToMd } from './transform';
+
+const isContentValid = (value) => {
+  if (!value || !Array.isArray(value)) return false;
+  return true;
+};
+
+// slateNode -> mdast -> mdString
+const slateToMdString = (value) => {
+  if (!isContentValid(value)) return '';
+  // slateNode -> mdast
+  // https://github.com/syntax-tree/mdast#phrasingcontent
+  const mdASTNodes = formatSlateToMd(value);
+
+  const root = {
+    type: 'root',
+    children: mdASTNodes
+  };
+
+  // convert slate value to md
+  const stringifyOptions = {
+    rule: '-',
+    ruleSpaces: false,
+    bullet: '*',
+    commonmarks: true,
+    fences: true,
+  };
+  const res = unified()
+    .use(markdown)
+    .use(gfm)
+    .use(remarkStringify, stringifyOptions)
+    .use(remarkMath)
+    .stringify(root);
+  return res;
+};
+
+// transform rules: https://github.com/syntax-tree/mdast
+
+export default slateToMdString;