@lvce-editor/static-server 0.80.3 → 0.80.5

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

@@ -1070,7 +1070,7 @@ const createMockRpc = ({
 };
 
 const rpcs = Object.create(null);
-const set$8 = (id, rpc) => {
+const set$9 = (id, rpc) => {
   rpcs[id] = rpc;
 };
 const get$1 = id => {
@@ -1103,7 +1103,7 @@ const create$1 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$8(rpcId, mockRpc);
+      set$9(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1112,14 +1112,16 @@ const create$1 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$8(rpcId, rpc);
+      set$9(rpcId, rpc);
     }
   };
 };
 
 const Div = 4;
+const Span = 8;
 const Text = 12;
 const Img = 17;
+const A = 53;
 const Reference = 100;
 
 const User = 1;
@@ -1129,6 +1131,7 @@ const ExtensionHostWorker = 44;
 const ExtensionManagementWorker = 9006;
 const FileSystemWorker = 209;
 const IconThemeWorker = 7009;
+const MarkdownWorker = 300;
 const RendererWorker = 1;
 
 const SetCss = 'Viewlet.setCss';
@@ -1137,34 +1140,38 @@ const SetFocusContext = 'Viewlet.setFocusContext';
 const SetValueByName = 'Viewlet.setValueByName';
 
 const {
-  invoke: invoke$2,
-  set: set$7
+  invoke: invoke$4,
+  set: set$8
 } = create$1(218_933);
 
 const {
-  set: set$6
+  set: set$7
 } = create$1(ErrorWorker);
 
 const {
-  invoke: invoke$1,
-  set: set$5
+  invoke: invoke$3,
+  set: set$6
 } = create$1(ExtensionHostWorker);
 
 const {
-  set: set$4
+  invoke: invoke$2,
+  set: set$5
 } = create$1(ExtensionManagementWorker);
 
 const {
-  invoke,
-  set: set$3
+  invoke: invoke$1,
+  set: set$4
 } = create$1(FileSystemWorker);
 const readFile$1 = async uri => {
-  return invoke('FileSystem.readFile', uri);
+  return invoke$1('FileSystem.readFile', uri);
+};
+const readFileAsBlob = async uri => {
+  return invoke$1('FileSystem.readFileAsBlob', uri);
 };
 
 const {
   invokeAndTransfer,
-  set: set$2
+  set: set$3
 } = create$1(RendererWorker);
 const sendMessagePortToErrorWorker = async (port, rpcId) => {
   const command = 'Errors.handleMessagePort';
@@ -1186,15 +1193,26 @@ const sendMessagePortToExtensionManagementWorker = async (port, rpcId) => {
   const command = 'Extensions.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionManagementWorker', port, command, rpcId);
 };
+const sendMessagePortToSyntaxHighlightingWorker = async port => {
+  await invokeAndTransfer('SendMessagePortToSyntaxHighlightingWorker.sendMessagePortToSyntaxHighlightingWorker', port, 'HandleMessagePort.handleMessagePort2');
+};
 const sendMessagePortToDiffWorker = async (port, rpcId = 0) => {
   const command = 'Diff.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToDiffWorker', port, command, rpcId);
 };
 
 const {
-  set: set$1
+  set: set$2
 } = create$1(IconThemeWorker);
 
+const {
+  invoke,
+  set: set$1
+} = create$1(MarkdownWorker);
+const loadTokenizer$1 = (languageId, tokenizerPath) => {
+  return invoke('Tokenizer.load', languageId, tokenizerPath);
+};
+
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
   return key.slice(dotIndex + 1);
