@git-diff-view/react 0.0.25 → 0.0.27

package/src/_com.css

@@ -0,0 +1,172 @@
+* {
+  box-sizing: border-box;
+}
+
+[data-theme="light"] .diff-style-root {
+  --diff-border--: #dedede;
+  --diff-add-content--: #e6ffec;
+  --diff-del-content--: #ffebe9;
+  --diff-add-lineNumber--: #ccffd8;
+  --diff-del-lineNumber--: #ffd7d5;
+  --diff-plain-content--: #ffffff;
+  --diff-expand-content--: #fafafa;
+  --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
+  --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
+  --diff-hunk-content--: #ddf4ff;
+  --diff-hunk-lineNumber--: #c7ecff;
+  --diff-hunk-lineNumber-hover--: #0969da;
+  --diff-add-content-highlight--: #abf2bc;
+  --diff-del-content-highlight--: #ffb3ad;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #fafafa;
+  --diff-hunk-content-color--: #777777;
+
+  color: black;
+}
+
+.diff-style-root .diff-line-syntax-raw *,
+[data-theme="light"] .diff-line-syntax-raw * {
+  color: var(--diff-view-light, inherit);
+  font-weight: var(--diff-view-light-font-weight, inherit);
+}
+
+[data-theme="dark"] .diff-style-root {
+  --diff-border--: #3d444d;
+  --diff-add-content--: #14261f;
+  --diff-del-content--: #311b1f;
+  --diff-add-lineNumber--: #1f4429;
+  --diff-del-lineNumber--: #552527;
+  --diff-plain-content--: #0d1117;
+  --diff-expand-content--: #161b22;
+  --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
+  --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
+  --diff-hunk-content--: #131d2e;
+  --diff-hunk-lineNumber--: #204274;
+  --diff-hunk-lineNumber-hover--: #1f6feb;
+  --diff-add-content-highlight--: #1f572d;
+  --diff-del-content-highlight--: #80312f;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #161b22;
+  --diff-hunk-content-color--: #9298a0;
+
+  color: white;
+}
+
+[data-theme="dark"] .diff-line-syntax-raw * {
+  color: var(--diff-view-dark, inherit);
+  font-weight: var(--diff-view-dark-font-weight, inherit);
+}
+
+table,
+tr,
+td {
+  border-color: transparent;
+  border-width: 0px;
+  text-align: left;
+}
+
+.diff-line-old-num,
+.diff-line-new-num,
+.diff-line-num {
+  text-align: right;
+}
+
+.diff-style-root tr {
+  content-visibility: auto;
+}
+
+.diff-add-widget-wrapper {
+  transform-origin: center;
+  transform: translateX(-50%) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper,
+.diff-line-new-content .diff-add-widget-wrapper {
+  transform: translateX(50%) !important;
+}
+
+.diff-add-widget-wrapper:hover {
+  transform: translateX(-50%) scale(1.1) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper:hover,
+.diff-line-new-content .diff-add-widget-wrapper:hover {
+  transform: translateX(50%) scale(1.1) !important;
+}
+
+.diff-widget-tooltip {
+  position: relative;
+}
+
+.diff-add-widget,
+.diff-widget-tooltip {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  text-transform: none;
+  border-width: 0px;
+  background-color: transparent;
+  background-image: none;
+}
+
+.diff-widget-tooltip::after {
+  display: none;
+  box-sizing: border-box;
+  background-color: #555555;
+  position: absolute;
+  content: attr(data-title);
+  font-size: 11px;
+  padding: 1px 2px;
+  border-radius: 4px;
+  overflow: hidden;
+  top: 50%;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  left: calc(100% + 8px);
+  color: #ffffff;
+}
+
+.diff-widget-tooltip::before {
+  display: none;
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: calc(100% - 2px);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: #555555;
+}
+
+.diff-widget-tooltip:hover {
+  background-color: var(--diff-hunk-lineNumber-hover--);
+  color: white;
+}
+
+.diff-widget-tooltip:hover::before {
+  display: block;
+}
+
+.diff-widget-tooltip:hover::after {
+  display: block;
+}
+
+.diff-line-extend-wrapper * {
+  color: initial;
+}
+
+.diff-line-widget-wrapper * {
+  color: initial;
+}

package/src/_theme.css

@@ -0,0 +1,2 @@
+@import url(highlight.js/styles/github.css);
+@import url(highlight.js/styles/github-dark.css);

package/src/components/DiffAddWidget.tsx

@@ -0,0 +1,86 @@
+import { addWidgetBGName, addWidgetColorName, diffFontSizeName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import type { SplitSide } from "./DiffView";
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffSplitAddWidget = ({
+  side,
+  className,
+  lineNumber,
+  onWidgetClick,
+  onOpenAddWidget,
+}: {
+  index: number;
+  lineNumber: number;
+  diffFile: DiffFile;
+  side: SplitSide;
+  className?: string;
+  onWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <div
+      className={
+        "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
+        (className ? " " + className : "")
+      }
+      style={{
+        width: `calc(var(${diffFontSizeName}) * 1.4)`,
+        height: `calc(var(${diffFontSizeName}) * 1.4)`,
+      }}
+    >
+      <button
+        className="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          backgroundColor: `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          onOpenAddWidget(lineNumber, side);
+          onWidgetClick?.(lineNumber, side);
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};
+
+export const DiffUnifiedAddWidget = ({
+  lineNumber,
+  side,
+  onWidgetClick,
+  onOpenAddWidget,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  side: SplitSide;
+  onWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <div
+      className="diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
+      style={{
+        width: `calc(var(${diffFontSizeName}) * 1.4)`,
+        height: `calc(var(${diffFontSizeName}) * 1.4)`,
+      }}
+    >
+      <button
+        className="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          backgroundColor: `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          onOpenAddWidget(lineNumber, side);
+          onWidgetClick?.(lineNumber, side);
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};

package/src/components/DiffContent.tsx

@@ -0,0 +1,367 @@
+/* eslint-disable max-lines */
+import {
+  DiffLineType,
+  NewLineSymbol,
+  getSyntaxDiffTemplate,
+  getSyntaxLineTemplate,
+  getPlainDiffTemplate,
+  getPlainLineTemplate,
+} from "@git-diff-view/core";
+import {
+  memoFunc,
+  addContentHighlightBGName,
+  delContentHighlightBGName,
+  diffFontSizeName,
+  getSymbol,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { DiffNoNewLine } from "./DiffNoNewLine";
+
+import type { DiffFile, DiffLine, File } from "@git-diff-view/core";
+
+const temp = {};
+
+const formatStringToCamelCase = (str: string) => {
+  if (str.startsWith("--")) return str;
+  const splitted = str.split("-");
+  if (splitted.length === 1) return splitted[0];
+  return (
+    splitted[0] +
+    splitted
+      .slice(1)
+      .map((word) => word[0].toUpperCase() + word.slice(1))
+      .join("")
+  );
+};
+
+export const getStyleObjectFromString = memoFunc((str: string) => {
+  if (!str) return temp;
+  const style = {};
+  str.split(";").forEach((el) => {
+    const [property, value] = el.split(":");
+    if (!property) return;
+
+    const formattedProperty = formatStringToCamelCase(property.trim());
+    style[formattedProperty] = value.trim();
+  });
+  return style;
+});
+
+const DiffString = ({
+  rawLine,
+  diffLine,
+  operator,
+  plainLine,
+  enableWrap,
+}: {
+  rawLine: string;
+  diffLine?: DiffLine;
+  operator?: "add" | "del";
+  plainLine?: File["plainFile"][number];
+  enableWrap?: boolean;
+}) => {
+  const changes = diffLine?.changes;
+
+  if (changes?.hasLineChange) {
+    const isNewLineSymbolChanged = changes.newLineSymbol;
+
+    if (!diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
+      getPlainDiffTemplate({ diffLine, rawLine, operator });
+    }
+
+    if (diffLine?.plainTemplate) {
+      return (
+        <span className="diff-line-content-raw">
+          <span data-template dangerouslySetInnerHTML={{ __html: diffLine.plainTemplate }} />
+          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
+            <span
+              data-no-newline-at-end-of-file-symbol
+              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+              style={{
+                width: `var(${diffFontSizeName})`,
+                height: `var(${diffFontSizeName})`,
+              }}
+            >
+              <DiffNoNewLine />
+            </span>
+          )}
+        </span>
+      );
+    } else {
+      // TODO remove
+      const range = changes.range;
+      const str1 = rawLine.slice(0, range.location);
+      const str2 = rawLine.slice(range.location, range.location + range.length);
+      const str3 = rawLine.slice(range.location + range.length);
+      const isLast = str2.includes("\n");
+      const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+      return (
+        <span className="diff-line-content-raw">
+          <span data-range-start={range.location} data-range-end={range.location + range.length}>
+            {str1}
+            <span
+              data-diff-highlight
+              className="rounded-[0.2em]"
+              style={{
+                backgroundColor:
+                  operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
+              }}
+            >
+              {isLast ? (
+                <>
+                  {_str2}
+                  <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
+                </>
+              ) : (
+                str2
+              )}
+            </span>
+            {str3}
+          </span>
+          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
+            <span
+              data-no-newline-at-end-of-file-symbol
+              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+              style={{
+                width: `var(${diffFontSizeName})`,
+                height: `var(${diffFontSizeName})`,
+              }}
+            >
+              <DiffNoNewLine />
+            </span>
+          )}
+        </span>
+      );
+    }
+  }
+
+  if (plainLine && !plainLine?.template) {
+    plainLine.template = getPlainLineTemplate(plainLine.value);
+  }
+
+  if (plainLine?.template) {
+    return (
+      <span className="diff-line-content-raw">
+        <span data-template dangerouslySetInnerHTML={{ __html: plainLine.template }} />
+      </span>
+    );
+  }
+
+  return <span className="diff-line-content-raw">{rawLine}</span>;
+};
+
+const DiffSyntax = ({
+  rawLine,
+  diffLine,
+  operator,
+  syntaxLine,
+  enableWrap,
+}: {
+  rawLine: string;
+  diffLine?: DiffLine;
+  syntaxLine?: File["syntaxFile"][number];
+  operator?: "add" | "del";
+  enableWrap?: boolean;
+}) => {
+  if (!syntaxLine) {
+    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} />;
+  }
+
+  const changes = diffLine?.changes;
+
+  if (changes?.hasLineChange) {
+    const isNewLineSymbolChanged = changes.newLineSymbol;
+
+    if (!diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
+      getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+    }
+
+    if (diffLine?.syntaxTemplate) {
+      return (
+        <span className="diff-line-syntax-raw">
+          <span data-template dangerouslySetInnerHTML={{ __html: diffLine.syntaxTemplate }} />
+          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
+            <span
+              data-no-newline-at-end-of-file-symbol
+              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+              style={{
+                width: `var(${diffFontSizeName})`,
+                height: `var(${diffFontSizeName})`,
+              }}
+            >
+              <DiffNoNewLine />
+            </span>
+          )}
+        </span>
+      );
+    } else {
+      // TODO remove
+      const range = changes.range;
+
+      return (
+        <span className="diff-line-syntax-raw">
+          <span data-range-start={range.location} data-range-end={range.location + range.length}>
+            {syntaxLine.nodeList?.map(({ node, wrapper }, index) => {
+              if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
+                return (
+                  <span
+                    key={index}
+                    data-start={node.startIndex}
+                    data-end={node.endIndex}
+                    className={wrapper?.properties?.className?.join(" ")}
+                    style={getStyleObjectFromString(wrapper?.properties?.style || "")}
+                  >
+                    {node.value}
+                  </span>
+                );
+              } else {
+                const index1 = range.location - node.startIndex;
+                const index2 = index1 < 0 ? 0 : index1;
+                const str1 = node.value.slice(0, index2);
+                const str2 = node.value.slice(index2, index1 + range.length);
+                const str3 = node.value.slice(index1 + range.length);
+                const isStart = str1.length || range.location === node.startIndex;
+                const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
+                const isLast = str2.includes("\n");
+                const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+                return (
+                  <span
+                    key={index}
+                    data-start={node.startIndex}
+                    data-end={node.endIndex}
+                    className={wrapper?.properties?.className?.join(" ")}
+                    style={getStyleObjectFromString(wrapper?.properties?.style || "")}
+                  >
+                    {str1}
+                    <span
+                      data-diff-highlight
+                      style={{
+                        backgroundColor:
+                          operator === "add"
+                            ? `var(${addContentHighlightBGName})`
+                            : `var(${delContentHighlightBGName})`,
+                        borderTopLeftRadius: isStart ? "0.2em" : undefined,
+                        borderBottomLeftRadius: isStart ? "0.2em" : undefined,
+                        borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                        borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
+                      }}
+                    >
+                      {isLast ? (
+                        <>
+                          {_str2}
+                          <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
+                        </>
+                      ) : (
+                        str2
+                      )}
+                    </span>
+                    {str3}
+                  </span>
+                );
+              }
+            })}
+          </span>
+          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
+            <span
+              data-no-newline-at-end-of-file-symbol
+              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+              style={{
+                width: `var(${diffFontSizeName})`,
+                height: `var(${diffFontSizeName})`,
+              }}
+            >
+              <DiffNoNewLine />
+            </span>
+          )}
+        </span>
+      );
+    }
+  }
+
+  if (!syntaxLine.template) {
+    syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
+  }
+
+  if (syntaxLine?.template) {
+    return (
+      <span className="diff-line-syntax-raw">
+        <span data-template dangerouslySetInnerHTML={{ __html: syntaxLine.template }} />
+      </span>
+    );
+  }
+
+  return (
+    <span className="diff-line-syntax-raw">
+      {syntaxLine?.nodeList?.map(({ node, wrapper }, index) => (
+        <span
+          key={index}
+          data-start={node.startIndex}
+          data-end={node.endIndex}
+          className={wrapper?.properties?.className?.join(" ")}
+          style={getStyleObjectFromString(wrapper?.properties?.style || "")}
+        >
+          {node.value}
+        </span>
+      ))}
+    </span>
+  );
+};
+
+export const DiffContent = ({
+  diffLine,
+  rawLine,
+  plainLine,
+  syntaxLine,
+  enableWrap,
+  enableHighlight,
+}: {
+  rawLine: string;
+  plainLine?: File["plainFile"][number];
+  syntaxLine?: File["syntaxFile"][number];
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+}) => {
+  const isAdded = diffLine?.type === DiffLineType.Add;
+
+  const isDelete = diffLine?.type === DiffLineType.Delete;
+
+  const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
+
+  return (
+    <div
+      className="diff-line-content-item pl-[2.0em]"
+      // data-val={rawLine}
+      style={{
+        whiteSpace: enableWrap ? "pre-wrap" : "pre",
+        wordBreak: enableWrap ? "break-all" : "initial",
+      }}
+    >
+      <span
+        data-operator={isAdded ? "+" : isDelete ? "-" : undefined}
+        className="diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]"
+      >
+        {isAdded ? "+" : isDelete ? "-" : " "}
+      </span>
+      {enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (
+        <DiffSyntax
+          operator={isAdded ? "add" : isDelete ? "del" : undefined}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          syntaxLine={syntaxLine}
+          enableWrap={enableWrap}
+        />
+      ) : (
+        <DiffString
+          operator={isAdded ? "add" : isDelete ? "del" : undefined}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          plainLine={plainLine}
+          enableWrap={enableWrap}
+        />
+      )}
+    </div>
+  );
+};