@lvce-editor/static-server 0.80.2 → 0.80.3

package/static/{be2da82 → 391f1f4}/packages/diff-view/dist/diffViewWorkerMain.js

@@ -63,7 +63,7 @@ class AssertionError extends Error {
 const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
-const String = 4;
+const String$1 = 4;
 const Boolean = 5;
 const Function = 6;
 const Null = 7;
@@ -75,7 +75,7 @@ const getType = value => {
     case 'function':
       return Function;
     case 'string':
-      return String;
+      return String$1;
     case 'object':
       if (value === null) {
         return Null;
@@ -1070,7 +1070,7 @@ const createMockRpc = ({
 };
 
 const rpcs = Object.create(null);
-const set$6 = (id, rpc) => {
+const set$8 = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$1 = id => {
@@ -1103,7 +1103,7 @@ const create$1 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$6(rpcId, mockRpc);
+      set$8(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1112,17 +1112,19 @@ const create$1 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$6(rpcId, rpc);
+      set$8(rpcId, rpc);
     }
   };
 };
 
 const Div = 4;
 const Text = 12;
+const Img = 17;
 const Reference = 100;
 
 const User = 1;
 
+const ErrorWorker = 3308;
 const ExtensionHostWorker = 44;
 const ExtensionManagementWorker = 9006;
 const FileSystemWorker = 209;
@@ -1134,6 +1136,15 @@ const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
+const {
+  invoke: invoke$2,
+  set: set$7
+} = create$1(218_933);
+
+const {
+  set: set$6
+} = create$1(ErrorWorker);
+
 const {
   invoke: invoke$1,
   set: set$5
@@ -1155,6 +1166,10 @@ const {
   invokeAndTransfer,
   set: set$2
 } = create$1(RendererWorker);
+const sendMessagePortToErrorWorker = async (port, rpcId) => {
+  const command = 'Errors.handleMessagePort';
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToErrorWorker', port, command, rpcId);
+};
 const sendMessagePortToFileSystemWorker = async (port, rpcId) => {
   const command = 'FileSystem.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker', port, command, rpcId);
@@ -1171,6 +1186,10 @@ const sendMessagePortToExtensionManagementWorker = async (port, rpcId) => {
   const command = 'Extensions.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionManagementWorker', port, command, rpcId);
 };
+const sendMessagePortToDiffWorker = async (port, rpcId = 0) => {
+  const command = 'Diff.handleMessagePort';
+  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToDiffWorker', port, command, rpcId);
+};
 
 const {
   set: set$1
@@ -1301,6 +1320,11 @@ const createDefaultState = () => ({
   contentLeft: '',
   contentRight: '',
   deltaY: 0,
+  diffMode: 'side-by-side',
+  errorLeftMessage: '',
+  errorLeftStack: '',
+  errorRightMessage: '',
+  errorRightStack: '',
   finalDeltaY: 0,
   focus: 0,
   gitRoot: '',
@@ -1309,24 +1333,36 @@ const createDefaultState = () => ({
   height: 100,
   id: 1,
   initial: false,
+  inlineChanges: [],
   inputSource: 0,
   inputValue: '',
   isResizing: false,
+  isScrollBarDragging: false,
   isVisible: true,
   itemHeight: 20,
+  knownImageExtensions: ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.svg', '.bmp', '.ico'],
+  layout: 'horizontal',
   leftWidth: 48,
+  lineNumbers: true,
   maxInputLines: 5,
   maxLineY: 0,
   minimumSliderSize: 30,
   minLineY: 0,
   platform: 0,
   providerId: '',
+  renderModeLeft: 'text',
+  renderModeRight: 'text',
   resizeOffsetX: 0,
+  resizeOffsetY: 0,
   rightWidth: 48,
   root: '/',
   scrollBarActive: false,
+  scrollBarDragOffsetY: 0,
   scrollBarHeight: 0,
   splitButtonEnabled: false,
+  totalLineCount: 1,
+  totalLineCountLeft: 1,
+  totalLineCountRight: 1,
   uri: '',
   uriLeft: '',
   uriRight: '',
@@ -1345,20 +1381,20 @@ const {
 
 const SASH_WIDTH = 4;
 const DEFAULT_MINIMUM_PANE_WIDTH = 50;
-const clamp = (value, minimum, maximum) => {
+const clamp$1 = (value, minimum, maximum) => {
   return Math.max(minimum, Math.min(value, maximum));
 };
-const getAvailableWidth = width => {
-  return Math.max(width - SASH_WIDTH, 0);
+const getAvailableSize = size => {
+  return Math.max(size - SASH_WIDTH, 0);
 };
 const getSashWidth = () => {
   return SASH_WIDTH;
 };
 const getMinimumPaneWidth = width => {
-  return Math.min(DEFAULT_MINIMUM_PANE_WIDTH, Math.floor(getAvailableWidth(width) / 2));
+  return Math.min(DEFAULT_MINIMUM_PANE_WIDTH, Math.floor(getAvailableSize(width) / 2));
 };
 const getDefaultPaneWidths = width => {
-  const availableWidth = getAvailableWidth(width);
+  const availableWidth = getAvailableSize(width);
   const leftWidth = Math.floor(availableWidth / 2);
   const rightWidth = availableWidth - leftWidth;
   return {
@@ -1367,13 +1403,31 @@ const getDefaultPaneWidths = width => {
   };
 };
 const getClampedLeftWidth = (width, leftWidth) => {
-  const availableWidth = getAvailableWidth(width);
+  const availableWidth = getAvailableSize(width);
   const minimumPaneWidth = getMinimumPaneWidth(width);
   const maximumLeftWidth = availableWidth - minimumPaneWidth;
-  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
+  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRightWidth = (width, leftWidth) => {
-  return getAvailableWidth(width) - leftWidth;
+  return getAvailableSize(width) - leftWidth;
+};
+const getPaneSizes = (size, ratio = 0.5) => {
+  const availableSize = getAvailableSize(size);
+  const leftWidth = Math.floor(availableSize * ratio);
+  const rightWidth = availableSize - leftWidth;
+  return {
+    leftWidth,
+    rightWidth
+  };
+};
+const getClampedPaneSize = (size, leftWidth) => {
+  const availableSize = getAvailableSize(size);
+  const minimumPaneWidth = Math.min(DEFAULT_MINIMUM_PANE_WIDTH, Math.floor(availableSize / 2));
+  const maximumLeftWidth = availableSize - minimumPaneWidth;
+  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
+};
+const getRemainingPaneSize = (size, leftWidth) => {
+  return getAvailableSize(size) - leftWidth;
 };
 
 const create2 = (id, uri, x, y, width, height, workspacePath, platform, assetDir) => {
@@ -1400,7 +1454,7 @@ const create2 = (id, uri, x, y, width, height, workspacePath, platform, assetDir
 };
 
 const isEqual$3 = (oldState, newState) => {
-  return oldState.leftWidth === newState.leftWidth && oldState.rightWidth === newState.rightWidth;
+  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.finalDeltaY === newState.finalDeltaY && oldState.height === newState.height && oldState.itemHeight === newState.itemHeight && oldState.layout === newState.layout && oldState.leftWidth === newState.leftWidth && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY && oldState.rightWidth === newState.rightWidth && oldState.scrollBarHeight === newState.scrollBarHeight && oldState.totalLineCount === newState.totalLineCount;
 };
 
 const isEqual$2 = (oldState, newState) => {
@@ -1408,7 +1462,7 @@ const isEqual$2 = (oldState, newState) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.deltaY === newState.deltaY && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY;
+  return oldState.deltaY === newState.deltaY && oldState.diffMode === newState.diffMode && oldState.lineNumbers === newState.lineNumbers && oldState.layout === newState.layout && oldState.maxLineY === newState.maxLineY && oldState.minLineY === newState.minLineY;
 };
 
 const RenderItems = 4;
@@ -1444,15 +1498,26 @@ const diff2 = uid => {
   return result;
 };
 
-const handleSashPointerDown = (state, clientX) => {
+const handleSashPointerDown = (state, clientX, clientY) => {
+  const isVertical = state.layout === 'vertical';
   return {
     ...state,
     isResizing: true,
-    resizeOffsetX: clientX - state.x - state.leftWidth
+    resizeOffsetX: isVertical ? 0 : clientX - state.x - state.leftWidth,
+    resizeOffsetY: isVertical ? clientY - state.y - state.leftWidth : 0
   };
 };
 
-const getSashPointerMoveWidths = (state, clientX) => {
+const getSashPointerMoveWidths = (state, clientX, clientY) => {
+  if (state.layout === 'vertical') {
+    const rawTopHeight = clientY - state.y - state.resizeOffsetY;
+    const leftWidth = getClampedPaneSize(state.height, rawTopHeight);
+    const rightWidth = getRemainingPaneSize(state.height, leftWidth);
+    return {
+      leftWidth,
+      rightWidth
+    };
+  }
   const rawLeftWidth = clientX - state.x - state.resizeOffsetX;
   const leftWidth = getClampedLeftWidth(state.width, rawLeftWidth);
   const rightWidth = getRightWidth(state.width, leftWidth);
@@ -1461,14 +1526,14 @@ const getSashPointerMoveWidths = (state, clientX) => {
     rightWidth
   };
 };
-const handleSashPointerMove = (state, clientX) => {
+const handleSashPointerMove = (state, clientX, clientY) => {
   if (!state.isResizing) {
     return state;
   }
   const {
     leftWidth,
     rightWidth
-  } = getSashPointerMoveWidths(state, clientX);
+  } = getSashPointerMoveWidths(state, clientX, clientY);
   return {
     ...state,
     leftWidth,
@@ -1476,23 +1541,135 @@ const handleSashPointerMove = (state, clientX) => {
   };
 };
 
-const handleSashPointerUp = (state, clientX) => {
+const handleSashPointerUp = (state, clientX, clientY) => {
   if (!state.isResizing) {
     return state;
   }
   const {
     leftWidth,
     rightWidth
-  } = getSashPointerMoveWidths(state, clientX);
+  } = getSashPointerMoveWidths(state, clientX, clientY);
   return {
     ...state,
     isResizing: false,
     leftWidth,
     resizeOffsetX: 0,
+    resizeOffsetY: 0,
     rightWidth
   };
 };
 
+const getScrollBarThumbTop = (height, scrollBarHeight, deltaY, finalDeltaY) => {
+  const scrollRange = Math.max(height - scrollBarHeight, 0);
+  if (scrollRange === 0 || finalDeltaY <= 0) {
+    return 0;
+  }
+  return deltaY / finalDeltaY * scrollRange;
+};
+
+const normalizeFloatingPointError = value => {
+  return Number(value.toPrecision(16));
+};
+const handleScrollBarPointerDown = (state, clientY) => {
+  if (!state.scrollBarActive) {
+    return state;
+  }
+  const thumbTop = getScrollBarThumbTop(state.height, state.scrollBarHeight, state.deltaY, state.finalDeltaY);
+  return {
+    ...state,
+    isScrollBarDragging: true,
+    scrollBarDragOffsetY: normalizeFloatingPointError(clientY - state.y - thumbTop)
+  };
+};
+
+const getDeltaYFromScrollBarThumbTop = (height, scrollBarHeight, thumbTop, finalDeltaY) => {
+  const scrollRange = Math.max(height - scrollBarHeight, 0);
+  if (scrollRange === 0 || finalDeltaY <= 0) {
+    return 0;
+  }
+  const clampedThumbTop = Math.min(Math.max(thumbTop, 0), scrollRange);
+  return clampedThumbTop / scrollRange * finalDeltaY;
+};
+
+const getNumberOfVisibleItems = (height, itemHeight) => {
+  if (itemHeight <= 0) {
+    return 0;
+  }
+  return Math.max(Math.ceil(height / itemHeight), 1);
+};
+
+const getScrollBarHeight = (height, contentHeight, minimumSliderSize) => {
+  if (contentHeight <= 0) {
+    return height;
+  }
+  if (contentHeight <= height) {
+    return height;
+  }
+  return Math.max(height / contentHeight * height, minimumSliderSize);
+};
+
+const clamp = (value, minimum, maximum) => {
+  return Math.min(Math.max(value, minimum), maximum);
+};
+const getScrollState = (height, itemHeight, totalLineCount, minimumSliderSize, deltaY) => {
+  const safeItemHeight = Math.max(itemHeight, 1);
+  const safeTotalLineCount = Math.max(totalLineCount, 1);
+  const contentHeight = safeTotalLineCount * safeItemHeight;
+  const finalDeltaY = Math.max(contentHeight - height, 0);
+  const clampedDeltaY = clamp(deltaY, 0, finalDeltaY);
+  const minLineY = Math.floor(clampedDeltaY / safeItemHeight);
+  const numberOfVisibleItems = getNumberOfVisibleItems(height, safeItemHeight);
+  const maxLineY = Math.min(minLineY + numberOfVisibleItems, safeTotalLineCount);
+  const scrollBarHeight = getScrollBarHeight(height, contentHeight, minimumSliderSize);
+  return {
+    deltaY: clampedDeltaY,
+    finalDeltaY,
+    maxLineY,
+    minLineY,
+    scrollBarActive: contentHeight > height,
+    scrollBarHeight
+  };
+};
+
+const handleScrollBarPointerMove = (state, clientY) => {
+  if (!state.isScrollBarDragging) {
+    return state;
+  }
+  const thumbTop = clientY - state.y - state.scrollBarDragOffsetY;
+  const deltaY = getDeltaYFromScrollBarThumbTop(state.height, state.scrollBarHeight, thumbTop, state.finalDeltaY);
+  return {
+    ...state,
+    ...getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, deltaY)
+  };
+};
+
+const handleScrollBarPointerUp = (state, clientY) => {
+  const nextState = handleScrollBarPointerMove(state, clientY);
+  return {
+    ...nextState,
+    isScrollBarDragging: false,
+    scrollBarDragOffsetY: 0
+  };
+};
+
+const getWheelDeltaY = (deltaMode, deltaY, itemHeight, height) => {
+  switch (deltaMode) {
+    case 1:
+      return deltaY * itemHeight;
+    case 2:
+      return deltaY * height;
+    default:
+      return deltaY;
+  }
+};
+const handleWheel = (state, deltaMode, deltaY) => {
+  const nextDeltaY = state.deltaY + getWheelDeltaY(deltaMode, deltaY, state.itemHeight, state.height);
+  return {
+    ...state,
+    ...getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, nextDeltaY)
+  };
+};
+
 const sendMessagePortToExtensionHostWorker = async port => {
   await sendMessagePortToExtensionHostWorker$1(port, 0);
 };
@@ -1503,7 +1680,7 @@ const createExtensionHostRpc = async () => {
       commandMap: {},
       send: sendMessagePortToExtensionHostWorker
     });
-    return rpc;
+    set$5(rpc);
   } catch (error) {
     throw new VError(error, `Failed to create extension host rpc`);
   }
@@ -1519,12 +1696,32 @@ const createTextMeasurementWorkerRpc = async () => {
       commandMap: {},
       send: sendMessagePortToTextMeasurementWorker
     });
-    return rpc;
+    set$1(rpc);
   } catch (error) {
     throw new VError(error, `Failed to create text measurement rpc`);
   }
 };
 
+const initializeDiffWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToDiffWorker(port, 0);
+    }
+  });
+  set$7(rpc);
+};
+
+const initializeErrorWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToErrorWorker(port, 0);
+    }
+  });
+  set$6(rpc);
+};
+
 const createExtensionManagementWorkerRpc = async () => {
   try {
     const rpc = await create$4({
@@ -1557,18 +1754,27 @@ const initializeFileSystemWorker = async () => {
 };
 
 const initialize = async () => {
-  const [extensionHostRpc, textRpc] = await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeExtensionManagementWorker(), initializeFileSystemWorker()]);
-  set$5(extensionHostRpc);
-  set$1(textRpc);
+  await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeDiffWorker(), initializeExtensionManagementWorker(), initializeFileSystemWorker(), initializeErrorWorker()]);
+};
+
+const getInlineDiffChanges = (linesLeft, linesRight) => {
+  return invoke$2('Diff.diffInline', linesLeft, linesRight);
+};
+
+const getInlineDiffState = async (contentLeft, contentRight) => {
+  const linesLeft = contentLeft ? contentLeft.split('\n') : [''];
+  const linesRight = contentRight ? contentRight.split('\n') : [''];
+  const inlineChanges = await getInlineDiffChanges(linesLeft, linesRight);
+  return {
+    inlineChanges,
+    totalLineCount: Math.max(inlineChanges.length, 1)
+  };
 };
 
 const inlineDiffPrefix = 'inline-diff://';
+const diffPrefix = 'diff://';
 const diffSeparator = '<->';
-const getInlineDiffUris = uri => {
-  if (!uri.startsWith(inlineDiffPrefix)) {
-    return ['', uri];
-  }
-  const contentPart = uri.slice(inlineDiffPrefix.length);
+const parseDiffUris = contentPart => {
   const separatorIndex = contentPart.indexOf(diffSeparator);
   if (separatorIndex === -1) {
     return ['', contentPart];
@@ -1577,6 +1783,16 @@ const getInlineDiffUris = uri => {
   const uriRight = contentPart.slice(separatorIndex + diffSeparator.length);
   return [uriLeft, uriRight];
 };
+const getInlineDiffUris = uri => {
+  if (uri.startsWith(inlineDiffPrefix)) {
+    return parseDiffUris(uri.slice(inlineDiffPrefix.length));
+  }
+  if (uri.startsWith(diffPrefix)) {
+    return parseDiffUris(uri.slice(diffPrefix.length));
+  } else {
+    return ['', uri];
+  }
+};
 
 const getLineCount = content => {
   if (!content) {
@@ -1598,23 +1814,6 @@ const getMinLineY = savedState => {
   return 0;
 };
 
-const getNumberOfVisibleItems = (height, itemHeight) => {
-  if (itemHeight <= 0) {
-    return 0;
-  }
-  return Math.max(Math.ceil(height / itemHeight), 1);
-};
-
-const getScrollBarHeight = (height, contentHeight, minimumSliderSize) => {
-  if (contentHeight <= 0) {
-    return height;
-  }
-  if (contentHeight <= height) {
-    return height;
-  }
-  return Math.max(height / contentHeight * height, minimumSliderSize);
-};
-
 const getPath = (protocol, uri) => {
   if (!uri) {
     return '';
@@ -1637,6 +1836,133 @@ const getProtocol = uri => {
   return 'file';
 };
 
+const getFileExtension = uri => {
+  const protocol = getProtocol(uri);
+  const path = getPath(protocol, uri);
+  const cleanPath = path.split('?')[0].split('#')[0];
+  const extensionIndex = cleanPath.lastIndexOf('.');
+  if (extensionIndex === -1) {
+    return '';
+  }
+  return cleanPath.slice(extensionIndex).toLowerCase();
+};
+const getRenderMode = (uri, knownImageExtensions) => {
+  const extension = getFileExtension(uri);
+  if (knownImageExtensions.includes(extension)) {
+    return 'image';
+  }
+  return 'text';
+};
+
+const InlineDiffRowType = {
+  Context: 'context',
+  Deletion: 'deletion',
+  Insertion: 'insertion'
+};
+const lookAheadLimit = 3;
+const getLines = content => {
+  return content ? content.split('\n') : [''];
+};
+const findLookAheadMatch = (lines, startIndex, needle) => {
+  const endIndex = Math.min(startIndex + lookAheadLimit, lines.length - 1);
+  for (let i = startIndex; i <= endIndex; i++) {
+    if (lines[i] === needle) {
+      return i;
+    }
+  }
+  return -1;
+};
+const getInlineDiffRows = (contentLeft, contentRight) => {
+  const leftLines = getLines(contentLeft);
+  const rightLines = getLines(contentRight);
+  const rows = [];
+  let leftIndex = 0;
+  let rightIndex = 0;
+  let leftLineNumber = 1;
+  let rightLineNumber = 1;
+  while (leftIndex < leftLines.length || rightIndex < rightLines.length) {
+    const leftLine = leftLines[leftIndex];
+    const rightLine = rightLines[rightIndex];
+    if (leftIndex < leftLines.length && rightIndex < rightLines.length && leftLine === rightLine) {
+      rows.push({
+        lineNumberLeft: leftLineNumber,
+        lineNumberRight: rightLineNumber,
+        text: leftLine,
+        type: InlineDiffRowType.Context
+      });
+      leftIndex++;
+      rightIndex++;
+      leftLineNumber++;
+      rightLineNumber++;
+      continue;
+    }
+    if (leftIndex < leftLines.length && rightIndex < rightLines.length) {
+      const leftMatch = findLookAheadMatch(leftLines, leftIndex + 1, rightLine);
+      const rightMatch = findLookAheadMatch(rightLines, rightIndex + 1, leftLine);
+      if (leftMatch !== -1 && (rightMatch === -1 || leftMatch - leftIndex <= rightMatch - rightIndex)) {
+        while (leftIndex < leftMatch) {
+          rows.push({
+            lineNumberLeft: leftLineNumber,
+            lineNumberRight: null,
+            text: leftLines[leftIndex],
+            type: InlineDiffRowType.Deletion
+          });
+          leftIndex++;
+          leftLineNumber++;
+        }
+        continue;
+      }
+      if (rightMatch !== -1) {
+        while (rightIndex < rightMatch) {
+          rows.push({
+            lineNumberLeft: null,
+            lineNumberRight: rightLineNumber,
+            text: rightLines[rightIndex],
+            type: InlineDiffRowType.Insertion
+          });
+          rightIndex++;
+          rightLineNumber++;
+        }
+        continue;
+      }
+    }
+    if (leftIndex < leftLines.length) {
+      rows.push({
+        lineNumberLeft: leftLineNumber,
+        lineNumberRight: null,
+        text: leftLines[leftIndex],
+        type: InlineDiffRowType.Deletion
+      });
+      leftIndex++;
+      leftLineNumber++;
+    }
+    if (rightIndex < rightLines.length) {
+      rows.push({
+        lineNumberLeft: null,
+        lineNumberRight: rightLineNumber,
+        text: rightLines[rightIndex],
+        type: InlineDiffRowType.Insertion
+      });
+      rightIndex++;
+      rightLineNumber++;
+    }
+  }
+  return rows;
+};
+
+const getDisplayedContent = (content, errorMessage, errorStack) => {
+  if (!errorMessage) {
+    return content;
+  }
+  return errorStack ? `${errorMessage}\n\n${errorStack}` : errorMessage;
+};
+const getTotalLineCount = (diffMode, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack, renderModeLeft, renderModeRight) => {
+  if (diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage) {
+    return getInlineDiffRows(contentLeft, contentRight).length;
+  }
+  return Math.max(renderModeLeft === 'image' ? 1 : getLineCount(getDisplayedContent(contentLeft, errorLeftMessage, errorLeftStack)), renderModeRight === 'image' ? 1 : getLineCount(getDisplayedContent(contentRight, errorRightMessage, errorRightStack)));
+};
+
 const windowsDriveLetterRegex = /^[a-zA-Z]:\\/;
 const encodeFilePath = path => {
   return encodeURI(path).replaceAll('#', '%23').replaceAll('?', '%3F');
@@ -1664,80 +1990,334 @@ const readFile = async uri => {
     return readFile$1(toFileUri(uri));
   }
   const path = getPath(protocol, uri);
+  if (protocol === 'memfs') {
+    return invoke$1('FileSystemMemory.readFile', path);
+  }
   return invoke$1('ExtensionHostFileSystem.readFile', protocol, path);
 };
 
+const getErrorMessage = error => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+};
+const getErrorStack = error => {
+  if (error instanceof Error && error.stack) {
+    return error.stack;
+  }
+  return '';
+};
+const loadFileContent = async uri => {
+  try {
+    const content = await readFile(uri);
+    return {
+      content,
+      errorMessage: '',
+      errorStack: ''
+    };
+  } catch (error) {
+    return {
+      content: '',
+      errorMessage: getErrorMessage(error),
+      errorStack: getErrorStack(error)
+    };
+  }
+};
 const loadFileContents = async (uriLeft, uriRight) => {
-  return Promise.all([readFile(uriLeft), readFile(uriRight)]);
+  return Promise.all([loadFileContent(uriLeft), loadFileContent(uriRight)]);
 };
 
 const loadContent = async (state, savedState) => {
   const {
     height,
     itemHeight,
+    knownImageExtensions,
     minimumSliderSize,
     uri
   } = state;
   const [uriLeft, uriRight] = getInlineDiffUris(uri);
-  const [contentLeft, contentRight] = await loadFileContents(uriLeft, uriRight);
+  const [leftResult, rightResult] = await loadFileContents(uriLeft, uriRight);
+  const {
+    content: contentLeft,
+    errorMessage: errorLeftMessage,
+    errorStack: errorLeftStack
+  } = leftResult;
+  const {
+    content: contentRight,
+    errorMessage: errorRightMessage,
+    errorStack: errorRightStack
+  } = rightResult;
+  const renderModeLeft = getRenderMode(uriLeft, knownImageExtensions);
+  const renderModeRight = getRenderMode(uriRight, knownImageExtensions);
   const minLineY = getMinLineY(savedState);
-  const total = Math.max(getLineCount(contentLeft), getLineCount(contentRight));
-  const contentHeight = total * itemHeight;
-  const numberOfVisibleItems = getNumberOfVisibleItems(height, itemHeight);
-  const maxLineY = Math.min(minLineY + numberOfVisibleItems, total);
-  const deltaY = minLineY * itemHeight;
-  const finalDeltaY = Math.max(contentHeight - height, 0);
-  const scrollBarHeight = getScrollBarHeight(height, contentHeight, minimumSliderSize);
+  const displayedContentLeft = getDisplayedContent(contentLeft, errorLeftMessage, errorLeftStack);
+  const displayedContentRight = getDisplayedContent(contentRight, errorRightMessage, errorRightStack);
+  const totalLineCountLeft = renderModeLeft === 'image' ? 1 : getLineCount(displayedContentLeft);
+  const totalLineCountRight = renderModeRight === 'image' ? 1 : getLineCount(displayedContentRight);
+  const canComputeInlineDiff = renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage;
+  const {
+    inlineChanges,
+    totalLineCount
+  } = canComputeInlineDiff ? await getInlineDiffState(contentLeft, contentRight) : {
+    inlineChanges: [],
+    totalLineCount: Math.max(totalLineCountLeft, totalLineCountRight)
+  };
   return {
     ...state,
     contentLeft,
     contentRight,
-    deltaY,
-    finalDeltaY,
+    errorLeftMessage,
+    errorLeftStack,
+    errorRightMessage,
+    errorRightStack,
     initial: false,
-    maxLineY,
-    minLineY,
-    scrollBarActive: contentHeight > height,
-    scrollBarHeight,
+    inlineChanges,
+    renderModeLeft,
+    renderModeRight,
+    totalLineCount,
+    totalLineCountLeft,
+    totalLineCountRight,
     uriLeft,
-    uriRight
+    uriRight,
+    ...getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, minLineY * itemHeight)
   };
 };
 
+const getCss = () => {
+  return `
+.DiffEditorErrorStack {
+  background: rgba(0, 0, 0, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 3px solid rgba(248, 81, 73, 0.6);
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.86);
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 100%;
+  min-width: 0;
+  overflow: auto;
+  padding: 8px 10px;
+  user-select: text;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+  `;
+};
+
 const renderCss = (oldState, newState) => {
   const {
+    deltaY,
+    finalDeltaY,
+    height,
     id,
+    itemHeight,
     leftWidth,
-    rightWidth
+    maxLineY,
+    minLineY,
+    rightWidth,
+    scrollBarHeight,
+    totalLineCount
+  } = newState;
+  const topSpacerHeight = minLineY * itemHeight;
+  const bottomSpacerHeight = Math.max(totalLineCount - maxLineY, 0) * itemHeight;
+  const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY);
+  const {
+    layout
   } = newState;
+  const staticCss = getCss();
   const css = `
 :root {
+  --ItemHeight: ${itemHeight}px;
   --LeftWidth: ${leftWidth}px;
   --RightWidth: ${rightWidth}px;
+  --DiffEditorHeight: ${height}px;
+  --EditorRowHeight: ${itemHeight}px;
+  --TopSpacerHeight: ${topSpacerHeight}px;
+  --BottomSpacerHeight: ${bottomSpacerHeight}px;
+  --ScrollBarHeight: ${scrollBarHeight}px;
+  --ScrollBarThumbTop: ${scrollBarThumbTop}px;
 }
 
 .DiffEditor {
   display: flex;
+  height: var(--DiffEditorHeight);
+  position: relative;
+  width: 100%;
+}
+
+.DiffEditorHorizontal {
+  flex-direction: row;
+}
+
+.DiffEditorVertical {
+  flex-direction: column;
+}
+
+.InlineDiffEditor {
+  flex-direction: column;
 }
 
 .DiffEditorContent {
   contain: strict;
+  height: 100%;
+  overflow: hidden;
+}
+
+.InlineDiffEditorContent {
+  display: flex;
+  height: 100%;
   overflow: hidden;
 }
 
+.DiffEditorContentLeft,
+.DiffEditorContentRight {
+  display: flex;
+  overflow: hidden;
+}
+
+.DiffEditorGutter {
+  box-sizing: border-box;
+  color: rgba(255, 255, 255, 0.55);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  font-family: monospace;
+  overflow: hidden;
+  padding: 0 8px 0 12px;
+  text-align: right;
+  user-select: none;
+}
+
+.DiffEditorLineNumber {
+  box-sizing: border-box;
+  height: var(--ItemHeight);
+  line-height: var(--ItemHeight);
+  white-space: pre;
+}
+
+.DiffEditorRows {
+  contain: strict;
+  flex: 1;
+  font-family: monospace;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.DiffEditor .EditorRow {
+  box-sizing: border-box;
+  height: var(--ItemHeight);
+  line-height: var(--ItemHeight);
+  white-space: pre;
+}
+
+.DiffEditor .Deletion {
+  background: rgba(255, 0, 0, 0.16);
+  color: #ffb3b3;
+}
+
+.DiffEditor .Insertion {
+  background: rgba(0, 128, 0, 0.18);
+  color: #b7f7c0;
+}
+
+.ImageContent {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  overflow: auto;
+}
+
+.EditorRow {
+  min-height: var(--EditorRowHeight);
+}
+
+.InlineDiffEditor .EditorRow,
+.InlineDiffEditor .Insertion,
+.InlineDiffEditor .Deletion {
+  padding: 0 8px;
+}
+
+.Insertion {
+  background: rgba(46, 160, 67, 0.18);
+}
+
+.Deletion {
+  background: rgba(248, 81, 73, 0.18);
+}
+
+.ImageElement {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+}
+
 .DiffEditorContentLeft {
-  width: var(--LeftWidth);
+  ${layout === 'vertical' ? 'height: var(--LeftWidth);' : 'width: var(--LeftWidth);'}
 }
 
 .DiffEditorContentRight {
-  width: var(--RightWidth);
+  ${layout === 'vertical' ? 'height: var(--RightWidth);' : 'width: var(--RightWidth);'}
+}
+
+.DiffEditorError {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.DiffEditorErrorMessage {
+  font-weight: 600;
+}
+
+.DiffEditorSpacerTop {
+  height: var(--TopSpacerHeight);
+}
+
+.DiffEditorSpacerBottom {
+  height: var(--BottomSpacerHeight);
 }
 
 .Sash {
-  cursor: col-resize;
   flex-shrink: 0;
+}
+
+.SashVertical {
+  cursor: col-resize;
   width: ${getSashWidth()}px;
 }
+
+.SashHorizontal {
+  cursor: row-resize;
+  height: ${getSashWidth()}px;
+}
+
+.ScrollBar {
+  background: rgba(128, 128, 128, 0.15);
+  border-radius: 4px;
+  height: 100%;
+  position: absolute;
+  right: 2px;
+  top: 0;
+  width: 8px;
+}
+
+.ScrollBarThumb {
+  background: rgba(128, 128, 128, 0.45);
+  border-radius: 4px;
+  cursor: pointer;
+  height: var(--ScrollBarHeight);
+  position: absolute;
+  top: var(--ScrollBarThumbTop);
+  width: 100%;
+}
+
+${staticCss}
 `;
   return [SetCss, id, css];
 };
@@ -2050,78 +2630,407 @@ const DiffEditor = 'DiffEditor';
 const DiffEditorContent = 'DiffEditorContent';
 const DiffEditorContentLeft = 'DiffEditorContentLeft';
 const DiffEditorContentRight = 'DiffEditorContentRight';
+const DiffEditorError = 'DiffEditorError';
+const DiffEditorErrorMessage = 'DiffEditorErrorMessage';
+const DiffEditorErrorStack = 'DiffEditorErrorStack';
+const DiffEditorSpacerBottom = 'DiffEditorSpacerBottom';
+const DiffEditorSpacerTop = 'DiffEditorSpacerTop';
+const DiffEditorGutter = 'DiffEditorGutter';
+const DiffEditorLineNumber = 'DiffEditorLineNumber';
+const DiffEditorRows = 'DiffEditorRows';
+const DiffEditorHorizontal = 'DiffEditorHorizontal';
+const DiffEditorVertical = 'DiffEditorVertical';
 const EditorRow = 'EditorRow';
+const EditorRowDeletion = 'EditorRow Deletion';
+const EditorRowInsertion = 'EditorRow Insertion';
+const ImageContent = 'ImageContent';
+const ImageElement = 'ImageElement';
+const InlineDiffEditor = 'InlineDiffEditor';
+const InlineDiffEditorContent = 'InlineDiffEditorContent';
 const Sash = 'Sash';
+const SashHorizontal = 'SashHorizontal';
 const SashVertical = 'SashVertical';
+const ScrollBar = 'ScrollBar';
+const ScrollBarThumb = 'ScrollBarThumb';
 const Viewlet = 'Viewlet';
 
+const HandleWheel = 9;
 const HandleSashPointerDown = 11;
+const HandleScrollBarPointerDown = 14;
+
+const getErrorStackDom = errorStack => {
+  if (!errorStack) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: DiffEditorErrorStack,
+    type: Div
+  }, text(errorStack)];
+};
+
+const getErrorDom = (contentClassName, errorMessage, errorStack) => {
+  const childCount = errorStack ? 2 : 1;
+  return [{
+    childCount: 1,
+    className: DiffEditorContent,
+    type: Div
+  }, {
+    childCount,
+    className: `${contentClassName} ${DiffEditorError}`,
+    type: Div
+  }, {
+    childCount: 1,
+    className: DiffEditorErrorMessage,
+    type: Div
+  }, text(errorMessage), ...getErrorStackDom(errorStack)];
+};
+
+const getLineNumberDom = lineNumber => {
+  return [{
+    childCount: 1,
+    className: DiffEditorLineNumber,
+    type: Div
+  }, text(String(lineNumber))];
+};
+
+const getLineNumbersDom = (startLineNumber, lineCount) => {
+  return [{
+    childCount: lineCount,
+    className: DiffEditorGutter,
+    type: Div
+  }, ...Array.from({
+    length: lineCount
+  }, (_, index) => getLineNumberDom(startLineNumber + index)).flat()];
+};
 
-const getRowDom = line => {
+const getRowDom = (line, className = EditorRow) => {
   return [{
     childCount: 1,
-    className: EditorRow,
+    className,
     type: Div
   }, text(line)];
 };
-const getRowsDom = lines => {
-  return lines.flatMap(getRowDom);
+
+const getRowsDom = (lines, classNames = []) => {
+  return lines.flatMap((line, index) => getRowDom(line, classNames[index] || EditorRow));
+};
+
+const getVisibleRows = (content, totalLineCount, minLineY, maxLineY) => {
+  const lines = content ? content.split('\n') : [''];
+  const visibleCount = Math.max(maxLineY - minLineY, 0);
+  const visibleLines = lines.slice(minLineY, maxLineY);
+  if (visibleLines.length === visibleCount) {
+    return visibleLines;
+  }
+  const paddedLines = [...visibleLines];
+  while (paddedLines.length < visibleCount && paddedLines.length < totalLineCount) {
+    paddedLines.push('');
+  }
+  return paddedLines;
+};
+
+const None = 0;
+const Insertion = 1;
+const Deletion = 2;
+
+const getLine = (lines, index) => {
+  if (index < 0 || index >= lines.length) {
+    return '';
+  }
+  return lines[index];
+};
+const getRowClassName$1 = (type, side) => {
+  if (side === 'left' && type === Deletion) {
+    return EditorRowDeletion;
+  }
+  if (side === 'right' && type === Insertion) {
+    return EditorRowInsertion;
+  }
+  return EditorRow;
+};
+const getRowText$1 = (lines, inlineChange, side) => {
+  switch (inlineChange.type) {
+    case Deletion:
+      return side === 'left' ? getLine(lines, inlineChange.leftIndex) : '';
+    case Insertion:
+      return side === 'right' ? getLine(lines, inlineChange.rightIndex) : '';
+    case None:
+      return getLine(lines, side === 'left' ? inlineChange.leftIndex : inlineChange.rightIndex);
+    default:
+      return '';
+  }
+};
+const getVisibleInlineDiffRows = (content, totalLineCount, inlineChanges, minLineY, maxLineY, side) => {
+  if (inlineChanges.length === 0) {
+    return getVisibleRows(content, totalLineCount, minLineY, maxLineY).map(line => ({
+      className: EditorRow,
+      text: line
+    }));
+  }
+  const lines = content ? content.split('\n') : [''];
+  return inlineChanges.slice(minLineY, maxLineY).map(inlineChange => ({
+    className: getRowClassName$1(inlineChange.type, side),
+    text: getRowText$1(lines, inlineChange, side)
+  }));
+};
+
+const getContentDomWithLineNumbers = (contentClassName, startLineNumber, lineCount, rowsChildCount, rows) => {
+  return [{
+    childCount: 1,
+    className: DiffEditorContent,
+    type: Div
+  }, {
+    childCount: 2,
+    className: contentClassName,
+    type: Div
+  }, ...getLineNumbersDom(startLineNumber, lineCount), {
+    childCount: rowsChildCount,
+    className: DiffEditorRows,
+    type: Div
+  }, {
+    childCount: 0,
+    className: DiffEditorSpacerTop,
+    type: Div
+  }, ...rows, {
+    childCount: 0,
+    className: DiffEditorSpacerBottom,
+    type: Div
+  }];
+};
+const getContentDomWithoutLineNumbers = (contentClassName, rowsChildCount, rows) => {
+  return [{
+    childCount: 1,
+    className: DiffEditorContent,
+    type: Div
+  }, {
+    childCount: rowsChildCount,
+    className: contentClassName,
+    type: Div
+  }, {
+    childCount: 0,
+    className: DiffEditorSpacerTop,
+    type: Div
+  }, ...rows, {
+    childCount: 0,
+    className: DiffEditorSpacerBottom,
+    type: Div
+  }];
+};
+const getContentDom = (contentClassName, content, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, side) => {
+  if (errorMessage) {
+    return getErrorDom(contentClassName, errorMessage, errorStack);
+  }
+  const lines = getVisibleInlineDiffRows(content, totalLineCount, inlineChanges, minLineY, maxLineY, side);
+  const rows = getRowsDom(lines.map(line => line.text), lines.map(line => line.className));
+  const startLineNumber = minLineY + 1;
+  const rowsChildCount = lines.length + 2;
+  if (lineNumbers) {
+    return getContentDomWithLineNumbers(contentClassName, startLineNumber, lines.length, rowsChildCount, rows);
+  }
+  return getContentDomWithoutLineNumbers(contentClassName, rowsChildCount, rows);
+};
+
+const getContentLeftDom = (contentLeft, errorMessage = '', errorStack = '', lineNumbers = true, totalLineCount = contentLeft ? contentLeft.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = []) => {
+  return getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'left');
+};
+
+const getContentRightDom = (contentRight, errorMessage = '', errorStack = '', lineNumbers = true, totalLineCount = contentRight ? contentRight.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = []) => {
+  return getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'right');
+};
+
+const getImageSrc = uri => {
+  const protocol = getProtocol(uri);
+  if (protocol === 'data') {
+    return `data:${getPath(protocol, uri)}`;
+  }
+  if (protocol === 'file') {
+    return toFileUri(uri);
+  }
+  return uri;
 };
 
-const getContentLeftDom = contentLeft => {
-  const lines = contentLeft.split('\n');
-  const rows = getRowsDom(lines);
+const getImageLeftDom = uriLeft => {
   return [{
     childCount: 1,
     className: DiffEditorContent,
     type: Div
   }, {
-    childCount: lines.length,
+    childCount: 1,
     className: DiffEditorContentLeft,
     type: Div
-  }, ...rows];
+  }, {
+    childCount: 1,
+    className: ImageContent,
+    type: Div
+  }, {
+    alt: uriLeft,
+    childCount: 0,
+    className: ImageElement,
+    src: getImageSrc(uriLeft),
+    type: Img
+  }];
 };
 
-const getContentRightDom = contentRight => {
-  const lines = contentRight.split('\n');
-  const rows = getRowsDom(lines);
+const getImageRightDom = uriRight => {
   return [{
     childCount: 1,
     className: DiffEditorContent,
     type: Div
   }, {
-    childCount: lines.length,
+    childCount: 1,
     className: DiffEditorContentRight,
     type: Div
-  }, ...rows];
+  }, {
+    childCount: 1,
+    className: ImageContent,
+    type: Div
+  }, {
+    alt: uriRight,
+    childCount: 0,
+    className: ImageElement,
+    src: getImageSrc(uriRight),
+    type: Img
+  }];
 };
 
-const getDiffEditorVirtualDom = (contentLeft, contentRight) => {
+const getScrollBarDom = () => {
+  return [{
+    childCount: 1,
+    className: ScrollBar,
+    type: Div
+  }, {
+    childCount: 0,
+    className: ScrollBarThumb,
+    name: 'scrollBarThumb',
+    onPointerDown: HandleScrollBarPointerDown,
+    type: Div
+  }];
+};
+
+const getInlineDiffLineNumberText = row => {
+  const left = row.lineNumberLeft === null ? '-' : String(row.lineNumberLeft);
+  const right = row.lineNumberRight === null ? '-' : String(row.lineNumberRight);
+  return `${left} ${right}`;
+};
+const getInlineDiffLineNumberDom = row => {
+  return [{
+    childCount: 1,
+    className: DiffEditorLineNumber,
+    type: Div
+  }, text(getInlineDiffLineNumberText(row))];
+};
+const getRowClassName = row => {
+  switch (row.type) {
+    case InlineDiffRowType.Deletion:
+      return EditorRowDeletion;
+    case InlineDiffRowType.Insertion:
+      return EditorRowInsertion;
+    default:
+      return EditorRow;
+  }
+};
+const getRowText = row => {
+  switch (row.type) {
+    case InlineDiffRowType.Deletion:
+      return `- ${row.text}`;
+    case InlineDiffRowType.Insertion:
+      return `+ ${row.text}`;
+    default:
+      return `  ${row.text}`;
+  }
+};
+const getInlineDiffRowDom = row => {
+  return [{
+    childCount: 1,
+    className: getRowClassName(row),
+    type: Div
+  }, text(getRowText(row))];
+};
+const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, minLineY, maxLineY) => {
+  const rows = getInlineDiffRows(contentLeft, contentRight);
+  const visibleRows = rows.slice(minLineY, maxLineY);
+  const contentChildCount = lineNumbers ? 2 : 1;
+  const rowsChildCount = visibleRows.length + 2;
+  return [{
+    childCount: 2,
+    className: `${Viewlet} ${DiffEditor} ${InlineDiffEditor}`,
+    type: Div
+  }, {
+    childCount: contentChildCount,
+    className: `${DiffEditorContent} ${InlineDiffEditorContent}`,
+    type: Div
+  }, ...(lineNumbers ? [{
+    childCount: visibleRows.length,
+    className: DiffEditorGutter,
+    type: Div
+  }, ...visibleRows.flatMap(getInlineDiffLineNumberDom)] : []), {
+    childCount: rowsChildCount,
+    className: DiffEditorRows,
+    type: Div
+  }, {
+    childCount: 0,
+    className: DiffEditorSpacerTop,
+    type: Div
+  }, ...visibleRows.flatMap(getInlineDiffRowDom), {
+    childCount: 0,
+    className: DiffEditorSpacerBottom,
+    type: Div
+  }, ...getScrollBarDom()];
+};
+
+const getDiffEditorVirtualDom = ({
+  contentLeft,
+  contentRight,
+  diffMode,
+  errorLeftMessage,
+  errorLeftStack,
+  errorRightMessage,
+  errorRightStack,
+  inlineChanges,
+  layout,
+  lineNumbers,
+  maxLineY,
+  minLineY,
+  renderModeLeft,
+  renderModeRight,
+  totalLineCount,
+  totalLineCountLeft,
+  totalLineCountRight,
+  uriLeft,
+  uriRight
+}) => {
+  const canRenderInline = diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage;
+  if (canRenderInline) {
+    return getInlineDiffEditorVirtualDom(contentLeft, contentRight, lineNumbers, minLineY, maxLineY);
+  }
+  const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text';
+  const diffEditorLayoutClass = layout === 'vertical' ? DiffEditorVertical : DiffEditorHorizontal;
+  const sashLayoutClass = layout === 'vertical' ? SashHorizontal : SashVertical;
   const dom = [{
-    childCount: 3,
-    className: `${Viewlet} ${DiffEditor}`,
+    childCount: 4,
+    className: `${Viewlet} ${DiffEditor} ${diffEditorLayoutClass}`,
+    onWheel: HandleWheel,
     type: Div
-  }, ...getContentLeftDom(contentLeft), {
+  }, ...(renderModeLeft === 'image' ? getImageLeftDom(uriLeft) : getContentLeftDom(contentLeft, errorLeftMessage, errorLeftStack, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges)), {
     childCount: 0,
-    className: `${Sash} ${SashVertical}`,
+    className: `${Sash} ${sashLayoutClass}`,
     name: 'sash',
     onPointerDown: HandleSashPointerDown,
     type: Div
-  }, ...getContentRightDom(contentRight)];
+  }, ...(renderModeRight === 'image' ? getImageRightDom(uriRight) : getContentRightDom(contentRight, errorRightMessage, errorRightStack, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges)), ...getScrollBarDom()];
   return dom;
 };
 
 const renderItems = (oldState, newState) => {
   const {
-    contentLeft,
-    contentRight,
     id,
     initial
   } = newState;
   if (initial) {
     return [SetDom2, id, []];
   }
-  const dom = getDiffEditorVirtualDom(contentLeft, contentRight);
+  const dom = getDiffEditorVirtualDom(newState);
   return [SetDom2, id, dom];
 };
 
@@ -2191,29 +3100,75 @@ const saveState = uid => {
     newState
   } = value;
   const {
+    deltaY,
     inputValue,
     maxLineY,
+    minLineY,
     root
   } = newState;
   return {
-    deltaY: 0,
+    deltaY,
     inputValue,
     maxLineY,
-    minLineY: 0,
+    minLineY,
     root
   };
 };
 
