feat: Tiptap V3 migration (#1854)

* Tiptap3 migration - WIP

* fix collaboration

* remove unused code

* fix flicker

* disable duplicate extensions

* update tiptap version

* Switch to useEditorState
- Set shouldRerenderOnTransaction to false

* fix editable state

* add tippyoptions for reference

* merge main

* tiptap 3.6.1

* fix bubble menu

* fix converter

* fix menus

* fix collaboration caret css

* fix: Set `isInitialized` to force immediate react node view rendering

* feat: Migrate tippy.js menus to Floating UI

* feat: Update collaboration connection for HocusPocus v3

* fix: Connect/disconnect websocketProvider

* cleanup

* cleanup

* feat: Improved placeholder and upload handling for images

* feat: Improved placeholder and upload handling for videos

* refactor: Image node and view clean-up

* feat: Improved placeholder and upload handling for attachments

* fix: Video view styles

* fix: Transaction handling on asset upload

* fix: Use imageDimensionsFromStream

* feat: Multiple file upload, improved placeholders, local previews

* fix: Drag & drop, paste upload

* fix: Allow media as attachment

* * add skeleton pulse animation
* add translation strings
* fix attachment view responsiveness

* fix collab connection status display

* Tiptap v3.17.0

* fix suggestion menu exit bug

* fix search shortcut

* fix history editor css

* tiptap 3.17.1

---------

Co-authored-by: Arek Nawo <areknawo@areknawo.com>

apps/client/src/features/editor/components/image/image-view.tsx

@@ -1,30 +1,70 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { Group, Image, Loader, Text } from "@mantine/core";
 import { useMemo } from "react";
-import { Image } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
 import clsx from "clsx";
+import classes from "./image-view.module.css";
+import { useTranslation } from "react-i18next";
 
 export default function ImageView(props: NodeViewProps) {
-  const { node, selected } = props;
-  const { src, width, align, title } = node.attrs;
-
+  const { t } = useTranslation();
+  const { editor, node, selected } = props;
+  const { src, width, align, title, aspectRatio, placeholder } = node.attrs;
   const alignClass = useMemo(() => {
     if (align === "left") return "alignLeft";
     if (align === "right") return "alignRight";
     if (align === "center") return "alignCenter";
     return "alignCenter";
   }, [align]);
+  const previewSrc = useMemo(() => {
+    editor.storage.shared.imagePreviews =
+      editor.storage.shared.imagePreviews || {};
+
+    if (placeholder?.id) {
+      return editor.storage.shared.imagePreviews[placeholder.id];
+    }
+
+    return null;
+  }, [placeholder, editor]);
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <Image
-        radius="md"
-        fit="contain"
-        w={width}
-        src={getFileUrl(src)}
-        alt={title}
-        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
-      />
+      <div
+        className={clsx(
+          selected && "ProseMirror-selectednode",
+          classes.imageWrapper,
+          alignClass,
+        )}
+        style={{
+          aspectRatio: aspectRatio ? aspectRatio : src ? undefined : "16 / 9",
+          width,
+        }}
+      >
+        {src && (
+          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={title} />
+        )}
+        {!src && previewSrc && (
+          <Group pos="relative" h="100%" w="100%">
+            <Image
+              radius="md"
+              fit="contain"
+              src={previewSrc}
+              alt={placeholder?.name}
+            />
+            <Loader size={20} pos="absolute" bottom={6} right={6} />
+          </Group>
+        )}
+        {!src && !previewSrc && (
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
+            <Loader size={20} style={{ flexShrink: 0 }} />
+            <Text component="span" size="sm" truncate="end">
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
+            </Text>
+          </Group>
+        )}
+      </div>
     </NodeViewWrapper>
   );
 }