0.60.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.60.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.59.0...v0.60.0)
+
+- fix(input): empty input validation [`#1691`](https://github.com/isomerpages/isomercms-frontend/pull/1691)
+- is-714/chore: add copy and layout changes [`#1687`](https://github.com/isomerpages/isomercms-frontend/pull/1687)
+- IS-780 fix(height): fix editor + preview heights [`#1686`](https://github.com/isomerpages/isomercms-frontend/pull/1686)
+- IS-782-Editor-File-text-always-comes-out-as-file-regardless-of-text [`#1685`](https://github.com/isomerpages/isomercms-frontend/pull/1685)
+- feat(rte): use proper node for FormSG embed [`#1682`](https://github.com/isomerpages/isomercms-frontend/pull/1682)
+- feat(tiptap): update icon options and use boxicons [`#1683`](https://github.com/isomerpages/isomercms-frontend/pull/1683)
+- fix(media): bring the user back to the select media modal screen after upload [`#1684`](https://github.com/isomerpages/isomercms-frontend/pull/1684)
+- 0.59.0 [`#1680`](https://github.com/isomerpages/isomercms-frontend/pull/1680)
+
 #### [v0.59.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.58.0...v0.59.0)
 
+> 16 November 2023
+
 - feat(tiptap): allow inserting of embed code using a modal [`#1658`](https://github.com/isomerpages/isomercms-frontend/pull/1658)
 - feat(tiptap): rm redundant logos [`#1679`](https://github.com/isomerpages/isomercms-frontend/pull/1679)
 - Fix/is 689 reuse image/album tiles [`#1678`](https://github.com/isomerpages/isomercms-frontend/pull/1678)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -41,6 +41,7 @@
     "@tiptap/extension-table-row": "^2.1.12",
     "@tiptap/extension-task-item": "^2.1.12",
     "@tiptap/extension-task-list": "^2.1.12",
+    "@tiptap/extension-underline": "^2.1.12",
     "@tiptap/pm": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",

src/assets/icons/BxAddColLeft.tsx

@@ -0,0 +1,28 @@
+export const BxAddColLeft = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M15 23V1H23V23H15Z" stroke="#2C2E34" strokeWidth="1.5" />
+      <path
+        d="M7.00004 7.84619C4.70961 7.84619 2.84619 9.70961 2.84619 12C2.84619 14.2905 4.70961 16.1539 7.00004 16.1539C9.29047 16.1539 11.1539 14.2905 11.1539 12C11.1539 9.70961 9.29047 7.84619 7.00004 7.84619Z"
+        fill="white"
+      />
+      <path
+        d="M7.5 9.5H6.5V11.5H4.5V12.5H6.5V14.5H7.5V12.5H9.5V11.5H7.5V9.5Z"
+        fill="#2C2E34"
+      />
+      <path
+        d="M7 7C4.243 7 2 9.243 2 12C2 14.757 4.243 17 7 17C9.757 17 12 14.757 12 12C12 9.243 9.757 7 7 7ZM7 16C4.7945 16 3 14.2055 3 12C3 9.7945 4.7945 8 7 8C9.2055 8 11 9.7945 11 12C11 14.2055 9.2055 16 7 16Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+}

src/assets/icons/BxAddColRight.tsx

@@ -0,0 +1,28 @@
+export const BxAddColRight = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M1 23V1H9V23H1Z" stroke="#2C2E34" strokeWidth="1.5" />
+      <path
+        d="M17 7.84619C14.7096 7.84619 12.8462 9.70961 12.8462 12C12.8462 14.2905 14.7096 16.1539 17 16.1539C19.2905 16.1539 21.1539 14.2905 21.1539 12C21.1539 9.70961 19.2905 7.84619 17 7.84619Z"
+        fill="white"
+      />
+      <path
+        d="M17.5 9.5H16.5V11.5H14.5V12.5H16.5V14.5H17.5V12.5H19.5V11.5H17.5V9.5Z"
+        fill="#2C2E34"
+      />
+      <path
+        d="M17 7C14.243 7 12 9.243 12 12C12 14.757 14.243 17 17 17C19.757 17 22 14.757 22 12C22 9.243 19.757 7 17 7ZM17 16C14.7945 16 13 14.2055 13 12C13 9.7945 14.7945 8 17 8C19.2055 8 21 9.7945 21 12C21 14.2055 19.2055 16 17 16Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+}

src/assets/icons/BxAddRowAbove.tsx

@@ -0,0 +1,28 @@
+export const BxAddRowAbove = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M23 23H1L1 15L23 15V23Z" stroke="#2C2E34" strokeWidth="1.5" />
+      <path
+        d="M12 2.84619C9.70961 2.84619 7.84619 4.70961 7.84619 7.00004C7.84619 9.29047 9.70961 11.1539 12 11.1539C14.2905 11.1539 16.1539 9.29047 16.1539 7.00004C16.1539 4.70961 14.2905 2.84619 12 2.84619Z"
+        fill="white"
+      />
+      <path
+        d="M12.5 4.5H11.5V6.5H9.5V7.5H11.5V9.5H12.5V7.5H14.5V6.5H12.5V4.5Z"
+        fill="#2C2E34"
+      />
+      <path
+        d="M12 2C9.243 2 7 4.243 7 7C7 9.757 9.243 12 12 12C14.757 12 17 9.757 17 7C17 4.243 14.757 2 12 2ZM12 11C9.7945 11 8 9.2055 8 7C8 4.7945 9.7945 3 12 3C14.2055 3 16 4.7945 16 7C16 9.2055 14.2055 11 12 11Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+}

src/assets/icons/BxAddRowBelow.tsx

@@ -0,0 +1,28 @@
+export const BxAddRowBelow = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M23 9L1 9L1 1L23 1V9Z" stroke="#2C2E34" strokeWidth="1.5" />
+      <path
+        d="M7.84619 18C7.84619 20.2904 9.70961 22.1538 12 22.1538C14.2905 22.1538 16.1539 20.2904 16.1539 18C16.1539 15.7095 14.2905 13.8461 12 13.8461C9.70961 13.8461 7.84619 15.7095 7.84619 18Z"
+        fill="white"
+      />
+      <path
+        d="M9.5 17.5V18.5H11.5V20.5H12.5V18.5H14.5V17.5H12.5V15.5H11.5V17.5H9.5Z"
+        fill="#2C2E34"
+      />
+      <path
+        d="M7 18C7 20.757 9.243 23 12 23C14.757 23 17 20.757 17 18C17 15.243 14.757 13 12 13C9.243 13 7 15.243 7 18ZM16 18C16 20.2055 14.2055 22 12 22C9.7945 22 8 20.2055 8 18C8 15.7945 9.7945 14 12 14C14.2055 14 16 15.7945 16 18Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+}

src/assets/icons/BxDelCol.tsx

@@ -0,0 +1,18 @@
+export const BxDelCol = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M2 23V1H10V23H2Z" stroke="#2C2E34" strokeWidth="1.5" />
+      <path
+        d="M19.4453 4.70068L16.9702 7.17518L14.4957 4.70068L13.6709 5.52552L16.1454 8.00002L13.6709 10.4745L14.4957 11.2994L16.9702 8.82485L19.4453 11.2994L20.2701 10.4745L17.7956 8.00002L20.2701 5.52552L19.4453 4.70068Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+}

src/assets/icons/BxDelRow.tsx

@@ -0,0 +1,18 @@
+export const BxDelRow = (props: React.SVGProps<SVGSVGElement>): JSX.Element => {
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M1 4L23 4V12L1 12V4Z" stroke="#2C2E34" strokeWidth="1.5" />
+      <path
+        d="M18.4453 14.7007L15.9702 17.1752L13.4957 14.7007L12.6709 15.5255L15.1454 18L12.6709 20.4745L13.4957 21.2994L15.9702 18.8249L18.4453 21.2994L19.2701 20.4745L16.7956 18L19.2701 15.5255L18.4453 14.7007Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+}

src/assets/icons/index.ts

@@ -19,3 +19,9 @@ export * from "./BxDraggable"
 export * from "./BxDraggableVertical"
 export * from "./BxGrayTranslucent"
 export * from "./BxErrorSolid"
+export * from "./BxAddColLeft"
+export * from "./BxAddColRight"
+export * from "./BxAddRowAbove"
+export * from "./BxAddRowBelow"
+export * from "./BxDelCol"
+export * from "./BxDelRow"

src/components/EditorEmbedModal/EditorEmbedModal.tsx

@@ -54,9 +54,6 @@ export const EditorEmbedModal = ({
       url.href = postUrl || ""
       const code = `<iframe src="https://${url.host}${url.pathname}embed/" frameborder="0" allowfullscreen="true" width="320" height="440"></iframe>`
       onProceed({ value: code })
-    } else if ($('iframe[src^="https://form.gov.sg"]').length > 0) {
-      // We only want to keep the <iframe> part, the rest is filled in by Tiptap
-      onProceed({ value: $('iframe[src^="https://form.gov.sg"]').toString() })
     } else {
       onProceed(embedCode)
     }
@@ -94,6 +91,7 @@ export const EditorEmbedModal = ({
         "value",
         cursorValue
           .replace('<div class="iframe-wrapper">', "")
+          .replace('<div class="formsg-wrapper">', "")
           // Remove the closing div tag
           .slice(0, -6)
       )

src/components/MediaCreationModal/MediaCreationModal.tsx

@@ -159,13 +159,14 @@ interface MediaUploadSuccessDropzoneProps {
   numMedia: number
   errorMessages: string[]
   mediaType: MediaFolderTypes
+  onProceed: () => void
 }
 const MediaUploadSuccessDropzone = ({
   numMedia,
   errorMessages,
   mediaType,
+  onProceed,
 }: MediaUploadSuccessDropzoneProps) => {
-  const { onClose } = useModalContext()
   const {
     singularMediaLabel,
     pluralMediaLabel,
@@ -220,7 +221,7 @@ const MediaUploadSuccessDropzone = ({
         )}
       </ModalBody>
       <ModalFooter>
-        <Button onClick={onClose}>Return to {singularDirectoryLabel}</Button>
+        <Button onClick={onProceed}>Return to {singularDirectoryLabel}</Button>
       </ModalFooter>
     </>
   )
@@ -281,6 +282,7 @@ const MediaUploadFailedDropzone = ({
 
 interface MediaCreationModalProps {
   onClose: () => void
+  onProceed: () => void
   variant: MediaFolderTypes
 }
 
@@ -295,6 +297,7 @@ interface MediaCreationRouteParams
 
 export const MediaCreationModal = ({
   onClose,
+  onProceed,
   variant,
 }: MediaCreationModalProps) => {
   const { onClose: onModalClose } = useDisclosure()
@@ -368,6 +371,7 @@ export const MediaCreationModal = ({
             numMedia={numCreated}
             errorMessages={errorMessages}
             mediaType={variant}
+            onProceed={onProceed}
           />
         )}
         {curStep === "failed" && (

src/components/media/MediaModal.jsx

@@ -9,8 +9,6 @@ import { MediaAltText } from "components/media/MediaAltText"
 import MediasSelectModal from "components/media/MediasSelectModal"
 import { MediaCreationModal } from "components/MediaCreationModal/MediaCreationModal"
 
-import { useCreateMediaHook } from "hooks/mediaHooks/useCreateMediaHook"
-
 import { getMediaDirectoryName } from "utils"
 
 const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
@@ -36,8 +34,6 @@ const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
     mediaDirectoryName: type,
   })
 
-  const { mutateAsync: createHandler } = useCreateMediaHook(queryParams)
-
   const retrieveMediaDirectoryParams = () =>
     `/${getMediaDirectoryName(queryParams.mediaDirectoryName, {
       joinOn: "/",
@@ -64,18 +60,8 @@ const MediaModal = ({ onClose, onProceed, type, showAltTextModal = false }) => {
         <MediaCreationModal
           params={queryParams}
           variant={queryParams.mediaRoom}
-          onProceed={async ({ data }) => {
-            await createHandler({ data })
-            onMediaSelect({ ...data, mediaUrl: data.content })
-            if (showAltTextModal) setMediaMode("details")
-            else
-              onProceed({
-                selectedMediaPath: `${retrieveMediaDirectoryParams()}/${
-                  data.name
-                }`,
-              })
-          }}
-          onClose={onClose}
+          onProceed={() => setMediaMode("select")}
+          onClose={() => setMediaMode("select")}
         />
       )
     }

src/constants/tiptap.ts

@@ -0,0 +1 @@
+export const TIPTAP_FORMSG_NODE_PRIORITY = 300