@seafile/seafile-editor 0.4.8 → 1.0.0

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

@@ -0,0 +1,248 @@
+const generateDefaultText = () => {
+  return {
+    type: 'text',
+    value: '',
+  };
+};
+
+const transformTextNode = (textNode) => {
+  let mdNode = { type: 'text', value: textNode.text };
+
+  // code = true, override text type
+  if (textNode['code']) {
+    mdNode = { ...mdNode, type: 'inlineCode' };
+  }
+
+  // blob = true, add strong parent
+  if (textNode['bold']) {
+    mdNode = { type: 'strong', children: [mdNode] };
+  }
+
+  // italic = true, add emphasis parent
+  if (textNode['italic']) {
+    mdNode = { type: 'emphasis', children: [mdNode] };
+  }
+
+  return mdNode;
+};
+
+const transformInlineChildren = (result, item) => {
+  // image
+  if (item.type && item.type === 'image') {
+    const { data } = item;
+    let image = {
+      type: 'image',
+      url: data.src,
+      alt: data.alt || null,
+      title: data.title || null,
+    };
+    if (data.height || data.width) {
+      image = {
+        type: 'html',
+        value: `<img src="${data.src}" alt="${data.alt}" title="${data.title}" width="${data.width}" height="${data.height}" />`
+      };
+    }
+    result.push(image);
+    return result;
+  }
+
+  // link
+  if (item.type && item.type === 'link') {
+    const link = {
+      type: 'link',
+      url: item.url,
+      title: item.title || null,
+      children: [transformTextNode(item.children[0])],
+    };
+    result.push(link);
+    return result;
+  }
+
+  // text
+  const nodes = transformTextNode(item);
+  result.push(nodes);
+  return result;
+};
+
+const transformNodeWithInlineChildren = (node) => {
+  const { children } = node;
+  const defaultChildren = [generateDefaultText()];
+  if (!children || !Array.isArray(children) || children.length === 0) {
+    return defaultChildren;
+  }
+  const result = [];
+  children.forEach(item => transformInlineChildren(result, item));
+  return result.flat();
+};
+
+const transformHeader = (node) => {
+  const level = node.type.replace('header', '');
+  return {
+    type: 'heading',
+    depth: parseInt(level),
+    children: transformNodeWithInlineChildren(node)
+  };
+};
+
+const transformParagraph = (node) => {
+  return {
+    type: 'paragraph',
+    children: transformNodeWithInlineChildren(node)
+  };
+};
+
+const transformBlockquote = (node) => {
+  const { children } = node;
+  return {
+    type: 'blockquote',
+    children: children.map(child => {
+      const handler = elementHandlers[child.type];
+      return handler(child);
+    }).flat(), // flat
+  };
+};
+
+const transformCheckList = (node) => {
+  return {
+    type: 'list',
+    ordered: false,
+    start: null,
+    spread: false,
+    children: [
+      {
+        type: 'listItem',
+        spread: false,
+        checked: node.checked,
+        children: [
+          transformParagraph(node),
+        ]
+      }
+    ],
+  };
+};
+
+const transformListContent = (node) => {
+  return transformParagraph(node);
+};
+
+const transformListItem = (node) => {
+  let loose = false;
+  const { children } = node;
+  // eslint-disable-next-line array-callback-return
+  const newChildren = children.map(child => {
+    if (child.type === 'paragraph') {
+      return transformListContent(child);
+    }
+    if (child.type === 'unordered_list' || child.type === 'ordered_list') {
+      return transformList(child);
+    }
+  });
+  if (newChildren.length === 1) {
+    loose = false;
+  } else if (newChildren.length === 2 && newChildren[1].type === 'list') {
+    loose = true;
+  } else {
+    loose = true;
+  }
+
+  return {
+    type: 'listItem',
+    loose: loose,
+    checked: null,
+    children: newChildren
+  };
+};
+
+const transformList = (node) => {
+  const { children } = node;
+  const newChildren = children.map(child => transformListItem(child));
+  let loose = false;
+  for (let node of newChildren) {
+    if (node.loose === true) {
+      loose = true;
+      break;
+    }
+  }
+  return {
+    type: 'list',
+    ordered: node.type === 'ordered_list', // ordered_list | unordered_list
+    start: 1,
+    loose: loose,
+    children: newChildren,
+  };
+};
+
+const transformTableCell = (cell) => {
+  return {
+    type: 'tableCell',
+    children: transformNodeWithInlineChildren(cell),
+  };
+};
+
+const transformTableRow = (row) => {
+  const { children: cells } = row;
+  return {
+    type: 'tableRow',
+    children: cells.map(cell => transformTableCell(cell)),
+  };
+};
+
+const transformTable = (node) => {
+  const { children: rows } = node;
+  const align = rows.map(row => {
+    const { children: cells } = row;
+    return cells[0]?.align || null;
+  });
+  return {
+    type: 'table',
+    align: align,
+    children: rows.map(row => transformTableRow(row)),
+  };
+};
+
+const transformCodeLine = (node) => {
+  const text = node.children[0]?.text || '';
+  return text;
+};
+
+const transformCodeBlock = (node) => {
+  const { children } = node;
+  return {
+    type: 'code',
+    lang: node.lang ? node.lang : null,
+    value: children.map(child => transformCodeLine(child)).join('\n'),
+  };
+};
+
+const transformFormula = (node) => {
+  const data = node.data;
+  return {
+    type: 'math',
+    value: data.formula,
+  };
+};
+
+const elementHandlers = {
+  'paragraph': transformParagraph,
+  'header1': transformHeader,
+  'header2': transformHeader,
+  'header3': transformHeader,
+  'header4': transformHeader,
+  'header5': transformHeader,
+  'header6': transformHeader,
+  'blockquote': transformBlockquote,
+  'table': transformTable,
+  'check_list_item': transformCheckList,
+  'ordered_list': transformList,
+  'unordered_list': transformList,
+  'code_block': transformCodeBlock,
+  'formula': transformFormula,
+};
+
+export const formatSlateToMd = (children) => {
+  const validChildren = children.filter(child => elementHandlers[child.type]);
+  return validChildren.map(child => {
+    const handler = elementHandlers[child.type];
+    return handler(child);
+  }).flat();
+};