+const setDiffMode = (state, diffMode) => {
+  if (state.diffMode === diffMode) {
+    return state;
+  }
+  const totalLineCount = getTotalLineCount(diffMode, state.contentLeft, state.contentRight, state.errorLeftMessage, state.errorLeftStack, state.errorRightMessage, state.errorRightStack, state.renderModeLeft, state.renderModeRight);
+  const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY);
+  return {
+    ...state,
+    diffMode,
+    totalLineCount,
+    ...scrollState
+  };
+};
+
+const getNextPaneSizes = (state, layout) => {
+  const totalPaneSize = state.leftWidth + state.rightWidth;
+  const ratio = totalPaneSize === 0 ? 0.5 : state.leftWidth / totalPaneSize;
+  const size = layout === 'vertical' ? state.height : state.width;
+  return getPaneSizes(size, ratio);
+};
+const setLayout = (state, layout) => {
+  if (state.layout === layout) {
+    return state;
+  }
+  const {
+    leftWidth,
+    rightWidth
+  } = getNextPaneSizes(state, layout);
+  return {
+    ...state,
+    layout,
+    leftWidth,
+    resizeOffsetX: 0,
+    resizeOffsetY: 0,
+    rightWidth
+  };
+};
+
 const commandMap = {
   'DiffView.create': create2,
   'DiffView.diff2': diff2,
   'DiffView.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'DiffView.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'DiffView.handleSashPointerUp': wrapCommand(handleSashPointerUp),
+  'DiffView.handleScrollBarPointerDown': wrapCommand(handleScrollBarPointerDown),
+  'DiffView.handleScrollBarPointerMove': wrapCommand(handleScrollBarPointerMove),
+  'DiffView.handleScrollBarPointerUp': wrapCommand(handleScrollBarPointerUp),
+  'DiffView.handleWheel': wrapCommand(handleWheel),
   'DiffView.initialize': initialize,
   'DiffView.loadContent': wrapCommand(loadContent),
   'DiffView.render2': render2,
   'DiffView.saveState': saveState,
+  'DiffView.setDiffMode': wrapCommand(setDiffMode),
+  'DiffView.setLayout': wrapCommand(setLayout),
   'DiffView.terminate': terminate,
   'Initialize.initialize': initialize
 };