@seafile/sea-email-editor 0.0.6 → 0.0.7

package/dist/editor/index.js

@@ -17,6 +17,7 @@ const SeaEmailEditor = _ref => {
   let {
     value: initValue,
     options = {},
+    isHtmlValue = true,
     ...rest
   } = _ref;
   const [isLoading, setLoading] = (0, _react.useState)(true);
@@ -37,7 +38,7 @@ const SeaEmailEditor = _ref => {
     });
   }, [options.lang]);
   (0, _react.useEffect)(() => {
-    setValue((0, _slateConvert.deserializeHtml)(initValue));
+    setValue(isHtmlValue ? (0, _slateConvert.deserializeHtml)(initValue) : (0, _slateConvert.mdStringToSlate)(initValue));
     setLoading(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/dist/editor/main/index.js

@@ -28,6 +28,7 @@ const Main = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     autoFocus = true,
     value,
     editorApi,
+    assetURLPrefix,
     onSave,
     onChange,
     onLinkClick
@@ -43,11 +44,12 @@ const Main = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       return editor;
     }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
     _editor._id = (0, _slugid.nice)();
+    _editor.assetURLPrefix = assetURLPrefix;
     return (0, _withPropsEditor.default)(_editor, {
       editorApi,
       onSave
     });
-  }, [editorApi, onSave]);
+  }, [editorApi, assetURLPrefix, onSave]);
   const eventProxy = (0, _react.useMemo)(() => {
     return new _eventHandler.default(editor);
   }, [editor]);

package/dist/extension/constants/element-default-style.js

@@ -8,10 +8,10 @@ exports.ELEMENT_DEFAULT_STYLE = void 0;
 var ElementTypes = _interopRequireWildcard(require("./element-types"));
 const ELEMENT_DEFAULT_STYLE = exports.ELEMENT_DEFAULT_STYLE = {
   [ElementTypes.BLOCKQUOTE]: {
-    borderLeft: '4px solid #ddd',
+    borderLeft: '2px solid rgba(0, 40, 100, .12)',
     color: '#666',
     margin: '1.2em 0',
-    padding: '0 15px'
+    padding: '0 16px'
   },
   [ElementTypes.CHECK_LIST_ITEM]: {
     margin: '0.5rem 0'

package/dist/extension/constants/menus-config.js

@@ -19,7 +19,11 @@ const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
   CODE: CODE,
   DELETE: DELETE,
   ADD: ADD,
-  BOLD_ITALIC: `${BOLD}_${ITALIC}`
+  BOLD_ITALIC: `${BOLD}_${ITALIC}`,
+  FONT: 'font',
+  FONT_SIZE: 'font_size',
+  COLOR: 'color',
+  BG_COLOR: 'bg_color'
 };
 const TABLE_SUBMENU_MAP = exports.TABLE_SUBMENU_MAP = {
   TABLE_ALIGN_LEFT: 'table_align_left',

package/dist/extension/plugins/image/render-element/index.js

@@ -13,6 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _helper = require("../helper");
 var _imagePreviewer = _interopRequireDefault(require("./image-previewer"));
 var _components = require("../../../../components");
+var _common = require("../../../../utils/common");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -101,6 +102,10 @@ const renderImage = (_ref, editor) => {
     event.preventDefault();
     setIsFullScreening(false);
   }, []);
+  let src = (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.src) || '';
+  if (src && editor !== null && editor !== void 0 && editor.assetURLPrefix && !(0, _common.isUrl)(src) && !src.startsWith('data:image')) {
+    src = editor.assetURLPrefix + (src.startsWith('/') ? src.slice(1) : src);
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
     ...attributes,
     contentEditable: false,
@@ -113,8 +118,8 @@ const renderImage = (_ref, editor) => {
         'selected': isSelected,
         'error': isError
       }),
-      alt: (element === null || element === void 0 ? void 0 : (_element$data2 = element.data) === null || _element$data2 === void 0 ? void 0 : _element$data2.alt) || ' ' + (0, _constants.gettext)('Image loading failed'),
-      src: element === null || element === void 0 ? void 0 : (_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.src,
+      alt: (element === null || element === void 0 ? void 0 : (_element$data3 = element.data) === null || _element$data3 === void 0 ? void 0 : _element$data3.alt) || ' ' + (0, _constants.gettext)('Image loading failed'),
+      src: src,
       width: element === null || element === void 0 ? void 0 : element.data.width,
       height: element === null || element === void 0 ? void 0 : element.data.height
     }), isSelected && !isLoadingImage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/extension/plugins/table/helper.js

