Add diff language highlighting for code blocks (#11301)

* Initial plan

* Add diff language highlighting support

Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>

* Styling

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>
Co-authored-by: Tom Moor <tom@getoutline.com>

shared/editor/components/Styles.ts

@@ -247,11 +247,13 @@ const codeBlockStyle = (props: Props) => css`
   }
 
   .token.deleted {
-    text-decoration: line-through;
+    color: ${props.theme.textDiffDeleted};
+    background-color: ${props.theme.textDiffDeletedBackground};
   }
 
   .token.inserted {
-    border-bottom: 1px dotted ${props.theme.codeInserted};
+    color: ${props.theme.textDiffInserted};
+    background-color: ${props.theme.textDiffInsertedBackground};
     text-decoration: none;
   }
 

shared/editor/lib/code.test.ts

@@ -6,6 +6,7 @@ describe("getRefractorLangForLanguage", () => {
     expect(getRefractorLangForLanguage("mermaid")).toBe("mermaid");
     expect(getRefractorLangForLanguage("mermaidjs")).toBe("mermaid");
     expect(getRefractorLangForLanguage("xml")).toBe("markup");
+    expect(getRefractorLangForLanguage("diff")).toBe("diff");
     expect(getRefractorLangForLanguage("unknown")).toBeUndefined();
     expect(getRefractorLangForLanguage("")).toBeUndefined();
   });
@@ -17,6 +18,7 @@ describe("getLabelForLanguage", () => {
     expect(getLabelForLanguage("mermaid")).toBe("Mermaid");
     expect(getLabelForLanguage("mermaidjs")).toBe("Mermaid");
     expect(getLabelForLanguage("xml")).toBe("XML");
+    expect(getLabelForLanguage("diff")).toBe("Diff");
     expect(getLabelForLanguage("unknown")).toBe("Plain text");
     expect(getLabelForLanguage("none")).toBe("Plain text");
     expect(getLabelForLanguage("")).toBe("Plain text");

shared/editor/lib/code.ts

@@ -56,6 +56,11 @@ export const codeLanguages: Record<string, CodeLanguage> = {
     label: "Dart",
     loader: () => import("refractor/lang/dart").then((m) => m.default),
   },
+  diff: {
+    lang: "diff",
+    label: "Diff",
+    loader: () => import("refractor/lang/diff").then((m) => m.default),
+  },
   docker: {
     lang: "docker",
     label: "Docker",