site

Author: MrWangJustToDo

ui/react-example/src/components/MainContent/MainContentDiffAdvance.tsx

@@ -0,0 +1,59 @@
+import {
+  escapeHtml,
+  setTransformForTemplateContent,
+  resetTransform,
+  setEnableFastDiffTemplate,
+  resetEnableFastDiffTemplate,
+} from "@git-diff-view/core";
+import { Button, Group } from "@mantine/core";
+import { useEffect } from "react";
+
+import { useDiffConfig } from "../../hooks/useDiffConfig";
+
+const transform = (str: string) =>
+  escapeHtml(str)
+    .replace(/ /g, '<span class="diff-symbol diff-symbol-space"> </span>')
+    .replace(/\t/g, '<span class="diff-symbol diff-symbol-tab">\t</span>');
+
+export const MainContentDiffAdvance = () => {
+  const { tabSpace, setFastDiff, setTabSpace, fastDiff } = useDiffConfig((s) => ({
+    tabSpace: s.tabSpace,
+    setTabSpace: s.setTabSpace,
+    fastDiff: s.fastDiff,
+    setFastDiff: s.setFastDiff,
+  }));
+
+  useEffect(() => {
+    if (tabSpace) {
+      setTransformForTemplateContent(transform);
+    } else {
+      resetTransform();
+    }
+  }, [tabSpace]);
+
+  useEffect(() => {
+    if (fastDiff) {
+      setEnableFastDiffTemplate(true);
+    } else {
+      resetEnableFastDiffTemplate();
+    }
+  }, [fastDiff]);
+
+  useEffect(() => {
+    return () => {
+      resetTransform();
+      resetEnableFastDiffTemplate();
+    }
+  }, []);
+
+  return (
+    <Group>
+      <Button onClick={() => setTabSpace(!tabSpace)}>
+        {tabSpace ? "disable tab/space symbol" : "enable tab/space symbol"}
+      </Button>
+      <Button onClick={() => setFastDiff(!fastDiff)}>
+        {fastDiff ? "disable fast diff template" : "enable fast diff template"}
+      </Button>
+    </Group>
+  );
+};