fix: change Appearance to Preferences

admin/app/workspace/create/form.tsx

@@ -38,8 +38,6 @@ export const WorkspaceCreateForm = () => {
     getValues,
     formState: { errors, isSubmitting, isValid },
   } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
-  // derived values
-  const workspaceBaseURL = encodeURI(WEB_BASE_URL || window.location.origin + "/");
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     await workspaceService
@@ -126,7 +124,7 @@ export const WorkspaceCreateForm = () => {
         <div className="flex flex-col gap-1">
           <h4 className="text-sm text-custom-text-300">Set your workspace&apos;s URL</h4>
           <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">{workspaceBaseURL}</span>
+            <span className="whitespace-nowrap text-sm text-custom-text-200">{WEB_BASE_URL}/</span>
             <Controller
               control={control}
               name="slug"

admin/core/components/workspace/list-item.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import Link from "next/link";
 import { ExternalLink } from "lucide-react";
 // helpers
 import { Tooltip } from "@plane/ui";
@@ -19,9 +20,9 @@ export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemPr
 
   if (!workspace) return null;
   return (
-    <a
+    <Link
       key={workspaceId}
-      href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
+      href={encodeURI(WEB_BASE_URL + "/" + workspace.slug)}
       target="_blank"
       className="group flex items-center justify-between p-4 gap-2.5 truncate border border-custom-border-200/70 hover:border-custom-border-200 hover:bg-custom-background-90 rounded-md"
     >
@@ -76,6 +77,6 @@ export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemPr
       <div className="flex-shrink-0">
         <ExternalLink size={14} className="text-custom-text-400 group-hover:text-custom-text-200" />
       </div>
-    </a>
+    </Link>
   );
 });

admin/core/services/workspace.service.ts

@@ -30,8 +30,7 @@ export class WorkspaceService extends APIService {
    * @returns Promise<any>
    */
   async workspaceSlugCheck(slug: string): Promise<any> {
-    const params = new URLSearchParams({ slug });
-    return this.get(`/api/instances/workspace-slug-check/?${params.toString()}`)
+    return this.get(`/api/instances/workspace-slug-check/?slug=${slug}`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;

admin/core/store/workspace.store.ts

@@ -14,7 +14,7 @@ export interface IWorkspaceStore {
   // computed
   workspaceIds: string[];
   // helper actions
-  hydrate: (data: Record<string, IWorkspace>) => void;
+  hydrate: (data: any) => void;
   getWorkspaceById: (workspaceId: string) => IWorkspace | undefined;
   // fetch actions
   fetchWorkspaces: () => Promise<IWorkspace[]>;
@@ -59,9 +59,9 @@ export class WorkspaceStore implements IWorkspaceStore {
   // helper actions
   /**
    * @description Hydrates the workspaces
-   * @param data - Record<string, IWorkspace>
+   * @param data - any
    */
-  hydrate = (data: Record<string, IWorkspace>) => {
+  hydrate = (data: any) => {
     if (data) this.workspaces = data;
   };
 

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",

apiserver/package.json

@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.24.0"
+  "version": "0.23.1"
 }

apiserver/plane/api/views/project.py

@@ -258,7 +258,9 @@ class ProjectAPIEndpoint(BaseAPIView):
                 ProjectSerializer(project).data, cls=DjangoJSONEncoder
             )
 
-            intake_view = request.data.get("inbox_view", project.intake_view)
+            intake_view = request.data.get(
+                "inbox_view", request.data.get("intake_view", False)
+            )
 
             if project.archived_at:
                 return Response(

apiserver/plane/app/views/page/base.py

@@ -114,7 +114,7 @@ class PageViewSet(BaseViewSet):
             .distinct()
         )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def create(self, request, slug, project_id):
         serializer = PageSerializer(
             data=request.data,
@@ -134,7 +134,7 @@ class PageViewSet(BaseViewSet):
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def partial_update(self, request, slug, project_id, pk):
         try:
             page = Page.objects.get(
@@ -234,7 +234,7 @@ class PageViewSet(BaseViewSet):
             )
             return Response(data, status=status.HTTP_200_OK)
 
-    @allow_permission([ROLE.ADMIN], model=Page, creator=True)
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def lock(self, request, slug, project_id, pk):
         page = Page.objects.filter(
             pk=pk, workspace__slug=slug, projects__id=project_id
@@ -244,7 +244,7 @@ class PageViewSet(BaseViewSet):
         page.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN], model=Page, creator=True)
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def unlock(self, request, slug, project_id, pk):
         page = Page.objects.filter(
             pk=pk, workspace__slug=slug, projects__id=project_id
@@ -255,7 +255,7 @@ class PageViewSet(BaseViewSet):
 
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN], model=Page, creator=True)
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def access(self, request, slug, project_id, pk):
         access = request.data.get("access", 0)
         page = Page.objects.filter(
@@ -296,7 +296,7 @@ class PageViewSet(BaseViewSet):
         pages = PageSerializer(queryset, many=True).data
         return Response(pages, status=status.HTTP_200_OK)
 
-    @allow_permission([ROLE.ADMIN], model=Page, creator=True)
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def archive(self, request, slug, project_id, pk):
         page = Page.objects.get(pk=pk, workspace__slug=slug, projects__id=project_id)
 
@@ -323,7 +323,7 @@ class PageViewSet(BaseViewSet):
 
         return Response({"archived_at": str(datetime.now())}, status=status.HTTP_200_OK)
 
-    @allow_permission([ROLE.ADMIN], model=Page, creator=True)
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def unarchive(self, request, slug, project_id, pk):
         page = Page.objects.get(pk=pk, workspace__slug=slug, projects__id=project_id)
 
@@ -348,7 +348,7 @@ class PageViewSet(BaseViewSet):
 
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN], model=Page, creator=True)
+    @allow_permission([ROLE.ADMIN], creator=True, model=Page)
     def destroy(self, request, slug, project_id, pk):
         page = Page.objects.get(pk=pk, workspace__slug=slug, projects__id=project_id)
 

apiserver/plane/app/views/project/base.py

@@ -384,9 +384,11 @@ class ProjectViewSet(BaseViewSet):
                 )
 
             workspace = Workspace.objects.get(slug=slug)
+            intake_view = request.data.get(
+                "inbox_view", request.data.get("intake_view", False)
+            )
 
             project = Project.objects.get(pk=pk)
-            intake_view = request.data.get("inbox_view", project.intake_view)
             current_instance = json.dumps(
                 ProjectSerializer(project).data, cls=DjangoJSONEncoder
             )

apiserver/plane/license/api/serializers/workspace.py

@@ -18,9 +18,6 @@ class WorkspaceSerializer(BaseSerializer):
         # Check if the slug is restricted
         if value in RESTRICTED_WORKSPACE_SLUGS:
             raise serializers.ValidationError("Slug is not valid")
-        # Check uniqueness case-insensitively
-        if Workspace.objects.filter(slug__iexact=value).exists():
-            raise serializers.ValidationError("Slug is already in use")
         return value
 
     class Meta:

apiserver/plane/license/api/views/workspace.py

@@ -25,7 +25,7 @@ class InstanceWorkSpaceAvailabilityCheckEndpoint(BaseAPIView):
             )
 
         workspace = (
-            Workspace.objects.filter(slug__iexact=slug).exists()
+            Workspace.objects.filter(slug=slug).exists()
             or slug in RESTRICTED_WORKSPACE_SLUGS
         )
         return Response({"status": not workspace}, status=status.HTTP_200_OK)

apiserver/plane/utils/telemetry.py

@@ -1,33 +1,23 @@
-# Python imports
-import os
-import atexit
-
-# Third party imports
 from opentelemetry import trace
 from opentelemetry.sdk.trace import TracerProvider
 from opentelemetry.sdk.trace.export import BatchSpanProcessor
 from opentelemetry.exporter.otlp.proto.grpc.trace_exporter import OTLPSpanExporter
 from opentelemetry.sdk.resources import Resource
 from opentelemetry.instrumentation.django import DjangoInstrumentor
-
-# Global variable to track initialization
-_TRACER_PROVIDER = None
+import os
 
 
 def init_tracer():
     """Initialize OpenTelemetry with proper shutdown handling"""
-    global _TRACER_PROVIDER
 
-    # If already initialized, return existing provider
-    if _TRACER_PROVIDER is not None:
-        return _TRACER_PROVIDER
+    # Check if already initialized to prevent double initialization
+    if trace.get_tracer_provider().__class__.__name__ == "TracerProvider":
+        return
 
     # Configure the tracer provider
     service_name = os.environ.get("SERVICE_NAME", "plane-ce-api")
     resource = Resource.create({"service.name": service_name})
     tracer_provider = TracerProvider(resource=resource)
-
-    # Set as global tracer provider
     trace.set_tracer_provider(tracer_provider)
 
     # Configure the OTLP exporter
@@ -39,20 +29,12 @@ def init_tracer():
     # Initialize Django instrumentation
     DjangoInstrumentor().instrument()
 
-    # Store provider globally
-    _TRACER_PROVIDER = tracer_provider
-
-    # Register shutdown handler
-    atexit.register(shutdown_tracer)
-
     return tracer_provider
 
 
 def shutdown_tracer():
     """Shutdown OpenTelemetry tracers and processors"""
-    global _TRACER_PROVIDER
+    provider = trace.get_tracer_provider()
 
-    if _TRACER_PROVIDER is not None:
-        if hasattr(_TRACER_PROVIDER, "shutdown"):
-            _TRACER_PROVIDER.shutdown()
-        _TRACER_PROVIDER = None
+    if hasattr(provider, "shutdown"):
+        provider.shutdown()

live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "live",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "description": "",
   "main": "./src/server.ts",
   "private": true,

package.json

@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
@@ -22,7 +22,7 @@
   "devDependencies": {
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
-    "turbo": "^2.3.3"
+    "turbo": "^2.3.2"
   },
   "packageManager": "yarn@1.22.22",
   "name": "plane"

packages/constants/index.ts

@@ -1,4 +1,3 @@
 export * from "./auth";
-export * from "./endpoints";
 export * from "./issue";
 export * from "./workspace";

packages/constants/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/constants",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "private": true,
-  "main": "./src/index.ts"
+  "main": "./index.ts"
 }

packages/constants/src/endpoints.ts

