@seafile/sea-email-editor 0.0.9 → 0.0.10-beta1

package/README.md

@@ -1 +1,52 @@
 # Sea email editor
+
+Sea email editor is a React-based rich text editor for composing email content. It is built on top of Slate and includes HTML and Markdown conversion, along with support for common email editing blocks.
+
+## Features
+
+- HTML to editor content conversion
+- Markdown to editor content conversion
+- Rich text formatting: bold, italic, underline, inline code
+- Block elements: headings, blockquote, lists, code blocks, divider, tables
+- Link and image rendering
+- Localization support
+
+## Installation
+
+```bash
+npm install @seafile/sea-email-editor
+```
+
+## Usage
+
+```jsx
+import React from "react";
+import SeaEmailEditor from "@seafile/sea-email-editor";
+
+export default function App() {
+  return (
+    <SeaEmailEditor
+      value={"<div>Hello, world!</div>"}
+      isHtmlValue={true}
+      onChange={(html) => {
+        console.log(html);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+- `value`: initial editor content, HTML or Markdown depending on `isHtmlValue`
+- `isHtmlValue`: set to `true` when `value` is HTML
+- `options.lang`: locale, currently `en` and `zh-cn`
+- `onChange`: called with serialized HTML when the document changes
+- `assetURLPrefix`: prefix for editor assets
+- `editorApi`: editor integration hooks
+- `onLinkClick`: custom link click handler
+
+## Notes
+
+- The editor now re-initializes when the incoming `value` or `isHtmlValue` changes.
+- The example app under `example/` demonstrates how to preview the generated HTML output.

package/dist/editor/main/index.css

@@ -12,6 +12,7 @@
   flex: 1;
   width: 100%;
   padding: 10px;
+  overflow-y: scroll;
 }
 
 .sea-email-editor .sea-email-editor-content *:first-child {

package/dist/editor/main/index.js

@@ -75,13 +75,19 @@ const Main = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     const [firstNode] = editor.children;
     if (!firstNode) return;
     if (focusRange && focusRange !== null && focusRange !== void 0 && focusRange.anchor) {
-      const startOfFirstNode = _slate.Editor.start(editor, focusRange.anchor.path);
-      const range = {
-        anchor: startOfFirstNode,
-        focus: startOfFirstNode
-      };
-      (0, _core.focusEditor)(editor, range);
-      setTimeout(() => (0, _core.focusEditor)(editor, focusRange), 0);
+      try {
+        const startOfFirstNode = _slate.Editor.start(editor, focusRange.anchor.path);
+        const range = {
+          anchor: startOfFirstNode,
+          focus: startOfFirstNode
+        };
+        (0, _core.focusEditor)(editor, range);
+        setTimeout(() => (0, _core.focusEditor)(editor, focusRange), 0);
+      } catch {
+        focusRangeRef.current = null;
+        focusNode(editor);
+        return;
+      }
       focusRangeRef.current = null;
       return;
     }

package/dist/extension/plugins/text-style/render-elem.js

@@ -49,6 +49,21 @@ const renderText = (props, editor) => {
       children: markedChildren
     });
   }
+  if (leaf.superscript) {
+    markedChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)("sup", {
+      children: markedChildren
+    });
+  }
+  if (leaf.subscript) {
+    markedChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)("sub", {
+      children: markedChildren
+    });
+  }
+  if (leaf.highlight) {
+    markedChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)("mark", {
+      children: markedChildren
+    });
+  }
   if (leaf.decoration) {
     markedChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: markedChildren

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

@@ -10,6 +10,17 @@ var _typeOf = _interopRequireDefault(require("type-of"));
 var _constants = require("./constants");
 var _rules = _interopRequireDefault(require("./rules"));
 var _helper = require("./helper");
+var _dom = require("../../utils/dom");
+const generateDefaultValue = () => {
+  return [{
+    id: _slugid.default.nice(),
+    type: _constants.PARAGRAPH,
+    children: [{
+      text: '',
+      id: _slugid.default.nice()
+    }]
+  }];
+};
 const cruftNewline = element => {
   return !(element.nodeName === '#text' && element.nodeValue === '\n');
 };
@@ -98,14 +109,7 @@ const deserializeElements = function () {
 
 const formatElementNodes = nodes => {
   if (nodes.length === 0) {
-    return [{
-      id: _slugid.default.nice(),
-      type: _constants.PARAGRAPH,
-      children: [{
-        text: '',
-        id: _slugid.default.nice()
-      }]
-    }];
+    return generateDefaultValue();
   }
   nodes = nodes.reduce((memo, node) => {
     if (_constants.TOP_LEVEL_TYPES.includes(node.type)) {
@@ -145,8 +149,8 @@ const formatElementNodes = nodes => {
   return nodes;
 };
 const deserializeHtml = html => {
-  const parsed = new DOMParser().parseFromString(html.replace('\n\n', '').replace('\n  ', ''), 'text/html');
-  const fragment = parsed.body;
+  const fragment = (0, _dom.sanitizeHTMLContent)(html);
+  if (!fragment) return generateDefaultValue();
   const children = Array.from(fragment.childNodes);
   let nodes = [];
   nodes = deserializeElements(children, true);

package/dist/slate-convert/html-to-slate/rules/blockquote.js

@@ -17,7 +17,10 @@ const blockquoteRule = (element, parseChild) => {
     const node = {
       id: _slugid.default.nice(),
       type: _constants.BLOCKQUOTE,
-      children: parseChild(childNodes)
+      children: parseChild(childNodes) || [{
+        id: _slugid.default.nice(),
+        text: ''
+      }]
     };
     return (0, _helper.mergeElementOther2SlateNode)(element, node);
   }

package/dist/slate-convert/html-to-slate/rules/code-block.js

@@ -17,7 +17,10 @@ const codeBlockRule = (element, parseChild) => {
     const children = Array.from(childNodes).filter(item => item.nodeName === 'CODE');
     let codeChild = children[0];
     if (codeChild) {
-      let lang = codeChild.getAttribute('lang');
+      let lang = codeChild.getAttribute('lang') || codeChild.getAttribute('class') || '';
+      if (lang.startsWith('language-')) {
+        lang = lang.replace('language-', '');
+      }
       lang = (0, _helper.genCodeLangs)().find(item => item.value === lang) || 'plaintext';
       const node = {
         id: _slugid.default.nice(),
@@ -27,9 +30,10 @@ const codeBlockRule = (element, parseChild) => {
       };
       return (0, _helper.mergeElementOther2SlateNode)(element, node);
     } else {
+      var _childNodes$;
       const lang = 'plaintext';
-      const content = childNodes[0].textContent;
-      const textArr = content.split('\n').filter(Boolean);
+      const content = ((_childNodes$ = childNodes[0]) === null || _childNodes$ === void 0 ? void 0 : _childNodes$.textContent) || '';
+      const textArr = content.split('\n');
       const children = textArr.map(text => {
         return {
           id: _slugid.default.nice(),

package/dist/slate-convert/html-to-slate/rules/image.js

@@ -17,7 +17,11 @@ const imageRule = (element, parseChild) => {
       id: _slugid.default.nice(),
       type: _constants.IMAGE,
       data: {
-        src: element.getAttribute('src')
+        src: element.getAttribute('src'),
+        alt: element.getAttribute('alt') || undefined,
+        title: element.getAttribute('title') || undefined,
+        width: element.getAttribute('width') || undefined,
+        height: element.getAttribute('height') || undefined
       },
       children: [{
         text: '',

package/dist/slate-convert/html-to-slate/rules/link.js

@@ -14,12 +14,13 @@ const linkRule = (element, parseChild) => {
   } = element;
   const content = element.textContent || element.getAttribute('title') || element.getAttribute('href');
   if (nodeName === 'A') {
+    const children = parseChild(element.childNodes);
     const node = {
       id: _slugid.default.nice(),
       type: _constants.LINK,
       url: element.getAttribute('href') || content,
       title: element.getAttribute('title'),
-      children: [{
+      children: Array.isArray(children) && children.length > 0 ? children : [{
         id: _slugid.default.nice(),
         text: content || ''
       }]

package/dist/slate-convert/html-to-slate/rules/list.js

@@ -53,7 +53,7 @@ const listRule = (element, parseChild) => {
     };
     normalizedChildren.forEach(child => {
       if (!child) return;
-      const isInlineNode = !child.type || _constants.INLINE_LEVEL_TYPES.includes(child.type);
+      const isInlineNode = !child.type || _constants.INLINE_LEVEL_TYPES.includes(child.type) || child.type === 'text';
       if (isInlineNode) {
         inlineChildren.push(child);
         return;

package/dist/slate-convert/html-to-slate/rules/p.js

@@ -25,10 +25,17 @@ const pRule = (element, parseChild) => {
       };
       return (0, _helper.mergeElementOther2SlateNode)(element, node);
     }
+    let children = parseChild(childNodes);
+    if (children.length === 0) {
+      children = [{
+        id: _slugid.default.nice(),
+        text: ''
+      }];
+    }
     const node = {
       id: _slugid.default.nice(),
       type: _constants.P,
-      children: parseChild(childNodes)
+      children
     };
     return (0, _helper.mergeElementOther2SlateNode)(element, node);
   }

package/dist/slate-convert/html-to-slate/rules/paragraph.js

@@ -13,7 +13,8 @@ const paragraphRule = (element, parseChild) => {
     nodeName,
     childNodes
   } = element;
-  if (nodeName === 'DIV' && element.parentElement.nodeName !== 'LI') {
+  // article
+  if ((nodeName === 'DIV' || nodeName === 'ARTICLE') && element.parentElement.nodeName !== 'LI') {
     if (childNodes.length === 0) {
       const node = {
         id: _slugid.default.nice(),
@@ -25,10 +26,14 @@ const paragraphRule = (element, parseChild) => {
       };
       return (0, _helper.mergeElementOther2SlateNode)(element, node);
     }
+    const children = parseChild(childNodes);
     const node = {
       id: _slugid.default.nice(),
       type: _constants.PARAGRAPH,
-      children: parseChild(childNodes)
+      children: children.length === 0 ? [{
+        id: _slugid.default.nice(),
+        text: ''
+      }] : children
     };
     return (0, _helper.mergeElementOther2SlateNode)(element, node);
   }

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

@@ -12,59 +12,65 @@ const textRule = (element, parseChild) => {
     nodeName,
     nodeType
   } = element;
-  if (nodeName === 'SPAN') {
+  const createTextNode = function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const node = {
       id: _slugid.default.nice(),
-      text: element.textContent
+      text: element.textContent,
+      ...props
     };
     return (0, _helper.mergeElementOther2SlateNode)(element, node);
+  };
+  if (nodeName === 'SPAN') {
+    return createTextNode();
   }
   if (nodeName === 'STRONG' || nodeName === 'B') {
-    const node = {
-      id: _slugid.default.nice(),
-      bold: true,
-      text: element.textContent
-    };
-    return (0, _helper.mergeElementOther2SlateNode)(element, node);
+    return createTextNode({
+      bold: true
+    });
   }
   if (nodeName === 'CODE' && element.parentElement.nodeName !== 'PRE') {
-    const node = {
-      id: _slugid.default.nice(),
-      code: true,
-      text: element.textContent
-    };
-    return (0, _helper.mergeElementOther2SlateNode)(element, node);
+    return createTextNode({
+      code: true
+    });
   }
-  if (nodeName === 'DEL') {
-    const node = {
-      id: _slugid.default.nice(),
-      delete: true,
-      text: element.textContent
-    };
-    return (0, _helper.mergeElementOther2SlateNode)(element, node);
+  if (nodeName === 'DEL' || nodeName === 'S' || nodeName === 'STRIKE') {
+    return createTextNode({
+      delete: true
+    });
   }
-  if (nodeName === 'I') {
-    const node = {
-      id: _slugid.default.nice(),
-      italic: true,
-      text: element.textContent
-    };
-    return (0, _helper.mergeElementOther2SlateNode)(element, node);
+  if (nodeName === 'I' || nodeName === 'EM') {
+    return createTextNode({
+      italic: true
+    });
   }
   if (nodeName === 'INS') {
-    const node = {
-      id: _slugid.default.nice(),
-      add: true,
-      text: element.textContent
-    };
-    return (0, _helper.mergeElementOther2SlateNode)(element, node);
+    return createTextNode({
+      add: true
+    });
+  }
+  if (nodeName === 'U') {
+    return createTextNode({
+      underline: true
+    });
+  }
+  if (nodeName === 'SUP') {
+    return createTextNode({
+      superscript: true
+    });
+  }
+  if (nodeName === 'SUB') {
+    return createTextNode({
+      subscript: true
+    });
+  }
+  if (nodeName === 'MARK') {
+    return createTextNode({
+      highlight: true
+    });
   }
   if (nodeType === 3) {
-    const node = {
-      id: _slugid.default.nice(),
-      text: element.textContent
-    };
-    return (0, _helper.mergeElementOther2SlateNode)(element, node);
+    return createTextNode();
   }
   return;
 };

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

@@ -11,7 +11,8 @@ var _elementTypes = require("../../extension/constants/element-types");
 var _htmlToSlate = _interopRequireDefault(require("../html-to-slate"));
 const INLINE_KEY_MAP = {
   strong: 'bold',
-  emphasis: 'italic'
+  emphasis: 'italic',
+  delete: 'delete'
 };
 
 // <strong><em>aa<em>bb<em></strong>
@@ -88,6 +89,15 @@ const applyMarkForInlineItem = function (result, item) {
     textNode = {};
     return;
   }
+  if (type === 'break') {
+    result.push({
+      id: _slugid.default.nice(),
+      text: '\n',
+      ...textNode
+    });
+    textNode = {};
+    return;
+  }
   if (type === 'inlineCode') {
     textNode['code'] = true;
     textNode['text'] = value || '';
@@ -430,16 +440,16 @@ const transformMath = node => {
 };
 exports.transformMath = transformMath;
 const elementHandlers = {
-  'paragraph': transformParagraph,
-  'heading': transformHeader,
-  'blockquote': transformBlockquote,
-  'table': transformTable,
-  'list': transformList,
+  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
+  code: transformCodeBlock,
+  thematicBreak: transformHr,
+  math: transformMath,
+  html: transformBlockHtml
 };
 const formatMdToSlate = children => {
   const validChildren = children.filter(child => elementHandlers[child.type]);

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

@@ -12,8 +12,7 @@ const isContentValid = value => {
 };
 const isEmptyParagraph = node => {
   const voidNodeTypes = ['image', 'formula'];
-  if (node.type !== _constants.ElementTypes.PARAGRAPH) return false;
-  if (node.type !== _constants.ElementTypes.P) return false;
+  if (![_constants.ElementTypes.PARAGRAPH, _constants.ElementTypes.P].includes(node.type)) return false;
   const hasBlock = node.children.some(item => voidNodeTypes.includes(item.type));
   const hasHtml = node.children.some(item => item.type === 'html');
   if (hasBlock) return false;
@@ -128,6 +127,21 @@ const element2Html = (value, element, path) => {
   if (underline) {
     textDom = `<span style="text-decoration: underline;">${textDom}</span>`;
   }
+  if (element.delete) {
+    textDom = `<del>${textDom}</del>`;
+  }
+  if (element.add) {
+    textDom = `<ins>${textDom}</ins>`;
+  }
+  if (element.superscript) {
+    textDom = `<sup>${textDom}</sup>`;
+  }
+  if (element.subscript) {
+    textDom = `<sub>${textDom}</sub>`;
+  }
+  if (element.highlight) {
+    textDom = `<mark>${textDom}</mark>`;
+  }
   if (code) {
     const {
       style

package/dist/utils/common.js

@@ -33,8 +33,10 @@ const isUrl = url => {
 // Check document is empty or only contains void nodes
 exports.isUrl = isUrl;
 const isDocumentEmpty = editor => {
-  const document = editor.children;
+  const document = editor === null || editor === void 0 ? void 0 : editor.children;
+  if (!Array.isArray(document) || document.length === 0) return true;
   const [firstChildNode] = document;
+  if (!firstChildNode || !Array.isArray(firstChildNode.children)) return true;
   // Check if document has only one block node
   const isWrapperEmpty = document.length === 1 && _slate.Node.string(firstChildNode).length === 0;
   if (!isWrapperEmpty) return false;

package/dist/utils/dom.js

@@ -8,7 +8,8 @@ exports.getTarget = exports.getEventClassName = exports.getDataAttr = exports.ca
 exports.hasClass = hasClass;
 exports.isNearBottom = exports.isInputOrEditorActive = void 0;
 exports.removeClass = removeClass;
-exports.removeClassName = void 0;
+exports.sanitizeHTMLContent = exports.removeClassName = void 0;
+var _typeDetection = require("./type-detection");
 const canUseDOM = exports.canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 const getEventClassName = e => {
   // svg mouseEvent event.target.className is an object
@@ -130,4 +131,28 @@ const isNearBottom = function (element) {
   const distanceToBottom = scrollHeight - (scrollTop + clientHeight);
   return distanceToBottom <= threshold;
 };
-exports.isNearBottom = isNearBottom;
+exports.isNearBottom = isNearBottom;
+const removeCommentNodes = node => {
+  for (let i = node.childNodes.length - 1; i >= 0; i--) {
+    const child = node.childNodes[i];
+    if (child.nodeType === Node.COMMENT_NODE) {
+      node.removeChild(child);
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      removeCommentNodes(child);
+    }
+  }
+};
+const sanitizeHTMLContent = function () {
+  let html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  if ((0, _typeDetection.isNumber)(html)) {
+    html = String(html);
+  }
+  if (!(0, _typeDetection.isString)(html)) return null;
+  const sanitizedHTML = html.replace(/<!--([\s\S]*?)-->/g, '').replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, '').replace(/<title\b[^>]*>[\s\S]*?<\/title>/gi, '').replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '').replace(/\s*[\n\t]\s*/g, '');
+  const parsed = new DOMParser().parseFromString(sanitizedHTML, 'text/html');
+  const body = parsed.body;
+  body.querySelectorAll('style, title, script').forEach(el => el.remove());
+  removeCommentNodes(body);
+  return body;
+};
+exports.sanitizeHTMLContent = sanitizeHTMLContent;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@seafile/sea-email-editor",
-  "version": "0.0.9",
-  "description": "",
+  "version": "0.0.10-beta1",
+  "description": "A Slate-based rich email editor with HTML, markdown, tables, images, links, and block plugins.",
   "main": "dist/index.js",
   "dependencies": {
-   "@seafile/react-image-lightbox": "^5.0.4",
+    "@seafile/react-image-lightbox": "^5.0.4",
     "classnames": "2.3.2",
     "copy-to-clipboard": "3.3.1",
     "deep-copy": "1.4.2",