@@ -1332,6 +1350,8 @@ const createDefaultState = () => ({
   headerHeight: 40,
   height: 100,
   id: 1,
+  imageSrcLeft: '',
+  imageSrcRight: '',
   initial: false,
   inlineChanges: [],
   inputSource: 0,
@@ -1341,6 +1361,8 @@ const createDefaultState = () => ({
   isVisible: true,
   itemHeight: 20,
   knownImageExtensions: ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.svg', '.bmp', '.ico'],
+  languageIdLeft: 'unknown',
+  languageIdRight: 'unknown',
   layout: 'horizontal',
   leftWidth: 48,
   lineNumbers: true,
@@ -1360,6 +1382,8 @@ const createDefaultState = () => ({
   scrollBarDragOffsetY: 0,
   scrollBarHeight: 0,
   splitButtonEnabled: false,
+  tokenizedLinesLeft: [],
+  tokenizedLinesRight: [],
   totalLineCount: 1,
   totalLineCountLeft: 1,
   totalLineCountRight: 1,
@@ -1375,6 +1399,7 @@ const createDefaultState = () => ({
 
 const {
   get,
+  getCommandIds,
   registerCommands,
   set,
   wrapCommand} = create();
@@ -1498,6 +1523,10 @@ const diff2 = uid => {
   return result;
 };
 
+const handleContextMenu = (state, button, clientX, clientY) => {
+  return state;
+};
+
 const handleSashPointerDown = (state, clientX, clientY) => {
   const isVertical = state.layout === 'vertical';
   return {
@@ -1680,7 +1709,7 @@ const createExtensionHostRpc = async () => {
       commandMap: {},
       send: sendMessagePortToExtensionHostWorker
     });
-    set$5(rpc);
+    set$6(rpc);
   } catch (error) {
     throw new VError(error, `Failed to create extension host rpc`);
   }
@@ -1696,7 +1725,7 @@ const createTextMeasurementWorkerRpc = async () => {
       commandMap: {},
       send: sendMessagePortToTextMeasurementWorker
     });
-    set$1(rpc);
+    set$2(rpc);
   } catch (error) {
     throw new VError(error, `Failed to create text measurement rpc`);
   }
@@ -1709,7 +1738,7 @@ const initializeDiffWorker = async () => {
       return sendMessagePortToDiffWorker(port, 0);
     }
   });
-  set$7(rpc);
+  set$8(rpc);
 };
 
 const initializeErrorWorker = async () => {
@@ -1719,7 +1748,7 @@ const initializeErrorWorker = async () => {
       return sendMessagePortToErrorWorker(port, 0);
     }
   });
-  set$6(rpc);
+  set$7(rpc);
 };
 
 const createExtensionManagementWorkerRpc = async () => {
@@ -1737,7 +1766,7 @@ const createExtensionManagementWorkerRpc = async () => {
 const initializeExtensionManagementWorker = async () => {
   try {
     const rpc = await createExtensionManagementWorkerRpc();
-    set$4(rpc);
+    set$5(rpc);
   } catch {
     // ignore
   }
@@ -1750,15 +1779,25 @@ const initializeFileSystemWorker = async () => {
       return sendMessagePortToFileSystemWorker(port, 0);
     }
   });
-  set$3(rpc);
+  set$4(rpc);
+};
+
+const initializeSyntaxHighlightingWorker = async () => {
+  const rpc = await create$3({
+    commandMap: {},
+    send(port) {
+      return sendMessagePortToSyntaxHighlightingWorker(port);
+    }
+  });
+  set$1(rpc);
 };
 
 const initialize = async () => {
-  await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeDiffWorker(), initializeExtensionManagementWorker(), initializeFileSystemWorker(), initializeErrorWorker()]);
+  await Promise.all([createExtensionHostRpc(), createTextMeasurementWorkerRpc(), initializeDiffWorker(), initializeExtensionManagementWorker(), initializeFileSystemWorker(), initializeErrorWorker(), initializeSyntaxHighlightingWorker()]);
 };
 
 const getInlineDiffChanges = (linesLeft, linesRight) => {
-  return invoke$2('Diff.diffInline', linesLeft, linesRight);
+  return invoke$4('Diff.diffInline', linesLeft, linesRight);
 };
 
 const getInlineDiffState = async (contentLeft, contentRight) => {
@@ -1814,16 +1853,6 @@ const getMinLineY = savedState => {
   return 0;
 };
 
-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) {
@@ -1836,6 +1865,16 @@ const getProtocol = uri => {
   return 'file';
 };
 
+const getPath = (protocol, uri) => {
+  if (!uri) {
+    return '';
+  }
+  if (protocol === 'file' && !uri.startsWith('file://')) {
+    return uri;
+  }
+  return uri.slice(protocol.length + 3);
+};
+
 const getFileExtension = uri => {
   const protocol = getProtocol(uri);
   const path = getPath(protocol, uri);
@@ -1963,6 +2002,20 @@ 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');
@@ -1991,23 +2044,11 @@ const readFile = async uri => {
   }
   const path = getPath(protocol, uri);
   if (protocol === 'memfs') {
-    return invoke$1('FileSystemMemory.readFile', path);
+    return invoke$3('FileSystemMemory.readFile', path);
   }
-  return invoke$1('ExtensionHostFileSystem.readFile', protocol, path);
+  return invoke$3('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);
@@ -2024,33 +2065,163 @@ const loadFileContent = async uri => {
     };
   }
 };
+
 const loadFileContents = async (uriLeft, uriRight) => {
-  return Promise.all([loadFileContent(uriLeft), loadFileContent(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 loadContent = async (state, savedState) => {
+let cachedAssetDir = '';
+let cachedPlatform = -1;
+let cachedLanguages = [];
+const getLanguages = async (platform, assetDir) => {
+  if (cachedPlatform === platform && cachedAssetDir === assetDir) {
+    return cachedLanguages;
+  }
+  try {
+    const languages = await invoke$2('Extensions.getLanguages', platform, assetDir);
+    if (!Array.isArray(languages)) {
+      return [];
+    }
+    cachedPlatform = platform;
+    cachedAssetDir = assetDir;
+    cachedLanguages = languages;
+    return cachedLanguages;
+  } catch {
+    return [];
+  }
+};
+
+const getFileName = uri => {
+  const protocol = getProtocol(uri);
+  const path = getPath(protocol, uri).split(/[?#]/, 1)[0];
+  const lastSlashIndex = Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\'));
+  if (lastSlashIndex === -1) {
+    return path;
+  }
+  return path.slice(lastSlashIndex + 1);
+};
+const getExtensionIndexes = fileName => {
+  const lastIndex = fileName.lastIndexOf('.');
+  if (lastIndex === -1) {
+    return [-1, -1];
+  }
+  return [lastIndex, fileName.lastIndexOf('.', lastIndex - 1)];
+};
+const hasMatchingExtension = (language, extension) => {
+  if (!extension || !language.extensions) {
+    return false;
+  }
+  const extensionLower = extension.toLowerCase();
+  return language.extensions.some(value => value.toLowerCase() === extensionLower);
+};
+const hasMatchingFileName = (language, fileName) => {
+  if (!fileName || !language.fileNames) {
+    return false;
+  }
+  const fileNameLower = fileName.toLowerCase();
+  return language.fileNames.some(value => value.toLowerCase() === fileNameLower);
+};
+const getSyntaxLanguage = (uri, languages) => {
+  const fileName = getFileName(uri);
+  if (!fileName) {
+    return {
+      languageId: 'unknown',
+      tokenizerPath: ''
+    };
+  }
+  const [lastExtensionIndex, secondExtensionIndex] = getExtensionIndexes(fileName);
+  const extension = lastExtensionIndex === -1 ? '' : fileName.slice(lastExtensionIndex);
+  const secondExtension = secondExtensionIndex === -1 ? '' : fileName.slice(secondExtensionIndex);
+  for (const language of languages) {
+    if (hasMatchingExtension(language, extension) || hasMatchingExtension(language, secondExtension) || hasMatchingFileName(language, fileName)) {
+      return {
+        languageId: language.id,
+        tokenizerPath: language.tokenize || ''
+      };
+    }
+  }
+  return {
+    languageId: 'unknown',
+    tokenizerPath: ''
+  };
+};
+
+const emptySyntaxHighlightingState = {
+  languageIdLeft: 'unknown',
+  languageIdRight: 'unknown',
+  tokenizedLinesLeft: [],
+  tokenizedLinesRight: []
+};
+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 [];
+  }
+  try {
+    const result = await invoke('Tokenizer.tokenizeCodeBlock', content, language.languageId, language.tokenizerPath);
+    if (!Array.isArray(result)) {
+      return [];
+    }
+    return result;
+  } catch {
+    return [];
+  }
+};
+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()];
+    await Promise.all(uniqueLanguages.map(loadTokenizer));
+    const [tokenizedLinesLeft, tokenizedLinesRight] = await Promise.all([tokenizeCodeBlock(contentLeft, languageLeft), tokenizeCodeBlock(contentRight, languageRight)]);
+    return {
+      languageIdLeft: languageLeft.languageId,
+      languageIdRight: languageRight.languageId,
+      tokenizedLinesLeft,
+      tokenizedLinesRight
+    };
+  } catch {
+    return emptySyntaxHighlightingState;
+  }
+};
+
+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 reloadContent = async (state, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack) => {
   const {
+    assetDir,
     height,
     itemHeight,
     knownImageExtensions,
     minimumSliderSize,
-    uri
+    minLineY,
+    platform,
+    uriLeft,
+    uriRight
   } = state;
-  const [uriLeft, uriRight] = getInlineDiffUris(uri);
-  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 displayedContentLeft = getDisplayedContent(contentLeft, errorLeftMessage, errorLeftStack);
   const displayedContentRight = getDisplayedContent(contentRight, errorRightMessage, errorRightStack);
   const totalLineCountLeft = renderModeLeft === 'image' ? 1 : getLineCount(displayedContentLeft);
@@ -2063,6 +2234,10 @@ const loadContent = async (state, savedState) => {
     inlineChanges: [],
     totalLineCount: Math.max(totalLineCountLeft, totalLineCountRight)
   };
+  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 {
     ...state,
     contentLeft,
@@ -2071,18 +2246,43 @@ const loadContent = async (state, savedState) => {
     errorLeftStack,
     errorRightMessage,
     errorRightStack,
+    imageSrcLeft,
+    imageSrcRight,
     initial: false,
     inlineChanges,
+    languageIdLeft: syntaxHighlightingState?.languageIdLeft || 'unknown',
+    languageIdRight: syntaxHighlightingState?.languageIdRight || 'unknown',
     renderModeLeft,
     renderModeRight,
+    tokenizedLinesLeft: syntaxHighlightingState?.tokenizedLinesLeft || [],
+    tokenizedLinesRight: syntaxHighlightingState?.tokenizedLinesRight || [],
     totalLineCount,
     totalLineCountLeft,
     totalLineCountRight,
-    uriLeft,
-    uriRight,
     ...getScrollState(height, itemHeight, totalLineCount, minimumSliderSize, minLineY * itemHeight)
   };
 };
+const loadContent = async (state, savedState) => {
+  const {
+    uri
+  } = state;
+  const [uriLeft, uriRight] = getInlineDiffUris(uri);
+  const {
+    contentLeft,
+    contentRight,
+    errorLeftMessage,
+    errorLeftStack,
+    errorRightMessage,
+    errorRightStack
+  } = await loadFileContents(uriLeft, uriRight);
+  const minLineY = getMinLineY(savedState);
+  return reloadContent({
+    ...state,
+    minLineY,
+    uriLeft,
+    uriRight
+  }, contentLeft, contentRight, errorLeftMessage, errorLeftStack, errorRightMessage, errorRightStack);
+};
 
 const getCss = () => {
   return `
@@ -2105,6 +2305,13 @@ const getCss = () => {
   word-break: break-word;
 }
 
+.DiffEditorErrorStack a {
+  color: inherit;
+  display: block;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
   `;
 };
 
@@ -2654,19 +2861,114 @@ const ScrollBar = 'ScrollBar';
 const ScrollBarThumb = 'ScrollBarThumb';
 const Viewlet = 'Viewlet';
 
+const HandleContextMenu = 2;
 const HandleWheel = 9;
 const HandleSashPointerDown = 11;
 const HandleScrollBarPointerDown = 14;
 
+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 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 stackLocationRegex = /((?:https?:\/\/|file:\/\/\/?|\/)[^\s)]+):(\d+):(\d+)\)?$/;
+const getStackLineLink = 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) {
+    return [{
+      childCount: 1,
+      type: Div
+    }, text(stackLine)];
+  }
+  return [{
+    childCount: 1,
+    type: Div
+  }, {
+    childCount: 1,
+    href,
+    rel: 'noreferrer',
+    target: '_blank',
+    type: A
+  }, text(stackLine)];
+};
 const getErrorStackDom = errorStack => {
   if (!errorStack) {
     return [];
   }
+  const stackLines = errorStack.split('\n');
   return [{
-    childCount: 1,
+    childCount: stackLines.length,
     className: DiffEditorErrorStack,
     type: Div
-  }, text(errorStack)];
+  }, ...stackLines.flatMap(getErrorStackLineDom)];
 };
 
 const getErrorDom = (contentClassName, errorMessage, errorStack) => {
@@ -2686,34 +2988,28 @@ const getErrorDom = (contentClassName, errorMessage, errorStack) => {
   }, text(errorMessage), ...getErrorStackDom(errorStack)];
 };
 
