@lvce-editor/static-server 0.72.4 → 0.73.0

package/static/{cbbb037 → 37635ff}/packages/preview-worker/dist/previewWorkerMain.js

@@ -1293,6 +1293,14 @@ const terminate = () => {
   globalThis.close();
 };
 
+const createSandboxRpc = async () => {
+  const sandboxRpc = await LazyTransferMessagePortRpcParent.create({
+    commandMap: {},
+    send: async port => await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToPreviewSandBoxWorker', port, 'SandBox.handleMessagePort')
+  });
+  return sandboxRpc;
+};
+
 const {
   get: get$1,
   getCommandIds,
@@ -1303,7 +1311,8 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create = async (uid, uri, x, y, width, height, platform, assetDir) => {
+  const sandboxRpc = await createSandboxRpc();
   const state = {
     assetDir,
     content: '',
@@ -1314,9 +1323,11 @@ const create = (uid, uri, x, y, width, height, platform, assetDir) => {
     parsedDom: [],
     parsedNodesChildNodeCount: 0,
     platform,
+    sandboxRpc,
     scripts: [],
     uid,
     uri,
+    useSandboxWorker: false,
     warningCount: 0
   };
   set$2(uid, state, state);
@@ -1411,6 +1422,9 @@ const dispatchEvent = (element, event) => {
   if (typeof handler === 'function') {
     handler.call(element, event);
   } else if (handler === null || handler === undefined) {
+    if (!element.getAttribute) {
+      return;
+    }
     // Check if there's an inline HTML attribute that wasn't converted to a property
     const attrValue = element.getAttribute(handlerName);
     if (attrValue && typeof attrValue === 'string' && element.ownerDocument && element.ownerDocument.defaultView) {
@@ -2118,11 +2132,26 @@ const serialize = (document, elementMap) => {
   };
 };
 
-const handleClick = (state, hdId) => {
-  // console.log('click,', hdId)
-  if (!hdId) {
-    return state;
-  }
+const handleClickSandbox = async (state, hdId) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleClick', uid, hdId);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleClickLocal = (state, hdId) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -2131,16 +2160,9 @@ const handleClick = (state, hdId) => {
   if (!element) {
     return state;
   }
-
-  // console.log({ element })
-  // Dispatch click event in happy-dom so event listeners fire
   dispatchClickEvent(element, happyDomInstance.window);
-
-  // Re-serialize the (potentially mutated) DOM
   const elementMap = new Map();
   const serialized = serialize(happyDomInstance.document, elementMap);
-
-  // Update happy-dom state with new element map
   set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
@@ -2158,6 +2180,15 @@ const handleClick = (state, hdId) => {
     parsedNodesChildNodeCount
   };
 };
+const handleClick = (state, hdId) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleClickSandbox(state, hdId);
+  }
+  return handleClickLocal(state, hdId);
+};
 
 const None = 0;
 const OpeningAngleBracket = 1;
@@ -55561,9 +55592,9 @@ const listenerOptions = Symbol('listenerOptions');
 const listeners = Symbol('listeners');
 const namedItems = Symbol('namedItems');
 const nextActiveElement = Symbol('nextActiveElement');
-const observe = Symbol('observe');
+const observe$1 = Symbol('observe');
 const observedAttributes = Symbol('observedAttributes');
-const observers = Symbol('observers');
+const observers$1 = Symbol('observers');
 const ownerDocument = Symbol('ownerDocument');
 const ownerElement = Symbol('ownerElement');
 const propagationStopped = Symbol('propagationStopped');
@@ -57017,15 +57048,15 @@ class NodeUtility {
     ancestorNode[childNodes].push(node);
     node[connectToNode](ancestorNode);
     // MutationObserver
-    if (ancestorNode[observers].length > 0) {
+    if (ancestorNode[observers$1].length > 0) {
       const record = new MutationRecord({
         target: ancestorNode,
         type: MutationTypeEnum$1.childList,
         addedNodes: [node]
       });
-      for (const observer of ancestorNode[observers]) {
+      for (const observer of ancestorNode[observers$1]) {
         if (observer.options?.subtree) {
-          node[observe](observer);
+          node[observe$1](observer);
         }
         if (observer.options?.childList) {
           observer.report(record);
@@ -57052,13 +57083,13 @@ class NodeUtility {
     ancestorNode[childNodes].splice(index, 1);
     node[connectToNode](null);
     // MutationObserver
-    if (ancestorNode[observers].length > 0) {
+    if (ancestorNode[observers$1].length > 0) {
       const record = new MutationRecord({
         target: ancestorNode,
         type: MutationTypeEnum$1.childList,
         removedNodes: [node]
       });
-      for (const observer of ancestorNode[observers]) {
+      for (const observer of ancestorNode[observers$1]) {
         if (observer.options?.subtree) {
           node[unobserve](observer);
         }
@@ -57112,15 +57143,15 @@ class NodeUtility {
     ancestorNode[childNodes].splice(ancestorNode[childNodes].indexOf(referenceNode), 0, newNode);
     newNode[connectToNode](ancestorNode);
     // MutationObserver
-    if (ancestorNode[observers].length > 0) {
+    if (ancestorNode[observers$1].length > 0) {
       const record = new MutationRecord({
         target: ancestorNode,
         type: MutationTypeEnum$1.childList,
         addedNodes: [newNode]
       });
-      for (const observer of ancestorNode[observers]) {
+      for (const observer of ancestorNode[observers$1]) {
         if (observer.options?.subtree) {
-          newNode[observe](observer);
+          newNode[observe$1](observer);
         }
         if (observer.options?.childList) {
           observer.report(record);
@@ -57430,7 +57461,7 @@ class Node extends EventTarget$1 {
    *
    * @returns `Symbol.toStringTag`.
    */
-  get [(_a$F = isConnected, _b$n = parentNode, _c$j = rootNode, _d$d = formNode, _e$b = selectNode, _f$9 = textAreaNode, _g$6 = styleNode, _h$5 = observers, _j$5 = childNodes, Symbol.toStringTag)]() {
+  get [(_a$F = isConnected, _b$n = parentNode, _c$j = rootNode, _d$d = formNode, _e$b = selectNode, _f$9 = textAreaNode, _g$6 = styleNode, _h$5 = observers$1, _j$5 = childNodes, Symbol.toStringTag)]() {
     return this.constructor.name;
   }
   /**
@@ -57760,11 +57791,11 @@ class Node extends EventTarget$1 {
    *
    * @param listener Listener.
    */
-  [observe](listener) {
-    this[observers].push(listener);
+  [observe$1](listener) {
+    this[observers$1].push(listener);
     if (listener.options.subtree) {
       for (const node of this[childNodes]) {
-        node[observe](listener);
+        node[observe$1](listener);
       }
     }
   }
@@ -57775,9 +57806,9 @@ class Node extends EventTarget$1 {
    * @param listener Listener.
    */
   [unobserve](listener) {
-    const index = this[observers].indexOf(listener);
+    const index = this[observers$1].indexOf(listener);
     if (index !== -1) {
-      this[observers].splice(index, 1);
+      this[observers$1].splice(index, 1);
     }
     if (listener.options.subtree) {
       for (const node of this[childNodes]) {
@@ -61669,8 +61700,8 @@ class ElementNamedNodeMap extends NamedNodeMap {
       this[ownerElement].attributeChangedCallback(item[name], oldValue, item[value]);
     }
     // MutationObserver
-    if (this[ownerElement][observers].length > 0) {
-      for (const observer of this[ownerElement][observers]) {
+    if (this[ownerElement][observers$1].length > 0) {
+      for (const observer of this[ownerElement][observers$1]) {
         if (observer.options?.attributes && (!observer.options.attributeFilter || observer.options.attributeFilter.includes(item[name]))) {
           observer.report(new MutationRecord({
             target: this[ownerElement],
@@ -61706,8 +61737,8 @@ class ElementNamedNodeMap extends NamedNodeMap {
       this[ownerElement].attributeChangedCallback(removedItem[name], removedItem[value], null);
     }
     // MutationObserver
-    if (this[ownerElement][observers].length > 0) {
-      for (const observer of this[ownerElement][observers]) {
+    if (this[ownerElement][observers$1].length > 0) {
+      for (const observer of this[ownerElement][observers$1]) {
         if (observer.options?.attributes && (!observer.options.attributeFilter || observer.options.attributeFilter.includes(removedItem[name]))) {
           observer.report(new MutationRecord({
             target: this[ownerElement],
@@ -74763,7 +74794,7 @@ class HTMLElement extends Element {
             newElement[formNode] = this[formNode];
             newElement[selectNode] = this[selectNode];
             newElement[textAreaNode] = this[textAreaNode];
-            newElement[observers] = this[observers];
+            newElement[observers$1] = this[observers$1];
             newElement[isValue] = this[isValue];
             for (let i = 0, max = this[attributes].length; i < max; i++) {
               newElement[attributes].setNamedItem(this[attributes][i]);
@@ -74774,7 +74805,7 @@ class HTMLElement extends Element {
             this[formNode] = null;
             this[selectNode] = null;
             this[textAreaNode] = null;
-            this[observers] = [];
+            this[observers$1] = [];
             this[isValue] = null;
             this[attributes] = new HTMLElementNamedNodeMap(this);
             for (let i = 0, max = this[parentNode][childNodes].length; i < max; i++) {
@@ -83004,8 +83035,8 @@ class CharacterData extends Node {
       this[ownerDocument][cacheID]++;
     }
     // MutationObserver
-    if (this[observers].length > 0) {
-      for (const observer of this[observers]) {
+    if (this[observers$1].length > 0) {
+      for (const observer of this[observers$1]) {
         if (observer.options?.characterData) {
           observer.report(new MutationRecord({
             target: this,
@@ -83793,7 +83824,7 @@ class MutationObserver {
     // Stores all observers on the window object, so that they can be disconnected when the window is closed.
     __classPrivateFieldGet$e(this, _MutationObserver_window, "f")[mutationObservers].push(this);
     // Starts observing target node.
-    target[observe](listener);
+    target[observe$1](listener);
   }
   /**
    * Disconnects.
@@ -90366,21 +90397,138 @@ const alert = message => {
   void invoke('ConfirmPrompt.prompt', message);
 };
 
+// const FUNCTION_REGEX = /(?:^|[\n;])\s*function\s+([a-zA-Z_$][\w$]*)/g
+
 const getTopLevelFunctionNames = script => {
   const names = [];
-  const regex = /(?:^|[\n;])\s*function\s+([a-zA-Z_$][\w$]*)/g;
-  let match;
-  while ((match = regex.exec(script)) !== null) {
-    names.push(match[1]);
+  let braceDepth = 0;
+  let i = 0;
+  while (i < script.length) {
+    const char = script[i];
+
+    // Skip strings
+    if (char === '"' || char === "'" || char === '`') {
+      const quote = char;
+      i++;
+      while (i < script.length) {
+        if (script[i] === '\\') {
+          i += 2;
+          continue;
+        }
+        if (script[i] === quote) {
+          i++;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    // Skip comments
+    if (char === '/' && script[i + 1] === '/') {
+      // Line comment
+      i += 2;
+      while (i < script.length && script[i] !== '\n') {
+        i++;
+      }
+      continue;
+    }
+    if (char === '/' && script[i + 1] === '*') {
+      // Block comment
+      i += 2;
+      while (i < script.length - 1) {
+        if (script[i] === '*' && script[i + 1] === '/') {
+          i += 2;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+
+    // Track braces
+    if (char === '{') {
+      braceDepth++;
+      i++;
+      continue;
+    }
+    if (char === '}') {
+      braceDepth--;
+      i++;
+      continue;
+    }
+
+    // Only look for functions at depth 0
+    if (braceDepth === 0 && char === 'f' && script.slice(i, i + 8) === 'function') {
+      // Check if 'function' is a complete word
+      const charBefore = i > 0 ? script[i - 1] : ' ';
+      const charAfter = script[i + 8] ?? ' ';
+      const isValidBefore = /\s|^|;|{|}/.test(charBefore);
+      const isValidAfter = /\s/.test(charAfter);
+      if (isValidBefore && isValidAfter) {
+        i += 8;
+        // Skip whitespace
+        while (i < script.length && /\s/.test(script[i])) {
+          i++;
+        }
+        // Extract function name
+        const nameMatch = script.slice(i).match(/^([a-zA-Z_$][\w$]*)/);
+        if (nameMatch) {
+          names.push(nameMatch[1]);
+        }
+        continue;
+      }
+    }
+    i++;
   }
   return names;
 };
 
+const createLocalStorage = () => {
+  const store = new Map();
+  const getItem = key => {
+    if (store.has(key)) {
+      return store.get(key);
+    }
+    return null;
+  };
+  const setItem = (key, value) => {
+    store.set(key, String(value));
+  };
+  const removeItem = key => {
+    store.delete(key);
+  };
+  const clear = () => {
+    store.clear();
+  };
+  const key = index => {
+    const keys = [...store.keys()];
+    if (index < 0 || index >= keys.length) {
+      return null;
+    }
+    return keys[index];
+  };
+  const localStorage = {
+    clear,
+    getItem,
+    key,
+    get length() {
+      return store.size;
+    },
+    removeItem,
+    setItem
+  };
+  return localStorage;
+};
+
 /* eslint-disable @typescript-eslint/no-implied-eval */
 const executeScripts = (window, document, scripts) => {
   window.alert = alert;
   // @ts-ignore
   globalThis.alert = alert;
+  const localStorage = createLocalStorage();
+  // @ts-ignore
+  globalThis.localStorage = localStorage;
   // Execute each script with the happy-dom window and document as context
   for (const scriptContent of scripts) {
     try {
@@ -90397,6 +90545,59 @@ const executeScripts = (window, document, scripts) => {
   }
 };
 
+/* eslint-disable @typescript-eslint/no-floating-promises */
+const observers = new Map();
+const handleMutations = async uid => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const {
+    newState: state,
+    oldState
+  } = get$1(uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  const updatedState = {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+  set$2(uid, oldState, updatedState);
+  try {
+    await invoke('Preview.rerender', uid);
+  } catch {
+    // ignore
+  }
+};
+const observe = (uid, document, window) => {
+  const existingObserver = observers.get(uid);
+  if (existingObserver) {
+    existingObserver.disconnect();
+  }
+  const observer = new window.MutationObserver(() => {
+    handleMutations(uid);
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true
+  });
+  observers.set(uid, observer);
+};
+
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const states = new Map();
@@ -90458,8 +90659,8 @@ const updateContent = async (state, uri) => {
       scripts
     } = parseResult;
 
-    // If scripts are present, execute them via happy-dom and re-serialize the DOM
-    if (scripts.length > 0) {
+    // If scripts are present and not using sandbox worker, execute them via happy-dom and re-serialize the DOM
+    if (scripts.length > 0 && !state.useSandboxWorker) {
       try {
         const {
           document: happyDomDocument,
@@ -90476,6 +90677,7 @@ const updateContent = async (state, uri) => {
           elementMap,
           window: happyDomWindow
         });
+        observe(state.uid, happyDomDocument, happyDomWindow);
       } catch (error) {
         console.error(error);
         // If script execution fails, fall back to static HTML parsing
@@ -90531,31 +90733,169 @@ const dispatchInputEvent = (element, window) => {
   dispatchEvent(element, inputEvent);
 };
 
+const handleInputSandbox = async (state, hdId, value) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleInput', uid, hdId, value);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleInputLocal = (state, hdId, value) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+  element.value = value;
+  dispatchInputEvent(element, happyDomInstance.window);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
 const handleInput = (state, hdId, value) => {
-  // console.log('input,', hdId, value)
   if (!hdId) {
     return state;
   }
+  if (state.useSandboxWorker) {
+    return handleInputSandbox(state, hdId, value);
+  }
+  return handleInputLocal(state, hdId, value);
+};
+
+const dispatchKeydownEvent = (element, window, key, code) => {
+  const keydownEvent = new window.KeyboardEvent('keydown', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keydownEvent);
+};
+
+const handleKeydownSandbox = async (state, hdId, key, code) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleKeyDown', uid, hdId, key, code);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeydownLocal = (state, hdId, key, code) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
   }
-  const element = happyDomInstance.elementMap.get(hdId);
+  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
   if (!element) {
     return state;
   }
+  dispatchKeydownEvent(element, happyDomInstance.window, key, code);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeydown = (state, hdId, key, code) => {
+  if (state.useSandboxWorker) {
+    return handleKeydownSandbox(state, hdId, key, code);
+  }
+  return handleKeydownLocal(state, hdId, key, code);
+};
 
-  // console.log({ element })
-  // Update the element's value from the preview
-  element.value = value;
-  // Dispatch input event in happy-dom so event listeners fire
-  dispatchInputEvent(element, happyDomInstance.window);
+const dispatchKeyupEvent = (element, window, key, code) => {
+  const keyupEvent = new window.KeyboardEvent('keyup', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keyupEvent);
+};
 
-  // Re-serialize the (potentially mutated) DOM
+const handleKeyupSandbox = async (state, hdId, key, code) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleKeyUp', uid, hdId, key, code);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeyupLocal = (state, hdId, key, code) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
+  if (!element) {
+    return state;
+  }
+  dispatchKeyupEvent(element, happyDomInstance.window, key, code);
   const elementMap = new Map();
   const serialized = serialize(happyDomInstance.document, elementMap);
-
-  // Update happy-dom state with new element map
   set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
@@ -90573,6 +90913,12 @@ const handleInput = (state, hdId, value) => {
     parsedNodesChildNodeCount
   };
 };
+const handleKeyup = (state, hdId, key, code) => {
+  if (state.useSandboxWorker) {
+    return handleKeyupSandbox(state, hdId, key, code);
+  }
+  return handleKeyupLocal(state, hdId, key, code);
+};
 
 const loadContent = async state => {
   // Try to register to receive editor change notifications from the editor worker.
@@ -90602,15 +90948,29 @@ const loadContent = async state => {
     parsedNodesChildNodeCount: state.parsedNodesChildNodeCount,
     scripts: state.scripts
   };
+  const {
+    sandboxRpc
+  } = state;
+  let finalParsedDom = parsedDom;
+  let finalCss = css;
+  let finalParsedNodesChildNodeCount = parsedNodesChildNodeCount;
+  if (state.useSandboxWorker && scripts.length > 0) {
+    await sandboxRpc.invoke('SandBox.initialize', state.uid, content, scripts);
+    const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', state.uid);
+    finalParsedDom = serialized.dom;
+    finalCss = serialized.css;
+    finalParsedNodesChildNodeCount = finalParsedDom.length > 0 ? finalParsedDom[0].childCount || 0 : 0;
+  }
   return {
     ...state,
     content,
-    css,
+    css: finalCss,
     errorCount: 0,
     errorMessage,
     initial: false,
-    parsedDom,
-    parsedNodesChildNodeCount,
+    parsedDom: finalParsedDom,
+    parsedNodesChildNodeCount: finalParsedNodesChildNodeCount,
+    sandboxRpc,
     scripts,
     warningCount: 1
   };
@@ -90663,6 +91023,8 @@ const renderCss = (oldState, newState) => {
 
 const HandleInput = 4;
 const HandleClick = 11;
+const HandleKeydown = 12;
+const HandleKeyup = 13;
 
 const getEmptyPreviewDom = () => {
   return [{
@@ -90695,6 +91057,9 @@ const getPreviewDom = state => {
       className: 'Viewlet Preview',
       onClick: HandleClick,
       onInput: HandleInput,
+      onKeyDown: HandleKeydown,
+      onKeyUp: HandleKeyup,
+      tabIndex: 0,
       type: Div$1
     }, ...parsedDom];
   }
@@ -90703,6 +91068,9 @@ const getPreviewDom = state => {
     className: 'Viewlet Preview',
     onClick: HandleClick,
     onInput: HandleInput,
+    onKeyDown: HandleKeydown,
+    onKeyUp: HandleKeyup,
+    tabIndex: 0,
     type: Div$1
   }, {
     childCount: 1,
@@ -90776,6 +91144,14 @@ const renderEventListeners = () => {
     capture: true,
     name: HandleInput,
     params: ['handleInput', 'event.target.dataset.id', 'event.target.value']
+  }, {
+    capture: true,
+    name: HandleKeydown,
+    params: ['handleKeyDown', 'event.target.dataset.id', 'event.key', 'event.code']
+  }, {
+    capture: true,
+    name: HandleKeyup,
+    params: ['handleKeyUp', 'event.target.dataset.id', 'event.key', 'event.code']
   }];
 };
 
@@ -90834,6 +91210,8 @@ const commandMap = {
   'Preview.handleClick': wrapCommand(handleClick),
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),
   'Preview.handleInput': wrapCommand(handleInput),
+  'Preview.handleKeyDown': wrapCommand(handleKeydown),
+  'Preview.handleKeyUp': wrapCommand(handleKeyup),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,