SD-1695 - add flag for text selection in viewing mode

packages/super-editor/src/assets/styles/elements/prosemirror.css

@@ -79,6 +79,20 @@
   caret-color: transparent;
 }
 
+/* Allow selection visibility in viewing mode when allowSelectionInViewMode is enabled */
+.presentation-editor--allow-selection .ProseMirror-hideselection *::selection {
+  background: Highlight;
+  background: -moz-Highlight;
+}
+
+.presentation-editor--allow-selection .ProseMirror-hideselection *::-moz-selection {
+  background: Highlight;
+}
+
+.presentation-editor--allow-selection .ProseMirror-hideselection * {
+  caret-color: auto;
+}
+
 /* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
 .ProseMirror [draggable][contenteditable='false'] {
   user-select: text;

packages/super-editor/src/core/extensions/editable.js

@@ -6,11 +6,17 @@ import { Extension } from '../Extension.js';
  *
  * When editable is false, all user interactions are blocked:
  * - Text input via beforeinput events
- * - Mouse interactions via mousedown
- * - Focus via automatic blur
- * - Click, double-click, and triple-click events
+ * - Mouse interactions via mousedown (unless allowSelectionInViewMode is true)
+ * - Focus via automatic blur (unless allowSelectionInViewMode is true)
+ * - Click, double-click, and triple-click events (unless allowSelectionInViewMode is true)
  * - Keyboard shortcuts via handleKeyDown
  * - Paste and drop events
+ *
+ * When allowSelectionInViewMode is true and editable is false:
+ * - Mouse interactions are allowed for text selection
+ * - Focus is allowed
+ * - Click events are allowed for selection
+ * - But text input, keyboard shortcuts, paste, and drop remain blocked
  */
 export const Editable = Extension.create({
   name: 'editable',
@@ -30,25 +36,39 @@ export const Editable = Extension.create({
             return false;
           },
           mousedown: (_view, event) => {
-            if (!editor.options.editable) {
+            // Allow mousedown for selection when allowSelectionInViewMode is enabled
+            if (!editor.options.editable && !editor.options.allowSelectionInViewMode) {
               event.preventDefault();
               return true;
             }
             return false;
           },
           focus: (view, event) => {
-            if (!editor.options.editable) {
+            // Allow focus when allowSelectionInViewMode is enabled
+            if (!editor.options.editable && !editor.options.allowSelectionInViewMode) {
               event.preventDefault();
               view.dom.blur();
               return true;
             }
             return false;
           },
         },
-        handleClick: () => !editor.options.editable,
-        handleDoubleClick: () => !editor.options.editable,
-        handleTripleClick: () => !editor.options.editable,
-        handleKeyDown: () => !editor.options.editable,
+        // Allow click events for selection when allowSelectionInViewMode is enabled
+        handleClick: () => !editor.options.editable && !editor.options.allowSelectionInViewMode,
+        handleDoubleClick: () => !editor.options.editable && !editor.options.allowSelectionInViewMode,
+        handleTripleClick: () => !editor.options.editable && !editor.options.allowSelectionInViewMode,
+        // Always block keyboard input, paste, and drop when not editable
+        handleKeyDown: (_view, event) => {
+          if (!editor.options.editable) {
+            // Allow Ctrl+C / Cmd+C for copy when allowSelectionInViewMode is enabled
+            if (editor.options.allowSelectionInViewMode) {
+              const isCopy = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c';
+              if (isCopy) return false;
+            }
+            return true;
+          }
+          return false;
+        },
         handlePaste: () => !editor.options.editable,
         handleDrop: () => !editor.options.editable,
       },

packages/super-editor/src/core/presentation-editor/PresentationEditor.ts

@@ -1040,6 +1040,10 @@ export class PresentationEditor extends EventEmitter {
   #syncDocumentModeClass() {
     if (!this.#visibleHost) return;
     this.#visibleHost.classList.toggle('presentation-editor--viewing', this.#documentMode === 'viewing');
+    this.#visibleHost.classList.toggle(
+      'presentation-editor--allow-selection',
+      this.#documentMode === 'viewing' && !!this.#options.allowSelectionInViewMode,
+    );
   }
 
   /**
@@ -4611,12 +4615,16 @@ export class PresentationEditor extends EventEmitter {
    * Determines whether the current viewing mode should block edits.
    * When documentMode is viewing but the active editor has been toggled
    * back to editable (e.g. permission ranges), we treat the view as editable.
+   * Also returns false when allowSelectionInViewMode is enabled, allowing
+   * text selection while still blocking actual edits.
    */
   #isViewLocked(): boolean {
     if (this.#documentMode !== 'viewing') return false;
     const hasPermissionOverride = !!(this.#editor as Editor & { storage?: Record<string, any> })?.storage
       ?.permissionRanges?.hasAllowedRanges;
     if (hasPermissionOverride) return false;
+    // Allow selection visuals when allowSelectionInViewMode is enabled
+    if (this.#options.allowSelectionInViewMode) return false;
     return this.#documentMode === 'viewing';
   }
 

packages/super-editor/src/core/presentation-editor/types.ts

@@ -140,6 +140,13 @@ export type PresentationEditorOptions = ConstructorParameters<typeof Editor>[0]
    * @default false
    */
   disableContextMenu?: boolean;
+  /**
+   * Allow text selection in viewing mode.
+   * When true, users can select and copy text while in viewing mode,
+   * but editing (typing, paste, delete) remains blocked.
+   * @default false
+   */
+  allowSelectionInViewMode?: boolean;
 };
 
 /**

packages/super-editor/src/core/types/EditorConfig.ts

@@ -225,6 +225,14 @@ export interface EditorOptions {
   /** Whether the editor is editable */
   editable?: boolean;
 
+  /**
+   * Allow text selection in viewing mode.
+   * When true, users can select and copy text while in viewing mode,
+   * but editing (typing, paste, delete) remains blocked.
+   * @default false
+   */
+  allowSelectionInViewMode?: boolean;
+
   /** Editor properties */
   editorProps?: Record<string, unknown>;
 

packages/super-editor/src/index.d.ts

@@ -143,6 +143,13 @@ export interface OpenOptions {
   isCommentsEnabled?: boolean;
   suppressDefaultDocxStyles?: boolean;
   documentMode?: 'editing' | 'viewing' | 'suggesting';
+  /**
+   * Allow text selection in viewing mode.
+   * When true, users can select and copy text while in viewing mode,
+   * but editing (typing, paste, delete) remains blocked.
+   * @default false
+   */
+  allowSelectionInViewMode?: boolean;
   content?: unknown;
   mediaFiles?: Record<string, unknown>;
   fonts?: Record<string, unknown>;
@@ -166,6 +173,7 @@ export declare class Editor {
     content?: string | object;
     extensions?: any[];
     editable?: boolean;
+    allowSelectionInViewMode?: boolean;
     autofocus?: boolean | 'start' | 'end' | 'all' | number;
     [key: string]: any;
   });

packages/superdoc/src/SuperDoc.vue

@@ -88,6 +88,7 @@ const { isHighContrastMode } = useHighContrastMode();
 const { uiFontFamily } = useUiFontFamily();
 
 const isViewingMode = () => proxy?.$superdoc?.config?.documentMode === 'viewing';
+const allowSelectionInViewMode = () => !!proxy?.$superdoc?.config?.allowSelectionInViewMode;
 const isViewingCommentsVisible = computed(
   () => isViewingMode() && proxy?.$superdoc?.config?.comments?.visible === true,
 );
@@ -283,13 +284,13 @@ const onEditorSelectionChange = ({ editor, transaction }) => {
     // When comment is added selection will be equal to comment text
     // Should skip calculations to keep text selection for comments correct
     skipSelectionUpdate.value = false;
-    if (isViewingMode()) {
+    if (isViewingMode() && !allowSelectionInViewMode()) {
       resetSelection();
     }
     return;
   }
 
-  if (isViewingMode()) {
+  if (isViewingMode() && !allowSelectionInViewMode()) {
     resetSelection();
     return;
   }
@@ -463,6 +464,7 @@ const editorOptions = (doc) => {
     html: doc.html,
     markdown: doc.markdown,
     documentMode: proxy.$superdoc.config.documentMode,
+    allowSelectionInViewMode: proxy.$superdoc.config.allowSelectionInViewMode,
     rulers: doc.rulers,
     rulerContainer: proxy.$superdoc.config.rulerContainer,
     isInternal: proxy.$superdoc.config.isInternal,
@@ -688,7 +690,7 @@ const getSelectionPosition = computed(() => {
 });
 
 const handleSelectionChange = (selection) => {
-  if (isViewingMode()) {
+  if (isViewingMode() && !allowSelectionInViewMode()) {
     resetSelection();
     return;
   }

packages/superdoc/src/core/SuperDoc.js

@@ -59,6 +59,7 @@ export class SuperDoc extends EventEmitter {
     superdocId: null,
     selector: '#superdoc',
     documentMode: 'editing',
+    allowSelectionInViewMode: false,
     role: 'editor',
     document: {},
     documents: [],

packages/superdoc/src/dev/components/SuperdocDev.vue

@@ -194,6 +194,7 @@ const init = async () => {
     // format: 'docx',
     // html: '<p>Hello world</p>',
     // isDev: true,
+    // allowSelectionInViewMode: true,
     user,
     title: 'Test document',
     users: [

packages/superdoc/tsconfig.build.json

@@ -1,6 +1,3 @@
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "customConditions": []
-  }
+  "extends": "./tsconfig.json"
 }