diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
index daaa5617737..120ade7127e 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/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,26 +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,
@@ -41,21 +47,26 @@ 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,
@@ -63,9 +74,12 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     forwardedRef,
     handleEditorReady,
     id,
+    dragDropEnabled,
+    isTouchDevice,
     mentionHandler,
     onAssetChange,
     onChange,
+    onEditorFocus,
     onTransaction,
     placeholder,
     realtimeConfig,
@@ -87,9 +101,11 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
       aiHandler={aiHandler}
       bubbleMenuEnabled={bubbleMenuEnabled}
       displayConfig={displayConfig}
+      documentLoaderClassName={documentLoaderClassName}
       editor={editor}
       editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
       id={id}
+      isTouchDevice={!!isTouchDevice}
       isLoading={!hasServerSynced && !hasServerConnectionFailed}
       tabIndex={tabIndex}
     />
diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
index 1316d2d7249..266476788c1 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -11,16 +11,28 @@ type Props = {
   aiHandler?: TAIHandler;
   bubbleMenuEnabled: boolean;
   displayConfig: TDisplayConfig;
+  documentLoaderClassName?: string;
   editor: Editor;
   editorContainerClassName: string;
   id: string;
   isLoading?: boolean;
+  isTouchDevice: boolean;
   tabIndex?: number;
 };
 
 export const PageRenderer = (props: Props) => {
-  const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, isLoading, tabIndex } =
-    props;
+  const {
+    aiHandler,
+    bubbleMenuEnabled,
+    displayConfig,
+    documentLoaderClassName,
+    editor,
+    editorContainerClassName,
+    id,
+    isLoading,
+    isTouchDevice,
+    tabIndex,
+  } = props;
 
   return (
     <div
@@ -29,16 +41,17 @@ export const PageRenderer = (props: Props) => {
       })}
     >
       {isLoading ? (
-        <DocumentContentLoader />
+        <DocumentContentLoader className={documentLoaderClassName} />
       ) : (
         <EditorContainer
           displayConfig={displayConfig}
           editor={editor}
           editorContainerClassName={editorContainerClassName}
           id={id}
+          isTouchDevice={isTouchDevice}
         >
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor.isEditable && (
+          {editor.isEditable && !isTouchDevice && (
             <div>
               {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
               <BlockMenu editor={editor} />
diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx
index f189bde9850..bf8bf36579c 100644
--- a/packages/editor/src/core/components/editors/editor-container.tsx
+++ b/packages/editor/src/core/components/editors/editor-container.tsx
@@ -1,4 +1,4 @@
-import { Editor } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
 import { FC, ReactNode, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -10,16 +10,18 @@ import { TDisplayConfig } from "@/types";
 // components
 import { LinkViewContainer } from "./link-view-container";
 
-interface EditorContainerProps {
+type Props = {
   children: ReactNode;
   displayConfig: TDisplayConfig;
   editor: Editor;
   editorContainerClassName: string;
   id: string;
-}
+  isTouchDevice: boolean;
+};
 
-export const EditorContainer: FC<EditorContainerProps> = (props) => {
-  const { children, displayConfig, editor, editorContainerClassName, id } = props;
+export const EditorContainer: FC<Props> = (props) => {
+  const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice } = props;
+  // refs
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -94,7 +96,7 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
         )}
       >
         {children}
-        <LinkViewContainer editor={editor} containerRef={containerRef} />
+        {!isTouchDevice && <LinkViewContainer editor={editor} containerRef={containerRef} />}
       </div>
     </>
   );
diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx
index 0ca626683dc..51c3ea156dd 100644
--- a/packages/editor/src/core/components/editors/editor-wrapper.tsx
+++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@@ -24,14 +24,17 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editable,
     editorClassName = "",
+    editorProps,
     extensions,
     id,
     initialValue,
+    isTouchDevice,
     fileHandler,
     flaggedExtensions,
     forwardedRef,
     mentionHandler,
     onChange,
+    onEditorFocus,
     onTransaction,
     handleEditorReady,
     autofocus,
@@ -44,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,
@@ -75,6 +81,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
       editor={editor}
       editorContainerClassName={editorContainerClassName}
       id={id}
+      isTouchDevice={!!isTouchDevice}
     >
       {children?.(editor)}
       <div className="flex flex-col">
diff --git a/packages/editor/src/core/components/menus/menu-items.ts b/packages/editor/src/core/components/menus/menu-items.ts
index c3aa4d414a7..cfa1213c1a1 100644
--- a/packages/editor/src/core/components/menus/menu-items.ts
+++ b/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),
diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index 83a2a12269e..b2e88f3b186 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -2,6 +2,10 @@ import { NodeSelection } from "@tiptap/pm/state";
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 // plane imports
 import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
 import { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
 import { ensurePixelString, getImageBlockId } from "../utils";
@@ -57,6 +61,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const imageRef = useRef<HTMLImageElement>(null);
   const [hasErroredOnFirstLoad, setHasErroredOnFirstLoad] = useState(false);
   const [hasTriedRestoringImageOnce, setHasTriedRestoringImageOnce] = useState(false);
+  // extension options
+  const isTouchDevice = !!getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY).isTouchDevice;
 
   const updateAttributesSafely = useCallback(
     (attributes: Partial<TCustomImageAttributes>, errorMessage: string) => {
@@ -188,11 +194,15 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const handleImageMouseDown = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
+      if (isTouchDevice) {
+        e.preventDefault();
+        editor.commands.blur();
+      }
       const pos = getPos();
       const nodeSelection = NodeSelection.create(editor.state.doc, pos);
       editor.view.dispatch(editor.state.tr.setSelection(nodeSelection));
     },
-    [editor, getPos]
+    [editor, getPos, isTouchDevice]
   );
 
   // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
@@ -254,7 +264,12 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
               if (!resolvedImageSrc) {
                 throw new Error("No resolved image source available");
               }
-              imageRef.current.src = resolvedImageSrc;
+              if (isTouchDevice) {
+                const refreshedSrc = await extension.options.getImageSource?.(imgNodeSrc);
+                imageRef.current.src = refreshedSrc;
+              } else {
+                imageRef.current.src = resolvedImageSrc;
+              }
             } catch {
               // if the image failed to even restore, then show the error state
               setFailedToLoadImage(true);
@@ -281,14 +296,15 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           <ImageToolbarRoot
             alignment={nodeAlignment ?? "left"}
             editor={editor}
-            width={size.width}
-            height={size.height}
             aspectRatio={size.aspectRatio === null ? 1 : size.aspectRatio}
-            src={resolvedImageSrc}
             downloadSrc={resolvedDownloadSrc}
             handleAlignmentChange={(alignment) =>
               updateAttributesSafely({ alignment }, "Failed to update attributes while changing alignment:")
             }
+            height={size.height}
+            isTouchDevice={isTouchDevice}
+            width={size.width}
+            src={resolvedImageSrc}
           />
         )}
         {selected && displayedImageSrc === resolvedImageSrc && (
diff --git a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index eb38ab40542..48a8ee5f76f 100644
--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/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) {
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index d7e4be9caa5..65f42ccfd04 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -11,15 +11,16 @@ const ZOOM_STEPS = [0.5, 1, 1.5, 2];
 
 type Props = {
   aspectRatio: number;
-  isFullScreenEnabled: boolean;
   downloadSrc: string;
+  isFullScreenEnabled: boolean;
+  isTouchDevice: boolean;
   src: string;
   toggleFullScreenMode: (val: boolean) => void;
   width: string;
 };
 
 const ImageFullScreenModalWithoutPortal = (props: Props) => {
-  const { aspectRatio, isFullScreenEnabled, downloadSrc, src, toggleFullScreenMode, width } = props;
+  const { aspectRatio, isFullScreenEnabled, isTouchDevice, downloadSrc, src, toggleFullScreenMode, width } = props;
   // refs
   const dragStart = useRef({ x: 0, y: 0 });
   const dragOffset = useRef({ x: 0, y: 0 });
@@ -233,7 +234,13 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
           <div className="flex items-center">
             <button
               type="button"
-              onClick={() => handleMagnification("decrease")}
+              onClick={(e) => {
+                if (isTouchDevice) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+                handleMagnification("decrease");
+              }}
               className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
               disabled={magnification <= MIN_ZOOM}
               aria-label="Zoom out"
@@ -243,7 +250,13 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
             <span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
             <button
               type="button"
-              onClick={() => handleMagnification("increase")}
+              onClick={(e) => {
+                if (isTouchDevice) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+                handleMagnification("increase");
+              }}
               className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
@@ -251,22 +264,26 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
               <Plus className="size-4" />
             </button>
           </div>
-          <button
-            type="button"
-            onClick={() => window.open(downloadSrc, "_blank")}
-            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
-            aria-label="Download image"
-          >
-            <Download className="size-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => window.open(src, "_blank")}
-            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
-            aria-label="Open image in new tab"
-          >
-            <ExternalLink className="size-4" />
-          </button>
+          {!isTouchDevice && (
+            <button
+              type="button"
+              onClick={() => window.open(downloadSrc, "_blank")}
+              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+              aria-label="Download image"
+            >
+              <Download className="size-4" />
+            </button>
+          )}
+          {!isTouchDevice && (
+            <button
+              type="button"
+              onClick={() => window.open(src, "_blank")}
+              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+              aria-label="Open image in new tab"
+            >
+              <ExternalLink className="size-4" />
+            </button>
+          )}
         </div>
       </div>
     </div>
@@ -279,7 +296,10 @@ export const ImageFullScreenModal: React.FC<Props> = (props) => {
   if (portal) {
     modal = ReactDOM.createPortal(modal, portal);
   } else {
-    console.warn("Portal element #editor-portal not found. Rendering inline.");
+    console.warn("Portal element #editor-portal not found. Rendering in document.body");
+    if (typeof document !== "undefined" && document.body) {
+      modal = ReactDOM.createPortal(modal, document.body);
+    }
   }
   return modal;
 };
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 2108bfeaaee..2d8e7360614 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -7,17 +7,18 @@ import { ImageFullScreenModal } from "./modal";
 
 type Props = {
   image: {
+    aspectRatio: number;
     downloadSrc: string;
-    src: string;
     height: string;
+    src: string;
     width: string;
-    aspectRatio: number;
   };
+  isTouchDevice: boolean;
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
 export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
-  const { image, toggleToolbarViewStatus } = props;
+  const { image, isTouchDevice, toggleToolbarViewStatus } = props;
   // states
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
   // derived values
@@ -31,13 +32,14 @@ export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
     <>
       <ImageFullScreenModal
         aspectRatio={aspectRatio}
+        downloadSrc={downloadSrc}
         isFullScreenEnabled={isFullScreenEnabled}
+        isTouchDevice={isTouchDevice}
         src={src}
-        downloadSrc={downloadSrc}
         width={width}
         toggleFullScreenMode={setIsFullScreenEnabled}
       />
-      <Tooltip tooltipContent="View in full screen">
+      <Tooltip tooltipContent="View in full screen" disabled={isTouchDevice}>
         <button
           type="button"
           onClick={(e) => {
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index 268da5f1623..297e3b46b92 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -11,16 +11,17 @@ import { ImageFullScreenActionRoot } from "./full-screen";
 type Props = {
   alignment: TCustomImageAlignment;
   editor: Editor;
-  width: string;
-  height: string;
   aspectRatio: number;
-  src: string;
   downloadSrc: string;
   handleAlignmentChange: (alignment: TCustomImageAlignment) => void;
+  height: string;
+  isTouchDevice: boolean;
+  src: string;
+  width: string;
 };
 
 export const ImageToolbarRoot: React.FC<Props> = (props) => {
-  const { alignment, editor, downloadSrc, handleAlignmentChange } = props;
+  const { alignment, editor, downloadSrc, handleAlignmentChange, isTouchDevice } = props;
   // states
   const [shouldShowToolbar, setShouldShowToolbar] = useState(false);
   // derived values
@@ -36,7 +37,7 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
           }
         )}
       >
-        <ImageDownloadAction src={downloadSrc} />
+        {!isTouchDevice && <ImageDownloadAction src={downloadSrc} />}
         {isEditable && (
           <ImageAlignmentAction
             activeAlignment={alignment}
@@ -44,7 +45,11 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
             toggleToolbarViewStatus={setShouldShowToolbar}
           />
         )}
-        <ImageFullScreenActionRoot image={props} toggleToolbarViewStatus={setShouldShowToolbar} />
+        <ImageFullScreenActionRoot
+          image={props}
+          isTouchDevice={isTouchDevice}
+          toggleToolbarViewStatus={setShouldShowToolbar}
+        />
       </div>
     </>
   );
diff --git a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index 109ec3e3059..9902c32390c 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -40,6 +40,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   const { id: imageEntityId } = node.attrs;
   // derived values
   const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
+  const isTouchDevice = !!getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY).isTouchDevice;
 
   const onUpload = useCallback(
     (url: string) => {
@@ -125,12 +126,14 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         uploadFile(meta.file);
       } else if (meta.event === "insert" && fileInputRef.current && !hasTriggeredFilePickerRef.current) {
         if (meta.hasOpenedFileInputOnce) return;
-        fileInputRef.current.click();
+        if (!isTouchDevice) {
+          fileInputRef.current.click();
+        }
         hasTriggeredFilePickerRef.current = true;
         imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
       }
     }
-  }, [meta, uploadFile, imageComponentImageFileMap, imageEntityId]);
+  }, [meta, uploadFile, imageComponentImageFileMap, imageEntityId, isTouchDevice]);
 
   const onFileChange = useCallback(
     async (e: ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/editor/src/core/extensions/extensions.ts b/packages/editor/src/core/extensions/extensions.ts
index bcf8fbbe836..9ca8f06ed52 100644
--- a/packages/editor/src/core/extensions/extensions.ts
+++ b/packages/editor/src/core/extensions/extensions.ts
@@ -38,7 +38,13 @@ import { CustomStarterKitExtension } from "./starter-kit";
 
 type TArguments = Pick<
   IEditorProps,
-  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "mentionHandler" | "placeholder" | "tabIndex"
+  | "disabledExtensions"
+  | "flaggedExtensions"
+  | "fileHandler"
+  | "isTouchDevice"
+  | "mentionHandler"
+  | "placeholder"
+  | "tabIndex"
 > & {
   enableHistory: boolean;
   editable: boolean;
@@ -50,6 +56,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     enableHistory,
     fileHandler,
     flaggedExtensions,
+    isTouchDevice = false,
     mentionHandler,
     placeholder,
     tabIndex,
@@ -102,6 +109,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
       disabledExtensions,
       fileHandler,
       isEditable: editable,
+      isTouchDevice,
     }),
     ...CoreEditorAdditionalExtensions({
       disabledExtensions,
diff --git a/packages/editor/src/core/extensions/utility.ts b/packages/editor/src/core/extensions/utility.ts
index ba9e031b027..31006db7d67 100644
--- a/packages/editor/src/core/extensions/utility.ts
+++ b/packages/editor/src/core/extensions/utility.ts
@@ -35,15 +35,17 @@ export interface UtilityExtensionStorage {
   assetsUploadStatus: TFileHandler["assetsUploadStatus"];
   uploadInProgress: boolean;
   activeDropbarExtensions: TActiveDropbarExtensions[];
+  isTouchDevice: boolean;
 }
 
 type Props = Pick<IEditorProps, "disabledExtensions"> & {
   fileHandler: TFileHandler;
   isEditable: boolean;
+  isTouchDevice: boolean;
 };
 
 export const UtilityExtension = (props: Props) => {
-  const { disabledExtensions, fileHandler, isEditable } = props;
+  const { disabledExtensions, fileHandler, isEditable, isTouchDevice } = props;
   const { restore } = fileHandler;
 
   return Extension.create<Record<string, unknown>, UtilityExtensionStorage>({
@@ -76,6 +78,7 @@ export const UtilityExtension = (props: Props) => {
         assetsUploadStatus: isEditable && "assetsUploadStatus" in fileHandler ? fileHandler.assetsUploadStatus : {},
         uploadInProgress: false,
         activeDropbarExtensions: [],
+        isTouchDevice,
       };
     },
 
diff --git a/packages/editor/src/core/helpers/editor-commands.ts b/packages/editor/src/core/helpers/editor-commands.ts
index fabce369146..3217e710bd9 100644
--- a/packages/editor/src/core/helpers/editor-commands.ts
+++ b/packages/editor/src/core/helpers/editor-commands.ts
@@ -127,7 +127,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();
 };
 
diff --git a/packages/editor/src/core/helpers/editor-ref.ts b/packages/editor/src/core/helpers/editor-ref.ts
index 520e840bf59..49d20df9406 100644
--- a/packages/editor/src/core/helpers/editor-ref.ts
+++ b/packages/editor/src/core/helpers/editor-ref.ts
@@ -24,9 +24,42 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
   const { editor, provider } = args;
 
   return {
+    blur: () => editor?.commands.blur(),
     clearEditor: (emitUpdate = false) => {
       editor?.chain().setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true).clearContent(emitUpdate).run();
     },
+    createSelectionAtCursorPosition: () => {
+      if (!editor) return;
+      const { empty } = editor.state.selection;
+
+      if (empty) {
+        // Get the text content and position info
+        const { $from } = editor.state.selection;
+        const textContent = $from.parent.textContent;
+        const posInNode = $from.parentOffset;
+
+        // Find word boundaries
+        let start = posInNode;
+        let end = posInNode;
+
+        // Move start position backwards until we hit a word boundary
+        while (start > 0 && /\w/.test(textContent[start - 1])) {
+          start--;
+        }
+
+        // Move end position forwards until we hit a word boundary
+        while (end < textContent.length && /\w/.test(textContent[end])) {
+          end++;
+        }
+
+        // If we found a word, select it using editor commands
+        if (start !== end) {
+          const from = $from.start() + start;
+          const to = $from.start() + end;
+          editor.commands.setTextSelection({ from, to });
+        }
+      }
+    },
     getDocument: () => {
       const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
       const documentHTML = editor?.getHTML() ?? "<p></p>";
@@ -55,7 +88,6 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
     setEditorValue: (content, emitUpdate = false) => {
       editor?.commands.setContent(content, emitUpdate, { preserveWhitespace: true });
     },
-    blur: () => editor?.commands.blur(),
     emitRealTimeUpdate: (message) => provider?.sendStateless(message),
     executeMenuItemCommand: (props) => {
       const { itemKey } = props;
@@ -70,7 +102,14 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
         console.warn(`No command found for item: ${itemKey}`);
       }
     },
+    focus: (args) => editor?.commands.focus(args),
+    getCoordsFromPos: (pos) => editor?.view.coordsAtPos(pos ?? editor.state.selection.from),
     getCurrentCursorPosition: () => editor?.state.selection.from,
+    getAttributesWithExtendedMark: (mark, attribute) => {
+      if (!editor) return;
+      editor.commands.extendMarkRange(mark);
+      return editor.getAttributes(attribute);
+    },
     getSelectedText: () => {
       if (!editor) return null;
 
@@ -165,7 +204,8 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
         editor?.off("transaction", callback);
       };
     },
-    scrollToNodeViaDOMCoordinates(behavior, pos) {
+    redo: () => editor?.commands.redo(),
+    scrollToNodeViaDOMCoordinates({ pos, behavior = "smooth" }) {
       const resolvedPos = pos ?? editor?.state.selection.from;
       if (!editor || !resolvedPos) return;
       scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
@@ -197,5 +237,6 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
       if (!document) return;
       Y.applyUpdate(document, value);
     },
+    undo: () => editor?.commands.undo(),
   };
 };
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index e6c20b13f7b..cd08f5cbda9 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -27,7 +27,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     forwardedRef,
     handleEditorReady,
     id,
+    dragDropEnabled = true,
+    isTouchDevice,
     mentionHandler,
+    onEditorFocus,
     placeholder,
     realtimeConfig,
     serverHandler,
@@ -86,7 +89,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     extensions: [
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),
-        dragDropEnabled: true,
+        dragDropEnabled,
       }),
       HeadingListExtension,
       Collaboration.configure({
@@ -107,9 +110,11 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     flaggedExtensions,
     forwardedRef,
     handleEditorReady,
+    isTouchDevice,
     mentionHandler,
     onAssetChange,
     onChange,
+    onEditorFocus,
     onTransaction,
     placeholder,
     provider,
diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
index 96f5ba24d98..b5c6383cd7b 100644
--- a/packages/editor/src/core/hooks/use-editor.ts
+++ b/packages/editor/src/core/hooks/use-editor.ts
@@ -27,9 +27,11 @@ export const useEditor = (props: TEditorHookProps) => {
     handleEditorReady,
     id = "",
     initialValue,
+    isTouchDevice,
     mentionHandler,
     onAssetChange,
     onChange,
+    onEditorFocus,
     onTransaction,
     placeholder,
     provider,
@@ -57,6 +59,7 @@ export const useEditor = (props: TEditorHookProps) => {
           enableHistory,
           fileHandler,
           flaggedExtensions,
+          isTouchDevice,
           mentionHandler,
           placeholder,
           tabIndex,
@@ -70,6 +73,7 @@ export const useEditor = (props: TEditorHookProps) => {
       },
       onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
       onDestroy: () => handleEditorReady?.(false),
+      onFocus: onEditorFocus,
     },
     [editable]
   );
diff --git a/packages/editor/src/core/types/config.ts b/packages/editor/src/core/types/config.ts
index da00d960769..5a1402332e6 100644
--- a/packages/editor/src/core/types/config.ts
+++ b/packages/editor/src/core/types/config.ts
@@ -21,9 +21,9 @@ export type TFileHandler = {
 
 export type TEditorFontStyle = "sans-serif" | "serif" | "monospace";
 
-export type TEditorFontSize = "small-font" | "large-font";
+export type TEditorFontSize = "small-font" | "large-font" | "mobile-font";
 
-export type TEditorLineSpacing = "regular" | "small";
+export type TEditorLineSpacing = "regular" | "small" | "mobile-regular";
 
 export type TDisplayConfig = {
   fontStyle?: TEditorFontStyle;
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
index 39744b3abfe..266d7661093 100644
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@@ -1,5 +1,7 @@
-import type { Content, Extensions, JSONContent } from "@tiptap/core";
+import type { Content, Extensions, JSONContent, RawCommands } from "@tiptap/core";
+import type { MarkType, NodeType } from "@tiptap/pm/model";
 import type { Selection } from "@tiptap/pm/state";
+import type { EditorProps, EditorView } from "@tiptap/pm/view";
 // extension types
 import type { TTextAlign } from "@/extensions";
 // helpers
@@ -40,6 +42,7 @@ export type TEditorCommands =
   | "table"
   | "image"
   | "divider"
+  | "link"
   | "issue-embed"
   | "text-color"
   | "background-color"
@@ -58,6 +61,10 @@ export type TCommandExtraProps = {
   "text-color": {
     color: string | undefined;
   };
+  link: {
+    url: string;
+    text?: string;
+  };
   "background-color": {
     color: string | undefined;
   };
@@ -84,8 +91,15 @@ export type TDocumentInfo = {
 export type EditorRefApi = {
   blur: () => void;
   clearEditor: (emitUpdate?: boolean) => void;
+  createSelectionAtCursorPosition: () => void;
   emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
   executeMenuItemCommand: <T extends TEditorCommands>(props: TCommandWithPropsWithItemKey<T>) => void;
+  focus: (args: Parameters<RawCommands["focus"]>[0]) => void;
+  getAttributesWithExtendedMark: (
+    mark: string | MarkType,
+    attribute: string | NodeType | MarkType
+  ) => Record<string, any> | undefined;
+  getCoordsFromPos: (pos?: number) => ReturnType<EditorView["coordsAtPos"]> | undefined;
   getCurrentCursorPosition: () => number | undefined;
   getDocument: () => {
     binary: Uint8Array | null;
@@ -103,13 +117,15 @@ export type EditorRefApi = {
   onDocumentInfoChange: (callback: (documentInfo: TDocumentInfo) => void) => () => void;
   onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
   onStateChange: (callback: () => void) => () => void;
+  redo: () => void;
   scrollSummary: (marking: IMarking) => void;
   // eslint-disable-next-line no-undef
-  scrollToNodeViaDOMCoordinates: (behavior?: ScrollBehavior, position?: number) => void;
+  scrollToNodeViaDOMCoordinates: ({ pos, behavior }: { pos?: number; behavior?: ScrollBehavior }) => void;
   setEditorValue: (content: string, emitUpdate?: boolean) => void;
   setEditorValueAtCursorPosition: (content: string) => void;
   setFocusAtPosition: (position: number) => void;
   setProviderDocument: (value: Uint8Array) => void;
+  undo: () => void;
 };
 
 // editor props
@@ -121,6 +137,7 @@ export interface IEditorProps {
   disabledExtensions: TExtensions[];
   editable: boolean;
   editorClassName?: string;
+  editorProps?: EditorProps;
   extensions?: Extensions;
   flaggedExtensions: TExtensions[];
   fileHandler: TFileHandler;
@@ -128,8 +145,10 @@ export interface IEditorProps {
   handleEditorReady?: (value: boolean) => void;
   id: string;
   initialValue: string;
+  isTouchDevice?: boolean;
   mentionHandler: TMentionHandler;
   onAssetChange?: (assets: TEditorAsset[]) => void;
+  onEditorFocus?: () => void;
   onChange?: (json: object, html: string) => void;
   onEnterKeyPress?: (e?: any) => void;
   onTransaction?: () => void;
@@ -145,8 +164,11 @@ export type IRichTextEditorProps = IEditorProps & {
 };
 
 export interface ICollaborativeDocumentEditorProps
-  extends Omit<IEditorProps, "extensions" | "initialValue" | "onEnterKeyPress" | "value"> {
+  extends Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> {
   aiHandler?: TAIHandler;
+  documentLoaderClassName?: string;
+  dragDropEnabled?: boolean;
+  editable: boolean;
   embedHandler: TEmbedConfig;
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
diff --git a/packages/editor/src/core/types/hook.ts b/packages/editor/src/core/types/hook.ts
index a1dd6ac1dd7..6e8dd1ee2b0 100644
--- a/packages/editor/src/core/types/hook.ts
+++ b/packages/editor/src/core/types/hook.ts
@@ -1,15 +1,19 @@
 import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Content } from "@tiptap/core";
-import type { EditorProps } from "@tiptap/pm/view";
 // local imports
 import type { ICollaborativeDocumentEditorProps, IEditorProps } from "./editor";
 
 type TCoreHookProps = Pick<
   IEditorProps,
-  "disabledExtensions" | "editorClassName" | "extensions" | "flaggedExtensions" | "handleEditorReady"
-> & {
-  editorProps?: EditorProps;
-};
+  | "disabledExtensions"
+  | "editorClassName"
+  | "editorProps"
+  | "extensions"
+  | "flaggedExtensions"
+  | "handleEditorReady"
+  | "isTouchDevice"
+  | "onEditorFocus"
+>;
 
 export type TEditorHookProps = TCoreHookProps &
   Pick<
@@ -46,4 +50,7 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "placeholder"
     | "tabIndex"
   > &
-  Pick<ICollaborativeDocumentEditorProps, "embedHandler" | "realtimeConfig" | "serverHandler" | "user">;
+  Pick<
+    ICollaborativeDocumentEditorProps,
+    "dragDropEnabled" | "embedHandler" | "realtimeConfig" | "serverHandler" | "user"
+  >;
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
index f03808c1a15..c7726ce2d37 100644
--- a/packages/editor/src/styles/variables.css
+++ b/packages/editor/src/styles/variables.css
@@ -88,6 +88,28 @@
     --line-height-code: 1.2rem;
     --line-height-list: var(--line-height-regular);
   }
+
+  &.mobile-font {
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.5rem;
+    --font-size-h3: 1.375rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.125rem;
+    --font-size-h6: 1rem;
+    --font-size-regular: 0.95rem;
+    --font-size-code: 0.85rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 2.25rem;
+    --line-height-h2: 2rem;
+    --line-height-h3: 1.75rem;
+    --line-height-h4: 1.5rem;
+    --line-height-h5: 1.5rem;
+    --line-height-h6: 1.5rem;
+    --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
+    --line-height-list: var(--line-height-regular);
+  }
   /* end font sizes and line heights */
 
   /* font styles */
@@ -146,6 +168,27 @@
     --divider-padding-top: 0px;
     --divider-padding-bottom: 4px;
   }
+
+  &.line-spacing-mobile-regular {
+    --heading-1-padding-top: 16px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 16px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 16px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 16px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 12px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 12px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 2px;
+    --paragraph-padding-bottom: 2px;
+    --paragraph-padding-between: 4px;
+    --list-spacing-y: 0px;
+    --divider-padding-top: 0px;
+    --divider-padding-bottom: 4px;
+  }
   /* end spacing */
 }
 /* end font size and style */