@@ -1,15 +0,0 @@
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
-// PI Base Url
-export const PI_BASE_URL = process.env.NEXT_PUBLIC_PI_BASE_URL || "";
-// God Mode Admin App Base Url
-export const ADMIN_BASE_URL = process.env.NEXT_PUBLIC_ADMIN_BASE_URL || "";
-export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
-export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}/`);
-// Publish App Base Url
-export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
-export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
-export const SITES_URL = encodeURI(`${SPACE_BASE_URL}${SPACE_BASE_PATH}/`);
-// Live App Base Url
-export const LIVE_BASE_URL = process.env.NEXT_PUBLIC_LIVE_BASE_URL || "";
-export const LIVE_BASE_PATH = process.env.NEXT_PUBLIC_LIVE_BASE_PATH || "";
-export const LIVE_URL = encodeURI(`${LIVE_BASE_URL}${LIVE_BASE_PATH}/`);

packages/constants/src/workspace.ts

@@ -1,76 +0,0 @@
-export const ORGANIZATION_SIZE = [
-  "Just myself",
-  "2-10",
-  "11-50",
-  "51-200",
-  "201-500",
-  "500+",
-];
-
-export const RESTRICTED_URLS = [
-  "404",
-  "accounts",
-  "api",
-  "create-workspace",
-  "god-mode",
-  "installations",
-  "invitations",
-  "onboarding",
-  "profile",
-  "spaces",
-  "workspace-invitations",
-  "password",
-  "flags",
-  "monitor",
-  "monitoring",
-  "ingest",
-  "plane-pro",
-  "plane-ultimate",
-  "enterprise",
-  "plane-enterprise",
-  "disco",
-  "silo",
-  "chat",
-  "calendar",
-  "drive",
-  "channels",
-  "upgrade",
-  "billing",
-  "sign-in",
-  "sign-up",
-  "signin",
-  "signup",
-  "config",
-  "live",
-  "admin",
-  "m",
-  "import",
-  "importers",
-  "integrations",
-  "integration",
-  "configuration",
-  "initiatives",
-  "initiative",
-  "config",
-  "workflow",
-  "workflows",
-  "epics",
-  "epic",
-  "story",
-  "mobile",
-  "dashboard",
-  "desktop",
-  "onload",
-  "real-time",
-  "one",
-  "pages",
-  "mobile",
-  "business",
-  "pro",
-  "settings",
-  "monitor",
-  "license",
-  "licenses",
-  "instances",
-  "instance",
-];

packages/constants/workspace.ts

@@ -0,0 +1,23 @@
+export const ORGANIZATION_SIZE = [
+  "Just myself",
+  "2-10",
+  "11-50",
+  "51-200",
+  "201-500",
+  "500+",
+];
+
+export const RESTRICTED_URLS = [
+  "404",
+  "accounts",
+  "api",
+  "create-workspace",
+  "error",
+  "god-mode",
+  "installations",
+  "invitations",
+  "onboarding",
+  "profile",
+  "spaces",
+  "workspace-invitations",
+];

packages/editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",
@@ -62,7 +62,6 @@
     "linkifyjs": "^4.1.3",
     "lowlight": "^3.0.0",
     "lucide-react": "^0.378.0",
-    "prosemirror-codemark": "^0.4.2",
     "prosemirror-utils": "^1.2.2",
     "react-moveable": "^0.54.2",
     "tailwind-merge": "^1.14.0",

packages/editor/src/ce/extensions/core/extensions.ts

@@ -1,12 +0,0 @@
-import { Extensions } from "@tiptap/core";
-// types
-import { TExtensions } from "@/types";
-
-type Props = {
-  disabledExtensions: TExtensions[];
-};
-
-export const CoreEditorAdditionalExtensions = (props: Props): Extensions => {
-  const {} = props;
-  return [];
-};

packages/editor/src/ce/extensions/core/index.ts

@@ -1,2 +0,0 @@
-export * from "./extensions";
-export * from "./read-only-extensions";

packages/editor/src/ce/extensions/core/read-only-extensions.ts

@@ -1,12 +0,0 @@
-import { Extensions } from "@tiptap/core";
-// types
-import { TExtensions } from "@/types";
-
-type Props = {
-  disabledExtensions: TExtensions[];
-};
-
-export const CoreReadOnlyEditorAdditionalExtensions = (props: Props): Extensions => {
-  const {} = props;
-  return [];
-};

packages/editor/src/ce/extensions/core/without-props.ts

@@ -1,3 +0,0 @@
-import { Extensions } from "@tiptap/core";
-
-export const CoreEditorAdditionalExtensionsWithoutProps: Extensions = [];

packages/editor/src/ce/extensions/document-extensions.tsx

@@ -15,13 +15,7 @@ type Props = {
 
 export const DocumentEditorAdditionalExtensions = (_props: Props) => {
   const { disabledExtensions } = _props;
-  const extensions: Extensions = disabledExtensions?.includes("slash-commands")
-    ? []
-    : [
-        SlashCommands({
-          disabledExtensions,
-        }),
-      ];
+  const extensions: Extensions = disabledExtensions?.includes("slash-commands") ? [] : [SlashCommands()];
 
   return extensions;
 };

packages/editor/src/ce/extensions/index.ts

@@ -1,3 +1 @@
-export * from "./core";
 export * from "./document-extensions";
-export * from "./slash-commands";

packages/editor/src/ce/extensions/slash-commands.tsx

@@ -1,14 +0,0 @@
-// extensions
-import { TSlashCommandAdditionalOption } from "@/extensions";
-// types
-import { TExtensions } from "@/types";
-
-type Props = {
-  disabledExtensions: TExtensions[];
-};
-
-export const coreEditorAdditionalSlashCommandOptions = (props: Props): TSlashCommandAdditionalOption[] => {
-  const {} = props;
-  const options: TSlashCommandAdditionalOption[] = [];
-  return options;
-};

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

@@ -31,6 +31,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     serverHandler,
     tabIndex,
     user,
+    has_enabled_smooth_cursor = true,
   } = props;
 
   const extensions = [];
@@ -45,6 +46,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   // use document editor
   const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
     onTransaction,
+    has_enabled_smooth_cursor,
     disabledExtensions,
     editorClassName,
     embedHandler,

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

@@ -15,7 +15,6 @@ import { EditorReadOnlyRefApi, ICollaborativeDocumentReadOnlyEditor } from "@/ty
 const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOnlyEditor) => {
   const {
     containerClassName,
-    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     embedHandler,
@@ -38,7 +37,6 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
   }
 
   const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
-    disabledExtensions,
     editorClassName,
     extensions,
     fileHandler,

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

@@ -10,10 +10,9 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 // types
-import { EditorReadOnlyRefApi, IMentionHighlight, TDisplayConfig, TExtensions, TFileHandler } from "@/types";
+import { EditorReadOnlyRefApi, IMentionHighlight, TDisplayConfig, TFileHandler } from "@/types";
 
 interface IDocumentReadOnlyEditor {
-  disabledExtensions: TExtensions[];
   id: string;
   initialValue: string;
   containerClassName: string;
@@ -32,7 +31,6 @@ interface IDocumentReadOnlyEditor {
 const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
   const {
     containerClassName,
-    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     embedHandler,
@@ -53,7 +51,6 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
   }
 
   const editor = useReadOnlyEditor({
-    disabledExtensions,
     editorClassName,
     extensions,
     fileHandler,

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

@@ -13,13 +13,13 @@ import { EditorContentWrapper } from "./editor-content";
 type Props = IEditorProps & {
   children?: (editor: Editor) => React.ReactNode;
   extensions: Extension<any, any>[];
+  has_enabled_smooth_cursor: boolean;
 };
 
 export const EditorWrapper: React.FC<Props> = (props) => {
   const {
     children,
     containerClassName,
-    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     extensions,
@@ -27,10 +27,11 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     initialValue,
     fileHandler,
     forwardedRef,
+    handleEditorReady,
+    has_enabled_smooth_cursor,
     mentionHandler,
     onChange,
     onTransaction,
-    handleEditorReady,
     autofocus,
     placeholder,
     tabIndex,
@@ -38,18 +39,18 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   } = props;
 
   const editor = useEditor({
-    disabledExtensions,
     editorClassName,
     enableHistory: true,
     extensions,
     fileHandler,
     forwardedRef,
+    handleEditorReady,
+    has_enabled_smooth_cursor,
     id,
     initialValue,
     mentionHandler,
     onChange,
     onTransaction,
-    handleEditorReady,
     autofocus,
     placeholder,
     tabIndex,

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

@@ -7,7 +7,7 @@ import { EnterKeyExtension } from "@/extensions";
 import { EditorRefApi, ILiteTextEditor } from "@/types";
 
 const LiteTextEditor = (props: ILiteTextEditor) => {
-  const { onEnterKeyPress, disabledExtensions, extensions: externalExtensions = [] } = props;
+  const { onEnterKeyPress, disabledExtensions, extensions: externalExtensions = [], has_enabled_smooth_cursor } = props;
 
   const extensions = useMemo(
     () => [
@@ -17,7 +17,7 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     [externalExtensions, disabledExtensions, onEnterKeyPress]
   );
 
-  return <EditorWrapper {...props} extensions={extensions} />;
+  return <EditorWrapper {...props} extensions={extensions} has_enabled_smooth_cursor={has_enabled_smooth_cursor} />;
 };
 
 const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditor>((props, ref) => (

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

@@ -12,7 +12,6 @@ import { IReadOnlyEditorProps } from "@/types";
 export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
   const {
     containerClassName,
-    disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
     editorClassName = "",
     fileHandler,
@@ -23,7 +22,6 @@ export const ReadOnlyEditorWrapper = (props: IReadOnlyEditorProps) => {
   } = props;
 
   const editor = useReadOnlyEditor({
-    disabledExtensions,
     editorClassName,
     fileHandler,
     forwardedRef,

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

@@ -8,7 +8,13 @@ import { SideMenuExtension, SlashCommands } from "@/extensions";
 import { EditorRefApi, IRichTextEditor } from "@/types";
 
 const RichTextEditor = (props: IRichTextEditor) => {
-  const { disabledExtensions, dragDropEnabled, bubbleMenuEnabled = true, extensions: externalExtensions = [] } = props;
+  const {
+    disabledExtensions,
+    dragDropEnabled,
+    bubbleMenuEnabled = true,
+    extensions: externalExtensions = [],
+    has_enabled_smooth_cursor,
+  } = props;
 
   const getExtensions = useCallback(() => {
     const extensions = [
@@ -19,18 +25,14 @@ const RichTextEditor = (props: IRichTextEditor) => {
       }),
     ];
     if (!disabledExtensions?.includes("slash-commands")) {
-      extensions.push(
-        SlashCommands({
-          disabledExtensions,
-        })
-      );
+      extensions.push(SlashCommands());
     }
 
     return extensions;
   }, [dragDropEnabled, disabledExtensions, externalExtensions]);
 
   return (
-    <EditorWrapper {...props} extensions={getExtensions()}>
+    <EditorWrapper {...props} extensions={getExtensions()} has_enabled_smooth_cursor={has_enabled_smooth_cursor}>
       {(editor) => <>{editor && bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}</>}
     </EditorWrapper>
   );

packages/editor/src/core/extensions/code-mark/actions.ts

@@ -0,0 +1,206 @@
+import type { MarkType } from "@tiptap/pm/model";
+import { type EditorState, type Plugin, type Transaction, TextSelection } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import type { CodemarkState, CursorMetaTr } from "./types";
+import { MAX_MATCH, safeResolve } from "./utils";
+
+export function stepOutsideNextTrAndPass(view: EditorView, plugin: Plugin, action: "click" | "next" = "next"): boolean {
+  const meta: CursorMetaTr = { action };
+  view.dispatch(view.state.tr.setMeta(plugin, meta));
+  return false;
+}
+
+export function onBacktick(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  if (view.state.selection.empty) return false;
+  if (event.metaKey || event.shiftKey || event.altKey || event.ctrlKey) return false;
+  // Create a code mark!
+  const { from, to } = view.state.selection;
+  if (to - from >= MAX_MATCH || view.state.doc.rangeHasMark(from, to, markType)) return false;
+  const tr = view.state.tr.addMark(from, to, markType.create());
+  const selected = tr.setSelection(TextSelection.create(tr.doc, to)).removeStoredMark(markType);
+  view.dispatch(selected);
+  return true;
+}
+
+function onArrowRightInside(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  if (event.metaKey) return stepOutsideNextTrAndPass(view, plugin);
+  if (event.shiftKey || event.altKey || event.ctrlKey) return false;
+  const { selection, doc } = view.state;
+  if (!selection.empty) return false;
+  const pluginState = plugin.getState(view.state) as CodemarkState;
+  const pos = selection.$from;
+  const inCode = !!markType.isInSet(pos.marks());
+  const nextCode = !!markType.isInSet(pos.marksAcross(safeResolve(doc, selection.from + 1)) ?? []);
+
+  if (pos.pos === view.state.doc.nodeSize - 3 && pos.parentOffset === pos.parent.nodeSize - 2 && pluginState?.active) {
+    // Behaviour stops: `code`| at the end of the document
+    view.dispatch(view.state.tr.removeStoredMark(markType));
+    return true;
+  }
+  if (inCode === nextCode && pos.parentOffset !== 0) return false;
+  if (inCode && (!pluginState?.active || pluginState.side === -1) && pos.parentOffset !== 0) {
+    // `code|` --> `code`|
+    view.dispatch(view.state.tr.removeStoredMark(markType));
+    return true;
+  }
+  if (nextCode && pluginState?.side === -1) {
+    // |`code` --> `|code`
+    view.dispatch(view.state.tr.addStoredMark(markType.create()));
+    return true;
+  }
+  return false;
+}
+
+export function onArrowRight(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  const handled = onArrowRightInside(view, plugin, event, markType);
+  if (handled) return true;
+  const { selection } = view.state;
+  const pos = selection.$from;
+  if (selection.empty && pos.parentOffset === pos.parent.nodeSize - 2) {
+    return stepOutsideNextTrAndPass(view, plugin);
+  }
+  return false;
+}
+
+function onArrowLeftInside(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  if (event.metaKey) return stepOutsideNextTrAndPass(view, plugin);
+  if (event.shiftKey || event.altKey || event.ctrlKey) return false;
+  const { selection, doc } = view.state;
+  const pluginState = plugin.getState(view.state) as CodemarkState;
+  const inCode = !!markType.isInSet(selection.$from.marks());
+  const nextCode = !!markType.isInSet(
+    safeResolve(doc, selection.empty ? selection.from - 1 : selection.from + 1).marks() ?? []
+  );
+  if (inCode && pluginState?.side === -1 && selection.$from.parentOffset === 0) {
+    // New line!
+    // ^|`code` --> |^`code`
+    return false;
+  }
+  if (pluginState?.side === 0 && selection.$from.parentOffset === 0) {
+    // New line!
+    // ^`|code` --> ^|`code`
+    view.dispatch(view.state.tr.removeStoredMark(markType));
+    return true;
+  }
+  if (inCode && nextCode && pluginState?.side === 0) {
+    // `code`| --> `code|`
+    view.dispatch(view.state.tr.addStoredMark(markType.create()));
+    return true;
+  }
+  if (inCode && !nextCode && pluginState?.active && selection.$from.parentOffset === 0) {
+    // ^`|code` --> ^|`code`
+    view.dispatch(view.state.tr.removeStoredMark(markType));
+    return true;
+  }
+  if (!inCode && pluginState?.active && pluginState?.side === 0) {
+    // `|code` --> |`code`
+    view.dispatch(view.state.tr.removeStoredMark(markType));
+    return true;
+  }
+  if (inCode === nextCode) return false;
+  if (nextCode || (!selection.empty && inCode)) {
+    // `code`_|_ --> `code`|   nextCode
+    // `code`███ --> `code`|   !selection.empty && inCode
+    // `██de`___ --> `|code`   !selection.empty && nextCode
+    const from = selection.empty ? selection.from - 1 : selection.from;
+    const selected = view.state.tr.setSelection(TextSelection.create(doc, from));
+    if (!selection.empty && nextCode) {
+      view.dispatch(selected.addStoredMark(markType.create()));
+    } else {
+      view.dispatch(selected.removeStoredMark(markType));
+    }
+    return true;
+  }
+  if ((nextCode || (!selection.empty && inCode)) && !pluginState?.active) {
+    // `code`_|_ --> `code`|
+    // `code`███ --> `code`|
+    const from = selection.empty ? selection.from - 1 : selection.from;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(doc, from)).removeStoredMark(markType));
+    return true;
+  }
+  if (inCode && !pluginState?.active && selection.$from.parentOffset > 0) {
+    // `c|ode` --> `|code`
+    view.dispatch(
+      view.state.tr.setSelection(TextSelection.create(doc, selection.from - 1)).addStoredMark(markType.create())
+    );
+    return true;
+  }
+  if (inCode && !nextCode && pluginState?.active && pluginState.side !== -1) {
+    // `x`| --> `x|` - Single character
+    view.dispatch(view.state.tr.addStoredMark(markType.create()));
+    return true;
+  }
+  if (inCode && !nextCode && pluginState?.active) {
+    // `x|` --> `|x` - Single character inside
+    const pos = selection.from - 1;
+    view.dispatch(view.state.tr.setSelection(TextSelection.create(doc, pos)).addStoredMark(markType.create()));
+    return true;
+  }
+  return false;
+}
+
+export function onArrowLeft(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  const handled = onArrowLeftInside(view, plugin, event, markType);
+  if (handled) return true;
+  const { selection } = view.state;
+  const pos = selection.$from;
+  const pluginState = plugin.getState(view.state) as CodemarkState;
+  if (pos.pos === 1 && pos.parentOffset === 0 && pluginState?.side === -1) {
+    return true;
+  }
+  if (selection.empty && pos.parentOffset === 0) {
+    return stepOutsideNextTrAndPass(view, plugin);
+  }
+  return false;
+}
+
+export function onBackspace(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  if (event.metaKey || event.shiftKey || event.altKey || event.ctrlKey) return false;
+  const { selection, doc } = view.state;
+  const from = safeResolve(doc, selection.from - 1);
+  const fromCode = !!markType.isInSet(from.marks());
+  const startOfLine = from.parentOffset === 0;
+  const toCode = !!markType.isInSet(safeResolve(doc, selection.to + 1).marks());
+  if ((!fromCode || startOfLine) && !toCode) {
+    // `x|`    → |
+    // `|████` → |
+    // `|███`█ → |
+    return stepOutsideNextTrAndPass(view, plugin);
+  }
+  // Firefox has difficulty with the decorations on -1.
+  const pluginState = plugin.getState(view.state) as CodemarkState;
+  if (selection.empty && pluginState?.side === -1) {
+    const tr = view.state.tr.delete(selection.from - 1, selection.from);
+    view.dispatch(tr);
+    return true;
+  }
+  return false;
+}
+
+export function onDelete(view: EditorView, plugin: Plugin, event: KeyboardEvent, markType: MarkType): boolean {
+  if (event.metaKey || event.shiftKey || event.altKey || event.ctrlKey) return false;
+  const { selection, doc } = view.state;
+  const fromCode = !!markType.isInSet(selection.$from.marks());
+  const startOfLine = selection.$from.parentOffset === 0;
+  const toCode = !!markType.isInSet(safeResolve(doc, selection.to + 2).marks());
+  if ((!fromCode || startOfLine) && !toCode) {
+    return stepOutsideNextTrAndPass(view, plugin);
+  }
+  return false;
+}
+
+export function stepOutside(state: EditorState, markType: MarkType): Transaction | null {
+  if (!state) return null;
+  const { selection, doc } = state;
+  if (!selection.empty) return null;
+  const stored = !!markType.isInSet(state.storedMarks ?? []);
+  const inCode = !!markType.isInSet(selection.$from.marks());
+  const nextCode = !!markType.isInSet(safeResolve(doc, selection.from + 1).marks() ?? []);
+  const startOfLine = selection.$from.parentOffset === 0;
+  // `code|` --> `code`|
+  // `|code` --> |`code`
+  // ^`|code` --> ^|`code`
+  if (inCode !== nextCode || (!inCode && stored !== inCode) || (inCode && startOfLine))
+    return state.tr.removeStoredMark(markType);
+  return null;
+}

packages/editor/src/core/extensions/code-mark/index.ts

@@ -0,0 +1,116 @@
+// taken from https://github.com/curvenote/editor/tree/main/packages/prosemirror-codemark
+import { type PluginSpec, Plugin } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import type { CodemarkState, CursorMetaTr, Options } from "./types";
+import { getMarkType, codeMarkPluginKey, safeResolve } from "./utils";
+import { createInputRule } from "./input-rules";
+import {
+  onArrowLeft,
+  onArrowRight,
+  onBackspace,
+  onBacktick,
+  onDelete,
+  stepOutside,
+  stepOutsideNextTrAndPass,
+} from "./actions";
+
+function toDom(): Node {
+  const span = document.createElement("span");
+  span.classList.add("fake-cursor");
+  return span;
+}
+
+export function getDecorationPlugin(opts?: Options) {
+  const plugin: Plugin<CodemarkState> = new Plugin({
+    key: codeMarkPluginKey,
+    appendTransaction: (trs, oldState, newState) => {
+      const prev = plugin.getState(oldState) as CodemarkState;
+      const meta = trs[0]?.getMeta(plugin) as CursorMetaTr | null;
+      if (prev?.next || meta?.action === "click") {
+        return stepOutside(newState, getMarkType(newState, opts));
+      }
+      return null;
+    },
+    state: {
+      init: () => null,
+      apply(tr, value, oldState, state): CodemarkState | null {
+        const meta = tr.getMeta(plugin) as CursorMetaTr | null;
+        if (meta?.action === "next") return { next: true };
+
+        const markType = getMarkType(state, opts);
+        const nextMark = markType.isInSet(state.storedMarks ?? state.doc.resolve(tr.selection.from).marks());
+        const inCode = markType.isInSet(state.doc.resolve(tr.selection.from).marks());
+        const nextCode = markType.isInSet(safeResolve(state.doc, tr.selection.from + 1).marks());
+        const startOfLine = tr.selection.$from.parentOffset === 0;
+        if (!tr.selection.empty) return null;
+        if (!nextMark && nextCode && (!inCode || startOfLine)) {
+          // |`code`
+          return { active: true, side: -1 };
+        }
+        if (nextMark && (!inCode || startOfLine)) {
+          // `|code`
+          return { active: true, side: 0 };
+        }
+        if (!nextMark && inCode && !nextCode) {
+          // `code`|
+          return { active: true, side: 0 };
+        }
+        if (nextMark && inCode && !nextCode) {
+          // `code|`
+          return { active: true, side: -1 };
+        }
+        return null;
+      },
+    },
+    props: {
+      attributes: (state) => {
+        const { active = false } = plugin.getState(state) ?? {};
+        return {
+          ...(active ? { class: "no-cursor" } : {}),
+        };
+      },
+      decorations: (state) => {
+        const { active, side } = plugin.getState(state) ?? {};
+        if (!active) return DecorationSet.empty;
+        const deco = Decoration.widget(state.selection.from, toDom, { side });
+        return DecorationSet.create(state.doc, [deco]);
+      },
+      handleKeyDown(view, event) {
+        switch (event.key) {
+          case "`":
+            return onBacktick(view, plugin, event, getMarkType(view, opts));
+          case "ArrowRight":
+            return onArrowRight(view, plugin, event, getMarkType(view, opts));
+          case "ArrowLeft":
+            return onArrowLeft(view, plugin, event, getMarkType(view, opts));
+          case "Backspace":
+            return onBackspace(view, plugin, event, getMarkType(view, opts));
+          case "Delete":
+            return onDelete(view, plugin, event, getMarkType(view, opts));
+          case "ArrowUp":
+          case "ArrowDown":
+          case "Home":
+          case "End":
+            return stepOutsideNextTrAndPass(view, plugin);
+          case "e":
+          case "a":
+            if (!event.ctrlKey) return false;
+            return stepOutsideNextTrAndPass(view, plugin);
+          default:
+            return false;
+        }
+      },
+      handleClick(view) {
+        return stepOutsideNextTrAndPass(view, plugin, "click");
+      },
+    },
+  } as PluginSpec<CodemarkState>);
+  return plugin;
+}
+
+export function codemark(opts?: Options) {
+  const cursorPlugin = getDecorationPlugin(opts);
+  const inputRule = createInputRule(cursorPlugin, opts);
+  const rules: Plugin[] = [cursorPlugin, inputRule];
+  return rules;
+}