package/src/utils/common.js

@@ -0,0 +1,30 @@
+import checkIsUrl from 'is-url';
+
+export const isMac = () => {
+  const platform = navigator.platform;
+  return (platform === 'Mac68K') || (platform === 'MacPPC') || (platform === 'Macintosh') || (platform === 'MacIntel');
+};
+
+export const IMAGE_TYPES = [
+  'png',
+  'jpg',
+  'gif',
+];
+
+export const isImage = (url) => {
+  if (!url) return false;
+
+  if (!isUrl(url)) return false;
+
+  const suffix = url.split('.')[1];  // http://xx/mm/*.png
+  if (!suffix) return false;
+
+  return IMAGE_TYPES.includes(suffix.toLowerCase());
+};
+
+export const isUrl = (url) => {
+  if (!url) return false;
+  if (!url.startsWith('http')) return false;
+  if (!checkIsUrl(url)) return false;
+  return true;
+};

package/src/utils/deserialize-html.js

@@ -0,0 +1,174 @@
+import { jsx } from 'slate-hyperscript';
+import {
+  BLOCKQUOTE,
+  HEADER1,
+  HEADER2,
+  HEADER3,
+  HEADER4,
+  HEADER5,
+  HEADER6,
+  IMAGE,
+  LINK,
+  LIST_ITEM,
+  ORDERED_LIST,
+  PARAGRAPH,
+  TABLE,
+  UNORDERED_LIST,
+} from '../extension/constants/element-types';
+import { generateTableCell, generateTableRow } from '../extension/plugins/table/model';
+import { generateElement } from '../extension/core';
+
+const ELEMENT_TAGS = {
+  A: el => ({ type: LINK, data: { href: el.getAttribute('href') } }),
+  BLOCKQUOTE: () => ({ type: BLOCKQUOTE }),
+  H1: () => ({ type: HEADER1 }),
+  H2: () => ({ type: HEADER2 }),
+  H3: () => ({ type: HEADER3 }),
+  H4: () => ({ type: HEADER4 }),
+  H5: () => ({ type: HEADER5 }),
+  H6: () => ({ type: HEADER6 }),
+  IMG: el => ({ type: IMAGE, children: [{ text: '' }], data: { src: el.getAttribute('src') } }),
+  LI: () => ({ type: LIST_ITEM, data: {} }),
+  OL: () => ({ type: ORDERED_LIST }),
+  P: () => ({ type: PARAGRAPH }),
+  UL: () => ({ type: UNORDERED_LIST }),
+  TABLE: () => ({ type: TABLE }),
+  BR: () => ({ text: '' })
+};
+
+const HEADER_LIST = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+
+const TEXT_TAGS = {
+  CODE: () => ({ CODE: true }),
+  DEL: () => ({ DELETE: true }),
+  EM: () => ({ ITALIC: true }),
+  I: () => ({ ITALIC: true }),
+  STRONG: () => ({ BOLD: true }),
+  INS: () => ({ INS: true })
+};
+
+const parseTable = (el) => {
+
+  if (el.parentNode.nodeName !== 'BODY') {
+    return null;
+  }
+
+  let tableWidth = 0;
+  Array.from(el.rows[0].childNodes).forEach((cell, index) => {
+    if (cell.nodeName === 'TD' || cell.nodeName === 'TH') {
+      tableWidth += (Number(cell.getAttribute('colspan')) || 1);
+    }
+  });
+
+  let rowList = [];
+  for (let rowIndex = 0; rowIndex < el.rows.length; rowIndex++) {
+    let cells = el.rows[rowIndex].cells;
+    const cellsList = [];
+    for (let columnIndex = 0; columnIndex < cells.length; columnIndex++) {
+      const cell = cells[columnIndex];
+      cellsList.push(generateTableCell({ childrenOrText: [generateElement(PARAGRAPH, { childrenOrText: cell.textContent })] }));
+    }
+    if (cellsList.length < tableWidth) {
+      let count = tableWidth - cellsList.length;
+      for (let i = 0; i < count; i++) {
+        cellsList.push(generateTableCell({ childrenOrText: [generateElement(PARAGRAPH)] }));
+      }
+    }
+    rowList.push(generateTableRow({ childrenOrText: cellsList }));
+  }
+
+  return rowList;
+};
+
+const deserializeHtml = el => {
+  if (el.nodeType === 3) {
+    // remove \n character
+    if (el.textContent === '\n' || el.textContent === '\r') {
+      return null;
+    }
+    if (el.parentElement.nodeName === 'BODY') {
+      let text = el.textContent.replace(/(\n|\r\n)/g, '');
+      if (text.length === 0) return null;
+      return { type: PARAGRAPH, children: [{ text }] };
+    }
+    return el.textContent;
+  } else if (el.nodeType !== 1) {
+    return null;
+  }
+
+  const { nodeName } = el;
+  let parent = el;
+
+  let children = Array.from(parent.childNodes)
+    .map(deserializeHtml)
+    .flat();
+
+  // deserialize task list
+  if (nodeName === 'LI') {
+    if (el.className && el.className.indexOf('task-list-item') >= 0) {
+      return jsx('element', { data: { checked: false }, type: 'list_item' }, children);
+    }
+  }
+
+  if (
+    nodeName === 'PRE' &&
+    el.childNodes[0] &&
+    el.childNodes[0].nodeName === 'CODE'
+  ) {
+    // deserialize code block
+    const code = el.childNodes[0];
+    const codeChildren = [];
+    code.childNodes.forEach((codeLine, index) => {
+      if (codeLine.innerText) {
+        codeChildren.push({
+          type: 'code_line',
+          children: [{ text: codeLine.innerText }]
+        });
+      }
+    });
+
+    return {
+      data: { syntax: null },
+      children: codeChildren,
+      type: 'code_block'
+    };
+  }
+
+  if (el.nodeName === 'BODY') {
+    return jsx('fragment', {}, children);
+  }
+
+  if (ELEMENT_TAGS[nodeName]) {
+    const attrs = ELEMENT_TAGS[nodeName](el);
+    if (nodeName === 'IMG') {
+      return jsx('element', attrs, [{ text: '' }]);
+    }
+
+    // modify BR into an empty text node
+    if (nodeName === 'BR') {
+      return '';
+    }
+
+    if (nodeName === 'TABLE') {
+      return jsx('element', attrs, parseTable(el));
+    }
+
+    if (nodeName === 'A' || HEADER_LIST.includes(nodeName)) {
+      return jsx('element', attrs, [{ text: el.textContent }]);
+    }
+
+    return jsx('element', attrs, children);
+  }
+
+  if (TEXT_TAGS[nodeName]) {
+    const attrs = TEXT_TAGS[nodeName](el);
+    return children.map(child => jsx('text', attrs, child));
+  }
+  return children;
+};
+
+
+export const htmlDeserializer = (html) => {
+  const parsed = new DOMParser().parseFromString(html, 'text/html');
+  return deserializeHtml(parsed.body);
+};

