@lvce-editor/editor-worker 19.1.0 → 19.2.0

package/dist/editorWorkerMain.js

@@ -1538,12 +1538,12 @@ const launchColorPickerWorker = async () => {
   return launchWorker(name, url);
 };
 
-const state$f = {};
+const state$e = {};
 const getOrCreate$3 = () => {
-  if (!state$f.workerPromise) {
-    state$f.workerPromise = launchColorPickerWorker();
+  if (!state$e.workerPromise) {
+    state$e.workerPromise = launchColorPickerWorker();
   }
-  return state$f.workerPromise;
+  return state$e.workerPromise;
 };
 const invoke$9 = async (method, ...params) => {
   const worker = await getOrCreate$3();
@@ -1626,6 +1626,7 @@ const createEditor2 = (id, uri, x, y, width, height, platform, assetDir) => {
     fontWeight: 0,
     handleOffset: 0,
     handleOffsetX: 0,
+    hasListener: false,
     height,
     highlightedLine: -1,
     id,
@@ -1637,6 +1638,7 @@ const createEditor2 = (id, uri, x, y, width, height, platform, assetDir) => {
     isAutoClosingTagsEnabled: false,
     isMonospaceFont: false,
     isQuickSuggestionsEnabled: false,
+    isSelecting: false,
     itemHeight: 20,
     languageId: '',
     letterSpacing: 0,
@@ -1657,6 +1659,10 @@ const createEditor2 = (id, uri, x, y, width, height, platform, assetDir) => {
     savedSelections: [],
     scrollBarHeight: 0,
     scrollBarWidth: 0,
+    selectionAutoMovePosition: {
+      columnIndex: 0,
+      rowIndex: 0
+    },
     selectionInfos: [],
     selections: new Uint32Array(),
     tabSize: 0,
@@ -1847,7 +1853,7 @@ const getInitialLineState = initialLineState => {
   return deepCopy(initialLineState);
 };
 
-const state$e = {
+const state$d = {
   warned: []
 };
 const flattenTokensArray = tokens => {
@@ -1859,10 +1865,10 @@ const flattenTokensArray = tokens => {
   return flattened;
 };
 const warnDeprecatedArrayReturn = (languageId, fn) => {
-  if (state$e.warned.includes(fn)) {
+  if (state$d.warned.includes(fn)) {
     return;
   }
-  state$e.warned.push(fn);
+  state$d.warned.push(fn);
   console.warn(`tokenizers without hasArrayReturn=false are deprecated (language ${languageId})`);
 };
 const safeTokenizeLine = (languageId, tokenizeLine, line, lineStateAtStart, hasArrayReturn) => {
@@ -1923,14 +1929,14 @@ const TokenizePlainText = {
   tokenizeLine
 };
 
-const state$d = {
+const state$c = {
   enabled: false
 };
 const setEnabled$1 = value => {
-  state$d.enabled = value;
+  state$c.enabled = value;
 };
 const getEnabled$1 = () => {
-  return state$d.enabled;
+  return state$c.enabled;
 };
 
 const {
@@ -1938,25 +1944,25 @@ const {
   set: set$6
 } = SyntaxHighlightingWorker;
 
-const state$c = {
+const state$b = {
   pending: Object.create(null),
   tokenizePaths: Object.create(null),
   tokenizers: Object.create(null)
 };
 const has = languageId => {
-  return Object.hasOwn(state$c.tokenizers, languageId);
+  return Object.hasOwn(state$b.tokenizers, languageId);
 };
 const set$5 = (languageId, tokenizer) => {
-  state$c.tokenizers[languageId] = tokenizer;
+  state$b.tokenizers[languageId] = tokenizer;
 };
 const get$5 = languageId => {
-  return state$c.tokenizers[languageId];
+  return state$b.tokenizers[languageId];
 };
 const setTokenizePath = (languageId, tokenizePath) => {
-  state$c.tokenizePaths[languageId] = tokenizePath;
+  state$b.tokenizePaths[languageId] = tokenizePath;
 };
 const getTokenizePath$1 = languageId => {
-  return state$c.tokenizePaths[languageId] || '';
+  return state$b.tokenizePaths[languageId] || '';
 };
 const setTokenizePaths = languages => {
   for (const language of languages) {
@@ -1966,7 +1972,7 @@ const setTokenizePaths = languages => {
   }
 };
 const isPending = languageId => {
-  return Object.hasOwn(state$c.pending, languageId);
+  return Object.hasOwn(state$b.pending, languageId);
 };
 
 const tokenMaps = Object.create(null);
@@ -2809,14 +2815,14 @@ const getNewDeltaPercent = (height, scrollBarHeight, relativeY) => {
   };
 };
 
-const state$b = {
+const state$a = {
   enabled: false
 };
 const setEnabled = value => {
-  state$b.enabled = value;
+  state$a.enabled = value;
 };
 const getEnabled = () => {
-  return state$b.enabled;
+  return state$a.enabled;
 };
 
 // TODO this should be in a separate scrolling module
@@ -2996,7 +3002,7 @@ const getUrlAtOffset = (editor, offset) => {
 
 const EditorChange = 1;
 
-const state$a = Object.create(null);
+const state$9 = Object.create(null);
 
 /**
  * Register a listener for a specific event type
@@ -3006,13 +3012,13 @@ const state$a = Object.create(null);
 const registerListener$1 = (listenerType, rpcId) => {
   number(listenerType);
   number(rpcId);
-  if (!Object.hasOwn(state$a, listenerType)) {
-    state$a[listenerType] = [];
+  if (!Object.hasOwn(state$9, listenerType)) {
+    state$9[listenerType] = [];
   }
 
   // Avoid duplicate registrations
-  if (!state$a[listenerType].includes(rpcId)) {
-    state$a[listenerType].push(rpcId);
+  if (!state$9[listenerType].includes(rpcId)) {
+    state$9[listenerType].push(rpcId);
   }
 };
 
@@ -3024,10 +3030,10 @@ const registerListener$1 = (listenerType, rpcId) => {
 const unregisterListener$1 = (listenerType, rpcId) => {
   number(listenerType);
   number(rpcId);
-  if (Object.hasOwn(state$a, listenerType)) {
-    const index = state$a[listenerType].indexOf(rpcId);
+  if (Object.hasOwn(state$9, listenerType)) {
+    const index = state$9[listenerType].indexOf(rpcId);
     if (index !== -1) {
-      state$a[listenerType].splice(index, 1);
+      state$9[listenerType].splice(index, 1);
     }
   }
 };
@@ -3039,7 +3045,7 @@ const unregisterListener$1 = (listenerType, rpcId) => {
  */
 const getListeners = listenerType => {
   number(listenerType);
-  return state$a[listenerType] || [];
+  return state$9[listenerType] || [];
 };
 
 /**
@@ -3693,9 +3699,11 @@ const emptyEditor = {
   differences: [],
   embeds: [],
   focused: false,
+  hasListener: false,
   height: 0,
   highlightedLine: -1,
   incrementalEdits: emptyIncrementalEdits,
+  isSelecting: false,
   languageId: '',
   // TODO use numeric language id?
   lineCache: [],
@@ -3705,6 +3713,10 @@ const emptyEditor = {
   minLineY: 0,
   redoStack: [],
   scrollBarHeight: 0,
+  selectionAutoMovePosition: {
+    columnIndex: 0,
+    rowIndex: 0
+  },
   selectionInfos: [],
   selections: new Uint32Array(),
   textInfos: [],
@@ -4027,6 +4039,7 @@ const createEditor = async ({
     fontWeight,
     handleOffset: 0,
     handleOffsetX: 0,
+    hasListener: false,
     height,
     id,
     incrementalEdits: emptyIncrementalEdits,
@@ -4036,6 +4049,7 @@ const createEditor = async ({
     isAutoClosingTagsEnabled,
     isMonospaceFont,
     isQuickSuggestionsEnabled,
+    isSelecting: false,
     itemHeight: 20,
     languageId: computedlanguageId,
     letterSpacing,
@@ -4056,6 +4070,10 @@ const createEditor = async ({
     savedSelections,
     scrollBarHeight: 0,
     scrollBarWidth: 0,
+    selectionAutoMovePosition: {
+      columnIndex: 0,
+      rowIndex: 0
+    },
     selectionInfos: [],
     selections: new Uint32Array(),
     tabSize,
@@ -4521,7 +4539,7 @@ const y = (editor, rowIndex) => {
   return offsetY;
 };
 
-const state$9 = {
+const state$8 = {
   timeout: -1
 };
 
@@ -4552,7 +4570,7 @@ const editorShowMessage = async (editor, rowIndex, columnIndex, message, isError
 
     // TODO use wrapper timing module instead of this
     // @ts-ignore
-    state$9.timeout = setTimeout(handleTimeout, 3000);
+    state$8.timeout = setTimeout(handleTimeout, 3000);
   }
   return editor;
 };
@@ -4572,8 +4590,8 @@ const showErrorMessage = async (editor, rowIndex, columnIndex, message) => {
 
 // @ts-ignore
 const editorHideMessage = async editor => {
-  clearTimeout(state$9.timeout);
-  state$9.timeout = -1;
+  clearTimeout(state$8.timeout);
+  state$8.timeout = -1;
   // await RendererProcess.invoke(/* Viewlet.send */ 'Viewlet.send', /* id */ editor.uid, /* method */ 'hideOverlayMessage')
   return editor;
 };
@@ -4689,12 +4707,12 @@ const launchRenameWorker = async () => {
   return rpc;
 };
 
-const state$8 = {};
+const state$7 = {};
 const getOrCreate$2 = () => {
-  if (!state$8.workerPromise) {
-    state$8.workerPromise = launchRenameWorker();
+  if (!state$7.workerPromise) {
+    state$7.workerPromise = launchRenameWorker();
   }
-  return state$8.workerPromise;
+  return state$7.workerPromise;
 };
 const invoke$5 = async (method, ...params) => {
   const worker = await getOrCreate$2();
@@ -4814,12 +4832,12 @@ const openColorPicker = async editor => {
   return addWidgetToEditor(ColorPicker$1, ColorPicker, editor, create$6, newStateGenerator$6);
 };
 
-const state$7 = {
+const state$6 = {
   compositionText: '',
   isComposing: false
 };
 const compositionStart = (editor, event) => {
-  state$7.isComposing = true;
+  state$6.isComposing = true;
   return editor;
 };
 const getCompositionChanges = (selections, data) => {
@@ -4829,9 +4847,9 @@ const getCompositionChanges = (selections, data) => {
     const selectionStartColumn = selections[i + 1];
     const selectionEndRow = selections[i + 2];
     const selectionEndColumn = selections[i + 3];
-    const startColumnIndex = selectionStartColumn - state$7.compositionText.length;
+    const startColumnIndex = selectionStartColumn - state$6.compositionText.length;
     changes.push({
-      deleted: [state$7.compositionText],
+      deleted: [state$6.compositionText],
       end: {
         columnIndex: selectionEndColumn,
         rowIndex: selectionEndRow
@@ -4851,7 +4869,7 @@ const compositionUpdate = (editor, data) => {
     selections
   } = editor;
   const changes = getCompositionChanges(selections, data);
-  state$7.compositionText = data;
+  state$6.compositionText = data;
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
 const compositionEnd = (editor, data) => {
@@ -4859,8 +4877,8 @@ const compositionEnd = (editor, data) => {
     selections
   } = editor;
   const changes = getCompositionChanges(selections, data);
-  state$7.isComposing = false;
-  state$7.compositionText = '';
+  state$6.isComposing = false;
+  state$6.compositionText = '';
   return scheduleDocumentAndCursorsSelections(editor, changes);
 };
 
@@ -5960,19 +5978,19 @@ const closeWidgetsMaybe = widgets => {
   return widgets.filter(isPersistentWidget);
 };
 
-const state$6 = {
+const state$5 = {
   position: {
     columnIndex: 0,
     rowIndex: 0
   }
 };
-const getPosition$1 = () => {
-  return state$6.position;
+const getPosition = () => {
+  return state$5.position;
 };
 
 // @ts-ignore
-const setPosition$1 = position => {
-  state$6.position = position;
+const setPosition = position => {
+  state$5.position = position;
 };
 
 const openExternal = async (url, platform) => {
@@ -6039,7 +6057,7 @@ const Alt = 2;
 
 const handleSingleClickDefault = (editor, position) => {
   // TODO avoid global variables, add them to editor state
-  setPosition$1(position);
+  setPosition(position);
   const widgets = closeWidgetsMaybe(editor.widgets);
   return {
     ...editor,
@@ -6192,20 +6210,20 @@ const handleMouseDown = (state, button, altKey, ctrlKey, x, y, detail) => {
   }
 };
 
-const state$5 = {
+const state$4 = {
   editor: undefined,
   timeout: -1,
   x: 0,
   y: 0
 };
 const get$1 = () => {
-  return state$5;
+  return state$4;
 };
 const set$1 = (editor, timeout, x, y) => {
-  state$5.editor = editor;
-  state$5.timeout = timeout;
-  state$5.x = x;
-  state$5.y = y;
+  state$4.editor = editor;
+  state$4.timeout = timeout;
+  state$4.x = x;
+  state$4.y = y;
 };
 
 const showHover$1 = async (editor, position) => {
@@ -6346,59 +6364,25 @@ const editorHandleNativeSelectionChange = (editor, range) => {
   return scheduleSelections(editor, selections);
 };
 
-const state$4 = {
-  /**
-   * @type {any}
-   */
-  currentEditor: undefined,
-  hasListener: false,
-  isSelecting: false,
-  position: {
-    columnIndex: 0,
-    rowIndex: 0
-  }
-};
-
-// @ts-ignore
-const setEditor = editor => {
-  state$4.currentEditor = editor;
-  state$4.hasListener = true;
-};
-const clearEditor = () => {
-  state$4.currentEditor = undefined;
-  state$4.hasListener = false;
-  state$4.isSelecting = false;
-};
-const startSelecting = () => {
-  state$4.isSelecting = true;
-};
-const isSelecting = () => {
-  return state$4.isSelecting;
-};
-
-// @ts-ignore
-const setPosition = position => {
-  state$4.position = position;
-};
-const getEditor$1 = () => {
-  return state$4.currentEditor;
-};
-const getPosition = () => {
-  return state$4.position;
-};
-const hasListener = () => {
-  return state$4.hasListener;
-};
-
 // @ts-ignore
 const handlePointerCaptureLost = editor => {
-  clearEditor();
-  return editor;
+  return {
+    ...editor,
+    hasListener: false,
+    isSelecting: false,
+    selectionAutoMovePosition: {
+      columnIndex: 0,
+      rowIndex: 0
+    }
+  };
 };
 
-const handlePointerDown$1 = (state, button, altKey, ctrlKey, x, y, detail) => {
-  startSelecting();
-  return handleMouseDown(state, button, altKey, ctrlKey, x, y, detail);
+const handlePointerDown$1 = async (state, button, altKey, ctrlKey, x, y, detail) => {
+  const newState = await handleMouseDown(state, button, altKey, ctrlKey, x, y, detail);
+  return {
+    ...newState,
+    isSelecting: true
+  };
 };
 
 const moveRectangleSelection = (editor, position) => {
@@ -6437,6 +6421,43 @@ const requestAnimationFrame = fn => {
   globalThis.requestAnimationFrame(fn);
 };
 
+const shouldUpdateSelectionData = (oldState, newState) => {
+  return oldState.selections !== newState.selections || oldState.focused !== newState.focused || oldState.minLineY !== newState.minLineY || oldState.maxLineY !== newState.maxLineY || oldState.differences !== newState.differences || oldState.charWidth !== newState.charWidth || oldState.cursorWidth !== newState.cursorWidth || oldState.fontFamily !== newState.fontFamily || oldState.fontSize !== newState.fontSize || oldState.fontWeight !== newState.fontWeight || oldState.isMonospaceFont !== newState.isMonospaceFont || oldState.letterSpacing !== newState.letterSpacing || oldState.lines !== newState.lines || oldState.rowHeight !== newState.rowHeight || oldState.tabSize !== newState.tabSize || oldState.width !== newState.width;
+};
+const shouldUpdateVisibleTextData = (oldState, newState) => {
+  if (oldState.textInfos !== newState.textInfos || oldState.differences !== newState.differences) {
+    return false;
+  }
+  return oldState.lines !== newState.lines || oldState.tokenizerId !== newState.tokenizerId || oldState.minLineY !== newState.minLineY || oldState.maxLineY !== newState.maxLineY || oldState.decorations !== newState.decorations || oldState.embeds !== newState.embeds || oldState.deltaX !== newState.deltaX || oldState.width !== newState.width || oldState.highlightedLine !== newState.highlightedLine || oldState.debugEnabled !== newState.debugEnabled;
+};
+const updateDerivedState = async (oldState, newState) => {
+  let finalState = newState;
+  if (shouldUpdateVisibleTextData(oldState, newState)) {
+    const syncIncremental = getEnabled();
+    const {
+      differences,
+      textInfos
+    } = await getVisible$1(newState, syncIncremental);
+    finalState = {
+      ...newState,
+      differences,
+      textInfos
+    };
+  }
+  if (!shouldUpdateSelectionData(oldState, newState)) {
+    return finalState;
+  }
+  const {
+    cursorInfos,
+    selectionInfos
+  } = await getVisible(finalState);
+  return {
+    ...finalState,
+    cursorInfos,
+    selectionInfos
+  };
+};
+
 const LessThan = -1;
 const Equal = 0;
 const GreaterThan = 1;
@@ -6491,7 +6512,7 @@ const getNewSelections$5 = (anchor, position) => {
 
 // @ts-ignore
 const editorMoveSelection = (editor, position) => {
-  const anchor = getPosition$1();
+  const anchor = getPosition();
   const newSelections = getNewSelections$5(anchor, position);
   // TODO if selection equals previous selection -> do nothing
   return scheduleSelections(editor, newSelections);
@@ -6509,7 +6530,7 @@ const getNewEditor$1 = (editor, position) => {
     const newMinLineY = position.rowIndex;
     const newMaxLineY = position.rowIndex + diff;
     const newDeltaY = position.rowIndex * rowHeight;
-    const anchor = getPosition$1();
+    const anchor = getPosition();
     const newSelections = new Uint32Array([position.rowIndex - 1, position.columnIndex, anchor.rowIndex, anchor.columnIndex]);
     return {
       ...editor,
@@ -6524,7 +6545,7 @@ const getNewEditor$1 = (editor, position) => {
     const newMinLineY = position.rowIndex - diff;
     const newMaxLineY = position.rowIndex;
     const newDeltaY = newMinLineY * rowHeight;
-    const anchor = getPosition$1();
+    const anchor = getPosition();
     const newSelections = new Uint32Array([anchor.rowIndex, anchor.columnIndex, position.rowIndex + 1, position.columnIndex]);
     return {
       ...editor,
@@ -6536,12 +6557,13 @@ const getNewEditor$1 = (editor, position) => {
   }
   return editor;
 };
-const continueScrollingAndMovingSelection = async () => {
-  const editor = getEditor$1();
-  if (!editor) {
+const continueScrollingAndMovingSelection = async editorUid => {
+  const editorState = get$7(editorUid);
+  const editor = editorState?.newState;
+  if (!editor || !editor.hasListener || !editor.isSelecting) {
     return;
   }
-  const position = getPosition();
+  const position = editor.selectionAutoMovePosition;
   if (position.rowIndex === 0) {
     return;
   }
@@ -6549,19 +6571,18 @@ const continueScrollingAndMovingSelection = async () => {
   if (editor === newEditor) {
     return;
   }
-  // await Viewlet.setState(ViewletModuleId.EditorText, newEditor)
-  setEditor(newEditor);
   // @ts-ignore
   const delta = position.rowIndex < editor.minLineY ? -1 : 1;
-  setPosition({
-    columnIndex: position.columnIndex,
-    rowIndex: position.rowIndex + delta
-  });
-  requestAnimationFrame(continueScrollingAndMovingSelection);
-  // TODO get editor state
-  // if editor is disposed, return and remove animation frame
-  // on cursor up, remove animation frame
-  //
+  const nextEditor = {
+    ...newEditor,
+    selectionAutoMovePosition: {
+      columnIndex: position.columnIndex,
+      rowIndex: position.rowIndex + delta
+    }
+  };
+  const newEditorWithDerivedState = await updateDerivedState(editor, nextEditor);
+  set$8(editor.uid, editor, newEditorWithDerivedState);
+  requestAnimationFrame(() => continueScrollingAndMovingSelection(editorUid));
 };
 
 // @ts-ignore
@@ -6570,16 +6591,20 @@ const moveSelectionPx = async (editor, x, y) => {
   number(x);
   number(y);
   const position = await at(editor, x, y);
-  if (!hasListener() && (position.rowIndex < editor.minLineY || position.rowIndex > editor.maxLineY)) {
-    requestAnimationFrame(continueScrollingAndMovingSelection);
-    setEditor(editor);
-    setPosition(position);
+  const newEditor = editorMoveSelection(editor, position);
+  if (!editor.hasListener && (position.rowIndex < editor.minLineY || position.rowIndex > editor.maxLineY)) {
+    requestAnimationFrame(() => continueScrollingAndMovingSelection(editor.uid));
+    return {
+      ...newEditor,
+      hasListener: true,
+      selectionAutoMovePosition: position
+    };
   }
-  return editorMoveSelection(editor, position);
+  return newEditor;
 };
 
 const handlePointerMove = async (editor, x, y, altKey) => {
-  if (!isSelecting()) {
+  if (!editor.isSelecting) {
     return editor;
   }
   if (altKey) {
@@ -6589,8 +6614,15 @@ const handlePointerMove = async (editor, x, y, altKey) => {
 };
 
 const handlePointerUp = editor => {
-  clearEditor();
-  return editor;
+  return {
+    ...editor,
+    hasListener: false,
+    isSelecting: false,
+    selectionAutoMovePosition: {
+      columnIndex: 0,
+      rowIndex: 0
+    }
+  };
 };
 
 // @ts-ignore
@@ -9991,43 +10023,6 @@ const unsetAdditionalFocus = async focusKey => {
   await invoke$b('Focus.removeAdditionalFocus', focusKey);
 };
 
-const shouldUpdateSelectionData = (oldState, newState) => {
-  return oldState.selections !== newState.selections || oldState.focused !== newState.focused || oldState.minLineY !== newState.minLineY || oldState.maxLineY !== newState.maxLineY || oldState.differences !== newState.differences || oldState.charWidth !== newState.charWidth || oldState.cursorWidth !== newState.cursorWidth || oldState.fontFamily !== newState.fontFamily || oldState.fontSize !== newState.fontSize || oldState.fontWeight !== newState.fontWeight || oldState.isMonospaceFont !== newState.isMonospaceFont || oldState.letterSpacing !== newState.letterSpacing || oldState.lines !== newState.lines || oldState.rowHeight !== newState.rowHeight || oldState.tabSize !== newState.tabSize || oldState.width !== newState.width;
-};
-const shouldUpdateVisibleTextData = (oldState, newState) => {
-  if (oldState.textInfos !== newState.textInfos || oldState.differences !== newState.differences) {
-    return false;
-  }
-  return oldState.lines !== newState.lines || oldState.tokenizerId !== newState.tokenizerId || oldState.minLineY !== newState.minLineY || oldState.maxLineY !== newState.maxLineY || oldState.decorations !== newState.decorations || oldState.embeds !== newState.embeds || oldState.deltaX !== newState.deltaX || oldState.width !== newState.width || oldState.highlightedLine !== newState.highlightedLine || oldState.debugEnabled !== newState.debugEnabled;
-};
-const updateDerivedState = async (oldState, newState) => {
-  let finalState = newState;
-  if (shouldUpdateVisibleTextData(oldState, newState)) {
-    const syncIncremental = getEnabled();
-    const {
-      differences,
-      textInfos
-    } = await getVisible$1(newState, syncIncremental);
-    finalState = {
-      ...newState,
-      differences,
-      textInfos
-    };
-  }
-  if (!shouldUpdateSelectionData(oldState, newState)) {
-    return finalState;
-  }
-  const {
-    cursorInfos,
-    selectionInfos
-  } = await getVisible(finalState);
-  return {
-    ...finalState,
-    cursorInfos,
-    selectionInfos
-  };
-};
-
 const FocusEditor = 12;
 const FocusEditorCompletions = 9;
 const FocusEditorRename = 11;
@@ -11143,7 +11138,7 @@ const renderCss = (oldState, newState) => {
 };
 
 const renderFocus$2 = (oldState, newState) => {
-  const selector = '.EditorInput';
+  const selector = '.EditorInput textarea';
   return [FocusSelector, newState.uid, selector];
 };
 
@@ -11414,6 +11409,10 @@ const diffTree = (oldNodes, newNodes) => {
 
 const getEditorInputVirtualDom = () => {
   return [{
+    childCount: 1,
+    className: 'EditorInput',
+    type: Div
+  }, {
     ariaAutoComplete: 'list',
     ariaMultiLine: 'true',
     ariaRoleDescription: 'editor',
@@ -11421,7 +11420,6 @@ const getEditorInputVirtualDom = () => {
     autocomplete: 'off',
     autocorrect: 'off',
     childCount: 0,
-    className: 'EditorInput',
     name: 'editor',
     onBeforeInput: HandleBeforeInput,
     onBlur: HandleBlur,
@@ -11679,13 +11677,14 @@ const getEditorVirtualDom = ({
   selectionInfos = [],
   textInfos
 }) => {
+  const gutterDom = lineNumbers ? getEditorGutterVirtualDom(gutterInfos) : [];
   return [{
-    childCount: 2,
+    childCount: lineNumbers ? 2 : 1,
     className: 'Viewlet Editor',
     onContextMenu: HandleContextMenu,
     role: 'code',
     type: Div
-  }, ...getEditorGutterVirtualDom(gutterInfos), ...getEditorContentVirtualDom({
+  }, ...gutterDom, ...getEditorContentVirtualDom({
     cursorInfos,
     deltaY,
     diagnostics,
@@ -11882,16 +11881,17 @@ const renderGutterInfo = {
       maxLineY,
       minLineY
     } = newState;
+    if (!lineNumbers) {
+      return [];
+    }
     const gutterInfos = [];
-    if (lineNumbers) {
-      for (let i = minLineY; i < maxLineY; i++) {
-        gutterInfos.push(i + 1);
-      }
+    for (let i = minLineY; i < maxLineY; i++) {
+      gutterInfos.push(i + 1);
     }
     const dom = getEditorGutterVirtualDom$1(gutterInfos);
     return ['renderGutter', dom];
   },
-  isEqual: (oldState, newState) => oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY
+  isEqual: (oldState, newState) => oldState.lineNumbers === newState.lineNumbers && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY
 };
 const renderWidgets = {
   apply(oldState, newState) {