feat: moved to shared-components and implemented focal point picker in RTE

2024-10-15 11:15:58 +02:00
parent b1493bcd3d
commit 4c1ee66542
15 changed files with 246 additions and 27 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
        "prettier": "^3.2.5",
        "typescript": "^5.1.6",
        "vite": "^5.1.0",
+        "vite-plugin-lib-inject-css": "^2.1.1",
        "vite-tsconfig-paths": "^4.2.1"
      }
    },
@@ -74,6 +75,153 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/@ast-grep/napi": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi/-/napi-0.22.6.tgz",
+      "integrity": "sha512-kNF87HiI4omHC7VzyBZSvqOAXtMlSDRF2YX+O5ya0XKv/7/GYms1opLQ+BQ9twLLDj0WsSFX4MYg0TrinZTxTg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@ast-grep/napi-darwin-arm64": "0.22.6",
+        "@ast-grep/napi-darwin-x64": "0.22.6",
+        "@ast-grep/napi-linux-arm64-gnu": "0.22.6",
+        "@ast-grep/napi-linux-x64-gnu": "0.22.6",
+        "@ast-grep/napi-linux-x64-musl": "0.22.6",
+        "@ast-grep/napi-win32-arm64-msvc": "0.22.6",
+        "@ast-grep/napi-win32-ia32-msvc": "0.22.6",
+        "@ast-grep/napi-win32-x64-msvc": "0.22.6"
+      }
+    },
+    "node_modules/@ast-grep/napi-darwin-arm64": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-darwin-arm64/-/napi-darwin-arm64-0.22.6.tgz",
+      "integrity": "sha512-L9rEGJ8fNi5LxbZj860wbXxjX7DLNV799zcTaPOSzYadvNyhMY3LWvDXd45Vtx6Dh8QRtCoEMQmw8KaRCEjm9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-darwin-x64": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-darwin-x64/-/napi-darwin-x64-0.22.6.tgz",
+      "integrity": "sha512-0iuM6iDJNhcPd6a/JJr64AallR7ttGW/MvUujfQdvJEZY5p9LK35xm23dULznW0tIMgwtMKPRaprgk8LPondKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-linux-arm64-gnu": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-arm64-gnu/-/napi-linux-arm64-gnu-0.22.6.tgz",
+      "integrity": "sha512-9PAqNJlAQfFm1RW0DVCM/S4gFHdppxUTWacB3qEeJZXgdLnoH0KGQa4z3Xo559SPYDKZy0VnY02mZ3XJ+v6/Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-linux-x64-gnu": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-x64-gnu/-/napi-linux-x64-gnu-0.22.6.tgz",
+      "integrity": "sha512-nZf+gxXVrZqvP1LN6HwzOMA4brF3umBXfMequQzv8S6HeJ4c34P23F0Tw8mHtQpVYP9PQWJUvt3LJQ8Xvd5Hiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-linux-x64-musl": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-linux-x64-musl/-/napi-linux-x64-musl-0.22.6.tgz",
+      "integrity": "sha512-gcJeBMgJQf2pZZo0lgH0Vg4ycyujM7Am8VlomXhavC/dPpkddA1tiHSIC4fCNneLU1EqHITy3ALSmM4GLdsjBw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-win32-arm64-msvc": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-arm64-msvc/-/napi-win32-arm64-msvc-0.22.6.tgz",
+      "integrity": "sha512-YDDzvPIyl4ti8xZfjvGSGVCX9JJjMQjyWPlXcwRpiLRnHThtHTDL8PyE2yq+gAPuZ28QbrygMkP9EKXIyYFVcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-win32-ia32-msvc": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-ia32-msvc/-/napi-win32-ia32-msvc-0.22.6.tgz",
+      "integrity": "sha512-w5P0MDcBD3bifC2K9nCDEFYacy8HQnXdf6fX6cIE/7xL8XEDs6D1lQjGewrZDcMAXVXUQfupj4P27ZsJRmuIoQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@ast-grep/napi-win32-x64-msvc": {
+      "version": "0.22.6",
+      "resolved": "https://registry.npmjs.org/@ast-grep/napi-win32-x64-msvc/-/napi-win32-x64-msvc-0.22.6.tgz",
+      "integrity": "sha512-1aaHvgsCBwUP0tDf4HXPMpUV/nUwsOWgRCiBc2zIJjdEjT9TTk795EIX9Z1Nc0OMCrxVEceyiKcYTofXa0Fpxw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.24.2",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -1902,9 +2050,9 @@
      }
    },
    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
      "dev": true
    },
    "node_modules/@jridgewell/trace-mapping": {
@@ -9589,6 +9737,15 @@
        "node": "14 || >=16.14"
      }
    },