packages/editor/src/core/extensions/code-mark/input-rules.ts

@@ -0,0 +1,138 @@
+import type { MarkType } from "@tiptap/pm/model";
+import { type PluginSpec, type Transaction, Plugin, TextSelection } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import type { Options } from "./types";
+import { getMarkType, MAX_MATCH } from "./utils";
+
+type InputRuleState = {
+  transform: Transaction;
+  from: number;
+  to: number;
+  text: string;
+} | null;
+
+type Plugins = { input: Plugin; cursor: Plugin };
+
+type Handler = (
+  markType: MarkType,
+  state: EditorView,
+  text: string,
+  match: RegExpExecArray,
+  from: number,
+  to: number,
+  plugin: Plugins
+) => boolean;
+
+type Rule = {
+  match: RegExp;
+  handler: Handler;
+};
+
+function stopMatch(markType: MarkType, view: EditorView, from: number, to: number): boolean {
+  const stored = markType.isInSet(view.state.storedMarks ?? view.state.doc.resolve(from).marks());
+  const range = view.state.doc.rangeHasMark(from, to, markType);
+  // Don't create it if there is code in between!
+  if (stored || range) return true;
+  return false;
+}
+
+const markBefore: Rule = {
+  match: /`((?:[^`\w]|[\w])+)`$/,
+  handler: (markType, view, text, match, from, to, plugins) => {
+    if (stopMatch(markType, view, from, to)) return false;
+    const code = match[1];
+    const mark = markType.create();
+    const pos = from + code.length;
+    const tr = view.state.tr.delete(from, to).insertText(code).addMark(from, pos, mark);
+    const selected = tr.setSelection(TextSelection.create(tr.doc, pos)).removeStoredMark(markType);
+    const withMeta = selected.setMeta(plugins.input, {
+      transform: selected,
+      from,
+      to,
+      text: `\`${code}${text}`,
+    });
+    view.dispatch(withMeta);
+    return true;
+  },
+};
+
+const markAfter: Rule = {
+  match: /^`((?:[^`\w]|[\w])+)`/,
+  handler: (markType, view, text, match, from, to, plugins) => {
+    if (stopMatch(markType, view, from, to)) return false;
+    const mark = markType.create();
+    const code = match[1];
+    const pos = from;
+    const tr = view.state.tr
+      .delete(from, to)
+      .insertText(code)
+      .addMark(from, from + code.length, mark);
+    const selected = tr.setSelection(TextSelection.create(tr.doc, pos)).addStoredMark(markType.create());
+    const withMeta = selected.setMeta(plugins.input, {
+      transform: selected,
+      from,
+      to,
+      text: `\`${code}${text}`,
+    });
+    view.dispatch(withMeta);
+    return true;
+  },
+};
+
+function run(markType: MarkType, view: EditorView, from: number, to: number, text: string, plugins: Plugins) {
+  if (view.composing) return false;
+  const { state } = view;
+  const $from = state.doc.resolve(from);
+  if ($from.parent.type.spec.code) return false;
+
+  const leafText = "\ufffc";
+  const textBefore =
+    $from.parent.textBetween(Math.max(0, $from.parentOffset - MAX_MATCH), $from.parentOffset, undefined, leafText) +
+    text;
+  const textAfter =
+    text +
+    $from.parent.textBetween(
+      $from.parentOffset,
+      Math.min($from.parent.nodeSize - 2, $from.parentOffset + MAX_MATCH),
+      undefined,
+      leafText
+    );
+  const matchB = markBefore.match.exec(textBefore);
+  const matchA = markAfter.match.exec(textAfter);
+  if (matchB) {
+    const handled = markBefore.handler(
+      markType,
+      view,
+      text,
+      matchB,
+      from - matchB[0].length + text.length,
+      to,
+      plugins
+    );
+    if (handled) return handled;
+  }
+  if (matchA)
+    return markAfter.handler(markType, view, text, matchA, from, to + matchA[0].length - text.length, plugins);
+  return false;
+}
+
+export function createInputRule(cursorPlugin: Plugin, opts?: Options) {
+  const plugin: Plugin<InputRuleState> = new Plugin({
+    isInputRules: true,
+    state: {
+      init: () => null,
+      apply(tr, prev) {
+        const meta = tr.getMeta(plugin);
+        if (meta) return meta;
+        return tr.selectionSet || tr.docChanged ? null : prev;
+      },
+    },
+    props: {
+      handleTextInput(view, from, to, text) {
+        const markType = getMarkType(view, opts);
+        return run(markType, view, from, to, text, { input: plugin, cursor: cursorPlugin });
+      },
+    },
+  } as PluginSpec<InputRuleState>);
+  return plugin;
+}

