feat(editor): change some user flows to fit existing flows (#1624)

* fix(images): fix image maxW to 50%

* refactor(menubar): change link button impl to open modal

* refactor(editor-modals): update hypertext and file modal behaviour

* fix(editpage): add double quotes

* refactor(types): extract page variant to type

src/components/HyperlinkModal.jsx

@@ -1,12 +1,22 @@
-import { CloseButton, VStack, Box, Button, Flex } from "@chakra-ui/react"
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  Box,
+  VStack,
+  Button,
+  Text,
+} from "@chakra-ui/react"
+import { ModalCloseButton } from "@opengovsg/design-system-react"
 import axios from "axios"
 import PropTypes from "prop-types"
 import { useState } from "react"
 
 import FormField from "components/FormField"
 
-import elementStyles from "styles/isomer-cms/Elements.module.scss"
-
 import FormContext from "./Form/FormContext"
 import FormTitle from "./Form/FormTitle"
 
@@ -18,45 +28,44 @@ const HyperlinkModal = ({ onSave, initialText, onClose }) => {
   const [link, setLink] = useState("")
 
   return (
-    <>
-      <div className={elementStyles.overlay}>
-        <div className={elementStyles["modal-settings"]}>
-          <div className={elementStyles.modalHeader}>
-            <h1>Insert hyperlink</h1>
-            <CloseButton onClick={onClose} />
-          </div>
-          <div className={elementStyles.modalContent}>
-            <div>
-              <FormContext isRequired>
-                <VStack display="block">
-                  <Box>
-                    <FormTitle>Text</FormTitle>
-                    <FormField
-                      placeholder="Text"
-                      id="text"
-                      value={text}
-                      onChange={(event) => setText(event.target.value)}
-                    />
-                  </Box>
-                  <Box>
-                    <FormTitle>Link</FormTitle>
-                    <FormField
-                      placeholder="Link"
-                      id="link"
-                      value={link}
-                      onChange={(event) => setLink(event.target.value)}
-                    />
-                  </Box>
-                  <Flex justifyContent="end">
-                    <Button onClick={() => onSave(text, link)}>Save</Button>
-                  </Flex>
-                </VStack>
-              </FormContext>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <Text textStyle="h3" textColor="brand.primary.500">
+            Insert hyperlink
+          </Text>
+          <ModalCloseButton onClick={onClose} />
+        </ModalHeader>
+        <ModalBody>
+          <FormContext isRequired>
+            <VStack w="100%" spacing="1rem">
+              <Box w="100%">
+                <FormTitle>Text</FormTitle>
+                <FormField
+                  placeholder="Text"
+                  id="text"
+                  value={text}
+                  onChange={(event) => setText(event.target.value)}
+                />
+              </Box>
+              <Box w="100%">
+                <FormTitle>Link</FormTitle>
+                <FormField
+                  placeholder="Link"
+                  id="link"
+                  value={link}
+                  onChange={(event) => setLink(event.target.value)}
+                />
+              </Box>
+            </VStack>
+          </FormContext>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={() => onSave(text, link)}>Save</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   )
 }
 

src/components/PageSettingsModal/PageSettingsModal.tsx

@@ -38,6 +38,7 @@ import { LoadingButton } from "components/LoadingButton"
 
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
+import { PageVariant } from "types/pages"
 import { getDefaultFrontMatter, pageFileNameToTitle } from "utils"
 
 import { PageSettingsSchema } from "./PageSettingsSchema"