+    "node_modules/magic-string": {
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
    "node_modules/make-array": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/make-array/-/make-array-0.1.2.tgz",
@@ -14574,6 +14731,20 @@
        "url": "https://opencollective.com/vitest"
      }
    },
+    "node_modules/vite-plugin-lib-inject-css": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-lib-inject-css/-/vite-plugin-lib-inject-css-2.1.1.tgz",
+      "integrity": "sha512-RIMeVnqBK/8I0E9nnQWzws6pdj5ilRMPJSnXYb6nWxNR4EmDPnksnb/ACoR5Fy7QfzULqS4gtQMrjwnNCC9zoA==",
+      "dev": true,
+      "dependencies": {
+        "@ast-grep/napi": "^0.22.3",
+        "magic-string": "^0.30.10",
+        "picocolors": "^1.0.0"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      }
+    },
    "node_modules/vite-tsconfig-paths": {
      "version": "4.3.2",
      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz",
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
    "prettier": "^3.2.5",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
    "vite-tsconfig-paths": "^4.2.1"
  }
 }
--- a/remix/app/components/ImageEditModal.tsx
+++ b/remix/app/components/ImageEditModal.tsx
@@ -11,7 +11,7 @@ import {
 } from "@contentstack/venus-components"

 import type { FocalPoint, InsertResponse } from "~/types/imagevault"
-import FocalPointPicker from "./FocalPointPicker"
+import FocalPointPicker from "~/shared-components/FocalPointPicker"

 type ImageEditModalProps = {
  fieldData: InsertResponse
@@ -123,8 +123,7 @@ export default function ImageEditModal({
            <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
            <TextInput
              value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
-              placeholder="Caption for image..."
-              name="caption"
+              name="focalPoint"
              disabled
            />
          </FieldComponent>
--- a/remix/app/root.tsx
+++ b/remix/app/root.tsx
@@ -6,7 +6,7 @@ import {
  ScrollRestoration,
  useRouteError,
 } from "@remix-run/react"
-import { SDKLoadingError } from "./hooks/useApp"
+import { SDKLoadingError } from "~/hooks/useApp"

 export function Layout({ children }: { children: React.ReactNode }) {
  return (
--- a/remix/app/types/FocalPoint.ts
+++ b/remix/app/types/FocalPoint.ts
--- a/remix/tsconfig.json
+++ b/remix/tsconfig.json
@@ -4,6 +4,8 @@
    "env.d.ts",
    "../types/**/*.ts",
    "../utils/**/*.ts",
+    "../shared-components/**/*.ts",
+    "../shared-components/**/*.tsx",
    "**/*.ts",
    "**/*.tsx"
  ],
@@ -15,7 +17,8 @@
      "~/types/*": ["../types/*"],
      "~/utils/*": ["../utils/*"],
      "~/components/*": ["./app/components/*"],
-      "~/hooks/*": ["./app/hooks/*"]
+      "~/hooks/*": ["./app/hooks/*"],
+      "~/shared-components/*": ["../shared-components/*"],
    }
  }
 }
--- a/rte/components/ImageEditModal.tsx
+++ b/rte/components/ImageEditModal.tsx
@@ -16,7 +16,9 @@ import type {
  IRteParam,
  IRteElementType,
 } from "@contentstack/app-sdk/dist/src/RTE/types"
-import type { InsertResponse } from "~/types/imagevault"
+import FocalPointPicker from "~/shared-components/FocalPointPicker"
+
+import type { FocalPoint, InsertResponse } from "~/types/imagevault"

 enum DropdownValues {
  center = "center",
@@ -76,6 +78,7 @@ export default function ImageEditModal({
  })
  const [altText, setAltText] = useState("")
  const [caption, setCaption] = useState("")
+  const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })

  const assetUrl = element.attrs.MediaConversions[0].Url

@@ -94,6 +97,12 @@ export default function ImageEditModal({
    }
  }, [element.attrs.Metadata])