package/src/utils/dom-utils.js

@@ -0,0 +1,45 @@
+export const getDomHeight = (dom) => {
+  const styles = window.getComputedStyle(dom);
+  const rect = dom.getBoundingClientRect();
+  const marginTop = styles['marginTop'];
+  // margin-bottom overlaps margin-top
+  // const marginBottom = styles['marginBottom'];
+  const { height } = rect;
+
+  return height + parseInt(marginTop);
+};
+
+export const getDomMarginTop = (dom) => {
+  const styles = window.getComputedStyle(dom);
+  const marginTop = styles['marginTop'];
+  return parseInt(marginTop);
+};
+
+export const getSelectionRange = () => {
+  if (window.getSelection) {
+    const sel = window.getSelection();
+    if (sel.getRangeAt && sel.rangeCount) {
+      return sel.getRangeAt(0);
+    }
+  } else if (document.selection && document.selection.createRange) {
+    return document.selection.createRange();
+  }
+
+  return null;
+};
+
+export const getCursorPosition = (isScrollUp = true) => {
+  let x = 0, y = 0;
+  let range = getSelectionRange();
+  if (range) {
+    const rect = range.getBoundingClientRect();
+    const headerHeight = 100;
+    x = rect.x || 0;
+    if (isScrollUp) {
+      y = rect.y - headerHeight;
+    } else {
+      y = rect.y - headerHeight + rect.height;
+    }
+  }
+  return { x: x, y: y };
+};

