From 8f53f3b28c57f77eb0472a4fb7290a40d6aa58e1 Mon Sep 17 00:00:00 2001
From: Andrew Smith <espadav8@gmail.com>
Date: Tue, 28 Nov 2023 00:35:37 +1100
Subject: [PATCH] Allow embedding of GitLab snippets (#6217)

---
 public/images/gitlab.png                   | Bin 0 -> 6438 bytes
 server/services/web.ts                     |  14 ++++++--
 shared/editor/embeds/GitLabSnippet.test.ts |  31 +++++++++++++++++
 shared/editor/embeds/GitLabSnippet.tsx     |  38 +++++++++++++++++++++
 shared/editor/embeds/index.tsx             |   7 ++++
 5 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 public/images/gitlab.png
 create mode 100644 shared/editor/embeds/GitLabSnippet.test.ts
 create mode 100644 shared/editor/embeds/GitLabSnippet.tsx

diff --git a/public/images/gitlab.png b/public/images/gitlab.png
new file mode 100644
index 0000000000000000000000000000000000000000..85ec9e76f69fc7b74f08eae523d8d18d6bebef36
GIT binary patch
literal 6438
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
Utgki)AGT^NcOPbzTX53<0C;=KHUIzs

literal 0
HcmV?d00001

diff --git a/server/services/web.ts b/server/services/web.ts
index c54e14b0d..76adabea4 100644
--- a/server/services/web.ts
+++ b/server/services/web.ts
@@ -24,9 +24,19 @@ import auth from "../routes/auth";
 
 // Construct scripts CSP based on services in use by this installation
 const defaultSrc = ["'self'"];
-const scriptSrc = ["'self'", "gist.github.com", "www.googletagmanager.com"];
+const scriptSrc = [
+  "'self'",
+  "gist.github.com",
+  "www.googletagmanager.com",
+  "gitlab.com",
+];
 
-const styleSrc = ["'self'", "'unsafe-inline'", "github.githubassets.com"];
+const styleSrc = [
+  "'self'",
+  "'unsafe-inline'",
+  "github.githubassets.com",
+  "gitlab.com",
+];
 
 if (env.isCloudHosted) {
   scriptSrc.push("cdn.zapier.com");
diff --git a/shared/editor/embeds/GitLabSnippet.test.ts b/shared/editor/embeds/GitLabSnippet.test.ts
new file mode 100644
index 000000000..fbd1d5b90
--- /dev/null
+++ b/shared/editor/embeds/GitLabSnippet.test.ts
@@ -0,0 +1,31 @@
+import GitLabSnippet from "./GitLabSnippet";
+
+describe("GitLabSnippet", () => {
+  const match = GitLabSnippet.ENABLED[0];
+
+  test("to be enabled on snippet link", () => {
+    expect("https://gitlab.com/-/snippets/1234".match(match)).toBeTruthy();
+    expect(
+      "https://gitlab.com/gitlab-org/gitlab/-/snippets/2256824".match(match)
+    ).toBeTruthy();
+    expect(
+      "https://gitlab.com/group/project/sub-project/sub-sub-project/test/-/snippets/9876".match(
+        match
+      )
+    ).toBeTruthy();
+  });
+
+  test("to not be enabled elsewhere", () => {
+    expect("https://gitlab.com".match(match)).toBe(null);
+    expect("https://gitlab.com/gitlab-org".match(match)).toBe(null);
+    expect("https://gitlab.com/gitlab-org/gitlab".match(match)).toBe(null);
+    expect("https://gitlab.com/gitlab-org/gitlab/-/issues".match(match)).toBe(
+      null
+    );
+    expect(
+      "https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137948".match(
+        match
+      )
+    ).toBe(null);
+  });
+});
diff --git a/shared/editor/embeds/GitLabSnippet.tsx b/shared/editor/embeds/GitLabSnippet.tsx
new file mode 100644
index 000000000..05bb38883
--- /dev/null
+++ b/shared/editor/embeds/GitLabSnippet.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import styled from "styled-components";
+import { EmbedProps as Props } from ".";
+
+const GITLAB_NAMESPACE_REGEX = "(([a-zA-Z\\d-]+)/)";
+
+const Iframe = styled.iframe`
+  margin-top: 8px;
+`;
+
+function GitLabSnippet(props: Props) {
+  const snippetUrl = new URL(props.attrs.href);
+  const id = snippetUrl.pathname.split("/").pop();
+  const snippetLink = `${snippetUrl}.js`;
+  const snippetScript = `<script type="text/javascript" src="${snippetLink}"></script>`;
+  const styles = "<style>body { margin: 0; }</style>";
+  const iframeHtml = `<html><head><base target="_parent">${styles}</head><body>${snippetScript}</body></html>`;
+
+  return (
+    <Iframe
+      src={`data:text/html;base64,${btoa(iframeHtml)}`}
+      className={props.isSelected ? "ProseMirror-selectednode" : ""}
+      frameBorder="0"
+      width="100%"
+      height="400px"
+      id={`gitlab-snippet-${id}`}
+      title="GitLab Snippet"
+    />
+  );
+}
+
+GitLabSnippet.ENABLED = [
+  new RegExp(
+    `^https://gitlab\\.com/${GITLAB_NAMESPACE_REGEX}*-/snippets/\\d+$`
+  ),
+];
+
+export default GitLabSnippet;
diff --git a/shared/editor/embeds/index.tsx b/shared/editor/embeds/index.tsx
index 643205018..31150df91 100644
--- a/shared/editor/embeds/index.tsx
+++ b/shared/editor/embeds/index.tsx
@@ -20,6 +20,7 @@ import Diagrams from "./Diagrams";
 import Figma from "./Figma";
 import Framer from "./Framer";
 import Gist from "./Gist";
+import GitLabSnippet from "./GitLabSnippet";
 import Gliffy from "./Gliffy";
 import GoogleCalendar from "./GoogleCalendar";
 import GoogleDocs from "./GoogleDocs";
@@ -211,6 +212,12 @@ const embeds: EmbedDescriptor[] = [
     icon: <Img src="/images/github-gist.png" alt="GitHub" />,
     component: Gist,
   }),
+  new EmbedDescriptor({
+    title: "GitLab Snippet",
+    keywords: "code",
+    icon: <Img src="/images/gitlab.png" alt="GitLab" />,
+    component: GitLabSnippet,
+  }),
   new EmbedDescriptor({
     title: "Gliffy",
     keywords: "diagram",