+  useEffect(() => {
+    if (element.attrs.FocalPoint) {
+      setFocalPoint(element.attrs.FocalPoint)
+    }
+  }, [element.attrs.FocalPoint])
+
  function handleSave() {
    let newStyle

@@ -134,6 +143,7 @@ export default function ImageEditModal({
          Metadata: newMetadata,
          position: alignment.value,
          style: { ...element.attrs.style, ...newStyle },
+          FocalPoint: focalPoint,
        },
      },
      { at: path }
@@ -142,27 +152,29 @@ export default function ImageEditModal({
    closeModal()
  }

+  function changeFocalPoint(focalPoint: FocalPoint) {
+    setFocalPoint(focalPoint)
+  }
+
  return (
    <>
      <ModalHeader title="Update image" closeModal={closeModal} />
      <ModalBody
        style={{
-          display: "flex",
+          display: "grid",
+          gridTemplateColumns: "1fr minmax(max-content, 250px)",
          gap: "1rem",
-          justifyContent: "space-between",
          alignItems: "center",
-          width: "100%",
+          width: "auto",
+          maxHeight: "none",
        }}
      >
-        <div style={{ flex: 1, overflowY: "auto" }}>
-          <img
-            src={assetUrl}
-            alt={altText}
-            height="100%"
-            style={{ maxHeight: "345px" }}
+        <FocalPointPicker
+          imageSrc={assetUrl}
+          focalPoint={focalPoint}
+          onChange={changeFocalPoint}
        />
-        </div>
-        <div style={{ flex: 1 }}>
+        <div>
          <Field>
            <Select
              selectLabel="Alignment"
@@ -196,6 +208,15 @@ export default function ImageEditModal({
              }
            />
          </Field>
+
+          <Field>
+            <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
+            <TextInput
+              value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
+              name="focalPoint"
+              disabled
+            />
+          </Field>
        </div>
      </ModalBody>
      <ModalFooter>
--- a/rte/components/ImageElement.tsx
+++ b/rte/components/ImageElement.tsx
@@ -35,6 +35,13 @@ export function ImageElement({ children, element, rte }: ImageElementProps) {
        }),
      modalProps: {
        size: "max",
+        style: {
+          content: {
+            maxHeight: "90dvh",
+            width: "auto",
+          },
+          overlay: {},
+        },
      },
    })
  }, [element, rte])
--- a/rte/main.tsx
+++ b/rte/main.tsx
@@ -213,7 +213,10 @@ async function init() {
              {
                // @ts-expect-error: incorrect typings
                type: "ImageVault",
-                attrs: result,
+                attrs: {
+                  ...result,
+                  FocalPoint: result.FocalPoint || { x: 50, y: 50 },
+                },
                uid: crypto.randomUUID(),
                children: [{ text: "" }],
              },
--- a/rte/tsconfig.json
+++ b/rte/tsconfig.json
@@ -4,6 +4,8 @@
    "env.d.ts",
    "../types/**/*.ts",
    "../utils/**/*.ts",
+    "../shared-components/**/*.ts",
+    "../shared-components/**/*.tsx",
    "**/*.ts",
    "**/*.tsx"
  ],
@@ -13,7 +15,8 @@
    "paths": {
      "~/*": ["./*"],
      "~/types/*": ["../types/*"],
-      "~/utils/*": ["../utils/*"]
+      "~/utils/*": ["../utils/*"],
+      "~/shared-components/*": ["../shared-components/*"],
    }
  }
 }
--- a/rte/vite.config.ts
+++ b/rte/vite.config.ts
@@ -1,9 +1,10 @@
 import { resolve } from "path"
 import { defineConfig } from "vite"
 import tsconfigPaths from "vite-tsconfig-paths"
+import { libInjectCss } from "vite-plugin-lib-inject-css"

 export default defineConfig({
-  plugins: [tsconfigPaths()],
+  plugins: [tsconfigPaths(), libInjectCss()],
  define: {
    IS_DEV: process.env.IS_DEV === "true" ? true : false,
  },
--- a/remix/app/components/FocalPointPicker/focalPointPicker.css
+++ b/remix/app/components/FocalPointPicker/focalPointPicker.css
--- a/remix/app/components/FocalPointPicker/index.tsx
+++ b/remix/app/components/FocalPointPicker/index.tsx
@@ -1,6 +1,9 @@
-import { FocalPoint } from "~/types/imagevault"
+import React from "react"
+
+import useFocalPoint from "./useFocalPoint"
+import type { FocalPoint } from "~/types/imagevault"
+
 import "./focalPointPicker.css"
-import useFocalPoint from "~/hooks/useFocalPoint"

 export interface FocalPointPickerProps {
  focalPoint?: FocalPoint
--- a/shared-components/FocalPointPicker/useFocalPoint.ts
+++ b/shared-components/FocalPointPicker/useFocalPoint.ts
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,13 @@
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
-    "noEmit": true
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "~/types/*": ["./types/*"],
+      "~/utils/*": ["./utils/*"],
+      "~/shared-components/*": ["./shared-components/*"],
  }
 }
+}