package/src/utils/event-bus.js

@@ -0,0 +1,37 @@
+class EventBus {
+  constructor() {
+    this.instance = null;
+    this.subscribers = {};
+  }
+
+  static getInstance() {
+    if (this.instance) return this.instance;
+    this.instance = new EventBus();
+    return this.instance;
+  }
+
+  subscribe(type, handler) {
+    if (!this.subscribers[type]) {
+      this.subscribers[type] = [];
+    }
+
+    const handlers = this.subscribers[type];
+    handlers.push(handler);
+
+    return () => {
+      const index = handlers.indexOf(handler);
+      if (index > -1) {
+        handlers.splice(index, 1);
+      }
+    };
+  }
+
+  dispatch(type, ...data) {
+    const handlers = this.subscribers[type];
+    if (Array.isArray(handlers)) {
+      handlers.forEach(handler => handler(...data));
+    }
+  }
+}
+
+export default EventBus;

package/src/utils/event-handler.js

@@ -0,0 +1,36 @@
+import isHotkey from 'is-hotkey';
+
+class EventProxy {
+
+  constructor(editor) {
+    this.editor = editor;
+  }
+
+  onKeyDown = (event) => {
+    const editor = this.editor;
+    if (editor.onHotKeyDown) {
+      const isHandled = editor.onHotKeyDown(event);
+      if (isHandled) return;
+    }
+
+    // Disable the default 'save page'
+    if (isHotkey('mod+s', event)) {
+      event.preventDefault();
+    }
+
+    // Disable default 'tab' behavior
+    if (isHotkey('tab', event)) {
+      event.preventDefault();
+    }
+  };
+
+  onCopy = (event) => {
+    const editor = this.editor;
+    if (editor.onCopy) {
+      const isHandled = editor.onCopy(event);
+      if (isHandled) return;
+    }
+  };
+}
+
+export default EventProxy;

package/src/utils/object-utils.js

