@dao42/d42paas-front 0.5.28 → 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() {
   }
@@ -31755,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") {
@@ -32032,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"
+        })
       })
     })
   });
@@ -56247,7 +56344,7 @@ function setARIAContainer(parent2) {
   statusContainer2 = createStatusContainer();
   parent2.appendChild(ariaContainer);
 }
-function alert(msg2) {
+function alert$1(msg2) {
   if (!ariaContainer) {
     return;
   }
@@ -56264,7 +56361,7 @@ function status(msg2) {
     return;
   }
   if (isMacintosh) {
-    alert(msg2);
+    alert$1(msg2);
   } else {
     if (statusContainer.textContent !== msg2) {
       clearNode(statusContainer2);
@@ -102887,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;
@@ -111762,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() {
@@ -116173,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));
     }
   }
 }
@@ -118685,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() {
@@ -119816,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();
@@ -125042,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);
@@ -137378,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) {
@@ -144158,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) {
@@ -153063,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;
       }
     }
@@ -153675,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"));
@@ -154161,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"));
     }
   }
 }
@@ -154559,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;
@@ -154577,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;
@@ -155523,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"
         });
@@ -155534,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";
@@ -174704,6 +174801,7 @@ const useValue = create$2((set) => ({
 }));
 let editor;
 const EditorLayout = newStyled.div`
+  width: 100%;
   .contentWidgets {
     visibility: hidden;
   }
@@ -174730,6 +174828,7 @@ const EditorLayout = newStyled.div`
       padding: 15px;
       color: #fff;
       font-size: 12px;
+      flex: 0 0 auto;
     }
 
     .active {
@@ -174843,6 +174942,24 @@ const Editor = ({
         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;
@@ -175043,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);
@@ -175082,6 +175200,19 @@ const Editor = ({
       }
     }
   }, [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)
@@ -175155,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,
@@ -175218,25 +175352,28 @@ const Editor = ({
       }
     });
   }, [USERLISTSTORE.userList, file == null ? void 0 : file.path]);
-  return /* @__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 ${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
-    })]
+  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({
@@ -182337,7 +182474,7 @@ const XTerm = (_a2) => {
           }
           break;
       }
-      onKey(character2);
+      onKey == null ? void 0 : onKey(character2);
     });
   };
   const fitTerminal = () => {
@@ -182345,7 +182482,8 @@ const XTerm = (_a2) => {
       setTimeout(() => {
         xtermFitAddon.fit();
       }, 0);
-    } catch (_) {
+    } catch (err) {
+      throw err;
     }
   };
   react.exports.useEffect(() => {
@@ -182416,11 +182554,12 @@ const Console = (_c2) => {
     }
   }, [terminal]);
   react.exports.useEffect(() => {
+    var _a2;
     if (!terminal)
       return;
     const crdt = CRDTInfo.console;
     if (crdt) {
-      writeText(terminal, crdt.doc.value || "");
+      writeText(terminal, ((_a2 = crdt == null ? void 0 : crdt.doc) == null ? void 0 : _a2.value) || "");
     }
   }, [CRDTInfo.console]);
   react.exports.useEffect(() => {
@@ -182434,14 +182573,16 @@ const Console = (_c2) => {
       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({
@@ -182558,7 +182699,8 @@ const OutputBrowser = (_e2) => {
       }
     }
   }, [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",
@@ -182652,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
@@ -182682,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({
@@ -182712,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))
@@ -183200,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(() => {
@@ -183225,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({
@@ -232683,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);
@@ -232776,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", {
@@ -232823,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;
@@ -232837,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");
@@ -232852,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