release(v0.63.0): merge to production

.github/workflows/ci.yml

@@ -10,6 +10,8 @@ jobs:
     # NOTE: Netlify uses ubuntu 16.08 but Github Actions does not offer it by default.
     # Hence, we default to the latest version.
     runs-on: ubuntu-latest
+    env:
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
@@ -32,6 +34,8 @@ jobs:
   lint:
     needs: install
     runs-on: ubuntu-latest
+    env:
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
@@ -56,6 +60,7 @@ jobs:
     needs: lint
     runs-on: ubuntu-latest
     env:
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
       CI: false
     steps:
       - uses: actions/checkout@v3
@@ -88,6 +93,7 @@ jobs:
       USERNAME: ${{secrets.USERNAME}}
       PERSONAL_ACCESS_TOKEN: ${{secrets.PERSONAL_ACCESS_TOKEN}}
       E2E_COMMIT_HASH: ${{secrets.E2E_COMMIT_HASH}}
+      TIPTAP_PRO_TOKEN: ${{secrets.TIPTAP_PRO_TOKEN}}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js

.npmrc

@@ -1 +1,3 @@
 legacy-peer-deps=true
+@tiptap-pro:registry=https://registry.tiptap.dev/
+//registry.tiptap.dev/:_authToken=${TIPTAP_PRO_TOKEN}

CHANGELOG.md

