Merge branch 'preview' of https://github.com/makeplane/plane into loc…

…al-cache-fixes-v4

live/.env.example

@@ -1,7 +1,8 @@
 API_BASE_URL="http://api:8000"
 LIVE_BASE_PATH="/live"
-REDIS_URL="redis://localhost:6379"
+
+REDIS_URL="redis://plane-redis:6379/"
 
 # If you prefer not to provide a Redis URL, you can set the REDIS_HOST and REDIS_PORT environment variables instead.
 REDIS_PORT=6379
-REDIS_HOST=localhost
+REDIS_HOST=plane-redis

live/package.json

@@ -9,6 +9,7 @@
     "build": "babel src --out-dir dist --extensions \".ts,.js\"",
     "start": "node dist/server.js",
     "lint": "eslint . --ext .ts,.tsx",
+    "dev": "concurrently \"babel src --out-dir dist --extensions '.ts,.js' --watch\" \"nodemon dist/server.js\"",
     "lint:errors": "eslint . --ext .ts,.tsx --quiet"
   },
   "keywords": [],
@@ -54,7 +55,8 @@
     "@types/express-ws": "^3.0.4",
     "@types/node": "^20.14.9",
     "babel-plugin-module-resolver": "^5.0.2",
-    "nodemon": "^3.1.0",
+    "concurrently": "^9.0.1",
+    "nodemon": "^3.1.7",
     "ts-node": "^10.9.2",
     "tsup": "^7.2.0",
     "typescript": "5.3.3"

packages/editor/package.json

@@ -66,19 +66,20 @@
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.9",
+    "uuid": "^10.0.0",
     "y-indexeddb": "^9.0.12",
     "y-prosemirror": "^1.2.5",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.15"
   },
   "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@plane/typescript-config": "*",
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "@plane/eslint-config": "*",
     "postcss": "^8.4.38",
     "tailwind-config-custom": "*",
-    "@plane/typescript-config": "*",
     "tsup": "^7.2.0",
     "typescript": "5.3.3"
   },

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // components
-import { PageRenderer } from "@/components/editors";
+import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
@@ -42,7 +42,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   }
 
   // use document editor
-  const { editor } = useCollaborativeEditor({
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
     disabledExtensions,
     editorClassName,
     embedHandler,
@@ -67,6 +67,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
 
   if (!editor) return null;
 
+  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
+
   return (
     <PageRenderer
       displayConfig={displayConfig}

packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, MutableRefObject } from "react";
 // components
-import { PageRenderer } from "@/components/editors";
+import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
@@ -35,7 +35,7 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
     );
   }
 
-  const { editor } = useReadOnlyCollaborativeEditor({
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
     editorClassName,
     extensions,
     forwardedRef,
@@ -52,6 +52,9 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
   });
 
   if (!editor) return null;
+
+  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
+
   return (
     <PageRenderer
       displayConfig={displayConfig}

packages/editor/src/core/components/editors/document/index.ts

@@ -1,4 +1,5 @@
 export * from "./collaborative-editor";
 export * from "./collaborative-read-only-editor";
+export * from "./loader";
 export * from "./page-renderer";
 export * from "./read-only-editor";

packages/editor/src/core/components/editors/document/loader.tsx

@@ -0,0 +1,42 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const DocumentContentLoader = () => (
+  <div className="size-full px-5">
+    <Loader className="relative space-y-4">
+      <div className="space-y-2">
+        <div className="py-2">
+          <Loader.Item width="100%" height="36px" />
+        </div>
+        <Loader.Item width="80%" height="22px" />
+        <div className="relative flex items-center gap-2">
+          <Loader.Item width="30px" height="30px" />
+          <Loader.Item width="30%" height="22px" />
+        </div>
+        <div className="py-2">
+          <Loader.Item width="60%" height="36px" />
+        </div>
+        <Loader.Item width="70%" height="22px" />
+        <Loader.Item width="30%" height="22px" />
+        <div className="relative flex items-center gap-2">
+          <Loader.Item width="30px" height="30px" />
+          <Loader.Item width="30%" height="22px" />
+        </div>
+        <div className="py-2">
+          <Loader.Item width="50%" height="30px" />
+        </div>
+        <Loader.Item width="100%" height="22px" />
+        <div className="py-2">
+          <Loader.Item width="30%" height="30px" />
+        </div>
+        <Loader.Item width="30%" height="22px" />
+        <div className="relative flex items-center gap-2">
+          <div className="py-2">
+            <Loader.Item width="30px" height="30px" />
+          </div>
+          <Loader.Item width="30%" height="22px" />
+        </div>
+      </div>
+    </Loader>
+  </div>
+);

packages/editor/src/core/components/editors/editor-container.tsx

@@ -18,7 +18,8 @@ interface EditorContainerProps {
 export const EditorContainer: FC<EditorContainerProps> = (props) => {
   const { children, displayConfig, editor, editorContainerClassName, id } = props;
 
-  const handleContainerClick = () => {
+  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (event.target !== event.currentTarget) return;
     if (!editor) return;
     if (!editor.isEditable) return;
     try {

packages/editor/src/core/components/menus/menu-items.ts

@@ -23,6 +23,7 @@ import {
 } from "lucide-react";
 // helpers
 import {
+  insertImage,
   insertTableCommand,
   setText,
   toggleBlockquote,
@@ -193,8 +194,7 @@ export const ImageItem = (editor: Editor) =>
     key: "image",
     name: "Image",
     isActive: () => editor?.isActive("image") || editor?.isActive("imageComponent"),
-    command: (savedSelection: Selection | null) =>
-      editor?.commands.setImageUpload({ event: "insert", pos: savedSelection?.from }),
+    command: (savedSelection: Selection | null) => insertImage({ editor, event: "insert", pos: savedSelection?.from }),
     icon: ImageIcon,
   }) as const;