@dao42/d42paas-front 0.4.5 → 0.4.6

package/src/components/Editor/index.tsx

@@ -0,0 +1,979 @@
+import React, { useRef, useEffect, useState } from 'react';
+import * as monacoCore from 'monaco-editor-core';
+import * as monaco from 'monaco-editor';
+import { oTStore } from '~/stores';
+import { SerializedTextOperation, TextOperation } from 'ot';
+import * as ot from 'ot';
+import create from 'zustand';
+import { IoClient, IsMe } from '~/helpers';
+import { useOT } from '~/hooks';
+import { setLocalFile } from '~/helpers/collections/idb';
+import { FExtension } from '~/enum/FExtension';
+import { T_UserInfo, userListStore, userStore } from '~/stores/oTStore';
+import styled from '@emotion/styled';
+import { pick, throttle } from 'lodash';
+import normalizeUrl from 'normalize-url';
+import { listen } from '@codingame/monaco-jsonrpc';
+import ReconnectingWebSocket from 'reconnecting-websocket';
+
+import {
+  MonacoLanguageClient,
+  MessageConnection,
+  CloseAction,
+  ErrorAction,
+  MonacoServices,
+  createConnection,
+} from '@codingame/monaco-languageclient';
+import { Toast } from '~/helpers/collections/toast';
+
+// eslint-disable-next-line no-var
+var INIT_LANGUAGE = 'ruby';
+let to_save_operation;
+// const OPERATION_SWICHER: boolean = false;
+const docServer = new Map();
+
+const useValue = create<{
+  delta: any;
+  usersDelta: any[];
+  selectionOp: unknown;
+  selectionAcks: any[];
+  setSelectionAck: (val: any) => void;
+  clearSelectionAcks: () => void;
+  setDelta: (val: any) => void;
+  setUsersDelta: (val: any[]) => void;
+  position: monaco.Position;
+  setPosition: (arg: monaco.Position) => void;
+  value: string;
+  setValue: (val: string) => void;
+  versionId: number;
+  setVersionId: (arg?: number) => void;
+  setSelectionOp: (arg?: unknown) => void;
+}>((set) => ({
+  delta: '',
+  selectionOp: null,
+  usersDelta: [],
+  versionId: 0,
+  position: ([] as unknown) as monaco.Position,
+  selectionAcks: [],
+  setSelectionAck: (arg) =>
+    set((state) => ({
+      selectionAcks: [...state.selectionAcks, arg],
+    })),
+  clearSelectionAcks: () =>
+    set(() => ({
+      selectionAcks: [],
+    })),
+  setVersionId: (arg) =>
+    set(({ versionId }) => ({
+      versionId: arg || arg === 0 ? arg : versionId + 1,
+    })),
+  setDelta: (arg) => set(() => ({ delta: arg })),
+  setUsersDelta: (arg) => set(() => ({ usersDelta: arg })),
+  setPosition: (arg) => set(() => ({ position: arg })),
+  value: '',
+  setValue: (arg) => set(() => ({ value: arg })),
+  setSelectionOp: (arg) => set(() => ({ selectionOp: arg })),
+}));
+
+let editor;
+
+// monaco.editor.defineTheme('myTheme', {
+//   base: 'vs',
+//   inherit: true,
+//   rules: [
+//     {
+//       background: '#EDF9FA',
+//       token: 'dasjoajfa',
+//     },
+//   ],
+//   colors: {
+//     'editor.foreground': '#000000',
+//     'editor.background': '#EDF9FA',
+//     'editorCursor.foreground': '#8B0000',
+//     'editor.lineHighlightBackground': '#0000FF20',
+//     'editorLineNumber.foreground': '#008800',
+//     'editor.selectionBackground': '#88000030',
+//     'editor.inactiveSelectionBackground': '#88000015',
+//   },
+// });
+
+// monaco.editor.setTheme('myTheme');
+
+// const color = 'red';
+// const name = 'HOST';
+const EditorLayout = styled.div<{ userList: T_UserInfo[] }>`
+  .contentWidgets {
+    visibility: hidden;
+  }
+  .monaco-label {
+    font-size: 12px;
+    border-radius: 2px;
+    padding: 2px 10px;
+    transform: scale(0.8);
+    visibility: hidden;
+  }
+  .label-visible {
+    visibility: visible !important;
+  }
+  ${(props) =>
+    props.userList.map(
+      (u) =>
+        '.' +
+        u.role +
+        '{' +
+        'background:' +
+        u.color +
+        ';' +
+        'width: 2px !important;' +
+        '}',
+    )}
+  ${(props) =>
+    props.userList.map(
+      (u) =>
+        '.' +
+        u.role +
+        '-selection' +
+        '{' +
+        'background:' +
+        u.color +
+        'a6' +
+        ';' +
+        'color: #fff' +
+        ';' +
+        'width: 2px !important;' +
+        '}',
+    )}
+`;
+
+// const throttled = throttle((a) => {
+//   console.log(a);
+// }, 1000);
+
+export const Editor: React.FC<{
+  doc?: string;
+  docType?: string;
+}> = ({ doc, docType }) => {
+  // const io = useOT((state) => state.socket);
+  const divEl = useRef<HTMLDivElement>(null);
+  const [docVal, setDocVal] = useState<string>(doc ? doc : '');
+  const [pos, setPos] = useState<monaco.Position>(null!);
+  const file = oTStore((state) => state.doc);
+  const setFromServer = oTStore((state) => state.setFromServer);
+  const [client, setClient] = useState(new IoClient(0));
+  const OTSTATE = oTStore((state) => state);
+  const USERLISTSTORE = userListStore((state) => state);
+  const setPosition = useValue((state) => state.setPosition);
+  const setValue = useValue((state) => state.setValue);
+  const setDelta = useValue((state) => state.setDelta);
+  // const [languageModal, setLanguageModal] = useState({
+  //   value: docVal,
+  //   // language: 'typescript',
+  //   language: FExtension.py,
+  //   theme: 'vs-dark',
+  //   // theme: 'myTheme',
+  //   automaticLayout: true,
+  //   fixedOverflowWidgets: true,
+  //   //  scrollBeyondLastLine: true,
+  //   // roundedSelection: true,
+  //   // showFoldingControls: false,
+  //   // autoIndent: true,
+  //   // cursorStyle: "line",
+  //   // fontWeight: 400,
+  //   // minimap: false
+  //   scrollbar: {
+  //     // Subtle shadows to the left & top. Defaults to true.
+  //     useShadows: true,
+
+  //     // Render vertical arrows. Defaults to false.
+  //     verticalHasArrows: true,
+  //     // Render horizontal arrows. Defaults to false.
+  //     horizontalHasArrows: false,
+
+  //     // // Render vertical scrollbar.
+  //     // // Accepted values: 'auto', 'visible', 'hidden'.
+  //     // // Defaults to 'auto'
+  //     // vertical: 'hidden',
+  //     // // Render horizontal scrollbar.
+  //     // // Accepted values: 'auto', 'hidden', 'hidden'.
+  //     // // Defaults to 'auto'
+  //     // horizontal: 'hidden',
+
+  //     verticalScrollbarSize: 8,
+  //     horizontalScrollbarSize: 8,
+  //     arrowSize: 5,
+  //   },
+  // });
+
+  const cursorTool = (evt) => {
+    // const { CRDTInfo } = oTStore.getState();
+    const { userInfo } = userStore.getState();
+
+    const selection = [
+      [
+        evt.selection.startLineNumber,
+        evt.selection.startColumn,
+        evt.selection.endLineNumber,
+        evt.selection.endColumn,
+        evt.selection.selectionStartLineNumber,
+        evt.selection.selectionStartColumn,
+        evt.selection.positionColumn,
+        evt.selection.positionLineNumber,
+      ],
+      ...evt.secondarySelections.map((s) => [
+        s.startLineNumber,
+        s.startColumn,
+        s.endLineNumber,
+        s.endColumn,
+        s.selectionStartLineNumber,
+        s.selectionStartColumn,
+        s.positionColumn,
+        s.positionLineNumber,
+      ]),
+    ];
+    const crdt: D42_FrontType.CRDT = {
+      timestamp: Date.now().toString(),
+      selection,
+      file: {
+        action: 'Update',
+        path: oTStore.getState().doc.path,
+      },
+      userInfo: pick(userInfo, 'uuid', 'role'),
+    };
+    // sendPos = selection;
+    useOT.getState().socket.emit('selection', JSON.stringify(crdt));
+  };
+
+  const receiveOperation = (revision, operation, path) => {
+    // const sOperation = docServer.get(path).operation;
+    // if (operation.baseLength === sOperation.baseLength) {
+    //   const { transform } = operation.constructor;
+    //   operation = transform(operation, sOperation)[1];
+    // }
+    client.receiveOperation = operation;
+    return { operation };
+  };
+
+  const editorEventBinder = () => {
+    editor.onKeyDown((evt) => {
+      setFromServer(false);
+      // if ((evt.ctrlKey || evt.metaKey) && (evt.keyCode === 109 || evt.keyCode === 57)) {
+      if (evt.keyCode === 49) {
+        (evt.ctrlKey || evt.metaKey) && evt.preventDefault();
+      }
+    });
+
+    editor.onDidChangeCursorSelection((evt) => {
+      if (oTStore.getState().appStatus === 'replay') return;
+
+      console.log('当前revision:', client.revision);
+      if (evt.source === 'api') {
+        cursorTool(evt);
+      }
+      if (evt.reason === 0 || evt.source === 'model') return;
+      cursorTool(evt);
+    });
+
+    editor.onDidChangeModelContent((evt) => {
+      const { appStatus, fromServer, doc } = oTStore.getState();
+      // 回放状态，不进行文件数据改变
+      if (appStatus === 'replay') return;
+      if (fromServer) return;
+      // const docLength = editor.getModel().getValueLength(); // 文档长度
+      const editorValue = editor.getValue();
+      // const { isFlush, changes } = evt;
+      const { isFlush, changes } = evt;
+      // const changes = evt.changes.sort(
+      //   (c1, c2) => c1.rangeOffset - c2.rangeOffset,
+      // );
+      if (!isFlush) {
+        setPosition(editor.getPosition());
+        let keepString = 0;
+        let rangeLengthamount = 0;
+        const rangeOffsetthamount = 0;
+        // let lastRangeOffsetthamount = 0;
+
+        const valuelength =
+          editorValue.length -
+          changes.reduce(
+            (change, nextChange, i) =>
+              change - nextChange.rangeLength + nextChange.text.length,
+            0,
+          );
+        const operation = changes
+          .sort((c1, c2) => c1.rangeOffset - c2.rangeOffset)
+          .map((change, i) => {
+            rangeLengthamount += i === 0 ? 0 : change.rangeLength;
+            keepString += i === 0 ? 0 : change.text.length;
+
+            return new TextOperation()
+              .retain(
+                i === 0
+                  ? change.rangeOffset
+                  : change.rangeOffset - rangeLengthamount + keepString,
+              )
+              .delete(change.rangeLength)
+              .insert(change.text)
+              .retain(
+                // useValue.getState().value.length -
+                valuelength - change.rangeOffset - change.rangeLength,
+              );
+          })
+          .reduce((a, b) => a.compose(b));
+
+        // const operation = changes
+        //   .sort((c1, c2) => c1.rangeOffset - c2.rangeOffset)
+        //   .map((change, i) => {
+        //     rangeLengthamount += i === 0 ? 0 : change.rangeLength;
+        //     keepString += i === 0 ? 0 : change.text.length;
+
+        //     return new TextOperation()
+        //       .retain(
+        //         i === 0
+        //           ? change.rangeOffset
+        //           : change.rangeOffset - rangeLengthamount + keepString,
+        //       )
+        //       .delete(change.rangeLength)
+        //       .insert(change.text)
+        //       .retain(
+        //         // useValue.getState().value.length -
+        //         valuelength - change.rangeOffset - change.rangeLength,
+        //       );
+        //   });
+
+        /* end */
+        // console.log('本地revision', client.revision);
+        // 单文件模式
+        // setTimeout(() => {
+        setLocalFile(doc.path ? doc.path : 'singleFile', editor.getValue());
+        // to_save_operation = operation;
+        client.applyClient(operation);
+        // }, 0);
+      } else {
+        setValue(changes[0].text);
+      }
+    });
+
+    editor.createContextKey('save', true);
+
+    editor.addCommand(
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+      () => {
+        const { doc, setFileSaved } = oTStore.getState();
+
+        useOT.getState().socket.emit('saveFile', doc.path);
+        // alert('保存成功~');
+        // Toast.message()
+
+        Toast.message({
+          type: 'success',
+          content: '保存成功~~🤘 ↑↑↓↓←→←→ABAB',
+          placement: 'topCenter',
+        });
+        // client.applyClient(to_save_operation);
+      },
+      'save',
+    );
+
+    client.sendOperation = function (revision, operation) {
+      if (oTStore.getState().appStatus === 'replay') return;
+
+      const { userInfo } = userStore.getState();
+      const { doc } = oTStore.getState();
+      console.log(file);
+      const crdt: D42_FrontType.CRDT = {
+        timestamp: Date.now().toString(),
+        userInfo: pick(userInfo, ['role', 'uuid']),
+        editor: {
+          operation,
+          revision,
+          evtType: 'Editor',
+        },
+        file: {
+          action: 'Update',
+          path: doc.path,
+        },
+      };
+
+      useOT.getState().socket.emit('editFile', JSON.stringify(crdt));
+    };
+  };
+
+  const updateLspOps = ({ value, path, language, CRDTInfo, doc }) => {
+    let gotModel = monaco.editor
+      .getModels()
+      .find((x) => new RegExp(path).test(x.uri.path));
+
+    if (!gotModel) {
+      gotModel = monaco.editor.createModel(
+        value,
+        language,
+        monaco.Uri.parse(`${path}`),
+        // monaco.Uri.parse(
+        //   'file:///Users/unamed/git/testForLSP/src/main/java/lsptest/Main.java',
+        // ),
+
+        // monaco.Uri.parse(`inmemory://${path}`),
+        // monaco.Uri.parse(`file://${path}`),
+        // monaco.Uri.parse(`${path}`),
+        // monaco.Uri.parse(`file:///abs/file.rb`),
+        // monaco.Uri.parse('inmemory:///abs/path/to/demo/ts/file.rb'),
+      );
+      // gotModel = monaco.editor.createModel(
+      //   value,
+      //   language,
+      //   // monaco.Uri.parse(`${path}`),
+      //   monaco.Uri.parse(
+      //     'file:///Users/unamed/git/testForLSP/src/main/java/Main.java',
+      //   ),
+
+      //   // monaco.Uri.parse(`inmemory://${path}`),
+      //   // monaco.Uri.parse(`file://${path}`),
+      //   // monaco.Uri.parse(`${path}`),
+      //   // monaco.Uri.parse(`file:///abs/file.rb`),
+      //   // monaco.Uri.parse('inmemory:///abs/path/to/demo/ts/file.rb'),
+      // );
+      // gotModel = monaco.editor.createModel(
+      //   value,
+      //   language,
+      //   // monaco.Uri.parse(`${path}`),
+      //   monaco.Uri.parse(
+      //     'file:///Users/unamed/git/testForLSP/src/main/java/lsptest/sample.java',
+      //   ),
+
+      //   // monaco.Uri.parse(`inmemory://${path}`),
+      //   // monaco.Uri.parse(`file://${path}`),
+      //   // monaco.Uri.parse(`${path}`),
+      //   // monaco.Uri.parse(`file:///abs/file.rb`),
+      //   // monaco.Uri.parse('inmemory:///abs/path/to/demo/ts/file.rb'),
+      // );
+    }
+
+    client.revision = CRDTInfo.editor.revision ? CRDTInfo.editor.revision : 0;
+
+    editor.setModel(gotModel);
+
+    docServer.set(file.path, {
+      operation: [],
+      revision: client.revision,
+      value: file.value,
+    });
+    setLocalFile(doc.path, file.value);
+
+    // editor.setValue(file.value);
+  };
+
+  const lspServerInject = (lan, disable?: boolean) => {
+    // monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    //   allowNonTsExtensions: true,
+    //   // allowJs: true,
+    //   target: 99,
+    //   paths: {
+    //     '@/*': ['./'],
+    //   },
+    //   baseUrl: './',
+    // });
+    monaco.languages.register({
+      id: 'ruby',
+      extensions: ['.rb'],
+      aliases: ['ruby', 'RUBY'],
+      // extensions: ['.rb', '.rjs', '.gemspec', '.rbx'],
+      // aliases: ['Ruby', 'ruby', 'rjs', 'gemspec', 'rb'],
+      // mimetypes: ['application/json']
+    });
+    monaco.languages.register({
+      id: 'java',
+      extensions: ['.java'],
+      aliases: ['java', 'JAVA'],
+      // extensions: ['.rb', '.rjs', '.gemspec', '.rbx'],
+      // aliases: ['Ruby', 'ruby', 'rjs', 'gemspec', 'rb'],
+      // mimetypes: ['application/json']
+    });
+    monaco.languages.register({
+      id: 'typescript',
+      extensions: ['.ts'],
+      aliases: ['TypeScript', 'ts', 'TS', 'typescript'],
+      // mimetypes: ['application/json']
+    });
+
+    /**
+     * Uniform Resource Identifier (Uri) http://tools.ietf.org/html/rfc3986.
+     * This class is a simple parser which creates the basic component parts
+     * (http://tools.ietf.org/html/rfc3986#section-3) with minimal validation
+     * and encoding.
+     *
+     * ```txt
+     *       foo://example.com:8042/over/there?name=ferret#nose
+     *       \_/   \______________/\_________/ \_________/ \__/
+     *        |           |            |            |        |
+     *     scheme     authority       path        query   fragment
+     *        |   _____________________|__
+     *       / \ /                        \
+     *       urn:example:animal:ferret:nose
+     * ```
+     */
+    // monaco.editor.createModel(
+    //   'printF',
+    //   'typescript',
+    //   monaco.Uri.parse('file:///index.rb'),
+    // );
+    // monaco.editor.createModel(
+    //   'export const callYou = () => { console.log("hi") }',
+    //   'typescript',
+    //   monaco.Uri.parse('file:///coding2/c2#/sample.ts'),
+    // );
+
+    if (disable) return;
+    MonacoServices.install(monaco as typeof monacoCore);
+
+    const { lspUrl, ticket } = oTStore.getState().dockerInfo;
+
+    if (!lspUrl) return;
+    // const webSocket = (new ReconnectingWebSocket('ws://192.168.2.15:7700', [], {
+    const webSocket = (new ReconnectingWebSocket(
+      `wss://${lspUrl}/${ticket}`,
+      [],
+      {
+        // const webSocket = (new ReconnectingWebSocket(
+        //   'ws://192.168.2.9:3001/runner',
+        //   [],
+        //   {
+        maxReconnectionDelay: 10000,
+        minReconnectionDelay: 1000,
+        reconnectionDelayGrowFactor: 1.3,
+        connectionTimeout: 10000,
+        maxRetries: Infinity,
+        debug: false,
+      },
+    ) as unknown) as WebSocket;
+
+    // listen when the web socket is opened
+    listen({
+      webSocket,
+      onConnection: (connection) => {
+        // create and start the language client
+        // const languageClient = createLanguageClient(connection);
+        const languageClient = new MonacoLanguageClient({
+          name: 'Language Client',
+          clientOptions: {
+            // use a language id as a document selector
+            // documentSelector: [lan],
+            // documentSelector: [{ language: 'ruby', pattern: '**∕*.rb' }],
+            documentSelector: ['java', 'ruby', 'typescript'],
+            // disable the default error handler
+            errorHandler: {
+              error: () => ErrorAction.Continue,
+              closed: () => CloseAction.DoNotRestart,
+            },
+          },
+          // create a language client connection from the JSON RPC connection on demand
+          connectionProvider: {
+            get: (errorHandler, closeHandler) => {
+              return Promise.resolve(
+                createConnection(connection, errorHandler, closeHandler),
+              );
+            },
+          },
+        });
+        const disposable = languageClient.start();
+        connection.onClose(() => disposable.dispose());
+      },
+    });
+  };
+
+  const editorInit = () => {
+    if (divEl.current) {
+      // register Monaco languages
+
+      monaco.editor.defineTheme('myCoolTheme', {
+        base: 'vs-dark',
+        inherit: false,
+        rules: [
+          {
+            token: 'green',
+            background: 'FF0000',
+            foreground: '00FF00',
+            fontStyle: 'italic',
+          },
+          { token: 'red', foreground: 'FF0000', fontStyle: 'bold underline' },
+        ],
+        colors: {
+          'editor.foreground': '#FFFFFF',
+          'editor.background': '#000000',
+        },
+      });
+
+      // create Monaco editor
+      editor = monaco.editor.create(divEl.current, {
+        theme: 'vs-dark',
+        // model: monaco.editor.createModel(
+        //   'printF',
+        //   'ruby',
+        //   monaco.Uri.parse('file:///index.rb'),
+        // ),
+        glyphMargin: true,
+        lightbulb: {
+          enabled: true,
+        },
+      });
+
+      // // install Monaco language client services
+      lspServerInject(INIT_LANGUAGE, oTStore.getState().lspServerDisabled);
+
+      editorEventBinder();
+      const editorService = editor._codeEditorService;
+      const openEditorBase = editorService.openCodeEditor.bind(editorService);
+      editorService.openCodeEditor = async (input, source, workspacePath) => {
+        const result = await openEditorBase(input, source);
+        if (result === null) {
+          // alert('intercepted');
+          // console.log('Open definition for:', input);
+          // console.log(
+          //   'Corresponding model:',
+          //   monaco.editor.getModel(input.resource),
+          // );
+          // console.log('Source: ', source);
+          const gotSource = monaco.editor
+            .getModels()
+            // .find((x) => new RegExp(path).test(x.uri.authority));
+            .find((x) => new RegExp(input.resource.path).test(x.uri.path));
+          const { CRDTInfo, setCRDTInfo } = oTStore.getState();
+          setCRDTInfo({
+            ...CRDTInfo,
+            file: {
+              action: 'Update',
+              value: gotSource.getValue(),
+              path: gotSource.uri.path,
+            },
+          });
+        }
+        return result; // always return the base result
+      };
+    }
+
+    window.ot = ot;
+  };
+
+  useEffect(() => {
+    editorInit();
+    return () => {
+      editor.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    const { CRDTInfo, doc, serverAck, appStatus } = oTStore.getState();
+    const { usersDelta, setUsersDelta } = useValue.getState();
+    const callList = [];
+    // if (!OTSTATE.CRDTInfo.revision) return;
+    // if (!CRDTInfo.operation) return;
+    if (!CRDTInfo.editor || CRDTInfo.editor.evtType !== 'Editor') return;
+
+    if (
+      editor &&
+      (doc?.path === CRDTInfo?.file?.path ||
+        CRDTInfo?.file?.path === 'singleFile')
+    ) {
+      const server_operation = (CRDTInfo.editor
+        .operation as unknown) as SerializedTextOperation;
+
+      const CLIENT_OPERATION = receiveOperation(
+        CRDTInfo.editor.revision,
+        TextOperation.fromJSON(server_operation),
+        CRDTInfo.file.path,
+      );
+      // if (appStatus === 'replay') {
+      //   callList.push(CLIENT_OPERATION);
+      //   if (
+      //     !!editor.getValue().length &&
+      //     CLIENT_OPERATION.baseLength === editor.getValue().length
+      //   ) {
+      //     const m = callList.shift();
+      //     console.log(m);
+      //     editor.setValue(m.apply(editor.getValue()));
+      //   }
+      //   return;
+      // }
+      // if (CLIENT_OPERATION.baseLength !== editor.getValue().length) return;
+      // client.applyServer(TextOperation.fromJSON(server_operation));
+      client.applyServer(CLIENT_OPERATION.operation);
+
+      const pushStack = true;
+      // const { ops } = TextOperation.fromJSON(client.receiveOperation);
+      const { ops } = client.receiveOperation;
+      const model = editor.getModel();
+      let index = 0;
+      const results = [];
+
+      // ops.reduce((a, b, i) => {}, []);
+
+      ops.forEach((op) => {
+        if (TextOperation.isRetain(op)) {
+          index += op;
+        }
+
+        if (TextOperation.isInsert(op)) {
+          const insert = model.getPositionAt(index);
+          const originResult = {
+            forceMoveMarkers: true,
+            range: new monaco.Range(
+              insert.lineNumber,
+              insert.column,
+              insert.lineNumber,
+              insert.column,
+            ),
+            text: op,
+          };
+
+          results.push(originResult);
+        }
+
+        if (TextOperation.isDelete(op)) {
+          const start = model.getPositionAt(index);
+          const end = model.getPositionAt(index - op);
+
+          results.push({
+            forceMoveMarkers: false,
+            range: new monaco.Range(
+              start.lineNumber,
+              start.column,
+              end.lineNumber,
+              end.column,
+            ),
+            text: null,
+          });
+          index -= op;
+        }
+      });
+
+      // 全局 undo redo stack
+      if (pushStack) {
+        model.pushEditOperations([], results, null);
+      } else {
+        model.applyEdits(results);
+      }
+    }
+  }, [OTSTATE.CRDTInfo]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const { CRDTInfo, doc, serverAck, appStatus } = oTStore.getState();
+    const { usersDelta, setUsersDelta } = useValue.getState();
+    // if (!IsMe(CRDTInfo.userInfo)) {
+    const model = editor.getModel();
+    console.log(CRDTInfo, '回放');
+
+    if (doc?.path === CRDTInfo?.file?.path) {
+      if (!!CRDTInfo.selection) {
+        console.log('selection move');
+        usersDelta.forEach((u) => {
+          // eslint-disable-next-line prefer-const
+          let timer;
+          const _label = document.querySelector<HTMLElement>(
+            `.${u.role}-label`,
+          );
+          timer && clearTimeout(timer);
+
+          if (!_label.classList.contains('label-visible')) {
+            _label.classList.add('label-visible');
+          }
+
+          timer = setTimeout(() => {
+            _label.classList.remove('label-visible');
+          }, 8000);
+          editor.layoutContentWidget({
+            ...u.label,
+            getPosition: function () {
+              return {
+                position: {
+                  lineNumber: CRDTInfo.selection[0][7],
+                  column: CRDTInfo.selection[0][6],
+                },
+                preference: [
+                  monaco.editor.ContentWidgetPositionPreference.ABOVE,
+                  monaco.editor.ContentWidgetPositionPreference.BELOW,
+                ],
+              };
+            },
+          });
+        });
+        // evt.selection.startLineNumber,
+        // evt.selection.startColumn,
+        // evt.selection.endLineNumber,
+        // evt.selection.endColumn,
+        // evt.selection.selectionStartLineNumber,
+        // evt.selection.selectionStartColumn,
+        // evt.selection.positionColumn,
+        // evt.selection.positionLineNumber,
+
+        setUsersDelta(
+          usersDelta.map((deltaInfo) => {
+            if (deltaInfo.uuid === CRDTInfo.userInfo.uuid) {
+              // console.log(CRDTInfo);
+              return {
+                // user: CRDTInfo.userInfo,
+                ...deltaInfo,
+
+                delta: editor.deltaDecorations(
+                  deltaInfo.delta ? deltaInfo.delta : '',
+                  CRDTInfo.selection.map((s) => ({
+                    range: new monaco.Range(s[0], s[1], s[2], s[3]),
+                    options: {
+                      isWholeLine: false,
+                      className: s[5] === s[6] ? deltaInfo.role : '',
+                      // stickiness:
+                      //   monaco.editor.TrackedRangeStickiness
+                      //     .NeverGrowsWhenTypingAtEdges,
+                      // linesDecorationsClassName: deltaInfo.role,
+                      inlineClassName: deltaInfo.role + '-selection',
+                      // glyphMarginClassName: 'myGlyphMarginClass',
+                    },
+                  })),
+                ),
+              };
+            } else {
+              return deltaInfo;
+            }
+          }),
+        );
+      }
+
+      if (CRDTInfo?.editor?.evtType === 'Editor') {
+        // const server_operation = (CRDTInfo.editor
+        //   .operation as unknown) as SerializedTextOperation;
+        // const CLIENT_OPERATION = TextOperation.fromJSON(server_operation);
+        // client.applyServer(TextOperation.fromJSON(server_operation));
+        // const { ops } = CLIENT_OPERATION;
+        // ops.forEach((_op) => {
+        //   const op = _op as number;
+        //   if (TextOperation.isRetain(op)) {
+        //     const _insert = model.getPositionAt(op);
+        //     // console.log(_insert);
+        //   }
+        // });
+      }
+    }
+    // }
+    // console.log(usersDelta);
+  }, [OTSTATE.CRDTInfo.selection]);
+
+  useEffect(() => {
+    if (!editor) return;
+  }, [OTSTATE.fileSaved]);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    // OTSTATE.CRDTInfo.operation &&
+    OTSTATE.serverAck && client.serverAck();
+    docServer.set(file.path, {
+      ...docServer.get(file.path),
+      operation: client.operation,
+    });
+    // if (selectionAcks.length > 0) {
+    // if (useValue.getState().selectionAcks.length > 0) {
+    //   ret1urn;
+    // }
+
+    // }
+    // console.log('save');
+    // if (useValue.getState().selectionAcks.length > 0) {
+    //   return;
+    // }
+    // io.emit('selection', JSON.stringify(crdt));
+  }, [OTSTATE.serverAck]);
+
+  useEffect(() => {
+    const egt = /\.(\w+$)/gim.exec(file.path as string);
+    const { CRDTInfo, doc } = oTStore.getState();
+    if (!editor || !IsMe(CRDTInfo.userInfo)) return;
+    if (file.path && egt) {
+      updateLspOps({
+        value: file.value,
+        path: file.path,
+        language: FExtension[egt[1]],
+        CRDTInfo,
+        doc,
+      });
+    }
+  }, [file.path]);
+
+  useEffect(() => {
+    // const egt = /\.(\w+$)/gim.exec(file.path);
+    // if (!egt) return;
+    // if (!!editor && docType) {
+    //   monaco.editor.setModelLanguage(editor.getModel(), docType);
+    // }
+    // editor.setValue(file.value);
+  }, [docType]);
+
+  useEffect(() => {
+    // if (!!editor) {
+    //   const _model = editor.getModel();
+    //   editor.setValue(doc ? doc : '');
+    //   _model &&
+    //     monaco.editor.setModelLanguage(
+    //       _model,
+    //       docType ? docType : FExtension[docType],
+    //     );
+    // }
+  }, [doc, docType]);
+
+  useEffect(() => {
+    const { usersDelta, setUsersDelta } = useValue.getState();
+    // const { userList } = userListStore.getState();
+
+    setUsersDelta(
+      USERLISTSTORE.userList
+        .filter((u) => !IsMe(u))
+        .map((x) => {
+          return {
+            ...x,
+            label: {
+              domNode: null,
+              getId: function () {
+                return `label-${x.uuid}`;
+              },
+              getDomNode: function () {
+                if (!this.domNode) {
+                  this.domNode = document.createElement('div');
+                  this.domNode.className = `monaco-label ${x.role}-label`;
+                  this.domNode.innerHTML = x.username;
+                  this.domNode.style.background = x.color;
+                  this.domNode.style.visibility = 'hidden';
+                }
+                return this.domNode;
+              },
+              getPosition: function () {
+                return {
+                  position: {
+                    lineNumber: 1,
+                    column: 2,
+                  },
+                  preference: [
+                    monaco.editor.ContentWidgetPositionPreference.ABOVE,
+                    monaco.editor.ContentWidgetPositionPreference.BELOW,
+                  ],
+                };
+              },
+            },
+          };
+        }),
+    );
+
+    editor &&
+      usersDelta.forEach((x) => {
+        // debugger;
+        if (!document.querySelector(`.${x.role}-label`)) {
+          editor.addContentWidget(x.label);
+        }
+      });
+  }, [USERLISTSTORE.userList, file.path]);
+
+  return (
+    <EditorLayout
+      ref={divEl}
+      className="editor-layout"
+      userList={userListStore.getState().userList}
+    ></EditorLayout>
+  );
+};