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

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

@@ -149,9 +149,9 @@ const formatElementNodes = nodes => {
   return nodes;
 };
 const deserializeHtml = html => {
-  const fragment = (0, _dom.sanitizeHTMLContent)(html);
-  if (!fragment) return generateDefaultValue();
-  const children = Array.from(fragment.childNodes);
+  const HTMLBody = (0, _dom.parseAndCleanHTML)(html);
+  if (!HTMLBody) return generateDefaultValue();
+  const children = Array.from(HTMLBody.childNodes);
   let nodes = [];
   nodes = deserializeElements(children, true);
   nodes = formatElementNodes(nodes);

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

@@ -13,7 +13,6 @@ const paragraphRule = (element, parseChild) => {
     nodeName,
     childNodes
   } = element;
-  // article
   if ((nodeName === 'DIV' || nodeName === 'ARTICLE') && element.parentElement.nodeName !== 'LI') {
     if (childNodes.length === 0) {
       const node = {

package/dist/utils/dom.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.addClass = addClass;
 exports.getTarget = exports.getEventClassName = exports.getDataAttr = exports.canUseDOM = exports.addClassName = void 0;
 exports.hasClass = hasClass;
-exports.isNearBottom = exports.isInputOrEditorActive = void 0;
+exports.parseAndCleanHTML = exports.isNearBottom = exports.isInputOrEditorActive = void 0;
 exports.removeClass = removeClass;
-exports.sanitizeHTMLContent = exports.removeClassName = void 0;
+exports.removeClassName = void 0;
 var _typeDetection = require("./type-detection");
 const canUseDOM = exports.canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 const getEventClassName = e => {
@@ -132,27 +132,317 @@ const isNearBottom = function (element) {
   return distanceToBottom <= threshold;
 };
 exports.isNearBottom = isNearBottom;
-const removeCommentNodes = node => {
-  for (let i = node.childNodes.length - 1; i >= 0; i--) {
-    const child = node.childNodes[i];
+const cleanWhiteSpace = function () {
+  let html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return html.replace(/\s*[\n\t\r]+\s*/g, '');
+};
+const removeInvalidNodes = root => {
+  if (!root || !root.querySelectorAll) return;
+  const elementsToRemove = root.querySelectorAll('style, title, script, link[rel="stylesheet"]');
+  elementsToRemove.forEach(element => {
+    element.remove();
+  });
+  for (let i = root.childNodes.length - 1; i >= 0; i--) {
+    const child = root.childNodes[i];
     if (child.nodeType === Node.COMMENT_NODE) {
-      node.removeChild(child);
+      root.removeChild(child);
     } else if (child.nodeType === Node.ELEMENT_NODE) {
-      removeCommentNodes(child);
+      removeInvalidNodes(child);
+    }
+  }
+};
+const stripCSSComments = function () {
+  let cssText = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return cssText.replace(/\/\*[\s\S]*?\*\//g, '');
+};
+const splitByDelimiter = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let delimiter = arguments.length > 1 ? arguments[1] : undefined;
+  const parts = [];
+  let buffer = '';
+  let quote = '';
+  let roundDepth = 0;
+  let squareDepth = 0;
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    const prevChar = value[i - 1];
+    if (quote) {
+      buffer += char;
+      if (char === quote && prevChar !== '\\') {
+        quote = '';
+      }
+      continue;
+    }
+    if (char === '"' || char === '\'') {
+      quote = char;
+      buffer += char;
+      continue;
+    }
+    if (char === '(') {
+      roundDepth += 1;
+      buffer += char;
+      continue;
+    }
+    if (char === ')') {
+      roundDepth = Math.max(0, roundDepth - 1);
+      buffer += char;
+      continue;
+    }
+    if (char === '[') {
+      squareDepth += 1;
+      buffer += char;
+      continue;
+    }
+    if (char === ']') {
+      squareDepth = Math.max(0, squareDepth - 1);
+      buffer += char;
+      continue;
     }
+    if (char === delimiter && roundDepth === 0 && squareDepth === 0) {
+      parts.push(buffer);
+      buffer = '';
+      continue;
+    }
+    buffer += char;
+  }
+  if (buffer) {
+    parts.push(buffer);
   }
+  return parts;
+};
+const findMatchingParenIndex = function () {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let quote = '';
+  let depth = 0;
+  for (let i = startIndex; i < value.length; i++) {
+    const char = value[i];
+    const prevChar = value[i - 1];
+    if (quote) {
+      if (char === quote && prevChar !== '\\') {
+        quote = '';
+      }
+      continue;
+    }
+    if (char === '"' || char === '\'') {
+      quote = char;
+      continue;
+    }
+    if (char === '(') {
+      depth += 1;
+      continue;
+    }
+    if (char === ')') {
+      depth -= 1;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+};
+const getInlineStyleState = element => {
+  const properties = [];
+  for (let i = 0; i < element.style.length; i++) {
+    properties.push(element.style[i]);
+  }
+  return properties.reduce((state, property) => {
+    state[property] = {
+      value: element.style.getPropertyValue(property),
+      priority: element.style.getPropertyPriority(property),
+      specificity: 1000,
+      order: Number.MAX_SAFE_INTEGER
+    };
+    return state;
+  }, {});
+};
+const compareStylePriority = (currentStyle, nextStyle) => {
+  if (!currentStyle) return true;
+  const currentImportant = currentStyle.priority === 'important';
+  const nextImportant = nextStyle.priority === 'important';
+  if (currentImportant !== nextImportant) {
+    return nextImportant;
+  }
+  if (currentStyle.specificity !== nextStyle.specificity) {
+    return nextStyle.specificity > currentStyle.specificity;
+  }
+  return nextStyle.order >= currentStyle.order;
+};
+const applyStyleDeclarations = function (element) {
+  let declarationText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let metadata = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let styleStateMap = arguments.length > 3 ? arguments[3] : undefined;
+  if (!element || !declarationText) return;
+  const styleState = styleStateMap.get(element) || getInlineStyleState(element);
+  splitByDelimiter(declarationText, ';').forEach(declaration => {
+    const separatorIndex = declaration.indexOf(':');
+    if (separatorIndex < 0) return;
+    const property = declaration.slice(0, separatorIndex).trim();
+    let value = declaration.slice(separatorIndex + 1).trim();
+    if (!property || !value) return;
+    let priority = '';
+    if (/!important\s*$/i.test(value)) {
+      priority = 'important';
+      value = value.replace(/\s*!important\s*$/i, '').trim();
+    }
+    const nextStyle = {
+      value,
+      priority,
+      specificity: metadata.specificity || 0,
+      order: metadata.order || 0
+    };
+    if (compareStylePriority(styleState[property], nextStyle)) {
+      styleState[property] = nextStyle;
+    }
+  });
+  styleStateMap.set(element, styleState);
+};
+const calculateSelectorSpecificity = function () {
+  let selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const pseudoFunctionNames = ['is', 'not', 'has', 'where'];
+  let normalizedSelector = selector.replace(/::[\w-]+/g, ' ');
+  let pseudoSpecificity = 0;
+  pseudoFunctionNames.forEach(pseudoName => {
+    const token = `:${pseudoName}(`;
+    let tokenIndex = normalizedSelector.indexOf(token);
+    while (tokenIndex > -1) {
+      const contentStartIndex = tokenIndex + token.length - 1;
+      const contentEndIndex = findMatchingParenIndex(normalizedSelector, contentStartIndex);
+      if (contentEndIndex < 0) break;
+      const content = normalizedSelector.slice(contentStartIndex + 1, contentEndIndex);
+      if (pseudoName !== 'where') {
+        const specificityList = splitByDelimiter(content, ',').map(item => calculateSelectorSpecificity(item.trim())).filter(Boolean);
+        pseudoSpecificity += specificityList.length > 0 ? Math.max(...specificityList) : 0;
+      }
+      normalizedSelector = normalizedSelector.slice(0, tokenIndex) + ' ' + normalizedSelector.slice(contentEndIndex + 1);
+      tokenIndex = normalizedSelector.indexOf(token);
+    }
+  });
+  const idCount = (normalizedSelector.match(/#[\w-]+/g) || []).length;
+  const classCount = (normalizedSelector.match(/\.[\w-]+/g) || []).length;
+  const attributeCount = (normalizedSelector.match(/\[[^\]]+\]/g) || []).length;
+  const pseudoClassCount = (normalizedSelector.match(/:(?!:)[\w-]+(?:\([^)]*\))?/g) || []).length;
+  const elementSelector = normalizedSelector.replace(/#[\w-]+/g, ' ').replace(/\.[\w-]+/g, ' ').replace(/\[[^\]]+\]/g, ' ').replace(/:(?!:)[\w-]+(?:\([^)]*\))?/g, ' ').replace(/[>+~*]/g, ' ');
+  const typeCount = (elementSelector.match(/(^|\s)[a-zA-Z][\w-]*/g) || []).length;
+  return pseudoSpecificity + idCount * 100 + (classCount + attributeCount + pseudoClassCount) * 10 + typeCount;
+};
+const applyCollectedStyles = styleStateMap => {
+  styleStateMap.forEach((styleState, element) => {
+    const properties = Object.keys(styleState);
+    element.removeAttribute('style');
+    properties.forEach(property => {
+      const item = styleState[property];
+      if (!(item !== null && item !== void 0 && item.value)) return;
+      element.style.setProperty(property, item.value, item.priority);
+    });
+  });
+};
+const splitCSSBlocks = function () {
+  let cssText = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const blocks = [];
+  let buffer = '';
+  let depth = 0;
+  let quote = '';
+  let roundDepth = 0;
+  for (let i = 0; i < cssText.length; i++) {
+    const char = cssText[i];
+    const prevChar = cssText[i - 1];
+    buffer += char;
+    if (quote) {
+      if (char === quote && prevChar !== '\\') {
+        quote = '';
+      }
+      continue;
+    }
+    if (char === '"' || char === '\'') {
+      quote = char;
+      continue;
+    }
+    if (char === '(') {
+      roundDepth += 1;
+      continue;
+    }
+    if (char === ')') {
+      roundDepth = Math.max(0, roundDepth - 1);
+      continue;
+    }
+    if (roundDepth > 0) {
+      continue;
+    }
+    if (char === '{') {
+      depth += 1;
+      continue;
+    }
+    if (char === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        blocks.push(buffer.trim());
+        buffer = '';
+      }
+    }
+  }
+  return blocks;
+};
+const inlineCSSRules = function (root) {
+  let cssText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let styleStateMap = arguments.length > 2 ? arguments[2] : undefined;
+  let context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+    order: 0
+  };
+  const normalizedCSS = stripCSSComments(cssText).trim();
+  if (!normalizedCSS) return;
+  splitCSSBlocks(normalizedCSS).forEach(block => {
+    const startIndex = block.indexOf('{');
+    const endIndex = block.lastIndexOf('}');
+    if (startIndex < 0 || endIndex < 0 || endIndex <= startIndex) return;
+    const selectorText = block.slice(0, startIndex).trim();
+    const declarationText = block.slice(startIndex + 1, endIndex).trim();
+    if (!selectorText || !declarationText) return;
+    if (selectorText.startsWith('@')) {
+      if (declarationText.includes('{')) {
+        inlineCSSRules(root, declarationText, styleStateMap, context);
+      }
+      return;
+    }
+    splitByDelimiter(selectorText, ',').forEach(selector => {
+      const normalizedSelector = selector.trim();
+      if (!normalizedSelector) return;
+      try {
+        const metadata = {
+          specificity: calculateSelectorSpecificity(normalizedSelector),
+          order: context.order++
+        };
+        root.querySelectorAll(normalizedSelector).forEach(element => {
+          applyStyleDeclarations(element, declarationText, metadata, styleStateMap);
+        });
+      } catch {
+        // Ignore selectors that cannot be queried, such as pseudo-elements.
+      }
+    });
+  });
+};
+const convertStyleToInlineStyle = parsed => {
+  const styleStateMap = new Map();
+  const context = {
+    order: 0
+  };
+  parsed.querySelectorAll('style').forEach(styleElement => {
+    inlineCSSRules(parsed, styleElement.textContent || '', styleStateMap, context);
+  });
+  applyCollectedStyles(styleStateMap);
 };
-const sanitizeHTMLContent = function () {
+const parseAndCleanHTML = function () {
   let html = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  if (!html) return null;
   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 sanitizedHTML = cleanWhiteSpace(html);
   const parsed = new DOMParser().parseFromString(sanitizedHTML, 'text/html');
+  convertStyleToInlineStyle(parsed);
   const body = parsed.body;
-  body.querySelectorAll('style, title, script').forEach(el => el.remove());
-  removeCommentNodes(body);
+  removeInvalidNodes(body);
   return body;
 };
-exports.sanitizeHTMLContent = sanitizeHTMLContent;
+exports.parseAndCleanHTML = parseAndCleanHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sea-email-editor",
-  "version": "0.0.10-beta1",
+  "version": "0.0.10-beta2",
   "description": "A Slate-based rich email editor with HTML, markdown, tables, images, links, and block plugins.",
   "main": "dist/index.js",
   "dependencies": {