SD-58 (part 2) - Editable ranges (#1618)

* feat: added permStart/permEnd translators and schema

* chore: removed logs

* feat: allow editing sections with permStart/permEnd

* feat: added highlight for permStart/permEnd

* fix: show permStart/permEnd highlights in other document modes

* fix: edge cases

* refactor: removed unused class

* refactor: removed unused code

* fix: overlay styles

* refactor: removed unused code

* chore: change permission island background color

* feat: allow users in permStart/permEnd

* fix: infinite loop

* chore: small code tweaks

* chore: added docs

* chore: added docs

* refactor: rename functions

* chore: rename test

* chore: simplified code

* fix: tests

* fix: tests

* chore: removed unused fns

Author: chittolinag

packages/layout-engine/painters/dom/src/styles.ts

@@ -87,6 +87,7 @@ export const lineStyles = (lineHeight: number): Partial<CSSStyleDeclaration> =>
   // provides defense-in-depth against any remaining sub-pixel rendering
   // differences between measurement and display.
   overflow: 'visible',
+  zIndex: '10',
 });
 
 const PRINT_STYLES = `
@@ -422,6 +423,7 @@ const SDT_CONTAINER_STYLES = `
   border: 1px solid #629be7;
   position: relative;
   display: inline;
+  z-index: 10;
 }
 
 /* Hover effect for inline structured content */

packages/super-editor/src/assets/styles/layout/global.css

@@ -24,6 +24,15 @@ a {
   animation: superdoc-caret-blink 1.2s steps(2, start) infinite;
 }
 
