@dao42/d42paas-front 0.4.8 → 0.4.9

package/src/components/Editor/index copy.tsx

@@ -1,1010 +0,0 @@
-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';
-
-// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker';
-// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker';
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker';
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker';
-// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker';
-
-// self.MonacoEnvironment = {
-//   getWorker(_, label) {
-//     if (label === 'json') {
-//       return new jsonWorker();
-//     }
-//     if (label === 'css' || label === 'scss' || label === 'less') {
-//       return new cssWorker();
-//     }
-//     if (label === 'html' || label === 'handlebars' || label === 'razor') {
-//       return new htmlWorker();
-//     }
-//     if (label === 'typescript' || label === 'javascript') {
-//       return new tsWorker();
-//     }
-//     return new editorWorker();
-//   },
-// };
-
-const APP_DIR = '/home/runner/app';
-
-// 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.IStandaloneCodeEditor;
-
-// 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 }) => {
-  // debugger;
-  console.log('hi')
-  // 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: monaco.editor.ICursorSelectionChangedEvent) => {
-    // 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(`file://${APP_DIR}${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);
-    // console.log(oTStore.getState().dockerInfo);
-    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'],
-            // 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: 'Get',
-              value: gotSource.getValue(),
-              path: gotSource.uri.path.replace(APP_DIR, ''),
-            },
-          });
-          OTSTATE.switchDoc({
-            value: gotSource.getValue(),
-            path: gotSource.uri.path.replace(APP_DIR, ''),
-          });
-        }
-        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) => {
-        // ;
-        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>
-  );
-};