@dao42/d42paas-front 0.5.25 → 0.5.33

package/dist/DaoPaaS.es.js

@@ -14706,7 +14706,7 @@ const daopaasDB = openDB("daopaas", 1, {
     db2.createObjectStore("media");
   }
 });
-async function setReplaySource(val, status2) {
+async function setReplaySource(val) {
   const {
     CRDTInfo,
     appStatus,
@@ -14904,6 +14904,7 @@ const persist = (config, baseOptions) => (set, get2, api2) => {
   return stateFromStorage || configResult;
 };
 const oTStore = create$2((set) => ({
+  asyncType: void 0,
   appStatus: "code",
   setAppStatus: (arg) => set(() => ({
     appStatus: arg
@@ -15021,6 +15022,9 @@ const oTStore = create$2((set) => ({
   })),
   setQueryObject: (arg) => set(() => ({
     queryObject: arg
+  })),
+  setAsyncType: (arg) => set(() => ({
+    asyncType: arg
   }))
 }));
 const userStore = create$2(persist((set) => ({
@@ -15032,6 +15036,22 @@ const userStore = create$2(persist((set) => ({
   name: "userInfo",
   getStorage: () => localStorage
 }));
+const shadowUserStore = create$2(persist((set) => ({
+  shadowUser: {},
+  switchShadowUser: (arg) => set(() => {
+    if (arg.uuid) {
+      alert(`\u5DF2\u5207\u6362\u81F3\u3010${arg.username}\u3011\u89C6\u89D2`);
+    } else {
+      alert(`\u5DF2\u9000\u51FA\u8DDF\u968F\u89C6\u89D2`);
+    }
+    return {
+      shadowUser: arg
+    };
+  })
+}), {
+  name: "shadowUser",
+  getStorage: () => localStorage
+}));
 const userListStore = create$2(persist((set) => ({
   userList: [],
   setUserList: (arg) => set(() => ({
@@ -15044,9 +15064,11 @@ const userListStore = create$2(persist((set) => ({
       if (typeof indexedDB === "undefined") {
         return null;
       }
-      return (await daopaasDB).getAll(name) || null;
+      const response = await (await daopaasDB).getAll("users");
+      return JSON.stringify(response[0]) || null;
     },
     setItem: async (name, value) => {
+      console.log(name);
       (await daopaasDB).put("users", JSON.parse(value).state[name], "userList");
     },
     removeItem: async () => {
@@ -27231,6 +27253,7 @@ const PlaygroundInit = (arg) => {
       switchDoc,
       setSenders,
       setCRDTInfo,
+      setAsyncType,
       setServerAck,
       setCustomAck,
       switchDocTree,
@@ -27244,6 +27267,7 @@ const PlaygroundInit = (arg) => {
       setAppStatus,
       setGlobalData
     } = oTStore.getState();
+    shadowUserStore.getState();
     window.clearCache = () => {
       localStorage.clear();
       indexedDB.deleteDatabase("daopaas").onsuccess = () => {
@@ -27255,7 +27279,7 @@ const PlaygroundInit = (arg) => {
       ticket
     }));
     io.on("connect", () => {
-      io.emit("checkSign", ticket);
+      setAsyncType(void 0);
       setInterval(() => {
         io.emit("heartbeat", "\u{1F497}");
       }, heartbeatTime);
@@ -27308,26 +27332,30 @@ const PlaygroundInit = (arg) => {
       setDockerStatus(data || "STOP");
     });
     io.on("fileContent", async (d2) => {
+      var _a2, _b2, _c2, _d3;
       const _d2 = JSON.parse(d2);
       setCRDTInfo(_d2);
+      setAsyncType("file");
       setReplaySource(_d2);
-      if (IsMe(_d2 == null ? void 0 : _d2.userInfo) && !!_d2.file) {
+      if (shadowUserStore.getState().shadowUser.uuid || IsMe(_d2 == null ? void 0 : _d2.userInfo) && _d2.file) {
         switchDoc(_d2.file);
-        (await daopaasDB).put("files", _d2.file.value, _d2.file.path);
+        (await daopaasDB).put("files", (_a2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _a2.value, (_b2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _b2.path);
         if (!await getLocalReplayFile(_d2.file.path)) {
-          setLocalReplayFile(_d2.file.path, _d2.file.value);
+          setLocalReplayFile((_c2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _c2.path, (_d3 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _d3.value);
         }
       }
     });
     io.on("terminal", (d2) => {
       const _d2 = JSON.parse(d2);
       setCRDTInfo(_d2);
+      setAsyncType("terminal");
       setReplaySource(_d2);
     });
     io.on("editFile", (d2) => {
       const _d2 = JSON.parse(d2);
       setFromServer(true);
       setCRDTInfo(_d2);
+      setAsyncType("editor");
       setReplaySource(_d2);
     });
     io.on("saveFile", (d2) => {
@@ -27336,11 +27364,25 @@ const PlaygroundInit = (arg) => {
     io.on("customAck", (d2) => {
       const _d2 = JSON.parse(d2);
       setCRDTInfo(_d2);
+      setAsyncType("editor");
       setReplaySource(_d2);
       setCustomAck();
     });
+    io.on("extraSync", (d2) => {
+      const _d2 = JSON.parse(d2);
+      switch (_d2.extend.type) {
+        case "editor-scroll":
+          setCRDTInfo(_d2);
+          setAsyncType("editor");
+          setCustomAck();
+          break;
+        default:
+          return;
+      }
+    });
     io.on("serverAck", (d2) => {
       const _d2 = JSON.parse(d2);
+      setAsyncType("editor");
       setReplaySource(_d2);
       setServerAck();
     });
@@ -27356,12 +27398,14 @@ const PlaygroundInit = (arg) => {
     io.on("console", (d2) => {
       const _d2 = JSON.parse(d2);
       setCRDTInfo(_d2);
+      setAsyncType("console");
       setReplaySource(_d2);
     });
     io.on("mediaRecord", (d2) => {
       const _d2 = JSON.parse(d2);
       setLocalMedia(_d2.timestamp, _d2);
       setCRDTInfo(_d2);
+      setAsyncType("media");
       setReplaySource(_d2);
     });
     io.on("disconnect", (reason) => {
@@ -29527,43 +29571,16 @@ class DaoPaaS {
     __publicField(this, "playgroundId");
     __publicField(this, "userId");
     __publicField(this, "tenantId");
+    __publicField(this, "username");
     __publicField(this, "userInfo", {});
     __publicField(this, "io");
-    const {
-      setSocket,
-      socket: socket2
-    } = useOT.getState();
     this.ticket = ticket;
     this.playgroundId = playgroundId;
     this.userId = userId;
     this.tenantId = tenantId;
+    this.username = username ? username : "";
     sessionStorage.setItem("playgroundId", playgroundId);
-    fetch("https://develop.1024paas.com/jssdk/ticket", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        ticket: this.ticket
-      })
-    }).then((response) => {
-      return response.json();
-    }).then((data) => {
-      this.io = new sockerIO({
-        ticket,
-        playgroundId,
-        userId,
-        username,
-        tenantId,
-        ioPath: `wss://${data.data}`
-      });
-      setSocket(this.io);
-      this.init({
-        ticket,
-        playgroundId,
-        userId
-      });
-    });
+    this.init();
   }
   get otstore() {
     return oTStore.getState();
@@ -29571,21 +29588,37 @@ class DaoPaaS {
   get playgroundStatus() {
     return this.otstore.playgroundStatus;
   }
-  async init(args) {
-    window.onerror = (message) => {
-      if (/dError/.test(message)) {
-        Toast.message({
-          type: "error",
-          content: message.replace("Uncaught dError:", ""),
-          placement: "bottomEnd"
-        });
-      }
-    };
-    reactDom.exports.unstable_batchedUpdates(() => {
+  async init() {
+    const {
+      setSocket,
+      socket: socket2
+    } = useOT.getState();
+    reactDom.exports.unstable_batchedUpdates(async () => {
       const {
         setUserInfo,
         userInfo
       } = userStore.getState();
+      const args = {
+        ticket: this.ticket,
+        playgroundId: this.playgroundId,
+        userId: this.userId,
+        username: this.username,
+        tenantId: this.tenantId
+      };
+      const response = await fetch("https://develop.1024paas.com/jssdk/ticket", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          ticket: this.ticket
+        })
+      });
+      const data = await response.json();
+      this.io = new sockerIO(__spreadProps(__spreadValues({}, args), {
+        ioPath: `wss://${data.data}`
+      }));
+      setSocket(this.io);
       if (!args.userId)
         throw "\u7F3A\u5C11userId";
       if (!args.playgroundId)
@@ -29600,6 +29633,15 @@ class DaoPaaS {
         io: this.io
       }));
     });
+    window.onerror = (message) => {
+      if (/dError/.test(message)) {
+        Toast.message({
+          type: "error",
+          content: message.replace("Uncaught dError:", ""),
+          placement: "bottomEnd"
+        });
+      }
+    };
   }
   clearIDB() {
   }
@@ -31647,13 +31689,13 @@ var Tree = react.exports.forwardRef(function(props, ref) {
   }
   return react.exports.createElement(TreeContext.Provider, { value: treeContextProps }, react.exports.createElement(TreeActionsProvider, { ref }, react.exports.createElement(TreeManager, null)));
 });
-function IoClient(revision) {
+const IoClient = function(revision) {
   this.revision = revision;
   this.state = synchronized_;
   this.operation = [];
   this.receiveOperation = [];
   this.io = useOT.getState().socket;
-}
+};
 IoClient.prototype.setState = function(state) {
   this.state = state;
 };
@@ -31734,10 +31776,15 @@ AwaitingWithBuffer.prototype.applyClient = function(client2, operation) {
   return new AwaitingWithBuffer(this.outstanding, newBuffer);
 };
 AwaitingWithBuffer.prototype.applyServer = function(client2, operation) {
+  let pair2, pair1;
   const transform = operation.constructor.transform;
-  const pair1 = transform(this.outstanding, operation);
-  const pair2 = transform(this.buffer, pair1[1]);
-  client2.applyOperation(pair2[1]);
+  if (this.outstanding.baseLength === operation.baseLength) {
+    pair1 = transform(this.outstanding, operation);
+    if (this.buffer.baseLength === pair1[1].baseLength) {
+      pair2 = transform(this.buffer, pair1[1]);
+      client2.applyOperation(pair2[1]);
+    }
+  }
   return new AwaitingWithBuffer(pair1[0], pair2[0]);
 };
 AwaitingWithBuffer.prototype.serverAck = function(client2) {
@@ -31750,6 +31797,58 @@ AwaitingWithBuffer.prototype.transformSelection = function(selection2) {
 AwaitingWithBuffer.prototype.resend = function(client2) {
   client2.sendOperation(client2.revision, this.outstanding);
 };
+const FollowLayoutWrapper = newStyled.div`
+  width: 100%;
+  height: 100%;
+
+  border-width: 4px 3px;
+  border-radius: 2px;
+  position: relative;
+  border-color: ${(props) => props.user.color};
+  border-style: ${(props) => props.user.color && props.isPass ? "solid" : "none"};
+`;
+const FollowLayout = ({
+  className = "",
+  children,
+  name
+}) => {
+  const shadowUser = shadowUserStore((state) => state.shadowUser);
+  const asyncType = oTStore((state) => state.asyncType);
+  const setAsyncType = oTStore((state) => state.setAsyncType);
+  const {
+    switchShadowUser
+  } = shadowUserStore.getState();
+  return /* @__PURE__ */ jsx(FollowLayoutWrapper, {
+    user: shadowUser,
+    className: `${className}`,
+    isPass: asyncType === name && !IsMe(shadowUser),
+    onClick: () => {
+      if (!shadowUser.uuid)
+        return;
+      setAsyncType(void 0);
+      switchShadowUser({});
+    },
+    onKeyDown: () => {
+      if (!shadowUser.uuid)
+        return;
+      setAsyncType(void 0);
+      switchShadowUser({});
+    },
+    onScroll: () => {
+      if (!shadowUser.uuid)
+        return;
+      setAsyncType(void 0);
+      switchShadowUser({});
+    },
+    onWheel: () => {
+      if (!shadowUser.uuid)
+        return;
+      setAsyncType(void 0);
+      switchShadowUser({});
+    },
+    children
+  });
+};
 function addChildrenArray(children, parent2) {
   for (let i2 = 0; i2 < children.length; i2++) {
     if (children[i2].type === "DIRECTORY") {
@@ -32027,65 +32126,68 @@ const FileTree = ({
       }
     }
   }, [CRDTInfo]);
-  return /* @__PURE__ */ jsx("div", {
-    ref: treeRef,
-    style: {
-      height: "100%",
-      overflow: "auto"
-    },
-    children: /* @__PURE__ */ jsx(ControlledTreeEnvironment, {
-      canDragAndDrop: true,
-      items: treeData,
-      onFocusItem: (item) => setFocusedItem(item.index),
-      onExpandItem: (item) => {
-        onExpand(item.index);
-      },
-      onCollapseItem: (item) => {
-        onCollapse(item.index);
-      },
-      getItemTitle: (item) => item.data,
-      viewState: {
-        ["tree-1"]: {
-          focusedItem,
-          expandedItems,
-          selectedItems
-        }
-      },
-      onSelectItems: (items) => {
-        onSelect(items);
-        onCustomSelect == null ? void 0 : onCustomSelect(items);
+  return /* @__PURE__ */ jsx(FollowLayout, {
+    name: "file",
+    children: /* @__PURE__ */ jsx("div", {
+      ref: treeRef,
+      style: {
+        height: "100%",
+        overflow: "auto"
       },
-      renderItem: ({
-        title,
-        arrow,
-        depth,
-        context,
-        children
-      }) => {
-        return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
-          className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
-          children: [/* @__PURE__ */ jsxs("div", {
-            className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
-            style: {
-              paddingLeft: `${depth}0px`
-            },
-            children: [arrow, /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
-              className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
-              children: title
-            })), remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
-              className: "rct-tree-item-avatar rounded-full absolute border",
+      children: /* @__PURE__ */ jsx(ControlledTreeEnvironment, {
+        canDragAndDrop: true,
+        items: treeData,
+        onFocusItem: (item) => setFocusedItem(item.index),
+        onExpandItem: (item) => {
+          onExpand(item.index);
+        },
+        onCollapseItem: (item) => {
+          onCollapse(item.index);
+        },
+        getItemTitle: (item) => item.data,
+        viewState: {
+          ["tree-1"]: {
+            focusedItem,
+            expandedItems,
+            selectedItems
+          }
+        },
+        onSelectItems: (items) => {
+          onSelect(items);
+          onCustomSelect == null ? void 0 : onCustomSelect(items);
+        },
+        renderItem: ({
+          title,
+          arrow,
+          depth,
+          context,
+          children
+        }) => {
+          return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
+            className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
               style: {
-                borderColor: remoteUser.color,
-                backgroundImage: `url(${remoteUser.avatar})`
-              }
-            }, remoteUser.uuid))]
-          }), children]
-        }));
-      },
-      children: /* @__PURE__ */ jsx(Tree, {
-        treeId: "tree-1",
-        rootItem: "/",
-        treeLabel: "File Tree"
+                paddingLeft: `${depth}0px`
+              },
+              children: [arrow, /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
+                className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
+                children: title
+              })), remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
+                className: "rct-tree-item-avatar rounded-full absolute border",
+                style: {
+                  borderColor: remoteUser.color,
+                  backgroundImage: `url(${remoteUser.avatar})`
+                }
+              }, remoteUser.uuid))]
+            }), children]
+          }));
+        },
+        children: /* @__PURE__ */ jsx(Tree, {
+          treeId: "tree-1",
+          rootItem: "/",
+          treeLabel: "File Tree"
+        })
       })
     })
   });
@@ -56242,7 +56344,7 @@ function setARIAContainer(parent2) {
   statusContainer2 = createStatusContainer();
   parent2.appendChild(ariaContainer);
 }
-function alert(msg2) {
+function alert$1(msg2) {
   if (!ariaContainer) {
     return;
   }
@@ -56259,7 +56361,7 @@ function status(msg2) {
     return;
   }
   if (isMacintosh) {
-    alert(msg2);
+    alert$1(msg2);
   } else {
     if (statusContainer.textContent !== msg2) {
       clearNode(statusContainer2);
@@ -102882,7 +102984,7 @@ class TypeLabelController {
     if (focus.length > 0 && focus[0] === this.previouslyFocused) {
       const ariaLabel = (_a2 = this.list.options.accessibilityProvider) === null || _a2 === void 0 ? void 0 : _a2.getAriaLabel(this.list.element(focus[0]));
       if (ariaLabel) {
-        alert(ariaLabel);
+        alert$1(ariaLabel);
       }
     }
     this.previouslyFocused = -1;
@@ -111757,7 +111859,7 @@ class InputBox extends Widget {
     } else {
       alertText = localize("alertInfoMessage", "Info: {0}", this.message.content);
     }
-    alert(alertText);
+    alert$1(alertText);
     this.state = "open";
   }
   _hideMessage() {
@@ -116168,15 +116270,15 @@ function alertFormattingEdits(edits) {
   const { startLineNumber, endLineNumber } = range2;
   if (startLineNumber === endLineNumber) {
     if (edits.length === 1) {
-      alert(localize("hint11", "Made 1 formatting edit on line {0}", startLineNumber));
+      alert$1(localize("hint11", "Made 1 formatting edit on line {0}", startLineNumber));
     } else {
-      alert(localize("hintn1", "Made {0} formatting edits on line {1}", edits.length, startLineNumber));
+      alert$1(localize("hintn1", "Made {0} formatting edits on line {1}", edits.length, startLineNumber));
     }
   } else {
     if (edits.length === 1) {
-      alert(localize("hint1n", "Made 1 formatting edit between lines {0} and {1}", startLineNumber, endLineNumber));
+      alert$1(localize("hint1n", "Made 1 formatting edit between lines {0} and {1}", startLineNumber, endLineNumber));
     } else {
-      alert(localize("hintnn", "Made {0} formatting edits between lines {1} and {2}", edits.length, startLineNumber, endLineNumber));
+      alert$1(localize("hintnn", "Made {0} formatting edits between lines {1} and {2}", edits.length, startLineNumber, endLineNumber));
     }
   }
 }
@@ -118680,7 +118782,7 @@ let SelectionAnchorController = class SelectionAnchorController2 {
       }]);
       this.decorationId = newDecorationId[0];
       this.selectionAnchorSetContextKey.set(!!this.decorationId);
-      alert(localize("anchorSet", "Anchor set at {0}:{1}", position2.lineNumber, position2.column));
+      alert$1(localize("anchorSet", "Anchor set at {0}:{1}", position2.lineNumber, position2.column));
     }
   }
   goToSelectionAnchor() {
@@ -119811,7 +119913,7 @@ let MessageController = class MessageController2 {
     this._visible.reset();
   }
   showMessage(message, position2) {
-    alert(message);
+    alert$1(message);
     this._visible.set(true);
     this._messageWidget.clear();
     this._messageListeners.clear();
@@ -125037,7 +125139,7 @@ class SymbolNavigationAction extends EditorAction {
       if (!references || cts.token.isCancellationRequested) {
         return;
       }
-      alert(references.ariaMessage);
+      alert$1(references.ariaMessage);
       let altAction;
       if (references.referenceAt(model.uri, pos)) {
         const altActionId = this._getAlternativeCommand(editor2);
@@ -137373,7 +137475,7 @@ let SuggestController = class SuggestController2 {
   _alertCompletionItem(item) {
     if (isNonEmptyArray(item.completion.additionalTextEdits)) {
       let msg2 = localize("aria.alert.snippet", "Accepting '{0}' made {1} additional edits", item.textLabel, item.completion.additionalTextEdits.length);
-      alert(msg2);
+      alert$1(msg2);
     }
   }
   triggerSuggest(onlyFrom, auto) {
@@ -144153,7 +144255,7 @@ class FindWidget extends Widget {
       label = NLS_NO_RESULTS;
     }
     this._matchesCount.appendChild(document.createTextNode(label));
-    alert(this._getAriaLabel(label, this._state.currentMatch, this._state.searchString));
+    alert$1(this._getAriaLabel(label, this._state.currentMatch, this._state.searchString));
     MAX_MATCHES_COUNT_WIDTH = Math.max(MAX_MATCHES_COUNT_WIDTH, this._matchesCount.clientWidth);
   }
   _getAriaLabel(label, currentMatch, searchString) {
@@ -153058,7 +153160,7 @@ let ParameterHintsWidget = class ParameterHintsWidget2 extends Disposable {
         labelToAnnounce += typeof signature.documentation === "string" ? `, ${signature.documentation}` : `, ${signature.documentation.value}`;
       }
       if (this.announcedLabel !== labelToAnnounce) {
-        alert(localize("hint", "{0}, hint", labelToAnnounce));
+        alert$1(localize("hint", "{0}, hint", labelToAnnounce));
         this.announcedLabel = labelToAnnounce;
       }
     }
@@ -153670,7 +153772,7 @@ let RenameController = class RenameController2 {
           quotableLabel: localize("quotableLabel", "Renaming {0}", loc === null || loc === void 0 ? void 0 : loc.text)
         }).then((result) => {
           if (result.ariaSummary) {
-            alert(localize("aria", "Successfully renamed '{0}' to '{1}'. Summary: {2}", loc.text, inputFieldResult.newName, result.ariaSummary));
+            alert$1(localize("aria", "Successfully renamed '{0}' to '{1}'. Summary: {2}", loc.text, inputFieldResult.newName, result.ariaSummary));
           }
         }).catch((err) => {
           this._notificationService.error(localize("rename.failedApply", "Rename failed to apply edits"));
@@ -154156,9 +154258,9 @@ class ToggleTabFocusModeAction extends EditorAction {
     const newValue = !oldValue;
     TabFocus.setTabFocusMode(newValue);
     if (newValue) {
-      alert(localize("toggle.tabMovesFocus.on", "Pressing Tab will now move focus to the next focusable element"));
+      alert$1(localize("toggle.tabMovesFocus.on", "Pressing Tab will now move focus to the next focusable element"));
     } else {
-      alert(localize("toggle.tabMovesFocus.off", "Pressing Tab will now insert the tab character"));
+      alert$1(localize("toggle.tabMovesFocus.off", "Pressing Tab will now insert the tab character"));
     }
   }
 }
@@ -154554,7 +154656,7 @@ class WordHighlighter {
       const word = this._getWord();
       if (word) {
         const lineContent = this.editor.getModel().getLineContent(dest.startLineNumber);
-        alert(`${lineContent}, ${newIndex + 1} of ${highlights.length} for '${word.word}'`);
+        alert$1(`${lineContent}, ${newIndex + 1} of ${highlights.length} for '${word.word}'`);
       }
     } finally {
       this._ignorePositionChangeEvent = false;
@@ -154572,7 +154674,7 @@ class WordHighlighter {
       const word = this._getWord();
       if (word) {
         const lineContent = this.editor.getModel().getLineContent(dest.startLineNumber);
-        alert(`${lineContent}, ${newIndex + 1} of ${highlights.length} for '${word.word}'`);
+        alert$1(`${lineContent}, ${newIndex + 1} of ${highlights.length} for '${word.word}'`);
       }
     } finally {
       this._ignorePositionChangeEvent = false;
@@ -155518,7 +155620,7 @@ let AccessibilityHelpWidget = class AccessibilityHelpWidget2 extends Widget {
         return;
       }
       if (e2.equals(2048 | 35)) {
-        alert(AccessibilityHelpNLS.emergencyConfOn);
+        alert$1(AccessibilityHelpNLS.emergencyConfOn);
         this._editor.updateOptions({
           accessibilitySupport: "on"
         });
@@ -155529,7 +155631,7 @@ let AccessibilityHelpWidget = class AccessibilityHelpWidget2 extends Widget {
         e2.stopPropagation();
       }
       if (e2.equals(2048 | 38)) {
-        alert(AccessibilityHelpNLS.openingDocs);
+        alert$1(AccessibilityHelpNLS.openingDocs);
         let url2 = this._editor.getRawOptions().accessibilityHelpUrl;
         if (typeof url2 === "undefined") {
           url2 = "https://go.microsoft.com/fwlink/?linkid=852450";
@@ -157517,6 +157619,24 @@ class ToggleHighContrast extends EditorAction {
   }
 }
 registerEditorAction(ToggleHighContrast);
+var monaco = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  CancellationTokenSource,
+  Emitter,
+  KeyCode,
+  KeyMod,
+  Position: Position$4,
+  Range: Range$4,
+  Selection: Selection$2,
+  SelectionDirection,
+  MarkerSeverity,
+  MarkerTag,
+  Uri,
+  Token,
+  editor: editor$1,
+  languages
+});
 var lib$2 = {};
 var textOperation = { exports: {} };
 (function(module2) {
@@ -162761,8 +162881,8 @@ var DEFAULT = {
   startClosed: false,
   debug: false
 };
-(function() {
-  function ReconnectingWebSocket(url2, protocols, options) {
+var ReconnectingWebSocket = function() {
+  function ReconnectingWebSocket2(url2, protocols, options) {
     var _this = this;
     if (options === void 0) {
       options = {};
@@ -162844,63 +162964,63 @@ var DEFAULT = {
     }
     this._connect();
   }
-  Object.defineProperty(ReconnectingWebSocket, "CONNECTING", {
+  Object.defineProperty(ReconnectingWebSocket2, "CONNECTING", {
     get: function() {
       return 0;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket, "OPEN", {
+  Object.defineProperty(ReconnectingWebSocket2, "OPEN", {
     get: function() {
       return 1;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket, "CLOSING", {
+  Object.defineProperty(ReconnectingWebSocket2, "CLOSING", {
     get: function() {
       return 2;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket, "CLOSED", {
+  Object.defineProperty(ReconnectingWebSocket2, "CLOSED", {
     get: function() {
       return 3;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "CONNECTING", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "CONNECTING", {
     get: function() {
-      return ReconnectingWebSocket.CONNECTING;
+      return ReconnectingWebSocket2.CONNECTING;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "OPEN", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "OPEN", {
     get: function() {
-      return ReconnectingWebSocket.OPEN;
+      return ReconnectingWebSocket2.OPEN;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "CLOSING", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "CLOSING", {
     get: function() {
-      return ReconnectingWebSocket.CLOSING;
+      return ReconnectingWebSocket2.CLOSING;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "CLOSED", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "CLOSED", {
     get: function() {
-      return ReconnectingWebSocket.CLOSED;
+      return ReconnectingWebSocket2.CLOSED;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "binaryType", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "binaryType", {
     get: function() {
       return this._ws ? this._ws.binaryType : this._binaryType;
     },
@@ -162913,14 +163033,14 @@ var DEFAULT = {
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "retryCount", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "retryCount", {
     get: function() {
       return Math.max(this._retryCount, 0);
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "bufferedAmount", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "bufferedAmount", {
     get: function() {
       var bytes = this._messageQueue.reduce(function(acc, message) {
         if (typeof message === "string") {
@@ -162937,38 +163057,38 @@ var DEFAULT = {
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "extensions", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "extensions", {
     get: function() {
       return this._ws ? this._ws.extensions : "";
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "protocol", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "protocol", {
     get: function() {
       return this._ws ? this._ws.protocol : "";
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "readyState", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "readyState", {
     get: function() {
       if (this._ws) {
         return this._ws.readyState;
       }
-      return this._options.startClosed ? ReconnectingWebSocket.CLOSED : ReconnectingWebSocket.CONNECTING;
+      return this._options.startClosed ? ReconnectingWebSocket2.CLOSED : ReconnectingWebSocket2.CONNECTING;
     },
     enumerable: true,
     configurable: true
   });
-  Object.defineProperty(ReconnectingWebSocket.prototype, "url", {
+  Object.defineProperty(ReconnectingWebSocket2.prototype, "url", {
     get: function() {
       return this._ws ? this._ws.url : "";
     },
     enumerable: true,
     configurable: true
   });
-  ReconnectingWebSocket.prototype.close = function(code2, reason) {
+  ReconnectingWebSocket2.prototype.close = function(code2, reason) {
     if (code2 === void 0) {
       code2 = 1e3;
     }
@@ -162985,7 +163105,7 @@ var DEFAULT = {
     }
     this._ws.close(code2, reason);
   };
-  ReconnectingWebSocket.prototype.reconnect = function(code2, reason) {
+  ReconnectingWebSocket2.prototype.reconnect = function(code2, reason) {
     this._shouldReconnect = true;
     this._closeCalled = false;
     this._retryCount = -1;
@@ -162996,7 +163116,7 @@ var DEFAULT = {
       this._connect();
     }
   };
-  ReconnectingWebSocket.prototype.send = function(data) {
+  ReconnectingWebSocket2.prototype.send = function(data) {
     if (this._ws && this._ws.readyState === this.OPEN) {
       this._debug("send", data);
       this._ws.send(data);
@@ -163008,12 +163128,12 @@ var DEFAULT = {
       }
     }
   };
-  ReconnectingWebSocket.prototype.addEventListener = function(type, listener) {
+  ReconnectingWebSocket2.prototype.addEventListener = function(type, listener) {
     if (this._listeners[type]) {
       this._listeners[type].push(listener);
     }
   };
-  ReconnectingWebSocket.prototype.dispatchEvent = function(event) {
+  ReconnectingWebSocket2.prototype.dispatchEvent = function(event) {
     var e_1, _a2;
     var listeners2 = this._listeners[event.type];
     if (listeners2) {
@@ -163036,14 +163156,14 @@ var DEFAULT = {
     }
     return true;
   };
-  ReconnectingWebSocket.prototype.removeEventListener = function(type, listener) {
+  ReconnectingWebSocket2.prototype.removeEventListener = function(type, listener) {
     if (this._listeners[type]) {
       this._listeners[type] = this._listeners[type].filter(function(l2) {
         return l2 !== listener;
       });
     }
   };
-  ReconnectingWebSocket.prototype._debug = function() {
+  ReconnectingWebSocket2.prototype._debug = function() {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {
       args[_i] = arguments[_i];
@@ -163052,7 +163172,7 @@ var DEFAULT = {
       console.log.apply(console, __spread(["RWS>"], args));
     }
   };
-  ReconnectingWebSocket.prototype._getNextDelay = function() {
+  ReconnectingWebSocket2.prototype._getNextDelay = function() {
     var _a2 = this._options, _b2 = _a2.reconnectionDelayGrowFactor, reconnectionDelayGrowFactor = _b2 === void 0 ? DEFAULT.reconnectionDelayGrowFactor : _b2, _c2 = _a2.minReconnectionDelay, minReconnectionDelay = _c2 === void 0 ? DEFAULT.minReconnectionDelay : _c2, _d2 = _a2.maxReconnectionDelay, maxReconnectionDelay = _d2 === void 0 ? DEFAULT.maxReconnectionDelay : _d2;
     var delay = 0;
     if (this._retryCount > 0) {
@@ -163064,13 +163184,13 @@ var DEFAULT = {
     this._debug("next delay", delay);
     return delay;
   };
-  ReconnectingWebSocket.prototype._wait = function() {
+  ReconnectingWebSocket2.prototype._wait = function() {
     var _this = this;
     return new Promise(function(resolve2) {
       setTimeout(resolve2, _this._getNextDelay());
     });
   };
-  ReconnectingWebSocket.prototype._getNextUrl = function(urlProvider) {
+  ReconnectingWebSocket2.prototype._getNextUrl = function(urlProvider) {
     if (typeof urlProvider === "string") {
       return Promise.resolve(urlProvider);
     }
@@ -163085,7 +163205,7 @@ var DEFAULT = {
     }
     throw Error("Invalid URL");
   };
-  ReconnectingWebSocket.prototype._connect = function() {
+  ReconnectingWebSocket2.prototype._connect = function() {
     var _this = this;
     if (this._connectLock || !this._shouldReconnect) {
       return;
@@ -163118,11 +163238,11 @@ var DEFAULT = {
       }, connectionTimeout);
     });
   };
-  ReconnectingWebSocket.prototype._handleTimeout = function() {
+  ReconnectingWebSocket2.prototype._handleTimeout = function() {
     this._debug("timeout event");
     this._handleError(new ErrorEvent$1(Error("TIMEOUT"), this));
   };
-  ReconnectingWebSocket.prototype._disconnect = function(code2, reason) {
+  ReconnectingWebSocket2.prototype._disconnect = function(code2, reason) {
     if (code2 === void 0) {
       code2 = 1e3;
     }
@@ -163137,18 +163257,18 @@ var DEFAULT = {
     } catch (error2) {
     }
   };
-  ReconnectingWebSocket.prototype._acceptOpen = function() {
+  ReconnectingWebSocket2.prototype._acceptOpen = function() {
     this._debug("accept open");
     this._retryCount = 0;
   };
-  ReconnectingWebSocket.prototype._callEventListener = function(event, listener) {
+  ReconnectingWebSocket2.prototype._callEventListener = function(event, listener) {
     if ("handleEvent" in listener) {
       listener.handleEvent(event);
     } else {
       listener(event);
     }
   };
-  ReconnectingWebSocket.prototype._removeListeners = function() {
+  ReconnectingWebSocket2.prototype._removeListeners = function() {
     if (!this._ws) {
       return;
     }
@@ -163158,7 +163278,7 @@ var DEFAULT = {
     this._ws.removeEventListener("message", this._handleMessage);
     this._ws.removeEventListener("error", this._handleError);
   };
-  ReconnectingWebSocket.prototype._addListeners = function() {
+  ReconnectingWebSocket2.prototype._addListeners = function() {
     if (!this._ws) {
       return;
     }
@@ -163168,12 +163288,12 @@ var DEFAULT = {
     this._ws.addEventListener("message", this._handleMessage);
     this._ws.addEventListener("error", this._handleError);
   };
-  ReconnectingWebSocket.prototype._clearTimeouts = function() {
+  ReconnectingWebSocket2.prototype._clearTimeouts = function() {
     clearTimeout(this._connectTimeout);
     clearTimeout(this._uptimeTimeout);
   };
-  return ReconnectingWebSocket;
-})();
+  return ReconnectingWebSocket2;
+}();
 var lib = {};
 var disposable = {};
 var services = {};
@@ -174681,6 +174801,7 @@ const useValue = create$2((set) => ({
 }));
 let editor;
 const EditorLayout = newStyled.div`
+  width: 100%;
   .contentWidgets {
     visibility: hidden;
   }
@@ -174707,6 +174828,7 @@ const EditorLayout = newStyled.div`
       padding: 15px;
       color: #fff;
       font-size: 12px;
+      flex: 0 0 auto;
     }
 
     .active {
@@ -174716,7 +174838,6 @@ const EditorLayout = newStyled.div`
       border-right: 1px solid rgb(42 96 231); */
       /* background: red; */
     }
-
   }
 `;
 const ContentLayout = newStyled.div`
@@ -174726,7 +174847,10 @@ const ContentLayout = newStyled.div`
 `;
 const Editor = ({
   doc,
-  docType
+  docType,
+  containerStyle,
+  menuStyle,
+  editorStyle
 }) => {
   const divEl = react.exports.useRef(null);
   react.exports.useState(doc ? doc : "");
@@ -174799,17 +174923,43 @@ const Editor = ({
         setPosition(editor.getPosition());
         let keepString = 0;
         let rangeLengthamount = 0;
+        let rangeOffsetthamount = 0;
+        let preOffset = 0;
         const valuelength = editorValue.length - changes.reduce((change, nextChange, i2) => change - nextChange.rangeLength + nextChange.text.length, 0);
-        const operation = changes.sort((c1, c2) => c1.rangeOffset - c2.rangeOffset).map((change, i2) => {
-          rangeLengthamount += i2 === 0 ? 0 : change.rangeLength;
-          keepString += i2 === 0 ? 0 : change.text.length;
-          return new TextOperation().retain(i2 === 0 ? change.rangeOffset : change.rangeOffset - rangeLengthamount + keepString).delete(change.rangeLength).insert(change.text).retain(valuelength - change.rangeOffset - change.rangeLength);
-        }).reduce((a2, b2) => a2.compose(b2));
+        const operation = new TextOperation();
+        changes.sort((change1, change2) => change1.rangeOffset - change2.rangeOffset).forEach((change, index2, _array) => {
+          operation.retain(index2 === 0 ? change.rangeOffset : change.rangeOffset - preOffset).delete(change.rangeLength).insert(change.text);
+          if (index2 + 1 === _array.length) {
+            operation.retain(valuelength - change.rangeLength - change.rangeOffset);
+          }
+          preOffset = change.rangeOffset + change.rangeLength;
+          rangeLengthamount += change.rangeLength;
+          keepString += change.text.length;
+          rangeOffsetthamount += change.rangeOffset;
+        });
         client2.applyClient(operation);
       } else {
         setValue(changes[0].text);
       }
     });
+    editor.onDidScrollChange((evt) => {
+      var _a2, _b2;
+      const {
+        userInfo
+      } = userStore.getState();
+      const topPercent = evt.scrollTopChanged ? (evt.scrollTop / evt.scrollHeight).toFixed(2) : 1;
+      const leftPercent = evt.scrollLeftChanged ? (evt.scrollLeft / evt.scrollWidth).toFixed(2) : 1;
+      const crdt = {
+        timestamp: Date.now().toString(),
+        userInfo: lodash$2.exports.pick(userInfo, "uuid", "role"),
+        extend: {
+          type: "editor-scroll",
+          topPercent,
+          leftPercent
+        }
+      };
+      (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("extraSync", JSON.stringify(crdt));
+    });
     editor.createContextKey("save", true);
     editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, () => {
       var _a2, _b2;
@@ -174877,7 +175027,7 @@ const Editor = ({
       setLocalFile(doc2.path, file.value);
     }
   };
-  const lspServerInject = (lan, disable) => {
+  const lspServerInject = (_lan, disable) => {
     languages.register({
       id: "ruby",
       extensions: [".rb"],
@@ -174893,7 +175043,45 @@ const Editor = ({
       extensions: [".ts"],
       aliases: ["TypeScript", "ts", "TS", "typescript"]
     });
-    return;
+    if (disable)
+      return;
+    lib.MonacoServices.install(monaco);
+    const {
+      lspUrl,
+      ticket
+    } = oTStore.getState().dockerInfo;
+    if (!lspUrl)
+      return;
+    const webSocket = new ReconnectingWebSocket(`wss://${lspUrl}/${ticket}`, [], {
+      maxReconnectionDelay: 1e4,
+      minReconnectionDelay: 1e3,
+      reconnectionDelayGrowFactor: 1.3,
+      connectionTimeout: 1e4,
+      maxRetries: Infinity,
+      debug: false
+    });
+    lib$1.listen({
+      webSocket,
+      onConnection: (connection2) => {
+        const languageClient = new lib.MonacoLanguageClient({
+          name: "Language Client",
+          clientOptions: {
+            documentSelector: ["java", "ruby"],
+            errorHandler: {
+              error: () => lib.ErrorAction.Continue,
+              closed: () => lib.CloseAction.DoNotRestart
+            }
+          },
+          connectionProvider: {
+            get: (errorHandler2, closeHandler) => {
+              return Promise.resolve(lib.createConnection(connection2, errorHandler2, closeHandler));
+            }
+          }
+        });
+        const disposable2 = languageClient.start();
+        connection2.onClose(() => disposable2.dispose());
+      }
+    });
   };
   const switchModel = (model) => {
     const {
@@ -174934,13 +175122,14 @@ const Editor = ({
       });
       editor = editor$1.create(divEl.current, {
         theme: "vs-dark",
+        automaticLayout: true,
         glyphMargin: true,
         lightbulb: {
           enabled: true
         }
       });
-      lspServerInject(INIT_LANGUAGE, oTStore.getState().lspServerDisabled);
       editorEventBinder();
+      lspServerInject(INIT_LANGUAGE, oTStore.getState().lspServerDisabled);
       const editorService = editor._codeEditorService;
       const openEditorBase = editorService.openCodeEditor.bind(editorService);
       editorService.openCodeEditor = async (input, source, workspacePath) => {
@@ -174971,6 +175160,7 @@ const Editor = ({
     useValue.getState();
     if (!CRDTInfo.editor || CRDTInfo.editor.evtType !== "Editor")
       return;
+    console.log(CRDTInfo);
     if (editor && ((doc2 == null ? void 0 : doc2.path) === ((_a2 = CRDTInfo == null ? void 0 : CRDTInfo.file) == null ? void 0 : _a2.path) || ((_b2 = CRDTInfo == null ? void 0 : CRDTInfo.file) == null ? void 0 : _b2.path) === "singleFile")) {
       const server_operation = CRDTInfo.editor.operation;
       const CLIENT_OPERATION = receiveOperation(CRDTInfo.editor.revision, TextOperation.fromJSON(server_operation), (_c2 = CRDTInfo == null ? void 0 : CRDTInfo.file) == null ? void 0 : _c2.path);
@@ -174986,7 +175176,7 @@ const Editor = ({
           index2 += op;
         }
         if (TextOperation.isInsert(op)) {
-          const insert = model.getPositionAt(index2);
+          const insert = model == null ? void 0 : model.getPositionAt(index2);
           const originResult = {
             forceMoveMarkers: true,
             range: new Range$4(insert.lineNumber, insert.column, insert.lineNumber, insert.column),
@@ -174995,8 +175185,8 @@ const Editor = ({
           results.push(originResult);
         }
         if (TextOperation.isDelete(op)) {
-          const start = model.getPositionAt(index2);
-          const end = model.getPositionAt(index2 - op);
+          const start = model == null ? void 0 : model.getPositionAt(index2);
+          const end = model == null ? void 0 : model.getPositionAt(index2 - op);
           results.push({
             forceMoveMarkers: false,
             range: new Range$4(start.lineNumber, start.column, end.lineNumber, end.column),
@@ -175006,10 +175196,23 @@ const Editor = ({
         }
       });
       {
-        model.pushEditOperations([], results, null);
+        model == null ? void 0 : model.pushEditOperations([], results, null);
       }
     }
   }, [OTSTATE.CRDTInfo]);
+  react.exports.useEffect(() => {
+    var _a2;
+    const {
+      CRDTInfo
+    } = oTStore.getState();
+    const {
+      shadowUser
+    } = shadowUserStore.getState();
+    if (((_a2 = CRDTInfo == null ? void 0 : CRDTInfo.extend) == null ? void 0 : _a2.type) === "editor-scroll" && editor && shadowUser.uuid) {
+      editor.setScrollTop(editor.getScrollHeight() * Number(CRDTInfo.extend.topPercent));
+      editor.setScrollLeft(-(editor.getScrollWidth() * Number(CRDTInfo.extend.leftPercent)));
+    }
+  }, [OTSTATE.CRDTInfo.extend]);
   react.exports.useEffect(() => {
     var _a2, _b2;
     if (!editor)
@@ -175050,10 +175253,9 @@ const Editor = ({
           }));
         });
         setUsersDelta(usersDelta.map((deltaInfo) => {
-          var _a3;
           if (deltaInfo.uuid === CRDTInfo.userInfo.uuid) {
             return __spreadProps(__spreadValues({}, deltaInfo), {
-              delta: editor.deltaDecorations(deltaInfo.delta ? deltaInfo.delta : "", (_a3 = CRDTInfo == null ? void 0 : CRDTInfo.selection) == null ? void 0 : _a3.map((s2) => ({
+              delta: editor.deltaDecorations(deltaInfo.delta ? deltaInfo.delta : "", (CRDTInfo == null ? void 0 : CRDTInfo.selection).map((s2) => ({
                 range: new Range$4(s2[0], s2[1], s2[2], s2[3]),
                 options: {
                   isWholeLine: false,
@@ -175084,15 +175286,18 @@ const Editor = ({
     }));
   }, [OTSTATE.serverAck]);
   react.exports.useEffect(() => {
-    if (file) {
+    if ((file == null ? void 0 : file.value) === null)
+      return;
+    if ((file == null ? void 0 : file.path) && editor) {
       const egt = /\.(\w+$)/gim.exec(file.path);
       const {
         CRDTInfo,
         doc: doc2
       } = oTStore.getState();
-      if (!editor || !IsMe(CRDTInfo.userInfo))
-        return;
-      if (file.path && egt) {
+      const {
+        shadowUser
+      } = shadowUserStore.getState();
+      if (shadowUser.uuid || file.path && egt && IsMe(CRDTInfo.userInfo)) {
         updateLspOps({
           value: file.value,
           path: file.path,
@@ -175147,22 +175352,28 @@ const Editor = ({
       }
     });
   }, [USERLISTSTORE.userList, file == null ? void 0 : file.path]);
-  return /* @__PURE__ */ jsxs(EditorLayout, {
-    className: "editor-layout flex flex-col",
-    children: [FileTreeStack.length > 0 ? /* @__PURE__ */ jsx("ul", {
-      className: "bg-codezone-black stack-list flex flex-row items-center flex-shrink-0",
-      children: FileTreeStack.map((f2, index2) => /* @__PURE__ */ jsx("li", {
-        className: `flex flex-row justify-center items-center cursor-pointer ${f2.path === (file == null ? void 0 : file.path) ? "active" : ""}`,
-        onClick: () => {
-          switchModel(f2.model);
-        },
-        children: f2.label.substring(1)
-      }, index2))
-    }) : null, /* @__PURE__ */ jsx(ContentLayout, {
-      ref: divEl,
-      userList: userListStore.getState().userList,
-      className: "edito-content flex-1"
-    })]
+  return /* @__PURE__ */ jsx(FollowLayout, {
+    name: "editor",
+    children: /* @__PURE__ */ jsxs(EditorLayout, {
+      style: containerStyle,
+      className: "editor-layout flex flex-col",
+      children: [FileTreeStack.length > 0 ? /* @__PURE__ */ jsx("ul", {
+        style: menuStyle,
+        className: "bg-codezone-black stack-list flex flex-row items-center flex-shrink-0",
+        children: FileTreeStack.map((f2, index2) => /* @__PURE__ */ jsx("li", {
+          className: `flex flex-row justify-center items-center cursor-pointer flex-grow-0 flex-shrink-0 ${f2.path === (file == null ? void 0 : file.path) ? "active" : ""}`,
+          onClick: () => {
+            switchModel(f2.model);
+          },
+          children: f2.label.substring(1)
+        }, index2))
+      }) : null, /* @__PURE__ */ jsx(ContentLayout, {
+        ref: divEl,
+        userList: userListStore.getState().userList,
+        className: "edito-content flex-1",
+        style: editorStyle
+      })]
+    })
   });
 };
 var index$4 = /* @__PURE__ */ Object.freeze({
@@ -182263,7 +182474,7 @@ const XTerm = (_a2) => {
           }
           break;
       }
-      onKey(character2);
+      onKey == null ? void 0 : onKey(character2);
     });
   };
   const fitTerminal = () => {
@@ -182271,7 +182482,8 @@ const XTerm = (_a2) => {
       setTimeout(() => {
         xtermFitAddon.fit();
       }, 0);
-    } catch (_) {
+    } catch (err) {
+      throw err;
     }
   };
   react.exports.useEffect(() => {
@@ -182342,14 +182554,12 @@ const Console = (_c2) => {
     }
   }, [terminal]);
   react.exports.useEffect(() => {
+    var _a2;
+    if (!terminal)
+      return;
     const crdt = CRDTInfo.console;
-    if (terminal && crdt) {
-      if (crdt.doc.value === "^C") {
-        writeText(terminal, crdt.doc.value);
-        initTerminalText(terminal, "");
-        return;
-      }
-      writeText(terminal, crdt.doc.value || "");
+    if (crdt) {
+      writeText(terminal, ((_a2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _a2.value) || "");
     }
   }, [CRDTInfo.console]);
   react.exports.useEffect(() => {
@@ -182357,20 +182567,22 @@ const Console = (_c2) => {
       return;
     if (dockerStatus === "STOP") {
       setTimeout(() => {
-        initTerminalText(terminal, "\u5E94\u7528\u672A\u542F\u52A8\r\n");
+        writeText(terminal, "\r\n\u5E94\u7528\u672A\u542F\u52A8\r\n");
       }, 400);
     } else {
       initTerminalText(terminal, "");
     }
   }, [dockerStatus]);
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      height: "100%",
-      width: "100%"
-    },
-    children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
-      terminal
-    }, props))
+  return /* @__PURE__ */ jsx(FollowLayout, {
+    children: /* @__PURE__ */ jsx("div", {
+      style: {
+        height: "100%",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
+        terminal
+      }, props))
+    })
   });
 };
 var index$3 = /* @__PURE__ */ Object.freeze({
@@ -182463,28 +182675,32 @@ const OutputBrowser = (_e2) => {
   react.exports.useEffect(() => {
   }, [iframeRef]);
   const onEnterKey = (e2) => {
+    var _a2, _b2;
     if (e2.keyCode !== 13)
       return;
     const url22 = urlWithProtocol(e2.target.value);
     setIframeSrc(url22);
-    iframeRef.current.contentWindow.location.replace(url22);
+    (_b2 = (_a2 = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a2.contentWindow) == null ? void 0 : _b2.location.replace(url22);
   };
   const onRefresh = () => {
-    iframeRef.current.contentWindow.location.replace(iframeSrc);
+    var _a2, _b2;
+    (_b2 = (_a2 = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a2.contentWindow) == null ? void 0 : _b2.location.replace(iframeSrc);
   };
   const onOpenInNewTab = () => {
     window.open(iframeSrc);
   };
   react.exports.useEffect(() => {
+    var _a2, _b2;
     if (playgroundStatus === "EMPTY")
       return;
     if (playgroundStatus === "ACTIVE" && dockerStatus === "RUNNING") {
       if (iframeSrc !== "http://" && iframeSrc !== "https://") {
-        iframeRef.current.contentWindow.location.replace(iframeSrc);
+        (_b2 = (_a2 = iframeRef == null ? void 0 : iframeRef.current) == null ? void 0 : _a2.contentWindow) == null ? void 0 : _b2.location.replace(iframeSrc);
       }
     }
   }, [playgroundStatus, dockerStatus]);
-  return /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs(FollowLayout, {
+    name: "browser",
     children: [/* @__PURE__ */ jsxs(NavBar, {
       children: [/* @__PURE__ */ jsx("i", {
         className: "d42 text-xl reload cursor-pointer",
@@ -182578,13 +182794,18 @@ const TerminalComponent = (_g2) => {
         return;
       }
       writeText(terminal, ((_b2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _b2.value) || "");
-      const postUser = userListStore.getState().userList[(_c2 = CRDTInfo == null ? void 0 : CRDTInfo.userInfo) == null ? void 0 : _c2.uuid];
+      if (!CRDTInfo.userInfo.uuid)
+        return;
+      const postUser = userListStore.getState().userList.find(({
+        uuid: uuid2
+      }) => uuid2 === CRDTInfo.userInfo.uuid);
       if (postUser && !IsMe(CRDTInfo.userInfo)) {
-        const helperContainer = terminal._core._helperContainer;
+        const helperContainer = (_c2 = terminal == null ? void 0 : terminal._core) == null ? void 0 : _c2._helperContainer;
+        const childNode = helperContainer == null ? void 0 : helperContainer.firstChild;
         userLabel.innerText = postUser.name;
         userLabel.style.backgroundColor = postUser.color;
-        userLabel.style.top = helperContainer.firstChild.style.top;
-        userLabel.style.left = helperContainer.firstChild.style.left;
+        userLabel.style.top = childNode.style.top;
+        userLabel.style.left = childNode.style.left;
         helperContainer == null ? void 0 : helperContainer.appendChild(userLabel);
         terminal.setOption("theme", __spreadProps(__spreadValues({}, terminal.getOption("theme")), {
           cursor: postUser.color
@@ -182608,16 +182829,19 @@ const TerminalComponent = (_g2) => {
       }
     }
   }, [CRDTInfo.terminal]);
-  return /* @__PURE__ */ jsx("div", {
-    id: "terminal",
-    style: {
-      height: "100%",
-      width: "100%"
-    },
-    children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
-      terminal,
-      onKey
-    }, props))
+  return /* @__PURE__ */ jsx(FollowLayout, {
+    name: "terminal",
+    children: /* @__PURE__ */ jsx("div", {
+      id: "terminal",
+      style: {
+        height: "100%",
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(XTerm, __spreadValues({
+        terminal,
+        onKey
+      }, props))
+    })
   });
 };
 var index$1 = /* @__PURE__ */ Object.freeze({
@@ -182638,7 +182862,7 @@ const Tabs = (_i) => {
   return /* @__PURE__ */ jsx(Nav$1, __spreadProps(__spreadValues({}, props), {
     activeKey,
     onSelect,
-    children: tabItems.map((item) => /* @__PURE__ */ jsx(Nav$1.Item, {
+    children: tabItems == null ? void 0 : tabItems.map((item) => /* @__PURE__ */ jsx(Nav$1.Item, {
       eventKey: item.eventKey,
       children: item.itemName
     }, item.eventKey))
@@ -183126,13 +183350,13 @@ const ToolBar = (_q) => {
   }, [dStatus]);
   const onRun = () => {
     if (oTStore.getState().playgroundStatus === "ACTIVE") {
-      io.emit("run");
+      io == null ? void 0 : io.emit("run");
     } else if (oTStore.getState().playgroundStatus === "INACTIVE") {
-      io.emit("active");
+      io == null ? void 0 : io.emit("active");
     }
   };
   const onStop = () => {
-    io.emit("stop");
+    io == null ? void 0 : io.emit("stop");
   };
   const [netStatus, setNetStatus] = react.exports.useState("ONLINE");
   react.exports.useEffect(() => {
@@ -183151,10 +183375,6 @@ const ToolBar = (_q) => {
     }, 3e5);
   }, []);
   const getSpeedWithDownlink = () => {
-    const connection2 = window.navigator.connection;
-    if (connection2 && connection2.downlink) {
-      return connection2.downlink * 1024 / 8;
-    }
   };
   return /* @__PURE__ */ jsxs(ToolBarWrapper, {
     children: [/* @__PURE__ */ jsx(ButtonWrapper, __spreadProps(__spreadValues({
@@ -232591,6 +232811,7 @@ const Index = (props) => {
   };
   const isFolded = useIndexState.getState().isFolded;
   const playgroundInfo = oTStore((state) => state.playgroundInfo);
+  const dockerInfo = oTStore((state) => state.dockerInfo);
   const [active, setActive] = react.exports.useState("shell");
   const [url2, setUrl] = react.exports.useState(playgroundInfo.url);
   const {
@@ -232608,7 +232829,7 @@ const Index = (props) => {
     }
   }, [active]);
   react.exports.useEffect(() => {
-    props.replay && replay();
+    props.replay && props.replay();
   }, [props.replay]);
   react.exports.useEffect(() => {
     setUrl(playgroundInfo.url);
@@ -232629,7 +232850,7 @@ const Index = (props) => {
           children: [/* @__PURE__ */ jsx(SliderComponent, {}), /* @__PURE__ */ jsx(TreeComponent, {})]
         }), /* @__PURE__ */ jsx("section", {
           className: "bg-codezone-black rounded-sm mx-3.5 flex-1 flex flex-col",
-          children: playgroundInfo.dockerId ? /* @__PURE__ */ jsx(react.exports.Suspense, {
+          children: dockerInfo.dockerId ? /* @__PURE__ */ jsx(react.exports.Suspense, {
             fallback: /* @__PURE__ */ jsx(Skeleton, {
               count: 10
             }),
@@ -232701,8 +232922,8 @@ const HeaderComponent = () => {
               resizable=yes,
               width=500,
               height=500`);
-          minePage.addEventListener("load", () => {
-            minePage.close();
+          minePage == null ? void 0 : minePage.addEventListener("load", () => {
+            minePage == null ? void 0 : minePage.close();
           }, false);
         }
       }), /* @__PURE__ */ jsxs("div", {
@@ -232748,11 +232969,12 @@ const HeaderComponent = () => {
         }) : null, appStatus !== "replay" ? /* @__PURE__ */ jsx("button", {
           className: "replay-button self-center",
           onClick: () => {
+            var _a3, _b3;
             if (!globalData.isRecording) {
               oTStore.getState().setGlobalData({
                 isRecording: true
               });
-              useOT.getState().socket.emit("globalData", {
+              (_b3 = (_a3 = useOT.getState()) == null ? void 0 : _a3.socket) == null ? void 0 : _b3.emit("globalData", {
                 isRecording: true
               });
               return;
@@ -232762,10 +232984,11 @@ const HeaderComponent = () => {
         }) : null, globalData.isRecording ? /* @__PURE__ */ jsx("button", {
           className: "replay-button self-center",
           onClick: () => {
+            var _a3, _b3;
             oTStore.getState().setGlobalData({
               isRecording: false
             });
-            useOT.getState().socket.emit("globalData", {
+            (_b3 = (_a3 = useOT.getState()) == null ? void 0 : _a3.socket) == null ? void 0 : _b3.emit("globalData", {
               isRecording: false
             });
             setAppStatus("code");
@@ -232777,6 +233000,10 @@ const HeaderComponent = () => {
       className: "items-center flex relative",
       children: userListStore.getState().userList.map((item, index2) => {
         return /* @__PURE__ */ jsx("div", {
+          onClick: () => {
+            shadowUserStore.getState().switchShadowUser(item);
+            console.log(shadowUserStore.getState().shadowUser);
+          },
           className: "-ml-2.5 z-0 avatar-hover",
           children: /* @__PURE__ */ jsx(Avatar, {
             user: item