Release/0.64.0

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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.63.2",
+  "version": "0.64.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"

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"
         >

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" 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">
@@ -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}
       />

src/layouts/LegacyEditPage.jsx

@@ -97,7 +97,7 @@ const EditPage = ({ match }) => {
       setEditorContent={setEditorValue}
     >
       {/* Editor */}
-      <Box minW="50%" flexGrow={1} p="1.25rem" maxH="100%" overflowY="scroll">
+      <Box p="1.25rem" maxH="100%" overflowY="scroll" flex="0 0 45vw">
         <MarkdownEditor
           siteName={siteName}
           onChange={(value) => setEditorValue(value)}
@@ -109,7 +109,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}

src/layouts/components/Editor/components/ImageBubbleMenu/ImageAltTextPopover.tsx

@@ -53,7 +53,7 @@ export const ImageAltTextPopover = ({
     editor
       .chain()
       .focus()
-      .setImage({
+      .setImageMeta({
         alt: data.value,
         ...isomerImageAttrs,
       })

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

src/layouts/components/Editor/components/ImageBubbleMenu/ImageHyperlinkPopover.tsx

@@ -57,7 +57,7 @@ export const ImageHyperlinkPopover = ({
     editor
       .chain()
       .focus()
-      .setImage({
+      .setImageMeta({
         href: data.value,
         ...isomerImageAttrs,
       })

src/layouts/components/Editor/components/ImageBubbleMenu/ResizeImagePopover.tsx

@@ -56,39 +56,35 @@ 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()
   }
 
   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}>

src/layouts/components/Editor/extensions/Image/Image.ts

@@ -13,11 +13,19 @@ interface IsomerImageOptions {
   href?: string
 }
 
+interface IsomerImageStyle {
+  width?: number
+}
+
 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
     }
   }
 }
@@ -40,6 +48,9 @@ export const IsomerImage = Image.extend({
       height: {
         default: "auto",
       },
+      style: {
+        default: "width: 100%",
+      },
       href: {
         default: null,
         parseHTML: (element) =>
@@ -76,10 +87,56 @@ 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
       },
+
+      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
+      },
     }
   },