@lvce-editor/preview-worker 1.5.0 → 1.7.0

package/README.md

@@ -1,3 +1,12 @@
 # Preview Worker
 
 WebWorker for the Preview functionality in Lvce Editor.
+
+## Contributing
+
+```sh
+git clone git@github.com:lvce-editor/preview-worker.git &&
+cd preview-worker &&
+npm ci &&
+npm test
+```

package/dist/previewWorkerMain.js

@@ -1127,6 +1127,8 @@ const Code$1 = 65;
 const Label$1 = 66;
 const Dt$1 = 67;
 const Iframe$1 = 68;
+const Style = 72;
+const Html = 73;
 const Reference = 100;
 
 const TargetName = 'event.target.name';
@@ -1306,6 +1308,7 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   const state = {
     assetDir,
     content: '',
+    css: [],
     errorCount: 0,
     errorMessage: '',
     initial: true,
@@ -1319,15 +1322,28 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
   set(uid, state, state);
 };
 
+const iEqual = (oldState, newState) => {
+  if (oldState.css.length !== newState.css.length) {
+    return false;
+  }
+  for (let i = 0; i < oldState.css.length; i++) {
+    if (oldState.css[i] !== newState.css[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+
 const isEqual = (oldState, newState) => {
-  return oldState.warningCount === newState.warningCount && oldState.initial === newState.initial && oldState.content === newState.content && oldState.parsedDom === newState.parsedDom && oldState.parsedNodesChildNodeCount === newState.parsedNodesChildNodeCount;
+  return oldState.warningCount === newState.warningCount && oldState.initial === newState.initial && oldState.content === newState.content && oldState.parsedDom === newState.parsedDom && oldState.parsedNodesChildNodeCount === newState.parsedNodesChildNodeCount && oldState.css === newState.css;
 };
 
 const RenderItems = 4;
+const RenderCss = 10;
 const RenderIncremental = 11;
 
-const modules = [isEqual];
-const numbers = [RenderIncremental];
+const modules = [isEqual, iEqual];
+const numbers = [RenderIncremental, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1798,6 +1814,10 @@ const getVirtualDomTag = text => {
       return Tr$1;
     case Ul:
       return Ul$1;
+    case 'html':
+      return Html;
+    case 'style':
+      return Style;
     default:
       return Div$1;
   }
@@ -1826,6 +1846,27 @@ const EndCommentTag = 19;
 const Text = 20;
 const CommentStart = 21;
 
+/* eslint-disable @cspell/spellchecker */
+// Common HTML attributes that are safe to allow by default
+const commonAllowedAttributes = new Set([
+// Global attributes
+'id', 'title', 'tabindex', 'class', 'style', 'lang', 'dir', 'hidden', 'contenteditable', 'draggable', 'spellcheck', 'translate', 'role',
+// Form input attributes
+'disabled', 'name', 'type', 'value', 'placeholder', 'required', 'readonly', 'checked', 'autofocus', 'autocomplete', 'multiple', 'accept', 'min', 'max', 'step', 'pattern', 'maxlength', 'minlength', 'size', 'rows', 'cols', 'wrap', 'inputmode',
+// Form attributes
+'action', 'method', 'enctype', 'target', 'novalidate', 'form',
+// Link attributes
+'href', 'rel', 'download', 'hreflang',
+// Image attributes
+'src', 'alt', 'width', 'height', 'loading', 'decoding', 'crossorigin', 'srcset', 'sizes',
+// Media attributes
+'controls', 'autoplay', 'loop', 'muted', 'preload', 'poster',
+// Table attributes
+'colspan', 'rowspan', 'headers', 'scope',
+// List attributes
+'reversed', 'start',
+// Other semantic attributes
+'open', 'datetime', 'cite', 'for', 'label']);
 const isDefaultAllowedAttribute = (attributeName, defaultAllowedAttributes) => {
   // Allow data-* attributes
   if (attributeName.startsWith('data-')) {
@@ -1835,8 +1876,8 @@ const isDefaultAllowedAttribute = (attributeName, defaultAllowedAttributes) => {
   if (attributeName.startsWith('aria-')) {
     return true;
   }
-  // Allow role attribute
-  if (attributeName === 'role') {
+  // Check if it's a common HTML attribute
+  if (commonAllowedAttributes.has(attributeName)) {
     return true;
   }
   // Check if in default list
@@ -1844,11 +1885,21 @@ const isDefaultAllowedAttribute = (attributeName, defaultAllowedAttributes) => {
 };
 
 const isSelfClosingTag = tag => {
-  switch (tag) {
+  switch (tag.toLowerCase()) {
+    case 'area':
+    case 'base':
+    case 'col':
     case Br:
     case Hr:
     case Img:
     case Input:
+    case 'embed':
+    case 'link':
+    case 'meta':
+    case 'param':
+    case 'source':
+    case 'track':
+    case 'wbr':
       return true;
     default:
       return false;
@@ -1882,7 +1933,7 @@ const State = {
   TopLevelContent: 1
 };
 const RE_ANGLE_BRACKET_OPEN = /^</;
-const RE_ANGLE_BRACKET_OPEN_TAG = /^<(?![\s!%])/;
+const RE_ANGLE_BRACKET_OPEN_TAG = /^<(?![\s%])/;
 const RE_ANGLE_BRACKET_CLOSE = /^>/;
 const RE_SLASH = /^\//;
 const RE_TAGNAME = /^[a-zA-Z\d$]+/;
@@ -2117,6 +2168,14 @@ const tokenizeHtml = text => {
   return tokens;
 };
 
+// Tags that should be completely skipped (both tag and content)
+const TAGS_TO_SKIP_COMPLETELY = new Set(['meta', 'title']);
+
+// Tags that should have their opening/closing tags skipped but content processed
+const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'head']);
+
+// Tags where we capture content as CSS
+const TAGS_TO_CAPTURE_AS_CSS = new Set(['style']);
 const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = []) => {
   string(html);
   array(allowedAttributes);
@@ -2127,65 +2186,125 @@ const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = [])
   const useBuiltInDefaults = allowedAttributes.length === 0;
   const tokens = tokenizeHtml(html);
   const dom = [];
+  const css = [];
   const root = {
     childCount: 0,
     type: 0
   };
   let current = root;
   const stack = [root];
+  const tagStack = []; // Track tag names to match closing tags
   let attributeName = '';
   let lastTagWasSelfClosing = false;
+  let skipDepth = 0; // Track how many levels deep we are in skipped content
+  let captureCss = false; // Track if we're inside a style tag
+  let cssContent = ''; // Accumulate CSS content
+
   for (const token of tokens) {
     switch (token.type) {
       case AttributeName:
-        attributeName = token.text;
+        if (skipDepth === 0 && !captureCss) {
+          attributeName = token.text;
+        }
         break;
       case AttributeValue:
-        if (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes)) {
+        if (skipDepth === 0 && !captureCss && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
           const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
           current[finalAttributeName] = token.text;
         }
         attributeName = '';
         break;
       case ClosingAngleBracket:
-        // Handle boolean attributes (attributes without values)
-        if (attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
-          const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
-          current[finalAttributeName] = attributeName;
-        }
-        attributeName = '';
-        // Return to parent if the current tag is self-closing
-        if (lastTagWasSelfClosing) {
-          current = stack.at(-1) || root;
-          lastTagWasSelfClosing = false;
+        if (skipDepth === 0 && !captureCss) {
+          // Handle boolean attributes (attributes without values)
+          if (attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
+            const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
+            current[finalAttributeName] = attributeName;
+          }
+          attributeName = '';
+          // Return to parent if the current tag is self-closing
+          if (lastTagWasSelfClosing) {
+            current = stack.at(-1) || root;
+            lastTagWasSelfClosing = false;
+          }
         }
         break;
       case Content:
-        current.childCount++;
-        dom.push(text(parseText(token.text)));
+        if (captureCss) {
+          cssContent += token.text;
+        } else if (skipDepth === 0) {
+          current.childCount++;
+          dom.push(text(parseText(token.text)));
+        }
+        break;
+      case Doctype:
+        // Ignore DOCTYPE - it's parsed but not rendered since we're in a div
         break;
       case TagNameEnd:
-        if (stack.length > 1) {
-          stack.pop();
+        const tagNameToClose = tagStack.pop()?.toLowerCase() || '';
+        if (TAGS_TO_CAPTURE_AS_CSS.has(tagNameToClose)) {
+          // Finished capturing CSS
+          if (cssContent.trim()) {
+            css.push(cssContent);
+          }
+          cssContent = '';
+          captureCss = false;
+        } else if (TAGS_TO_SKIP_COMPLETELY.has(tagNameToClose)) {
+          // We were skipping this content, so decrement skipDepth
+          skipDepth--;
+        } else if (TAGS_TO_SKIP_TAG_ONLY.has(tagNameToClose)) ; else {
+          // Normal tag - pop from stack
+          if (stack.length > 1) {
+            stack.pop();
+          }
+          current = stack.at(-1) || root;
         }
-        current = stack.at(-1) || root;
         break;
       case TagNameStart:
-        current.childCount++;
-        const newNode = {
-          childCount: 0,
-          type: getVirtualDomTag(token.text)
-        };
-        dom.push(newNode);
-        current = newNode;
+        const tagNameLower = token.text.toLowerCase();
         lastTagWasSelfClosing = isSelfClosingTag(token.text);
-        if (!lastTagWasSelfClosing) {
-          stack.push(current);
+
+        // Check if this tag captures CSS content
+        if (TAGS_TO_CAPTURE_AS_CSS.has(tagNameLower)) {
+          captureCss = true;
+          cssContent = '';
+          tagStack.push(token.text);
+        }
+        // Check if this tag should be completely skipped (meta, title)
+        else if (TAGS_TO_SKIP_COMPLETELY.has(tagNameLower)) {
+          if (!lastTagWasSelfClosing) {
+            // For non-self-closing tags like title, mark as skipped
+            skipDepth++;
+            tagStack.push(token.text);
+          }
+          // For self-closing tags like meta, we just skip them without tracking
+        }
+        // Check if this tag should have its opening/closing tags skipped (html, head)
+        else if (TAGS_TO_SKIP_TAG_ONLY.has(tagNameLower)) {
+          if (!lastTagWasSelfClosing) {
+            // Track the tag name for matching the closing tag
+            tagStack.push(token.text);
+          }
+        }
+        // Normal tag processing
+        else if (skipDepth === 0) {
+          current.childCount++;
+          const newNode = {
+            childCount: 0,
+            type: getVirtualDomTag(token.text)
+          };
+          dom.push(newNode);
+          current = newNode;
+          if (!lastTagWasSelfClosing) {
+            stack.push(current);
+            tagStack.push(token.text);
+          }
         }
         break;
       case WhitespaceInsideOpeningTag:
+        if (skipDepth === 0 && !captureCss &&
         // Handle boolean attributes (attributes without values)
-        if (attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
+        attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
           const finalAttributeName = attributeName === 'class' ? 'className' : attributeName;
           current[finalAttributeName] = attributeName;
         }
@@ -2202,7 +2321,10 @@ const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = [])
   } catch {
     dom.rootChildCount = root.childCount;
   }
-  return dom;
+  return {
+    css,
+    dom
+  };
 };
 
 const handleEditorChanged = async () => {
@@ -2238,12 +2360,13 @@ const handleEditorChanged = async () => {
     if (matchingEditorUid !== null) {
       try {
         const content = await invoke$1('Editor.getText', matchingEditorUid);
-        const parsedDom = parseHtml(content, []);
+        const parseResult = parseHtml(content, []);
         const updatedState = {
           ...state,
           content,
+          css: parseResult.css,
           errorMessage: '',
-          parsedDom
+          parsedDom: parseResult.dom
         };
         set(previewUid, state, updatedState);
       } catch (error) {
@@ -2252,6 +2375,7 @@ const handleEditorChanged = async () => {
         const updatedState = {
           ...state,
           content: '',
+          css: [],
           errorMessage,
           parsedDom: []
         };
@@ -2293,11 +2417,16 @@ const updateContent = async (state, uri) => {
     // @ts-ignore
     const content = await readFile(uri);
 
-    // Parse the content into virtual DOM
-    const parsedDom = parseHtml(content);
+    // Parse the content into virtual DOM and CSS
+    const parseResult = parseHtml(content);
+    const parsedDom = parseResult.dom;
+    const {
+      css
+    } = parseResult;
     const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
     return {
       content,
+      css,
       errorMessage: '',
       parsedDom,
       parsedNodesChildNodeCount
@@ -2307,6 +2436,7 @@ const updateContent = async (state, uri) => {
     const errorMessage = error instanceof Error ? error.message : 'Unknown error';
     return {
       content: '',
+      css: [],
       errorMessage,
       parsedDom: [],
       parsedNodesChildNodeCount: 0
@@ -2317,6 +2447,7 @@ const updateContent = async (state, uri) => {
 const handleFileEdited = async state => {
   const {
     content,
+    css,
     errorMessage,
     parsedDom,
     parsedNodesChildNodeCount
@@ -2324,6 +2455,7 @@ const handleFileEdited = async state => {
   return {
     ...state,
     content,
+    css,
     errorMessage,
     parsedDom,
     parsedNodesChildNodeCount
@@ -2345,11 +2477,13 @@ const loadContent = async state => {
   // Read and parse file contents if we have a URI
   const {
     content,
+    css,
     errorMessage,
     parsedDom,
     parsedNodesChildNodeCount
   } = state.uri ? await updateContent(state, state.uri) : {
     content: state.content,
+    css: state.css,
     errorMessage: state.errorMessage,
     parsedDom: state.parsedDom,
     parsedNodesChildNodeCount: state.parsedNodesChildNodeCount
@@ -2357,6 +2491,7 @@ const loadContent = async state => {
   return {
     ...state,
     content,
+    css,
     errorCount: 0,
     errorMessage,
     initial: false,
@@ -2366,6 +2501,51 @@ const loadContent = async state => {
   };
 };
 
+const BODY_SELECTOR_REGEX = /\bbody\b/g;
+const HTML_SELECTOR_REGEX = /\bhtml\b/g;
+
+/**
+ * Wraps CSS in a CSS nesting block (.Preview { ... }) and replaces 'html' and 'body'
+ * selectors with '&' (the parent selector in CSS nesting).
+ * This approach uses CSS nesting to automatically scope all selectors to the preview div.
+ * Other selectors like 'button' or '*' are automatically scoped within the nesting.
+ *
+ * @param css The CSS string to process
+ * @returns The CSS string wrapped in .Preview nesting block with proper selector replacements
+ */
+const replaceCssBodySelector = css => {
+  if (!css.trim()) {
+    return css;
+  }
+
+  // Replace 'html' selector with '&' (CSS nesting parent selector)
+  let result = css.replaceAll(HTML_SELECTOR_REGEX, '&');
+
+  // Replace 'body' selector with '&' (CSS nesting parent selector)
+  result = result.replaceAll(BODY_SELECTOR_REGEX, '&');
+
+  // Wrap the entire CSS in .Preview nesting block
+  result = `.Preview {\n${result}\n}`;
+  return result;
+};
+
+const renderCss = (oldState, newState) => {
+  const {
+    css,
+    uid
+  } = newState;
+
+  // Combine all CSS strings into a single string
+  let cssString = css.join('\n');
+
+  // Replace body selector with .Preview since we render the preview in a div element, not a body
+  cssString = replaceCssBodySelector(cssString);
+
+  // Return command in format that can be handled by the viewlet
+  // The 'Viewlet.setCss' is a method that should be called on the viewlet
+  return ['Viewlet.setCss', uid, cssString];
+};
+
 const getEmptyPreviewDom = () => {
   return [{
     childCount: 1,
@@ -2432,6 +2612,8 @@ const renderIncremental = (oldState, newState) => {
 
 const getRenderer = diffType => {
   switch (diffType) {
+    case RenderCss:
+      return renderCss;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
@@ -2500,6 +2682,7 @@ const saveState = state => {
 const setUri = async (state, uri) => {
   const {
     content,
+    css,
     errorMessage,
     parsedDom,
     parsedNodesChildNodeCount
@@ -2507,6 +2690,7 @@ const setUri = async (state, uri) => {
   return {
     ...state,
     content,
+    css,
     errorMessage,
     parsedDom,
     parsedNodesChildNodeCount,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/preview-worker",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Preview Worker",
   "repository": {
     "type": "git",