fix: preserve reference links when copy-pasting from preview (#856)

* fix: preserve reference links when copy-pasting from preview

* chore: abstract as util function

apps/studio/src/features/editing-experience/components/PreviewWithoutSitemap.tsx

@@ -26,7 +26,7 @@ export type PreviewProps = IsomerSchema & {
 // Add a fake link component to prevent the preview from navigating away
 const FakeLink = forwardRef<HTMLAnchorElement, PropsWithChildren<unknown>>(
   ({ children, ...rest }, ref) => (
-    <a {...rest} ref={ref} href="#" onClick={(e) => e.preventDefault()}>
+    <a {...rest} ref={ref} onClick={(e) => e.preventDefault()}>
       {children}
     </a>
   ),

apps/studio/src/features/editing-experience/constants.ts

@@ -39,3 +39,5 @@ export const TYPE_TO_ICON: Record<
   // iframe-formsg
   // iframe-youtube
 }
+
+export const REFERENCE_LINK_REGEX = /\[resource:(\d+):(\d+)\]/

apps/studio/src/features/editing-experience/hooks/useTextEditor.ts

@@ -24,8 +24,11 @@ import { TableHeader } from "@tiptap/extension-table-header"
 import { TableRow } from "@tiptap/extension-table-row"
 import { Text } from "@tiptap/extension-text"
 import { Underline } from "@tiptap/extension-underline"
+import { Plugin, PluginKey } from "@tiptap/pm/state"
 import { textblockTypeInputRule, useEditor } from "@tiptap/react"
 
+import { getHtmlWithRelativeReferenceLinks } from "../utils"
+
 const HEADING_LEVELS: Level[] = [2, 3, 4, 5]
 
 export interface BaseEditorProps {
@@ -34,7 +37,28 @@ export interface BaseEditorProps {
 }
 
 const BASE_EXTENSIONS: Extensions = [
-  Link.configure({
+  Link.extend({
+    addProseMirrorPlugins() {
+      return [
+        // NOTE: This plugin is used to transform links inside the HTML content
+        // copied by the user from the preview, as browsers will automatically
+        // transform relative links (in the form of [resource:siteId:resourceId])
+        // into absolute links:
+        // https://studio.isomer.gov.sg/sites/1/pages/[resource:siteId:resourceId]
+        // This plugin will transform the absolute links back into the relative
+        // links, so that the original link is preserved in the editor.
+        new Plugin({
+          key: new PluginKey("transformReferenceLinks"),
+          props: {
+            transformPastedHTML(html, _) {
+              return getHtmlWithRelativeReferenceLinks(html)
+            },
+          },
+        }),
+        ...(this.parent?.() ?? []),
+      ]
+    },
+  }).configure({
     HTMLAttributes: {
       rel: "",
       target: "_self",

apps/studio/src/features/editing-experience/utils.ts

@@ -1 +1,17 @@
+import { REFERENCE_LINK_REGEX } from "./constants"
+
 export const dataAttr = (value: unknown) => (!!value ? true : undefined)
+
+// This function converts HTML with absolute reference links (something like
+// https://studio.isomer.gov.sg/sites/1/pages/[resource:siteId:resourceId]) into
+// relative reference links ([resource:siteId:resourceId])
+export const getHtmlWithRelativeReferenceLinks = (html: string) =>
+  html.replaceAll(
+    new RegExp(
+      `href="(?:http|https):\/\/[^[]*\/${REFERENCE_LINK_REGEX.source}"`,
+      "g",
+    ),
+    (_, siteId, resourceId) => {
+      return `href="[resource:${siteId}:${resourceId}]"`
+    },
+  )

apps/studio/src/utils/link.ts

@@ -1,3 +1,5 @@
+import { REFERENCE_LINK_REGEX } from "~/features/editing-experience/constants"
+
 interface GetReferenceLinkParams {
   siteId: string
   resourceId: string
@@ -19,7 +21,7 @@ export const getReferenceLink = ({
 export const getResourceIdFromReferenceLink = (
   referenceLink: string,
 ): string => {
-  const match = /\[resource:(\d+):(\d+)\]/.exec(referenceLink)
+  const match = REFERENCE_LINK_REGEX.exec(referenceLink)
   if (!match) {
     return ""
   }