@lvce-editor/renderer-process 26.2.0 → 28.0.0

package/dist/rendererProcessMain.js

@@ -274,7 +274,7 @@ const enabled = () => {
 };
 
 let id$1 = 0;
-const create$N = () => {
+const create$L = () => {
   return ++id$1;
 };
 
@@ -290,7 +290,7 @@ const getFileHandles$1 = async ids => {
   return handles;
 };
 const add$1 = promise => {
-  const id = create$N();
+  const id = create$L();
   state$9[id] = promise;
   return id;
 };
@@ -604,7 +604,7 @@ const Video$2 = 'video';
 const TextArea$1 = 'textarea';
 const Select$1 = 'select';
 const Option$1 = 'option';
-const Code$2 = 'code';
+const Code$1 = 'code';
 const Label$1 = 'label';
 const Dt$2 = 'dt';
 const Iframe$1 = 'iframe';
@@ -644,7 +644,7 @@ const Span = 8;
 const Table = 9;
 const TBody = 10;
 const Td = 11;
-const Text$3 = 12;
+const Text$2 = 12;
 const Th = 13;
 const THead = 14;
 const Tr$1 = 15;
@@ -684,7 +684,7 @@ const Video$1 = 61;
 const TextArea = 62;
 const Select = 63;
 const Option = 64;
-const Code$1 = 65;
+const Code = 65;
 const Label = 66;
 const Dt$1 = 67;
 const Iframe = 68;
@@ -725,7 +725,7 @@ const VirtualDomElements = {
   Canvas,
   Circle,
   Cite,
-  Code: Code$1,
+  Code,
   Col,
   ColGroup,
   Data,
@@ -785,7 +785,7 @@ const VirtualDomElements = {
   THead,
   Table,
   Td,
-  Text: Text$3,
+  Text: Text$2,
   TextArea,
   Tfoot,
   Th,
@@ -808,7 +808,7 @@ const elementTagMap = {
   [Canvas]: Canvas$1,
   [Circle]: Circle$1,
   [Cite]: Cite$1,
-  [Code$1]: Code$2,
+  [Code]: Code$1,
   [Col]: Col$1,
   [ColGroup]: ColGroup$1,
   [Data]: Data$1,
@@ -1169,7 +1169,7 @@ const getKeyCode = key => {
 
 const CtrlCmd = 1 << 11 >>> 0;
 const Shift = 1 << 10 >>> 0;
-const Alt$1 = 1 << 9 >>> 0;
+const Alt = 1 << 9 >>> 0;
 
 const {
   getElementTag
@@ -1183,7 +1183,7 @@ const set$9 = (viewletId, instance) => {
   instances[viewletId] = instance;
 };
 
-const getEventListenerOptions$1 = (eventName, value) => {
+const getEventListenerOptions = (eventName, value) => {
   if (value.passive) {
     return {
       passive: true
@@ -1204,18 +1204,18 @@ const getEventListenerOptions$1 = (eventName, value) => {
   }
 };
 
-const cache$1 = new Map();
+const cache = new Map();
 const has$1 = listener => {
-  return cache$1.has(listener);
+  return cache.has(listener);
 };
 const set$8 = (listener, value) => {
-  cache$1.set(listener, value);
+  cache.set(listener, value);
 };
 const get$9 = listener => {
-  return cache$1.get(listener);
+  return cache.get(listener);
 };
 
-const getWrappedListener$1 = (listener, returnValue) => {
+const getWrappedListener = (listener, returnValue) => {
   if (!returnValue) {
     return listener;
   }
@@ -1250,7 +1250,7 @@ const getOptions = fn => {
   }
   return undefined;
 };
-const attachEvent$1 = ($Node, eventMap, key, value, newEventMap) => {
+const attachEvent = ($Node, eventMap, key, value, newEventMap) => {
   const keyLower = key.toLowerCase();
   const listenersByEvent = attachedListeners.get($Node) || new Map();
   const previous = listenersByEvent.get(keyLower);
@@ -1274,8 +1274,8 @@ const attachEvent$1 = ($Node, eventMap, key, value, newEventMap) => {
     console.warn('listener not found', value);
     return;
   }
-  const options = getEventListenerOptions$1(key, value);
-  const wrapped = getWrappedListener$1(listener, eventMap.returnValue);
+  const options = getEventListenerOptions(key, value);
+  const wrapped = getWrappedListener(listener, eventMap.returnValue);
   $Node.addEventListener(keyLower, wrapped, options);
   listenersByEvent.set(keyLower, {
     listener: wrapped,
@@ -1326,7 +1326,7 @@ const setEventProp = ($Element, key, value, eventMap, newEventMap) => {
     return;
   }
   const eventName = key.slice(2).toLowerCase();
-  attachEvent$1($Element, eventMap, eventName, value, newEventMap);
+  attachEvent($Element, eventMap, eventName, value, newEventMap);
 };
 const setProp = ($Element, key, value, eventMap, newEventMap) => {
   const optionalAttributeName = optionalAttributeProps.get(key);
@@ -1394,7 +1394,7 @@ const setProps = ($Element, props, eventMap, newEventMap) => {
 };
 
 const {
-  Text: Text$2,
+  Text: Text$1,
   Reference} = VirtualDomElements;
 
 const renderDomTextNode = element => {
@@ -1418,7 +1418,7 @@ const render$1 = (element, eventMap, newEventMap) => {
   switch (element.type) {
     case Reference:
       return renderReferenceNode(element);
-    case Text$2:
+    case Text$1:
       return renderDomTextNode(element);
     default:
       return renderDomElement(element, eventMap, newEventMap);
@@ -1491,7 +1491,7 @@ const removeAttribute = ($Element, key) => {
   const attributeName = propertyToAttribute[key] || key;
   $Element.removeAttribute(attributeName);
 };
-const setText$3 = ($Element, value) => {
+const setText$1 = ($Element, value) => {
   $Element.nodeValue = value;
 };
 const removeChild = ($Element, index) => {
@@ -1635,7 +1635,7 @@ const applyMutationPatch = (state, patch, events) => {
       state.hasAppliedMutation = true;
       break;
     case SetText:
-      setText$3(state.current, patch.value);
+      setText$1(state.current, patch.value);
       state.hasAppliedMutation = true;
       break;
   }
@@ -1866,9 +1866,17 @@ const hydrate$4 = () => {
 
 const shouldLaunchMultipleWorkers = true;
 
+const getConfig = () => {
+  const configElement = document.getElementById('Config');
+  if (!configElement?.textContent) {
+    return {};
+  }
+  return JSON.parse(configElement.textContent);
+};
 const getInitData = () => {
   const initData = {
     Config: {
+      ...getConfig(),
       shouldLaunchMultipleWorkers: shouldLaunchMultipleWorkers
     },
     Layout: {
@@ -2032,7 +2040,7 @@ const getWorkerDisplayName$1 = name => {
   }
   return `${name} worker`;
 };
-const create$M = async ({
+const create$K = async ({
   name,
   url
 }) => {
@@ -2099,7 +2107,7 @@ const wrap = worker => {
 
 const IpcParentWithModuleWorker$2 = {
   __proto__: null,
-  create: create$M,
+  create: create$K,
   wrap
 };
 
@@ -2107,7 +2115,7 @@ const isMessagePort$1 = value => {
   return value instanceof MessagePort;
 };
 
-const create$L = async ({
+const create$J = async ({
   url
 }) => {
   string(url);
@@ -2128,10 +2136,10 @@ const create$L = async ({
 
 const IpcParentWithMessagePort$2 = {
   __proto__: null,
-  create: create$L
+  create: create$J
 };
 
-const create$K = async url => {
+const create$I = async url => {
   const referencePort = await new Promise(resolve => {
     globalThis.acceptReferencePort = resolve;
     import(url);
@@ -2142,7 +2150,7 @@ const create$K = async url => {
 
 const IpcParentWithReferencePort = {
   __proto__: null,
-  create: create$K
+  create: create$I
 };
 
 const normalizeLine = line => {
@@ -2932,7 +2940,7 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const errorProperty = getErrorProperty(error, prettyError);
   return create$1$1(id, errorProperty);
 };
-const create$J = (message, result) => {
+const create$H = (message, result) => {
   return {
     id: message.id,
     jsonrpc: Two$1,
@@ -2941,7 +2949,7 @@ const create$J = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$J(message, resultProperty);
+  return create$H(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -3035,7 +3043,7 @@ const handleJsonRpcMessage = async (...args) => {
 
 const Two = '2.0';
 
-const create$I = (method, params) => {
+const create$G = (method, params) => {
   return {
     jsonrpc: Two,
     method,
@@ -3043,7 +3051,7 @@ const create$I = (method, params) => {
   };
 };
 
-const create$H = (id, method, params) => {
+const create$F = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -3054,12 +3062,12 @@ const create$H = (id, method, params) => {
 };
 
 let id = 0;
-const create$G = () => {
+const create$E = () => {
   return ++id;
 };
 
 const registerPromise = map => {
-  const id = create$G();
+  const id = create$E();
   const {
     promise,
     resolve
@@ -3076,7 +3084,7 @@ const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer)
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$H(id, method, params);
+  const message = create$F(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -3112,7 +3120,7 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$I(method, params);
+      const message = create$G(method, params);
       ipc.send(message);
     }
   };
@@ -3151,7 +3159,7 @@ const unhandleIpc = ipc => {
   }
 };
 
-const create$F = async ({
+const create$D = async ({
   commandMap,
   window
 }) => {
@@ -3163,7 +3171,7 @@ const create$F = async ({
   return rpc;
 };
 
-const create$E = async ({
+const create$C = async ({
   commandMap,
   isMessagePortOpen = true,
   messagePort
@@ -3185,7 +3193,7 @@ const isWorker = value => {
   return value instanceof Worker;
 };
 
-const create$D = async ({
+const create$B = async ({
   commandMap,
   name,
   url
@@ -3205,7 +3213,7 @@ const create$D = async ({
   return workerRpc;
 };
 
-const create$C = async ({
+const create$A = async ({
   commandMap,
   name,
   port,
@@ -3228,23 +3236,23 @@ const create$C = async ({
   return workerRpc;
 };
 
-const create$B = async ({
+const create$z = async ({
   commandMap,
   messagePort
 }) => {
-  return create$E({
+  return create$C({
     commandMap,
     messagePort
   });
 };
 
 // TODO add test
-const create$A = async ({
+const create$y = async ({
   name,
   port,
   url
 }) => {
-  await create$C({
+  await create$A({
     commandMap: {},
     name,
     port,
@@ -3255,7 +3263,7 @@ const create$A = async ({
 
 const IpcParentWithModuleWorkerWithMessagePort = {
   __proto__: null,
-  create: create$A
+  create: create$y
 };
 
 const Web = 1;
@@ -3288,7 +3296,7 @@ const platform = getPlatform();
 const isElectron = platform === Electron;
 
 // TODO use handleIncomingIpc function
-const create$z = async ({
+const create$x = async ({
   ipcId,
   port
 }) => {
@@ -3296,7 +3304,7 @@ const create$z = async ({
   if (!isElectron) {
     throw new Error('Electron api was requested but is not available');
   }
-  const rpc = await create$F({
+  const rpc = await create$D({
     commandMap: {},
     window
   });
@@ -3306,7 +3314,7 @@ const create$z = async ({
 
 const IpcParentWithElectron = {
   __proto__: null,
-  create: create$z
+  create: create$x
 };
 
 const getModule = method => {
@@ -3346,7 +3354,7 @@ const launchWorker = async ({
   name,
   url
 }) => {
-  const rpc = await create$D({
+  const rpc = await create$B({
     commandMap: commandMapRef,
     name,
     url
@@ -3451,7 +3459,7 @@ const RendererWorker = {
   state: state$7
 };
 
-const create$y = async ({
+const create$w = async ({
   method,
   ...options
 }) => {
@@ -3572,7 +3580,7 @@ const create$Notification = message => {
   $Notification.textContent = message;
   return $Notification;
 };
-const create$x = (type, message) => {
+const create$v = (type, message) => {
   // TODO this pattern might be also useful for activitybar, sidebar etc., creating elements as late as possible, only when actually needed
   const $Notification = create$Notification(message);
   append$1($Notification);
@@ -3634,7 +3642,7 @@ const set$6 = (canvasId, canvas) => {
 const get$4 = id => {
   return get$5(id);
 };
-const create$w = async (canvasId, objectId) => {
+const create$u = async (canvasId, objectId) => {
   const canvas = document.createElement('canvas');
   const offscreenCanvas = canvas.transferControlToOffscreen();
   set$6(canvasId, canvas);
@@ -3664,16 +3672,14 @@ const False = 'false';
 
 const Alert = 'alert';
 const Application = 'application';
-const Code = 'code';
 const Complementary = 'complementary';
 const Group = 'group';
 const ListBox = 'listbox';
 const Log = 'log';
 const Menu = 'menu';
-const None$2 = 'none';
+const None$1 = 'none';
 const Status = 'status';
 const TabList = 'tablist';
-const TextBox = 'textbox';
 const ToolBar = 'toolbar';
 
 const create$BackDrop = () => {
@@ -3689,14 +3695,9 @@ const AriaActiveDescendant = 'aria-activedescendant';
 const AriaSelected = 'aria-selected';
 const AriaHidden = 'aria-hidden';
 
-const BeforeInput = 'beforeinput';
 const Blur = 'blur';
 const Click = 'click';
-const CompositionEnd = 'compositionend';
-const CompositionStart = 'compositionstart';
-const CompositionUpdate = 'compositionupdate';
 const ContextMenu = 'contextmenu';
-const Cut = 'cut';
 const DoubleClick = 'dblclick';
 const Error$2 = 'error';
 const Focus = 'focus';
@@ -3709,7 +3710,6 @@ const MouseDown = 'mousedown';
 const MouseEnter = 'mouseenter';
 const MouseLeave = 'mouseleave';
 const MouseUp = 'mouseup';
-const Paste = 'paste';
 const PointerDown = 'pointerdown';
 const PointerMove = 'pointermove';
 const PointerUp = 'pointerup';
@@ -3762,7 +3762,7 @@ const getElement = () => {
   return state$4.$PreviousFocusElement;
 };
 
-const focus$e = $Element => {
+const focus$d = $Element => {
   if ($Element === document.activeElement) {
     return;
   }
@@ -3792,10 +3792,6 @@ const setYAndHeight = ($Element, y, height) => {
   $Element.style.translate = typeof y === 'string' ? y : `0 ${y}px`;
   $Element.style.height = typeof height === 'string' ? height : `${height}px`;
 };
-const setXAndWidth = ($Element, x, width) => {
-  $Element.style.translate = `${x}px 0`;
-  $Element.style.width = `${width}px`;
-};
 const setTop = ($Element, top) => {
   $Element.style.top = `${top}px`;
 };
@@ -3865,7 +3861,7 @@ const getLevel = $Menu => {
   // @ts-expect-error
   return state$3.$$Menus.indexOf($Menu);
 };
-const handleMouseDown$4 = event => {
+const handleMouseDown$3 = event => {
   const $Target = event.target;
   const $Menu = $Target.closest('.Menu');
   const index = findIndex($Menu, $Target);
@@ -3942,7 +3938,7 @@ const create$Menu$1 = () => {
   $Menu.tabIndex = -1;
   // $ContextMenu.onmousedown = contextMenuHandleMouseDown
   // TODO mousedown vs click? (click is usually better but mousedown is faster, why wait 100ms?)
-  $Menu.addEventListener(MouseDown, handleMouseDown$4);
+  $Menu.addEventListener(MouseDown, handleMouseDown$3);
   $Menu.addEventListener(MouseEnter, handleMouseEnter, {
     capture: true
   });
@@ -3954,7 +3950,7 @@ const create$Menu$1 = () => {
   // })
   $Menu.onkeydown = handleKeyDown$5;
   $Menu.addEventListener(FocusOut, handleFocusOut$1);
-  $Menu.oncontextmenu = handleContextMenu$8;
+  $Menu.oncontextmenu = handleContextMenu$7;
   // $ContextMenu.onfocus = handleFocus
   // $ContextMenu.onblur = handleBlur
   return $Menu;
@@ -3987,14 +3983,14 @@ const handleBackDropMouseDown = event => {
     state$3.$BackDrop = undefined;
   }
 };
-const handleContextMenu$8 = event => {
+const handleContextMenu$7 = event => {
   preventDefault(event);
 };
 const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom, mouseBlocking = false) => {
   if (mouseBlocking) {
     const $BackDrop = create$BackDrop();
     $BackDrop.onmousedown = handleBackDropMouseDown;
-    $BackDrop.oncontextmenu = handleContextMenu$8;
+    $BackDrop.oncontextmenu = handleContextMenu$7;
     // @ts-expect-error
     state$3.$BackDrop = $BackDrop;
     append$1($BackDrop);
@@ -4015,7 +4011,7 @@ const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom, mous
   state$3.$$Menus.push($Menu);
   append$1($Menu);
   if (level === 0) {
-    focus$e($Menu);
+    focus$d($Menu);
     send('Focus.setFocus', FocusMenu);
   }
 };
@@ -4856,7 +4852,7 @@ const showError = (message, y, x) => {
     $ImagePreviewImage
   };
 };
-const create$v = (uri, top, left) => {
+const create$t = (uri, top, left) => {
   const $ImagePreviewImage = document.createElement('img');
   $ImagePreviewImage.className = 'ImagePreviewImage';
   $ImagePreviewImage.src = uri;
@@ -4887,7 +4883,7 @@ const dispose$g = state => {
 
 const ImagePreview$1 = {
   __proto__: null,
-  create: create$v,
+  create: create$t,
   dispose: dispose$g,
   showError,
   update
@@ -4911,7 +4907,7 @@ const get$ItemFromEvent = event => {
   }
   return undefined;
 };
-const handleMouseDown$3 = event => {
+const handleMouseDown$2 = event => {
   const {
     button,
     clientX,
@@ -4926,16 +4922,16 @@ const handleMouseDown$3 = event => {
   const index = getNodeIndex($Item);
   return ['handleClick', button, index, clientX, clientY];
 };
-const handleBlur$9 = () => {
+const handleBlur$8 = () => {
   return ['handleBlur'];
 };
-const handleFocus$9 = () => {
+const handleFocus$8 = () => {
   return ['handleFocus'];
 };
 
 // TODO use context menu events function again
 
-const handleContextMenu$7 = event => {
+const handleContextMenu$6 = event => {
   preventDefault(event);
   const {
     button,
@@ -4948,10 +4944,10 @@ const returnValue$8 = true;
 
 const ViewletActivityBarEvents = {
   __proto__: null,
-  handleBlur: handleBlur$9,
-  handleContextMenu: handleContextMenu$7,
-  handleFocus: handleFocus$9,
-  handleMouseDown: handleMouseDown$3,
+  handleBlur: handleBlur$8,
+  handleContextMenu: handleContextMenu$6,
+  handleFocus: handleFocus$8,
+  handleMouseDown: handleMouseDown$2,
   returnValue: returnValue$8
 };
 
@@ -4996,7 +4992,7 @@ forwardViewletCommand('focusPrevious');
 const handleAudioError$1 = forwardViewletCommand('handleAudioError');
 forwardViewletCommand('handleBeforeInput');
 forwardViewletCommand('handleBeforeInputFromContentEditable');
-const handleBlur$8 = forwardViewletCommand('handleBlur');
+const handleBlur$7 = forwardViewletCommand('handleBlur');
 const handleButtonClick = forwardViewletCommand('handleButtonClick');
 const handleClick$6 = forwardViewletCommand('handleClick');
 const handleClickAction$2 = forwardViewletCommand('handleClickAction');
@@ -5011,7 +5007,7 @@ forwardViewletCommand('handleClickOpenFolder');
 forwardViewletCommand('handleClickRestore');
 const handleClickTab$2 = forwardViewletCommand('handleClickTab');
 forwardViewletCommand('handleClickToggleMaximize');
-const handleContextMenu$6 = forwardViewletCommand('handleContextMenu');
+const handleContextMenu$5 = forwardViewletCommand('handleContextMenu');
 forwardViewletCommand('handleDoubleClick');
 forwardViewletCommand('handleDragEnd');
 forwardViewletCommand('handleDragLeave');
@@ -5024,7 +5020,7 @@ forwardViewletCommand('handleClickSize');
 forwardViewletCommand('handleClickDisable');
 forwardViewletCommand('handleClickUninstall');
 forwardViewletCommand('handleFilterInput');
-const handleFocus$8 = forwardViewletCommand('handleFocus');
+const handleFocus$7 = forwardViewletCommand('handleFocus');
 const handleFocusIn$4 = forwardViewletCommand('handleFocusIn');
 forwardViewletCommand('handleIconError');
 const handleImageError = forwardViewletCommand('handleImageError');
@@ -5034,7 +5030,7 @@ forwardViewletCommand('handleListBlur');
 forwardViewletCommand('handleListFocus');
 const handleMenuClick$1 = forwardViewletCommand('handleMenuClick');
 const handleMenuMouseOver$1 = forwardViewletCommand('handleMenuMouseOver');
-const handleMouseDown$2 = forwardViewletCommand('handleMouseDown');
+const handleMouseDown$1 = forwardViewletCommand('handleMouseDown');
 forwardViewletCommand('handleMouseMove');
 const handleMouseOut$1 = forwardViewletCommand('handleMouseOut');
 const handleMouseOver$1 = forwardViewletCommand('handleMouseOver');
@@ -5068,7 +5064,7 @@ forwardViewletCommand('handleTabsWheel');
 forwardViewletCommand('handleTouchEnd');
 forwardViewletCommand('handleTouchMove');
 forwardViewletCommand('handleTouchStart');
-const handleWheel$4 = forwardViewletCommand('handleWheel');
+const handleWheel$3 = forwardViewletCommand('handleWheel');
 const hidePanel = forwardViewletCommand('hidePanel');
 forwardViewletCommand('moveRectangleSelectionPx');
 forwardViewletCommand('moveSelectionPx');
@@ -5112,7 +5108,7 @@ const ViewletAudio = {
   Events: Events$4
 };
 
-const create$u = () => {
+const create$s = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet Clock';
   return {
@@ -5129,7 +5125,7 @@ const setTime = (state, time) => {
 
 const ViewletClock = {
   __proto__: null,
-  create: create$u,
+  create: create$s,
   dispose: dispose$f,
   refresh: refresh$4,
   setTime
@@ -5158,7 +5154,7 @@ const stopTracking$1 = ($Target, pointerId, handlePointerMove, handlePointerUp)
   // TODO use pointerlost event instead
   $Target.removeEventListener(PointerUp, handlePointerUp);
 };
-const create$t = (pointerDown, pointerMove, pointerUp) => {
+const create$r = (pointerDown, pointerMove, pointerUp) => {
   const shared = (fn, event) => {
     const message = fn(event);
     if (!message || message.length === 0) {
@@ -5191,7 +5187,7 @@ const create$t = (pointerDown, pointerMove, pointerUp) => {
 };
 
 const handleOffset = 20;
-const handleSliderPointerDown = create$t(event => {
+const handleSliderPointerDown = create$r(event => {
   const {
     clientX,
     clientY
@@ -5262,18 +5258,18 @@ const handleInput$5 = event => {
   } = target;
   handleInput$6(uid, value);
 };
-const handleFocus$7 = event => {
+const handleFocus$6 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 
 const ViewletDebugConsoleEvents = {
   __proto__: null,
-  handleFocus: handleFocus$7,
+  handleFocus: handleFocus$6,
   handleInput: handleInput$5
 };
 
-const create$s = () => {
+const create$q = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet DebugConsole';
   return {
@@ -5289,7 +5285,7 @@ const setDom$9 = (state, dom) => {
 
 const ViewletDebugConsole = {
   __proto__: null,
-  create: create$s,
+  create: create$q,
   setDom: setDom$9
 };
 
@@ -5306,14 +5302,14 @@ const handleKeyDown$3 = event => {
   } = event;
   handleKeyDown$4(uid, key, altKey, ctrlKey, shiftKey, metaKey);
 };
-const handleBlur$7 = event => {
+const handleBlur$6 = event => {
   const uid = fromEvent(event);
-  handleBlur$8(uid);
+  handleBlur$7(uid);
 };
 
 const ViewletDefineKeyBindingEvents = {
   __proto__: null,
-  handleBlur: handleBlur$7,
+  handleBlur: handleBlur$6,
   handleKeyDown: handleKeyDown$3
 };
 
@@ -5326,7 +5322,7 @@ const setValue$2 = (state, value) => {
   const $Input = $Viewlet.querySelector('input');
   $Input.value = value;
 };
-const focus$d = state => {
+const focus$c = state => {
   const {
     $Viewlet
   } = state;
@@ -5337,7 +5333,7 @@ const focus$d = state => {
 const ViewletDefineKeyBinding = {
   __proto__: null,
   Events: ViewletDefineKeyBindingEvents,
-  focus: focus$d,
+  focus: focus$c,
   setValue: setValue$2
 };
 
@@ -5350,17 +5346,17 @@ const setMaskImage = ($Element, icon) => {
   }
 };
 
-const create$r = icon => {
+const create$p = icon => {
   const $Icon = document.createElement('div');
   $Icon.className = 'MaskIcon';
   setMaskImage($Icon, icon);
-  $Icon.role = None$2;
+  $Icon.role = None$1;
   return $Icon;
 };
 
 const create$Button = (label, icon) => {
   // TODO icon div might not be needed (unnecessary html element)
-  const $Icon = create$r(icon);
+  const $Icon = create$p(icon);
   const $Button = document.createElement('button');
   $Button.className = 'IconButton';
   $Button.title = label;
@@ -5381,7 +5377,7 @@ const handleClick$4 = event => {
   handleClick$5(index);
 };
 
-const create$q = () => {
+const create$o = () => {
   const $DialogTitle = document.createElement('h2');
   $DialogTitle.id = 'DialogTitle';
   const $DialogCloseButton = create$Button('Close', 'Close');
@@ -5462,7 +5458,7 @@ const setErrorStack = (state, errorStack) => {
 
 const ViewletDialog = {
   __proto__: null,
-  create: create$q,
+  create: create$o,
   postAppend,
   setButtons,
   setCodeFrame,
@@ -5471,13 +5467,13 @@ const ViewletDialog = {
   setHeader
 };
 
-const handleWheel$3 = event => {
+const handleWheel$2 = event => {
   const {
     deltaMode,
     deltaY
   } = event;
   const uid = fromEvent(event);
-  handleWheel$4(uid, deltaMode, deltaY);
+  handleWheel$3(uid, deltaMode, deltaY);
 };
 
 const handleScrollBarPointerDown$2 = event => {
@@ -5487,10 +5483,10 @@ const handleScrollBarPointerDown$2 = event => {
 const ViewletDiffEditorEvents = {
   __proto__: null,
   handleScrollBarPointerDown: handleScrollBarPointerDown$2,
-  handleWheel: handleWheel$3
+  handleWheel: handleWheel$2
 };
 
-const setScrollBar$2 = (state, scrollBarY, scrollBarHeight, scrollBarThumbClass) => {
+const setScrollBar = (state, scrollBarY, scrollBarHeight, scrollBarThumbClass) => {
   const {
     $ScrollBarThumb
   } = state;
@@ -5503,7 +5499,7 @@ const setScrollBar$2 = (state, scrollBarY, scrollBarHeight, scrollBarThumbClass)
 const ViewletDiffEditor = {
   __proto__: null,
   Events: ViewletDiffEditorEvents,
-  setScrollBar: setScrollBar$2
+  setScrollBar
 };
 
 const handleClickAt$2 = event => {
@@ -5516,7 +5512,7 @@ const handleClickAt$2 = event => {
 const handleLoad$3 = event => {
   return ['handleLoad'];
 };
-const handleContextMenu$5 = event => {
+const handleContextMenu$4 = event => {
   preventDefault(event);
   const {
     button,
@@ -5525,7 +5521,7 @@ const handleContextMenu$5 = event => {
   } = event;
   return ['handleContextMenu', button, clientX, clientY];
 };
-const handleSashCornerPointerDown = create$t(event => {
+const handleSashCornerPointerDown = create$r(event => {
   const {
     clientX,
     clientY
@@ -5549,14 +5545,14 @@ const returnValue$6 = true;
 const ViewletE2eTestEvents = {
   __proto__: null,
   handleClickAt: handleClickAt$2,
-  handleContextMenu: handleContextMenu$5,
+  handleContextMenu: handleContextMenu$4,
   handleLoad: handleLoad$3,
   handleSashCornerPointerDown,
   returnValue: returnValue$6
 };
 
 // TODO could use browser view when running in electron
-const setIframe$2 = (state, src, sandbox = []) => {
+const setIframe$3 = (state, src, sandbox = []) => {
   if (!src) {
     return;
   }
@@ -5599,7 +5595,7 @@ const setPreviewTransform = (state, transform) => {
 const ViewletE2eTest = {
   __proto__: null,
   Events: ViewletE2eTestEvents,
-  setIframe: setIframe$2,
+  setIframe: setIframe$3,
   setPreviewTransform
 };
 
@@ -5613,7 +5609,7 @@ const handleClickAt$1 = event => {
 const handleLoad$2 = event => {
   return ['handleLoad'];
 };
-const handleContextMenu$4 = event => {
+const handleContextMenu$3 = event => {
   preventDefault(event);
   const {
     button,
@@ -5627,7 +5623,7 @@ const returnValue$5 = true;
 const ViewletE2eTestsEvents = {
   __proto__: null,
   handleClickAt: handleClickAt$1,
-  handleContextMenu: handleContextMenu$4,
+  handleContextMenu: handleContextMenu$3,
   handleLoad: handleLoad$2,
   returnValue: returnValue$5
 };
@@ -5647,7 +5643,7 @@ const handleLoad$1 = event => {
   console.log(event.target.src);
   send('E2eTests.handleLoad');
 };
-const setIframe$1 = (state, src, sandbox = []) => {
+const setIframe$2 = (state, src, sandbox = []) => {
   if (!src) {
     return;
   }
@@ -5688,7 +5684,7 @@ const setPort$2 = (state, portId, origin) => {
 const ViewletE2eTests = {
   __proto__: null,
   Events: ViewletE2eTestsEvents,
-  setIframe: setIframe$1,
+  setIframe: setIframe$2,
   setPort: setPort$2
 };
 
@@ -5699,15 +5695,15 @@ const handleFocusIn$3 = event => {
   const uid = fromEvent(event);
   handleFocusIn$4(uid);
 };
-const handleBlur$6 = event => {
+const handleBlur$5 = event => {
   preventDefault(event);
   const uid = fromEvent(event);
-  handleBlur$8(uid);
+  handleBlur$7(uid);
 };
 
 const ViewletEditorCodeGeneratorEvents = {
   __proto__: null,
-  handleBlur: handleBlur$6,
+  handleBlur: handleBlur$5,
   handleFocusIn: handleFocusIn$3
 };
 
@@ -5727,7 +5723,7 @@ const appendWidget$5 = state => {
 const dispose$e = state => {
   remove$1(state.$Viewlet);
 };
-const focus$c = (state, key, source) => {
+const focus$b = (state, key, source) => {
   if (!key) {
     return;
   }
@@ -5751,7 +5747,7 @@ const ViewletEditorCodeGenerator = {
   Events: ViewletEditorCodeGeneratorEvents,
   appendWidget: appendWidget$5,
   dispose: dispose$e,
-  focus: focus$c,
+  focus: focus$b,
   setBounds: setBounds$9
 };
 
@@ -5812,7 +5808,7 @@ const handleScrollBarPointerDown$1 = event => {
   const uid = fromEvent(event);
   handleScrollBarClick(uid, clientY);
 };
-const handleWheel$2 = event => {
+const handleWheel$1 = event => {
   const {
     deltaMode,
     deltaY
@@ -5825,7 +5821,7 @@ const Small$1 = 1;
 const Normal$1 = 2;
 const Large$1 = 3;
 
-const None$1 = '';
+const None = '';
 const Small = 'Small';
 const Normal = 'Normal';
 const Large = 'Large';
@@ -5839,7 +5835,7 @@ const getClassName = size => {
     case Small$1:
       return Small;
     default:
-      return None$1;
+      return None;
   }
 };
 
@@ -5868,7 +5864,7 @@ const setNegativeMargin = (state, negativeMargin) => {
   setTop($ListItems, negativeMargin);
 };
 
-const create$p = () => {
+const create$n = () => {
   const $ListItems = document.createElement('div');
   $ListItems.className = 'ListItems';
   $ListItems.role = ListBox;
@@ -5898,7 +5894,7 @@ const attachEvents$5 = state => {
     $ScrollBar,
     $Viewlet
   } = state;
-  $Viewlet.addEventListener(Wheel, handleWheel$2, Passive);
+  $Viewlet.addEventListener(Wheel, handleWheel$1, Passive);
   attachEvents$6($ListItems, {
     [MouseDown]: handleMousedown
   });
@@ -5935,7 +5931,7 @@ const showLoading = (state, x, y) => {
   $Viewlet.append($Loading);
   append$1($Viewlet);
 };
-const handleError$6 = (state, error) => {
+const handleError$5 = (state, error) => {
   const {
     $Viewlet
   } = state;
@@ -5952,14 +5948,14 @@ const setBounds$8 = (state, x, y, width, height) => {
 const ViewletEditorCompletion = {
   __proto__: null,
   attachEvents: attachEvents$5,
-  create: create$p,
+  create: create$n,
   dispose: dispose$d,
-  handleError: handleError$6,
+  handleError: handleError$5,
   setBounds: setBounds$8,
   setContentHeight,
   setDom: setDom$8,
   setNegativeMargin,
-  setScrollBar: setScrollBar$2,
+  setScrollBar,
   setSize,
   showLoading
 };
@@ -5975,7 +5971,7 @@ const ViewletEditorCompletionDetailsEvents = {
   returnValue: returnValue$4
 };
 
-const create$o = () => {
+const create$m = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorCompletionDetails';
   $Viewlet.id = 'CompletionsDetails';
@@ -6016,7 +6012,7 @@ const ViewletEditorCompletionDetails = {
   Events: ViewletEditorCompletionDetailsEvents,
   appendWidget: appendWidget$4,
   attachEvents: attachEvents$4,
-  create: create$o,
+  create: create$m,
   dispose: dispose$c,
   setBounds: setBounds$7,
   setDom: setDom$7
@@ -6035,7 +6031,7 @@ const ViewletEditorCompletionDetails = {
 
 // TODO aria alert
 
-const create$n = () => {
+const create$l = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorError';
   return {
@@ -6057,13 +6053,13 @@ const setBounds$6 = (state, x, y, width, height) => {
 
 const ViewletEditorError = {
   __proto__: null,
-  create: create$n,
+  create: create$l,
   setBounds: setBounds$6,
   setDom: setDom$6
 };
 
 const returnValue$3 = true;
-const handleSashPointerDown$2 = create$t(event => {
+const handleSashPointerDown$2 = create$r(event => {
   const {
     clientX,
     clientY
@@ -6118,7 +6114,6 @@ const ViewletEditorHover = {
 };
 
 const LeftClick = 0;
-const RightClick = 2;
 
 /**
  * @param {PointerEvent} event
@@ -6182,7 +6177,7 @@ const handlePointerDown$1 = event => {
 /**
  * @param {WheelEvent} event
  */
-const handleWheel$1 = event => {
+const handleWheel = event => {
   const {
     clientX,
     clientY,
@@ -6190,14 +6185,14 @@ const handleWheel$1 = event => {
     deltaY
   } = event;
   const uid = fromEvent(event);
-  handleWheel$4(uid, clientX, clientY, deltaX, deltaY);
+  handleWheel$3(uid, clientX, clientY, deltaX, deltaY);
 };
 
 /**
  *
  * @param {MouseEvent} event
  */
-const handleContextMenu$3 = event => {
+const handleContextMenu$2 = event => {
   preventDefault(event);
   const {
     button,
@@ -6205,18 +6200,18 @@ const handleContextMenu$3 = event => {
     clientY
   } = event;
   const uid = fromEvent(event);
-  handleContextMenu$6(uid, button, clientX, clientY);
+  handleContextMenu$5(uid, button, clientX, clientY);
 };
-const handleError$5 = event => {
+const handleError$4 = event => {
   const uid = fromEvent(event);
   handleImageError(uid);
 };
-const handleFocus$6 = event => {
+const handleFocus$5 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 
-const create$m = () => {
+const create$k = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorImage';
   return {
@@ -6228,13 +6223,13 @@ const attachEvents$3 = state => {
     $Viewlet
   } = state;
   attachEvents$6($Viewlet, {
-    [ContextMenu]: handleContextMenu$3,
-    [FocusIn]: handleFocus$6,
+    [ContextMenu]: handleContextMenu$2,
+    [FocusIn]: handleFocus$5,
     [PointerDown]: handlePointerDown$1,
     [PointerUp]: handlePointerUp
   });
-  $Viewlet.addEventListener(Error$2, handleError$5, Capture);
-  $Viewlet.addEventListener(Wheel, handleWheel$1, Passive);
+  $Viewlet.addEventListener(Error$2, handleError$4, Capture);
+  $Viewlet.addEventListener(Wheel, handleWheel, Passive);
 };
 const setTransform = (state, transform) => {
   const {
@@ -6259,13 +6254,13 @@ const setDom$4 = (state, dom) => {
 const ViewletEditorImage = {
   __proto__: null,
   attachEvents: attachEvents$3,
-  create: create$m,
+  create: create$k,
   setDom: setDom$4,
   setDragging,
   setTransform
 };
 
-const create$l = () => {
+const create$j = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorText';
   $Viewlet.textContent = 'loading...';
@@ -6282,7 +6277,7 @@ const refresh$3 = (state, context) => {
 
 const ViewletEditorPlainText = {
   __proto__: null,
-  create: create$l,
+  create: create$j,
   dispose: dispose$b,
   refresh: refresh$3
 };
@@ -6323,584 +6318,6 @@ const ViewletEditorSourceActions = {
   setBounds: setBounds$4
 };
 
-const List = 'list';
-
-const Editor = 'editor';
-const SideBar$1 = 'Side Bar';
-const StatusBar$1 = 'Status Bar';
-
-const getEventListenerOptions = eventName => {
-  switch (eventName) {
-    case Wheel:
-      return {
-        passive: true
-      };
-    default:
-      return undefined;
-  }
-};
-
-const cache = new Map();
-const getWrappedListener = (listener, returnValue) => {
-  if (!returnValue) {
-    return listener;
-  }
-  if (!cache.has(listener)) {
-    const wrapped = event => {
-      const uid = fromEvent(event);
-      const result = listener(event);
-      // TODO check for empty array by value
-      if (result.length === 0) {
-        return;
-      }
-      send('Viewlet.executeViewletCommand', uid, ...result);
-    };
-    nameAnonymousFunction(wrapped, listener.name);
-    cache.set(listener, wrapped);
-  }
-  return cache.get(listener);
-};
-
-const attachEvent = ($Node, eventMap, key, value) => {
-  const listener = eventMap[value];
-  if (!listener) {
-    console.warn('listener not found', value);
-    return;
-  }
-  const options = getEventListenerOptions(key);
-  const wrapped = getWrappedListener(listener, eventMap.returnValue);
-  $Node.addEventListener(key, wrapped, options);
-};
-
-const attachEventsFunctional = ($Node, eventMap) => {
-  for (const [key] of Object.entries(eventMap)) {
-    if (key === 'returnValue') {
-      continue;
-    }
-    attachEvent($Node, eventMap, key, key);
-  }
-};
-
-const Text$1 = 'text';
-
-const getText = clipBoardData => {
-  return clipBoardData.getData(Text$1);
-};
-
-const detachEvent = ($Node, key, listener) => {
-  const wrapped = getWrappedListener(listener, true);
-  $Node.removeEventListener(key, wrapped);
-};
-
-const None = 0;
-const Ctrl = 1;
-const Alt = 2;
-
-const getModifierKey = event => {
-  if (event.ctrlKey) {
-    return Ctrl;
-  }
-  if (event.altKey) {
-    return Alt;
-  }
-  return None;
-};
-
-// TODO so many things in this file
-
-
-// TODO go back to edit mode after pressing escape so screenreaders can navigate https://stackoverflow.com/questions/53909477/how-to-handle-tabbing-for-accessibility-with-a-textarea-that-uses-the-tab-button
-
-// TODO tree shake out mobile support when targeting electron -> less code -> less event listeners -> less memory -> less cpu
-
-const handleFocus$5 = event => {
-  return ['handleFocus'];
-};
-const handleMouseMove = event => {
-  const {
-    altKey,
-    clientX,
-    clientY
-  } = event;
-  return ['handleMouseMove', clientX, clientY, altKey];
-};
-const handleBlur$5 = event => {
-  // needed for save on blur
-  // also needed to close completions on blur
-  return ['handleBlur'];
-};
-
-/**
- *
- * @param {InputEvent} event
- */
-const handleBeforeInput = event => {
-  preventDefault(event);
-  const {
-    data,
-    inputType
-  } = event;
-  return ['handleBeforeInput', inputType, data];
-};
-
-// TODO composition should be better supported,
-// for example
-// - gedit draws a line below the composed text
-// - codemirror 6 also draws that line
-// - codemirror 5 also draws that line
-// - vscode does not draw a line, but displays characters during composition
-
-const handleCompositionStart = event => {
-  const {
-    data
-  } = event;
-  return ['compositionStart', data];
-};
-const handleCompositionUpdate = event => {
-  const {
-    data
-  } = event;
-  return ['compositionUpdate', data];
-};
-const handleCompositionEnd = event => {
-  const {
-    data
-  } = event;
-  return ['compositionEnd', data];
-};
-const handleCut = event => {
-  preventDefault(event);
-  return ['cut'];
-};
-const isRightClick = event => {
-  return event.button === RightClick;
-};
-const handleEditorPointerMove = event => {
-  const {
-    altKey,
-    clientX,
-    clientY
-  } = event;
-  // TODO if/else should be in renderer worker
-  if (altKey) {
-    return ['moveRectangleSelectionPx', clientX, clientY];
-  }
-  return ['moveSelectionPx', clientX, clientY];
-};
-const handleEditorLostPointerCapture = event => {
-  const {
-    target
-  } = event;
-  detachEvent(target, PointerMove, handleEditorPointerMove);
-  detachEvent(target, LostPointerCapture, handleEditorLostPointerCapture);
-  return ['handlePointerCaptureLost'];
-};
-
-/**
- *
- * @param {PointerEvent} event
- */
-const handleEditorPointerDown = event => {
-  const {
-    pointerId,
-    target
-  } = event;
-  target.setPointerCapture(pointerId);
-  attachEventsFunctional(target, {
-    [LostPointerCapture]: handleEditorLostPointerCapture,
-    [PointerMove]: handleEditorPointerMove,
-    returnValue: true
-  });
-  return [];
-};
-const handleMouseDown$1 = event => {
-  if (isRightClick(event)) {
-    return [];
-  }
-  preventDefault(event);
-  const {
-    clientX,
-    clientY,
-    detail
-  } = event;
-  const modifier = getModifierKey(event);
-  return ['handleMouseDown', modifier, clientX, clientY, detail];
-};
-
-// TODO figure out whether it is possible to register hover provider without mousemove
-// mousemove handler is called very often and could slow down editor / drain battery
-
-/**
- *
- * @param {WheelEvent} event
- */
-const handleWheel = event => {
-  const {
-    deltaMode,
-    deltaX,
-    deltaY
-  } = event;
-  // event.preventDefault()
-  // const state = EditorHelper.getStateFromEvent(event)
-  // TODO send editor id
-  return ['setDelta', deltaMode, deltaX, deltaY];
-};
-const handlePaste = event => {
-  preventDefault(event);
-  const {
-    clipboardData
-  } = event;
-  const text = getText(clipboardData);
-  return ['paste', text];
-};
-const handleScrollBarVerticalPointerDown = create$t(event => {
-  const {
-    clientY
-  } = event;
-  return ['handleScrollBarVerticalPointerDown', clientY];
-}, event => {
-  const {
-    clientY
-  } = event;
-  return ['handleScrollBarVerticalMove', clientY];
-}, () => {
-  return [];
-});
-
-/**
- *
- * @param {PointerEvent} event
- */
-const handleScrollBarThumbHorizontalPointerMove = event => {
-  const {
-    clientX
-  } = event;
-  return ['handleScrollBarHorizontalMove', clientX];
-};
-
-/**
- *
- * @param {PointerEvent} event
- */
-const handleScrollBarHorizontalPointerUp = event => {
-  const {
-    pointerId,
-    target
-  } = event;
-  stopTracking(target, pointerId, handleScrollBarThumbHorizontalPointerMove, handleScrollBarHorizontalPointerUp);
-  return [];
-};
-
-/**
- *
- * @param {PointerEvent} event
- */
-const handleScrollBarHorizontalPointerDown = event => {
-  const {
-    clientX,
-    pointerId,
-    target
-  } = event;
-  startTracking(target, pointerId, handleScrollBarThumbHorizontalPointerMove, handleScrollBarHorizontalPointerUp);
-  return ['handleScrollBarHorizontalPointerDown', clientX];
-};
-const handleScrollBarContextMenu = event => {
-  preventDefault(event);
-  stopPropagation(event);
-};
-const handleContextMenu$2 = event => {
-  preventDefault(event);
-  const {
-    button,
-    clientX,
-    clientY
-  } = event;
-  return ['handleContextMenu', button, clientX, clientY];
-};
-
-const setCursors = (state, dom) => {
-  object(state);
-  array(dom);
-  const {
-    $LayerCursor
-  } = state;
-  renderInto($LayerCursor, dom);
-};
-
-const setDecorationsDom$2 = (state, decorations) => {
-  const {
-    $LayerDiagnostics
-  } = state;
-  renderInto($LayerDiagnostics, decorations);
-};
-
-const setPosition$1 = (state, scrollBarY, scrollBarHeight) => {
-  const {
-    $ScrollBarThumbVertical
-  } = state;
-  $ScrollBarThumbVertical.style.translate = scrollBarY;
-  $ScrollBarThumbVertical.style.height = scrollBarHeight;
-};
-const setScrollBarHorizontal$2 = (state, scrollBarX, scrollBarWidth, deltaX) => {
-  const {
-    $ScrollBarThumbHorizontal
-  } = state;
-  setXAndWidth($ScrollBarThumbHorizontal, scrollBarX, scrollBarWidth);
-};
-
-const setSelections$2 = (state, dom) => {
-  const {
-    $LayerSelections
-  } = state;
-  renderInto($LayerSelections, dom);
-};
-
-const setLineInfos = (state, dom) => {
-  object(state);
-  array(dom);
-  const {
-    $LayerText
-  } = state;
-  renderInto($LayerText, dom);
-};
-
-// TODO so many things in this file
-
-
-// TODO go back to edit mode after pressing escape so screenreaders can navigate https://stackoverflow.com/questions/53909477/how-to-handle-tabbing-for-accessibility-with-a-textarea-that-uses-the-tab-button
-
-// TODO tree shake out mobile support when targeting electron -> less code -> less event listeners -> less memory -> less cpu
-
-// TODO all create functions should have no arguments
-// and be split into two parts
-// 1. create -> only create dom elements
-// 2. render -> fill elements with attributes and data
-// that way all dom nodes can be recycled
-const create$k = () => {
-  const $EditorInput = document.createElement('textarea');
-  $EditorInput.className = 'EditorInput';
-  $EditorInput.ariaAutoComplete = List;
-  $EditorInput.ariaRoleDescription = Editor;
-  $EditorInput.ariaMultiLine = True;
-  $EditorInput.setAttribute('autocomplete', 'off');
-  $EditorInput.setAttribute('autocapitalize', 'off');
-  $EditorInput.setAttribute('autocorrect', 'off');
-  $EditorInput.setAttribute('wrap', 'off');
-  $EditorInput.setAttribute('spellcheck', False);
-  $EditorInput.role = TextBox;
-  // TODO where to best put listeners (side effects)
-  attachEventsFunctional($EditorInput, {
-    [BeforeInput]: handleBeforeInput,
-    [Blur]: handleBlur$5,
-    [CompositionEnd]: handleCompositionEnd,
-    [CompositionStart]: handleCompositionStart,
-    [CompositionUpdate]: handleCompositionUpdate,
-    [Cut]: handleCut,
-    [Focus]: handleFocus$5,
-    [Paste]: handlePaste,
-    returnValue: true
-  });
-  $EditorInput.name = 'editor';
-  const $LayerCursor = document.createElement('div');
-  $LayerCursor.className = 'LayerCursor';
-  const $LayerText = document.createElement('div');
-  $LayerText.className = 'EditorRows';
-  const $LayerGutter = document.createElement('div');
-  $LayerGutter.className = 'Gutter';
-  attachEventsFunctional($LayerText, {
-    [MouseDown]: handleMouseDown$1,
-    [PointerDown]: handleEditorPointerDown,
-    returnValue: true
-  });
-  const $ScrollBarThumbVertical = document.createElement('div');
-  $ScrollBarThumbVertical.className = 'ScrollBarThumb ScrollBarThumbVertical';
-
-  // TODO only create $ScrollBarDiagnostics lazily when there are actually diagnostics
-  const $ScrollBarDiagnostics = document.createElement('div');
-  $ScrollBarDiagnostics.className = 'EditorScrollBarDiagnostics';
-  const $ScrollBarVertical = document.createElement('div');
-  $ScrollBarVertical.className = 'ScrollBar ScrollBarVertical';
-  attachEventsFunctional($ScrollBarVertical, {
-    [ContextMenu]: handleScrollBarContextMenu,
-    [PointerDown]: handleScrollBarVerticalPointerDown,
-    returnValue: true
-  });
-  $ScrollBarVertical.append($ScrollBarThumbVertical);
-  const $ScrollBarThumbHorizontal = document.createElement('div');
-  $ScrollBarThumbHorizontal.className = 'ScrollBarThumb ScrollBarThumbHorizontal';
-  const $ScrollBarHorizontal = document.createElement('div');
-  $ScrollBarHorizontal.className = 'ScrollBar ScrollBarHorizontal';
-  $ScrollBarHorizontal.append($ScrollBarThumbHorizontal);
-  attachEventsFunctional($ScrollBarHorizontal, {
-    [PointerDown]: handleScrollBarHorizontalPointerDown,
-    returnValue: true
-  });
-
-  // $EditorRows.addEventListener('mousemove', handleMouseMove, { passive: true })
-
-  // TODO function should be hoisted (maybe -> one listener for all editors (definitely))
-  // only problem is $EditorInput closure
-
-  // TODO when mousedown on completions -> this shouldn't be called
-
-  const $LayerSelections = document.createElement('div');
-  $LayerSelections.className = 'Selections';
-
-  // TODO maybe use css grid to position layers on top of each other
-  // TODO maybe merge layerDiagnostics with LayerSelections
-  // TODO maybe this should be more generic, e.g. LayerDecorations
-  // where decoration = {top,left, width, height, type/className}
-  const $LayerDiagnostics = document.createElement('div');
-  $LayerDiagnostics.className = 'LayerDiagnostics';
-  const $EditorLayers = document.createElement('div');
-  $EditorLayers.className = 'EditorLayers';
-  $EditorLayers.append($LayerSelections, $LayerText, $LayerCursor, $LayerDiagnostics);
-  const $EditorContent = document.createElement('div');
-  $EditorContent.className = 'EditorContent';
-  $EditorContent.append($EditorInput, $EditorLayers, $ScrollBarDiagnostics, $ScrollBarVertical, $ScrollBarHorizontal);
-  $EditorContent.addEventListener('mousemove', handleMouseMove, Passive);
-  const $Editor = document.createElement('div');
-  $Editor.className = 'Viewlet Editor';
-  $Editor.role = Code;
-  $Editor.append($LayerGutter, $EditorContent);
-  attachEventsFunctional($Editor, {
-    [ContextMenu]: handleContextMenu$2,
-    [Wheel]: handleWheel,
-    returnValue: true
-  });
-  return {
-    $Editor,
-    $EditorInput,
-    $EditorLayers,
-    $LayerCursor,
-    $LayerDiagnostics,
-    $LayerGutter,
-    $LayerSelections,
-    $LayerText,
-    $ScrollBarDiagnostics,
-    $ScrollBarThumbHorizontal,
-    $ScrollBarThumbVertical,
-    $Viewlet: $Editor,
-    shouldIgnoreSelectionChange: false
-  };
-};
-const setText$2 = (state, dom) => {
-  setLineInfos(state, dom);
-};
-const setIncrementalEdits$1 = (state, incrementalEdits) => {
-  const {
-    $LayerText
-  } = state;
-  for (const incrementalEdit of incrementalEdits) {
-    const {
-      columnIndex,
-      rowIndex,
-      text
-    } = incrementalEdit;
-    const $Row = $LayerText.children[rowIndex];
-    const $Column = $Row.children[columnIndex];
-    if ($Column.firstChild) {
-      $Column.firstChild.nodeValue = text;
-    } else {
-      $Column.textContent = text;
-    }
-  }
-};
-const setScrollBar$1 = (state, scrollBarY, scrollBarHeight) => {
-  setPosition$1(state, scrollBarY, scrollBarHeight);
-};
-const setScrollBarHorizontal$1 = setScrollBarHorizontal$2;
-const renderGutter$1 = (state, dom) => {
-  const {
-    $LayerGutter
-  } = state;
-  renderInto($LayerGutter, dom);
-};
-const setSelections$1 = (state, cursorInfos, selectionInfos) => {
-  array(cursorInfos);
-  array(selectionInfos);
-  setCursors(state, cursorInfos);
-  setSelections$2(state, selectionInfos);
-};
-const setFocused$2 = async (state, isFocused) => {
-  const {
-    $EditorInput
-  } = state;
-  let tries = 0;
-  while (!$EditorInput.isConnected && tries++ < 1000) {
-    await new Promise(resolve => {
-      requestAnimationFrame(resolve);
-    });
-  }
-  if (!$EditorInput.isConnected) {
-    warn$1('unmounted editor cannot be focused');
-  }
-  if (isFocused) {
-    $EditorInput.focus();
-  }
-};
-const setDecorationsDom$1 = (state, decorations) => {
-  setDecorationsDom$2(state, decorations);
-};
-
-const create$j = create$k;
-const setText$1 = setText$2;
-const setSelections = setSelections$1;
-const setIncrementalEdits = setIncrementalEdits$1;
-const handleError$4 = (state, error) => {
-  state.$Viewlet.textContent = error;
-};
-const setScrollBar = setScrollBar$1;
-const renderGutter = renderGutter$1;
-const setScrollBarHorizontal = setScrollBarHorizontal$1;
-const highlightAsLink = (state, relativeY, tokenIndex) => {
-  const $Row = state.$LayerText.children[relativeY];
-  if (!$Row) {
-    info('no row found');
-    return;
-  }
-  const $Token = $Row.children[tokenIndex + 1];
-  $Token.classList.add('EditorGoToDefinitionLink');
-};
-const showOverlayMessage = (state, x, y, content) => {
-  const $OverLayMessage = document.createElement('div');
-  $OverLayMessage.className = 'EditorOverlayMessage';
-  $OverLayMessage.style.position = 'fixed';
-  $OverLayMessage.textContent = content;
-  setXAndY($OverLayMessage, x, y);
-  append$1($OverLayMessage);
-};
-const hideOverlayMessage = state => {
-  // TODO pass id of the overlay message and remove widget by id
-  for (const $Widget of state$6.widgetSet) {
-    // @ts-expect-error
-    if ($Widget.className === 'EditorOverlayMessage') {
-      remove$1($Widget);
-    }
-  }
-};
-const setFocused$1 = setFocused$2;
-const focus$b = setFocused$2;
-const setDecorationsDom = setDecorationsDom$1;
-
-const ViewletEditorText = {
-  __proto__: null,
-  create: create$j,
-  focus: focus$b,
-  handleError: handleError$4,
-  hideOverlayMessage,
-  highlightAsLink,
-  renderGutter,
-  setDecorationsDom,
-  setFocused: setFocused$1,
-  setIncrementalEdits,
-  setScrollBar,
-  setScrollBarHorizontal,
-  setSelections,
-  setText: setText$1,
-  showOverlayMessage
-};
-
 const create$i = () => {
   const $Viewlet = document.createElement('div');
   $Viewlet.className = 'Viewlet EditorTextError';
@@ -7002,6 +6419,66 @@ const ViewletError = {
   setMessage: setMessage$1
 };
 
+const commandMap$1 = {};
+
+const ViewletExtensionViewEvents = {
+  __proto__: null,
+  commandMap: commandMap$1
+};
+
+const setIframeCredentialless = ($Iframe, credentialless) => {
+  if (credentialless) {
+    // @ts-ignore
+    $Iframe.credentialless = credentialless;
+  }
+};
+
+const setIframeCsp = ($Iframe, csp) => {
+  if (csp) {
+    // @ts-ignore
+    $Iframe.csp = csp;
+  }
+};
+
+const setIframeSandBox = ($Iframe, sandbox) => {
+  if (sandbox.length === 0) {
+    return;
+  }
+  $Iframe.sandbox.add(...sandbox);
+};
+
+const setIframeSrc = ($Iframe, src, srcDoc = '') => {
+  if (src) {
+    $Iframe.src = src;
+  } else if (srcDoc) {
+    $Iframe.srcdoc = srcDoc;
+  }
+};
+
+const setIframe$1 = (state, src, sandbox = [], srcDoc = '', csp = '', credentialless = true, title = '') => {
+  if (!src && !srcDoc) {
+    return;
+  }
+  const {
+    $Viewlet
+  } = state;
+  $Viewlet.textContent = '';
+  const $Iframe = document.createElement('iframe');
+  $Iframe.className = 'ExtensionViewIframe';
+  $Iframe.title = title;
+  setIframeCredentialless($Iframe, credentialless);
+  setIframeCsp($Iframe, csp);
+  setIframeSandBox($Iframe, sandbox);
+  setIframeSrc($Iframe, src, srcDoc);
+  $Viewlet.append($Iframe);
+};
+
+const ViewletExtensionView = {
+  __proto__: null,
+  Events: ViewletExtensionViewEvents,
+  setIframe: setIframe$1
+};
+
 const handleInput$4 = event => {
   const {
     target
@@ -7227,13 +6704,13 @@ const handleScrollBarPointerDown = event => {
 const ViewletInlineDiffEditorEvents = {
   __proto__: null,
   handleScrollBarPointerDown,
-  handleWheel: handleWheel$3
+  handleWheel: handleWheel$2
 };
 
 const ViewletInlineDiffEditor = {
   __proto__: null,
   Events: ViewletInlineDiffEditorEvents,
-  setScrollBar: setScrollBar$2
+  setScrollBar
 };
 
 const handleResizerPointerMove = event => {
@@ -7314,7 +6791,7 @@ const ViewletKeyBindings = {
   __proto__: null,
   Events: Events$2,
   setColumnWidths,
-  setScrollBar: setScrollBar$2,
+  setScrollBar,
   setSize,
   setValue
 };
@@ -7349,7 +6826,7 @@ const getKeyBindingIdentifier = event => {
   } = event;
   const modifierControl = ctrlKey ? CtrlCmd : 0;
   const modifierShift = shiftKey ? Shift : 0;
-  const modifierAlt = altKey ? Alt$1 : 0;
+  const modifierAlt = altKey ? Alt : 0;
   const normalizedKey = normalizeKey(key, code);
   const keyCode = getKeyCode(normalizedKey);
   const identifier = modifierControl | modifierShift | modifierAlt | keyCode;
@@ -7521,10 +6998,10 @@ const EditorError = 'EditorError';
 const EditorHover = 'EditorHover';
 const EditorImage = 'EditorImage';
 const EditorPlainText = 'EditorPlainText';
-const EditorText = 'Editor';
 const EditorWidgetError = 'EditorWidgetError';
 const Empty = 'Empty';
 const Error$1 = 'Error';
+const ExtensionView = 'ExtensionView';
 const FindWidget = 'FindWidget';
 const ImagePreview = 'ImagePreview';
 const InlineDiffEditor = 'InlineDiffEditor';
@@ -7536,10 +7013,10 @@ const Panel = 'Panel';
 const References = 'References';
 const RunAndDebug = 'Run And Debug';
 const ScreenCapture = 'ScreenCapture';
-const SideBar = 'SideBar';
+const SideBar$1 = 'SideBar';
 const SimpleBrowser = 'SimpleBrowser';
 const SourceControl = 'Source Control';
-const StatusBar = 'StatusBar';
+const StatusBar$1 = 'StatusBar';
 const Storage = 'Storage';
 const Terminal = 'Terminal';
 const Terminal2 = 'Terminal2';
@@ -7593,7 +7070,7 @@ const handleError$2 = (state, error) => {
 };
 const focus$7 = state => {
   object(state);
-  focus$e(state.$ViewletOutputContent);
+  focus$d(state.$ViewletOutputContent);
   send('Focus.setFocus', FocusOutput);
 };
 
@@ -7831,6 +7308,9 @@ const ViewletScreenCapture = {
   setScreenCapture
 };
 
+const SideBar = 'Side Bar';
+const StatusBar = 'Status Bar';
+
 const handleClickAction = (target, uid) => {
   const index = getNodeIndex(target);
   if (target && target.dataset && target.dataset.command) {
@@ -7857,7 +7337,7 @@ const create$8 = () => {
   $Viewlet.id = 'SideBar';
   $Viewlet.className = 'Viewlet SideBar';
   $Viewlet.role = Complementary;
-  $Viewlet.ariaRoleDescription = SideBar$1;
+  $Viewlet.ariaRoleDescription = SideBar;
   $Viewlet.append($SideBarTitleArea);
   return {
     $Actions: undefined,
@@ -8007,12 +7487,12 @@ const handleContextMenu$1 = event => {
     clientY
   } = event;
   const uid = fromEvent(event);
-  handleContextMenu$6(uid, button, clientX, clientY);
+  handleContextMenu$5(uid, button, clientX, clientY);
 };
 
 const handleFocus = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 const getButtonIndex = $Node => {
   let index = -1;
@@ -8093,7 +7573,7 @@ const ViewletSourceControlEvents = {
   handleInput: handleInput$1,
   handleMouseOut,
   handleMouseOver,
-  handleWheel: handleWheel$3
+  handleWheel: handleWheel$2
 };
 
 const focus$4 = state => {
@@ -8129,7 +7609,7 @@ const create$7 = () => {
   $Viewlet.className = 'Viewlet StatusBar';
   $Viewlet.tabIndex = 0;
   $Viewlet.role = Status;
-  $Viewlet.ariaRoleDescription = StatusBar$1;
+  $Viewlet.ariaRoleDescription = StatusBar;
   $Viewlet.ariaLive = 'off'; // see https://github.com/microsoft/vscode/issues/94677
   $Viewlet.addEventListener('click', handleClick$2);
   return {
@@ -8296,7 +7776,7 @@ const handleMenuClick = event => {
 };
 const handleFocusIn$1 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 
 const ViewletTitleBarMenuBarEvents = {
@@ -8682,35 +8162,6 @@ const ViewletWebViewEvents = {
   returnValue
 };
 
-const setIframeCredentialless = ($Iframe, credentialless) => {
-  if (credentialless) {
-    // @ts-ignore
-    $Iframe.credentialless = credentialless;
-  }
-};
-
-const setIframeCsp = ($Iframe, csp) => {
-  if (csp) {
-    // @ts-ignore
-    $Iframe.csp = csp;
-  }
-};
-
-const setIframeSandBox = ($Iframe, sandbox) => {
-  if (sandbox.length === 0) {
-    return;
-  }
-  $Iframe.sandbox.add(...sandbox);
-};
-
-const setIframeSrc = ($Iframe, src, srcDoc = '') => {
-  if (src) {
-    $Iframe.src = src;
-  } else if (srcDoc) {
-    $Iframe.srcdoc = srcDoc;
-  }
-};
-
 // TODO could use browser view when running in electron
 const setIframe = (state, src, sandbox = [], srcDoc = '', csp = '', credentialless = true) => {
   if (!src && !srcDoc) {
@@ -8790,12 +8241,12 @@ const moduleLoaders = {
   [EditorImage]: () => ViewletEditorImage,
   [EditorPlainText]: () => ViewletEditorPlainText,
   [EditorSourceActions]: () => ViewletEditorSourceActions,
-  [EditorText]: () => ViewletEditorText,
   [EditorTextError]: () => ViewletEditorTextError,
   [EditorWidgetError]: () => ViewletEditorWidgetError,
   [Empty]: () => ViewletEmpty,
   [EmptyEditor]: () => ViewletEmptyEditor,
   [Error$1]: () => ViewletError,
+  [ExtensionView]: () => ViewletExtensionView,
   [FindWidget]: () => ViewletFindWidget,
   [ImagePreview]: () => ImagePreview$1,
   [Implementations]: () => ViewletImplementations,
@@ -8807,10 +8258,10 @@ const moduleLoaders = {
   [References]: () => ViewletReferences,
   [RunAndDebug]: () => ViewletRunAndDebug,
   [ScreenCapture]: () => ViewletScreenCapture,
-  [SideBar]: () => ViewletSideBar,
+  [SideBar$1]: () => ViewletSideBar,
   [SimpleBrowser]: () => ViewletSimpleBrowser,
   [SourceControl]: () => ViewletSourceControl,
-  [StatusBar]: () => ViewletStatusBar,
+  [StatusBar$1]: () => ViewletStatusBar,
   [Storage]: () => ViewletStorage,
   [Terminal]: () => Promise.resolve().then(function () { return ViewletTerminal; }),
   [Terminal2]: () => Promise.resolve().then(function () { return ViewletTerminal2; }),
@@ -9517,7 +8968,7 @@ const getFilePathElectron = async file => {
 };
 
 const handleMessagePort = async port => {
-  await create$B({
+  await create$z({
     commandMap: {},
     messagePort: port
   });
@@ -9624,7 +9075,7 @@ const commandMap = {
   'GetFilePathElectron.getFilePathElectron': getFilePathElectron,
   'HandleMessagePort.handleMessagePort': handleMessagePort,
   'InitData.getInitData': getInitData,
-  'IpcParent.create': create$y,
+  'IpcParent.create': create$w,
   'KeyBindings.setIdentifiers': setIdentifiers,
   'Layout.getBounds': getBounds,
   'Location.getHref': getHref,
@@ -9639,10 +9090,10 @@ const commandMap = {
   'Menu.showControlled': showControlled,
   'Menu.showMenu': showMenu,
   'Meta.setThemeColor': setThemeColor,
-  'Notification.create': create$x,
+  'Notification.create': create$v,
   'Notification.createWithOptions': createWithOptions,
   'Notification.dispose': dispose$h,
-  'OffscreenCanvas.create': create$w,
+  'OffscreenCanvas.create': create$u,
   'OffscreenCanvas.create2': create2,
   'Open.openUrl': openUrl,
   'Open.redirectToUrl': redirectToUrl,
@@ -9704,7 +9155,7 @@ const getConfiguredEditorWorkerUrl = () => {
 const editorWorkerUrl = getConfiguredEditorWorkerUrl() || `${assetDir}/packages/renderer-worker/node_modules/@lvce-editor/editor-worker/dist/editorWorkerMain.js`;
 
 const launchEditorWorker = async port => {
-  const ipc = await create$y({
+  const ipc = await create$w({
     method: ModuleWorkerWithMessagePort,
     name: 'Editor Worker',
     port,
@@ -9732,7 +9183,7 @@ const extensionHostWorkerUrl = getConfiguredExtensionHostWorkerUrl() || `${asset
 
 const launchExtensionHostWorker = async port => {
   const name = isElectron ? 'Extension Host (Electron)' : 'Extension Host';
-  const ipc = await create$y({
+  const ipc = await create$w({
     method: ModuleWorkerWithMessagePort,
     name,
     port,
@@ -9760,7 +9211,7 @@ const getConfiguredSyntaxHighlightingWorkerUrl = () => {
 const syntaxHighlightingWorkerUrl = getConfiguredSyntaxHighlightingWorkerUrl() || `${assetDir}/packages/renderer-worker/node_modules/@lvce-editor/syntax-highlighting-worker/dist/syntaxHighlightingWorkerMain.js`;
 
 const launchSyntaxHighlightingWorker = async port => {
-  const ipc = await create$y({
+  const ipc = await create$w({
     method: ModuleWorkerWithMessagePort,
     name: 'Syntax Highlighting Worker',
     port,
@@ -10231,11 +9682,11 @@ const create$2 = ({
 
 const handleBlur = event => {
   const uid = fromEvent(event);
-  handleBlur$8(uid);
+  handleBlur$7(uid);
 };
 const handleMouseDown = (event, ...args) => {
   const uid = fromEvent(event);
-  handleMouseDown$2(uid, ...args);
+  handleMouseDown$1(uid, ...args);
 };
 const handleKeyDown = (event, ...args) => {
   const uid = fromEvent(event);