@@ -4,8 +4,34 @@ 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.63.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.62.0...v0.63.0)
+
+- fix(embed-views): add a max width [`#1729`](https://github.com/isomerpages/isomercms-frontend/pull/1729)
+- fix(blockwrapper): remove padding [`#1728`](https://github.com/isomerpages/isomercms-frontend/pull/1728)
+- feat(editor): enhance image bubble menu with more functions [`#1721`](https://github.com/isomerpages/isomercms-frontend/pull/1721)
+- feat(editor): feature flag complex blocks [`#1720`](https://github.com/isomerpages/isomercms-frontend/pull/1720)
+- fix(tables): update table behaviour [`#1722`](https://github.com/isomerpages/isomercms-frontend/pull/1722)
+- refactor(tiptap): change embeds view [`#1723`](https://github.com/isomerpages/isomercms-frontend/pull/1723)
+- refactor(tiptap): add placeholder instead of prefill [`#1724`](https://github.com/isomerpages/isomercms-frontend/pull/1724)
+- feat(tiptap): add outline blocks  [`#1718`](https://github.com/isomerpages/isomercms-frontend/pull/1718)
+- feat_background_toggling [`#1713`](https://github.com/isomerpages/isomercms-frontend/pull/1713)
+- feat: basic accordion block [`#1709`](https://github.com/isomerpages/isomercms-frontend/pull/1709)
+- Feat/select media modal for external media [`#1714`](https://github.com/isomerpages/isomercms-frontend/pull/1714)
+- fix(markdowneditpage): fix styling on big screens (1920+) [`#1719`](https://github.com/isomerpages/isomercms-frontend/pull/1719)
+- fix(editor): improve embed functionality [`#1717`](https://github.com/isomerpages/isomercms-frontend/pull/1717)
+- feat(editor): add trailing node at end of document [`#1716`](https://github.com/isomerpages/isomercms-frontend/pull/1716)
+- feat(cards): render preview the same way as template [`#1707`](https://github.com/isomerpages/isomercms-frontend/pull/1707)
+- feat(cards): support undo/redo of cards editing [`#1706`](https://github.com/isomerpages/isomercms-frontend/pull/1706)
+- feat(cards): allow editing of cards within drawer [`#1705`](https://github.com/isomerpages/isomercms-frontend/pull/1705)
+- feat(cards): introduce drawer to support sub-editing [`#1704`](https://github.com/isomerpages/isomercms-frontend/pull/1704)
+- feat(tiptap): add card grid block [`#1701`](https://github.com/isomerpages/isomercms-frontend/pull/1701)
+- feat(tiptap): allow inserting of complex blocks [`#1697`](https://github.com/isomerpages/isomercms-frontend/pull/1697)
+- 0.62.0 to develop [`#1710`](https://github.com/isomerpages/isomercms-frontend/pull/1710)
+
 #### [v0.62.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.61.0...v0.62.0)
 
+> 28 November 2023
+
 - fix(media): fix logic for disabling button in create media folder modal [`#1712`](https://github.com/isomerpages/isomercms-frontend/pull/1712)
 - Chore/update regex [`#1703`](https://github.com/isomerpages/isomercms-frontend/pull/1703)
 - fix(media): allow creating folders in empty folder [`#1702`](https://github.com/isomerpages/isomercms-frontend/pull/1702)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.62.0",
+  "version": "0.63.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -26,6 +26,9 @@
     "@sentry/react": "^7.12.1",
     "@sentry/tracing": "^7.12.1",
     "@tanstack/react-table": "^8.5.13",
+    "@tiptap-pro/extension-details": "^2.5.0",
+    "@tiptap-pro/extension-details-content": "^2.5.0",
+    "@tiptap-pro/extension-details-summary": "^2.5.0",
     "@tiptap/core": "^2.1.12",
     "@tiptap/extension-bubble-menu": "^2.1.12",
     "@tiptap/extension-character-count": "^2.1.12",

src/assets/images/EditorAccordionImage.tsx

@@ -0,0 +1,31 @@
+export const EditorAccordionImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="48" height="48" fill="white" />
+      <rect x="5" y="7" width="38" height="8" fill="#E8E8E8" />
+      <rect x="5" y="24" width="38" height="8" fill="#E8E8E8" />
+      <rect x="5" y="34" width="38" height="8" fill="#E8E8E8" />
+      <path
+        d="M37.0977 11.431L37.569 11.9024L39 10.4714L40.431 11.9024L40.9023 11.431L39 9.52869L37.0977 11.431Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M40.9023 27.569L40.431 27.0976L39 28.5286L37.569 27.0976L37.0977 27.569L39 29.4713L40.9023 27.569Z"
+        fill="#666C7A"
+      />
+      <path
+        d="M40.9023 37.569L40.431 37.0976L39 38.5286L37.569 37.0976L37.0977 37.569L39 39.4713L40.9023 37.569Z"
+        fill="#666C7A"
+      />
+    </svg>
+  )
+}

src/assets/images/EditorCardsImage.tsx

@@ -0,0 +1,22 @@
+export const EditorCardsImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="48" height="48" fill="white" />
+      <rect x="4" y="15" width="12" height="8" fill="#E8E8E8" />
+      <rect x="18" y="15" width="12" height="8" fill="#E8E8E8" />
+      <rect x="32" y="15" width="12" height="8" fill="#E8E8E8" />
+      <rect x="4" y="25" width="12" height="8" fill="#E8E8E8" />
+      <rect x="18" y="25" width="12" height="8" fill="#E8E8E8" />
+      <rect x="32" y="25" width="12" height="8" fill="#E8E8E8" />
+    </svg>
+  )
+}

src/assets/images/EditorCardsPlaceholderImage.tsx

@@ -0,0 +1,128 @@
+export const EditorCardsPlaceholderImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      viewBox="0 0 591 200"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="591" height="200" fill="#F8F9F9" />
+      <line
+        x1="237.666"
+        y1="120.145"
+        x2="256.149"
+        y2="120.145"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <line
+        x1="234.817"
+        y1="114.583"
+        x2="258.987"
+        y2="114.583"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <path d="M233.398 106.715H260.412" stroke="#A0A0A0" strokeWidth="2" />
+      <rect
+        x="225.368"
+        y="70.5"
+        width="43.0748"
+        height="59"
+        rx="3.5"
+        stroke="#D9D9D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M224.868 74V99.2683H268.943V74C268.943 71.7909 267.152 70 264.943 70H228.868C226.659 70 224.868 71.7909 224.868 74Z"
+        fill="#D9D9D9"
+        fillOpacity="0.35"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M239.086 92.683H257.095L249.591 81.8699L245.089 88.0488L243.588 86.5041L239.086 92.683ZM241.246 82.736C241.668 83.1705 242.241 83.4147 242.838 83.4147C243.435 83.4147 244.007 83.1705 244.43 82.736C244.852 82.3015 245.089 81.7121 245.089 81.0976C245.089 80.4831 244.852 79.8937 244.43 79.4592C244.007 79.0246 243.435 78.7805 242.838 78.7805C242.241 78.7805 241.668 79.0246 241.246 79.4592C240.824 79.8937 240.587 80.4831 240.587 81.0976C240.587 81.7121 240.824 82.3015 241.246 82.736Z"
+        fill="#A0A0A0"
+      />
+      <line
+        x1="286.741"
+        y1="120.145"
+        x2="305.224"
+        y2="120.145"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <line
+        x1="283.893"
+        y1="114.583"
+        x2="308.063"
+        y2="114.583"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <path d="M282.474 106.715H309.487" stroke="#A0A0A0" strokeWidth="2" />
+      <rect
+        x="274.443"
+        y="70.5"
+        width="43.0748"
+        height="59"
+        rx="3.5"
+        stroke="#D9D9D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M273.943 74V99.2683H318.018V74C318.018 71.7909 316.227 70 314.018 70H277.943C275.734 70 273.943 71.7909 273.943 74Z"
+        fill="#D9D9D9"
+        fillOpacity="0.35"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M288.161 92.683H306.17L298.666 81.8699L294.164 88.0488L292.663 86.5041L288.161 92.683ZM290.321 82.736C290.743 83.1705 291.316 83.4147 291.913 83.4147C292.51 83.4147 293.083 83.1705 293.505 82.736C293.927 82.3015 294.164 81.7121 294.164 81.0976C294.164 80.4831 293.927 79.8937 293.505 79.4592C293.083 79.0246 292.51 78.7805 291.913 78.7805C291.316 78.7805 290.743 79.0246 290.321 79.4592C289.899 79.8937 289.662 80.4831 289.662 81.0976C289.662 81.7121 289.899 82.3015 290.321 82.736Z"
+        fill="#A0A0A0"
+      />
+      <line
+        x1="335.815"
+        y1="120.145"
+        x2="354.298"
+        y2="120.145"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <line
+        x1="332.967"
+        y1="114.583"
+        x2="357.137"
+        y2="114.583"
+        stroke="#D9D9D9"
+        strokeWidth="1.5"
+      />
+      <path d="M331.548 106.715H358.561" stroke="#A0A0A0" strokeWidth="2" />
+      <rect
+        x="323.518"
+        y="70.5"
+        width="43.0748"
+        height="59"
+        rx="3.5"
+        stroke="#D9D9D9"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M323.018 74V99.2683H367.092V74C367.092 71.7909 365.302 70 363.092 70H327.018C324.808 70 323.018 71.7909 323.018 74Z"
+        fill="#D9D9D9"
+        fillOpacity="0.35"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M337.235 92.683H355.244L347.741 81.8699L343.238 88.0488L341.738 86.5041L337.235 92.683ZM339.395 82.736C339.818 83.1705 340.39 83.4147 340.987 83.4147C341.584 83.4147 342.157 83.1705 342.579 82.736C343.001 82.3015 343.238 81.7121 343.238 81.0976C343.238 80.4831 343.001 79.8937 342.579 79.4592C342.157 79.0246 341.584 78.7805 340.987 78.7805C340.39 78.7805 339.818 79.0246 339.395 79.4592C338.973 79.8937 338.736 80.4831 338.736 81.0976C338.736 81.7121 338.973 82.3015 339.395 82.736Z"
+        fill="#A0A0A0"
+      />
+    </svg>
+  )
+}

src/assets/images/EditorDividerImage.tsx

@@ -0,0 +1,17 @@
+export const EditorDividerImage = (
+  props: React.SVGProps<SVGSVGElement>
+): JSX.Element => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="48" height="48" fill="white" />
+      <line x1="6" y1="24" x2="42" y2="24" stroke="#BFC2C8" strokeWidth="2" />
+    </svg>
+  )
+}

src/assets/images/index.ts

@@ -26,3 +26,7 @@ export * from "./SingpassLogo"
 export * from "./EmptyAlbumImage"
 export * from "./EmptyDirectoryImage"
 export * from "./BulkUploadAnnouncementImage"
+export * from "./EditorAccordionImage"
+export * from "./EditorCardsImage"
+export * from "./EditorDividerImage"
+export * from "./EditorCardsPlaceholderImage"

src/components/Editable/Editable.tsx

@@ -177,10 +177,13 @@ type ContactUsDroppableZone =
 
 type NavDroppableZone = "link" | `sublink-${number}`
 
+type NormalPageDroppableZone = "cards"
+
 type DroppableZone =
   | HomepageDroppableZone
   | ContactUsDroppableZone
   | NavDroppableZone
+  | NormalPageDroppableZone
 
 type DropInfo = {
   droppableId: DroppableZone