@lvce-editor/static-server 0.80.5 → 0.80.7

package/static/{0de4822 → 28473cd}/packages/diff-view/dist/diffViewWorkerMain.js

@@ -64,7 +64,7 @@ const Object$1 = 1;
 const Number$1 = 2;
 const Array$1 = 3;
 const String$1 = 4;
-const Boolean = 5;
+const Boolean$1 = 5;
 const Function = 6;
 const Null = 7;
 const Unknown = 8;
@@ -85,7 +85,7 @@ const getType = value => {
       }
       return Object$1;
     case 'boolean':
-      return Boolean;
+      return Boolean$1;
     default:
       return Unknown;
   }
@@ -1120,10 +1120,17 @@ const create$1 = rpcId => {
 const Div = 4;
 const Span = 8;
 const Text = 12;
-const Img = 17;
 const A = 53;
 const Reference = 100;
 
+const Button = 'event.button';
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const DeltaMode = 'event.deltaMode';
+const DeltaY = 'event.deltaY';
+const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
+
 const User = 1;
 
 const ErrorWorker = 3308;
@@ -1333,7 +1340,10 @@ const terminate = () => {
   globalThis.close();
 };
 
+const defaultAllowedLinkSchemes = ['http', 'https', 'file'];
+
 const createDefaultState = () => ({
+  allowedLinkSchemes: defaultAllowedLinkSchemes,
   assetDir: '',
   contentLeft: '',
   contentRight: '',
@@ -1391,6 +1401,8 @@ const createDefaultState = () => ({
   uriLeft: '',
   uriRight: '',
   viewMode: 1,
+  visibleLinesLeft: [],
+  visibleLinesRight: [],
   width: 100,
   workspacePath: '',
   x: 0,
@@ -1404,11 +1416,12 @@ const {
   set,
   wrapCommand} = create();
 
+const clamp = (value, minimum, maximum) => {
+  return Math.min(Math.max(value, minimum), maximum);
+};
+
 const SASH_WIDTH = 4;
 const DEFAULT_MINIMUM_PANE_WIDTH = 50;
-const clamp$1 = (value, minimum, maximum) => {
-  return Math.max(minimum, Math.min(value, maximum));
-};
 const getAvailableSize = size => {
   return Math.max(size - SASH_WIDTH, 0);
 };
@@ -1431,7 +1444,7 @@ const getClampedLeftWidth = (width, leftWidth) => {
   const availableWidth = getAvailableSize(width);
   const minimumPaneWidth = getMinimumPaneWidth(width);
   const maximumLeftWidth = availableWidth - minimumPaneWidth;
-  return clamp$1(leftWidth, minimumPaneWidth, maximumLeftWidth);
+  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRightWidth = (width, leftWidth) => {
   return getAvailableSize(width) - leftWidth;
@@ -1449,7 +1462,7 @@ 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);
+  return clamp(leftWidth, minimumPaneWidth, maximumLeftWidth);
 };
 const getRemainingPaneSize = (size, leftWidth) => {
   return getAvailableSize(size) - leftWidth;
@@ -1527,6 +1540,216 @@ const handleContextMenu = (state, button, clientX, clientY) => {
   return state;
 };
 
+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 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 None = 0;
+const Insertion = 1;
+const Deletion = 2;
+
+const getVisibleInlineDiffRows = inlineChanges => {
+  const visibleRows = [];
+  for (let index = 0; index < inlineChanges.length; index++) {
+    const inlineChange = inlineChanges[index];
+    const nextInlineChange = inlineChanges[index + 1];
+    if (inlineChange.type === Deletion && nextInlineChange?.type === Insertion) {
+      visibleRows.push({
+        leftChange: inlineChange,
+        rightChange: nextInlineChange
+      });
+      index++;
+      continue;
+    }
+    if (inlineChange.type === Deletion) {
+      visibleRows.push({
+        leftChange: inlineChange
+      });
+      continue;
+    }
+    if (inlineChange.type === Insertion) {
+      visibleRows.push({
+        rightChange: inlineChange
+      });
+      continue;
+    }
+    visibleRows.push({
+      leftChange: inlineChange,
+      rightChange: inlineChange
+    });
+  }
+  return visibleRows;
+};
+
+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 VisibleLineType = {
+  Added: 3,
+  Normal: 1,
+  Removed: 2
+};
+
+const getLine = (lines, index) => {
+  if (index < 0 || index >= lines.length) {
+    return '';
+  }
+  return lines[index];
+};
+
+const getTokens = (tokenizedLines, index, text) => {
+  const tokenizedLine = tokenizedLines[index];
+  if (!tokenizedLine || tokenizedLine.length === 0) {
+    return text ? [{
+      text,
+      type: ''
+    }] : [];
+  }
+  const tokens = [];
+  for (let i = 0; i < tokenizedLine.length; i += 2) {
+    tokens.push({
+      text: tokenizedLine[i] || '',
+      type: tokenizedLine[i + 1] || ''
+    });
+  }
+  return tokens;
+};
+
+const getVisibleLineType = (inlineChange, side) => {
+  switch (inlineChange.type) {
+    case Deletion:
+      return side === 'left' ? VisibleLineType.Removed : VisibleLineType.Normal;
+    case Insertion:
+      return side === 'right' ? VisibleLineType.Added : VisibleLineType.Normal;
+    case None:
+      return VisibleLineType.Normal;
+    default:
+      return VisibleLineType.Normal;
+  }
+};
+
+const getVisibleLines = (content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines = []) => {
+  if (inlineChanges.length === 0) {
+    return getVisibleRows(content, totalLineCount, minLineY, maxLineY).map((line, index) => ({
+      lineNumber: minLineY + index + 1,
+      tokens: getTokens(tokenizedLines, minLineY + index, line),
+      type: VisibleLineType.Normal
+    }));
+  }
+  const lines = content ? content.split('\n') : [''];
+  return getVisibleInlineDiffRows(inlineChanges).slice(minLineY, maxLineY).map(visibleRow => {
+    const inlineChange = side === 'left' ? visibleRow.leftChange : visibleRow.rightChange;
+    const type = inlineChange ? getVisibleLineType(inlineChange, side) : VisibleLineType.Normal;
+    const lineIndex = inlineChange ? side === 'left' ? inlineChange.leftIndex : inlineChange.rightIndex : -1;
+    const tokens = inlineChange && lineIndex >= 0 ? getTokens(tokenizedLines, lineIndex, getLine(lines, lineIndex)) : [];
+    return {
+      lineNumber: lineIndex >= 0 ? lineIndex + 1 : -1,
+      tokens,
+      type
+    };
+  });
+};
+
+const getVisibleLinesState = ({
+  contentLeft,
+  contentRight,
+  inlineChanges,
+  maxLineY,
+  minLineY,
+  tokenizedLinesLeft,
+  tokenizedLinesRight,
+  totalLineCountLeft,
+  totalLineCountRight
+}) => {
+  return {
+    visibleLinesLeft: getVisibleLines(contentLeft, totalLineCountLeft, inlineChanges, minLineY, maxLineY, 'left', tokenizedLinesLeft),
+    visibleLinesRight: getVisibleLines(contentRight, totalLineCountRight, inlineChanges, minLineY, maxLineY, 'right', tokenizedLinesRight)
+  };
+};
+
+const getNextPaneSizes$1 = (state, width, height) => {
+  const totalPaneSize = state.leftWidth + state.rightWidth;
+  const ratio = totalPaneSize === 0 ? 0.5 : state.leftWidth / totalPaneSize;
+  const size = state.layout === 'vertical' ? height : width;
+  return getPaneSizes(size, ratio);
+};
+const handleResize = (state, width, height) => {
+  if (state.width === width && state.height === height) {
+    return state;
+  }
+  const {
+    leftWidth,
+    rightWidth
+  } = getNextPaneSizes$1(state, width, height);
+  const scrollState = getScrollState(height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, state.deltaY);
+  const nextState = {
+    ...state,
+    height,
+    leftWidth,
+    rightWidth,
+    width,
+    ...scrollState
+  };
+  return {
+    ...nextState,
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
+  };
+};
+
 const handleSashPointerDown = (state, clientX, clientY) => {
   const isVertical = state.layout === 'vertical';
   return {
@@ -1620,55 +1843,27 @@ const getDeltaYFromScrollBarThumbTop = (height, scrollBarHeight, thumbTop, final
   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);
+  const scrollState = getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, deltaY);
   return {
     ...state,
-    ...getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, deltaY)
+    ...scrollState,
+    ...getVisibleLinesState({
+      contentLeft: state.contentLeft,
+      contentRight: state.contentRight,
+      inlineChanges: state.inlineChanges,
+      maxLineY: scrollState.maxLineY,
+      minLineY: scrollState.minLineY,
+      tokenizedLinesLeft: state.tokenizedLinesLeft,
+      tokenizedLinesRight: state.tokenizedLinesRight,
+      totalLineCountLeft: state.totalLineCountLeft,
+      totalLineCountRight: state.totalLineCountRight
+    })
   };
 };
 
@@ -1691,11 +1886,42 @@ const getWheelDeltaY = (deltaMode, deltaY, itemHeight, height) => {
       return deltaY;
   }
 };
-const handleWheel = (state, deltaMode, deltaY) => {
-  const nextDeltaY = state.deltaY + getWheelDeltaY(deltaMode, deltaY, state.itemHeight, state.height);
+const handleWheel = (state, deltaMode, eventDeltaY) => {
+  const {
+    contentLeft,
+    contentRight,
+    deltaY,
+    height,
+    inlineChanges,
+    itemHeight,
+    minimumSliderSize,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCount,
+    totalLineCountLeft,
+    totalLineCountRight
+  } = state;
+  const nextDeltaY = deltaY + getWheelDeltaY(deltaMode, eventDeltaY, itemHeight, height);
+  const scrollState = getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, nextDeltaY);
+  const {
+    visibleLinesLeft,
+    visibleLinesRight
+  } = getVisibleLinesState({
+    contentLeft,
+    contentRight,
+    inlineChanges,
+    maxLineY: scrollState.maxLineY,
+    minLineY: scrollState.minLineY,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCountLeft,
+    totalLineCountRight
+  });
   return {
     ...state,
-    ...getScrollState(state.height, state.itemHeight, state.totalLineCount, state.minimumSliderSize, nextDeltaY)
+    ...scrollState,
+    visibleLinesLeft,
+    visibleLinesRight
   };
 };
 
@@ -1796,20 +2022,6 @@ const initialize = async () => {
   await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeDiffWorker(), initializeExtensionManagementWorker(), initializeFileSystemWorker(), initializeErrorWorker(), initializeSyntaxHighlightingWorker()]);
 };
 
-const getInlineDiffChanges = (linesLeft, linesRight) => {
-  return invoke$4('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 = '<->';
@@ -1833,13 +2045,6 @@ const getInlineDiffUris = uri => {
   }
 };
 
-const getLineCount = content => {
-  if (!content) {
-    return 1;
-  }
-  return content.split('\n').length;
-};
-
 const getMinLineY = savedState => {
   if (!savedState || typeof savedState !== 'object') {
     return 0;
@@ -1853,6 +2058,30 @@ const getMinLineY = savedState => {
   return 0;
 };
 
+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 getPath = (protocol, uri) => {
+  if (!uri) {
+    return '';
+  }
+  if (protocol === 'file' && !uri.startsWith('file://')) {
+    return uri;
+  }
+  return uri.slice(protocol.length + 3);
+};
+
 const protocolRegex = /^([a-z-]+):\/\//;
 const getProtocol = uri => {
   if (!uri) {
@@ -1865,14 +2094,87 @@ const getProtocol = uri => {
   return 'file';
 };
 
-const getPath = (protocol, uri) => {
-  if (!uri) {
+const windowsDriveLetterRegex = /^[a-zA-Z]:\\/;
+const encodeFilePath = path => {
+  return encodeURI(path).replaceAll('#', '%23').replaceAll('?', '%3F');
+};
+const toFileUri = path => {
+  if (path.startsWith('file://')) {
+    return path;
+  }
+  if (windowsDriveLetterRegex.test(path)) {
+    const normalizedPath = path.replaceAll('\\', '/');
+    return `file:///${encodeFilePath(normalizedPath)}`;
+  }
+  return `file://${encodeFilePath(path)}`;
+};
+
+const readFile = async uri => {
+  if (!uri || uri.startsWith('untitled://')) {
     return '';
   }
-  if (protocol === 'file' && !uri.startsWith('file://')) {
-    return uri;
+  const protocol = getProtocol(uri);
+  if (protocol === 'data') {
+    return uri.slice('data://'.length);
   }
-  return uri.slice(protocol.length + 3);
+  if (protocol === 'file') {
+    return readFile$1(toFileUri(uri));
+  }
+  const path = getPath(protocol, uri);
+  if (protocol === 'memfs') {
+    return invoke$3('FileSystemMemory.readFile', path);
+  }
+  return invoke$3('ExtensionHostFileSystem.readFile', protocol, path);
+};
+
+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) => {
+  const [leftResult, rightResult] = await Promise.all([loadFileContent(uriLeft), loadFileContent(uriRight)]);
+  return {
+    contentLeft: leftResult.content,
+    contentRight: rightResult.content,
+    errorLeftMessage: leftResult.errorMessage,
+    errorLeftStack: leftResult.errorStack,
+    errorRightMessage: rightResult.errorMessage,
+    errorRightStack: rightResult.errorStack
+  };
+};
+
+const getInlineDiffChanges = (linesLeft, linesRight) => {
+  return invoke$4('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(getVisibleInlineDiffRows(inlineChanges).length, 1)
+  };
+};
+
+const getLineCount = content => {
+  if (!content) {
+    return 1;
+  }
+  return content.split('\n').length;
 };
 
 const getFileExtension = uri => {
@@ -2002,80 +2304,11 @@ const getTotalLineCount = (diffMode, contentLeft, contentRight, errorLeftMessage
   return Math.max(renderModeLeft === 'image' ? 1 : getLineCount(getDisplayedContent(contentLeft, errorLeftMessage, errorLeftStack)), renderModeRight === 'image' ? 1 : getLineCount(getDisplayedContent(contentRight, errorRightMessage, errorRightStack)));
 };
 
-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 windowsDriveLetterRegex = /^[a-zA-Z]:\\/;
-const encodeFilePath = path => {
-  return encodeURI(path).replaceAll('#', '%23').replaceAll('?', '%3F');
-};
-const toFileUri = path => {
-  if (path.startsWith('file://')) {
-    return path;
-  }
-  if (windowsDriveLetterRegex.test(path)) {
-    const normalizedPath = path.replaceAll('\\', '/');
-    return `file:///${encodeFilePath(normalizedPath)}`;
-  }
-  return `file://${encodeFilePath(path)}`;
-};
-
-const readFile = async uri => {
-  if (!uri || uri.startsWith('untitled://')) {
-    return '';
-  }
-  const protocol = getProtocol(uri);
-  if (protocol === 'data') {
-    return uri.slice('data://'.length);
-  }
-  if (protocol === 'file') {
-    return readFile$1(toFileUri(uri));
-  }
-  const path = getPath(protocol, uri);
-  if (protocol === 'memfs') {
-    return invoke$3('FileSystemMemory.readFile', path);
-  }
-  return invoke$3('ExtensionHostFileSystem.readFile', protocol, path);
-};
-
-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) => {
-  const [leftResult, rightResult] = await Promise.all([loadFileContent(uriLeft), loadFileContent(uriRight)]);
-  return {
-    contentLeft: leftResult.content,
-    contentRight: rightResult.content,
-    errorLeftMessage: leftResult.errorMessage,
-    errorLeftStack: leftResult.errorStack,
-    errorRightMessage: rightResult.errorMessage,
-    errorRightStack: rightResult.errorStack
-  };
+const loadImageSrc = async uri => {
+  const protocol = getProtocol(uri);
+  const fileUri = protocol === 'file' ? toFileUri(uri) : uri;
+  const blob = await readFileAsBlob(fileUri);
+  return globalThis.URL.createObjectURL(blob);
 };
 
 let cachedAssetDir = '';
@@ -2154,21 +2387,21 @@ const getSyntaxLanguage = (uri, languages) => {
   };
 };
 
-const emptySyntaxHighlightingState = {
-  languageIdLeft: 'unknown',
-  languageIdRight: 'unknown',
-  tokenizedLinesLeft: [],
-  tokenizedLinesRight: []
+const getUniqueLanguages = (languageLeft, languageRight) => {
+  return [...new Map([languageLeft, languageRight].map(language => [`${language.languageId}:${language.tokenizerPath}`, language])).values()];
 };
+
 const canTokenize = language => {
   return language.languageId !== 'unknown' && !!language.tokenizerPath;
 };
+
 const loadTokenizer = async language => {
   if (!canTokenize(language)) {
     return;
   }
   await loadTokenizer$1(language.languageId, language.tokenizerPath);
 };
+
 const tokenizeCodeBlock = async (content, language) => {
   if (!canTokenize(language)) {
     return [];
@@ -2183,12 +2416,19 @@ const tokenizeCodeBlock = async (content, language) => {
     return [];
   }
 };
+
+const emptySyntaxHighlightingState = {
+  languageIdLeft: 'unknown',
+  languageIdRight: 'unknown',
+  tokenizedLinesLeft: [],
+  tokenizedLinesRight: []
+};
 const loadSyntaxHighlighting = async (contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) => {
   try {
     const languages = await getLanguages(platform, assetDir);
     const languageLeft = getSyntaxLanguage(uriLeft, languages);
     const languageRight = getSyntaxLanguage(uriRight, languages);
-    const uniqueLanguages = [...new Map([languageLeft, languageRight].map(language => [`${language.languageId}:${language.tokenizerPath}`, language])).values()];
+    const uniqueLanguages = getUniqueLanguages(languageLeft, languageRight);
     await Promise.all(uniqueLanguages.map(loadTokenizer));
     const [tokenizedLinesLeft, tokenizedLinesRight] = await Promise.all([tokenizeCodeBlock(contentLeft, languageLeft), tokenizeCodeBlock(contentRight, languageRight)]);
     return {
@@ -2202,11 +2442,8 @@ const loadSyntaxHighlighting = async (contentLeft, contentRight, uriLeft, uriRig
   }
 };
 
-const loadImageSrc = async uri => {
-  const protocol = getProtocol(uri);
-  const fileUri = protocol === 'file' ? toFileUri(uri) : uri;
-  const blob = await readFileAsBlob(fileUri);
-  return globalThis.URL.createObjectURL(blob);
+const loadImages = async (renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight) => {
+  return Promise.all([renderModeLeft === 'image' && !errorLeftMessage ? loadImageSrc(uriLeft) : Promise.resolve(''), renderModeRight === 'image' && !errorRightMessage ? loadImageSrc(uriRight) : Promise.resolve('')]);
 };
 const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack) => {
   const {
@@ -2237,8 +2474,8 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
   const canHighlightLeft = renderModeLeft === 'text' && !errorLeftMessage;
   const canHighlightRight = renderModeRight === 'text' && !errorRightMessage;
   const syntaxHighlightingState = canHighlightLeft || canHighlightRight ? await loadSyntaxHighlighting(contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) : undefined;
-  const [imageSrcLeft, imageSrcRight] = await Promise.all([renderModeLeft === 'image' && !errorLeftMessage ? loadImageSrc(uriLeft) : Promise.resolve(''), renderModeRight === 'image' && !errorRightMessage ? loadImageSrc(uriRight) : Promise.resolve('')]);
-  return {
+  const [imageSrcLeft, imageSrcRight] = await loadImages(renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight);
+  const nextState = {
     ...state,
     contentLeft,
     contentRight,
@@ -2261,7 +2498,27 @@ const reloadContent = async (state, contentLeft, contentRight, errorLeftMessage,
     totalLineCountRight,
     ...getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, minLineY * itemHeight)
   };
+  const {
+    visibleLinesLeft,
+    visibleLinesRight
+  } = getVisibleLinesState({
+    contentLeft: nextState.contentLeft,
+    contentRight: nextState.contentRight,
+    inlineChanges: nextState.inlineChanges,
+    maxLineY: nextState.maxLineY,
+    minLineY: nextState.minLineY,
+    tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+    tokenizedLinesRight: nextState.tokenizedLinesRight,
+    totalLineCountLeft: nextState.totalLineCountLeft,
+    totalLineCountRight: nextState.totalLineCountRight
+  });
+  return {
+    ...nextState,
+    visibleLinesLeft,
+    visibleLinesRight
+  };
 };
+
 const loadContent = async (state, savedState) => {
   const {
     uri
@@ -2305,22 +2562,89 @@ const getCss = () => {
   word-break: break-word;
 }
 
-.DiffEditorErrorStack a {
+.DiffEditorErrorStackLink {
   color: inherit;
-  display: block;
   text-decoration: underline;
   text-underline-offset: 2px;
+  white-space: nowrap;
 }
 
   `;
 };
 
+const AddedColor = 'rgba(46, 160, 67, 0.72)';
+const DeletedColor = 'rgba(248, 81, 73, 0.72)';
+const getScrollBarMarkerType = changeType => {
+  if (changeType === Insertion) {
+    return 'added';
+  }
+  if (changeType === Deletion) {
+    return 'deleted';
+  }
+  return '';
+};
+const getScrollBarMarkerColor = type => {
+  if (type === 'added') {
+    return AddedColor;
+  }
+  return DeletedColor;
+};
+const getScrollBarMarkersForSide = (rows, side, totalLineCount) => {
+  const markers = [];
+  let start = 0;
+  let activeType = '';
+  for (let index = 0; index < rows.length; index++) {
+    const row = rows[index];
+    const change = side === 'left' ? row.leftChange : row.rightChange;
+    const nextType = getScrollBarMarkerType(change?.type);
+    if (nextType === activeType) {
+      continue;
+    }
+    if (activeType) {
+      markers.push({
+        color: getScrollBarMarkerColor(activeType),
+        end: index / totalLineCount * 100,
+        start: start / totalLineCount * 100
+      });
+    }
+    activeType = nextType;
+    start = index;
+  }
+  if (activeType) {
+    markers.push({
+      color: getScrollBarMarkerColor(activeType),
+      end: rows.length / totalLineCount * 100,
+      start: start / totalLineCount * 100
+    });
+  }
+  return markers;
+};
+const getScrollBarMarkerBackgroundImage = ({
+  color,
+  end,
+  start
+}) => {
+  return `linear-gradient(to bottom, transparent ${start}%, ${color} ${start}%, ${color} ${end}%, transparent ${end}%)`;
+};
+const getScrollBarBackgroundImage = (inlineChanges, totalLineCount) => {
+  if (inlineChanges.length === 0 || totalLineCount === 0) {
+    return 'none';
+  }
+  const rows = getVisibleInlineDiffRows(inlineChanges);
+  const markers = [...getScrollBarMarkersForSide(rows, 'left', totalLineCount), ...getScrollBarMarkersForSide(rows, 'right', totalLineCount)];
+  if (markers.length === 0) {
+    return 'none';
+  }
+  return markers.map(getScrollBarMarkerBackgroundImage).join(', ');
+};
+
 const renderCss = (oldState, newState) => {
   const {
     deltaY,
     finalDeltaY,
     height,
     id,
+    inlineChanges,
     itemHeight,
     leftWidth,
     maxLineY,
@@ -2332,6 +2656,7 @@ const renderCss = (oldState, newState) => {
   const topSpacerHeight = minLineY * itemHeight;
   const bottomSpacerHeight = Math.max(totalLineCount - maxLineY, 0) * itemHeight;
   const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY);
+  const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount);
   const {
     layout
   } = newState;
@@ -2372,6 +2697,7 @@ const renderCss = (oldState, newState) => {
   contain: strict;
   height: 100%;
   overflow: hidden;
+  user-select: text;
 }
 
 .InlineDiffEditorContent {
@@ -2505,7 +2831,8 @@ const renderCss = (oldState, newState) => {
 }
 
 .ScrollBar {
-  background: rgba(128, 128, 128, 0.15);
+  background-color: rgba(128, 128, 128, 0.15);
+  background-image: ${scrollBarBackgroundImage};
   border-radius: 4px;
   height: 100%;
   position: absolute;
@@ -2537,6 +2864,10 @@ const renderFocusContext = (oldState, newState) => {
   return [SetFocusContext, id, focus];
 };
 
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
+};
+
 const text = data => {
   return {
     childCount: 0,
@@ -2840,6 +3171,7 @@ const DiffEditorContentRight = 'DiffEditorContentRight';
 const DiffEditorError = 'DiffEditorError';
 const DiffEditorErrorMessage = 'DiffEditorErrorMessage';
 const DiffEditorErrorStack = 'DiffEditorErrorStack';
+const DiffEditorErrorStackLink = 'DiffEditorErrorStackLink';
 const DiffEditorSpacerBottom = 'DiffEditorSpacerBottom';
 const DiffEditorSpacerTop = 'DiffEditorSpacerTop';
 const DiffEditorGutter = 'DiffEditorGutter';
@@ -2850,8 +3182,6 @@ 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';
@@ -2861,39 +3191,41 @@ const ScrollBar = 'ScrollBar';
 const ScrollBarThumb = 'ScrollBarThumb';
 const Viewlet = 'Viewlet';
 
+const HandleClickAt = 1;
 const HandleContextMenu = 2;
+const HandleFocus = 3;
+const HandleInput = 4;
+const HandleMouseOutAt = 6;
+const HandleMouseOver = 7;
+const HandleMouseOverAt = 8;
 const HandleWheel = 9;
+const HandleClickAction = 10;
 const HandleSashPointerDown = 11;
+const HandleSashPointerMove = 12;
+const HandleSashPointerUp = 13;
 const HandleScrollBarPointerDown = 14;
+const HandleScrollBarPointerMove = 15;
+const HandleScrollBarPointerUp = 16;
 
+const parentNode = {
+  childCount: 1,
+  className: DiffEditorLineNumber,
+  type: Div
+};
 const getLineNumberDom = lineNumber => {
-  return [{
-    childCount: 1,
-    className: DiffEditorLineNumber,
-    type: Div
-  }, text(String(lineNumber))];
+  return [parentNode, text(lineNumber === -1 ? '' : String(lineNumber))];
 };
 
-const getLineNumbersDom = (startLineNumber, lineCount) => {
+const getGutterDom = visibleLines => {
   return [{
-    childCount: lineCount,
+    childCount: visibleLines.length,
     className: DiffEditorGutter,
     type: Div
-  }, ...Array.from({
-    length: lineCount
-  }, (_, index) => getLineNumberDom(startLineNumber + index)).flat()];
+  }, ...visibleLines.flatMap(line => getLineNumberDom(line.lineNumber))];
 };
 
-const getContentDomWithLineNumbers = (contentClassName, startLineNumber, lineCount, rowsChildCount, rows) => {
+const getRowsDom = (rowsChildCount, rows) => {
   return [{
-    childCount: 1,
-    className: DiffEditorContent,
-    type: Div
-  }, {
-    childCount: 2,
-    className: contentClassName,
-    type: Div
-  }, ...getLineNumbersDom(startLineNumber, lineCount), {
     childCount: rowsChildCount,
     className: DiffEditorRows,
     type: Div
@@ -2908,6 +3240,18 @@ const getContentDomWithLineNumbers = (contentClassName, startLineNumber, lineCou
   }];
 };
 
+const getContentDomWithLineNumbers = (contentClassName, visibleLines, rowsChildCount, rows) => {
+  return [{
+    childCount: 1,
+    className: DiffEditorContent,
+    type: Div
+  }, {
+    childCount: 2,
+    className: contentClassName,
+    type: Div
+  }, ...getGutterDom(visibleLines), ...getRowsDom(rowsChildCount, rows)];
+};
+
 const getContentDomWithoutLineNumbers = (contentClassName, rowsChildCount, rows) => {
   return [{
     childCount: 1,
@@ -2928,38 +3272,67 @@ const getContentDomWithoutLineNumbers = (contentClassName, rowsChildCount, rows)
   }];
 };
 
-const stackLocationRegex = /((?:https?:\/\/|file:\/\/\/?|\/)[^\s)]+):(\d+):(\d+)\)?$/;
-const getStackLineLink = stackLine => {
+const getStackLineHref = (location, allowedLinkSchemes) => {
+  const scheme = location.startsWith('/') ? 'file' : location.slice(0, location.indexOf(':'));
+  if (allowedLinkSchemes.includes(scheme)) {
+    return scheme === 'file' ? `file://${location.startsWith('file://') ? location.slice('file://'.length) : location}` : location;
+  }
+  return '#';
+};
+
+const getStackLineLabel = location => {
+  if (!location) {
+    return '';
+  }
+  const pathname = location.startsWith('file://') ? location.slice('file://'.length) : location;
+  const fileName = pathname.slice(pathname.lastIndexOf('/') + 1);
+  return `(${fileName})`;
+};
+
+const stackLocationRegex = /((?:[a-zA-Z][a-zA-Z0-9+.-]*:\/\/|\/)[^\s)]+):(\d+):(\d+)\)?$/;
+
+const getStackLineLocation = stackLine => {
   const match = stackLine.match(stackLocationRegex);
   if (!match) {
     return '';
   }
   const [, location] = match;
-  if (location.startsWith('/')) {
-    return `file://${location}`;
-  }
   return location;
 };
-const getErrorStackLineDom = stackLine => {
-  const href = getStackLineLink(stackLine);
-  if (!href) {
+
+const getStackLinePrefix = stackLine => {
+  const match = stackLine.match(stackLocationRegex);
+  if (!match) {
+    return stackLine;
+  }
+  return stackLine.slice(0, stackLine.length - match[0].length).replace(/\($/, '');
+};
+
+const getErrorStackLineDom = (stackLine, allowedLinkSchemes) => {
+  const location = getStackLineLocation(stackLine);
+  if (!location) {
     return [{
       childCount: 1,
       type: Div
     }, text(stackLine)];
   }
+  const prefix = getStackLinePrefix(stackLine);
+  const href = getStackLineHref(location, allowedLinkSchemes);
+  const label = getStackLineLabel(location);
   return [{
-    childCount: 1,
+    childCount: prefix ? 2 : 1,
     type: Div
-  }, {
+  }, ...(prefix ? [text(prefix)] : []), {
     childCount: 1,
+    className: DiffEditorErrorStackLink,
     href,
     rel: 'noreferrer',
     target: '_blank',
     type: A
-  }, text(stackLine)];
+  }, text(label)];
 };
-const getErrorStackDom = errorStack => {
+
+const getErrorStackDom = (errorStack, allowedLinkSchemes = defaultAllowedLinkSchemes) => {
   if (!errorStack) {
     return [];
   }
@@ -2968,10 +3341,10 @@ const getErrorStackDom = errorStack => {
     childCount: stackLines.length,
     className: DiffEditorErrorStack,
     type: Div
-  }, ...stackLines.flatMap(getErrorStackLineDom)];
+  }, ...stackLines.flatMap(stackLine => getErrorStackLineDom(stackLine, allowedLinkSchemes))];
 };
 
-const getErrorDom = (contentClassName, errorMessage, errorStack) => {
+const getErrorDom = (contentClassName, errorMessage, errorStack, allowedLinkSchemes = defaultAllowedLinkSchemes) => {
   const childCount = errorStack ? 2 : 1;
   return [{
     childCount: 1,
@@ -2985,190 +3358,63 @@ const getErrorDom = (contentClassName, errorMessage, errorStack) => {
     childCount: 1,
     className: DiffEditorErrorMessage,
     type: Div
-  }, text(errorMessage), ...getErrorStackDom(errorStack)];
+  }, text(errorMessage), ...getErrorStackDom(errorStack, allowedLinkSchemes)];
+};
+
+const getRowClassName = type => {
+  if (type === VisibleLineType.Removed) {
+    return EditorRowDeletion;
+  }
+  if (type === VisibleLineType.Added) {
+    return EditorRowInsertion;
+  }
+  return EditorRow;
 };
 
-const getTokenDom = tokenPart => {
-  if (!tokenPart.className) {
-    return [text(tokenPart.text)];
+const getTokenDom = token => {
+  if (!token.type) {
+    return [text(token.text)];
   }
   return [{
     childCount: 1,
-    className: tokenPart.className,
+    className: token.type,
     type: Span
-  }, text(tokenPart.text)];
+  }, text(token.text)];
 };
 
-const getRowDom = (line, className = EditorRow, parts = []) => {
-  const children = parts.length === 0 ? [text(line)] : parts.flatMap(getTokenDom);
+const getLineDom = line => {
+  const children = line.tokens.length === 0 ? [text('')] : line.tokens.flatMap(getTokenDom);
+  const childCount = line.tokens.length === 0 ? 1 : line.tokens.length;
   return [{
-    childCount: children.length,
-    className,
+    childCount,
+    className: getRowClassName(line.type),
     type: Div
   }, ...children];
 };
 
-const getRowsDom = (lines, classNames = [], rowParts = []) => {
-  return lines.flatMap((line, index) => getRowDom(line, classNames[index] || EditorRow, rowParts[index] || []));
-};
-
-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 getRowParts = (tokenizedLines, index, text) => {
-  const tokenizedLine = tokenizedLines[index];
-  if (!tokenizedLine || tokenizedLine.length === 0) {
-    return text ? [{
-      className: '',
-      text
-    }] : [];
-  }
-  const parts = [];
-  for (let i = 0; i < tokenizedLine.length; i += 2) {
-    parts.push({
-      className: tokenizedLine[i + 1] || '',
-      text: tokenizedLine[i] || ''
-    });
-  }
-  return parts;
-};
-const getInlineDiffRowParts = (tokenizedLines, inlineChange, side, text) => {
-  switch (inlineChange.type) {
-    case Deletion:
-      return side === 'left' ? getRowParts(tokenizedLines, inlineChange.leftIndex, text) : [];
-    case Insertion:
-      return side === 'right' ? getRowParts(tokenizedLines, inlineChange.rightIndex, text) : [];
-    case None:
-      return getRowParts(tokenizedLines, side === 'left' ? inlineChange.leftIndex : inlineChange.rightIndex, text);
-    default:
-      return [];
-  }
-};
-const getVisibleInlineDiffRows = (content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines = []) => {
-  if (inlineChanges.length === 0) {
-    return getVisibleRows(content, totalLineCount, minLineY, maxLineY).map((line, index) => ({
-      className: EditorRow,
-      parts: getRowParts(tokenizedLines, minLineY + index, line),
-      text: line
-    }));
-  }
-  const lines = content ? content.split('\n') : [''];
-  return inlineChanges.slice(minLineY, maxLineY).map(inlineChange => {
-    const text = getRowText$1(lines, inlineChange, side);
-    return {
-      className: getRowClassName$1(inlineChange.type, side),
-      parts: getInlineDiffRowParts(tokenizedLines, inlineChange, side, text),
-      text
-    };
-  });
+const getVisibleLinesDom = visibleLines => {
+  return visibleLines.flatMap(line => getLineDom(line));
 };
 
-const getContentDom = (contentClassName, content, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, side, tokenizedLines = []) => {
+const getContentDom = (contentClassName, content, errorMessage, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, side, tokenizedLines = [], visibleLines = []) => {
   if (errorMessage) {
-    return getErrorDom(contentClassName, errorMessage, errorStack);
+    return getErrorDom(contentClassName, errorMessage, errorStack, allowedLinkSchemes);
   }
-  const lines = getVisibleInlineDiffRows(content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines);
-  const rows = getRowsDom(lines.map(line => line.text), lines.map(line => line.className), lines.map(line => line.parts));
-  const startLineNumber = minLineY + 1;
+  const lines = visibleLines.length > 0 ? visibleLines : getVisibleLines(content, totalLineCount, inlineChanges, minLineY, maxLineY, side, tokenizedLines);
+  const rows = getVisibleLinesDom(lines);
   const rowsChildCount = lines.length + 2;
   if (lineNumbers) {
-    return getContentDomWithLineNumbers(contentClassName, startLineNumber, lines.length, rowsChildCount, rows);
+    return getContentDomWithLineNumbers(contentClassName, lines, 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 = [], tokenizedLines = []) => {
-  return getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'left', tokenizedLines);
-};
-
-const getContentRightDom = (contentRight, errorMessage = '', errorStack = '', lineNumbers = true, totalLineCount = contentRight ? contentRight.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = []) => {
-  return getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'right', tokenizedLines);
-};
-
-const getImageLeftDom = (uriLeft, imageSrc) => {
-  return [{
-    childCount: 1,
-    className: DiffEditorContent,
-    type: Div
-  }, {
-    childCount: 1,
-    className: DiffEditorContentLeft,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ImageContent,
-    type: Div
-  }, {
-    alt: uriLeft,
-    childCount: 0,
-    className: ImageElement,
-    src: imageSrc,
-    type: Img
-  }];
+const getContentLeftDom = (contentLeft, errorMessage = '', errorStack = '', allowedLinkSchemes = defaultAllowedLinkSchemes, lineNumbers = true, totalLineCount = contentLeft ? contentLeft.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = []) => {
+  return getContentDom(DiffEditorContentLeft, contentLeft, errorMessage, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'left', tokenizedLines, visibleLines);
 };
 
-const getImageRightDom = (uriRight, imageSrc) => {
-  return [{
-    childCount: 1,
-    className: DiffEditorContent,
-    type: Div
-  }, {
-    childCount: 1,
-    className: DiffEditorContentRight,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ImageContent,
-    type: Div
-  }, {
-    alt: uriRight,
-    childCount: 0,
-    className: ImageElement,
-    src: imageSrc,
-    type: Img
-  }];
+const getContentRightDom = (contentRight, errorMessage = '', errorStack = '', allowedLinkSchemes = defaultAllowedLinkSchemes, lineNumbers = true, totalLineCount = contentRight ? contentRight.split('\n').length : 1, minLineY = 0, maxLineY = totalLineCount, inlineChanges = [], tokenizedLines = [], visibleLines = []) => {
+  return getContentDom(DiffEditorContentRight, contentRight, errorMessage, errorStack, allowedLinkSchemes, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, 'right', tokenizedLines, visibleLines);
 };
 
 const getScrollBarDom = () => {
@@ -3190,6 +3436,7 @@ const getInlineDiffLineNumberText = row => {
   const right = row.lineNumberRight === null ? '-' : String(row.lineNumberRight);
   return `${left} ${right}`;
 };
+
 const getInlineDiffLineNumberDom = row => {
   return [{
     childCount: 1,
@@ -3197,7 +3444,8 @@ const getInlineDiffLineNumberDom = row => {
     type: Div
   }, text(getInlineDiffLineNumberText(row))];
 };
-const getRowClassName = row => {
+
+const getInlineDiffRowClassName = row => {
   switch (row.type) {
     case InlineDiffRowType.Deletion:
       return EditorRowDeletion;
@@ -3207,7 +3455,8 @@ const getRowClassName = row => {
       return EditorRow;
   }
 };
-const getRowText = row => {
+
+const getInlineDiffRowText = row => {
   switch (row.type) {
     case InlineDiffRowType.Deletion:
       return `- ${row.text}`;
@@ -3217,13 +3466,15 @@ const getRowText = row => {
       return `  ${row.text}`;
   }
 };
+
 const getInlineDiffRowDom = row => {
   return [{
     childCount: 1,
-    className: getRowClassName(row),
+    className: getInlineDiffRowClassName(row),
     type: Div
-  }, text(getRowText(row))];
+  }, text(getInlineDiffRowText(row))];
 };
+
 const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, minLineY, maxLineY) => {
   const rows = getInlineDiffRows(contentLeft, contentRight);
   const visibleRows = rows.slice(minLineY, maxLineY);
@@ -3238,7 +3489,7 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
   return [{
     childCount: scrollBarActive ? 2 : 1,
-    className: `${Viewlet} ${DiffEditor} ${InlineDiffEditor}`,
+    className: mergeClassNames(Viewlet, DiffEditor, InlineDiffEditor),
     type: Div
   }, {
     childCount: contentChildCount,
@@ -3259,32 +3510,39 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
   }, ...scrollBarDom];
 };
 
-const getDiffEditorVirtualDom = ({
-  contentLeft,
-  contentRight,
-  diffMode,
-  errorLeftMessage,
-  errorLeftStack,
-  errorRightMessage,
-  errorRightStack,
-  imageSrcLeft,
-  imageSrcRight,
-  inlineChanges,
-  layout,
-  lineNumbers,
-  maxLineY,
-  minLineY,
-  renderModeLeft,
-  renderModeRight,
-  scrollBarActive,
-  tokenizedLinesLeft,
-  tokenizedLinesRight,
-  totalLineCount,
-  totalLineCountLeft,
-  totalLineCountRight,
-  uriLeft,
-  uriRight
-}) => {
+const getSashDom = sashLayoutClass => ({
+  childCount: 0,
+  className: `${Sash} ${sashLayoutClass}`,
+  name: 'sash',
+  onPointerDown: HandleSashPointerDown,
+  type: Div
+});
+
+const getDiffEditorVirtualDom = state => {
+  const {
+    allowedLinkSchemes,
+    contentLeft,
+    contentRight,
+    diffMode,
+    errorLeftMessage,
+    errorLeftStack,
+    errorRightMessage,
+    errorRightStack,
+    inlineChanges,
+    layout,
+    lineNumbers,
+    maxLineY,
+    minLineY,
+    renderModeLeft,
+    renderModeRight,
+    scrollBarActive,
+    tokenizedLinesLeft,
+    tokenizedLinesRight,
+    totalLineCountLeft,
+    totalLineCountRight,
+    visibleLinesLeft,
+    visibleLinesRight
+  } = state;
   const canRenderInline = diffMode === 'inline' && renderModeLeft === 'text' && renderModeRight === 'text' && !errorLeftMessage && !errorRightMessage;
   if (canRenderInline) {
     return getInlineDiffEditorVirtualDom(contentLeft, contentRight, lineNumbers, minLineY, maxLineY);
@@ -3292,18 +3550,8 @@ const getDiffEditorVirtualDom = ({
   const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text';
   const diffEditorLayoutClass = layout === 'vertical' ? DiffEditorVertical : DiffEditorHorizontal;
   const sashLayoutClass = layout === 'vertical' ? SashHorizontal : SashVertical;
-  let leftDom;
-  if (renderModeLeft === 'image') {
-    leftDom = getImageLeftDom(uriLeft, imageSrcLeft || '');
-  } else {
-    leftDom = getContentLeftDom(contentLeft, errorLeftMessage, errorLeftStack, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges, tokenizedLinesLeft);
-  }
-  let rightDom;
-  if (renderModeRight === 'image') {
-    rightDom = getImageRightDom(uriRight, imageSrcRight || '');
-  } else {
-    rightDom = getContentRightDom(contentRight, errorRightMessage, errorRightStack, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges, tokenizedLinesRight);
-  }
+  const leftDom = getContentLeftDom(contentLeft, errorLeftMessage, errorLeftStack, allowedLinkSchemes, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges, tokenizedLinesLeft, visibleLinesLeft);
+  const rightDom = getContentRightDom(contentRight, errorRightMessage, errorRightStack, allowedLinkSchemes, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges, tokenizedLinesRight, visibleLinesRight);
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
   const dom = [{
     childCount: scrollBarActive ? 4 : 3,
@@ -3311,13 +3559,7 @@ const getDiffEditorVirtualDom = ({
     onContextMenu: HandleContextMenu,
     onWheel: HandleWheel,
     type: Div
-  }, ...leftDom, {
-    childCount: 0,
-    className: `${Sash} ${sashLayoutClass}`,
-    name: 'sash',
-    onPointerDown: HandleSashPointerDown,
-    type: Div
-  }, ...rightDom, ...scrollBarDom];
+  }, ...leftDom, getSashDom(sashLayoutClass), ...rightDom, ...scrollBarDom];
   return dom;
 };
 
@@ -3392,6 +3634,59 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
+const renderEventListeners = () => {
+  return [{
+    name: HandleWheel,
+    params: ['handleWheel', DeltaMode, DeltaY],
+    passive: true
+  }, {
+    name: HandleFocus,
+    params: ['handleFocus']
+  }, {
+    name: HandleClickAt,
+    params: ['handleClickAt', ClientX, ClientY, TargetName]
+  }, {
+    name: HandleMouseOverAt,
+    params: ['handleMouseOverAt', ClientX, ClientY]
+  }, {
+    name: HandleMouseOver,
+    params: ['handleMouseOver', ClientX, ClientY]
+  }, {
+    name: HandleMouseOutAt,
+    params: ['handleMouseOutAt', ClientX, ClientY]
+  }, {
+    name: HandleInput,
+    params: ['handleInput', TargetValue]
+  }, {
+    name: HandleContextMenu,
+    params: ['handleContextMenu', Button, ClientX, ClientY],
+    preventDefault: true
+  }, {
+    name: HandleClickAction,
+    params: ['handleActionClick', TargetName]
+  }, {
+    name: HandleSashPointerDown,
+    params: ['handleSashPointerDown', ClientX, ClientY],
+    trackPointerEvents: [HandleSashPointerMove, HandleSashPointerUp]
+  }, {
+    name: HandleSashPointerMove,
+    params: ['handleSashPointerMove', ClientX, ClientY]
+  }, {
+    name: HandleSashPointerUp,
+    params: ['handleSashPointerUp', ClientX, ClientY]
+  }, {
+    name: HandleScrollBarPointerDown,
+    params: ['handleScrollBarPointerDown', ClientY],
+    trackPointerEvents: [HandleScrollBarPointerMove, HandleScrollBarPointerUp]
+  }, {
+    name: HandleScrollBarPointerMove,
+    params: ['handleScrollBarPointerMove', ClientY]
+  }, {
+    name: HandleScrollBarPointerUp,
+    params: ['handleScrollBarPointerUp', ClientY]
+  }];
+};
+
 const saveState = uid => {
   number(uid);
   const value = get(uid);
@@ -3420,12 +3715,26 @@ const setDiffMode = (state, diffMode) => {
   }
   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 {
+  const nextState = {
     ...state,
     diffMode,
     totalLineCount,
     ...scrollState
   };
+  return {
+    ...nextState,
+    ...getVisibleLinesState({
+      contentLeft: nextState.contentLeft,
+      contentRight: nextState.contentRight,
+      inlineChanges: nextState.inlineChanges,
+      maxLineY: nextState.maxLineY,
+      minLineY: nextState.minLineY,
+      tokenizedLinesLeft: nextState.tokenizedLinesLeft,
+      tokenizedLinesRight: nextState.tokenizedLinesRight,
+      totalLineCountLeft: nextState.totalLineCountLeft,
+      totalLineCountRight: nextState.totalLineCountRight
+    })
+  };
 };
 
 const getNextPaneSizes = (state, layout) => {
@@ -3453,10 +3762,12 @@ const setLayout = (state, layout) => {
 };
 
 const commandMap = {
+  'Diff.getCommandIds': getCommandIds,
   'DiffView.create': create2,
   'DiffView.diff2': diff2,
   'DiffView.getCommandIds': getCommandIds,
   'DiffView.handleContextMenu': wrapCommand(handleContextMenu),
+  'DiffView.handleResize': wrapCommand(handleResize),
   'DiffView.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'DiffView.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'DiffView.handleSashPointerUp': wrapCommand(handleSashPointerUp),
@@ -3467,6 +3778,7 @@ const commandMap = {
   'DiffView.initialize': initialize,
   'DiffView.loadContent': wrapCommand(loadContent),
   'DiffView.render2': render2,
+  'DiffView.renderEventListeners': renderEventListeners,
   'DiffView.saveState': saveState,
   'DiffView.setDiffMode': wrapCommand(setDiffMode),
   'DiffView.setLayout': wrapCommand(setLayout),