@@ -0,0 +1,51 @@
+class ObjectUtils {
+
+  static getDataType(data){
+    let type = typeof data;
+    if (type !== 'object') {
+      return type;
+    }
+    return Object.prototype.toString.call(data).replace(/^\[object (\S+)\]$/, '$1');
+  }
+
+  static isObject = (data) => {
+    return this.getDataType(data) === 'Object';
+  };
+
+  static iterable(data){
+    return ['Object', 'Array'].includes(this.getDataType(data));
+  }
+
+  static isObjectChanged(source, comparison, notIncludeKeys) {
+    if (!this.iterable(source)) {
+      throw new Error(`source should be a Object or Array , but got ${this.getDataType(source)}`);
+    }
+    if (this.getDataType(source) !== this.getDataType(comparison)) {
+      return true;
+    }
+    const sourceKeys = Object.keys(source);
+    const comparisonKeys = Object.keys({ ...source, ...comparison }).filter(key => !notIncludeKeys.includes(key));
+    if (sourceKeys.length !== comparisonKeys.length) {
+      return true;
+    }
+    return comparisonKeys.some(key => {
+      if (this.iterable(source[key])) {
+        return this.isObjectChanged(source[key], comparison[key], notIncludeKeys);
+      } else {
+        return source[key] !== comparison[key];
+      }
+    });
+  }
+
+  static isSameObject(source, comparison, notIncludeKeys = []) {
+    if (!source || !comparison) return false;
+    return !this.isObjectChanged(source, comparison, notIncludeKeys);
+  }
+
+  static hasProperty = (obj, prop) => {
+    if (!obj) return false;
+    return Object.prototype.hasOwnProperty.call(obj, prop);
+  };
+}
+
+export default ObjectUtils;

package/tests/core/constants/index.js

@@ -0,0 +1,54 @@
+// extension plugin
+export const BLOCKQUOTE = 'blockquote';
+export const HEADER = 'header';
+export const HEADER1 = 'header1';
+export const HEADER2 = 'header2';
+export const HEADER3 = 'header3';
+export const HEADER4 = 'header4';
+export const HEADER5 = 'header5';
+export const HEADER6 = 'header6';
+export const ORDERED_LIST = 'ordered_list';
+export const UNORDERED_LIST = 'unordered_list';
+export const LIST_ITEM = 'list_item';
+export const LIST_LIC = 'list_lic'; // placeholder
+export const CHECK_LIST_ITEM = 'check_list_item';
+export const PARAGRAPH = 'paragraph';
+export const CODE_BLOCK = 'code_block';
+export const CODE_LINE = 'code_line';
+export const TABLE = 'table';
+export const TABLE_CELL = 'table_cell';
+export const TABLE_ROW = 'table_row';
+export const TABLE_TH = 'table_th';
+export const TABLE_TD = 'table_td';
+export const TABLE_TR = 'table_tr';
+export const LINK = 'link';
+export const IMAGE = 'image';
+export const FORMULA = 'formula';
+export const COLUMN = 'column';
+
+export const voidChildren = [{ text: '' }];
+
+export const ELEMENTS = {
+  ha: { type: LINK },
+  hblockquote: { type: BLOCKQUOTE },
+  hcodeblock: { type: CODE_BLOCK },
+  hcodeline: { type: CODE_LINE },
+  hdefault: { type: PARAGRAPH },
+  hh1: { type: HEADER1 },
+  hh2: { type: HEADER2 },
+  hh3: { type: HEADER3 },
+  hh4: { type: HEADER4 },
+  hh5: { type: HEADER5 },
+  hh6: { type: HEADER6 },
+  himg: { type: IMAGE, children: voidChildren },
+  hli: { type: LIST_ITEM },
+  hlic: { type: LIST_LIC },
+  hol: { type: ORDERED_LIST },
+  hp: { type: PARAGRAPH },
+  htable: { type: TABLE },
+  htd: { type: TABLE_TD },
+  hth: { type: TABLE_TH },
+  htodoli: { type: CHECK_LIST_ITEM },
+  htr: { type: TABLE_TR },
+  hul: { type: UNORDERED_LIST }
+};

package/tests/core/index.js

@@ -0,0 +1,11 @@
+import { jsx } from './jsx';
+import StubEditor from './stub-editor';
+import { createSdocEditor, formatChildren, formatChildren2 } from './utils';
+
+export {
+  jsx,
+  StubEditor,
+  createSdocEditor,
+  formatChildren,
+  formatChildren2
+};

package/tests/core/jsx/index.js

@@ -0,0 +1,9 @@
+import { createHyperscript, createText as createTestText } from 'slate-hyperscript';
+import { ELEMENTS } from '../constants';
+
+export const jsx = createHyperscript({
+  elements: ELEMENTS,
+  creators: {
+    htext: createTestText
+  }
+});