vue-devui 1.5.9 → 1.5.11-hotfix.1

package/code-review/index.es.js

@@ -1,4 +1,20 @@
-import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode } from "vue";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode, vShow } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import Clipboard from "clipboard";
 import * as Diff2Html from "diff2html";
@@ -284,6 +300,7 @@ const FlexibleOverlay = defineComponent({
     };
   }
 });
+const inBrowser = typeof window !== "undefined";
 const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
 const isObject = (val) => val !== null && typeof val === "object";
 const ns$1 = useNamespace("popper-trigger");
@@ -1083,7 +1100,7 @@ var lodash = { exports: {} };
     }
     var runInContext = function runInContext2(context) {
       context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-      var Array2 = context.Array, Date = context.Date, Error = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError = context.TypeError;
+      var Array2 = context.Array, Date = context.Date, Error2 = context.Error, Function2 = context.Function, Math2 = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String2 = context.String, TypeError2 = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -1097,7 +1114,7 @@ var lodash = { exports: {} };
       var objectCtorString = funcToString.call(Object2);
       var oldDash = root._;
       var reIsNative = RegExp2("^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
-      var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
+      var Buffer2 = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array2 = context.Uint8Array, allocUnsafe = Buffer2 ? Buffer2.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
       var defineProperty = function() {
         try {
           var func = getNative(Object2, "defineProperty");
@@ -1107,11 +1124,11 @@ var lodash = { exports: {} };
         }
       }();
       var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout, ctxNow = Date && Date.now !== root.Date.now && Date.now, ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
-      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
-      var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
-      var metaMap = WeakMap && new WeakMap();
+      var nativeCeil = Math2.ceil, nativeFloor = Math2.floor, nativeGetSymbols = Object2.getOwnPropertySymbols, nativeIsBuffer = Buffer2 ? Buffer2.isBuffer : undefined$1, nativeIsFinite = context.isFinite, nativeJoin = arrayProto.join, nativeKeys = overArg(Object2.keys, Object2), nativeMax = Math2.max, nativeMin = Math2.min, nativeNow = Date.now, nativeParseInt = context.parseInt, nativeRandom = Math2.random, nativeReverse = arrayProto.reverse;
+      var DataView = getNative(context, "DataView"), Map = getNative(context, "Map"), Promise2 = getNative(context, "Promise"), Set = getNative(context, "Set"), WeakMap2 = getNative(context, "WeakMap"), nativeCreate = getNative(Object2, "create");
+      var metaMap = WeakMap2 && new WeakMap2();
       var realNames = {};
-      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap);
+      var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set), weakMapCtorString = toSource(WeakMap2);
       var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
       function lodash2(value) {
         if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
@@ -1564,7 +1581,7 @@ var lodash = { exports: {} };
       }
       function baseDelay(func, wait, args) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         return setTimeout(function() {
           func.apply(undefined$1, args);
@@ -2359,7 +2376,7 @@ var lodash = { exports: {} };
       }
       function cloneArrayBuffer(arrayBuffer) {
         var result2 = new arrayBuffer.constructor(arrayBuffer.byteLength);
-        new Uint8Array(result2).set(new Uint8Array(arrayBuffer));
+        new Uint8Array2(result2).set(new Uint8Array2(arrayBuffer));
         return result2;
       }
       function cloneDataView(dataView, isDeep) {
@@ -2608,7 +2625,7 @@ var lodash = { exports: {} };
           while (index2--) {
             var func = funcs[index2];
             if (typeof func != "function") {
-              throw new TypeError(FUNC_ERROR_TEXT);
+              throw new TypeError2(FUNC_ERROR_TEXT);
             }
             if (prereq && !wrapper && getFuncName(func) == "wrapper") {
               var wrapper = new LodashWrapper([], true);
@@ -2821,7 +2838,7 @@ var lodash = { exports: {} };
       function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary2, arity) {
         var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;
         if (!isBindKey && typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         var length = partials ? partials.length : 0;
         if (!length) {
@@ -2941,7 +2958,7 @@ var lodash = { exports: {} };
             object = object.buffer;
             other = other.buffer;
           case arrayBufferTag:
-            if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
+            if (object.byteLength != other.byteLength || !equalFunc(new Uint8Array2(object), new Uint8Array2(other))) {
               return false;
             }
             return true;
@@ -3103,7 +3120,7 @@ var lodash = { exports: {} };
         return result2;
       };
       var getTag = baseGetTag;
-      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {
+      if (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise2 && getTag(Promise2.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap2 && getTag(new WeakMap2()) != weakMapTag) {
         getTag = function(value) {
           var result2 = baseGetTag(value), Ctor = result2 == objectTag ? value.constructor : undefined$1, ctorString = Ctor ? toSource(Ctor) : "";
           if (ctorString) {
@@ -4088,7 +4105,7 @@ var lodash = { exports: {} };
       };
       function after(n, func) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -4105,7 +4122,7 @@ var lodash = { exports: {} };
       function before(n, func) {
         var result2;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         n = toInteger(n);
         return function() {
@@ -4149,7 +4166,7 @@ var lodash = { exports: {} };
       function debounce(func, wait, options) {
         var lastArgs, lastThis, maxWait, result2, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         wait = toNumber(wait) || 0;
         if (isObject2(options)) {
@@ -4238,7 +4255,7 @@ var lodash = { exports: {} };
       }
       function memoize(func, resolver) {
         if (typeof func != "function" || resolver != null && typeof resolver != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         var memoized = function() {
           var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
@@ -4255,7 +4272,7 @@ var lodash = { exports: {} };
       memoize.Cache = MapCache;
       function negate(predicate) {
         if (typeof predicate != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         return function() {
           var args = arguments;
@@ -4299,14 +4316,14 @@ var lodash = { exports: {} };
       });
       function rest(func, start) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         start = start === undefined$1 ? start : toInteger(start);
         return baseRest(func, start);
       }
       function spread(func, start) {
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         start = start == null ? 0 : nativeMax(toInteger(start), 0);
         return baseRest(function(args) {
@@ -4320,7 +4337,7 @@ var lodash = { exports: {} };
       function throttle(func, wait, options) {
         var leading = true, trailing = true;
         if (typeof func != "function") {
-          throw new TypeError(FUNC_ERROR_TEXT);
+          throw new TypeError2(FUNC_ERROR_TEXT);
         }
         if (isObject2(options)) {
           leading = "leading" in options ? !!options.leading : leading;
@@ -4462,7 +4479,7 @@ var lodash = { exports: {} };
       }
       function isNative(value) {
         if (isMaskable(value)) {
-          throw new Error(CORE_ERROR_TEXT);
+          throw new Error2(CORE_ERROR_TEXT);
         }
         return baseIsNative(value);
       }
@@ -5000,7 +5017,7 @@ var lodash = { exports: {} };
         if (!variable) {
           source = "with (obj) {\n" + source + "\n}\n";
         } else if (reForbiddenIdentifierChars.test(variable)) {
-          throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT);
+          throw new Error2(INVALID_TEMPL_VAR_ERROR_TEXT);
         }
         source = (isEvaluating ? source.replace(reEmptyStringLeading, "") : source).replace(reEmptyStringMiddle, "$1").replace(reEmptyStringTrailing, "$1;");
         source = "function(" + (variable || "obj") + ") {\n" + (variable ? "" : "obj || (obj = {});\n") + "var __t, __p = ''" + (isEscaping ? ", __e = _.escape" : "") + (isEvaluating ? ", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n" : ";\n") + source + "return __p\n}";
@@ -5119,7 +5136,7 @@ var lodash = { exports: {} };
         try {
           return apply(func, undefined$1, args);
         } catch (e) {
-          return isError(e) ? e : new Error(e);
+          return isError(e) ? e : new Error2(e);
         }
       });
       var bindAll = flatRest(function(object, methodNames) {
@@ -5133,7 +5150,7 @@ var lodash = { exports: {} };
         var length = pairs == null ? 0 : pairs.length, toIteratee = getIteratee();
         pairs = !length ? [] : arrayMap(pairs, function(pair) {
           if (typeof pair[1] != "function") {
-            throw new TypeError(FUNC_ERROR_TEXT);
+            throw new TypeError2(FUNC_ERROR_TEXT);
           }
           return [toIteratee(pair[0]), pair[1]];
         });
@@ -6199,15 +6216,27 @@ const codeReviewProps = {
     type: Boolean,
     default: false
   },
+  allowComment: {
+    type: Boolean,
+    default: true
+  },
+  allowExpand: {
+    type: Boolean,
+    default: true
+  },
+  showBlob: {
+    type: Boolean,
+    default: false
+  },
   outputFormat: {
     type: String,
     default: "line-by-line"
   },
-  expandAllThreshold: {
+  expandThreshold: {
     type: Number,
     default: 50
   },
-  codeLoader: {
+  expandLoader: {
     type: Function
   }
 };
@@ -6300,25 +6329,98 @@ var CodeReviewHeader = defineComponent({
 });
 const ExpandLineReg = /^@@ -(\d+),(\d+) \+(\d+),(\d+) @@/;
 const FirstLineReg = /^@@ -[0,1](?!\d)/;
+const TableTrReg = /<tr[^>]*>[\s\S]*?<\/tr>/gi;
+const TableTdReg = /<td[^>]*>[\s\S]*?<\/td>/gi;
+const TableTbodyReg = /<tbody[^>]*>[\s\S]*?<\/tbody>/gi;
+const TableTbodyAttrReg = /<tbody([^>]*)>/i;
+const EmptyDataLangReg = /<div[^>]* data-lang="">[\s\S]*?<\/div>/gi;
+const LineByLineTemplate = `<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+<div class="d2h-file-diff">
+    <div class="d2h-code-wrapper">
+        <table class="d2h-diff-table">
+            <tbody class="d2h-diff-tbody">
+            {{{diffs}}}
+            </tbody>
+        </table>
+    </div>
+</div>
+</div>`;
+const SideBySideTemplate = `<div id="{{fileHtmlId}}" class="d2h-file-wrapper" data-lang="{{file.language}}">
+<div class="d2h-files-diff">
+    <div class="d2h-file-side-diff">
+        <div class="d2h-code-wrapper">
+            <table class="d2h-diff-table">
+                <tbody class="d2h-diff-tbody">
+                {{{diffs.left}}}
+                {{{diffs.right}}}
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</div>`;
+const EmptyTemplate = {
+  "generic-empty-diff": ""
+};
+const TemplateMap = {
+  "line-by-line": __spreadValues({ "line-by-line-file-diff": LineByLineTemplate }, EmptyTemplate),
+  "side-by-side": __spreadValues({ "side-by-side-file-diff": SideBySideTemplate }, EmptyTemplate)
+};
 function notEmptyNode(node) {
   const classes = node.classList;
   return !classes.contains("d2h-info") && !classes.contains("d2h-emptyplaceholder") && !classes.contains("comment-cell");
 }
 function insertIncrementLineToPage(referenceDom, trNodes, direction) {
-  const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
   if (direction === "up") {
     const nextSibling = referenceDom.nextElementSibling;
-    trNodesToBeInserted.forEach((item) => {
+    trNodes.forEach((item) => {
       var _a;
       (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
     });
   } else {
-    trNodesToBeInserted.forEach((item) => {
+    trNodes.forEach((item) => {
       var _a;
       (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, referenceDom);
     });
   }
 }
+function ifRemoveExpandLineForDoubleColumn(expandDom, newExpandDom, direction) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const matches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  if (!matches) {
+    return true;
+  }
+  const leftLineNumber = parseInt(matches[1]);
+  const addedLine = parseInt(matches[2]);
+  const rightLineNumber = parseInt(matches[3]);
+  if (direction === "up") {
+    const prevSibling = expandDom.previousElementSibling;
+    if (!prevSibling) {
+      if (leftLineNumber === 1 && rightLineNumber === 1) {
+        expandDom == null ? void 0 : expandDom.remove();
+        return true;
+      }
+    } else {
+      const prevLeftLineNumber = parseInt((_b = (_a = prevSibling.children) == null ? void 0 : _a[0]) == null ? void 0 : _b.innerText);
+      const prevRightLineNumber = parseInt((_d = (_c = prevSibling.children) == null ? void 0 : _c[2]) == null ? void 0 : _d.innerText);
+      if (leftLineNumber === prevLeftLineNumber + 1 && rightLineNumber === prevRightLineNumber + 1) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  } else {
+    const nextSibling = expandDom.nextElementSibling;
+    if (nextSibling) {
+      const nextLeftLineNumber = parseInt((_f = (_e = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.innerText);
+      const nextRightLineNumber = parseInt((_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[2]) == null ? void 0 : _h.innerText);
+      if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  }
+  return false;
+}
 function ifRemoveExpandLine(expandDom, newExpandDom, direction) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const matches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
@@ -6345,11 +6447,13 @@ function ifRemoveExpandLine(expandDom, newExpandDom, direction) {
     }
   } else {
     const nextSibling = expandDom.nextElementSibling;
-    const nextLeftLineNumber = parseInt((_i = (_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[0].children) == null ? void 0 : _h[0]) == null ? void 0 : _i.innerText);
-    const nextRightLineNumber = parseInt((_l = (_k = (_j = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _j[0].children) == null ? void 0 : _k[1]) == null ? void 0 : _l.innerText);
-    if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
-      expandDom.remove();
-      return true;
+    if (nextSibling) {
+      const nextLeftLineNumber = parseInt((_i = (_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[0].children) == null ? void 0 : _h[0]) == null ? void 0 : _i.innerText);
+      const nextRightLineNumber = parseInt((_l = (_k = (_j = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _j[0].children) == null ? void 0 : _k[1]) == null ? void 0 : _l.innerText);
+      if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+        expandDom.remove();
+        return true;
+      }
     }
   }
   return false;
@@ -6365,14 +6469,33 @@ function updateExpandLineCount(expandDom, newExpandDom) {
   expandDom.children[1].children[0].innerText = `@@ -${(newMatches == null ? void 0 : newMatches[1]) || 0},${newChangedNumLeft} +${(newMatches == null ? void 0 : newMatches[3]) || 0},${newChangedNumRight} @@`;
 }
 function parseDiffCode(container, code, outputFormat) {
+  var _a;
   const diff2HtmlUi = new Diff2HtmlUI(container, code, {
     drawFileList: false,
     matching: "lines",
     outputFormat,
-    highlight: true
+    highlight: true,
+    rawTemplates: TemplateMap[outputFormat]
   });
+  if (outputFormat === "side-by-side") {
+    let diffHtmlStr = diff2HtmlUi.diffHtml;
+    if (diffHtmlStr.match(EmptyDataLangReg)) {
+      diffHtmlStr = diffHtmlStr.replace(EmptyDataLangReg, "");
+    }
+    const trList = diffHtmlStr.match(TableTrReg);
+    const trListLength = trList.length;
+    let newTrStr = "";
+    const offset2 = trListLength / 2;
+    for (let i = 0; i < trListLength / 2; i++) {
+      const leftTdList = trList[i].match(TableTdReg);
+      const rightTdList = trList[i + offset2].match(TableTdReg);
+      newTrStr += `<tr>${leftTdList == null ? void 0 : leftTdList.join("")}${rightTdList == null ? void 0 : rightTdList.join("")}</tr>`;
+    }
+    const tbodyAttr = ((_a = diffHtmlStr.match(TableTbodyAttrReg)) == null ? void 0 : _a[1]) || "";
+    const newDiffHtmlStr = diffHtmlStr.replace(TableTbodyReg, `<tbody ${tbodyAttr}>${newTrStr}</tbody>`);
+    diff2HtmlUi.diffHtml = newDiffHtmlStr;
+  }
   diff2HtmlUi.draw();
-  diff2HtmlUi.highlightCode();
 }
 function setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR) {
   if (trNode) {
@@ -6389,7 +6512,40 @@ function updateExpandUpDownButton(trNode) {
   trNode.children[0].children[0].classList.add("all-expand");
   trNode.children[0].children[0].innerHTML = AllExpandIcon();
 }
-function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateExpandButton = false) {
+function updateLineNumberInDatasetForDoubleColumn(trNode, expandThreshold, position, updateExpandButton = false) {
+  let nextL;
+  let prevL;
+  let nextR;
+  let prevR;
+  if (position === "top") {
+    const nextLineNode = trNode.nextElementSibling;
+    nextL = parseInt(nextLineNode.children[0].innerText) - 1;
+    prevL = Math.max(nextL - expandThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[2].innerText) - 1;
+    prevR = Math.max(nextR - expandThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].innerText) + 1;
+    nextL = prevL + expandThreshold - 1;
+    prevR = parseInt(prevLineNode.children[2].innerText) + 1;
+    nextR = prevR + expandThreshold - 1;
+  } else {
+    const prevLineNode = trNode.previousElementSibling;
+    const nextLineNode = trNode.nextElementSibling;
+    const prevLineNumber = parseInt(prevLineNode.children[0].innerText);
+    const nextLineNumber = parseInt(nextLineNode.children[0].innerText);
+    prevL = prevLineNumber + 1;
+    prevR = parseInt(prevLineNode.children[2].innerText) + 1;
+    nextL = nextLineNumber - 1;
+    nextR = parseInt(nextLineNode.children[2].innerText) - 1;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function updateLineNumberInDataset(trNode, expandThreshold, position, updateExpandButton = false) {
   let nextL;
   let prevL;
   let nextR;
@@ -6397,15 +6553,15 @@ function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateE
   if (position === "top") {
     const nextLineNode = trNode.nextElementSibling;
     nextL = parseInt(nextLineNode.children[0].children[0].innerText) - 1;
-    prevL = Math.max(nextL - expandAllThreshold + 1, 1);
+    prevL = Math.max(nextL - expandThreshold + 1, 1);
     nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
-    prevR = Math.max(nextR - expandAllThreshold + 1, 1);
+    prevR = Math.max(nextR - expandThreshold + 1, 1);
   } else if (position === "bottom") {
     const prevLineNode = trNode.previousElementSibling;
     prevL = parseInt(prevLineNode.children[0].children[0].innerText) + 1;
-    nextL = prevL + expandAllThreshold - 1;
+    nextL = prevL + expandThreshold - 1;
     prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
-    nextR = prevR + expandAllThreshold - 1;
+    nextR = prevR + expandThreshold - 1;
   } else {
     const prevLineNode = trNode.previousElementSibling;
     const nextLineNode = trNode.nextElementSibling;
@@ -6415,14 +6571,14 @@ function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateE
     prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
     nextL = nextLineNumber - 1;
     nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
-    const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold;
     if (isExpandAll && updateExpandButton) {
       updateExpandUpDownButton(trNode);
     }
   }
   setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
 }
-function getLineNumberFormDataset(expandDom, expandAllThreshold) {
+function getLineNumberFromDataset(expandDom, expandThreshold) {
   var _a, _b, _c;
   const attrsMap = (_b = (_a = expandDom.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.dataset;
   const prevL = Number(attrsMap == null ? void 0 : attrsMap.prevL);
@@ -6435,14 +6591,14 @@ function getLineNumberFormDataset(expandDom, expandAllThreshold) {
     const direction = (_c = buttonClasses.find((item) => item.endsWith("expand"))) == null ? void 0 : _c.split("-")[0];
     if (direction === "up") {
       leftLineEnd = nextL;
-      leftLineStart = Math.max(leftLineEnd - expandAllThreshold + 1, prevL);
+      leftLineStart = Math.max(leftLineEnd - expandThreshold + 1, prevL);
       rightLineEnd = nextR;
-      rightLineStart = Math.max(rightLineEnd - expandAllThreshold + 1, prevR);
+      rightLineStart = Math.max(rightLineEnd - expandThreshold + 1, prevR);
     } else if (direction === "down") {
       leftLineStart = prevL;
-      leftLineEnd = Math.min(leftLineStart + expandAllThreshold - 1, nextL);
+      leftLineEnd = Math.min(leftLineStart + expandThreshold - 1, nextL);
       rightLineStart = prevR;
-      rightLineEnd = Math.min(rightLineStart + expandAllThreshold - 1, nextR);
+      rightLineEnd = Math.min(rightLineStart + expandThreshold - 1, nextR);
     } else {
       leftLineStart = prevL;
       leftLineEnd = nextL;
@@ -6486,7 +6642,7 @@ function attachExpandUpDownButton(parentNode, direction) {
     addExpandButton(parentNode, expandDirectionMap[direction], (_a = expandDirectionIconMap[direction]) == null ? void 0 : _a.call(expandDirectionIconMap));
   }
 }
-function addCommentToPage(lineHost, commentDom, lineSide) {
+function addCommentToPageForSingleColumn(lineHost, commentDom, lineSide) {
   var _a, _b;
   const newLine = document.createElement("tr");
   const newCell = document.createElement("td");
@@ -6503,42 +6659,145 @@ function addCommentToPage(lineHost, commentDom, lineSide) {
     (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
   }
 }
+function addCommentToPageForDoubleColumn(lineHost, commentDom, lineSide) {
+  var _a, _b, _c;
+  const nextSibling = lineHost.nextElementSibling;
+  if (nextSibling && ((_a = nextSibling.classList) == null ? void 0 : _a.contains("comment-block"))) {
+    const insertTdDom = lineSide === "left" ? nextSibling.children[0] : nextSibling.children[1];
+    insertTdDom.classList.add("comment-cell");
+    insertTdDom.appendChild(commentDom);
+  } else {
+    const newLine = document.createElement("tr");
+    const newLeftCell = document.createElement("td");
+    const newRightCell = document.createElement("td");
+    newLeftCell.style.width = "50%";
+    newLeftCell.setAttribute("colspan", "2");
+    newRightCell.style.width = "50%";
+    newRightCell.setAttribute("colspan", "2");
+    if (lineSide === "left") {
+      newLeftCell.classList.add("comment-cell");
+      newLeftCell.appendChild(commentDom);
+    } else {
+      newRightCell.classList.add("comment-cell");
+      newRightCell.appendChild(commentDom);
+    }
+    newLine.classList.add("comment-block");
+    newLine.classList.add(lineSide);
+    newLine.appendChild(newLeftCell);
+    newLine.appendChild(newRightCell);
+    if (lineHost.nextElementSibling) {
+      (_b = lineHost.parentElement) == null ? void 0 : _b.insertBefore(newLine, lineHost.nextElementSibling);
+    } else {
+      (_c = lineHost.parentElement) == null ? void 0 : _c.appendChild(newLine);
+    }
+  }
+}
+function findReferenceDomForSingleColumn(parentNode, lineNumber, lineSide) {
+  var _a, _b, _c, _d;
+  const trNodes = Array.from(parentNode.querySelectorAll("tr"));
+  for (const index2 in trNodes) {
+    const lineIndex = parseInt(index2);
+    const lineNumberBox = Array.from(trNodes[lineIndex].children)[0];
+    if (notEmptyNode(lineNumberBox)) {
+      const oldLineNumber = parseInt((_b = (_a = lineNumberBox.children[0]) == null ? void 0 : _a.innerText) != null ? _b : -1);
+      const newLineNumber = parseInt((_d = (_c = lineNumberBox.children[1]) == null ? void 0 : _c.innerText) != null ? _d : -1);
+      if (lineSide === "left" && oldLineNumber === lineNumber || lineSide === "right" && newLineNumber === lineNumber) {
+        return trNodes[lineIndex];
+      }
+    }
+  }
+}
+function findReferenceDomForDoubleColumn(parentNode, lineNumber, lineSide) {
+  const trNodes = Array.from(parentNode.querySelectorAll("tr"));
+  for (const index2 in trNodes) {
+    const lineIndex = parseInt(index2);
+    let lineNumberBox;
+    if (lineSide === "left") {
+      lineNumberBox = trNodes[lineIndex].children[0];
+    } else {
+      lineNumberBox = trNodes[lineIndex].children[2];
+    }
+    if (lineNumberBox && notEmptyNode(lineNumberBox)) {
+      const currentLineNumber = parseInt(lineNumberBox.innerText);
+      if (currentLineNumber === lineNumber) {
+        return trNodes[lineIndex];
+      }
+    }
+  }
+}
 function useCodeReviewExpand(reviewContentRef, props) {
-  const { outputFormat, expandAllThreshold, codeLoader } = toRefs(props);
+  const { outputFormat, expandThreshold, expandLoader } = toRefs(props);
   const processSideBySide = () => {
-    const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
-    const trNodes = Array.from(leftTable.querySelectorAll("tr"));
+    var _a;
+    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
     const totalLines = trNodes.length;
     for (const index2 in trNodes) {
       const lineIndex = parseInt(index2);
       const lineChildren = Array.from(trNodes[lineIndex].children);
       const lineNumberBox = lineChildren[0];
       const lineContentBox = lineChildren[1];
-      const lineClassList = lineContentBox.classList.value;
-      const lineContent = lineContentBox.innerText.trim();
-      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.includes("d2h-info")) {
+      const lineContent = lineContentBox.innerText;
+      const lineClassList = lineContentBox.classList;
+      if (lineContent.match(ExpandLineReg) && !FirstLineReg.test(lineContent) && lineClassList && lineClassList.contains("d2h-info")) {
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDatasetForDoubleColumn(trNodes[lineIndex], expandThreshold.value, "top");
           attachExpandUpDownButton(lineNumberBox, "up");
         } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
-          const preLineChildren = Array.from(trNodes[prevLineIndex].children);
-          const nextLineChildren = Array.from(trNodes[nextLineIndex].children);
-          const isExpandAll = parseInt(nextLineChildren[0].innerText) - parseInt(preLineChildren[0].innerText) - 1 < expandAllThreshold.value;
+          const preLineNumber = parseInt(trNodes[prevLineIndex].children[0].innerText);
+          const nextLineNumber = parseInt(trNodes[nextLineIndex].children[0].innerText);
+          const isExpandAll = nextLineNumber - preLineNumber - 1 < expandThreshold.value;
+          updateLineNumberInDatasetForDoubleColumn(trNodes[lineIndex], expandThreshold.value, "middle");
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
     }
-    const endLine = trNodes[0].cloneNode(true);
-    if (Object.prototype.hasOwnProperty.call(endLine.children[0].children, 0)) {
-      endLine.children[0].removeChild(endLine.children[0].children[0]);
+    const loadMoreLine = trNodes[0].cloneNode(true);
+    loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
+    loadMoreLine.children[1].innerText = "";
+    (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
+    updateLineNumberInDatasetForDoubleColumn(loadMoreLine, expandThreshold.value, "bottom");
+    attachExpandUpDownButton(loadMoreLine.children[0], "down");
+  };
+  const insertIncrementCodeForDoubleColumn = (code, direction, referenceDom) => {
+    if (!referenceDom) {
+      return;
+    }
+    if (!code) {
+      return referenceDom == null ? void 0 : referenceDom.remove();
+    }
+    const prefix = "--- updated_at	Jan 1, 2019, 0:0:0 AM\n+++ updated_at	Jan 1, 2019, 0:0:0 AM\n";
+    const container = document.createElement("div");
+    parseDiffCode(container, prefix + code, outputFormat.value);
+    const trNodes = Array.from(container.querySelectorAll("tr"));
+    const expandLine = trNodes.find((element) => {
+      var _a;
+      return (_a = element.children[1]) == null ? void 0 : _a.innerText.trim().match(ExpandLineReg);
+    });
+    if (!expandLine) {
+      return;
+    }
+    const trNodesToBeInserted = trNodes.filter((element) => element !== expandLine);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    const removedExpandLine = ifRemoveExpandLineForDoubleColumn(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "top");
+      } else {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDatasetForDoubleColumn(referenceDom, expandThreshold.value, "bottom");
+      }
     }
-    endLine.children[1].innerText = "";
-    const leftEndLine = endLine.cloneNode(true);
-    const rightEndLint = endLine.cloneNode(true);
-    attachExpandUpDownButton(leftEndLine.children[0], "down");
-    leftTable.tBodies[0].appendChild(leftEndLine);
-    rightTable.tBodies[0].appendChild(rightEndLint);
   };
   const processLineByLine = () => {
     var _a;
@@ -6558,15 +6817,15 @@ function useCodeReviewExpand(reviewContentRef, props) {
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
-          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "top");
+          updateLineNumberInDataset(trNodes[lineIndex], expandThreshold.value, "top");
           attachExpandUpDownButton(lineNumberBox, "up");
         } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
           const prevTdNodes = Array.from(trNodes[prevLineIndex].children);
           const prevLineNumber = parseInt(prevTdNodes[0].children[0].innerText);
           const nextTdNodes = Array.from(trNodes[nextLineIndex].children);
           const nextLineNumber = parseInt(nextTdNodes[0].children[0].innerText);
-          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "middle");
-          const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold.value;
+          updateLineNumberInDataset(trNodes[lineIndex], expandThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -6575,7 +6834,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
     loadMoreLine.children[1].innerText = "";
     (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
-    updateLineNumberInDataset(loadMoreLine, expandAllThreshold.value, "bottom");
+    updateLineNumberInDataset(loadMoreLine, expandThreshold.value, "bottom");
     attachExpandUpDownButton(loadMoreLine.children[0], "down");
   };
   const insertIncrementCode = (code, direction, referenceDom) => {
@@ -6596,7 +6855,8 @@ function useCodeReviewExpand(reviewContentRef, props) {
     if (!expandLine) {
       return;
     }
-    insertIncrementLineToPage(referenceDom, trNodes, direction);
+    const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+    insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
     const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
     if (removedExpandLine) {
       return;
@@ -6604,15 +6864,15 @@ function useCodeReviewExpand(reviewContentRef, props) {
     updateExpandLineCount(referenceDom, expandLine);
     if (direction === "up") {
       if (!referenceDom.previousElementSibling) {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "top");
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "top");
       } else {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
       }
     } else {
       if (referenceDom.nextElementSibling) {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "middle", true);
       } else {
-        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "bottom");
+        updateLineNumberInDataset(referenceDom, expandThreshold.value, "bottom");
       }
     }
   };
@@ -6626,10 +6886,10 @@ function useCodeReviewExpand(reviewContentRef, props) {
     if (expandIconDom) {
       const expandDirection = (_a = Array.from(expandIconDom.classList).find((item) => item.endsWith("expand"))) == null ? void 0 : _a.split("-")[0];
       const direction = expandDirection === "up" || expandDirection === "all" ? "up" : "down";
-      const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFormDataset(expandIconDom, expandAllThreshold.value);
-      (_b = codeLoader == null ? void 0 : codeLoader.value) == null ? void 0 : _b.call(codeLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
-        var _a2;
-        insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement);
+      const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFromDataset(expandIconDom, expandThreshold.value);
+      (_b = expandLoader == null ? void 0 : expandLoader.value) == null ? void 0 : _b.call(expandLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
+        var _a2, _b2;
+        outputFormat.value === "line-by-line" ? insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement) : insertIncrementCodeForDoubleColumn(code, direction, (_b2 = expandIconDom.parentElement) == null ? void 0 : _b2.parentElement);
       });
     }
   };
@@ -6639,7 +6899,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
   return { insertExpandButton, onExpandButtonClick };
 }
 function useCodeReview(props, ctx) {
-  const { diff, outputFormat } = toRefs(props);
+  const { diff, outputFormat, allowExpand, showBlob } = toRefs(props);
   const renderHtml = ref("");
   const reviewContentRef = ref();
   const diffFile = ref([]);
@@ -6647,14 +6907,18 @@ function useCodeReview(props, ctx) {
   const initDiffContent = () => {
     diffFile.value = Diff2Html.parse(diff.value);
     nextTick(() => {
-      parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
-      insertExpandButton();
-      ctx.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
+      if (inBrowser && !showBlob.value) {
+        parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+        allowExpand.value && insertExpandButton();
+        ctx.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
+      }
     });
   };
   const onContentClick = (e) => {
     onExpandButtonClick(e);
   };
+  watch(showBlob, initDiffContent);
+  watch(outputFormat, initDiffContent);
   watch(diff, initDiffContent, { immediate: true });
   return { renderHtml, reviewContentRef, diffFile, onContentClick };
 }
@@ -6676,35 +6940,81 @@ function useCodeReviewFold(props, ctx) {
   });
   return { isFold, toggleFold };
 }
-function useCodeReviewComment(reviewContentRef, ctx) {
+function useCodeReviewComment(reviewContentRef, props, ctx) {
+  const { outputFormat, allowComment } = toRefs(props);
   const ns2 = useNamespace("code-review");
   const commentLeft = ref(-100);
   const commentTop = ref(-100);
   let currentLeftLineNumber = -1;
   let currentRightLineNumber = -1;
+  let lastLineNumberContainer;
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
     currentLeftLineNumber = -1;
     currentRightLineNumber = -1;
-  };
-  const onMouseEnter = (e) => {
-    e.currentTarget.getBoundingClientRect();
+    lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+    lastLineNumberContainer = null;
   };
   const onMouseMove = (e) => {
     var _a, _b;
     const composedPath = e.composedPath();
     const trNode = composedPath.find((item) => item.tagName === "TR");
     if (trNode) {
-      const lineNumberContainer = Array.from(trNode.children)[0];
-      if (notEmptyNode(lineNumberContainer)) {
-        const { top, left } = lineNumberContainer.getBoundingClientRect();
-        commentLeft.value = left;
-        commentTop.value = top;
-        currentLeftLineNumber = parseInt((_a = lineNumberContainer.children[0]) == null ? void 0 : _a.innerText) || -1;
-        currentRightLineNumber = parseInt((_b = lineNumberContainer.children[1]) == null ? void 0 : _b.innerText) || -1;
+      if (outputFormat.value === "line-by-line") {
+        const lineNumberContainer = Array.from(trNode.children)[0];
+        if (lastLineNumberContainer !== lineNumberContainer) {
+          lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+        }
+        if (notEmptyNode(lineNumberContainer)) {
+          lastLineNumberContainer = lineNumberContainer;
+          lineNumberContainer.classList.add("comment-icon-hover");
+          const { top, left } = lineNumberContainer.getBoundingClientRect();
+          commentLeft.value = left;
+          commentTop.value = top;
+          currentLeftLineNumber = parseInt((_a = lineNumberContainer.children[0]) == null ? void 0 : _a.innerText) || -1;
+          currentRightLineNumber = parseInt((_b = lineNumberContainer.children[1]) == null ? void 0 : _b.innerText) || -1;
+        } else {
+          resetLeftTop();
+        }
       } else {
-        resetLeftTop();
+        if (trNode.classList.contains("comment-block")) {
+          return resetLeftTop();
+        }
+        const tdNode = composedPath.find((item) => item.tagName === "TD");
+        const tdIndex = Array.from(trNode.children).findIndex((item) => item === tdNode);
+        const tdNodes = Array.from(trNode.children);
+        const leftLineNumberContainer = tdNodes[0];
+        const rightLineNumberContainer = tdNodes[2];
+        if (tdIndex < 2) {
+          if (lastLineNumberContainer !== leftLineNumberContainer) {
+            lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+          }
+          if (notEmptyNode(leftLineNumberContainer)) {
+            lastLineNumberContainer = leftLineNumberContainer;
+            leftLineNumberContainer.classList.add("comment-icon-hover");
+            const { top, left } = leftLineNumberContainer.getBoundingClientRect();
+            commentLeft.value = left;
+            commentTop.value = top;
+            currentLeftLineNumber = parseInt(leftLineNumberContainer.innerText);
+          } else {
+            resetLeftTop();
+          }
+        } else {
+          if (lastLineNumberContainer !== rightLineNumberContainer) {
+            lastLineNumberContainer == null ? void 0 : lastLineNumberContainer.classList.remove("comment-icon-hover");
+          }
+          if (rightLineNumberContainer && notEmptyNode(rightLineNumberContainer)) {
+            lastLineNumberContainer = rightLineNumberContainer;
+            rightLineNumberContainer.classList.add("comment-icon-hover");
+            const { top, left } = rightLineNumberContainer.getBoundingClientRect();
+            commentLeft.value = left;
+            commentTop.value = top;
+            currentRightLineNumber = parseInt(rightLineNumberContainer.innerText);
+          } else {
+            resetLeftTop();
+          }
+        }
       }
     }
   };
@@ -6720,40 +7030,60 @@ function useCodeReviewComment(reviewContentRef, ctx) {
       resetLeftTop();
     }
   };
-  const onCommentIconClick = () => {
-    ctx.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
-  };
-  const findReferenceDom = (lineNumber, lineSide) => {
-    var _a, _b, _c, _d;
-    const trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr"));
-    for (const index2 in trNodes) {
-      const lineIndex = parseInt(index2);
-      const lineNumberBox = Array.from(trNodes[lineIndex].children)[0];
-      if (notEmptyNode(lineNumberBox)) {
-        const oldLineNumber = parseInt((_b = (_a = lineNumberBox.children[0]) == null ? void 0 : _a.innerText) != null ? _b : -1);
-        const newLineNumber = parseInt((_d = (_c = lineNumberBox.children[1]) == null ? void 0 : _c.innerText) != null ? _d : -1);
-        if (lineSide === "left" && oldLineNumber === lineNumber || lineSide === "right" && newLineNumber === lineNumber) {
-          return trNodes[lineIndex];
-        }
+  const onCommentIconClick = (e) => {
+    if (e) {
+      const composedPath = e.composedPath();
+      const lineNumberBox = composedPath.find((item) => {
+        var _a, _b;
+        return ((_a = item.classList) == null ? void 0 : _a.contains("comment-icon-hover")) || ((_b = item.classList) == null ? void 0 : _b.contains("comment-icon"));
+      });
+      if (!lineNumberBox) {
+        return;
       }
     }
+    if (outputFormat.value === "line-by-line")
+      ;
+    ctx.emit("addComment", { left: currentLeftLineNumber, right: currentRightLineNumber });
   };
   const insertComment = (lineNumber, lineSide, commentDom) => {
-    const lineHost = findReferenceDom(lineNumber, lineSide);
-    lineHost && addCommentToPage(lineHost, commentDom, lineSide);
+    if (outputFormat.value === "line-by-line") {
+      const lineHost = findReferenceDomForSingleColumn(reviewContentRef.value, lineNumber, lineSide);
+      lineHost && addCommentToPageForSingleColumn(lineHost, commentDom, lineSide);
+    } else {
+      const lineHost = findReferenceDomForDoubleColumn(reviewContentRef.value, lineNumber, lineSide);
+      lineHost && addCommentToPageForDoubleColumn(lineHost, commentDom, lineSide);
+    }
   };
   const removeComment = (lineNumber, lineSide) => {
-    const lineHost = findReferenceDom(lineNumber, lineSide);
-    let nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
-    while (nextLineHost) {
-      const classList = nextLineHost == null ? void 0 : nextLineHost.classList;
-      if ((classList == null ? void 0 : classList.contains("comment-block")) && classList.contains(lineSide)) {
-        nextLineHost.remove();
-        return;
+    if (outputFormat.value === "line-by-line") {
+      const lineHost = findReferenceDomForSingleColumn(reviewContentRef.value, lineNumber, lineSide);
+      let nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
+      while (nextLineHost) {
+        const classList = nextLineHost == null ? void 0 : nextLineHost.classList;
+        if ((classList == null ? void 0 : classList.contains("comment-block")) && classList.contains(lineSide)) {
+          nextLineHost.remove();
+          return;
+        }
+        nextLineHost = nextLineHost.nextElementSibling;
+      }
+    } else {
+      const lineHost = findReferenceDomForDoubleColumn(reviewContentRef.value, lineNumber, lineSide);
+      const nextLineHost = lineHost == null ? void 0 : lineHost.nextElementSibling;
+      if (nextLineHost && nextLineHost.classList.contains("comment-block")) {
+        const leftChildren = nextLineHost.children[0];
+        const rightChildren = nextLineHost.children[1];
+        if (lineSide === "left") {
+          leftChildren.children[0].remove();
+        } else {
+          rightChildren.children[0].remove();
+        }
+        if (!leftChildren.children.length && !rightChildren.children.length) {
+          nextLineHost.remove();
+        }
       }
-      nextLineHost = nextLineHost.nextElementSibling;
     }
   };
+  const mouseEvent = allowComment.value ? { onMousemove: onMouseMove, onMouseleave } : {};
   window.addEventListener("scroll", resetLeftTop);
   onUnmounted(() => {
     window.removeEventListener("scroll", resetLeftTop);
@@ -6761,9 +7091,7 @@ function useCodeReviewComment(reviewContentRef, ctx) {
   return {
     commentLeft,
     commentTop,
-    onMouseEnter,
-    onMouseMove,
-    onMouseleave,
+    mouseEvent,
     onCommentMouseLeave,
     onCommentIconClick,
     insertComment,
@@ -6790,14 +7118,12 @@ var CodeReview = defineComponent({
     const {
       commentLeft,
       commentTop,
-      onMouseEnter,
-      onMouseMove,
-      onMouseleave,
+      mouseEvent,
       onCommentMouseLeave,
       onCommentIconClick,
       insertComment,
       removeComment
-    } = useCodeReviewComment(reviewContentRef, ctx);
+    } = useCodeReviewComment(reviewContentRef, props, ctx);
     onMounted(() => {
       ctx.emit("afterViewInit", {
         toggleFold,
@@ -6811,29 +7137,30 @@ var CodeReview = defineComponent({
       isFold,
       rootCtx: ctx
     });
-    return () => createVNode("div", {
-      "class": ns2.b()
-    }, [createVNode(CodeReviewHeader, {
-      "onClick": () => isFold.value = !isFold.value
-    }, null), createVNode("div", {
-      "class": [ns2.e("content"), {
-        "hide-content": isFold.value
-      }],
-      "innerHTML": renderHtml.value,
-      "ref": reviewContentRef,
-      "onClick": onContentClick,
-      "onMouseenter": onMouseEnter,
-      "onMousemove": onMouseMove,
-      "onMouseleave": onMouseleave
-    }, null), createVNode("div", {
-      "class": "comment-icon",
-      "style": {
-        left: commentLeft.value + "px",
-        top: commentTop.value + "px"
-      },
-      "onClick": onCommentIconClick,
-      "onMouseleave": onCommentMouseLeave
-    }, [createVNode(CommentIcon, null, null)])]);
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [createVNode(CodeReviewHeader, {
+        "onClick": () => isFold.value = !isFold.value
+      }, null), withDirectives(createVNode("div", null, [props.showBlob ? (_b = (_a = ctx.slots).blob) == null ? void 0 : _b.call(_a) : createVNode("div", mergeProps({
+        "class": [ns2.e("content"), props.outputFormat],
+        "innerHTML": renderHtml.value,
+        "ref": reviewContentRef,
+        "onClick": (e) => {
+          onContentClick(e);
+          onCommentIconClick(e);
+        }
+      }, mouseEvent), null)]), [[vShow, !isFold.value]]), props.allowComment && createVNode("div", {
+        "class": "comment-icon",
+        "style": {
+          left: commentLeft.value + "px",
+          top: commentTop.value + "px"
+        },
+        "onClick": onCommentIconClick,
+        "onMouseleave": onCommentMouseLeave
+      }, [createVNode(CommentIcon, null, null)])]);
+    };
   }
 });
 var index = {