From 26fb398196ce176a82eae995417990e318104efa Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 18 Oct 2024 01:23:39 +0530
Subject: [PATCH 1/3] fix: markdown content for mention and custom image
 extensions

---
 .../extensions/custom-image/custom-image.ts     | 12 +++++++++++-
 .../custom-image/read-only-custom-image.ts      | 12 +++++++++++-
 .../src/core/extensions/mentions/extension.tsx  | 17 +++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/custom-image.ts b/packages/editor/src/core/extensions/custom-image/custom-image.ts
index 6dd5f0f19e6..e1d698ede6c 100644
--- a/packages/editor/src/core/extensions/custom-image/custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/custom-image.ts
@@ -1,9 +1,11 @@
 import { Editor, mergeAttributes } from "@tiptap/core";
 import { Image } from "@tiptap/extension-image";
+import { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import { Node } from "@tiptap/pm/model";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // extensions
-import { CustomImageNode } from "@/extensions/custom-image";
+import { CustomImageNode, ImageAttributes } from "@/extensions/custom-image";
 // plugins
 import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
 // types
@@ -121,6 +123,14 @@ export const CustomImageExtension = (props: TFileHandler) => {
         deletedImageSet: new Map<string, boolean>(),
         uploadInProgress: false,
         maxFileSize,
+        markdown: {
+          serialize(state: MarkdownSerializerState, node: Node) {
+            const attrs = node.attrs as ImageAttributes;
+            const imageSource = this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src;
+            state.write(`<img src="${imageSource}" width="${attrs.width}" />`);
+            state.closeBlock(node);
+          },
+        },
       };
     },
 
diff --git a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
index 76edacbd0c6..773b01c12ec 100644
--- a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
@@ -1,8 +1,10 @@
 import { mergeAttributes } from "@tiptap/core";
 import { Image } from "@tiptap/extension-image";