packages/editor/src/core/extensions/code-mark/types.ts

@@ -0,0 +1,14 @@
+import type { MarkType } from "prosemirror-model";
+
+export type Options = {
+  markType?: MarkType;
+};
+
+export type CodemarkState = {
+  active?: boolean;
+  side?: -1 | 0;
+  next?: true; // Move outside of code after next transaction
+  click?: true; // When the editor is clicked on
+} | null;
+
+export type CursorMetaTr = { action: "next" } | { action: "click" };

packages/editor/src/core/extensions/code-mark/utils.ts

@@ -0,0 +1,16 @@
+import type { MarkType, Node } from "@tiptap/pm/model";
+import { type EditorState, PluginKey } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import type { Options } from "./types";
+
+export const MAX_MATCH = 100;
+export const codeMarkPluginKey = new PluginKey("codemark");
+
+export function getMarkType(view: EditorView | EditorState, opts?: Options): MarkType {
+  if ("schema" in view) return opts?.markType ?? view.schema.marks.code;
+  return opts?.markType ?? view.state.schema.marks.code;
+}
+
+export function safeResolve(doc: Node, pos: number) {
+  return doc.resolve(Math.min(Math.max(1, pos), doc.nodeSize - 2));
+}

packages/editor/src/core/extensions/core-without-props.ts

@@ -19,8 +19,6 @@ import { TableHeader, TableCell, TableRow, Table } from "./table";
 import { CustomTextAlignExtension } from "./text-align";
 import { CustomCalloutExtensionConfig } from "./callout/extension-config";
 import { CustomColorExtension } from "./custom-color";
