vue-devui 1.6.27 → 1.6.29

package/vue-devui.es.js

@@ -17526,34 +17526,145 @@ function findParentTrNode(node) {
 function getFullNumberList(min, max) {
   return Array.from({ length: max - min + 1 }, (_, i) => i + min);
 }
-function getLineNumbers(trNodes, outputFormat, side) {
+function clearCommentChecked(checkedTdNodes) {
+  for (let i = 0; i < checkedTdNodes.length; i++) {
+    checkedTdNodes[i].classList.remove("comment-checked");
+  }
+}
+function parseCodeToSingle(container, code, options) {
+  const diff2HtmlUi = new Diff2HtmlUI(container, code, {
+    drawFileList: false,
+    outputFormat: "line-by-line",
+    highlight: true,
+    rawTemplates: TemplateMap["line-by-line"],
+    ...options
+  });
+  diff2HtmlUi.draw();
+}
+function generateNumberTdObj(tdNodes) {
+  var _a;
+  const lineNumber = ((_a = tdNodes[0]) == null ? void 0 : _a.innerText) ? parseInt(tdNodes[0].innerText) : -1;
+  if (lineNumber !== -1) {
+    return { [lineNumber]: tdNodes };
+  }
+}
+function getLineNumberTdMap(trNodes) {
+  const left = {};
+  const right = {};
+  for (let i = 0; i < trNodes.length; i++) {
+    const tdNodes = Array.from(trNodes[i].children);
+    Object.assign(left, generateNumberTdObj(tdNodes.slice(0, 2)));
+    Object.assign(right, generateNumberTdObj(tdNodes.slice(2)));
+  }
+  return { left, right };
+}
+function getLineNumberMap(trNodes) {
   var _a, _b;
-  const leftNumbers = [];
-  const rightNumbers = [];
+  const result2 = [];
   for (let i = 0; i < trNodes.length; i++) {
-    const itemTrNode = trNodes[i];
-    if (outputFormat === "line-by-line") {
-      const lineNumberTdNode = Array.from(itemTrNode.children)[0];
-      const leftLineNumber = parseInt((_a = lineNumberTdNode.children[0]) == null ? void 0 : _a.innerText);
-      const rightLineNumber = parseInt((_b = lineNumberTdNode.children[1]) == null ? void 0 : _b.innerText);
-      leftLineNumber && leftNumbers.push(leftLineNumber);
-      rightLineNumber && rightNumbers.push(rightLineNumber);
+    const lineNumberNodes = trNodes[i].children[0].children;
+    if (lineNumberNodes.length === 2) {
+      const left = parseInt((_a = lineNumberNodes[0]) == null ? void 0 : _a.innerText) || -1;
+      const right = parseInt((_b = lineNumberNodes[1]) == null ? void 0 : _b.innerText) || -1;
+      result2.push({ left, right });
+    }
+  }
+  return result2;
+}
+function getDoubleCheckedNumberAndCodes(checkedTdNodes) {
+  const lefts = [];
+  const rights = [];
+  const leftCode = [];
+  const rightCode = [];
+  const leftNumberNodes = [];
+  const rightNumberNodes = [];
+  for (let i = 0; i < checkedTdNodes.length; i++) {
+    const itemTdNode = checkedTdNodes[i];
+    if (itemTdNode.classList.contains("d-code-left")) {
+      if (itemTdNode.classList.contains("d2h-code-side-linenumber")) {
+        leftNumberNodes.push(itemTdNode);
+      } else {
+        leftCode.push(itemTdNode.innerText);
+      }
     } else {
-      const tdNodes = Array.from(itemTrNode.children);
-      const lineNumberTdNode = tdNodes[side === "left" ? 0 : 2];
-      if (lineNumberTdNode && notEmptyNode(lineNumberTdNode)) {
-        const lineNumber = parseInt(lineNumberTdNode.innerText);
-        if (lineNumber) {
-          side === "left" ? leftNumbers.push(lineNumber) : rightNumbers.push(lineNumber);
-        }
+      if (itemTdNode.classList.contains("d2h-code-side-linenumber")) {
+        rightNumberNodes.push(itemTdNode);
+      } else {
+        rightCode.push(itemTdNode.innerText);
       }
     }
   }
-  const lefts = leftNumbers.length ? getFullNumberList(leftNumbers[0], leftNumbers[leftNumbers.length - 1]) : leftNumbers;
-  const rights = rightNumbers.length ? getFullNumberList(rightNumbers[0], rightNumbers[rightNumbers.length - 1]) : rightNumbers;
-  return { lefts, rights };
+  if (leftNumberNodes.length) {
+    const leftMinNum = parseInt(leftNumberNodes[0].innerText);
+    const leftMaxNum = parseInt(leftNumberNodes[leftNumberNodes.length - 1].innerText);
+    lefts.push(...getFullNumberList(leftMinNum, leftMaxNum));
+  }
+  if (rightNumberNodes.length) {
+    const rightMinNum = parseInt(rightNumberNodes[0].innerText);
+    const rightMaxNum = parseInt(rightNumberNodes[rightNumberNodes.length - 1].innerText);
+    rights.push(...getFullNumberList(rightMinNum, rightMaxNum));
+  }
+  return { lefts, rights, codes: { leftCode, rightCode } };
+}
+function getSingleCheckedNumberAndCode(checkedTdNodes) {
+  const lefts = [];
+  const rights = [];
+  const codes = [];
+  const leftNumbers = [];
+  const rightNumbers = [];
+  for (let i = 0; i < checkedTdNodes.length; i++) {
+    const itemTdNode = checkedTdNodes[i];
+    if (itemTdNode.classList.contains("d2h-code-linenumber")) {
+      const numberChildren = itemTdNode.children;
+      const leftNum = parseInt(numberChildren[0].innerText);
+      const rightNum = parseInt(numberChildren[1].innerText);
+      !isNaN(leftNum) && leftNumbers.push(leftNum);
+      !isNaN(rightNum) && rightNumbers.push(rightNum);
+    } else {
+      codes.push(itemTdNode.innerText);
+    }
+  }
+  lefts.push(...getFullNumberList(leftNumbers[0], leftNumbers[leftNumbers.length - 1]));
+  rights.push(...getFullNumberList(rightNumbers[0], rightNumbers[rightNumbers.length - 1]));
+  return { lefts, rights, codes };
+}
+function addCommentCheckedForDouble(trNode, leftMinNum, leftMaxNum, rightMinNum, rightMaxNum) {
+  const [leftNumTd, leftCodeTd, rightNumTd, rightCodeTd] = trNode.children;
+  const leftNum = parseInt(leftNumTd.innerText);
+  const rightNum = parseInt(rightNumTd.innerText);
+  const result2 = [];
+  if (!isNaN(leftNum) && leftNum >= leftMinNum && leftNum <= leftMaxNum) {
+    if (!leftNumTd.classList.contains("comment-checked")) {
+      leftNumTd.classList.add("comment-checked");
+      leftCodeTd.classList.add("comment-checked");
+    }
+    result2.push(leftNumTd, leftCodeTd);
+  }
+  if (!isNaN(rightNum) && rightNum >= rightMinNum && rightNum <= rightMaxNum) {
+    if (!rightNumTd.classList.contains("comment-checked")) {
+      rightNumTd.classList.add("comment-checked");
+      rightCodeTd.classList.add("comment-checked");
+    }
+    result2.push(rightNumTd, rightCodeTd);
+  }
+  return result2;
+}
+function addCommentCheckedForSingle(trNode, leftMinNum, leftMaxNum, rightMinNum, rightMaxNum) {
+  const [numTd, codeTd] = trNode.children;
+  const [leftNumNode, rightNumNode] = numTd.children;
+  const leftNum = parseInt(leftNumNode.innerText);
+  const rightNum = parseInt(rightNumNode.innerText);
+  const result2 = [];
+  if (!isNaN(leftNum) && leftNum >= leftMinNum && leftNum <= leftMaxNum || !isNaN(rightNum) && rightNum >= rightMinNum && rightNum <= rightMaxNum) {
+    if (!numTd.classList.contains("comment-checked")) {
+      numTd.classList.add("comment-checked");
+      codeTd.classList.add("comment-checked");
+    }
+    result2.push(numTd, codeTd);
+  }
+  return result2;
 }
-function useCodeReviewExpand(reviewContentRef, props) {
+function useCodeReviewExpand(reviewContentRef, props, updateLineNumberMap, updateCheckedLine) {
   const { outputFormat, expandThreshold, expandLoader } = toRefs(props);
   const processSideBySide = () => {
     var _a;
@@ -17613,7 +17724,9 @@ function useCodeReviewExpand(reviewContentRef, props) {
       return;
     }
     const trNodesToBeInserted = trNodes.filter((element) => element !== expandLine);
+    updateLineNumberMap(referenceDom.dataset, prefix + code, direction);
     insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    updateCheckedLine(referenceDom.dataset, direction);
     const removedExpandLine = ifRemoveExpandLineForDoubleColumn(referenceDom, expandLine, direction);
     if (removedExpandLine) {
       return;
@@ -17697,6 +17810,7 @@ function useCodeReviewExpand(reviewContentRef, props) {
     }
     const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
     insertIncrementLineToPage(referenceDom, trNodesToBeInserted, direction);
+    updateCheckedLine(referenceDom.dataset, direction);
     const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
     if (removedExpandLine) {
       return;
@@ -17738,12 +17852,11 @@ function useCodeReviewExpand(reviewContentRef, props) {
   };
   return { insertExpandButton, onExpandButtonClick };
 }
-function useCodeReview(props, ctx2) {
+function useCodeReview(props, ctx2, reviewContentRef, updateLineNumberMap, updateCheckedLine) {
   const { diff, outputFormat, allowExpand, showBlob } = toRefs(props);
   const renderHtml = ref("");
-  const reviewContentRef = ref();
   const diffFile = ref([]);
-  const { insertExpandButton, onExpandButtonClick } = useCodeReviewExpand(reviewContentRef, props);
+  const { insertExpandButton, onExpandButtonClick } = useCodeReviewExpand(reviewContentRef, props, updateLineNumberMap, updateCheckedLine);
   const initDiffContent = () => {
     diffFile.value = Diff2Html.parse(diff.value);
     nextTick(() => {
@@ -17760,7 +17873,7 @@ function useCodeReview(props, ctx2) {
   watch(showBlob, initDiffContent);
   watch(outputFormat, initDiffContent);
   watch(diff, initDiffContent, { immediate: true });
-  return { renderHtml, reviewContentRef, diffFile, onContentClick };
+  return { renderHtml, diffFile, onContentClick };
 }
 function useCodeReviewFold(props, ctx2) {
   const { fold } = toRefs(props);
@@ -17785,38 +17898,52 @@ function useCodeReviewLineSelection(reviewContentRef, props, afterMouseup) {
   let dragging = false;
   let startTrNode;
   let trNodes;
-  let isClickedLeft;
+  let allTdNodes = [];
   let shouldClear;
   let isMouseMoved;
-  let checkedTrNodes = [];
+  let leftRightLineNumberArr = [];
+  let leftNumberTdMap = {};
+  let rightNumberTdMap = {};
+  let checkedTdNodes = [];
+  let startPosition;
+  let leftMinNum;
+  let leftMaxNum;
+  let rightMinNum;
+  let rightMaxNum;
   const onMousedown2 = (e) => {
+    var _a;
     if (e.button === 0) {
       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"));
+          var _a2, _b;
+          return ((_a2 = item.classList) == null ? void 0 : _a2.contains("comment-icon-hover")) || ((_b = item.classList) == null ? void 0 : _b.contains("comment-icon"));
         }
       );
       trNodes = Array.from(reviewContentRef.value.querySelectorAll("tr")).filter((item) => {
-        var _a;
-        return !((_a = item.classList) == null ? void 0 : _a.contains("expand-line"));
+        var _a2;
+        return !((_a2 = item.classList) == null ? void 0 : _a2.contains("expand-line"));
       });
       if (!lineNumberBox) {
         return;
       }
       const parentTrNode = findParentTrNode(e.target);
-      if (parentTrNode && (parentTrNode == null ? void 0 : parentTrNode.classList.contains("expand-line"))) {
+      if (parentTrNode && ((_a = parentTrNode == null ? void 0 : parentTrNode.classList) == null ? void 0 : _a.contains("expand-line"))) {
         return;
       }
       startTrNode = parentTrNode;
+      allTdNodes = [];
+      for (let i = 0; i < trNodes.length; i++) {
+        allTdNodes.push(...trNodes[i].children);
+      }
       if (props.outputFormat === "side-by-side") {
-        isClickedLeft = composedPath.some((item) => {
-          var _a;
-          return (_a = item.classList) == null ? void 0 : _a.contains("d-code-left");
-        });
-      } else {
-        isClickedLeft = void 0;
+        const { left, right } = getLineNumberTdMap(trNodes);
+        leftNumberTdMap = left;
+        rightNumberTdMap = right;
+        startPosition = composedPath.some((item) => {
+          var _a2;
+          return (_a2 = item.classList) == null ? void 0 : _a2.contains("d-code-left");
+        }) ? "left" : "right";
       }
       dragging = true;
       shouldClear = true;
@@ -17828,115 +17955,181 @@ function useCodeReviewLineSelection(reviewContentRef, props, afterMouseup) {
     }
   };
   function onMousemove(e) {
+    var _a, _b;
     if (!dragging) {
       return;
     }
-    isMouseMoved = true;
     if (shouldClear) {
-      clearCommentChecked();
+      clearCommentChecked(checkedTdNodes);
       shouldClear = false;
     }
     const composedPath = e.composedPath();
     const inReviewContent = composedPath.some((item) => {
-      var _a;
-      return (_a = item.classList) == null ? void 0 : _a.contains(ns2.e("content"));
+      var _a2;
+      return (_a2 = item.classList) == null ? void 0 : _a2.contains(ns2.e("content"));
     });
     if (!inReviewContent) {
       return;
     }
     const endTrNode = findParentTrNode(e.target);
+    let endPosition;
+    if (props.outputFormat === "side-by-side") {
+      if (composedPath.some((item) => {
+        var _a2;
+        return (_a2 = item.classList) == null ? void 0 : _a2.contains("d-code-left");
+      })) {
+        endPosition = "left";
+      }
+      if (composedPath.some((item) => {
+        var _a2;
+        return (_a2 = item.classList) == null ? void 0 : _a2.contains("d-code-right");
+      })) {
+        endPosition = "right";
+      }
+    }
     if (!endTrNode) {
       return;
     }
-    let startIndex = trNodes.indexOf(startTrNode);
-    let endIndex = trNodes.indexOf(endTrNode);
-    if (endIndex === -1) {
+    isMouseMoved = true;
+    const endTrChildren = endTrNode.children;
+    if (endPosition === "left" && isNaN(parseInt((_a = endTrChildren[0]) == null ? void 0 : _a.innerText)) || endPosition === "right" && isNaN(parseInt((_b = endTrChildren[2]) == null ? void 0 : _b.innerText))) {
       return;
     }
-    if (startIndex > endIndex) {
-      [startIndex, endIndex] = [endIndex, startIndex];
+    checkedTdNodes = [];
+    if (props.outputFormat === "line-by-line") {
+      let startIndex = trNodes.indexOf(startTrNode);
+      let endIndex = trNodes.indexOf(endTrNode);
+      if (endIndex === -1) {
+        return;
+      }
+      if (startIndex > endIndex) {
+        [startIndex, endIndex] = [endIndex, startIndex];
+      }
+      for (let i = 0; i < trNodes.length; i++) {
+        const tdNodes = Array.from(trNodes[i].children);
+        if (i >= startIndex && i <= endIndex) {
+          checkedTdNodes.push(...tdNodes);
+        }
+      }
     }
-    let position;
-    if (isClickedLeft === void 0) {
-      position = "all";
-    } else if (isClickedLeft) {
-      position = "left";
-    } else {
-      position = "right";
+    if (props.outputFormat === "side-by-side") {
+      const startNum = parseInt(startTrNode.children[startPosition === "left" ? 0 : 2].innerText);
+      let sIndex = leftRightLineNumberArr.findIndex((item) => item[startPosition] === startNum);
+      const endNum = parseInt(endTrNode.children[endPosition === "left" ? 0 : 2].innerText);
+      let eIndex = leftRightLineNumberArr.findIndex((item) => item[endPosition] === endNum);
+      if (sIndex > eIndex) {
+        [sIndex, eIndex] = [eIndex, sIndex];
+      }
+      const tempArr = leftRightLineNumberArr.slice(sIndex, eIndex + 1);
+      for (let i = 0; i < tempArr.length; i++) {
+        const { left, right } = tempArr[i];
+        if (left !== -1) {
+          checkedTdNodes.push(...leftNumberTdMap[left]);
+        }
+        if (right !== -1) {
+          checkedTdNodes.push(...rightNumberTdMap[right]);
+        }
+      }
     }
-    checkedTrNodes = [];
-    for (let i = 0; i < trNodes.length; i++) {
-      if (i >= startIndex && i <= endIndex) {
-        toggleCommentCheckedClass(trNodes[i], true, position);
-        checkedTrNodes.push(trNodes[i]);
+    for (let i = 0; i < allTdNodes.length; i++) {
+      if (checkedTdNodes.includes(allTdNodes[i])) {
+        allTdNodes[i].classList.add("comment-checked");
       } else {
-        toggleCommentCheckedClass(trNodes[i], false, position);
+        allTdNodes[i].classList.remove("comment-checked");
       }
     }
   }
   function onMouseup() {
     dragging = false;
     if (isMouseMoved) {
-      afterMouseup(getLineNumbers(checkedTrNodes, props.outputFormat, isClickedLeft ? "left" : "right"));
+      let details;
+      if (props.outputFormat === "side-by-side") {
+        details = getDoubleCheckedNumberAndCodes(checkedTdNodes);
+      } else {
+        details = getSingleCheckedNumberAndCode(checkedTdNodes);
+      }
+      leftMinNum = details.lefts[0];
+      leftMaxNum = details.lefts[details.lefts.length - 1];
+      rightMinNum = details.rights[0];
+      rightMaxNum = details.rights[details.rights.length - 1];
+      afterMouseup(details);
     }
     document.removeEventListener("mouseup", onMouseup);
     document.removeEventListener("mousemove", onMousemove);
   }
-  function clearCommentChecked() {
-    for (let i = 0; i < trNodes.length; i++) {
-      toggleCommentCheckedClass(trNodes[i], false, "all");
+  const getCheckedLineDetails = () => {
+    if (checkedTdNodes.length) {
+      return props.outputFormat === "side-by-side" ? getDoubleCheckedNumberAndCodes(checkedTdNodes) : getSingleCheckedNumberAndCode(checkedTdNodes);
     }
-  }
-  function toggleCommentCheckedClass(trNode, isAddClass, position) {
-    var _a;
-    const tdNodes = Array.from(trNode.children);
-    let toDoNodes;
-    if (position === "all") {
-      toDoNodes = tdNodes;
-    } else if (position === "left") {
-      toDoNodes = tdNodes.slice(0, 2);
+  };
+  const clearCommentClass = () => {
+    clearCommentChecked(checkedTdNodes);
+    checkedTdNodes = [];
+  };
+  const updateLineNumberMap = (expandLineNumberInfo, newCode, direction) => {
+    const container = document.createElement("div");
+    parseCodeToSingle(container, newCode, props.options);
+    const { prevL, prevR, nextL, nextR } = expandLineNumberInfo;
+    const arr = getLineNumberMap(Array.from(container.querySelectorAll("tr")));
+    if (direction === "down") {
+      const preLeft = Number(prevL) - 1;
+      const preRight = Number(prevR) - 1;
+      const index2 = leftRightLineNumberArr.findIndex((item) => item.left === preLeft && item.right === preRight);
+      leftRightLineNumberArr.splice(index2 + 1, 0, ...arr);
     } else {
-      toDoNodes = tdNodes.slice(2);
+      const nextLeft = Number(nextL) + 1;
+      const nextRight = Number(nextR) + 1;
+      const index2 = leftRightLineNumberArr.findIndex((item) => item.left === nextLeft && item.right === nextRight);
+      leftRightLineNumberArr.splice(index2, 0, ...arr);
     }
-    if ((position === "left" || position === "right") && isNaN(parseInt((_a = toDoNodes[0]) == null ? void 0 : _a.innerHTML))) {
+  };
+  const updateCheckedLine = (expandLineNumberInfo, direction) => {
+    const allTrNodes = Array.from(reviewContentRef.value.querySelectorAll("tr")).filter((item) => {
+      var _a;
+      return !((_a = item.classList) == null ? void 0 : _a.contains("expand-line"));
+    });
+    const { prevL, nextL } = expandLineNumberInfo;
+    const num = direction === "down" ? Number(prevL) : Number(nextL);
+    if (!checkedTdNodes.length || num < leftMinNum || num > leftMaxNum) {
       return;
     }
-    toDoNodes.forEach((item) => {
-      if (item.tagName === "TD") {
-        if (isAddClass) {
-          item.classList.add("comment-checked");
-        } else {
-          item.classList.remove("comment-checked");
-        }
+    checkedTdNodes = [];
+    for (let i = 0; i < allTrNodes.length; i++) {
+      const itemTrNode = allTrNodes[i];
+      if (props.outputFormat === "side-by-side") {
+        checkedTdNodes.push(...addCommentCheckedForDouble(itemTrNode, leftMinNum, leftMaxNum, rightMinNum, rightMaxNum));
+      } else {
+        checkedTdNodes.push(...addCommentCheckedForSingle(itemTrNode, leftMinNum, leftMaxNum, rightMinNum, rightMaxNum));
       }
-    });
-  }
-  return { onMousedown: onMousedown2 };
+    }
+  };
+  watch(
+    [() => props.outputFormat, () => props.allowChecked],
+    () => {
+      if (props.allowChecked && props.outputFormat === "side-by-side") {
+        const container = document.createElement("div");
+        parseCodeToSingle(container, props.diff, props.options);
+        leftRightLineNumberArr = getLineNumberMap(Array.from(container.querySelectorAll("tr")));
+      }
+    },
+    { immediate: true }
+  );
+  return { onMousedown: onMousedown2, updateLineNumberMap, getCheckedLineDetails, clearCommentClass, updateCheckedLine };
 }
 function useCodeReviewComment(reviewContentRef, props, ctx2) {
   const { outputFormat, allowComment, allowChecked } = toRefs(props);
   const ns2 = useNamespace$1("code-review");
-  const { onMousedown: onMousedown2 } = useCodeReviewLineSelection(reviewContentRef, props, afterMouseup);
+  const { onMousedown: onMousedown2, updateLineNumberMap, getCheckedLineDetails, clearCommentClass, updateCheckedLine } = useCodeReviewLineSelection(
+    reviewContentRef,
+    props,
+    afterMouseup
+  );
   const commentLeft = ref(-100);
   const commentTop = ref(-100);
   let currentLeftLineNumber = -1;
   let currentRightLineNumber = -1;
+  let currentPosition;
   let lastLineNumberContainer;
-  let checkedLineNumberContainer = [];
-  let currentLeftLineNumbers = [];
-  let currentRightLineNumbers = [];
-  let checkedLineCodeString = {};
-  let allTrNodes = [];
-  let afterCheckLinesEmitData;
-  watch(
-    () => outputFormat.value,
-    () => {
-      checkedLineNumberContainer = [];
-      currentLeftLineNumbers = [];
-      currentRightLineNumbers = [];
-      checkedLineCodeString = [];
-    }
-  );
   const resetLeftTop = () => {
     commentLeft.value = -100;
     commentTop.value = -100;
@@ -17986,6 +18179,8 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
             commentLeft.value = left;
             commentTop.value = top;
             currentLeftLineNumber = parseInt(leftLineNumberContainer.innerText);
+            currentRightLineNumber = parseInt(rightLineNumberContainer.innerText || "-1");
+            currentPosition = "left";
           } else {
             resetLeftTop();
           }
@@ -17999,7 +18194,9 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
             const { top, left } = rightLineNumberContainer.getBoundingClientRect();
             commentLeft.value = left;
             commentTop.value = top;
+            currentLeftLineNumber = parseInt(leftLineNumberContainer.innerText || "-1");
             currentRightLineNumber = parseInt(rightLineNumberContainer.innerText);
+            currentPosition = "right";
           } else {
             resetLeftTop();
           }
@@ -18019,128 +18216,23 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
       resetLeftTop();
     }
   };
-  const getCommonClassAndJudge = () => {
-    const checkedLine = [currentLeftLineNumbers, currentRightLineNumbers];
-    return {
-      linenumberDom: allTrNodes,
-      checkedLine
-    };
-  };
-  const addCommentCheckedClass = (Dom) => {
-    !Dom.classList.contains("comment-checked") && Dom.classList.add("comment-checked");
-  };
-  function getSingleCheckedLineCode(shouldRenderClass) {
-    const { linenumberDom, checkedLine } = getCommonClassAndJudge();
-    const checkedCodeContent = [];
-    for (let i = 0; i < linenumberDom.length; i++) {
-      const lineNumberDomLeft = linenumberDom[i].children[0];
-      const lineNumberDomRight = linenumberDom[i].children[1];
-      if (lineNumberDomLeft || lineNumberDomRight) {
-        const codeLineNumberLeft = parseInt(lineNumberDomLeft == null ? void 0 : lineNumberDomLeft.innerText);
-        const codeLineNumberRight = parseInt(lineNumberDomRight == null ? void 0 : lineNumberDomRight.innerText);
-        if (checkedLine[0].includes(codeLineNumberLeft) || checkedLine[1].includes(codeLineNumberRight)) {
-          checkedLineNumberContainer.push(linenumberDom[i]);
-          const codeNode = linenumberDom[i].nextElementSibling;
-          checkedCodeContent.push(codeNode == null ? void 0 : codeNode.innerText);
-          if (shouldRenderClass) {
-            addCommentCheckedClass(linenumberDom[i]);
-            addCommentCheckedClass(codeNode);
-          }
-        }
-      }
-    }
-    checkedLineCodeString = checkedCodeContent;
-  }
-  function getDoubleCheckedLineCode(shouldRenderClass) {
-    var _a;
-    const { linenumberDom, checkedLine } = getCommonClassAndJudge();
-    const checkedCodeContentLeft = [];
-    const checkedCodeContentRight = [];
-    function checkedFunc(Dom) {
-      checkedLineNumberContainer.push(Dom);
-      const codeNode = Dom.nextElementSibling;
-      if (shouldRenderClass) {
-        addCommentCheckedClass(Dom);
-        addCommentCheckedClass(codeNode);
-      }
-      return codeNode == null ? void 0 : codeNode.innerText;
-    }
-    for (let i = 0; i < linenumberDom.length; i++) {
-      const codeLineNumber = parseInt((_a = linenumberDom[i]) == null ? void 0 : _a.innerHTML);
-      if (linenumberDom[i].classList.contains("d-code-left") && checkedLine[0].includes(codeLineNumber)) {
-        const lineNumText = checkedFunc(linenumberDom[i]);
-        checkedCodeContentLeft.push(lineNumText);
-        continue;
-      }
-      if (linenumberDom[i].classList.contains("d-code-right") && checkedLine[1].includes(codeLineNumber)) {
-        const lineNumText = checkedFunc(linenumberDom[i]);
-        checkedCodeContentRight.push(lineNumText);
-      }
-    }
-    checkedLineCodeString = { leftCode: checkedCodeContentLeft, rightCode: checkedCodeContentRight };
-  }
-  function getCheckedLineCode(shouldRenderClass) {
-    if (props.outputFormat === "line-by-line") {
-      return getSingleCheckedLineCode(shouldRenderClass);
-    }
-    getDoubleCheckedLineCode(shouldRenderClass);
-  }
-  function updateLineNumbers({ lefts, rights }) {
-    currentLeftLineNumbers = lefts;
-    currentRightLineNumbers = rights;
-    getCheckedLineCode(false);
-    afterCheckLinesEmitData = {
-      left: currentLeftLineNumber,
-      right: currentRightLineNumber,
-      details: {
-        lefts: currentLeftLineNumbers,
-        rights: currentRightLineNumbers,
-        codes: checkedLineCodeString
-      }
-    };
-  }
-  const updateCheckedLineClass = () => {
-    const lineClassName = props.outputFormat === "line-by-line" ? ".d2h-code-linenumber" : ".d2h-code-side-linenumber";
-    allTrNodes = reviewContentRef.value.querySelectorAll(lineClassName);
-    getCheckedLineCode(true);
-  };
-  const resetCommentClass = () => {
-    for (let i = 0; i < checkedLineNumberContainer.length; i++) {
-      checkedLineNumberContainer[i].classList.remove("comment-checked");
-      const codeNode = checkedLineNumberContainer[i].nextElementSibling;
-      codeNode == null ? void 0 : codeNode.classList.remove("comment-checked");
-    }
-    checkedLineNumberContainer = [];
-  };
   const commentClick = () => {
-    let obj = { left: currentLeftLineNumber, right: currentRightLineNumber };
-    if ((currentLeftLineNumbers.length >= 1 || currentRightLineNumbers.length >= 1) && allowChecked.value) {
-      const maxCurrentLeftLineNumber = currentLeftLineNumbers[currentLeftLineNumbers.length - 1];
-      const maxCurrentRightLineNumber = currentRightLineNumbers[currentRightLineNumbers.length - 1];
-      if (maxCurrentLeftLineNumber === currentLeftLineNumber || maxCurrentRightLineNumber === currentRightLineNumber) {
-        obj = {
-          left: currentLeftLineNumber,
-          right: currentRightLineNumber,
-          details: {
-            lefts: currentLeftLineNumbers,
-            rights: currentRightLineNumbers,
-            codes: checkedLineCodeString
-          }
-        };
+    let obj = { left: currentLeftLineNumber, right: currentRightLineNumber, position: currentPosition };
+    const checkedLineDetails = getCheckedLineDetails();
+    if (checkedLineDetails && allowChecked.value) {
+      const { lefts, rights } = checkedLineDetails;
+      const maxCheckedLeftLineNumber = lefts[lefts.length - 1];
+      const maxCheckedRightLineNumber = rights[rights.length - 1];
+      if (maxCheckedLeftLineNumber === currentLeftLineNumber || maxCheckedRightLineNumber === currentRightLineNumber) {
+        obj.details = checkedLineDetails;
       } else {
-        currentLeftLineNumbers = [];
-        currentRightLineNumbers = [];
-        resetCommentClass();
+        clearCommentClass();
       }
     }
     ctx2.emit("addComment", obj);
   };
-  function afterCheckLines() {
-    ctx2.emit("afterCheckLines", afterCheckLinesEmitData);
-  }
-  function afterMouseup(lineNumbers) {
-    updateLineNumbers(lineNumbers);
-    afterCheckLines();
+  function afterMouseup(details) {
+    ctx2.emit("afterCheckLines", { left: currentLeftLineNumber, right: currentRightLineNumber, position: currentPosition, details });
   }
   const onCommentIconClick = (e) => {
     if (e) {
@@ -18196,15 +18288,7 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     }
   };
   const clearCheckedLines = () => {
-    currentLeftLineNumbers = [];
-    currentRightLineNumbers = [];
-    checkedLineCodeString = [];
-    resetCommentClass();
-  };
-  const handleMouseDown = (e) => {
-    const lineClassName = props.outputFormat === "line-by-line" ? ".d2h-code-linenumber" : ".d2h-code-side-linenumber";
-    allTrNodes = reviewContentRef.value.querySelectorAll(lineClassName);
-    onMousedown2(e);
+    clearCommentClass();
   };
   const mouseEvent = {};
   if (allowComment.value) {
@@ -18212,7 +18296,7 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     mouseEvent.onMouseleave = onMouseleave;
   }
   if (props.allowChecked) {
-    mouseEvent.onMousedown = handleMouseDown;
+    mouseEvent.onMousedown = onMousedown2;
   }
   window.addEventListener("scroll", resetLeftTop);
   onUnmounted(() => {
@@ -18222,12 +18306,13 @@ function useCodeReviewComment(reviewContentRef, props, ctx2) {
     commentLeft,
     commentTop,
     mouseEvent,
-    updateCheckedLineClass,
     clearCheckedLines,
     onCommentMouseLeave,
     onCommentIconClick,
     insertComment,
-    removeComment
+    removeComment,
+    updateLineNumberMap,
+    updateCheckedLine
   };
 }
 var codeReview = "";
@@ -18240,16 +18325,7 @@ var CodeReview = defineComponent({
     const {
       diffType
     } = toRefs(props);
-    const {
-      renderHtml,
-      reviewContentRef,
-      diffFile,
-      onContentClick
-    } = useCodeReview(props, ctx2);
-    const {
-      isFold,
-      toggleFold
-    } = useCodeReviewFold(props, ctx2);
+    const reviewContentRef = ref();
     const {
       commentLeft,
       commentTop,
@@ -18258,15 +18334,24 @@ var CodeReview = defineComponent({
       onCommentIconClick,
       insertComment,
       removeComment,
-      updateCheckedLineClass,
-      clearCheckedLines
+      clearCheckedLines,
+      updateLineNumberMap,
+      updateCheckedLine
     } = useCodeReviewComment(reviewContentRef, props, ctx2);
+    const {
+      renderHtml,
+      diffFile,
+      onContentClick
+    } = useCodeReview(props, ctx2, reviewContentRef, updateLineNumberMap, updateCheckedLine);
+    const {
+      isFold,
+      toggleFold
+    } = useCodeReviewFold(props, ctx2);
     onMounted(() => {
       ctx2.emit("afterViewInit", {
         toggleFold,
         insertComment,
         removeComment,
-        updateCheckedLineClass,
         clearCheckedLines
       });
     });
@@ -35432,13 +35517,26 @@ ToolBarHandler.fullscreen = (editor) => {
 };
 ToolBarHandler.color = () => {
 };
+const GET_CTRL_KEY = () => {
+  var _a;
+  if (typeof window !== "undefined") {
+    return ((_a = navigator == null ? void 0 : navigator.platform) == null ? void 0 : _a.indexOf("Mac")) !== -1 ? "\u2318" : "Ctrl";
+  }
+};
+const GET_ALT_KEY = () => {
+  var _a;
+  if (typeof window !== "undefined") {
+    return ((_a = navigator == null ? void 0 : navigator.platform) == null ? void 0 : _a.indexOf("Mac")) !== -1 ? "\u2325" : "Alt";
+  }
+};
 const DEFAULT_TOOLBARS = {
   undo: {
     id: "undo",
     name: "undo",
     type: "button",
     icon: UNDO_ICON,
-    shortKey: "Ctrl+Z",
+    shortKey: `${GET_CTRL_KEY()}+Z`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+90`,
     handler: ToolBarHandler.undo
   },
   redo: {
@@ -35446,7 +35544,8 @@ const DEFAULT_TOOLBARS = {
     name: "redo",
     type: "button",
     icon: REDO_ICON,
-    shortKey: "Ctrl+Y",
+    shortKey: `${GET_CTRL_KEY()}+Y`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+89`,
     handler: ToolBarHandler.redo
   },
   bold: {
@@ -35454,7 +35553,8 @@ const DEFAULT_TOOLBARS = {
     name: "bold",
     type: "button",
     icon: BOLD_ICON,
-    shortKey: "Ctrl+B",
+    shortKey: `${GET_CTRL_KEY()}+B`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+66`,
     handler: ToolBarHandler.bold
   },
   italic: {
@@ -35462,7 +35562,8 @@ const DEFAULT_TOOLBARS = {
     name: "italic",
     type: "button",
     icon: ITALIC_ICON,
-    shortKey: "Ctrl+I",
+    shortKey: `${GET_CTRL_KEY()}+I`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+73`,
     handler: ToolBarHandler.italic
   },
   strike: {
@@ -35470,7 +35571,8 @@ const DEFAULT_TOOLBARS = {
     name: "strike",
     type: "button",
     icon: STRIKE_ICON,
-    shortKey: "Ctrl+D",
+    shortKey: `${GET_CTRL_KEY()}+D`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+68`,
     handler: ToolBarHandler.strike
   },
   h1: {
@@ -35478,7 +35580,8 @@ const DEFAULT_TOOLBARS = {
     name: "h1",
     type: "button",
     icon: H1_ICON,
-    shortKey: "Ctrl+1",
+    shortKey: `${GET_CTRL_KEY()}+1`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+49`,
     handler: ToolBarHandler.h1
   },
   h2: {
@@ -35486,7 +35589,8 @@ const DEFAULT_TOOLBARS = {
     name: "h2",
     type: "button",
     icon: H2_ICON,
-    shortKey: "Ctrl+2",
+    shortKey: `${GET_CTRL_KEY()}+2`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+50`,
     handler: ToolBarHandler.h2
   },
   ul: {
@@ -35494,7 +35598,8 @@ const DEFAULT_TOOLBARS = {
     name: "unorderedlist",
     type: "button",
     icon: LIST_UNORDERED_ICON,
-    shortKey: "Ctrl+U",
+    shortKey: `${GET_CTRL_KEY()}+U`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+85`,
     handler: ToolBarHandler.ul
   },
   ol: {
@@ -35502,7 +35607,8 @@ const DEFAULT_TOOLBARS = {
     name: "orderedlist",
     type: "button",
     icon: LIST_ORDERED_ICON,
-    shortKey: "Ctrl+O",
+    shortKey: `${GET_CTRL_KEY()}+O`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+79`,
     handler: ToolBarHandler.ol
   },
   checklist: {
@@ -35510,7 +35616,8 @@ const DEFAULT_TOOLBARS = {
     name: "checklist",
     type: "button",
     icon: LIST_CHECK_ICON,
-    shortKey: "Ctrl+Alt+C",
+    shortKey: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+C`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+67`,
     handler: ToolBarHandler.checkList
   },
   underline: {
@@ -35518,7 +35625,8 @@ const DEFAULT_TOOLBARS = {
     name: "underline",
     type: "button",
     icon: UNDERLINE_ICON,
-    shortKey: "Ctrl+R",
+    shortKey: `${GET_CTRL_KEY()}+R`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+82`,
     handler: ToolBarHandler.underline
   },
   font: {
@@ -35534,7 +35642,8 @@ const DEFAULT_TOOLBARS = {
     name: "link",
     type: "button",
     icon: LINK_ICON,
-    shortKey: "Ctrl+L",
+    shortKey: `${GET_CTRL_KEY()}+L`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+76`,
     handler: ToolBarHandler.link
   },
   image: {
@@ -35542,7 +35651,8 @@ const DEFAULT_TOOLBARS = {
     name: "image",
     type: "button",
     icon: IMAGE_ICON,
-    shortKey: "Ctrl+G",
+    shortKey: `${GET_CTRL_KEY()}+G`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+71`,
     params: { imageUploadToServer: false },
     handler: ToolBarHandler.image
   },
@@ -35552,7 +35662,8 @@ const DEFAULT_TOOLBARS = {
     type: "button",
     icon: FILE_ICON,
     params: {},
-    shortKey: "Ctrl+F",
+    shortKey: `${GET_CTRL_KEY()}+F`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+70`,
     handler: ToolBarHandler.file
   },
   code: {
@@ -35560,7 +35671,8 @@ const DEFAULT_TOOLBARS = {
     name: "code",
     type: "button",
     icon: CODE_ICON,
-    shortKey: "Ctrl+K",
+    shortKey: `${GET_CTRL_KEY()}+K`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+75`,
     handler: ToolBarHandler.code
   },
   table: {
@@ -35568,7 +35680,8 @@ const DEFAULT_TOOLBARS = {
     name: "table",
     type: "button",
     icon: TABLE_ICON,
-    shortKey: "Ctrl+Alt+T",
+    shortKey: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+T`,
+    shortKeyWithCode: `${GET_CTRL_KEY()}+${GET_ALT_KEY()}+84`,
     handler: ToolBarHandler.table
   },
   fullscreen: {
@@ -35962,8 +36075,8 @@ function useEditorMd(props, ctx2) {
     const tempToolbars = { ...toolbars, ...customToolbars == null ? void 0 : customToolbars.value };
     for (const key of Object.keys(tempToolbars)) {
       const toolbarItem = tempToolbars[key];
-      if (toolbarItem.shortKey && flatToolbarConfig.includes(toolbarItem.id)) {
-        shortKeys[toolbarItem.shortKey.replace(/\+/g, "-")] = (_a = toolbarItem.handler) == null ? void 0 : _a.bind(null, editorIns, toolbarItem.params);
+      if (toolbarItem.shortKeyWithCode && flatToolbarConfig.includes(toolbarItem.id)) {
+        shortKeys[toolbarItem.shortKeyWithCode.replace(/\+/g, "-")] = (_a = toolbarItem.handler) == null ? void 0 : _a.bind(null, editorIns, toolbarItem.params);
       }
     }
     editorIns.setOption(
@@ -35985,6 +36098,26 @@ function useEditorMd(props, ctx2) {
     setTimeout(() => {
       ctx2.emit("contentChange", editorIns.getValue());
     }, 100);
+    containerRef.value.addEventListener("keydown", (e) => {
+      let keyCombination = "";
+      if (e.ctrlKey) {
+        keyCombination += "Ctrl-";
+      }
+      if (e.metaKey) {
+        keyCombination += "\u2318-";
+      }
+      if (e.altKey) {
+        keyCombination += `${GET_ALT_KEY()}-`;
+      }
+      if (e.shiftKey) {
+        keyCombination += "Shift-";
+      }
+      keyCombination += e.keyCode;
+      if (shortKeys[keyCombination] && typeof shortKeys[keyCombination] === "function") {
+        e.preventDefault();
+        shortKeys[keyCombination]();
+      }
+    });
   };
   const onPaste = (e) => {
     const clipboardData = e.clipboardData;
@@ -37821,10 +37954,10 @@ class GitGraph$1 {
     this.graphHeight = this.element.getBoundingClientRect().height;
     this.graphWidth = this.element.getBoundingClientRect().width;
     const ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
-    Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
+    const cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 500);
     this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     this.svg.setAttribute("height", ch + "");
-    this.svg.setAttribute("width", "100%");
+    this.svg.setAttribute("width", cw + "");
     (_a = this.element) == null ? void 0 : _a.appendChild(this.svg);
     this.barHeight = Math.max(this.graphHeight, this.unitTime * this.commits.length + 320);
     const _ref = this.commits;
@@ -37960,7 +38093,7 @@ class GitGraph$1 {
   }
   drawDot(x, y, commit) {
     const options = this.options;
-    const isdark = this.isDark;
+    this.isDark;
     const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
     const attrs = {
       cx: x,
@@ -37968,7 +38101,7 @@ class GitGraph$1 {
       r: 4,
       fill: "#fff",
       strokeWidth: 1,
-      stroke: this.colors[commit.space],
+      stroke: this.colors[commit.space % 20],
       style: "cursor: pointer;"
     };
     this.setNodeAttr(circle, attrs);
@@ -37991,7 +38124,7 @@ class GitGraph$1 {
     img.appendChild(authorText);
     this.svg.appendChild(img);
     if (!this.messageBoxWidth) {
-      this.messageBoxWidth = this.svg.getBoundingClientRect.width - (avatar_box_x + 40);
+      this.messageBoxWidth = this.svg.getBoundingClientRect().width - (avatar_box_x + 40);
     }
     let route = ["M", avatar_box_x + 15, avatar_box_y - 20, "L", avatar_box_x + 15, avatar_box_y];
     const line1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -38015,16 +38148,25 @@ class GitGraph$1 {
     if (commit.author.name.length > this.maxNameLength) {
       commit.author.name = commit.author.name.substr(0, this.maxNameLength) + "...";
     }
-    const commitText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    const commitText = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
     const commitAttrs = {
       x: avatar_box_x + 40,
-      y: y + 4,
+      y: y - 8,
       "text-anchor": "start",
       style: "cursor: pointer;text-anchor: start;",
-      fill: isdark ? "#e8e8e8" : "#2e2e2e",
-      "font-size": 14
+      width: this.messageBoxWidth,
+      height: 20
     };
     this.setNodeAttr(commitText, commitAttrs);
+    const textArr = {
+      style: "width: 100%; height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;",
+      title: commit.message
+    };
+    const text = document.createElement("div");
+    this.setNodeAttr(text, textArr);
+    text.innerText = commit.message.replace(/\n/g, " ");
+    commitText.appendChild(text);
+    this.svg.appendChild(commitText);
     const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
     tspan.appendChild(document.createTextNode(commit.message.replace(/\n/g, " ")));
     commitText.appendChild(tspan);
@@ -38058,9 +38200,9 @@ class GitGraph$1 {
       parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
       parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
       if (parentCommit.space <= commit.space) {
-        color2 = this.colors[commit.space];
+        color2 = this.colors[commit.space % 20];
       } else {
-        color2 = this.colors[parentCommit.space];
+        color2 = this.colors[parentCommit.space % 20];
       }
       if (parent[1] === commit.space) {
         offset2 = [0, 5];
@@ -38150,14 +38292,14 @@ class GitGraph$1 {
       ];
       const rectAttrs = {
         fill: this.isDark ? "#4C4C4C" : "#fff",
-        stroke: this.colors[commit.space],
+        stroke: this.colors[commit.space % 20],
         "stroke-width": "1px",
         d: path.join(" "),
         transform: `matrix(1,0,0,1,-${textbox.width + 26},0)`
       };
       const newAttrs = {
         transform: `matrix(1,0,0,1,-${textbox.width + 26},0)`,
-        fill: this.colors[commit.space]
+        fill: this.colors[commit.space % 20]
       };
       this.setNodeAttr(text, newAttrs);
       this.setNodeAttr(rect, rectAttrs);
@@ -38348,6 +38490,7 @@ function useGitGraph(props, ctx2, isDark) {
     initGraph
   };
 }
+var gitGraph = "";
 var GitGraph = defineComponent({
   name: "DGitGraph",
   props: gitGraphProps,
@@ -54305,7 +54448,7 @@ const installs = [
   VirtualListInstall
 ];
 var vueDevui = {
-  version: "1.6.27",
+  version: "1.6.29",
   install(app) {
     installs.forEach((p) => app.use(p));
   }