Merge branch 'preview' into chore/upgrade-editor

packages/editor/package.json

@@ -36,41 +36,41 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
-    "@hocuspocus/provider": "^2.13.5",
+    "@hocuspocus/provider": "^2.13.6",
     "@plane/ui": "*",
-    "@tiptap/core": "^2.1.13",
-    "@tiptap/extension-blockquote": "^2.1.13",
-    "@tiptap/extension-character-count": "^2.6.5",
-    "@tiptap/extension-collaboration": "^2.3.2",
-    "@tiptap/extension-image": "^2.1.13",
-    "@tiptap/extension-list-item": "^2.1.13",
-    "@tiptap/extension-mention": "^2.1.13",
-    "@tiptap/extension-placeholder": "^2.3.0",
-    "@tiptap/extension-task-item": "^2.1.13",
-    "@tiptap/extension-task-list": "^2.1.13",
-    "@tiptap/extension-text-style": "^2.7.1",
-    "@tiptap/extension-underline": "^2.1.13",
-    "@tiptap/pm": "^2.1.13",
-    "@tiptap/react": "^2.1.13",
-    "@tiptap/starter-kit": "^2.1.13",
-    "@tiptap/suggestion": "^2.0.13",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-blockquote": "^2.8.0",
+    "@tiptap/extension-character-count": "^2.8.0",
+    "@tiptap/extension-collaboration": "^2.8.0",
+    "@tiptap/extension-image": "^2.8.0",
+    "@tiptap/extension-list-item": "^2.8.0",
+    "@tiptap/extension-mention": "^2.8.0",
+    "@tiptap/extension-placeholder": "^2.8.0",
+    "@tiptap/extension-task-item": "^2.8.0",
+    "@tiptap/extension-task-list": "^2.8.0",
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/extension-underline": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
+    "@tiptap/suggestion": "^2.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "highlight.js": "^11.8.0",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.1.3",
-    "lowlight": "^3.0.0",
-    "lucide-react": "^0.378.0",
+    "lowlight": "^3.1.0",
+    "lucide-react": "^0.439.0",
     "prosemirror-codemark": "^0.4.2",
     "react-moveable": "^0.54.2",
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.9",
+    "tiptap-markdown": "^0.8.10",
     "uuid": "^10.0.0",
     "y-indexeddb": "^9.0.12",
-    "y-prosemirror": "^1.2.5",
+    "y-prosemirror": "^1.2.12",
     "y-protocols": "^1.0.6",
-    "yjs": "^13.6.15"
+    "yjs": "^13.6.18"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",

packages/editor/src/core/extensions/extensions.tsx

@@ -1,3 +1,4 @@
+import { HocuspocusProvider } from "@hocuspocus/provider";
 import CharacterCount from "@tiptap/extension-character-count";
 import Placeholder from "@tiptap/extension-placeholder";
 import TaskItem from "@tiptap/extension-task-item";

packages/editor/src/core/extensions/image/image-extension-without-props.tsx

@@ -1,4 +1,7 @@
 import ImageExt from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+// extensions
+import { CustomImageNode } from "@/extensions";
 
 export const ImageExtensionWithoutProps = () =>
   ImageExt.extend({
@@ -16,4 +19,8 @@ export const ImageExtensionWithoutProps = () =>
         },
       };
     },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNode);
+    },
   });

packages/editor/src/core/hooks/use-editor.ts

@@ -66,6 +66,21 @@ export const useEditor = (props: CustomEditorProps) => {
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   const savedSelectionRef = useRef(savedSelection);
   const editor = useTiptapEditor({
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
+    enableContentCheck: true,
+    onContentError({ editor, error, disableCollaboration }) {
+      // Disable collaboration to prevent syncing invalid content
+      disableCollaboration();
+
+      // Prevent emitting updates
+      const emitUpdate = false;
+
+      // Disable further user input
+      editor.setEditable(false, emitUpdate);
+      console.log("onContentError", error);
+    },
+
     editorProps: {
       ...CoreEditorProps({
         editorClassName,

packages/editor/src/core/plugins/drag-handle.ts

@@ -45,11 +45,31 @@ export const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
     ".image-upload-component",
   ].join(", ");
 
+  const hasNestedImg = (el: Element): boolean => {
+    if (el.tagName.toLowerCase() === "img") return true;
+    // @ts-expect-error todo
+    for (const child of el.children) {
+      if (hasNestedImg(child)) return true;
+    }
+    return false;
+  };
+
   for (const elem of elements) {
+    const elemHasNestedImg = hasNestedImg(elem);
     if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
       return elem;
     }
 
+    // if the element is a <p> tag and has a nested img i.e. the new image
+    // component
+    if (elem.matches("p") && elemHasNestedImg) {
+      return null;
+    }
+
+    if (elem.matches("div") && elemHasNestedImg) {
+      return elem;
+    }
+
     // if the element is a <p> tag that is the first child of a td or th
     if (
       (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&