chore: misc editor updates and utility functions

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

@@ -1,5 +1,5 @@
-import { Extensions } from "@tiptap/core";
-import React from "react";
+import type { Extensions } from "@tiptap/core";
+import React, { useMemo } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
@@ -13,27 +13,32 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
 // types
-import { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
+import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
 
 const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
   const {
     aiHandler,
     bubbleMenuEnabled = true,
     containerClassName,
+    documentLoaderClassName,
+    extensions: externalExtensions = [],
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editable,
     editorClassName = "",
+    editorProps,
     embedHandler,
     fileHandler,
     flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     id,
+    dragDropEnabled = true,
     isTouchDevice,
     mentionHandler,
     onAssetChange,
     onChange,
+    onEditorFocus,
     onTransaction,
     placeholder,
     realtimeConfig,
@@ -42,32 +47,39 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     user,
   } = props;
 
-  const extensions: Extensions = [];
+  const extensions: Extensions = useMemo(() => {
+    const allExtensions = externalExtensions;
 
-  if (embedHandler?.issue) {
-    extensions.push(
-      WorkItemEmbedExtension({
-        widgetCallback: embedHandler.issue.widgetCallback,
-      })
-    );
-  }
+    if (embedHandler?.issue) {
+      allExtensions.push(
+        WorkItemEmbedExtension({
+          widgetCallback: embedHandler.issue.widgetCallback,
+        })
+      );
+    }
+
+    return allExtensions;
+  }, [externalExtensions, embedHandler.issue]);
 
   // use document editor
   const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
     disabledExtensions,
     editable,
     editorClassName,
+    editorProps,
     embedHandler,
     extensions,
     fileHandler,
     flaggedExtensions,
     forwardedRef,
     handleEditorReady,
     id,
+    dragDropEnabled,
     isTouchDevice,
     mentionHandler,
     onAssetChange,
     onChange,
+    onEditorFocus,
     onTransaction,
     placeholder,
     realtimeConfig,
@@ -89,6 +101,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
       aiHandler={aiHandler}
       bubbleMenuEnabled={bubbleMenuEnabled}
       displayConfig={displayConfig}
+      documentLoaderClassName={documentLoaderClassName}
       editor={editor}
       editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
       id={id}

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -11,6 +11,7 @@ type Props = {
   aiHandler?: TAIHandler;
   bubbleMenuEnabled: boolean;
   displayConfig: TDisplayConfig;
+  documentLoaderClassName?: string;
   editor: Editor;
   editorContainerClassName: string;
   id: string;
@@ -24,6 +25,7 @@ export const PageRenderer = (props: Props) => {
     aiHandler,
     bubbleMenuEnabled,
     displayConfig,
+    documentLoaderClassName,
     editor,
     editorContainerClassName,
     id,
@@ -39,7 +41,7 @@ export const PageRenderer = (props: Props) => {
       })}
     >
       {isLoading ? (
-        <DocumentContentLoader />
+        <DocumentContentLoader className={documentLoaderClassName} />
       ) : (
         <EditorContainer
           displayConfig={displayConfig}

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

@@ -20,6 +20,7 @@ const DocumentReadOnlyEditor: React.FC<IDocumentReadOnlyEditorProps> = (props) =
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
+    documentLoaderClassName,
     editorClassName = "",
     embedHandler,
     fileHandler,
@@ -62,6 +63,7 @@ const DocumentReadOnlyEditor: React.FC<IDocumentReadOnlyEditorProps> = (props) =
     <PageRenderer
       bubbleMenuEnabled={false}
       displayConfig={displayConfig}
+      documentLoaderClassName={documentLoaderClassName}
       editor={editor}
       editorContainerClassName={cn(editorContainerClassName, "document-editor")}
       id={id}

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

@@ -24,6 +24,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editable,
     editorClassName = "",
+    editorProps,
     extensions,
     id,
     initialValue,
@@ -33,6 +34,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     forwardedRef,
     mentionHandler,
     onChange,
+    onEditorFocus,
     onTransaction,
     handleEditorReady,
     autofocus,
@@ -45,15 +47,18 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     editable,
     disabledExtensions,
     editorClassName,
+    editorProps,
     enableHistory: true,
     extensions,
     fileHandler,
     flaggedExtensions,
     forwardedRef,
     id,
+    isTouchDevice,
     initialValue,
     mentionHandler,
     onChange,
+    onEditorFocus,
     onTransaction,
     handleEditorReady,
     autofocus,

packages/editor/src/core/components/editors/rich-text/editor.tsx

@@ -34,7 +34,7 @@ const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
     ];
 
     return extensions;
-  }, [dragDropEnabled, disabledExtensions, externalExtensions, fileHandler, flaggedExtensions]);
+  }, [dragDropEnabled, disabledExtensions, externalExtensions, fileHandler, flaggedExtensions, isTouchDevice]);
 
   return (
     <EditorWrapper {...props} extensions={getExtensions()}>

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

@@ -22,6 +22,7 @@ import {
   MinusSquare,
   Palette,
   AlignCenter,
+  LinkIcon,
 } from "lucide-react";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
@@ -30,6 +31,7 @@ import {
   insertHorizontalRule,
   insertImage,
   insertTableCommand,
+  setLinkEditor,
   setText,
   setTextAlign,
   toggleBackgroundColor,
@@ -44,6 +46,7 @@ import {
   toggleTaskList,
   toggleTextColor,
   toggleUnderline,
+  unsetLinkEditor,
 } from "@/helpers/editor-commands";
 // types
 import { TCommandWithProps, TEditorCommands } from "@/types";
@@ -189,7 +192,7 @@ export const ImageItem = (editor: Editor): EditorMenuItem<"image"> => ({
   icon: ImageIcon,
 });
 
-export const HorizontalRuleItem = (editor: Editor) =>
+export const HorizontalRuleItem = (editor: Editor): EditorMenuItem<"divider"> =>
   ({
     key: "divider",
     name: "Divider",
@@ -198,6 +201,19 @@ export const HorizontalRuleItem = (editor: Editor) =>
     icon: MinusSquare,
   }) as const;
 
+export const LinkItem = (editor: Editor): EditorMenuItem<"link"> =>
+  ({
+    key: "link",
+    name: "Link",
+    isActive: () => editor?.isActive("link"),
+    command: (props) => {
+      if (!props) return;
+      if (props.url) setLinkEditor(editor, props.url, props.text);
+      else unsetLinkEditor(editor);
+    },
+    icon: LinkIcon,
+  }) as const;
+
 export const TextColorItem = (editor: Editor): EditorMenuItem<"text-color"> => ({
   key: "text-color",
   name: "Color",
@@ -254,6 +270,7 @@ export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEdito
     TableItem(editor),
     ImageItem(editor),
     HorizontalRuleItem(editor),
+    LinkItem(editor),
     TextColorItem(editor),
     BackgroundColorItem(editor),
     TextAlignItem(editor),

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

@@ -24,7 +24,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
   const { editor, extension, node } = props;
   const { src: imgNodeSrc } = node.attrs;
 
-  const [isUploaded, setIsUploaded] = useState(false);
+  const [isUploaded, setIsUploaded] = useState(!!imgNodeSrc);
   const [resolvedSrc, setResolvedSrc] = useState<string | undefined>(undefined);
   const [resolvedDownloadSrc, setResolvedDownloadSrc] = useState<string | undefined>(undefined);
   const [imageFromFileSystem, setImageFromFileSystem] = useState<string | undefined>(undefined);
@@ -43,13 +43,13 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
   // the image is already uploaded if the image-component node has src attribute
   // and we need to remove the blob from our file system
   useEffect(() => {
-    if (resolvedSrc) {
+    if (resolvedSrc || imgNodeSrc) {
       setIsUploaded(true);
       setImageFromFileSystem(undefined);
     } else {
       setIsUploaded(false);
     }
-  }, [resolvedSrc]);
+  }, [resolvedSrc, imgNodeSrc]);
 
   useEffect(() => {
     if (!imgNodeSrc) {

packages/editor/src/core/helpers/editor-commands.ts

@@ -138,7 +138,21 @@ export const unsetLinkEditor = (editor: Editor) => {
   editor.chain().focus().unsetLink().run();
 };
 
-export const setLinkEditor = (editor: Editor, url: string) => {
+export const setLinkEditor = (editor: Editor, url: string, text?: string) => {
+  const { selection } = editor.state;
+  const previousSelection = { from: selection.from, to: selection.to };
+  if (text) {
+    editor
+      .chain()
+      .focus()
+      .deleteRange({ from: selection.from, to: selection.to })
+      .insertContentAt(previousSelection.from, text)
+      .run();
+    // Extracting the new selection start point.
+    const previousFrom = previousSelection.from;
+
+    editor.commands.setTextSelection({ from: previousFrom, to: previousFrom + text.length });
+  }
   editor.chain().focus().setLink({ href: url }).run();
 };
 

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

@@ -27,8 +27,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     forwardedRef,
     handleEditorReady,
     id,
+    dragDropEnabled = true,
     isTouchDevice,
     mentionHandler,
+    onEditorFocus,
     placeholder,
     realtimeConfig,
     serverHandler,
@@ -87,7 +89,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     extensions: [
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),
-        dragDropEnabled: true,
+        dragDropEnabled,
       }),
       HeadingListExtension,
       Collaboration.configure({
@@ -111,6 +113,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     mentionHandler,
     onAssetChange,
     onChange,
+    onEditorFocus,
     onTransaction,
     placeholder,
     provider,