From 0a852a27cd736f22523be8aa08fe158790bc41b7 Mon Sep 17 00:00:00 2001
From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com>
Date: Mon, 11 Dec 2023 18:36:49 +0800
Subject: [PATCH 1/6] chore(sidebar): update link to issue reporting form
 (#1737)

---
 src/components/Sidebar/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 489a773f6..6f9c73561 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -174,7 +174,7 @@ export const Sidebar = (): JSX.Element => {
       </LinkBox>
       <LinkBox>
         <LinkOverlay
-          href="https://go.gov.sg/isomer-cms-help"
+          href="https://go.gov.sg/isomer-issue"
           rel="noopener noreferrer"
           target="_blank"
         >

From b1eb900054abd393ca367a8cc2dd2cefe6eaa66e Mon Sep 17 00:00:00 2001
From: Qilu Xie <qilu@open.gov.sg>
Date: Tue, 12 Dec 2023 12:10:25 +0800
Subject: [PATCH 2/6] IS-712 Fixed image resizing issue in RTE (#1736)

* Fixed image resizing issue in RTE

* removed width attribute and used style tag to set the value of the form

* removed useless comments and added useful ones

* add 100% width as default to style tag for parity

* added command on image extension to set style and use it

* added explicit type for imageStyle for width and background color

* removed backcolor property
---
 .../ImageBubbleMenu/ImageBubbleMenu.tsx       |  4 +-
 .../ImageBubbleMenu/ResizeImagePopover.tsx    | 26 ++++++-------
 .../Editor/extensions/Image/Image.ts          | 39 +++++++++++++++++++
 3 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx
index aea0921b7..bdcbf81d9 100644
--- a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageBubbleMenu.tsx
@@ -117,7 +117,7 @@ const ImageLinkButton = () => {
           )}
         </Popover>
 
-        {/* <Popover placement="bottom">
+        <Popover placement="bottom">
           {({ isOpen, onClose }) => (
             <>
               <PopoverTrigger>
@@ -148,7 +148,7 @@ const ImageLinkButton = () => {
               </PopoverContent>
             </>
           )}
-        </Popover> */}
+        </Popover>
 
         <Tooltip label="Remove image" hasArrow placement="top">
           <IconButton
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx
index 3d1f8ac04..973179092 100644
--- a/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx
@@ -56,20 +56,11 @@ export const ResizeImagePopover = ({
       return
     }
 
-    const isomerImageAttrs = {
-      src: node.attrs.src,
-      alt: node.attrs.alt,
-      href: node.attrs.href,
+    const style = {
+      width: data.value,
     }
 
-    editor
-      .chain()
-      .focus()
-      .setImage({
-        width: `${data.value}%`,
-        ...isomerImageAttrs,
-      })
-      .run()
+    editor.chain().focus().setImageStyle(style).run()
 
     onClose()
   }
@@ -77,18 +68,23 @@ export const ResizeImagePopover = ({
   useEffect(() => {
     if (isOpen) {
       const initialValue: string | number =
-        editor.state.selection.content().content.firstChild?.attrs.width ?? 100
+        editor.state.selection
+          .content()
+          // regex to parse the width value from style tag
+          .content.firstChild?.attrs.style?.match(/width: (\d+)%/)?.[1] ?? 100
 
       if (typeof initialValue === "string") {
         methods.setValue(
           "value",
-          initialValue.endsWith("%") ? Number(initialValue.slice(0, -1)) : 100
+          initialValue.endsWith("%")
+            ? Number(initialValue.slice(0, -1))
+            : Number(initialValue)
         )
       } else {
         methods.setValue("value", initialValue)
       }
     }
-  }, [isOpen])
+  }, [editor.state.selection, isOpen, methods])
 
   return (
     <FormProvider {...methods}>
diff --git a/src/layouts/components/Editor/extensions/Image/Image.ts b/src/layouts/components/Editor/extensions/Image/Image.ts
index 63b67ddfc..a0c5f2689 100644
--- a/src/layouts/components/Editor/extensions/Image/Image.ts
+++ b/src/layouts/components/Editor/extensions/Image/Image.ts
@@ -11,6 +11,11 @@ interface IsomerImageOptions {
   width?: string
   height?: string
   href?: string
+  style?: string
+}
+
+interface IsomerImageStyle {
+  width?: number
 }
 
 declare module "@tiptap/core" {
@@ -18,6 +23,7 @@ declare module "@tiptap/core" {
     isomerImage: {
       setImage: (options: IsomerImageOptions) => ReturnType
       deleteImage: () => ReturnType
+      setImageStyle: (style: IsomerImageStyle) => ReturnType
     }
   }
 }
@@ -40,6 +46,9 @@ export const IsomerImage = Image.extend({
       height: {
         default: "auto",
       },
+      style: {
+        default: "width: 100%",
+      },
       href: {
         default: null,
         parseHTML: (element) =>
@@ -80,6 +89,36 @@ export const IsomerImage = Image.extend({
         editor.state.selection.replace(tr)
         return true
       },
+
+      setImageStyle: (styleOptions) => ({ tr, dispatch, editor }) => {
+        const { from, to } = tr.selection
+
+        let style = ""
+
+        if (styleOptions.width) {
+          if (styleOptions.width < 1 || styleOptions.width > 100) {
+            console.error(
+              "Invalid width value. It should be between 1 and 100."
+            )
+            return false
+          }
+          style += `width: ${styleOptions.width}%;`
+        }
+
+        const attrs = { style }
+
+        tr.doc.nodesBetween(from, to, (node, pos) => {
+          if (node.type === editor.schema.nodes.image) {
+            tr.setNodeMarkup(pos, null, { ...node.attrs, ...attrs })
+          }
+        })
+
+        if (dispatch) {
+          tr.scrollIntoView()
+        }
+
+        return true
+      },
     }
   },
 

From 64681c4fdc79f9bdd478c66cac00351d36a8a1f4 Mon Sep 17 00:00:00 2001
From: seaerchin <44049504+seaerchin@users.noreply.github.com>
Date: Tue, 12 Dec 2023 17:00:21 +0800
Subject: [PATCH 3/6] refactor(legacy/markdown-editpae): update width (#1739)

---
 src/layouts/EditPage/MarkdownEditPage.tsx |  5 ++---
 src/layouts/LegacyEditPage.jsx            | 10 ++++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/layouts/EditPage/MarkdownEditPage.tsx b/src/layouts/EditPage/MarkdownEditPage.tsx
index da1f5242e..caa9b7dd6 100644
--- a/src/layouts/EditPage/MarkdownEditPage.tsx
+++ b/src/layouts/EditPage/MarkdownEditPage.tsx
@@ -129,7 +129,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => {
       setEditorContent={(content: string) => setEditorValue(content)}
       shouldDisableSave={isAnyDrawerOpen}
     >
-      <Box w="100%" p="1.25rem">
+      <Box flex="0 0 45vw" p="1.25rem">
         <Flex flexDir="row" bg="gray.100" p="1.38rem" mb="1.38rem">
           <Flex flexDir="column" alignContent="flex-start" mr="1rem">
             <Text textStyle="subhead-1" mb="0.62rem">
@@ -164,8 +164,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => {
       {/* Preview */}
       <PagePreview
         h="calc(100vh - 0.5rem)"
-        w="62.5rem"
-        minW="62.5rem"
+        flex="1 0"
         title={initialPageData?.content?.frontMatter?.title || ""}
         chunk={htmlChunk}
       />
diff --git a/src/layouts/LegacyEditPage.jsx b/src/layouts/LegacyEditPage.jsx
index 51e236430..41a5b3e84 100644
--- a/src/layouts/LegacyEditPage.jsx
+++ b/src/layouts/LegacyEditPage.jsx
@@ -97,7 +97,13 @@ const EditPage = ({ match }) => {
       setEditorContent={setEditorValue}
     >
       {/* Editor */}
-      <Box minW="50%" flexGrow={1} p="1.25rem" maxH="100%" overflowY="scroll">
+      <Box
+        flexGrow={1}
+        p="1.25rem"
+        maxH="100%"
+        overflowY="scroll"
+        flex="0 0 45vw"
+      >
         <MarkdownEditor
           siteName={siteName}
           onChange={(value) => setEditorValue(value)}
@@ -109,7 +115,7 @@ const EditPage = ({ match }) => {
       {/* Preview */}
       <PagePreview
         h="calc(100vh - 160px - 1.25rem)"
-        flex="0 0 62.5rem"
+        flex="1 0"
         pageParams={decodedParams}
         title={pageData?.content?.frontMatter?.title || ""}
         chunk={htmlChunk}

From c765bdeb2138076b81afac3a520a018b3f7b1244 Mon Sep 17 00:00:00 2001
From: Qilu Xie <qilu@open.gov.sg>
Date: Tue, 12 Dec 2023 17:40:10 +0800
Subject: [PATCH 4/6] IS-807 Fixed duplicating issue when setting hyperlink &
 alt text for image in RTE (#1738)

* fixed duplicating issue of setImage method inside image exntension

* added setImageMeta to set image attribute

* restricted input type for setImageMeta
---
 .../ImageBubbleMenu/ImageAltTextPopover.tsx   |  2 +-
 .../ImageBubbleMenu/ImageHyperlinkPopover.tsx |  2 +-
 .../Editor/extensions/Image/Image.ts          | 20 ++++++++++++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx
index c7d011624..3da1b7e4f 100644
--- a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx
@@ -53,7 +53,7 @@ export const ImageAltTextPopover = ({
     editor
       .chain()
       .focus()
-      .setImage({
+      .setImageMeta({
         alt: data.value,
         ...isomerImageAttrs,
       })
diff --git a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx
index ed4e6a6a2..422e252e3 100644
--- a/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx
+++ b/src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx
@@ -57,7 +57,7 @@ export const ImageHyperlinkPopover = ({
     editor
       .chain()
       .focus()
-      .setImage({
+      .setImageMeta({
         href: data.value,
         ...isomerImageAttrs,
       })
diff --git a/src/layouts/components/Editor/extensions/Image/Image.ts b/src/layouts/components/Editor/extensions/Image/Image.ts
index a0c5f2689..308314ed5 100644
--- a/src/layouts/components/Editor/extensions/Image/Image.ts
+++ b/src/layouts/components/Editor/extensions/Image/Image.ts
@@ -11,7 +11,6 @@ interface IsomerImageOptions {
   width?: string
   height?: string
   href?: string
-  style?: string
 }
 
 interface IsomerImageStyle {
@@ -22,6 +21,9 @@ declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     isomerImage: {
       setImage: (options: IsomerImageOptions) => ReturnType
+      setImageMeta: (
+        options: Pick<IsomerImageOptions, "alt" | "href">
+      ) => ReturnType
       deleteImage: () => ReturnType
       setImageStyle: (style: IsomerImageStyle) => ReturnType
     }
@@ -85,6 +87,22 @@ export const IsomerImage = Image.extend({
         return true
       },
 
+      setImageMeta: (options) => ({ tr, dispatch, editor }) => {
+        const { from, to } = tr.selection
+
+        tr.doc.nodesBetween(from, to, (node, pos) => {
+          if (node.type === editor.schema.nodes.image) {
+            tr.setNodeMarkup(pos, null, { ...node.attrs, ...options })
+          }
+        })
+
+        if (dispatch) {
+          tr.scrollIntoView()
+        }
+
+        return true
+      },
+
       deleteImage: () => ({ tr, editor }) => {
         editor.state.selection.replace(tr)
         return true

From 0ad9d915127055c385ed7ee390705be4f3e97d62 Mon Sep 17 00:00:00 2001
From: seaerchin <44049504+seaerchin@users.noreply.github.com>
Date: Tue, 12 Dec 2023 18:34:10 +0800
Subject: [PATCH 5/6] fix(preview): update overflow behaviour (#1742)

---
 src/layouts/EditPage/MarkdownEditPage.tsx | 2 +-
 src/layouts/LegacyEditPage.jsx            | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/layouts/EditPage/MarkdownEditPage.tsx b/src/layouts/EditPage/MarkdownEditPage.tsx
index caa9b7dd6..ee059671f 100644
--- a/src/layouts/EditPage/MarkdownEditPage.tsx
+++ b/src/layouts/EditPage/MarkdownEditPage.tsx
@@ -129,7 +129,7 @@ export const MarkdownEditPage = ({ togglePreview }: MarkdownPageProps) => {
       setEditorContent={(content: string) => setEditorValue(content)}
       shouldDisableSave={isAnyDrawerOpen}
     >
-      <Box flex="0 0 45vw" p="1.25rem">
+      <Box flex="0 0 45vw" p="1.25rem" overflow="auto">
         <Flex flexDir="row" bg="gray.100" p="1.38rem" mb="1.38rem">
           <Flex flexDir="column" alignContent="flex-start" mr="1rem">
             <Text textStyle="subhead-1" mb="0.62rem">
diff --git a/src/layouts/LegacyEditPage.jsx b/src/layouts/LegacyEditPage.jsx
index 41a5b3e84..5f25d50fc 100644
--- a/src/layouts/LegacyEditPage.jsx
+++ b/src/layouts/LegacyEditPage.jsx
@@ -97,13 +97,7 @@ const EditPage = ({ match }) => {
       setEditorContent={setEditorValue}
     >
       {/* Editor */}
-      <Box
-        flexGrow={1}
-        p="1.25rem"
-        maxH="100%"
-        overflowY="scroll"
-        flex="0 0 45vw"
-      >
+      <Box p="1.25rem" maxH="100%" overflowY="scroll" flex="0 0 45vw">
         <MarkdownEditor
           siteName={siteName}
           onChange={(value) => setEditorValue(value)}

From 9527102b33ab90b4e0488ad2b6d8fb245aa7f2e4 Mon Sep 17 00:00:00 2001
From: Hsu Zhong Jun <27919917+dcshzj@users.noreply.github.com>
Date: Tue, 12 Dec 2023 18:35:35 +0800
Subject: [PATCH 6/6] 0.64.0

---
 CHANGELOG.md      | 13 +++++++++++++
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 269366950..d1f55d155 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,8 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.64.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.2...v0.64.0)
+
+- fix(preview): update overflow behaviour [`#1742`](https://github.com/isomerpages/isomercms-frontend/pull/1742)
+- IS-807 Fixed duplicating issue when setting hyperlink & alt text for image in RTE [`#1738`](https://github.com/isomerpages/isomercms-frontend/pull/1738)
+- refactor(legacy/markdown-editpae): update width [`#1739`](https://github.com/isomerpages/isomercms-frontend/pull/1739)
+- IS-712 Fixed image resizing issue in RTE [`#1736`](https://github.com/isomerpages/isomercms-frontend/pull/1736)
+- chore(sidebar): update link to issue reporting form [`#1737`](https://github.com/isomerpages/isomercms-frontend/pull/1737)
+- Hotfix/v0.63.2 [`#1734`](https://github.com/isomerpages/isomercms-frontend/pull/1734)
+- hotfix/v0.63.1 [`#1732`](https://github.com/isomerpages/isomercms-frontend/pull/1732)
+- release(0.63.0): merge to develop [`#1725`](https://github.com/isomerpages/isomercms-frontend/pull/1725)
+
 #### [v0.63.2](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.1...v0.63.2)
 
+> 6 December 2023
+
 - fix(legacyeditpage): more style fix [`2e578a2`](https://github.com/isomerpages/isomercms-frontend/commit/2e578a26456679302169a0184fa84268a296b4bb)
 
 #### [v0.63.1](https://github.com/isomerpages/isomercms-frontend/compare/v0.63.0...v0.63.1)
diff --git a/package-lock.json b/package-lock.json
index 19d3475cd..464669af8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.63.2",
+  "version": "0.64.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "isomercms-frontend",
-      "version": "0.63.2",
+      "version": "0.64.0",
       "hasInstallScript": true,
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
diff --git a/package.json b/package.json
index c37833d3a..02a0269ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.63.2",
+  "version": "0.64.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"