fix: edgeless note preview on the editor settings is editable (#8735)

Fix issue [BS-1779](https://linear.app/affine-design/issue/BS-1779).

The attribute `contenteditable` will be `true` if the document is not read-only. In this case, the note preview can be focused on and users can edit the note content.

But we can not simply make the document read-only. If the user changes the editor settings, we also need to update the document model, which requires that the document is not read-only.

Thus following code sets the document editable before the model updates and resets the document to read-only after the model is updated.

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/shape.tsx

@@ -355,13 +355,15 @@ export const ShapeSettings = () => {
       ) as EdgelessRootService;
       const surface = getSurfaceBlock(doc);
       if (!surface) return;
+      doc.awarenessStore.setReadonly(doc.blockCollection, false);
       surface.getElementsByType('shape').forEach(node => {
         const shape = node as ShapeElementModel;
         const { shapeType, radius } = shape;
         const shapeName = getShapeName(shapeType, radius);
         const props = editorSetting.get(`shape:${shapeName}`);
         edgelessService.updateElement(shape.id, props);
       });
+      doc.awarenessStore.setReadonly(doc.blockCollection, true);
     },
     [editorSetting]
   );

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx

@@ -14,6 +14,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { map, pairwise } from 'rxjs';
 
 import {
+  editorWrapper,
   snapshotContainer,
   snapshotLabel,
   snapshotSkeleton,
@@ -59,9 +60,11 @@ export const EdgelessSnapshot = (props: Props) => {
     ) as EdgelessRootService;
     const elements = getElements(doc);
     const props = editorSetting.get(keyName) as any;
+    doc.awarenessStore.setReadonly(doc.blockCollection, false);
     elements.forEach(element => {
       edgelessService.updateElement(element.id, props);
     });
+    doc.awarenessStore.setReadonly(doc.blockCollection, true);
   }, [editorSetting, getElements, keyName]);
 
   const renderEditor = useCallback(async () => {
@@ -74,6 +77,7 @@ export const EdgelessSnapshot = (props: Props) => {
       extensions: SpecProvider.getInstance().getSpec('edgeless:preview').value,
     }).render();
     docRef.current = doc;
+    editorHostRef.current?.remove();
     editorHostRef.current = editorHost;
 
     if (firstUpdate) {
@@ -88,6 +92,7 @@ export const EdgelessSnapshot = (props: Props) => {
     ) as EdgelessRootService;
     edgelessService.specSlots.viewConnected.once(({ component }) => {
       const edgelessBlock = component as any;
+      doc.awarenessStore.setReadonly(doc.blockCollection, false);
       edgelessBlock.editorViewportSelector = 'ref-viewport';
       const frame = getFrameBlock(doc);
       if (frame) {
@@ -96,6 +101,7 @@ export const EdgelessSnapshot = (props: Props) => {
       }
       const bound = boundMap.get(docName);
       bound && edgelessService.viewport.setViewportByBound(bound);
+      doc.awarenessStore.setReadonly(doc.blockCollection, true);
     });
 
     // append to dom node
@@ -133,16 +139,7 @@ export const EdgelessSnapshot = (props: Props) => {
     <div className={snapshotContainer}>
       <div className={snapshotTitle}>{title}</div>
       <div className={snapshotLabel}>{title}</div>
-      <div
-        ref={wrapperRef}
-        style={{
-          position: 'relative',
-          pointerEvents: 'none',
-          userSelect: 'none',
-          overflow: 'hidden',
-          height,
-        }}
-      >
+      <div ref={wrapperRef} className={editorWrapper} style={{ height }}>
         <Skeleton
           className={snapshotSkeleton}
           variant="rounded"

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/style.css.ts

@@ -76,6 +76,13 @@ export const snapshotLabel = style({
   height: '24px',
 });
 
+export const editorWrapper = style({
+  position: 'relative',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  overflow: 'hidden',
+});
+
 export const shapeIndicator = style({
   boxShadow: 'none',
   backgroundColor: cssVarV2('layer/background/tertiary'),