@@ -56,7 +57,7 @@ interface PageFrontMatter {
   third_nav_title?: string
   description?: string
   image?: string
-  variant: "tiptap" | "markdown"
+  variant: PageVariant
 }
 
 interface PageParams {

src/components/PageSettingsModal/ResourcePageSettingsModal.tsx

@@ -44,6 +44,7 @@ import { LoadingButton } from "components/LoadingButton"
 
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
+import { PageVariant } from "types/pages"
 import { pageFileNameToTitle } from "utils"
 
 import { PageSettingsSchema } from "./PageSettingsSchema"
@@ -65,7 +66,7 @@ interface ResourcePageFrontMatter {
   external?: string
   description?: string
   image?: string
-  variant: "tiptap" | "markdown"
+  variant: PageVariant
 }
 
 interface ResourcePageParams {

src/contexts/EditorModalContext.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, createContext, useContext } from "react"
 
 interface EditorModalContextProps {
-  showModal: (modalVariant: "images" | "files") => void
+  showModal: (modalVariant: "images" | "files" | "hyperlink") => void
 }
 
 const EditorModalContext = createContext<null | EditorModalContextProps>(null)

src/layouts/EditPage/EditPage.tsx

@@ -17,6 +17,7 @@ import { Context, useContext, useEffect, useState } from "react"
 import { useParams } from "react-router-dom"
 import { Markdown } from "tiptap-markdown"
 
+import HyperlinkModal from "components/HyperlinkModal"
 import MediaModal from "components/media/MediaModal"
 
 import { EditorContextProvider } from "contexts/EditorContext"
@@ -85,6 +86,12 @@ export const EditPage = () => {
     onClose: onMediaModalClose,
   } = useDisclosure()
 
+  const {
+    isOpen: isHyperlinkModalOpen,
+    onOpen: onHyperlinkModalOpen,
+    onClose: onHyperlinkModalClose,
+  } = useDisclosure()
+
   const { siteName } = decodedParams
 
   const { mediaService } = useContext<{ mediaService: MediaService }>(
@@ -106,10 +113,30 @@ export const EditPage = () => {
     <EditorContextProvider editor={editor}>
       <EditorModalContextProvider
         showModal={(modalType) => {
-          setMediaType(modalType)
-          onMediaModalOpen()
+          if (modalType === "hyperlink") {
+            onHyperlinkModalOpen()
+          } else {
+            setMediaType(modalType)
+            onMediaModalOpen()
+          }
         }}
       >
+        {isHyperlinkModalOpen && (
+          <HyperlinkModal
+            initialText=""
+            onSave={(text, href) => {
+              editor
+                .chain()
+                .focus()
+                .insertContent(
+                  `<a target="_blank" rel="noopener noreferrer nofollow" href="${href}">${text}</a>`
+                )
+                .run()
+              onHyperlinkModalClose()
+            }}
+            onClose={onHyperlinkModalClose}
+          />
+        )}
         {isMediaModalOpen && (
           <MediaModal
             onClose={onMediaModalClose}
@@ -118,16 +145,25 @@ export const EditPage = () => {
               if (mediaType === "images") {
                 const { mediaUrl } = await getImageSrc(selectedMediaPath)
                 editor
-                  ?.chain()
+                  .chain()
                   .focus()
                   .setImage({
                     src: mediaUrl,
                     alt: altText,
                   })
                   .run()
-              } else {
+                // NOTE: If it's a file and there's no selection made, just add a link with default text
+              } else if (editor.state.selection.empty)
+                editor
+                  .chain()
+                  .focus()
+                  .insertContent(
+                    `<a target="_blank" rel="noopener noreferrer nofollow" href="${selectedMediaPath}">file</a>`
+                  )
+                  .run()
+              else {
                 editor
-                  ?.chain()
+                  .chain()
                   .focus()
                   .setLink({ href: selectedMediaPath })
                   .run()

src/layouts/EditPage/EditPageLayout.tsx

@@ -12,11 +12,12 @@ import useRedirectHook from "hooks/useRedirectHook"
 
 import { isWriteActionsDisabled } from "utils/reviewRequests"
 
+import { PageVariant } from "types/pages"
 import { createPageStyleSheet, getDecodedParams } from "utils"
 
 interface EditPageLayoutProps {
   getPageBody: () => string
-  variant: "markdown" | "tiptap"
+  variant: PageVariant
 }
 
 export const EditPageLayout = ({

src/layouts/components/Editor/components/LinkBubbleMenu.tsx

@@ -80,12 +80,16 @@ const LinkButton = () => {
               colorScheme="blue"
               mr={3}
               onClick={() => {
-                editor
-                  .chain()
-                  .focus()
-                  // NOTE: Force `https` by default
-                  .setLink({ href })
-                  .run()
+                if (href) {
+                  editor
+                    .chain()
+                    .focus()
+                    // NOTE: Force `https` by default
+                    .setLink({ href })
+                    .run()
+                } else {
+                  editor.chain().focus().unsetLink().run()
+                }
                 onClose()
               }}
             >

src/layouts/components/Editor/components/MenuBar.tsx

@@ -145,7 +145,11 @@ export const MenuBar = ({ editor }: { editor: Editor }) => {
     {
       icon: "links-line",
       title: "Add link",
-      isActive: () => editor.isActive("link"),
+      action: () => showModal("hyperlink"),
+    },
+    {
+      icon: "link-unlink",
+      title: "Remove link",
       action: () => editor.chain().focus().unsetLink().run(),
     },
     {

src/layouts/components/Editor/styles.scss

@@ -125,7 +125,7 @@
 
   img {
     height: auto;
-    max-width: 100%;
+    max-width: 50%;
   }
 
   hr {

src/types/pages.ts

@@ -6,3 +6,5 @@ export interface UnlinkedPageDto {
     pageBody: string
   }
 }
+
+export type PageVariant = "tiptap" | "markdown"