-// plane editor extensions
-import { CoreEditorAdditionalExtensionsWithoutProps } from "@/plane-editor/extensions/core/without-props";
 
 export const CoreEditorExtensionsWithoutProps = [
   StarterKit.configure({
@@ -91,7 +89,6 @@ export const CoreEditorExtensionsWithoutProps = [
   CustomTextAlignExtension,
   CustomCalloutExtensionConfig,
   CustomColorExtension,
-  ...CoreEditorAdditionalExtensionsWithoutProps,
 ];
 
 export const DocumentEditorExtensionsWithoutProps = [IssueWidgetWithoutProps()];

packages/editor/src/core/extensions/custom-code-inline.ts

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import codemark from "prosemirror-codemark";
+import { codemark } from "@/extensions/code-mark";
 
 export const CustomCodeMarkPlugin = Extension.create({
   name: "codemarkPlugin",

packages/editor/src/core/extensions/custom-image/custom-image.ts

@@ -1,9 +1,11 @@
 import { Editor, mergeAttributes } from "@tiptap/core";
 import { Image } from "@tiptap/extension-image";
+import { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import { Node } from "@tiptap/pm/model";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // extensions
-import { CustomImageNode } from "@/extensions/custom-image";
+import { CustomImageNode, ImageAttributes } from "@/extensions/custom-image";
 // plugins
 import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
 // types
@@ -124,9 +126,14 @@ export const CustomImageExtension = (props: TFileHandler) => {
         deletedImageSet: new Map<string, boolean>(),
         uploadInProgress: false,
         maxFileSize,
-        // escape markdown for images
         markdown: {
-          serialize() {},
+          serialize(state: MarkdownSerializerState, node: Node) {
+            const attrs = node.attrs as ImageAttributes;
+            const imageSource = state.esc(this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src);
+            const imageWidth = state.esc(attrs.width?.toString());
+            state.write(`<img src="${state.esc(imageSource)}" width="${imageWidth}" />`);
+            state.closeBlock(node);
+          },
         },
       };
     },

packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts

@@ -1,8 +1,10 @@
 import { mergeAttributes } from "@tiptap/core";
 import { Image } from "@tiptap/extension-image";
+import { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import { Node } from "@tiptap/pm/model";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 // components
-import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
+import { CustomImageNode, ImageAttributes, UploadImageExtensionStorage } from "@/extensions/custom-image";
 // types
 import { TFileHandler } from "@/types";
 
@@ -52,9 +54,14 @@ export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAsset
     addStorage() {
       return {
         fileMap: new Map(),
-        // escape markdown for images
         markdown: {
-          serialize() {},
+          serialize(state: MarkdownSerializerState, node: Node) {
+            const attrs = node.attrs as ImageAttributes;
+            const imageSource = state.esc(this?.editor?.commands?.getImageSource?.(attrs.src) || attrs.src);
+            const imageWidth = state.esc(attrs.width?.toString());
+            state.write(`<img src="${state.esc(imageSource)}" width="${imageWidth}" />`);
+            state.closeBlock(node);
+          },
         },
       };
     },

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

@@ -1,4 +1,3 @@
-import { Extensions } from "@tiptap/core";
 import CharacterCount from "@tiptap/extension-character-count";
 import Placeholder from "@tiptap/extension-placeholder";
 import TaskItem from "@tiptap/extension-task-item";
@@ -25,6 +24,7 @@ import {
   DropHandlerExtension,
   ImageExtension,
   ListKeymap,
+  SmoothCursorExtension,
   Table,
   TableCell,
   TableHeader,
@@ -33,13 +33,11 @@ import {
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 // types
-import { IMentionHighlight, IMentionSuggestion, TExtensions, TFileHandler } from "@/types";
-// plane editor extensions
-import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
+import { IMentionHighlight, IMentionSuggestion, TFileHandler } from "@/types";
 
 type TArguments = {
-  disabledExtensions: TExtensions[];
   enableHistory: boolean;
+  has_enabled_smooth_cursor: boolean;
   fileHandler: TFileHandler;
   mentionConfig: {
     mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
@@ -49,8 +47,8 @@ type TArguments = {
   tabIndex?: number;
 };
 
-export const CoreEditorExtensions = (args: TArguments): Extensions => {
-  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
+export const CoreEditorExtensions = (args: TArguments) => {
+  const { enableHistory, fileHandler, mentionConfig, placeholder, tabIndex, has_enabled_smooth_cursor } = args;
 
   return [
     StarterKit.configure({
@@ -166,8 +164,6 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CustomTextAlignExtension,
     CustomCalloutExtension,
     CustomColorExtension,
-    ...CoreEditorAdditionalExtensions({
-      disabledExtensions,
-    }),
+    has_enabled_smooth_cursor ? SmoothCursorExtension : null,
   ];
 };

packages/editor/src/core/extensions/index.ts

@@ -23,3 +23,5 @@ export * from "./quote";
 export * from "./read-only-extensions";
 export * from "./side-menu";
 export * from "./text-align";
+export * from "./smooth-cursor";
+export * from "./code-mark";

packages/editor/src/core/extensions/read-only-extensions.tsx

@@ -1,4 +1,3 @@
-import { Extensions } from "@tiptap/core";
 import CharacterCount from "@tiptap/extension-character-count";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
@@ -29,20 +28,17 @@ import {
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 // types
-import { IMentionHighlight, TExtensions, TFileHandler } from "@/types";
-// plane editor extensions
-import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
+import { IMentionHighlight, TFileHandler } from "@/types";
 
 type Props = {
-  disabledExtensions: TExtensions[];
   fileHandler: Pick<TFileHandler, "getAssetSrc">;
   mentionConfig: {
     mentionHighlights?: () => Promise<IMentionHighlight[]>;
   };
 };
 
-export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
-  const { disabledExtensions, fileHandler, mentionConfig } = props;
+export const CoreReadOnlyEditorExtensions = (props: Props) => {
+  const { fileHandler, mentionConfig } = props;
 
   return [
     StarterKit.configure({
@@ -132,8 +128,5 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
     HeadingListExtension,
     CustomTextAlignExtension,
     CustomCalloutReadOnlyExtension,
-    ...CoreReadOnlyEditorAdditionalExtensions({
-      disabledExtensions,
-    }),
   ];
 };

packages/editor/src/core/extensions/slash-commands/command-items-list.tsx

@@ -39,27 +39,17 @@ import {
   setText,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, TExtensions, TSlashCommandSectionKeys } from "@/types";
-// plane editor extensions
-import { coreEditorAdditionalSlashCommandOptions } from "@/plane-editor/extensions";
-// local types
-import { TSlashCommandAdditionalOption } from "./root";
+import { CommandProps, ISlashCommandItem } from "@/types";
 
 export type TSlashCommandSection = {
-  key: TSlashCommandSectionKeys;
+  key: string;
   title?: string;
   items: ISlashCommandItem[];
 };
 
-type TArgs = {
-  additionalOptions?: TSlashCommandAdditionalOption[];
-  disabledExtensions: TExtensions[];
-};
-
 export const getSlashCommandFilteredSections =
-  (args: TArgs) =>
+  (additionalOptions?: ISlashCommandItem[]) =>
   ({ query }: { query: string }): TSlashCommandSection[] => {
-    const { additionalOptions, disabledExtensions } = args;
     const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
       {
         key: "general",
@@ -211,7 +201,7 @@ export const getSlashCommandFilteredSections =
         ],
       },
       {
-        key: "text-colors",
+        key: "text-color",
         title: "Colors",
         items: [
           {
@@ -252,7 +242,7 @@ export const getSlashCommandFilteredSections =
         ],
       },
       {
-        key: "background-colors",
+        key: "background-color",
         title: "Background colors",
         items: [
           {
@@ -289,19 +279,8 @@ export const getSlashCommandFilteredSections =
       },
     ];
 
-    [
-      ...(additionalOptions ?? []),
-      ...coreEditorAdditionalSlashCommandOptions({
-        disabledExtensions,
-      }),
-    ]?.forEach((item) => {
-      const sectionToPushTo = SLASH_COMMAND_SECTIONS.find((s) => s.key === item.section) ?? SLASH_COMMAND_SECTIONS[0];
-      const itemIndexToPushAfter = sectionToPushTo.items.findIndex((i) => i.commandKey === item.pushAfter);
-      if (itemIndexToPushAfter !== -1) {
-        sectionToPushTo.items.splice(itemIndexToPushAfter + 1, 0, item);
-      } else {
-        sectionToPushTo.items.push(item);
-      }
+    additionalOptions?.map((item) => {
+      SLASH_COMMAND_SECTIONS?.[0]?.items.push(item);
     });
 
     const filteredSlashSections = SLASH_COMMAND_SECTIONS.map((section) => ({

packages/editor/src/core/extensions/slash-commands/root.tsx

@@ -3,7 +3,7 @@ import { ReactRenderer } from "@tiptap/react";
 import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
 import tippy from "tippy.js";
 // types
-import { ISlashCommandItem, TEditorCommands, TExtensions, TSlashCommandSectionKeys } from "@/types";
+import { ISlashCommandItem } from "@/types";
 // components
 import { getSlashCommandFilteredSections } from "./command-items-list";
 import { SlashCommandsMenu, SlashCommandsMenuProps } from "./command-menu";
@@ -12,11 +12,6 @@ export type SlashCommandOptions = {
   suggestion: Omit<SuggestionOptions, "editor">;
 };
 
-export type TSlashCommandAdditionalOption = ISlashCommandItem & {
-  section: TSlashCommandSectionKeys;
-  pushAfter: TEditorCommands;
-};
-
 const Command = Extension.create<SlashCommandOptions>({
   name: "slash-command",
   addOptions() {
@@ -107,15 +102,10 @@ const renderItems = () => {
   };
 };
 
-type TExtensionProps = {
-  additionalOptions?: TSlashCommandAdditionalOption[];
-  disabledExtensions: TExtensions[];
-};
-
-export const SlashCommands = (props: TExtensionProps) =>
+export const SlashCommands = (additionalOptions?: ISlashCommandItem[]) =>
   Command.configure({
     suggestion: {
-      items: getSlashCommandFilteredSections(props),
+      items: getSlashCommandFilteredSections(additionalOptions),
       render: renderItems,
     },
   });

packages/editor/src/core/extensions/smooth-cursor/index.ts

@@ -0,0 +1,9 @@
+import { Extension } from "@tiptap/core";
+import { smoothCursorPlugin } from "./plugin";
+
+export const SmoothCursorExtension = Extension.create({
+  name: "smoothCursorExtension",
+  addProseMirrorPlugins() {
+    return [smoothCursorPlugin()];
+  },
+});

packages/editor/src/core/extensions/smooth-cursor/plugin.ts

@@ -0,0 +1,166 @@
+import { type Selection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { type EditorView, Decoration, DecorationSet } from "@tiptap/pm/view";
+import { codeMarkPluginKey } from "@/extensions/code-mark/utils";
+
+export const PROSEMIRROR_SMOOTH_CURSOR_CLASS = "prosemirror-smooth-cursor";
+const BLINK_DELAY = 750;
+
+export function smoothCursorPlugin(): Plugin {
+  let smoothCursor: HTMLElement | null = typeof document === "undefined" ? null : document.createElement("div");
+  let rafId: number | undefined;
+  let blinkTimeoutId: number | undefined;
+  let isEditorFocused = false;
+  let lastCursorPosition = { x: 0, y: 0 };
+
+  function isCodemarkCursorActive(view: EditorView) {
+    const codemarkState = codeMarkPluginKey.getState(view.state);
+    return codemarkState?.active === true;
+  }
+
+  function updateCursor(view?: EditorView, cursor?: HTMLElement) {
+    if (!view || !view.dom || view.isDestroyed || !cursor) return;
+
+    if (!isEditorFocused || isCodemarkCursorActive(view)) {
+      cursor.style.display = "none";
+      return;
+    }
+
+    cursor.style.display = "block";
+
+    const { state, dom } = view;
+    const { selection } = state;
+    if (!isTextSelection(selection)) return;
+
+    const cursorRect = getCursorRect(view, selection.$head === selection.$from);
+
+    if (!cursorRect) return cursor;
+
+    const editorRect = dom.getBoundingClientRect();
+
+    const className = PROSEMIRROR_SMOOTH_CURSOR_CLASS;
+
+    // Calculate the exact position
+    const x = cursorRect.left - editorRect.left;
+    const y = cursorRect.top - editorRect.top;
+
+    // Check if cursor position has changed
+    if (x !== lastCursorPosition.x || y !== lastCursorPosition.y) {
+      lastCursorPosition = { x, y };
+      cursor.classList.remove(`${className}--blinking`);
+
+      // Clear existing timeout
+      if (blinkTimeoutId) {
+        window.clearTimeout(blinkTimeoutId);
+      }
+
+      // Set new timeout for blinking
+      blinkTimeoutId = window.setTimeout(() => {
+        if (cursor && isEditorFocused) {
+          cursor.classList.add(`${className}--blinking`);
+        }
+      }, BLINK_DELAY);
+    }
+
+    cursor.className = className;
+    cursor.style.height = `${cursorRect.bottom - cursorRect.top}px`;
+
+    rafId = requestAnimationFrame(() => {
+      cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    });
+  }
+
+  return new Plugin({
+    key,
+    view: (view) => {
+      const doc = view.dom.ownerDocument;
+      smoothCursor = smoothCursor || document.createElement("div");
+      const cursor = smoothCursor;
+
+      const update = () => {
+        if (rafId !== undefined) {
+          cancelAnimationFrame(rafId);
+        }
+        updateCursor(view, cursor);
+      };
+
+      const handleFocus = () => {
+        isEditorFocused = true;
+        update();
+      };
+
+      const handleBlur = () => {
+        isEditorFocused = false;
+        if (blinkTimeoutId) {
+          window.clearTimeout(blinkTimeoutId);
+        }
+        cursor.classList.remove(`${PROSEMIRROR_SMOOTH_CURSOR_CLASS}--blinking`);
+        update();
+      };
+
+      let observer: ResizeObserver | undefined;
+      if (window.ResizeObserver) {
+        observer = new window.ResizeObserver(update);
+        observer?.observe(view.dom);
+      }
+
+      doc.addEventListener("selectionchange", update);
+      view.dom.addEventListener("focus", handleFocus);
+      view.dom.addEventListener("blur", handleBlur);
+
+      return {
+        update,
+        destroy: () => {
+          doc.removeEventListener("selectionchange", update);
+          view.dom.removeEventListener("focus", handleFocus);
+          view.dom.removeEventListener("blur", handleBlur);
+          observer?.unobserve(view.dom);
+          if (rafId !== undefined) {
+            cancelAnimationFrame(rafId);
+          }
+          if (blinkTimeoutId) {
+            window.clearTimeout(blinkTimeoutId);
+          }
+        },
+      };
+    },
+    props: {
+      decorations: (state) => {
+        if (!smoothCursor || !isTextSelection(state.selection) || !state.selection.empty) return;
+
+        return DecorationSet.create(state.doc, [
+          Decoration.widget(0, smoothCursor, {
+            key: PROSEMIRROR_SMOOTH_CURSOR_CLASS,
+          }),
+        ]);
+      },
+
+      attributes: () => ({
+        class: isEditorFocused ? "smooth-cursor-enabled" : "",
+      }),
+    },
+  });
+}
+
+const key = new PluginKey(PROSEMIRROR_SMOOTH_CURSOR_CLASS);
+
+function getCursorRect(
+  view: EditorView,
+  toStart: boolean
+): { left: number; right: number; top: number; bottom: number } | null {
+  const selection = window.getSelection();
+  if (!selection || !selection.rangeCount) return null;
+
+  const range = selection?.getRangeAt(0)?.cloneRange();
+  if (!range) return null;
+
+  range.collapse(toStart);
+  const rects = range.getClientRects();
+  const rect = rects?.length ? rects[rects.length - 1] : null;
+  if (rect?.height) return rect;
+
+  return view.coordsAtPos(view.state.selection.head);
+}
+
+function isTextSelection(selection: Selection): selection is TextSelection {
+  return selection && typeof selection === "object" && "$cursor" in selection;
+}

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

@@ -14,6 +14,7 @@ import { TCollaborativeEditorProps } from "@/types";
 export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   const {
     onTransaction,
+    has_enabled_smooth_cursor,
     disabledExtensions,
     editorClassName,
     editorProps = {},
@@ -75,7 +76,6 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   }, [provider, id]);
 
   const editor = useEditor({
-    disabledExtensions,
     id,
     onTransaction,
     editorProps,
@@ -100,6 +100,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     ],
     fileHandler,
     handleEditorReady,
+    has_enabled_smooth_cursor,
     forwardedRef,
     mentionHandler,
     placeholder,

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

@@ -16,24 +16,17 @@ import { IMarking, scrollSummary, scrollToNodeViaDOMCoordinates } from "@/helper
 // props
 import { CoreEditorProps } from "@/props";
 // types
-import {
-  EditorRefApi,
-  IMentionHighlight,
-  IMentionSuggestion,
-  TEditorCommands,
-  TExtensions,
-  TFileHandler,
-} from "@/types";
+import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TEditorCommands, TFileHandler } from "@/types";
 
 export interface CustomEditorProps {
   editorClassName: string;
   editorProps?: EditorProps;
   enableHistory: boolean;
-  disabledExtensions: TExtensions[];
   extensions?: any;
   fileHandler: TFileHandler;
   forwardedRef?: MutableRefObject<EditorRefApi | null>;
   handleEditorReady?: (value: boolean) => void;
+  has_enabled_smooth_cursor?: boolean;
   id?: string;
   initialValue?: string;
   mentionHandler: {
@@ -53,7 +46,6 @@ export interface CustomEditorProps {
 
 export const useEditor = (props: CustomEditorProps) => {
   const {
-    disabledExtensions,
     editorClassName,
     editorProps = {},
     enableHistory,
@@ -71,6 +63,7 @@ export const useEditor = (props: CustomEditorProps) => {
     tabIndex,
     value,
     autofocus = false,
+    has_enabled_smooth_cursor = true,
   } = props;
   // states
 
@@ -88,7 +81,7 @@ export const useEditor = (props: CustomEditorProps) => {
     },
     extensions: [
       ...CoreEditorExtensions({
-        disabledExtensions,
+        has_enabled_smooth_cursor,
         enableHistory,
         fileHandler,
         mentionConfig: {

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

@@ -11,7 +11,6 @@ import { TReadOnlyCollaborativeEditorProps } from "@/types";
 
 export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEditorProps) => {
   const {
-    disabledExtensions,
     editorClassName,
     editorProps = {},
     extensions,
@@ -67,7 +66,6 @@ export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEdit
   }, [provider, id]);
 
   const editor = useReadOnlyEditor({
-    disabledExtensions,
     editorProps,
     editorClassName,
     extensions: [

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

@@ -11,15 +11,14 @@ import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // props
 import { CoreReadOnlyEditorProps } from "@/props";
 // types
-import { EditorReadOnlyRefApi, IMentionHighlight, TExtensions, TFileHandler } from "@/types";
+import { EditorReadOnlyRefApi, IMentionHighlight, TFileHandler } from "@/types";
 
 interface CustomReadOnlyEditorProps {
-  disabledExtensions: TExtensions[];
-  editorClassName: string;
-  editorProps?: EditorProps;
-  extensions?: any;
-  forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
   initialValue?: string;
+  editorClassName: string;
+  forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
+  extensions?: any;
+  editorProps?: EditorProps;
   fileHandler: Pick<TFileHandler, "getAssetSrc">;
   handleEditorReady?: (value: boolean) => void;
   mentionHandler: {
@@ -30,7 +29,6 @@ interface CustomReadOnlyEditorProps {
 
 export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
   const {
-    disabledExtensions,
     initialValue,
     editorClassName,
     forwardedRef,
@@ -56,7 +54,6 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
     },
     extensions: [
       ...CoreReadOnlyEditorExtensions({
-        disabledExtensions,
         mentionConfig: {
           mentionHighlights: mentionHandler.highlights,
         },

packages/editor/src/core/types/collaboration.ts

@@ -20,7 +20,7 @@ export type TServerHandler = {
 };
 
 type TCollaborativeEditorHookProps = {
-  disabledExtensions: TExtensions[];
+  disabledExtensions?: TExtensions[];
   editorClassName: string;
   editorProps?: EditorProps;
   extensions?: Extensions;
@@ -36,6 +36,7 @@ type TCollaborativeEditorHookProps = {
 };
 
 export type TCollaborativeEditorProps = TCollaborativeEditorHookProps & {
+  has_enabled_smooth_cursor: boolean;
   onTransaction?: () => void;
   embedHandler?: TEmbedConfig;
   fileHandler: TFileHandler;

packages/editor/src/core/types/editor.ts

@@ -104,7 +104,7 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
 export interface IEditorProps {
   containerClassName?: string;
   displayConfig?: TDisplayConfig;
-  disabledExtensions: TExtensions[];
+  disabledExtensions?: TExtensions[];
   editorClassName?: string;
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
@@ -117,11 +117,12 @@ export interface IEditorProps {
   onChange?: (json: object, html: string) => void;
   onTransaction?: () => void;
   handleEditorReady?: (value: boolean) => void;
+  has_enabled_smooth_cursor?: boolean;
   autofocus?: boolean;
   onEnterKeyPress?: (e?: any) => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
-  value?: string | null; 
+  value?: string | null;
 }
 export interface ILiteTextEditor extends IEditorProps {
   extensions?: any[];
@@ -141,12 +142,12 @@ export interface ICollaborativeDocumentEditor
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
   user: TUserDetails;
+  has_enabled_smooth_cursor?: boolean;
 }
 
 // read only editor props
 export interface IReadOnlyEditorProps {
   containerClassName?: string;
-  disabledExtensions: TExtensions[];
   displayConfig?: TDisplayConfig;
   editorClassName?: string;
   fileHandler: Pick<TFileHandler, "getAssetSrc">;

packages/editor/src/core/types/extensions.ts

@@ -1 +1 @@
-export type TExtensions = "ai" | "collaboration-cursor" | "issue-embed" | "slash-commands" | "enter-key";
+export type TExtensions = "ai" | "collaboration-cursor" | "issue-embed" | "slash-commands"| "enter-key";

packages/editor/src/core/types/slash-commands-suggestion.ts

@@ -8,8 +8,6 @@ export type CommandProps = {
   range: Range;
 };
 
-export type TSlashCommandSectionKeys = "general" | "text-colors" | "background-colors";
-
 export type ISlashCommandItem = {
   commandKey: TEditorCommands;
   key: string;

packages/editor/src/styles/editor.css

@@ -1,3 +1,7 @@
+:root {
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
 .ProseMirror {
   position: relative;
   word-wrap: break-word;
@@ -179,26 +183,13 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   }
 }
 
-ul[data-type="taskList"] li > div {
-  & > p {
-    margin-top: 10px;
-    transition: color 0.2s ease;
-  }
-
-  [data-text-color] {
-    transition: opacity 0.2s ease;
-  }
+ul[data-type="taskList"] li > div > p {
+  margin-top: 10px;
 }
 
-ul[data-type="taskList"] li[data-checked="true"] {
-  & > div > p {
-    color: rgb(var(--color-text-400));
-  }
-
-  [data-text-color] {
-    opacity: 0.6;
-    transition: opacity 0.2s ease;
-  }
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+  color: rgb(var(--color-text-400));
+  transition: color 0.2s ease;
 }
 /* end to-do list */
 
@@ -487,4 +478,34 @@ p + p {
 [data-background-color="purple"] {
   background-color: var(--editor-colors-purple-background);
 }
-/* end background colors */
+
+.smooth-cursor-enabled {
+  caret-color: transparent;
+}
+
+.prosemirror-smooth-cursor {
+  position: absolute;
+  width: 2px;
+  background-color: currentColor;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  transition: transform 0.2s var(--ease-out-quart);
+  will-change: transform;
+  opacity: 0.8;
+  z-index: 1000;
+}
+
+.prosemirror-smooth-cursor--blinking {
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  from,
+  to {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}

packages/eslint-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plane/eslint-config",
   "private": true,
-  "version": "0.24.0",
+  "version": "0.23.1",
   "files": [
     "library.js",
     "next.js",

packages/helpers/hooks/index.ts

@@ -1,2 +1 @@
-export * from "./use-local-storage";
 export * from "./use-outside-click-detector";

packages/helpers/hooks/use-local-storage.tsx

@@ -1,59 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
-  if (typeof window === undefined || typeof window === "undefined")
-    return defaultValue;
-  try {
-    const item = window.localStorage.getItem(key);
-    return item ? JSON.parse(item) : defaultValue;
-  } catch (error) {
-    window.localStorage.removeItem(key);
-    return defaultValue;
-  }
-};
-
-export const setValueIntoLocalStorage = (key: string, value: any) => {
-  if (typeof window === undefined || typeof window === "undefined")
-    return false;
-  try {
-    window.localStorage.setItem(key, JSON.stringify(value));
-    return true;
-  } catch (error) {
-    return false;
-  }
-};
-
-export const useLocalStorage = <T,>(key: string, initialValue: T) => {
-  const [storedValue, setStoredValue] = useState<T | null>(() =>
-    getValueFromLocalStorage(key, initialValue)
-  );
-
-  const setValue = useCallback(
-    (value: T) => {
-      window.localStorage.setItem(key, JSON.stringify(value));
-      setStoredValue(value);
-      window.dispatchEvent(new Event(`local-storage:${key}`));
-    },
-    [key]
-  );
-
-  const clearValue = useCallback(() => {
-    window.localStorage.removeItem(key);
-    setStoredValue(null);
-    window.dispatchEvent(new Event(`local-storage:${key}`));
-  }, [key]);
-
-  const reHydrate = useCallback(() => {
-    const data = getValueFromLocalStorage(key, initialValue);
-    setStoredValue(data);
-  }, [key, initialValue]);
-
-  useEffect(() => {
-    window.addEventListener(`local-storage:${key}`, reHydrate);
-    return () => {
-      window.removeEventListener(`local-storage:${key}`, reHydrate);
-    };
-  }, [key, reHydrate]);
-
-  return { storedValue, setValue, clearValue } as const;
-};

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/helpers",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "description": "Helper functions shared across multiple apps internally",
   "private": true,
   "main": "./dist/index.js",

packages/tailwind-config-custom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "private": true,
   "types": "./src/index.d.ts",
   "main": "./src/index.d.ts"

packages/types/src/issues/issue.d.ts

@@ -95,7 +95,6 @@ export type TIssuesResponse = {
   total_pages: number;
   extra_stats: null;
   results: TIssueResponseResults;
-  total_results: number;
 };
 
 export type TBulkIssueProperties = Pick<

packages/types/src/users.d.ts

@@ -62,6 +62,7 @@ export type TUserProfile = {
   billing_address_country: string | undefined;
   billing_address: string | undefined;
   has_billing_address: boolean;
+  has_enabled_smooth_cursor: boolean;
   created_at: Date | string;
   updated_at: Date | string;
 };

packages/typescript-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/typescript-config",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "private": true,
   "files": [
     "base.json",

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.24.0",
+  "version": "0.23.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

packages/ui/src/collapsible/collapsible-button.tsx

@@ -8,27 +8,12 @@ type Props = {
   hideChevron?: boolean;
   indicatorElement?: React.ReactNode;
   actionItemElement?: React.ReactNode;
-  className?: string;
-  titleClassName?: string;
 };
 
 export const CollapsibleButton: FC<Props> = (props) => {
-  const {
-    isOpen,
-    title,
-    hideChevron = false,
-    indicatorElement,
-    actionItemElement,
-    className = "",
-    titleClassName = "",
-  } = props;
+  const { isOpen, title, hideChevron = false, indicatorElement, actionItemElement } = props;
   return (
-    <div
-      className={cn(
-        "flex items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-custom-border-200",
-        className
-      )}
-    >
+    <div className="flex items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-custom-border-200">
       <div className="flex items-center gap-3.5">
         <div className="flex items-center gap-3">
           {!hideChevron && (
@@ -38,7 +23,7 @@ export const CollapsibleButton: FC<Props> = (props) => {
               })}
             />
           )}
-          <span className={cn("text-base text-custom-text-100 font-medium", titleClassName)}>{title}</span>
+          <span className="text-base text-custom-text-100 font-medium">{title}</span>
         </div>
         {indicatorElement && indicatorElement}
       </div>

packages/ui/src/dropdown/common/loader.tsx

@@ -1,10 +1,9 @@
-import range from "lodash/range";
 import React from "react";
 
 export const DropdownOptionsLoader = () => (
   <div className="flex flex-col gap-1 animate-pulse">
-    {range(6).map((index) => (
-      <div key={index} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
+    {Array.from({ length: 6 }, (_, i) => (
+      <div key={i} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
     ))}
   </div>
 );

packages/ui/src/icons/comment-fill-icon.tsx

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const CommentFillIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.848 2.771C7.21613 2.4234 9.60649 2.24927 12 2.25C14.43 2.25 16.817 2.428 19.152 2.77C21.13 3.062 22.5 4.794 22.5 6.74V12.76C22.5 14.706 21.13 16.438 19.152 16.73C17.212 17.014 15.236 17.185 13.23 17.235C13.1303 17.2369 13.0351 17.277 12.964 17.347L8.78 21.53C8.67511 21.6348 8.54153 21.7061 8.39614 21.735C8.25074 21.7638 8.10004 21.749 7.96308 21.6923C7.82611 21.6356 7.70903 21.5395 7.62661 21.4163C7.54419 21.2931 7.50013 21.1482 7.5 21V17.045C6.61329 16.9639 5.72895 16.8585 4.848 16.729C2.87 16.439 1.5 14.705 1.5 12.759V6.741C1.5 4.795 2.87 3.061 4.848 2.771Z"
-      fill="currentColor"
-    />
-  </svg>
-);

packages/ui/src/icons/epic-icon.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-
-export type Props = {
-  className?: string;
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-};
-
-export const EpicIcon: React.FC<Props> = ({ width = "16", height = "16", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.900146 9.33203V12.0142C0.900146 12.3736 1.17392 12.6654 1.51126 12.6654H14.9557C15.1178 12.6654 15.2732 12.5968 15.3878 12.4746C15.5024 12.3525 15.5668 12.1869 15.5668 12.0142V10.3299L13.375 7.99523C13.1458 7.75134 12.8351 7.61436 12.5113 7.61436C12.1874 7.61436 11.8767 7.75134 11.6476 7.99523L10.1257 9.35919L10.2534 9.56204L11.7209 9.60056C11.7809 9.66017 11.8291 9.73206 11.8625 9.81194C11.8959 9.89181 11.9138 9.97804 11.9153 10.0655C11.9167 10.1529 11.9017 10.2397 11.8709 10.3208C11.8402 10.4019 11.7944 10.4756 11.7364 10.5374C11.6784 10.5992 11.6092 10.648 11.5332 10.6807C11.4571 10.7135 11.3756 10.7296 11.2935 10.728C11.2114 10.7265 11.1305 10.7073 11.0556 10.6717C10.9806 10.6362 10.9131 10.5848 10.8572 10.5209L10.2534 9.56204L6.60385 3.76614C6.37468 3.52226 6.11293 3.33203 5.78904 3.33203C5.46515 3.33203 5.20339 3.52226 4.97422 3.76614L0.900146 9.33203Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.7209 9.60056L10.2534 9.56204L10.8572 10.5209C10.9131 10.5848 10.9806 10.6362 11.0556 10.6717C11.1305 10.7073 11.2114 10.7265 11.2935 10.728C11.3756 10.7296 11.4571 10.7135 11.5332 10.6807C11.6092 10.648 11.6784 10.5992 11.7364 10.5374C11.7944 10.4756 11.8402 10.4019 11.8709 10.3208C11.9017 10.2397 11.9167 10.1529 11.9153 10.0655C11.9138 9.97804 11.8959 9.89181 11.8625 9.81194C11.8291 9.73206 11.7809 9.66017 11.7209 9.60056Z"
-      fill="currentColor"
-    />
-  </svg>
-);

packages/ui/src/icons/index.ts

@@ -7,15 +7,12 @@ export * from "./blocker-icon";
 export * from "./calendar-after-icon";
 export * from "./calendar-before-icon";
 export * from "./center-panel-icon";
-export * from "./comment-fill-icon";
 export * from "./create-icon";
 export * from "./dice-icon";
 export * from "./discord-icon";
-export * from "./epic-icon";
 export * from "./full-screen-panel-icon";
 export * from "./github-icon";
 export * from "./gitlab-icon";
-export * from "./info-icon";
 export * from "./layer-stack";
 export * from "./layers-icon";
 export * from "./monospace-icon";

packages/ui/src/icons/info-fill-icon.tsx

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const InfoFillIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.25 12C2.25 6.615 6.615 2.25 12 2.25C17.385 2.25 21.75 6.615 21.75 12C21.75 17.385 17.385 21.75 12 21.75C6.615 21.75 2.25 17.385 2.25 12ZM10.956 10.558C12.102 9.985 13.393 11.021 13.082 12.264L12.373 15.1L12.415 15.08C12.5912 15.0025 12.7905 14.9958 12.9715 15.0612C13.1526 15.1265 13.3016 15.259 13.3877 15.4312C13.4737 15.6033 13.4903 15.802 13.434 15.9861C13.3777 16.1702 13.2527 16.3255 13.085 16.42L13.045 16.442C11.898 17.015 10.607 15.979 10.918 14.736L11.628 11.9L11.586 11.92C11.4975 11.9692 11.4 11.9999 11.2994 12.0104C11.1987 12.0209 11.097 12.0109 11.0003 11.981C10.9036 11.9511 10.8139 11.902 10.7367 11.8366C10.6595 11.7711 10.5964 11.6907 10.551 11.6002C10.5057 11.5098 10.4792 11.411 10.4731 11.31C10.4669 11.209 10.4813 11.1078 10.5153 11.0124C10.5493 10.9171 10.6022 10.8297 10.6709 10.7553C10.7396 10.681 10.8226 10.6214 10.915 10.58L10.956 10.558ZM12 9C12.1989 9 12.3897 8.92098 12.5303 8.78033C12.671 8.63968 12.75 8.44891 12.75 8.25C12.75 8.05109 12.671 7.86032 12.5303 7.71967C12.3897 7.57902 12.1989 7.5 12 7.5C11.8011 7.5 11.6103 7.57902 11.4697 7.71967C11.329 7.86032 11.25 8.05109 11.25 8.25C11.25 8.44891 11.329 8.63968 11.4697 8.78033C11.6103 8.92098 11.8011 9 12 9Z"
-      fill="currentColor"
-    />
-  </svg>
-);

packages/ui/src/icons/workspace-icon.tsx

@@ -3,14 +3,7 @@ import * as React from "react";
 import { ISvgIcons } from "./type";
 
 export const WorkspaceIcon: React.FC<ISvgIcons> = ({ className }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    role="img"
-    aria-label="Workspace icon"
-  >
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"

packages/ui/src/index.ts

@@ -28,4 +28,3 @@ export * from "./row";
 export * from "./content-wrapper";
 export * from "./card";
 export * from "./tag";
-export * from "./tabs";

packages/ui/src/progress/linear-progress-indicator.tsx

@@ -6,9 +6,7 @@ type Props = {
   data: any;
   noTooltip?: boolean;
   inPercentage?: boolean;
-  size?: "sm" | "md" | "lg" | "xl";
-  className?: string;
-  barClassName?: string;
+  size?: "sm" | "md" | "lg";
 };
 
 export const LinearProgressIndicator: React.FC<Props> = ({
@@ -16,8 +14,6 @@ export const LinearProgressIndicator: React.FC<Props> = ({
   noTooltip = false,
   inPercentage = false,
   size = "sm",
-  className = "",
-  barClassName = "",
 }) => {
   const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -35,7 +31,7 @@ export const LinearProgressIndicator: React.FC<Props> = ({
     else
       return (
         <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
-          <div style={style} className={cn("first:rounded-l-sm last:rounded-r-sm", barClassName)} />
+          <div style={style} className="first:rounded-l-sm last:rounded-r-sm" />
         </Tooltip>
       );
   });
@@ -46,12 +42,13 @@ export const LinearProgressIndicator: React.FC<Props> = ({
         "h-2": size === "sm",
         "h-3": size === "md",
         "h-3.5": size === "lg",
-        "h-[14px]": size === "xl",
       })}
     >
-      <div className={cn("flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm", className)}>
-        {bars}
-      </div>
+      {total === 0 ? (
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
+      ) : (
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
+      )}
     </div>
   );
 };

packages/ui/src/tabs/index.ts

@@ -1 +0,0 @@
-export * from "./tabs";

packages/ui/src/tabs/tabs.tsx

@@ -1,94 +0,0 @@
-import React, { FC, Fragment } from "react";
-import { Tab } from "@headlessui/react";
-import { LucideProps } from "lucide-react";
-// helpers
-import { useLocalStorage } from "@plane/helpers";
-import { cn } from "../../helpers";
-
-type TabItem = {
-  key: string;
-  icon?: FC<LucideProps>;
-  label?: React.ReactNode;
-  content: React.ReactNode;
-  disabled?: boolean;
-};
-
-type TTabsProps = {
-  tabs: TabItem[];
-  storageKey: string;
-  actions?: React.ReactNode;
-  defaultTab?: string;
-  containerClassName?: string;
-  tabListContainerClassName?: string;
-  tabListClassName?: string;
-  tabClassName?: string;
-  tabPanelClassName?: string;
-};
-
-export const Tabs: FC<TTabsProps> = (props: TTabsProps) => {
-  const {
-    tabs,
-    storageKey,
-    actions,
-    defaultTab = tabs[0]?.key,
-    containerClassName = "",
-    tabListContainerClassName = "",
-    tabListClassName = "",
-    tabClassName = "",
-    tabPanelClassName = "",
-  } = props;
-  // local storage
-  const { storedValue, setValue } = useLocalStorage(`tab-${storageKey}`, defaultTab);
-
-  const currentTabIndex = (tabKey: string): number => tabs.findIndex((tab) => tab.key === tabKey);
-
-  return (
-    <div className="flex flex-col w-full h-full">
-      <Tab.Group defaultIndex={currentTabIndex(storedValue ?? defaultTab)}>
-        <div className={cn("flex flex-col w-full h-full gap-2", containerClassName)}>
-          <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
-            <Tab.List
-              as="div"
-              className={cn(
-                "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60",
-                tabListClassName
-              )}
-            >
-              {tabs.map((tab) => (
-                <Tab
-                  className={({ selected }) =>
-                    cn(
-                      `flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded`,
-                      selected
-                        ? "bg-custom-background-100 text-custom-text-100 shadow-sm"
-                        : tab.disabled
-                          ? "text-custom-text-400 cursor-not-allowed"
-                          : "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
-                      tabClassName
-                    )
-                  }
-                  key={tab.key}
-                  onClick={() => {
-                    if (!tab.disabled) setValue(tab.key);
-                  }}
-                  disabled={tab.disabled}
-                >
-                  {tab.icon && <tab.icon className="size-4" />}
-                  {tab.label}
-                </Tab>
-              ))}
-            </Tab.List>
-            {actions && <div className="flex-grow">{actions}</div>}
-          </div>
-          <Tab.Panels as={Fragment}>
-            {tabs.map((tab) => (
-              <Tab.Panel key={tab.key} as="div" className={cn("relative outline-none", tabPanelClassName)}>
-                {tab.content}
-              </Tab.Panel>
-            ))}
-          </Tab.Panels>
-        </div>
-      </Tab.Group>
-    </div>
-  );
-};

space/core/components/editor/lite-text-editor.tsx

@@ -10,8 +10,7 @@ import { isCommentEmpty } from "@/helpers/string.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-interface LiteTextEditorWrapperProps
-  extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
+interface LiteTextEditorWrapperProps extends Omit<ILiteTextEditor, "fileHandler" | "mentionHandler"> {
   anchor: string;
   workspaceId: string;
   isSubmitting?: boolean;
@@ -42,7 +41,6 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     <div className="border border-custom-border-200 rounded p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
-        disabledExtensions={[]}
         fileHandler={getEditorFileHandlers({
           anchor,
           uploadFile,

space/core/components/editor/lite-text-read-only-editor.tsx

@@ -7,10 +7,7 @@ import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-type LiteTextReadOnlyEditorWrapperProps = Omit<
-  ILiteTextReadOnlyEditor,
-  "disabledExtensions" | "fileHandler" | "mentionHandler"
-> & {
+type LiteTextReadOnlyEditorWrapperProps = Omit<ILiteTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
   anchor: string;
 };
 
@@ -21,7 +18,6 @@ export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Lit
     return (
       <LiteTextReadOnlyEditorWithRef
         ref={ref}
-        disabledExtensions={[]}
         fileHandler={getReadOnlyEditorFileHandlers({
           anchor,
         })}

space/core/components/editor/rich-text-editor.tsx

@@ -1,11 +1,12 @@
 import React, { forwardRef } from "react";
 // editor
 import { EditorRefApi, IMentionHighlight, IRichTextEditor, RichTextEditorWithRef } from "@plane/editor";
+// types
 // helpers
+import { cn } from "@/helpers/common.helper";
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 
-interface RichTextEditorWrapperProps
-  extends Omit<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
+interface RichTextEditorWrapperProps extends Omit<IRichTextEditor, "fileHandler" | "mentionHandler"> {
   uploadFile: (file: File) => Promise<string>;
 }
 
@@ -26,7 +27,6 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
         suggestions: undefined,
       }}
       ref={ref}
-      disabledExtensions={[]}
       fileHandler={getEditorFileHandlers({
         uploadFile,
         workspaceId: "",

space/core/components/editor/rich-text-read-only-editor.tsx

@@ -7,10 +7,7 @@ import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { useMention } from "@/hooks/use-mention";
 
-type RichTextReadOnlyEditorWrapperProps = Omit<
-  IRichTextReadOnlyEditor,
-  "disabledExtensions" | "fileHandler" | "mentionHandler"
-> & {
+type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "fileHandler" | "mentionHandler"> & {
   anchor: string;
 };
 
@@ -21,7 +18,6 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
     return (
       <RichTextReadOnlyEditorWithRef
         ref={ref}
-        disabledExtensions={[]}
         fileHandler={getReadOnlyEditorFileHandlers({
           anchor,
         })}

space/package.json

@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "0.24.0",
+  "version": "0.23.1",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",

web/app/[workspaceSlug]/(projects)/notifications/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 // components
-import { NotificationsSidebar } from "@/plane-web/components/workspace-notifications";
+import { NotificationsSidebar } from "@/components/workspace-notifications";
 
 export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
   return (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx

@@ -46,6 +46,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
               type="text"
               link={
                 <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
                   label={currentProjectDetails?.name ?? "Project"}
                   icon={
                     currentProjectDetails && (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx

@@ -38,6 +38,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
             type="text"
             link={
               <BreadcrumbLink
+                href={`/${workspaceSlug}/projects`}
                 label={currentProjectDetails?.name ?? "Project"}
                 icon={
                   currentProjectDetails && (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -172,6 +172,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     <span className="hidden md:block">
                       <BreadcrumbLink
                         label={currentProjectDetails?.name ?? "Project"}
+                        href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                         icon={
                           currentProjectDetails && (
                             <span className="grid h-4 w-4 flex-shrink-0 place-items-center">

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx

@@ -38,6 +38,7 @@ export const CyclesListHeader: FC = observer(() => {
             link={
               <BreadcrumbLink
                 label={currentProjectDetails?.name ?? "Project"}
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                 icon={
                   currentProjectDetails && (
                     <span className="grid place-items-center flex-shrink-0 h-4 w-4">

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx

@@ -99,6 +99,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
               type="text"
               link={
                 <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
                   label={currentProjectDetails?.name ?? "Project"}
                   icon={
                     currentProjectDetails && (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx

@@ -32,6 +32,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
               type="text"
               link={
                 <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
                   label={currentProjectDetails?.name ?? "Project"}
                   icon={
                     currentProjectDetails && (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx

@@ -54,6 +54,7 @@ export const ProjectIssuesHeader = observer(() => {
               type="text"
               link={
                 <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
                   label={currentProjectDetails?.name ?? "Project"}
                   icon={
                     currentProjectDetails ? (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx

@@ -171,6 +171,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   <span className="hidden md:block">
                     <BreadcrumbLink
                       label={currentProjectDetails?.name ?? "Project"}
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                       icon={
                         currentProjectDetails && (
                           <span className="grid h-4 w-4 flex-shrink-0 place-items-center">

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx

@@ -39,6 +39,7 @@ export const ModulesListHeader: React.FC = observer(() => {
               type="text"
               link={
                 <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                   label={currentProjectDetails?.name ?? "Project"}
                   icon={
                     currentProjectDetails && (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -77,6 +77,7 @@ export const PageDetailsHeader = observer(() => {
                 <span>
                   <span className="hidden md:block">
                     <BreadcrumbLink
+                      href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                       label={currentProjectDetails?.name ?? "Project"}
                       icon={
                         currentProjectDetails && (

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -13,7 +13,9 @@ import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
 import { EPageAccess } from "@/constants/page";
 // hooks
-import { useEventTracker, useProject, useProjectPages } from "@/hooks/store";
+import { useEventTracker, useProject, useProjectPages, useUserPermissions } from "@/hooks/store";
+// plane web hooks
+import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const PagesListHeader = observer(() => {
   // states
@@ -24,9 +26,16 @@ export const PagesListHeader = observer(() => {
   const searchParams = useSearchParams();
   const pageType = searchParams.get("type");
   // store hooks
+  const { allowPermissions } = useUserPermissions();
+
   const { currentProjectDetails, loader } = useProject();
-  const { canCurrentUserCreatePage, createPage } = useProjectPages();
+  const { createPage } = useProjectPages();
   const { setTrackElement } = useEventTracker();
+  // auth
+  const canUserCreatePage = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    EUserPermissionsLevel.PROJECT
+  );
   // handle page create
   const handleCreatePage = async () => {
     setIsCreatingPage(true);
@@ -60,6 +69,7 @@ export const PagesListHeader = observer(() => {
               type="text"
               link={
                 <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                   label={currentProjectDetails?.name ?? "Project"}
                   icon={
                     currentProjectDetails && (
@@ -78,7 +88,7 @@ export const PagesListHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </Header.LeftItem>
-      {canCurrentUserCreatePage ? (
+      {canUserCreatePage ? (
         <Header.RightItem>
           <Button variant="primary" size="sm" onClick={handleCreatePage} loading={isCreatingPage}>
             {isCreatingPage ? "Adding" : "Add page"}

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx

@@ -34,6 +34,7 @@ export const ProjectSettingHeader: FC = observer(() => {
                 type="text"
                 link={
                   <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
                     label={currentProjectDetails?.name ?? "Project"}
                     icon={
                       currentProjectDetails && (