@lexical/html 0.43.0 → 0.43.1-nightly.20260413.0

package/LexicalHtml.dev.js

@@ -21,12 +21,78 @@ var lexical = require('lexical');
  */
 
 
+/**
+ * Inlines CSS rules from <style> tags onto matching elements as inline styles.
+ * This is needed because apps like Excel generate HTML where styles live in
+ * class-based <style> rules (e.g. `.xl65 { background: #FFFF00; color: blue; }`)
+ * rather than inline styles. Since Lexical's import converters read inline styles,
+ * we resolve stylesheet rules into inline styles before conversion.
+ *
+ * Mutates the DOM in-place. Original inline styles always take precedence over
+ * stylesheet rules (matching CSS specificity behavior).
+ */
+function inlineStylesFromStyleSheets(doc) {
+  if (doc.querySelector('style') === null) {
+    return;
+  }
+  const originalInlineStyles = new Map();
+  function getOriginalInlineProps(el) {
+    let props = originalInlineStyles.get(el);
+    if (props === undefined) {
+      props = new Set();
+      for (let i = 0; i < el.style.length; i++) {
+        props.add(el.style[i]);
+      }
+      originalInlineStyles.set(el, props);
+    }
+    return props;
+  }
+  try {
+    for (const sheet of Array.from(doc.styleSheets)) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch (_unused) {
+        continue;
+      }
+      for (const rule of Array.from(rules)) {
+        if (!(rule instanceof CSSStyleRule)) {
+          continue;
+        }
+        let elements;
+        try {
+          elements = doc.querySelectorAll(rule.selectorText);
+        } catch (_unused2) {
+          continue;
+        }
+        for (const el of Array.from(elements)) {
+          if (!(el instanceof HTMLElement)) {
+            continue;
+          }
+          const originalProps = getOriginalInlineProps(el);
+          for (let i = 0; i < rule.style.length; i++) {
+            const prop = rule.style[i];
+            if (!originalProps.has(prop)) {
+              el.style.setProperty(prop, rule.style.getPropertyValue(prop), rule.style.getPropertyPriority(prop));
+            }
+          }
+        }
+      }
+    }
+  } catch (_unused3) {
+    // styleSheets API not supported in this environment
+  }
+}
+
 /**
  * How you parse your html string to get a document is left up to you. In the browser you can use the native
  * DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
  * or an equivalent library and pass in the document here.
  */
 function $generateNodesFromDOM(editor, dom) {
+  if (lexical.isDOMDocumentNode(dom)) {
+    inlineStylesFromStyleSheets(dom);
+  }
   const elements = lexical.isDOMDocumentNode(dom) ? dom.body.childNodes : dom.childNodes;
   let lexicalNodes = [];
   const allArtificialNodes = [];

package/LexicalHtml.dev.mjs

@@ -19,12 +19,78 @@ import { isDOMDocumentNode, $getRoot, $isElementNode, $isTextNode, getRegistered
  */
 
 
+/**
+ * Inlines CSS rules from <style> tags onto matching elements as inline styles.
+ * This is needed because apps like Excel generate HTML where styles live in
+ * class-based <style> rules (e.g. `.xl65 { background: #FFFF00; color: blue; }`)
+ * rather than inline styles. Since Lexical's import converters read inline styles,
+ * we resolve stylesheet rules into inline styles before conversion.
+ *
+ * Mutates the DOM in-place. Original inline styles always take precedence over
+ * stylesheet rules (matching CSS specificity behavior).
+ */
+function inlineStylesFromStyleSheets(doc) {
+  if (doc.querySelector('style') === null) {
+    return;
+  }
+  const originalInlineStyles = new Map();
+  function getOriginalInlineProps(el) {
+    let props = originalInlineStyles.get(el);
+    if (props === undefined) {
+      props = new Set();
+      for (let i = 0; i < el.style.length; i++) {
+        props.add(el.style[i]);
+      }
+      originalInlineStyles.set(el, props);
+    }
+    return props;
+  }
+  try {
+    for (const sheet of Array.from(doc.styleSheets)) {
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch (_unused) {
+        continue;
+      }
+      for (const rule of Array.from(rules)) {
+        if (!(rule instanceof CSSStyleRule)) {
+          continue;
+        }
+        let elements;
+        try {
+          elements = doc.querySelectorAll(rule.selectorText);
+        } catch (_unused2) {
+          continue;
+        }
+        for (const el of Array.from(elements)) {
+          if (!(el instanceof HTMLElement)) {
+            continue;
+          }
+          const originalProps = getOriginalInlineProps(el);
+          for (let i = 0; i < rule.style.length; i++) {
+            const prop = rule.style[i];
+            if (!originalProps.has(prop)) {
+              el.style.setProperty(prop, rule.style.getPropertyValue(prop), rule.style.getPropertyPriority(prop));
+            }
+          }
+        }
+      }
+    }
+  } catch (_unused3) {
+    // styleSheets API not supported in this environment
+  }
+}
+
 /**
  * How you parse your html string to get a document is left up to you. In the browser you can use the native
  * DOMParser API to generate a document (see clipboard.ts), but to use in a headless environment you can use JSDom
  * or an equivalent library and pass in the document here.
  */
 function $generateNodesFromDOM(editor, dom) {
+  if (isDOMDocumentNode(dom)) {
+    inlineStylesFromStyleSheets(dom);
+  }
   const elements = isDOMDocumentNode(dom) ? dom.body.childNodes : dom.childNodes;
   let lexicalNodes = [];
   const allArtificialNodes = [];

package/LexicalHtml.prod.js

@@ -6,4 +6,4 @@
  *
  */
 
-"use strict";var e=require("@lexical/selection"),n=require("@lexical/utils"),t=require("lexical");function o(l,i,r,s=null){let c=null===s||i.isSelected(s);const d=t.$isElementNode(i)&&i.excludeFromCopy("html");let u=i;null!==s&&t.$isTextNode(i)&&(u=e.$sliceSelectedTextNodeContent(s,i,"clone"));const a=t.$isElementNode(u)?u.getChildren():[],f=t.getRegisteredNode(l,u.getType());let m;m=f&&void 0!==f.exportDOM?f.exportDOM(l,u):u.exportDOM(l);const{element:h,after:p}=m;if(!h)return!1;const g=document.createDocumentFragment();for(let e=0;e<a.length;e++){const n=a[e],r=o(l,n,g,s);!c&&t.$isElementNode(i)&&r&&i.extractWithChild(n,s,"html")&&(c=!0)}if(c&&!d){if((n.isHTMLElement(h)||t.isDocumentFragment(h))&&h.append(g),r.append(h),p){const e=p.call(u,h);e&&(t.isDocumentFragment(h)?h.replaceChildren(e):h.replaceWith(e))}}else r.append(g);return c}const l=new Set(["STYLE","SCRIPT"]);function i(e,o,s,c,d=new Map,u){let a=[];if(l.has(e.nodeName))return a;let f=null;const m=function(e,n){const{nodeName:t}=e,o=n._htmlConversions.get(t.toLowerCase());let l=null;if(void 0!==o)for(const n of o){const t=n(e);null!==t&&(null===l||(l.priority||0)<=(t.priority||0))&&(l=t)}return null!==l?l.conversion:null}(e,o),h=m?m(e):null;let p=null;if(null!==h){p=h.after;const n=h.node;if(f=Array.isArray(n)?n[n.length-1]:n,null!==f){for(const[,e]of d)if(f=e(f,u),!f)break;f&&a.push(...Array.isArray(n)?n:[f])}null!=h.forChild&&d.set(e.nodeName,h.forChild)}const g=e.childNodes;let N=[];const $=(null==f||!t.$isRootOrShadowRoot(f))&&(null!=f&&t.$isBlockElementNode(f)||c);for(let e=0;e<g.length;e++)N.push(...i(g[e],o,s,$,new Map(d),f));return null!=p&&(N=p(N)),n.isBlockDomNode(e)&&(N=r(e,N,$?()=>{const e=new t.ArtificialNode__DO_NOT_USE;return s.push(e),e}:t.$createParagraphNode)),null==f?N.length>0?a=a.concat(N):n.isBlockDomNode(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return t.isInlineDomNode(e.nextSibling)&&t.isInlineDomNode(e.previousSibling)}(e)&&(a=a.concat(t.$createLineBreakNode())):t.$isElementNode(f)&&f.append(...N),a}function r(e,n,o){const l=e.style.textAlign,i=[];let r=[];for(let e=0;e<n.length;e++){const s=n[e];if(t.$isBlockElementNode(s))l&&!s.getFormat()&&s.setFormat(l),i.push(s);else if(r.push(s),e===n.length-1||e<n.length-1&&t.$isBlockElementNode(n[e+1])){const e=o();e.setFormat(l),e.append(...r),i.push(e),r=[]}}return i}exports.$generateHtmlFromNodes=function(e,n){if("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const l=document.createElement("div"),i=t.$getRoot().getChildren();for(let t=0;t<i.length;t++){o(e,i[t],l,n)}return l.innerHTML},exports.$generateNodesFromDOM=function(e,n){const o=t.isDOMDocumentNode(n)?n.body.childNodes:n.childNodes;let r=[];const s=[];for(const n of o)if(!l.has(n.nodeName)){const t=i(n,e,s,!1);null!==t&&(r=r.concat(t))}return function(e){for(const n of e)n.getNextSibling()instanceof t.ArtificialNode__DO_NOT_USE&&n.insertAfter(t.$createLineBreakNode());for(const n of e){const e=n.getChildren();for(const t of e)n.insertBefore(t);n.remove()}}(s),r};
+"use strict";var e=require("@lexical/selection"),t=require("@lexical/utils"),n=require("lexical");function o(l,r,i,s=null){let c=null===s||r.isSelected(s);const u=n.$isElementNode(r)&&r.excludeFromCopy("html");let a=r;null!==s&&n.$isTextNode(r)&&(a=e.$sliceSelectedTextNodeContent(s,r,"clone"));const d=n.$isElementNode(a)?a.getChildren():[],f=n.getRegisteredNode(l,a.getType());let m;m=f&&void 0!==f.exportDOM?f.exportDOM(l,a):a.exportDOM(l);const{element:h,after:p}=m;if(!h)return!1;const g=document.createDocumentFragment();for(let e=0;e<d.length;e++){const t=d[e],i=o(l,t,g,s);!c&&n.$isElementNode(r)&&i&&r.extractWithChild(t,s,"html")&&(c=!0)}if(c&&!u){if((t.isHTMLElement(h)||n.isDocumentFragment(h))&&h.append(g),i.append(h),p){const e=p.call(a,h);e&&(n.isDocumentFragment(h)?h.replaceChildren(e):h.replaceWith(e))}}else i.append(g);return c}const l=new Set(["STYLE","SCRIPT"]);function r(e,o,s,c,u=new Map,a){let d=[];if(l.has(e.nodeName))return d;let f=null;const m=function(e,t){const{nodeName:n}=e,o=t._htmlConversions.get(n.toLowerCase());let l=null;if(void 0!==o)for(const t of o){const n=t(e);null!==n&&(null===l||(l.priority||0)<=(n.priority||0))&&(l=n)}return null!==l?l.conversion:null}(e,o),h=m?m(e):null;let p=null;if(null!==h){p=h.after;const t=h.node;if(f=Array.isArray(t)?t[t.length-1]:t,null!==f){for(const[,e]of u)if(f=e(f,a),!f)break;f&&d.push(...Array.isArray(t)?t:[f])}null!=h.forChild&&u.set(e.nodeName,h.forChild)}const g=e.childNodes;let y=[];const N=(null==f||!n.$isRootOrShadowRoot(f))&&(null!=f&&n.$isBlockElementNode(f)||c);for(let e=0;e<g.length;e++)y.push(...r(g[e],o,s,N,new Map(u),f));return null!=p&&(y=p(y)),t.isBlockDomNode(e)&&(y=i(e,y,N?()=>{const e=new n.ArtificialNode__DO_NOT_USE;return s.push(e),e}:n.$createParagraphNode)),null==f?y.length>0?d=d.concat(y):t.isBlockDomNode(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return n.isInlineDomNode(e.nextSibling)&&n.isInlineDomNode(e.previousSibling)}(e)&&(d=d.concat(n.$createLineBreakNode())):n.$isElementNode(f)&&f.append(...y),d}function i(e,t,o){const l=e.style.textAlign,r=[];let i=[];for(let e=0;e<t.length;e++){const s=t[e];if(n.$isBlockElementNode(s))l&&!s.getFormat()&&s.setFormat(l),r.push(s);else if(i.push(s),e===t.length-1||e<t.length-1&&n.$isBlockElementNode(t[e+1])){const e=o();e.setFormat(l),e.append(...i),r.push(e),i=[]}}return r}exports.$generateHtmlFromNodes=function(e,t){if("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const l=document.createElement("div"),r=n.$getRoot().getChildren();for(let n=0;n<r.length;n++){o(e,r[n],l,t)}return l.innerHTML},exports.$generateNodesFromDOM=function(e,t){n.isDOMDocumentNode(t)&&function(e){if(null===e.querySelector("style"))return;const t=new Map;function n(e){let n=t.get(e);if(void 0===n){n=new Set;for(let t=0;t<e.style.length;t++)n.add(e.style[t]);t.set(e,n)}return n}try{for(const t of Array.from(e.styleSheets)){let o;try{o=t.cssRules}catch(e){continue}for(const t of Array.from(o)){if(!(t instanceof CSSStyleRule))continue;let o;try{o=e.querySelectorAll(t.selectorText)}catch(e){continue}for(const e of Array.from(o)){if(!(e instanceof HTMLElement))continue;const o=n(e);for(let n=0;n<t.style.length;n++){const l=t.style[n];o.has(l)||e.style.setProperty(l,t.style.getPropertyValue(l),t.style.getPropertyPriority(l))}}}}}catch(e){}}(t);const o=n.isDOMDocumentNode(t)?t.body.childNodes:t.childNodes;let i=[];const s=[];for(const t of o)if(!l.has(t.nodeName)){const n=r(t,e,s,!1);null!==n&&(i=i.concat(n))}return function(e){for(const t of e)t.getNextSibling()instanceof n.ArtificialNode__DO_NOT_USE&&t.insertAfter(n.$createLineBreakNode());for(const t of e){const e=t.getChildren();for(const n of e)t.insertBefore(n);t.remove()}}(s),i};

package/LexicalHtml.prod.mjs

@@ -6,4 +6,4 @@
  *
  */
 
-import{$sliceSelectedTextNodeContent as e}from"@lexical/selection";import{isHTMLElement as n,isBlockDomNode as t}from"@lexical/utils";import{isDOMDocumentNode as o,$getRoot as l,$isElementNode as r,$isTextNode as i,getRegisteredNode as s,isDocumentFragment as c,$isRootOrShadowRoot as u,$isBlockElementNode as f,$createLineBreakNode as a,ArtificialNode__DO_NOT_USE as d,isInlineDomNode as p,$createParagraphNode as h}from"lexical";function m(e,n){const t=o(n)?n.body.childNodes:n.childNodes;let l=[];const r=[];for(const n of t)if(!w.has(n.nodeName)){const t=y(n,e,r,!1);null!==t&&(l=l.concat(t))}return function(e){for(const n of e)n.getNextSibling()instanceof d&&n.insertAfter(a());for(const n of e){const e=n.getChildren();for(const t of e)n.insertBefore(t);n.remove()}}(r),l}function g(e,n){if("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const t=document.createElement("div"),o=l().getChildren();for(let l=0;l<o.length;l++){x(e,o[l],t,n)}return t.innerHTML}function x(t,o,l,u=null){let f=null===u||o.isSelected(u);const a=r(o)&&o.excludeFromCopy("html");let d=o;null!==u&&i(o)&&(d=e(u,o,"clone"));const p=r(d)?d.getChildren():[],h=s(t,d.getType());let m;m=h&&void 0!==h.exportDOM?h.exportDOM(t,d):d.exportDOM(t);const{element:g,after:w}=m;if(!g)return!1;const y=document.createDocumentFragment();for(let e=0;e<p.length;e++){const n=p[e],l=x(t,n,y,u);!f&&r(o)&&l&&o.extractWithChild(n,u,"html")&&(f=!0)}if(f&&!a){if((n(g)||c(g))&&g.append(y),l.append(g),w){const e=w.call(d,g);e&&(c(g)?g.replaceChildren(e):g.replaceWith(e))}}else l.append(y);return f}const w=new Set(["STYLE","SCRIPT"]);function y(e,n,o,l,i=new Map,s){let c=[];if(w.has(e.nodeName))return c;let m=null;const g=function(e,n){const{nodeName:t}=e,o=n._htmlConversions.get(t.toLowerCase());let l=null;if(void 0!==o)for(const n of o){const t=n(e);null!==t&&(null===l||(l.priority||0)<=(t.priority||0))&&(l=t)}return null!==l?l.conversion:null}(e,n),x=g?g(e):null;let b=null;if(null!==x){b=x.after;const n=x.node;if(m=Array.isArray(n)?n[n.length-1]:n,null!==m){for(const[,e]of i)if(m=e(m,s),!m)break;m&&c.push(...Array.isArray(n)?n:[m])}null!=x.forChild&&i.set(e.nodeName,x.forChild)}const S=e.childNodes;let v=[];const N=(null==m||!u(m))&&(null!=m&&f(m)||l);for(let e=0;e<S.length;e++)v.push(...y(S[e],n,o,N,new Map(i),m));return null!=b&&(v=b(v)),t(e)&&(v=C(e,v,N?()=>{const e=new d;return o.push(e),e}:h)),null==m?v.length>0?c=c.concat(v):t(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return p(e.nextSibling)&&p(e.previousSibling)}(e)&&(c=c.concat(a())):r(m)&&m.append(...v),c}function C(e,n,t){const o=e.style.textAlign,l=[];let r=[];for(let e=0;e<n.length;e++){const i=n[e];if(f(i))o&&!i.getFormat()&&i.setFormat(o),l.push(i);else if(r.push(i),e===n.length-1||e<n.length-1&&f(n[e+1])){const e=t();e.setFormat(o),e.append(...r),l.push(e),r=[]}}return l}export{g as $generateHtmlFromNodes,m as $generateNodesFromDOM};
+import{$sliceSelectedTextNodeContent as e}from"@lexical/selection";import{isHTMLElement as t,isBlockDomNode as n}from"@lexical/utils";import{isDOMDocumentNode as o,$getRoot as l,$isElementNode as r,$isTextNode as i,getRegisteredNode as s,isDocumentFragment as c,$isRootOrShadowRoot as u,$isBlockElementNode as f,$createLineBreakNode as a,ArtificialNode__DO_NOT_USE as d,isInlineDomNode as h,$createParagraphNode as p}from"lexical";function m(e,t){o(t)&&function(e){if(null===e.querySelector("style"))return;const t=new Map;function n(e){let n=t.get(e);if(void 0===n){n=new Set;for(let t=0;t<e.style.length;t++)n.add(e.style[t]);t.set(e,n)}return n}try{for(const t of Array.from(e.styleSheets)){let o;try{o=t.cssRules}catch(e){continue}for(const t of Array.from(o)){if(!(t instanceof CSSStyleRule))continue;let o;try{o=e.querySelectorAll(t.selectorText)}catch(e){continue}for(const e of Array.from(o)){if(!(e instanceof HTMLElement))continue;const o=n(e);for(let n=0;n<t.style.length;n++){const l=t.style[n];o.has(l)||e.style.setProperty(l,t.style.getPropertyValue(l),t.style.getPropertyPriority(l))}}}}}catch(e){}}(t);const n=o(t)?t.body.childNodes:t.childNodes;let l=[];const r=[];for(const t of n)if(!S.has(t.nodeName)){const n=w(t,e,r,!1);null!==n&&(l=l.concat(n))}return function(e){for(const t of e)t.getNextSibling()instanceof d&&t.insertAfter(a());for(const t of e){const e=t.getChildren();for(const n of e)t.insertBefore(n);t.remove()}}(r),l}function y(e,t){if("undefined"==typeof document||"undefined"==typeof window&&void 0===global.window)throw new Error("To use $generateHtmlFromNodes in headless mode please initialize a headless browser implementation such as JSDom before calling this function.");const n=document.createElement("div"),o=l().getChildren();for(let l=0;l<o.length;l++){g(e,o[l],n,t)}return n.innerHTML}function g(n,o,l,u=null){let f=null===u||o.isSelected(u);const a=r(o)&&o.excludeFromCopy("html");let d=o;null!==u&&i(o)&&(d=e(u,o,"clone"));const h=r(d)?d.getChildren():[],p=s(n,d.getType());let m;m=p&&void 0!==p.exportDOM?p.exportDOM(n,d):d.exportDOM(n);const{element:y,after:S}=m;if(!y)return!1;const w=document.createDocumentFragment();for(let e=0;e<h.length;e++){const t=h[e],l=g(n,t,w,u);!f&&r(o)&&l&&o.extractWithChild(t,u,"html")&&(f=!0)}if(f&&!a){if((t(y)||c(y))&&y.append(w),l.append(y),S){const e=S.call(d,y);e&&(c(y)?y.replaceChildren(e):y.replaceWith(e))}}else l.append(w);return f}const S=new Set(["STYLE","SCRIPT"]);function w(e,t,o,l,i=new Map,s){let c=[];if(S.has(e.nodeName))return c;let m=null;const y=function(e,t){const{nodeName:n}=e,o=t._htmlConversions.get(n.toLowerCase());let l=null;if(void 0!==o)for(const t of o){const n=t(e);null!==n&&(null===l||(l.priority||0)<=(n.priority||0))&&(l=n)}return null!==l?l.conversion:null}(e,t),g=y?y(e):null;let C=null;if(null!==g){C=g.after;const t=g.node;if(m=Array.isArray(t)?t[t.length-1]:t,null!==m){for(const[,e]of i)if(m=e(m,s),!m)break;m&&c.push(...Array.isArray(t)?t:[m])}null!=g.forChild&&i.set(e.nodeName,g.forChild)}const b=e.childNodes;let v=[];const A=(null==m||!u(m))&&(null!=m&&f(m)||l);for(let e=0;e<b.length;e++)v.push(...w(b[e],t,o,A,new Map(i),m));return null!=C&&(v=C(v)),n(e)&&(v=x(e,v,A?()=>{const e=new d;return o.push(e),e}:p)),null==m?v.length>0?c=c.concat(v):n(e)&&function(e){if(null==e.nextSibling||null==e.previousSibling)return!1;return h(e.nextSibling)&&h(e.previousSibling)}(e)&&(c=c.concat(a())):r(m)&&m.append(...v),c}function x(e,t,n){const o=e.style.textAlign,l=[];let r=[];for(let e=0;e<t.length;e++){const i=t[e];if(f(i))o&&!i.getFormat()&&i.setFormat(o),l.push(i);else if(r.push(i),e===t.length-1||e<t.length-1&&f(t[e+1])){const e=n();e.setFormat(o),e.append(...r),l.push(e),r=[]}}return l}export{y as $generateHtmlFromNodes,m as $generateNodesFromDOM};

package/package.json

@@ -8,7 +8,7 @@
     "html"
   ],
   "license": "MIT",
-  "version": "0.43.0",
+  "version": "0.43.1-nightly.20260413.0",
   "main": "LexicalHtml.js",
   "types": "index.d.ts",
   "repository": {
@@ -17,9 +17,9 @@
     "directory": "packages/lexical-html"
   },
   "dependencies": {
-    "@lexical/selection": "0.43.0",
-    "@lexical/utils": "0.43.0",
-    "lexical": "0.43.0"
+    "@lexical/selection": "0.43.1-nightly.20260413.0",
+    "@lexical/utils": "0.43.1-nightly.20260413.0",
+    "lexical": "0.43.1-nightly.20260413.0"
   },
   "module": "LexicalHtml.mjs",
   "sideEffects": false,