@@ -45,7 +45,6 @@ const insertTable = (editor, rowNum, columnNum) => {
     rowNum,
     columnNum
   });
-  console.log(table);
   const {
     selection
   } = editor;

package/dist/extension/plugins/text-style/menu/index.js

@@ -23,15 +23,13 @@ const TextStyleMenu = _ref => {
   const onClick = (0, _react.useCallback)((e, toggleType) => {
     (0, _helpers.toggleTextStyle)(editor, type);
   }, [editor, type]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
-      editor: editor,
-      disabled: isDisabled,
-      isActive: isActive,
-      className: className,
-      onClick: onClick,
-      ...config
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarItem, {
+    editor: editor,
+    disabled: isDisabled,
+    isActive: isActive,
+    className: className,
+    onClick: onClick,
+    ...config
   });
 };
 var _default = exports.default = TextStyleMenu;

package/dist/locale/lang/en.json

@@ -80,5 +80,6 @@
   "Row number": "Row number",
   "Column number": "Column number",
   "Copy link": "Copy link",
-  "Divider": "Divider"
+  "Divider": "Divider",
+  "Close": "Close"
 }

package/dist/slate-convert/index.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "deserializeHtml", {
     return _htmlToSlate.default;
   }
 });
+Object.defineProperty(exports, "mdStringToSlate", {
+  enumerable: true,
+  get: function () {
+    return _mdToSlate.default;
+  }
+});
 Object.defineProperty(exports, "slateToHtml", {
   enumerable: true,
   get: function () {
@@ -17,4 +23,5 @@ Object.defineProperty(exports, "slateToHtml", {
   }
 });
 var _slateToHtml = _interopRequireDefault(require("./slate-to-html"));
-var _htmlToSlate = _interopRequireDefault(require("./html-to-slate"));
+var _htmlToSlate = _interopRequireDefault(require("./html-to-slate"));
+var _mdToSlate = _interopRequireDefault(require("./md-to-slate"));

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _unified = require("unified");
+var _remarkParse = _interopRequireDefault(require("remark-parse"));
+var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
+var _remarkMath = _interopRequireDefault(require("remark-math"));
+var _core = require("../../extension/core");
+var _transform = require("./transform");
+// md string -> md ast
+const getProcessor = () => {
+  const processor = (0, _unified.unified)().use(_remarkParse.default) // Handles markdown basic syntax
+  .use(_remarkGfm.default) // Handle markdown extension syntax
+  .use(_remarkMath.default); // 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 [(0, _core.generateDefaultParagraph)()];
+  let content = mdString;
+  if (typeof mdString === 'number') {
+    content = mdString + '';
+  }
+
+  // md string --> md ast
+  const root = getProcessor().parse(content);
+
+  // the mdString is '\r\n'
+  if (root.children.length === 0) {
+    return [(0, _core.generateDefaultParagraph)()];
+  }
+
+  // md ast --> slate ast
+  const slateNodes = (0, _transform.formatMdToSlate)(root.children);
+
+  // Format the document
+  return reconciledSlateNodes(slateNodes);
+};
+var _default = exports.default = mdStringToSlate;

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

@@ -0,0 +1,451 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformUnorderedList = exports.transformTableRow = exports.transformTableCell = exports.transformTable = exports.transformParagraph = exports.transformOrderedList = exports.transformMath = exports.transformListItem = exports.transformListContent = exports.transformList = exports.transformHtml = exports.transformHr = exports.transformHeader = exports.transformCodeLine = exports.transformCodeBlock = exports.transformCheckListItem = exports.transformCheckList = exports.transformBlockquote = exports.transformBlockHtml = exports.formatMdToSlate = void 0;
+var _slugid = _interopRequireDefault(require("slugid"));
+var _core = require("../../extension/core");
+var _elementTypes = require("../../extension/constants/element-types");
+var _htmlToSlate = _interopRequireDefault(require("../html-to-slate"));
+const INLINE_KEY_MAP = {
+  strong: 'bold',
+  emphasis: 'italic'
+};
+
+// <strong><em>aa<em>bb<em></strong>
+const applyMarkForInlineItem = function (result, item) {
+  let textNode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    type,
+    children,
+    value
+  } = item;
+  if (type === _elementTypes.LINK) {
+    const child = children.length === 0 ? {
+      type: 'text',
+      value: ''
+    } : children[0];
+    const linkChildren = [{
+      id: _slugid.default.nice(),
+      text: child.value || ''
+    }];
+    const link = {
+      id: _slugid.default.nice(),
+      type: _elementTypes.LINK,
+      url: item.url,
+      title: item.title,
+      children: linkChildren
+    };
+    result.push([(0, _core.generateDefaultText)(), link, (0, _core.generateDefaultText)()]);
+    return result;
+  }
+  if (type === _elementTypes.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.default.nice(),
+      data: data,
+      type: _elementTypes.IMAGE,
+      children: [(0, _core.generateDefaultText)()]
+    };
+    result.push([(0, _core.generateDefaultText)(), image, (0, _core.generateDefaultText)()]);
+    return result;
+  }
+
+  // Handle special images
+  if (type === 'html') {
+    const nodes = transformHtml(item);
+    result.push(nodes);
+    return result;
+  }
+  if (!textNode.id) {
+    textNode['id'] = _slugid.default.nice();
+  }
+  if (type === 'text') {
+    // https://symbl.cc/en/200B/
+    const formatValue = value && value !== '​' ? value : '';
+    textNode['text'] = formatValue;
+    result.push({
+      ...textNode
+    });
+
+    // reset testNode
+    textNode = {};
+    return;
+  }
+  if (type === 'inlineCode') {
+    textNode['code'] = true;
+    textNode['text'] = value || '';
+    result.push({
+      ...textNode
+    });
+
+    // reset testNode
+    textNode = {};
+    return;
+  }
+  const attr_key = INLINE_KEY_MAP[type];
+  if (!Array.isArray(children) || children.length === 0 || !attr_key) {
+    textNode['text'] = value || '';
+    result.push({
+      ...textNode
+    });
+
+    // reset testNode
+    textNode = {};
+    return;
+  }
+  textNode[attr_key] = true;
+  children.forEach(item => {
+    applyMarkForInlineItem(result, item, {
+      ...textNode
+    });
+  });
+};
+const transformNodeWithInlineChildren = node => {
+  const {
+    children
+  } = node;
+  const defaultChildren = [(0, _core.generateDefaultText)()];
+  if (!children || !Array.isArray(children) || children.length === 0) {
+    return defaultChildren;
+  }
+  const result = [];
+  children.forEach(item => applyMarkForInlineItem(result, item));
+  return result.flat();
+};
+const transformHeader = node => {
+  const {
+    depth
+  } = node;
+  const type = `${_elementTypes.HEADER}${depth}`;
+  return {
+    id: _slugid.default.nice(),
+    type: type,
+    children: transformNodeWithInlineChildren(node)
+  };
+};
+exports.transformHeader = transformHeader;
+const transformParagraph = node => {
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.PARAGRAPH,
+    children: transformNodeWithInlineChildren(node)
+  };
+};
+exports.transformParagraph = transformParagraph;
+const transformBlockquote = node => {
+  const {
+    children
+  } = node;
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.BLOCKQUOTE,
+    children: Array.isArray(children) && children.length > 0 ? children.map(child => {
+      const handler = elementHandlers[child.type];
+      return handler(child); // flat
+    }).flat() : [{
+      id: _slugid.default.nice(),
+      type: _elementTypes.PARAGRAPH,
+      children: [{
+        id: _slugid.default.nice(),
+        text: ''
+      }]
+    }]
+  };
+};
+exports.transformBlockquote = transformBlockquote;
+const transformListContent = node => {
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.PARAGRAPH,
+    children: transformNodeWithInlineChildren(node)
+  };
+};
+exports.transformListContent = transformListContent;
+const transformListItem = node => {
+  const {
+    children
+  } = node;
+  if (children.length === 0) {
+    return {
+      id: _slugid.default.nice(),
+      type: _elementTypes.LIST_ITEM,
+      // eslint-disable-next-line array-callback-return
+      children: [transformListContent({})]
+    };
+  }
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.LIST_ITEM,
+    // eslint-disable-next-line array-callback-return
+    children: children.map(child => {
+      if (child.type === _elementTypes.PARAGRAPH) {
+        return transformListContent(child);
+      } else if (child.type === 'code') {
+        return transformCodeBlock(child);
+      } else if (child.type === 'blockquote') {
+        return transformBlockquote(child);
+      } else if (child.type === 'list') {
+        const hasParent = true;
+        return transformList(child, hasParent);
+      } else if (child.type === 'heading') {
+        return transformParagraph(child);
+      } else if (child.type === 'html') {
+        // patch
+        return transformBlockHtml(child);
+      } else if (child.type === 'thematicBreak') {
+        // patch
+        return transformParagraph(child);
+      } else {
+        console.warn('Unhandled child type in list item:', child);
+        return (0, _core.generateDefaultParagraph)();
+      }
+    }).flat()
+  };
+};
+exports.transformListItem = transformListItem;
+const transformOrderedList = node => {
+  const {
+    children
+  } = node;
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.ORDERED_LIST,
+    children: children.map(child => transformListItem(child))
+  };
+};
+exports.transformOrderedList = transformOrderedList;
+const transformUnorderedList = node => {
+  const {
+    children
+  } = node;
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.UNORDERED_LIST,
+    children: children.map(child => transformListItem(child))
+  };
+};
+exports.transformUnorderedList = transformUnorderedList;
+const transformCheckListItem = node => {
+  const {
+    children,
+    checked
+  } = node;
+  if (children.length === 0) {
+    return {
+      id: _slugid.default.nice(),
+      type: _elementTypes.CHECK_LIST_ITEM,
+      checked: checked ? true : false,
+      children: transformNodeWithInlineChildren({})
+    };
+  }
+  if (children.length === 1) {
+    return {
+      id: _slugid.default.nice(),
+      type: _elementTypes.CHECK_LIST_ITEM,
+      checked: checked ? true : false,
+      children: children.map(child => transformNodeWithInlineChildren(child)).flat()
+    };
+  }
+  const [child, ...reset] = children;
+  const firstChild = {
+    id: _slugid.default.nice(),
+    type: _elementTypes.CHECK_LIST_ITEM,
+    checked: checked,
+    children: transformNodeWithInlineChildren(child)
+  };
+  const resetChildren = formatMdToSlate(reset);
+  return [firstChild, ...resetChildren];
+};
+exports.transformCheckListItem = transformCheckListItem;
+const transformCheckList = node => {
+  const {
+    children
+  } = node;
+  return children.map(child => transformCheckListItem(child)).flat();
+};
+exports.transformCheckList = transformCheckList;
+const transformList = (node, hasParent) => {
+  const {
+    ordered,
+    children
+  } = node;
+  const firstChild = children[0];
+  if (ordered === true) {
+    return transformOrderedList(node);
+  }
+  if (ordered === false && firstChild.checked === null) {
+    return transformUnorderedList(node);
+  }
+  // patch tasklist in list
+  if (hasParent) {
+    return transformUnorderedList(node);
+  }
+  return transformCheckList(node);
+};
+exports.transformList = transformList;
+const transformTableCell = (cell, align) => {
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.TABLE_CELL,
+    children: transformNodeWithInlineChildren(cell)
+  };
+};
+exports.transformTableCell = transformTableCell;
+const transformTableRow = row => {
+  const {
+    children: cells
+  } = row;
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.TABLE_ROW,
+    children: cells.map(cell => transformTableCell(cell))
+  };
+};
+exports.transformTableRow = transformTableRow;
+const transformTable = node => {
+  const {
+    children: rows,
+    align = []
+  } = node;
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.TABLE,
+    align: align,
+    children: rows.map((row, index) => transformTableRow(row))
+  };
+};
+exports.transformTable = transformTable;
+const transformCodeLine = text => {
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.CODE_LINE,
+    children: [{
+      id: _slugid.default.nice(),
+      text: text
+    }]
+  };
+};
+exports.transformCodeLine = transformCodeLine;
+const transformCodeBlock = node => {
+  const {
+    lang,
+    value
+  } = node;
+  let children = value.split('\n');
+  if (children.length === 0) {
+    children = [''];
+  }
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.CODE_BLOCK,
+    lang: lang,
+    children: children.map(text => transformCodeLine(text))
+  };
+};
+exports.transformCodeBlock = transformCodeBlock;
+const transformHr = node => {
+  return {
+    id: _slugid.default.nice(),
+    type: _elementTypes.DIVIDER,
+    children: [(0, _core.generateDefaultText)()]
+  };
+};
+exports.transformHr = transformHr;
+const transformHtml = node => {
+  const defaultTextNode = (0, _core.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.default.nice(),
+      data: data,
+      type: _elementTypes.IMAGE,
+      children: [(0, _core.generateDefaultText)()]
+    };
+    return [(0, _core.generateDefaultText)(), image, (0, _core.generateDefaultText)()];
+  }
+  return [defaultTextNode];
+};
+exports.transformHtml = transformHtml;
+const transformBlockHtml = node => {
+  if (node.value.slice(0, 4).toLowerCase() === '<img') {
+    return {
+      id: _slugid.default.nice(),
+      type: _elementTypes.PARAGRAPH,
+      children: transformHtml(node)
+    };
+  }
+  return (0, _htmlToSlate.default)(node.value);
+};
+exports.transformBlockHtml = transformBlockHtml;
+const transformMath = node => {
+  return {
+    id: _slugid.default.nice(),
+    type: 'formula',
+    data: {
+      formula: node.value
+    },
+    children: [(0, _core.generateDefaultText)()]
+  };
+};
+exports.transformMath = transformMath;
+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,
+  'html': transformBlockHtml
+};
+const formatMdToSlate = children => {
+  const validChildren = children.filter(child => elementHandlers[child.type]);
+  return validChildren.map(child => {
+    const handler = elementHandlers[child.type];
+    return handler(child);
+  }).flat();
+};
+exports.formatMdToSlate = formatMdToSlate;

package/dist/utils/common.js

@@ -15,6 +15,7 @@ exports.isMac = isMac;
 const IMAGE_TYPES = exports.IMAGE_TYPES = ['png', 'jpg', 'gif'];
 const isImage = url => {
   if (!url) return false;
+  if (url.startsWith('data:image')) return true;
   if (!isUrl(url)) return false;
   const fileName = url.slice(url.lastIndexOf('/') + 1); // http://xx/mm/*.png
   const suffix = fileName.split('.')[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sea-email-editor",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "main": "dist/index.js",
   "dependencies": {