feat(ee): viewer comments (#2060)

apps/client/public/locales/en-US/translation.json

@@ -449,6 +449,9 @@
   "Prevent members from sharing pages publicly.": "Prevent members from sharing pages publicly.",
   "Toggle public sharing": "Toggle public sharing",
   "Toggle space public sharing": "Toggle space public sharing",
+  "Allow viewers to comment": "Allow viewers to comment",
+  "Allow viewers to add comments on pages in this space.": "Allow viewers to add comments on pages in this space.",
+  "Toggle viewer comments": "Toggle viewer comments",
   "Public sharing is disabled at the workspace level": "Public sharing is disabled at the workspace level",
   "Prevent pages in this space from being shared publicly.": "Prevent pages in this space from being shared publicly.",
   "Page permissions": "Page permissions",

apps/client/src/ee/features.ts

@@ -16,4 +16,5 @@ export const Feature = {
   AUDIT_LOGS: 'audit:logs',
   RETENTION: 'retention',
   SHARING_CONTROLS: 'sharing:controls',
+  VIEWER_COMMENTS: 'comment:viewer',
 } as const;

apps/client/src/ee/security/components/space-viewer-comments-toggle.tsx

@@ -0,0 +1,61 @@
+import { Group, Text, Switch, Tooltip } from "@mantine/core";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import { useUpdateSpaceMutation } from "@/features/space/queries/space-query.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature.ts";
+import { Feature } from "@/ee/features.ts";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
+
+type SpaceViewerCommentsToggleProps = {
+  space: ISpace;
+};
+
+export default function SpaceViewerCommentsToggle({
+  space,
+}: SpaceViewerCommentsToggleProps) {
+  const { t } = useTranslation();
+  const hasViewerComments = useHasFeature(Feature.VIEWER_COMMENTS);
+  const upgradeLabel = useUpgradeLabel();
+  const isDisabled = !hasViewerComments;
+  const [checked, setChecked] = useState(
+    space.settings?.comments?.allowViewerComments === true,
+  );
+  const updateSpaceMutation = useUpdateSpaceMutation();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      await updateSpaceMutation.mutateAsync({
+        spaceId: space.id,
+        allowViewerComments: value,
+      });
+      setChecked(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Allow viewers to comment")}</Text>
+        <Text size="sm" c="dimmed">
+          {t("Allow viewers to add comments on pages in this space.")}
+        </Text>
+      </div>
+      <Tooltip
+        label={upgradeLabel}
+        disabled={!isDisabled}
+        refProp="rootRef"
+      >
+        <Switch
+          checked={checked}
+          onChange={handleChange}
+          disabled={isDisabled}
+          aria-label={t("Toggle viewer comments")}
+        />
+      </Tooltip>
+    </Group>
+  );
+}

apps/client/src/features/comment/atoms/comment-atom.ts

@@ -3,3 +3,15 @@ import { atom } from 'jotai';
 export const showCommentPopupAtom = atom<boolean>(false);
 export const activeCommentIdAtom = atom<string>('');
 export const draftCommentIdAtom = atom<string>('');
+
+// Read-only comment state
+export const showReadOnlyCommentPopupAtom = atom<boolean>(false);
+export type YjsSelection = {
+  anchor: any;
+  head: any;
+};
+export type ReadOnlyCommentData = {
+  yjsSelection: YjsSelection;
+  selectedText: string;
+};
+export const readOnlyCommentDataAtom = atom<ReadOnlyCommentData | null>(null);

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -6,6 +6,8 @@ import {
   activeCommentIdAtom,
   draftCommentIdAtom,
   showCommentPopupAtom,
+  showReadOnlyCommentPopupAtom,
+  readOnlyCommentDataAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentEditor from "@/features/comment/components/comment-editor";
 import CommentActions from "@/features/comment/components/comment-actions";
@@ -19,12 +21,15 @@ import { useTranslation } from "react-i18next";
 interface CommentDialogProps {
   editor: ReturnType<typeof useEditor>;
   pageId: string;
+  readOnly?: boolean;
 }
 
-function CommentDialog({ editor, pageId }: CommentDialogProps) {
+function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
   const { t } = useTranslation();
   const [comment, setComment] = useState("");
   const [, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [, setShowReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
+  const [readOnlyCommentData, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [draftCommentId, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const [currentUser] = useAtom(currentUserAtom);
@@ -34,11 +39,17 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     handleDialogClose();
   });
   const createCommentMutation = useCreateCommentMutation();
-  const { isPending } = createCommentMutation;
+  const isPending = createCommentMutation.isPending;
 
   const handleDialogClose = () => {
+    if (readOnly) {
+      setShowReadOnlyCommentPopup(false);
+      // @ts-ignore
+      setReadOnlyCommentData(null);
+    } else {
       setShowCommentPopup(false);
       editor.chain().focus().unsetCommentDecoration().run();
+    }
   };
 
   const getSelectedText = () => {
@@ -47,6 +58,11 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
   };
 
   const handleAddComment = async () => {
+    if (readOnly) {
+      await handleAddReadOnlyComment();
+      return;
+    }
+
     try {
       const selectedText = getSelectedText();
       const commentData = {
@@ -65,7 +81,6 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
         .run();
       setActiveCommentId(createdComment.id);
 
-      //unselect text to close bubble menu
       editor.commands.setTextSelection({ from: editor.view.state.selection.from, to: editor.view.state.selection.from });
 
       setAsideState({ tab: "comments", isAsideOpen: true });
@@ -85,6 +100,33 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
     }
   };
 
+  const handleAddReadOnlyComment = async () => {
+    if (!readOnlyCommentData) return;
+
+    try {
+      const createdComment = await createCommentMutation.mutateAsync({
+        pageId,
+        content: JSON.stringify(comment),
+        selection: readOnlyCommentData.selectedText,
+        type: "inline",
+        yjsSelection: readOnlyCommentData.yjsSelection,
+      });
+
+      setActiveCommentId(createdComment.id);
+      setAsideState({ tab: "comments", isAsideOpen: true });
+
+      setTimeout(() => {
+        const selector = `div[data-comment-id="${createdComment.id}"]`;
+        const commentElement = document.querySelector(selector);
+        commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });
+      }, 400);
+    } finally {
+      setShowReadOnlyCommentPopup(false);
+      // @ts-ignore
+      setReadOnlyCommentData(null);
+    }
+  };
+
   const handleCommentEditorChange = (newContent: any) => {
     setComment(newContent);
   };

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -44,7 +44,9 @@ function CommentListWithTabs() {
   const [isLoading, setIsLoading] = useState(false);
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
-  const canComment = page?.permissions?.canEdit ?? false;
+  const canComment =
+    (page?.permissions?.canEdit ?? false) ||
+    (space?.settings?.comments?.allowViewerComments === true);
 
   // Separate active and resolved comments
   const { activeComments, resolvedComments } = useMemo(() => {
@@ -153,7 +155,7 @@ function CommentListWithTabs() {
         )}
       </Paper>
     ),
-    [comments, handleAddReply, isLoading, space?.membership?.role],
+    [comments, handleAddReply, isLoading, space?.membership?.role, canComment],
   );
 
   if (isCommentsLoading) {

apps/client/src/features/comment/components/comment-menu.tsx

@@ -75,7 +75,7 @@ function CommentMenu({
               {isResolved ? t("Re-open comment") : t("Resolve comment")}
             </Menu.Item>
           ) : (
-            <Tooltip label={upgradeLabel} position="left">
+            <Tooltip label={upgradeLabel} position="left" withPortal={false}>
               <Menu.Item disabled leftSection={<IconCircleCheck size={14} />}>
                 {t("Resolve comment")}
               </Menu.Item>

apps/client/src/features/comment/types/comment.types.ts

@@ -17,6 +17,10 @@ export interface IComment {
   deletedAt?: Date;
   creator: IUser;
   resolvedBy?: IUser;
+  yjsSelection?: {
+    anchor: any;
+    head: any;
+  };
 }
 
 export interface ICommentData {

apps/client/src/features/editor/components/bubble-menu/readonly-bubble-menu.tsx

@@ -0,0 +1,159 @@
+import type { Editor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { IconMessage } from "@tabler/icons-react";
+import classes from "./bubble-menu.module.css";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import {
+  showReadOnlyCommentPopupAtom,
+  readOnlyCommentDataAtom,
+} from "@/features/comment/atoms/comment-atom";
+import { useTranslation } from "react-i18next";
+import { getRelativeSelection, ySyncPluginKey } from "@tiptap/y-tiptap";
+
+type ReadonlyBubbleMenuProps = {
+  editor: Editor;
+};
+
+export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
+  const { t } = useTranslation();
+  const [showReadOnlyCommentPopup, setShowReadOnlyCommentPopup] = useAtom(
+    showReadOnlyCommentPopupAtom,
+  );
+  const [, setReadOnlyCommentData] = useAtom(readOnlyCommentDataAtom);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const isInteractingRef = useRef(false);
+
+  const updateMenuPosition = useCallback(() => {
+    if (isInteractingRef.current) return;
+
+    const pmSelection = editor.state.selection;
+    if (!(pmSelection instanceof TextSelection) || pmSelection.empty) {
+      setVisible(false);
+      return;
+    }
+
+    const selection = window.getSelection();
+    if (
+      !selection ||
+      selection.isCollapsed ||
+      selection.rangeCount === 0 ||
+      showReadOnlyCommentPopup
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const editorDom = editor.view.dom;
+    if (
+      !editorDom.contains(selection.anchorNode) ||
+      !editorDom.contains(selection.focusNode)
+    ) {
+      setVisible(false);
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+
+    if (rect.width === 0) {
+      setVisible(false);
+      return;
+    }
+
+    const editorRect = editorDom
+      .closest(".editor-container")
+      ?.getBoundingClientRect();
+    if (!editorRect) {
+      setVisible(false);
+      return;
+    }
+
+    setPosition({
+      top: rect.top - editorRect.top - 44,
+      left: rect.left - editorRect.left + rect.width / 2,
+    });
+    setVisible(true);
+  }, [editor, showReadOnlyCommentPopup]);
+
+  useEffect(() => {
+    const handleSelectionChange = () => {
+      updateMenuPosition();
+    };
+
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+    };
+  }, [updateMenuPosition]);
+
+  useEffect(() => {
+    if (showReadOnlyCommentPopup) {
+      setVisible(false);
+    }
+  }, [showReadOnlyCommentPopup]);
+
+  const handleCommentClick = () => {
+    if (!editor) return;
+
+    const view = editor.view;
+    const ystate = ySyncPluginKey.getState(view.state);
+
+    if (ystate?.binding) {
+      const selection = getRelativeSelection(ystate.binding, view.state);
+      const { from, to } = editor.state.selection;
+      const selectedText = editor.state.doc.textBetween(from, to);
+
+      // @ts-ignore
+      setReadOnlyCommentData({
+        yjsSelection: {
+          anchor: selection.anchor,
+          head: selection.head,
+        },
+        selectedText,
+      });
+
+      setShowReadOnlyCommentPopup(true);
+      setVisible(false);
+    }
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      style={{
+        position: "absolute",
+        top: position.top,
+        left: position.left,
+        transform: "translateX(-50%)",
+        zIndex: 199,
+      }}
+    >
+      <div className={classes.bubbleMenu}>
+        <Tooltip label={t("Comment")} withArrow withinPortal={false}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            radius="6px"
+            aria-label={t("Comment")}
+            style={{ border: "none" }}
+            onMouseDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              isInteractingRef.current = true;
+              handleCommentClick();
+              isInteractingRef.current = false;
+            }}
+          >
+            <IconMessage size={16} stroke={2} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

apps/client/src/features/editor/full-editor.tsx

@@ -16,6 +16,7 @@ export interface FullEditorProps {
   content: string;
   spaceSlug: string;
   editable: boolean;
+  canComment?: boolean;
 }
 
 export function FullEditor({
@@ -25,6 +26,7 @@ export function FullEditor({
   content,
   spaceSlug,
   editable,
+  canComment,
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
@@ -46,6 +48,7 @@ export function FullEditor({
         pageId={pageId}
         editable={editable}
         content={content}
+        canComment={canComment}
       />
     </Container>
   );

apps/client/src/features/editor/page-editor.tsx

@@ -37,9 +37,11 @@ import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-
 import {
   activeCommentIdAtom,
   showCommentPopupAtom,
+  showReadOnlyCommentPopupAtom,
 } from "@/features/comment/atoms/comment-atom";
 import CommentDialog from "@/features/comment/components/comment-dialog";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
+import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
@@ -74,12 +76,14 @@ interface PageEditorProps {
   pageId: string;
   editable: boolean;
   content: any;
+  canComment?: boolean;
 }
 
 export default function PageEditor({
   pageId,
   editable,
   content,
+  canComment,
 }: PageEditorProps) {
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
@@ -94,6 +98,7 @@ export default function PageEditor({
   const [, setAsideState] = useAtom(asideStateAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const [showReadOnlyCommentPopup] = useAtom(showReadOnlyCommentPopupAtom);
   const [isLocalSynced, setIsLocalSynced] = useState(false);
   const [isRemoteSynced, setIsRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
@@ -423,7 +428,13 @@ export default function PageEditor({
             <ColumnsMenu editor={editor} />
           </div>
         )}
+        {editor && !editorIsEditable && (editable || canComment) && providersRef.current && (
+          <ReadonlyBubbleMenu editor={editor} />
+        )}
         {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
+        {showReadOnlyCommentPopup && (
+          <CommentDialog editor={editor} pageId={pageId} readOnly />
+        )}
       </div>
       <div
         onClick={() => editor.commands.focus("end")}

apps/client/src/features/space/components/settings-modal.tsx

@@ -3,6 +3,7 @@ import SpaceMembersList from "@/features/space/components/space-members.tsx";
 import AddSpaceMembersModal from "@/features/space/components/add-space-members-modal.tsx";
 import React from "react";
 import SpaceDetails from "@/features/space/components/space-details.tsx";
+import SpaceSecuritySettings from "@/features/space/components/space-security-settings.tsx";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
 import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
 import {
@@ -59,6 +60,14 @@ export default function SpaceSettingsModal({
                   <Tabs.Tab fw={500} value="members">
                     {t("Members")}
                   </Tabs.Tab>
+                  {spaceAbility.can(
+                    SpaceCaslAction.Manage,
+                    SpaceCaslSubject.Settings,
+                  ) && (
+                    <Tabs.Tab fw={500} value="security">
+                      {t("Security")}
+                    </Tabs.Tab>
+                  )}
                 </Tabs.List>
 
                 <Tabs.Panel value="general">
@@ -91,6 +100,20 @@ export default function SpaceSettingsModal({
                     )}
                   />
                 </Tabs.Panel>
+
+                <Tabs.Panel value="security">
+                  <ScrollArea h={580} scrollbarSize={5} pr={8}>
+                    <div style={{ paddingBottom: "100px" }}>
+                      <SpaceSecuritySettings
+                        space={space}
+                        readOnly={spaceAbility.cannot(
+                          SpaceCaslAction.Manage,
+                          SpaceCaslSubject.Settings,
+                        )}
+                      />
+                    </div>
+                  </ScrollArea>
+                </Tabs.Panel>
               </Tabs>
             </div>
           </Modal.Body>

apps/client/src/features/space/components/space-details.tsx

@@ -18,7 +18,7 @@ import {
   ResponsiveSettingsControl,
   ResponsiveSettingsRow,
 } from "@/components/ui/responsive-settings-row.tsx";
-import SpacePublicSharingToggle from "@/ee/security/components/space-public-sharing-toggle.tsx";
+
 
 interface SpaceDetailsProps {
   spaceId: string;
@@ -27,7 +27,6 @@ interface SpaceDetailsProps {
 export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
   const { t } = useTranslation();
   const { data: space, isLoading, refetch } = useSpaceQuery(spaceId);
-  const showSharingToggle = !readOnly;
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
     useDisclosure(false);
   const [isIconUploading, setIsIconUploading] = useState(false);
@@ -89,13 +88,6 @@ export default function SpaceDetails({ spaceId, readOnly }: SpaceDetailsProps) {
 
           <EditSpaceForm space={space} readOnly={readOnly} />
 
-          {showSharingToggle && (
-            <>
-              <Divider my="lg" />
-              <SpacePublicSharingToggle space={space} />
-            </>
-          )}
-
           {!readOnly && (
             <>
               <Divider my="lg" />

apps/client/src/features/space/components/space-security-settings.tsx

@@ -0,0 +1,34 @@
+import { Text, Divider } from "@mantine/core";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types.ts";
+import SpacePublicSharingToggle from "@/ee/security/components/space-public-sharing-toggle.tsx";
+import SpaceViewerCommentsToggle from "@/ee/security/components/space-viewer-comments-toggle.tsx";
+
+type SpaceSecuritySettingsProps = {
+  space: ISpace;
+  readOnly?: boolean;
+};
+
+export default function SpaceSecuritySettings({
+  space,
+  readOnly,
+}: SpaceSecuritySettingsProps) {
+  const { t } = useTranslation();
+
+  if (readOnly) return null;
+
+  return (
+    <div>
+      <Text my="md" fw={600}>
+        {t("Security")}
+      </Text>
+
+      <SpacePublicSharingToggle space={space} />
+
+      <Divider my="lg" />
+
+      <SpaceViewerCommentsToggle space={space} />
+    </div>
+  );
+}

apps/client/src/features/space/types/space.types.ts

@@ -9,8 +9,13 @@ export interface ISpaceSharingSettings {
   disabled?: boolean;
 }
 
+export interface ISpaceCommentsSettings {
+  allowViewerComments?: boolean;
+}
+
 export interface ISpaceSettings {
   sharing?: ISpaceSharingSettings;
+  comments?: ISpaceCommentsSettings;
 }
 
 export interface ISpace {
@@ -29,6 +34,7 @@ export interface ISpace {
   settings?: ISpaceSettings;
   // for updates
   disablePublicSharing?: boolean;
+  allowViewerComments?: boolean;
 }
 
 interface IMembership {

apps/client/src/pages/page/page.tsx

@@ -53,6 +53,9 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
   const canEdit = page?.permissions?.canEdit ?? false;
+  const canComment =
+    canEdit ||
+    (space?.settings?.comments?.allowViewerComments === true);
 
   if (isLoading) {
     return <></>;
@@ -104,6 +107,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
           slugId={page.slugId}
           spaceSlug={page?.space?.slug}
           editable={canEdit}
+          canComment={canComment}
         />
         <MemoizedHistoryModal pageId={page.id} />
       </div>

apps/server/src/collaboration/collaboration.handler.ts

@@ -5,6 +5,7 @@ import {
   prosemirrorNodeToYElement,
   tiptapExtensions,
 } from './collaboration.util';
+import { setYjsMark, updateYjsMarkAttribute, YjsSelection } from './yjs.util';
 import * as Y from 'yjs';
 import { User } from '@docmost/db/types/entity.types';
 
@@ -27,6 +28,53 @@ export class CollaborationHandler {
         //   const fragment = doc.getXmlFragment('default');
         //});
       },
+      setCommentMark: async (
+        documentName: string,
+        payload: {
+          yjsSelection: YjsSelection;
+          commentId: string;
+          resolved: boolean;
+          user: User;
+        },
+      ) => {
+        const { yjsSelection, commentId, resolved, user } = payload;
+        await this.withYdocConnection(
+          hocuspocus,
+          documentName,
+          { user },
+          (doc) => {
+            const fragment = doc.getXmlFragment('default');
+            setYjsMark(doc, fragment, yjsSelection, 'comment', {
+              commentId,
+              resolved,
+            });
+          },
+        );
+      },
+      resolveCommentMark: async (
+        documentName: string,
+        payload: {
+          commentId: string;
+          resolved: boolean;
+          user: User;
+        },
+      ) => {
+        const { commentId, resolved, user } = payload;
+        await this.withYdocConnection(
+          hocuspocus,
+          documentName,
+          { user },
+          (doc) => {
+            const fragment = doc.getXmlFragment('default');
+            updateYjsMarkAttribute(
+              fragment,
+              'comment',
+              { name: 'commentId', value: commentId },
+              { resolved },
+            );
+          },
+        );
+      },
       updatePageContent: async (
         documentName: string,
         payload: {
@@ -58,8 +106,7 @@ export class CollaborationHandler {
             } else {
               const newContent = prosemirrorJson.content || [];
               const yElements = newContent.map(prosemirrorNodeToYElement);
-              const position =
+              const position = operation === 'prepend' ? 0 : fragment.length;
-                operation === 'prepend' ? 0 : fragment.length;
               fragment.insert(position, yElements);
             }
           },

apps/server/src/collaboration/yjs.util.ts

@@ -1,7 +1,7 @@
 import {
   initProseMirrorDoc,
   relativePositionToAbsolutePosition,
-} from 'y-prosemirror';
+} from '@tiptap/y-tiptap';
 import * as Y from 'yjs';
 import { Document } from '@hocuspocus/server';
 import { getSchema } from '@tiptap/core';

apps/server/src/common/features.ts

@@ -0,0 +1,22 @@
+export const Feature = {
+  SSO_CUSTOM: 'sso:custom',
+  SSO_GOOGLE: 'sso:google',
+  MFA: 'mfa',
+  API_KEYS: 'api:keys',
+  COMMENT_RESOLUTION: 'comment:resolution',
+  PAGE_PERMISSIONS: 'page:permissions',
+  AI: 'ai',
+  CONFLUENCE_IMPORT: 'import:confluence',
+  DOCX_IMPORT: 'import:docx',
+  ATTACHMENT_INDEXING: 'attachment:indexing',
+  SECURITY_SETTINGS: 'security:settings',
+  MCP: 'mcp',
+  SCIM: 'scim',
+  PAGE_VERIFICATION: 'page:verification',
+  AUDIT_LOGS: 'audit:logs',
+  RETENTION: 'retention',
+  SHARING_CONTROLS: 'sharing:controls',
+  VIEWER_COMMENTS: 'comment:viewer',
+} as const;
+
+export type FeatureKey = (typeof Feature)[keyof typeof Feature];

apps/server/src/core/comment/comment.controller.ts

@@ -58,13 +58,13 @@ export class CommentController {
       throw new NotFoundException('Page not found');
     }
 
-    await this.pageAccessService.validateCanEdit(page, user);
+    await this.pageAccessService.validateCanComment(page, user, workspace.id);
 
     const comment = await this.commentService.create(
       {
-        userId: user.id,
         page,
         workspaceId: workspace.id,
+        user,
       },
       createCommentDto,
     );
@@ -120,7 +120,7 @@ export class CommentController {
 
   @HttpCode(HttpStatus.OK)
   @Post('update')
-  async update(@Body() dto: UpdateCommentDto, @AuthUser() user: User) {
+  async update(@Body() dto: UpdateCommentDto, @AuthUser() user: User, @AuthWorkspace() workspace: Workspace) {
     const comment = await this.commentRepo.findById(dto.commentId, {
       includeCreator: true,
       includeResolvedBy: true,
@@ -134,14 +134,14 @@ export class CommentController {
       throw new NotFoundException('Page not found');
     }
 
-    await this.pageAccessService.validateCanEdit(page, user);
+    await this.pageAccessService.validateCanComment(page, user, workspace.id);
 
     return this.commentService.update(comment, dto, user);
   }
 
   @HttpCode(HttpStatus.OK)
   @Post('delete')
-  async delete(@Body() input: CommentIdDto, @AuthUser() user: User) {
+  async delete(@Body() input: CommentIdDto, @AuthUser() user: User, @AuthWorkspace() workspace: Workspace) {
     const comment = await this.commentRepo.findById(input.commentId);
     if (!comment) {
       throw new NotFoundException('Comment not found');
@@ -152,8 +152,7 @@ export class CommentController {
       throw new NotFoundException('Page not found');
     }
 
-    // Check page-level edit permission first
+    await this.pageAccessService.validateCanComment(page, user, workspace.id);
-    await this.pageAccessService.validateCanEdit(page, user);
 
     // Check if user is the comment owner
     const isOwner = comment.creatorId === user.id;
@@ -169,7 +168,7 @@ export class CommentController {
       // Space admin can delete any comment
       if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Settings)) {
         throw new ForbiddenException(
-          'You can only delete your own comments or must be a space admin',
+          'You can only delete your own comments',
         );
       }
       await this.commentRepo.deleteComment(comment.id);

apps/server/src/core/comment/comment.module.ts

@@ -1,8 +1,10 @@
 import { Module } from '@nestjs/common';
 import { CommentService } from './comment.service';
 import { CommentController } from './comment.controller';
+import { CollaborationModule } from '../../collaboration/collaboration.module';
 
 @Module({
+  imports: [CollaborationModule],
   controllers: [CommentController],
   providers: [CommentService],
   exports: [CommentService],

apps/server/src/core/comment/comment.service.ts

@@ -7,7 +7,8 @@ import {
 } from '@nestjs/common';
 import { InjectQueue } from '@nestjs/bullmq';
 import { Queue } from 'bullmq';
-import { CreateCommentDto } from './dto/create-comment.dto';
+import { CreateCommentDto, yjsSelectionSchema } from './dto/create-comment.dto';
+import { CollaborationGateway } from '../../collaboration/collaboration.gateway';
 import { UpdateCommentDto } from './dto/update-comment.dto';
 import { CommentRepo } from '@docmost/db/repos/comment/comment.repo';
 import { Comment, Page, User } from '@docmost/db/types/entity.types';
@@ -27,6 +28,7 @@ export class CommentService {
     private commentRepo: CommentRepo,
     private pageRepo: PageRepo,
     private wsService: WsService,
+    private collaborationGateway: CollaborationGateway,
     @InjectQueue(QueueName.GENERAL_QUEUE)
     private generalQueue: Queue,
     @InjectQueue(QueueName.NOTIFICATION_QUEUE)
@@ -45,10 +47,10 @@ export class CommentService {
   }
 
   async create(
-    opts: { userId: string; page: Page; workspaceId: string },
+    opts: { page: Page; workspaceId: string; user: User },
     createCommentDto: CreateCommentDto,
   ) {
-    const { userId, page, workspaceId } = opts;
+    const { page, workspaceId, user } = opts;
     const commentContent = JSON.parse(createCommentDto.content);
 
     if (createCommentDto.parentCommentId) {
@@ -71,11 +73,39 @@ export class CommentService {
       selection: createCommentDto?.selection?.substring(0, 250) ?? null,
       type: createCommentDto.type ?? 'page',
       parentCommentId: createCommentDto?.parentCommentId,
-      creatorId: userId,
+      creatorId: user.id,
       workspaceId: workspaceId,
       spaceId: page.spaceId,
     });
 
+    if (createCommentDto.yjsSelection) {
+      const parsed = yjsSelectionSchema.safeParse(createCommentDto.yjsSelection);
+      if (!parsed.success) {
+        this.logger.warn(
+          `Invalid yjsSelection for comment ${inserted.id}: ${parsed.error.message}`,
+        );
+      } else {
+        const documentName = `page.${page.id}`;
+        try {
+          await this.collaborationGateway.handleYjsEvent(
+            'setCommentMark',
+            documentName,
+            {
+              yjsSelection: parsed.data,
+              commentId: inserted.id,
+              resolved: false,
+              user,
+            },
+          );
+        } catch (error) {
+          this.logger.warn(
+            `Failed to apply comment mark for comment ${inserted.id}, comment saved without inline highlight`,
+            error,
+          );
+        }
+      }
+    }
+
     const comment = await this.commentRepo.findById(inserted.id, {
       includeCreator: true,
       includeResolvedBy: true,
@@ -83,7 +113,7 @@ export class CommentService {
 
     this.generalQueue
       .add(QueueJob.ADD_PAGE_WATCHERS, {
-        userIds: [userId],
+        userIds: [user.id],
         pageId: page.id,
         spaceId: page.spaceId,
         workspaceId,
@@ -101,7 +131,7 @@ export class CommentService {
       page.id,
       page.spaceId,
       workspaceId,
-      userId,
+      user.id,
       !isReply,
       createCommentDto.parentCommentId,
     );

apps/server/src/core/comment/dto/create-comment.dto.ts

@@ -1,4 +1,22 @@
-import { IsIn, IsJSON, IsOptional, IsString, IsUUID } from 'class-validator';
+import { IsIn, IsJSON, IsObject, IsOptional, IsString, IsUUID } from 'class-validator';
+import { z } from 'zod';
+
+const yjsIdSchema = z.object({
+  client: z.number().int().nonnegative(),
+  clock: z.number().int().nonnegative(),
+});
+
+const yjsRelativePositionSchema = z.object({
+  type: yjsIdSchema,
+  tname: z.string().nullable(),
+  item: yjsIdSchema.nullable(),
+  assoc: z.number().int(),
+});
+
+export const yjsSelectionSchema = z.object({
+  anchor: yjsRelativePositionSchema,
+  head: yjsRelativePositionSchema,
+});
 
 export class CreateCommentDto {
   @IsString()
@@ -18,4 +36,11 @@ export class CreateCommentDto {
   @IsOptional()
   @IsUUID()
   parentCommentId: string;
+
+  @IsOptional()
+  @IsObject()
+  yjsSelection?: {
+    anchor: any;
+    head: any;
+  };
 }

apps/server/src/core/page/page-access/page-access.service.ts

@@ -6,12 +6,14 @@ import {
   SpaceCaslAction,
   SpaceCaslSubject,
 } from '../../casl/interfaces/space-ability.type';
+import { SpaceRepo } from '@docmost/db/repos/space/space.repo';
 
 @Injectable()
 export class PageAccessService {
   constructor(
     private readonly pagePermissionRepo: PagePermissionRepo,
     private readonly spaceAbility: SpaceAbilityFactory,
+    private readonly spaceRepo: SpaceRepo,
   ) {}
 
   /**
@@ -99,4 +101,25 @@ export class PageAccessService {
 
     return { hasRestriction: hasAnyRestriction };
   }
+
+  async validateCanComment(
+    page: Page,
+    user: User,
+    workspaceId: string,
+  ): Promise<void> {
+    try {
+      await this.validateCanEdit(page, user);
+      return;
+    } catch {
+      // User cannot edit — check if reader commenting is enabled
+    }
+
+    await this.validateCanView(page, user);
+
+    const space = await this.spaceRepo.findById(page.spaceId, workspaceId);
+    const settings = space?.settings as Record<string, any> | null;
+    if (!settings?.comments?.allowViewerComments) {
+      throw new ForbiddenException();
+    }
+  }
 }

apps/server/src/core/space/dto/update-space.dto.ts

@@ -11,4 +11,8 @@ export class UpdateSpaceDto extends PartialType(CreateSpaceDto) {
   @IsOptional()
   @IsBoolean()
   disablePublicSharing: boolean;
+
+  @IsOptional()
+  @IsBoolean()
+  allowViewerComments: boolean;
 }

apps/server/src/core/space/services/space.service.ts

@@ -13,6 +13,7 @@ import { Space, User } from '@docmost/db/types/entity.types';
 import { UpdateSpaceDto } from '../dto/update-space.dto';
 import { executeTx } from '@docmost/db/utils';
 import { InjectKysely } from 'nestjs-kysely';
+import { Feature } from '../../../common/features';
 import { SpaceMemberService } from './space-member.service';
 import { SpaceRole } from '../../../common/helpers/types/permission';
 import { QueueJob, QueueName } from 'src/integrations/queue/constants';
@@ -133,17 +134,34 @@ export class SpaceService {
       }
     }
 
-    if (typeof updateSpaceDto.disablePublicSharing !== 'undefined') {
+    if (
+      typeof updateSpaceDto.disablePublicSharing !== 'undefined' ||
+      typeof updateSpaceDto.allowViewerComments !== 'undefined'
+    ) {
       const workspace = await this.workspaceRepo.findById(workspaceId, {
         withLicenseKey: true,
       });
 
       if (
-        !this.licenseCheckService.hasFeature(workspace.licenseKey, 'security:settings', workspace.plan)
+        typeof updateSpaceDto.disablePublicSharing !== 'undefined' &&
+        !this.licenseCheckService.hasFeature(
+          workspace.licenseKey,
+          Feature.SECURITY_SETTINGS,
+          workspace.plan,
+        )
       ) {
-        throw new ForbiddenException(
+        throw new ForbiddenException('This feature requires a valid license');
-          'This feature requires a valid license',
+      }
-        );
+
+      if (
+        typeof updateSpaceDto.allowViewerComments !== 'undefined' &&
+        !this.licenseCheckService.hasFeature(
+          workspace.licenseKey,
+          Feature.VIEWER_COMMENTS,
+          workspace.plan,
+        )
+      ) {
+        throw new ForbiddenException('This feature requires a valid license');
       }
     }
 
@@ -179,6 +197,22 @@ export class SpaceService {
         }
       }
 
+      if (typeof updateSpaceDto.allowViewerComments !== 'undefined') {
+        const prev = settingsBefore?.comments?.allowViewerComments ?? false;
+        if (prev !== updateSpaceDto.allowViewerComments) {
+          before.allowViewerComments = prev;
+          after.allowViewerComments = updateSpaceDto.allowViewerComments;
+        }
+
+        await this.spaceRepo.updateCommentSettings(
+          updateSpaceDto.spaceId,
+          workspaceId,
+          'allowViewerComments',
+          updateSpaceDto.allowViewerComments,
+          trx,
+        );
+      }
+
       updatedSpace = await this.spaceRepo.updateSpace(
         {
           name: updateSpaceDto.name,

apps/server/src/core/workspace/services/workspace.service.ts

@@ -18,6 +18,7 @@ import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo';
 import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
 import { executeTx } from '@docmost/db/utils';
 import { InjectKysely } from 'nestjs-kysely';
+import { Feature } from '../../../common/features';
 import { User } from '@docmost/db/types/entity.types';
 import { GroupUserRepo } from '@docmost/db/repos/group/group-user.repo';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
@@ -352,7 +353,7 @@ export class WorkspaceService {
         typeof updateWorkspaceDto.trashRetentionDays !== 'undefined' ||
         typeof updateWorkspaceDto.restrictApiToAdmins !== 'undefined'
       ) {
-        if (!this.licenseCheckService.hasFeature(ws.licenseKey, 'security:settings', ws.plan)) {
+        if (!this.licenseCheckService.hasFeature(ws.licenseKey, Feature.SECURITY_SETTINGS, ws.plan)) {
           throw new ForbiddenException(
             'This feature requires a valid license',
           );

apps/server/src/database/repos/space/space.repo.ts

@@ -111,6 +111,28 @@ export class SpaceRepo {
       .executeTakeFirst();
   }
 
+  async updateCommentSettings(
+    spaceId: string,
+    workspaceId: string,
+    prefKey: string,
+    prefValue: string | boolean,
+    trx?: KyselyTransaction,
+  ) {
+    const db = dbOrTx(this.db, trx);
+    return db
+      .updateTable('spaces')
+      .set({
+        settings: sql`COALESCE(settings, '{}'::jsonb)
+          || jsonb_build_object('comments', COALESCE(settings->'comments', '{}'::jsonb)
+          || jsonb_build_object('${sql.raw(prefKey)}', ${sql.lit(prefValue)}))`,
+        updatedAt: new Date(),
+      })
+      .where('id', '=', spaceId)
+      .where('workspaceId', '=', workspaceId)
+      .returningAll()
+      .executeTakeFirst();
+  }
+
   async insertSpace(
     insertableSpace: InsertableSpace,
     trx?: KyselyTransaction,