+.presentation-editor__permission-overlay {
+  pointer-events: none;
+}
+
+.presentation-editor__permission-highlight {
+  border-radius: 2px;
+  background-color: rgba(199, 200, 217, 0.55);
+}
+
 @keyframes superdoc-caret-blink {
   0%,
   45% {

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

@@ -580,6 +580,7 @@ export class PresentationEditor extends EventEmitter {
   #viewportHost: HTMLElement;
   #painterHost: HTMLElement;
   #selectionOverlay: HTMLElement;
+  #permissionOverlay: HTMLElement | null = null;
   #hiddenHost: HTMLElement;
   #layoutOptions: LayoutEngineOptions;
   #layoutState: LayoutState = { blocks: [], measures: [], layout: null, bookmarks: new Map() };
@@ -763,6 +764,17 @@ export class PresentationEditor extends EventEmitter {
     });
     this.#domIndexObserverManager.setup();
     this.#selectionSync.on('render', () => this.#updateSelection());
+    this.#selectionSync.on('render', () => this.#updatePermissionOverlay());
+
+    this.#permissionOverlay = doc.createElement('div');
+    this.#permissionOverlay.className = 'presentation-editor__permission-overlay';
+    Object.assign(this.#permissionOverlay.style, {
+      position: 'absolute',
+      inset: '0',
+      pointerEvents: 'none',
+      zIndex: '5',
+    });
+    this.#viewportHost.appendChild(this.#permissionOverlay);
 
     // Create dual-layer overlay structure
     // Container holds both remote (below) and local (above) layers
@@ -862,9 +874,9 @@ export class PresentationEditor extends EventEmitter {
     const normalizedEditorProps = {
       ...(editorOptions.editorProps ?? {}),
       editable: () => {
-        // Hidden editor respects documentMode for plugin compatibility
-        // but remains visually/interactively inert (handled by hidden container CSS)
-        return this.#documentMode !== 'viewing';
+        // Hidden editor respects documentMode for plugin compatibility,
+        // but permission ranges may temporarily re-enable editing.
+        return !this.#isViewLocked();
       },
     };
     try {
@@ -1358,6 +1370,7 @@ export class PresentationEditor extends EventEmitter {
       this.#pendingDocChange = true;
       this.#scheduleRerender();
     }
+    this.#updatePermissionOverlay();
   }
 
   #syncDocumentModeClass() {
@@ -3083,7 +3096,7 @@ export class PresentationEditor extends EventEmitter {
       win as Window,
       this.#visibleHost,
       () => this.#getActiveDomTarget(),
-      () => this.#documentMode !== 'viewing',
+      () => !this.#isViewLocked(),
     );
     this.#inputBridge.bind();
   }
@@ -4257,7 +4270,7 @@ export class PresentationEditor extends EventEmitter {
       this.#dragUsedPageNotMountedFallback = false;
       return;
     }
-    if (this.#session.mode !== 'body' || this.#documentMode === 'viewing') {
+    if (this.#session.mode !== 'body' || this.#isViewLocked()) {
       this.#dragLastPointer = null;
       this.#dragLastRawHit = null;
       this.#dragUsedPageNotMountedFallback = false;
@@ -4665,6 +4678,7 @@ export class PresentationEditor extends EventEmitter {
       this.#epochMapper.onLayoutComplete(layoutEpoch);
       this.#selectionSync.onLayoutComplete(layoutEpoch);
       layoutCompleted = true;
+      this.#updatePermissionOverlay();
 
       // Reset error state on successful layout
       this.#layoutError = null;
@@ -4773,7 +4787,7 @@ export class PresentationEditor extends EventEmitter {
     }
 
     // In viewing mode, don't render caret or selection highlights
-    if (this.#documentMode === 'viewing') {
+    if (this.#isViewLocked()) {
       try {
         this.#localSelectionLayer.innerHTML = '';
       } catch (error) {
@@ -4877,6 +4891,87 @@ export class PresentationEditor extends EventEmitter {
     }
   }
 
+  /**
+   * Updates the permission overlay (w:permStart/w:permEnd) to match the current editor permission ranges.
+   *
+   * This method is called after layout completes to ensure permission overlay
+   * is based on stable permission ranges data.
+   */
+  #updatePermissionOverlay() {
+    const overlay = this.#permissionOverlay;
+    if (!overlay) {
+      return;
+    }
+
+    if (this.#session.mode !== 'body') {
+      overlay.innerHTML = '';
+      return;
+    }
+
+    const permissionStorage = (this.#editor as Editor & { storage?: Record<string, any> })?.storage?.permissionRanges;
+    const ranges: Array<{ from: number; to: number }> = permissionStorage?.ranges ?? [];
+    const shouldRender = ranges.length > 0;
+
+    if (!shouldRender) {
+      overlay.innerHTML = '';
+      return;
+    }
+
+    const layout = this.#layoutState.layout;
+    if (!layout) {
+      overlay.innerHTML = '';
+      return;
+    }
+
+    const docEpoch = this.#epochMapper.getCurrentEpoch();
+    // The visible layout DOM does not match the current document state.
+    // Avoid rendering a "best effort" permission overlay that would drift.
+    if (this.#layoutEpoch < docEpoch) {
+      return;
+    }
+
+    const pageHeight = this.#getBodyPageHeight();
+    const pageGap = layout.pageGap ?? this.#getEffectivePageGap();
+    const fragment = overlay.ownerDocument?.createDocumentFragment();
+    if (!fragment) {
+      overlay.innerHTML = '';
+      return;
+    }
+
+    ranges.forEach(({ from, to }) => {
+      const rects = this.#computeSelectionRectsFromDom(from, to);
+      if (!rects?.length) {
+        return;
+      }
+      rects.forEach((rect) => {
+        const pageLocalY = rect.y - rect.pageIndex * (pageHeight + pageGap);
+        const coords = this.#convertPageLocalToOverlayCoords(rect.pageIndex, rect.x, pageLocalY);
+        if (!coords) {
+          return;
+        }
+        const highlight = overlay.ownerDocument?.createElement('div');
+        if (!highlight) {
+          return;
+        }
+        highlight.className = 'presentation-editor__permission-highlight';
+        Object.assign(highlight.style, {
+          position: 'absolute',
+          left: `${coords.x}px`,
+          top: `${coords.y}px`,
+          width: `${Math.max(1, rect.width)}px`,
+          height: `${Math.max(1, rect.height)}px`,
+          borderRadius: '2px',
+          pointerEvents: 'none',
+          zIndex: 1,
+        });
+        fragment.appendChild(highlight);
+      });
+    });
+
+    overlay.innerHTML = '';
+    overlay.appendChild(fragment);
+  }
+
   #resolveLayoutOptions(blocks: FlowBlock[] | undefined, sectionMetadata: SectionMetadata[]) {
     const defaults = this.#computeDefaultLayoutDefaults();
     const firstSection = blocks?.find(
@@ -5873,7 +5968,7 @@ export class PresentationEditor extends EventEmitter {
   }
 
   #validateHeaderFooterEditPermission(): { allowed: boolean; reason?: string } {
-    if (this.#documentMode === 'viewing') {
+    if (this.#isViewLocked()) {
       return { allowed: false, reason: 'documentMode' };
     }
     if (!this.#editor.isEditable) {
@@ -6905,6 +7000,19 @@ export class PresentationEditor extends EventEmitter {
     this.#errorBannerMessage = null;
   }
 
+  /**
+   * 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.
+   */
+  #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;
+    return this.#documentMode === 'viewing';
+  }
+
   /**
    * Applies vertical alignment and font scaling to layout DOM elements for subscript/superscript rendering.
    *

packages/super-editor/src/core/header-footer/EditorOverlayManager.ts

@@ -94,9 +94,6 @@ export class EditorOverlayManager {
   /** Full-width border line element (MS Word style) */
   #borderLine: HTMLElement | null = null;
 
-  /** Dimming overlay element (for dimming body content during editing) */
-  #dimmingOverlay: HTMLElement | null = null;
-
   /**
    * Creates a new EditorOverlayManager instance.
    *
@@ -466,18 +463,6 @@ export class EditorOverlayManager {
     }
   }
 
-  /**
-   * Hides and removes the dimming overlay.
-   * @internal Reserved for future implementation of body dimming during header/footer editing.
-   */
-  // eslint-disable-next-line no-unused-private-class-members
-  #hideDimmingOverlay(): void {
-    if (this.#dimmingOverlay) {
-      this.#dimmingOverlay.remove();
-      this.#dimmingOverlay = null;
-    }
-  }
-
   /**
    * Shows a full-width border line at the bottom of the header or top of the footer.
    * This creates the MS Word style visual indicator spanning edge-to-edge of the page.

packages/super-editor/src/extensions/index.js

@@ -66,11 +66,13 @@ import { LinkedStyles } from './linked-styles/linked-styles.js';
 import { Search } from './search/index.js';
 import { NodeResizer } from './noderesizer/index.js';
 import { CustomSelection } from './custom-selection/index.js';
+import { PermissionRanges } from './permission-ranges/index.js';
 
 // Permissions
 import { PermStart } from './perm-start/index.js';
 import { PermEnd } from './perm-end/index.js';
 
+
 // Helpers
 import { trackChangesHelpers } from './track-changes/index.js';
 
@@ -186,6 +188,7 @@ const getStarterExtensions = () => {
     ShapeGroup,
     PermStart,
     PermEnd,
+    PermissionRanges,
     PassthroughInline,
     PassthroughBlock,
   ];
@@ -257,4 +260,5 @@ export {
   ShapeGroup,
   PassthroughInline,
   PassthroughBlock,
+  PermissionRanges,
 };

packages/super-editor/src/extensions/permission-ranges/index.js

@@ -0,0 +1 @@
+export { PermissionRanges } from './permission-ranges.js';