[PE-68] fix: markdown transformation of mention and custom image components (#5864)

* fix: markdown content for mention and custom image extensions

* style: update issue embed upgrade card

* chore: added string escapes

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>
 );