+import { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import { Node } from "@tiptap/pm/model";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 // components
-import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
+import { CustomImageNode, ImageAttributes, UploadImageExtensionStorage } from "@/extensions/custom-image";
 // types
 import { TFileHandler } from "@/types";
 
@@ -52,6 +54,14 @@ export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAsset
     addStorage() {
       return {
         fileMap: new Map(),
+        markdown: {
+          serialize(state: MarkdownSerializerState, node: Node) {
+            const attrs = node.attrs as ImageAttributes;
+            const imageSource = this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src;
+            state.write(`<img src="${imageSource}" width="${attrs.width}" />`);
+            state.closeBlock(node);
+          },
+        },
       };
     },
 
diff --git a/packages/editor/src/core/extensions/mentions/extension.tsx b/packages/editor/src/core/extensions/mentions/extension.tsx
index 5653a3540de..6821ecbe5c4 100644
--- a/packages/editor/src/core/extensions/mentions/extension.tsx
+++ b/packages/editor/src/core/extensions/mentions/extension.tsx
@@ -1,5 +1,7 @@
 import { Editor, mergeAttributes } from "@tiptap/core";
 import Mention, { MentionOptions } from "@tiptap/extension-mention";
+import { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import { Node } from "@tiptap/pm/model";
 import { ReactNodeViewRenderer, ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 // extensions
@@ -25,6 +27,21 @@ export const CustomMention = ({
     addStorage(this) {
       return {
         mentionsOpen: false,
+        markdown: {
+          serialize(state: MarkdownSerializerState, node: Node) {
+            const { attrs } = node;
+            // add link text
+            state.write("[");
+            state.write(`@${attrs.label}`);
+            state.write("]");
+            // add link url
+            state.write("(");
+            const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+            state.write(`${originUrl}/${attrs.redirect_uri}`);
+            state.write(")");
+            state.closeBlock(node);
+          },
+        },
       };
     },
     addAttributes() {

From 79a9014ce13677679763bb1469a2d0bab8bdc5a9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 18 Oct 2024 12:54:33 +0530
Subject: [PATCH 2/3] style: update issue embed upgrade card

---
 .../editor/embed/issue-embed-upgrade-card.tsx | 45 ++++++++++---------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx b/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
index ce3db73893e..d9ea1b8a071 100644
--- a/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
+++ b/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
@@ -1,31 +1,34 @@
-// ui
-import { Button } from "@plane/ui";
+// plane ui
+import { getButtonStyling } from "@plane/ui";
 // components
 import { ProIcon } from "@/components/common";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
   <div
-    className={`${
-      props.selected ? "border-custom-primary-200 border-[2px]" : ""
-    } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
+    className={cn(
+      "w-full h-20 bg-custom-background-80 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs",
+      {
+        "border-2": props.selected,
+      }
+    )}
   >
-    <h5 className="h-[20%] text-xs text-custom-text-300 p-2">
-      {props.node?.attrs?.project_identifier}-{props?.node?.attrs?.sequence_id}
-    </h5>
-    <div className="relative h-[71%]">
-      <div className="h-full backdrop-filter backdrop-blur-[30px] bg-custom-background-80 bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative">
-        <div className="flex gap-2 items-center">
-          <div className="rounded">
-            <ProIcon className="m-2 w-4 h-4" />
-          </div>
-          <div className="text-custom-text text-sm">
-            Embed and access issues in pages seamlessly, upgrade to plane pro now.
-          </div>
-        </div>
-        <a href="https://plane.so/pricing" target="_blank" rel="noopener noreferrer">
-          <Button>Upgrade</Button>
-        </a>
+    <div className="flex items-center justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 w-full max-md:max-w-full max-md:flex-wrap rounded-md">
+      <div className="flex items-center gap-4">
+        <ProIcon className="flex-shrink-0 size-4" />
+        <p className="text-custom-text !text-base">
+          Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
+        </p>
       </div>
+      <a
+        href="https://plane.so/pro"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(getButtonStyling("primary", "md"), "no-underline")}
+      >
+        Upgrade
+      </a>
     </div>
   </div>
 );

From 6141071e1676e996e242131339d6d6930e6dcedc Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 18 Oct 2024 13:29:31 +0530
Subject: [PATCH 3/3] chore: added string escapes

---
 .../core/extensions/custom-image/custom-image.ts   |  5 +++--
 .../custom-image/read-only-custom-image.ts         |  5 +++--
 .../src/core/extensions/mentions/extension.tsx     | 14 +++++---------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/custom-image.ts b/packages/editor/src/core/extensions/custom-image/custom-image.ts
index e1d698ede6c..7476c713886 100644
--- a/packages/editor/src/core/extensions/custom-image/custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/custom-image.ts
@@ -126,8 +126,9 @@ export const CustomImageExtension = (props: TFileHandler) => {
         markdown: {
           serialize(state: MarkdownSerializerState, node: Node) {
             const attrs = node.attrs as ImageAttributes;
-            const imageSource = this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src;
-            state.write(`<img src="${imageSource}" width="${attrs.width}" />`);
+            const imageSource = state.esc(this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src);
+            const imageWidth = state.esc(attrs.width?.toString());
+            state.write(`<img src="${state.esc(imageSource)}" width="${imageWidth}" />`);
             state.closeBlock(node);
           },
         },
diff --git a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
index 773b01c12ec..07d890cd688 100644
--- a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
@@ -57,8 +57,9 @@ export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAsset
         markdown: {
           serialize(state: MarkdownSerializerState, node: Node) {
             const attrs = node.attrs as ImageAttributes;
-            const imageSource = this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src;
-            state.write(`<img src="${imageSource}" width="${attrs.width}" />`);
+            const imageSource = state.esc(this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src);
+            const imageWidth = state.esc(attrs.width?.toString());
+            state.write(`<img src="${state.esc(imageSource)}" width="${imageWidth}" />`);
             state.closeBlock(node);
           },
         },
diff --git a/packages/editor/src/core/extensions/mentions/extension.tsx b/packages/editor/src/core/extensions/mentions/extension.tsx
index 6821ecbe5c4..32ad8a720bc 100644
--- a/packages/editor/src/core/extensions/mentions/extension.tsx
+++ b/packages/editor/src/core/extensions/mentions/extension.tsx
@@ -30,20 +30,16 @@ export const CustomMention = ({
         markdown: {
           serialize(state: MarkdownSerializerState, node: Node) {
             const { attrs } = node;
-            // add link text
-            state.write("[");
-            state.write(`@${attrs.label}`);
-            state.write("]");
-            // add link url
-            state.write("(");
+            const label = `@${state.esc(attrs.label)}`;
             const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-            state.write(`${originUrl}/${attrs.redirect_uri}`);
-            state.write(")");
-            state.closeBlock(node);
+            const safeRedirectionPath = state.esc(attrs.redirect_uri);
+            const url = `${originUrl}${safeRedirectionPath}`;
+            state.write(`[${label}](${url})`);
           },
         },
       };
     },
+
     addAttributes() {
       return {
         id: {