refactor/local-dev-env-setup

apps/web/package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0",
   "type": "module",
   "scripts": {
-    "dev": "react-router dev --port 3000",
+    "dev": "react-router dev --port ${WEB_PORT:-3000}",
     "build": "react-router build",
     "preview": "react-router build && serve -s build/client -l 3000",
     "start": "serve -s build/client -l 3000",

deployments/aio/community/Dockerfile

@@ -59,7 +59,7 @@ RUN mkdir -p /app/logs/access && \
     mkdir -p /app/data && \
     chmod +x /app/start.sh
 
-VOLUME ['/app/data', '/app/logs']
+VOLUME ["/app/data", "/app/logs"]
 
 EXPOSE 80 443
 

docker-compose-local.yml

@@ -7,7 +7,7 @@ services:
     volumes:
       - redisdata:/data
     ports:
-      - "6379:6379"
+      - ${REDIS_PORT:-6379}:6379
 
   plane-mq:
     image: rabbitmq:3.13.6-management-alpine
@@ -46,7 +46,7 @@ services:
       MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
     ports:
       - "9000:9000"
-      - "9090:9090"
+      - ${MINIO_PORT:-9090}:9090
 
   plane-db:
     image: postgres:15.7-alpine
@@ -61,7 +61,7 @@ services:
     environment:
       PGDATA: /var/lib/postgresql/data
     ports:
-      - "5432:5432"
+      - ${POSTGRES_PORT:-5432}:5432
 
   # web:
   #   build:
@@ -139,7 +139,7 @@ services:
       - plane-redis
       - plane-mq
     ports:
-      - "8000:8000"
+      - ${API_PORT:-8000}:8000
 
   worker:
     build:

packages/editor/src/core/extensions/custom-image/components/block.tsx

@@ -87,7 +87,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
     if (editorContainer) {
       closestEditorContainer = editorContainer;
     } else {
-      closestEditorContainer = img.closest(".editor-container");
+      closestEditorContainer = img.closest(".editor-container") as HTMLDivElement | null;
       if (!closestEditorContainer) {
         console.error("Editor container not found");
         return;
@@ -238,6 +238,8 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
       <div
         ref={containerRef}
         className="group/image-component relative inline-block max-w-full"
+        role="button"
+        tabIndex={-1}
         onMouseDown={handleImageMouseDown}
         style={{
           width: size.width,
@@ -252,7 +254,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
           src={displayedImageSrc}
           alt=""
           onLoad={handleImageLoad}
-          onError={(e) =>
+          onError={() =>
             void (async () => {
               // for old image extension this command doesn't exist or if the image failed to load for the first time
               if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
@@ -344,6 +346,9 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
                   "right-0 translate-x-1/2 cursor-nwse-resize": nodeAlignment !== "right",
                 }
               )}
+              role="button"
+              aria-roledescription="Resize image"
+              tabIndex={0}
               onMouseDown={handleResizeStart}
               onTouchStart={handleResizeStart}
             />