-const getLineNumberDom = lineNumber => {
+const getTokenDom = tokenPart => {
+  if (!tokenPart.className) {
+    return [text(tokenPart.text)];
+  }
   return [{
     childCount: 1,
-    className: DiffEditorLineNumber,
-    type: Div
-  }, text(String(lineNumber))];
+    className: tokenPart.className,
+    type: Span
+  }, text(tokenPart.text)];
 };
 
-const getLineNumbersDom = (startLineNumber, lineCount) => {
+const getRowDom = (line, className = EditorRow, parts = []) => {
+  const children = parts.length === 0 ? [text(line)] : parts.flatMap(getTokenDom);
   return [{
-    childCount: lineCount,
-    className: DiffEditorGutter,
-    type: Div
-  }, ...Array.from({
-    length: lineCount
-  }, (_, index) => getLineNumberDom(startLineNumber + index)).flat()];
-};
-
-const getRowDom = (line, className = EditorRow) => {
-  return [{
-    childCount: 1,
+    childCount: children.length,
     className,
     type: Div
-  }, text(line)];
+  }, ...children];
 };
 
-const getRowsDom = (lines, classNames = []) => {
-  return lines.flatMap((line, index) => getRowDom(line, classNames[index] || EditorRow));
+const getRowsDom = (lines, classNames = [], rowParts = []) => {
+  return lines.flatMap((line, index) => getRowDom(line, classNames[index] || EditorRow, rowParts[index] || []));
 };
 
 const getVisibleRows = (content, totalLineCount, minLineY, maxLineY) => {
@@ -2761,68 +3057,60 @@ const getRowText$1 = (lines, inlineChange, side) => {
       return '';
   }
 };
-const getVisibleInlineDiffRows = (content, totalLineCount, inlineChanges, minLineY, maxLineY, side) => {
+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 => ({
+    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 => ({
-    className: getRowClassName$1(inlineChange.type, side),
-    text: getRowText$1(lines, inlineChange, side)
-  }));
+  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 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) => {
+const getContentDom = (contentClassName, content, errorMessage, errorStack, lineNumbers, totalLineCount, minLineY, maxLineY, inlineChanges, side, tokenizedLines = []) => {
   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 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 rowsChildCount = lines.length + 2;
   if (lineNumbers) {
@@ -2831,26 +3119,15 @@ const getContentDom = (contentClassName, content, errorMessage, errorStack, line
   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 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 getImageSrc = uri => {
-  const protocol = getProtocol(uri);
-  if (protocol === 'data') {
-    return `data:${getPath(protocol, uri)}`;
-  }
-  if (protocol === 'file') {
-    return toFileUri(uri);
-  }
-  return uri;
+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 => {
+const getImageLeftDom = (uriLeft, imageSrc) => {
   return [{
     childCount: 1,
     className: DiffEditorContent,
@@ -2867,12 +3144,12 @@ const getImageLeftDom = uriLeft => {
     alt: uriLeft,
     childCount: 0,
     className: ImageElement,
-    src: getImageSrc(uriLeft),
+    src: imageSrc,
     type: Img
   }];
 };
 
-const getImageRightDom = uriRight => {
+const getImageRightDom = (uriRight, imageSrc) => {
   return [{
     childCount: 1,
     className: DiffEditorContent,
@@ -2889,7 +3166,7 @@ const getImageRightDom = uriRight => {
     alt: uriRight,
     childCount: 0,
     className: ImageElement,
-    src: getImageSrc(uriRight),
+    src: imageSrc,
     type: Img
   }];
 };
@@ -2951,20 +3228,23 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
   const rows = getInlineDiffRows(contentLeft, contentRight);
   const visibleRows = rows.slice(minLineY, maxLineY);
   const contentChildCount = lineNumbers ? 2 : 1;
+  const scrollBarActive = visibleRows.length < rows.length;
   const rowsChildCount = visibleRows.length + 2;
+  const lineNumberDom = lineNumbers ? [{
+    childCount: visibleRows.length,
+    className: DiffEditorGutter,
+    type: Div
+  }, ...visibleRows.flatMap(getInlineDiffLineNumberDom)] : [];
+  const scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
   return [{
-    childCount: 2,
+    childCount: scrollBarActive ? 2 : 1,
     className: `${Viewlet} ${DiffEditor} ${InlineDiffEditor}`,
     type: Div
   }, {
     childCount: contentChildCount,
     className: `${DiffEditorContent} ${InlineDiffEditorContent}`,
     type: Div
-  }, ...(lineNumbers ? [{
-    childCount: visibleRows.length,
-    className: DiffEditorGutter,
-    type: Div
-  }, ...visibleRows.flatMap(getInlineDiffLineNumberDom)] : []), {
+  }, ...lineNumberDom, {
     childCount: rowsChildCount,
     className: DiffEditorRows,
     type: Div
@@ -2976,7 +3256,7 @@ const getInlineDiffEditorVirtualDom = (contentLeft, contentRight, lineNumbers, m
     childCount: 0,
     className: DiffEditorSpacerBottom,
     type: Div
-  }, ...getScrollBarDom()];
+  }, ...scrollBarDom];
 };
 
 const getDiffEditorVirtualDom = ({
@@ -2987,6 +3267,8 @@ const getDiffEditorVirtualDom = ({
   errorLeftStack,
   errorRightMessage,
   errorRightStack,
+  imageSrcLeft,
+  imageSrcRight,
   inlineChanges,
   layout,
   lineNumbers,
@@ -2994,6 +3276,9 @@ const getDiffEditorVirtualDom = ({
   minLineY,
   renderModeLeft,
   renderModeRight,
+  scrollBarActive,
+  tokenizedLinesLeft,
+  tokenizedLinesRight,
   totalLineCount,
   totalLineCountLeft,
   totalLineCountRight,
@@ -3007,18 +3292,32 @@ 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 scrollBarDom = scrollBarActive ? getScrollBarDom() : [];
   const dom = [{
-    childCount: 4,
+    childCount: scrollBarActive ? 4 : 3,
     className: `${Viewlet} ${DiffEditor} ${diffEditorLayoutClass}`,
+    onContextMenu: HandleContextMenu,
     onWheel: HandleWheel,
     type: Div
-  }, ...(renderModeLeft === 'image' ? getImageLeftDom(uriLeft) : getContentLeftDom(contentLeft, errorLeftMessage, errorLeftStack, showLineNumbers, totalLineCountLeft, minLineY, maxLineY, inlineChanges)), {
+  }, ...leftDom, {
     childCount: 0,
     className: `${Sash} ${sashLayoutClass}`,
     name: 'sash',
     onPointerDown: HandleSashPointerDown,
     type: Div
-  }, ...(renderModeRight === 'image' ? getImageRightDom(uriRight) : getContentRightDom(contentRight, errorRightMessage, errorRightStack, showLineNumbers, totalLineCountRight, minLineY, maxLineY, inlineChanges)), ...getScrollBarDom()];
+  }, ...rightDom, ...scrollBarDom];
   return dom;
 };
 
@@ -3156,6 +3455,8 @@ const setLayout = (state, layout) => {
 const commandMap = {
   'DiffView.create': create2,
   'DiffView.diff2': diff2,
+  'DiffView.getCommandIds': getCommandIds,
+  'DiffView.handleContextMenu': wrapCommand(handleContextMenu),
   'DiffView.handleSashPointerDown': wrapCommand(handleSashPointerDown),
   'DiffView.handleSashPointerMove': wrapCommand(handleSashPointerMove),
   'DiffView.handleSashPointerUp': wrapCommand(handleSashPointerUp),
@@ -3178,7 +3479,7 @@ const listen = async () => {
   const rpc = await create$2({
     commandMap: commandMap
   });
-  set$2(rpc);
+  set$3(rpc);
 };
 
 const main = async () => {