feat: add support for tables in Tiptap editor

opengovsg · Jul 30, 2024 · a482c3c · a482c3c
1 parent 8d753a3
commit a482c3c
Show file tree

Hide file tree

Showing 12 changed files with 668 additions and 193 deletions.
diff --git a/apps/studio/src/assets/BxAddColLeft.tsx b/apps/studio/src/assets/BxAddColLeft.tsx
@@ -0,0 +1,30 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxAddColLeft = chakra(
+  (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>
+    )
+  },
+)
diff --git a/apps/studio/src/assets/BxAddColRight.tsx b/apps/studio/src/assets/BxAddColRight.tsx
@@ -0,0 +1,30 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxAddColRight = chakra(
+  (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>
+    )
+  },
+)
diff --git a/apps/studio/src/assets/BxAddRowAbove.tsx b/apps/studio/src/assets/BxAddRowAbove.tsx
@@ -0,0 +1,30 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxAddRowAbove = chakra(
+  (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>
+    )
+  },
+)
diff --git a/apps/studio/src/assets/BxAddRowBelow.tsx b/apps/studio/src/assets/BxAddRowBelow.tsx
@@ -0,0 +1,30 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxAddRowBelow = chakra(
+  (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>
+    )
+  },
+)
diff --git a/apps/studio/src/assets/BxDelCol.tsx b/apps/studio/src/assets/BxDelCol.tsx
@@ -0,0 +1,22 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxDelCol = chakra(
+  (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>
+    )
+  },
+)
diff --git a/apps/studio/src/assets/BxDelRow.tsx b/apps/studio/src/assets/BxDelRow.tsx
@@ -0,0 +1,22 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxDelRow = chakra(
+  (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>
+    )
+  },
+)
diff --git a/apps/studio/src/assets/BxMergeCells.tsx b/apps/studio/src/assets/BxMergeCells.tsx
@@ -0,0 +1,21 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxMergeCells = chakra((props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.1534 2.59863H20.9034V3.34863V20.6509V21.4009H20.1534H12.3555H12.271H3.84668H3.09668V20.6509V3.34863V2.59863H3.84668H12.271H12.3555H20.1534ZM11.2501 4.09863V8.91798H12.7501V4.09863H19.4034V11.4H19.1997H15.7032L16.7763 10.4491L17.2254 10.0511L16.4296 9.15301L15.9805 9.55094L13.7234 11.5509L13.2167 12L13.7234 12.4491L15.9805 14.4491L16.4296 14.847L17.2254 13.9489L16.7763 13.5509L15.7032 12.6H19.1997H19.4034V19.9009H12.7396V15.3486H11.2396V19.9009H4.59668V12.6H4.79981H8.29633L7.22318 13.5509L6.77412 13.9489L7.56996 14.847L8.01903 14.4491L10.2761 12.4491L10.7828 12L10.2761 11.5509L8.01903 9.55094L7.56996 9.15301L6.77412 10.0511L7.22318 10.4491L8.29633 11.4H4.79981H4.59668V4.09863H11.2501Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+})
diff --git a/apps/studio/src/assets/BxSplitCell.tsx b/apps/studio/src/assets/BxSplitCell.tsx
@@ -0,0 +1,21 @@
+import { chakra } from "@chakra-ui/react"
+
+export const BxSplitCell = chakra((props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.934 2.59888H20.184H12.3569H12.2718H3.81592H3.06592V3.34888V20.6511V21.4011H3.81592H12.2718H12.3569H20.184H20.934V20.6511V3.34888V2.59888ZM11.25 19.9011H4.56592V12.5312L6.34505 14.4123L6.75734 14.8482L7.62916 14.0236L7.21687 13.5877L6.28267 12.6H9.14551H9.74551V11.4H9.14551H6.28267L7.21687 10.4123L7.62916 9.97638L6.75734 9.1518L6.34505 9.58771L4.56592 11.4688V4.09888H11.2502L11.2501 5.00079L12.7501 5.0008L12.7502 4.09888H19.434V11.4905L17.6325 9.58751L17.22 9.15179L16.3485 9.97676L16.761 10.4125L17.6959 11.4H14.8301H14.2301V12.6H14.8301H17.6959L16.761 13.5875L16.3485 14.0232L17.22 14.8482L17.6325 14.4125L19.434 12.5095V19.9011H12.75L12.75 19.0085L11.25 19.0085L11.25 19.9011ZM11.2501 9.00299L11.2501 7.00189L12.7501 7.0019L12.7501 9.003L11.2501 9.00299ZM11.2501 13.0052L11.2501 11.0041L12.7501 11.0041L12.7501 13.0052L11.2501 13.0052ZM11.2501 17.0074L11.2501 15.0063L12.7501 15.0063L12.7501 17.0074L11.2501 17.0074Z"
+        fill="#2C2E34"
+      />
+    </svg>
+  )
+})
diff --git a/apps/studio/src/assets/index.ts b/apps/studio/src/assets/index.ts
@@ -0,0 +1,8 @@
+export * from "./BxAddColLeft"
+export * from "./BxAddColRight"
+export * from "./BxAddRowAbove"
+export * from "./BxAddRowBelow"
+export * from "./BxDelCol"
+export * from "./BxDelRow"
+export * from "./BxMergeCells"
+export * from "./BxSplitCell"