Repository: toeverything/AFFiNE
File: packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx (TypeScript)

Code before:
      store: doc,
      extensions: [
        ...SpecProvider.getInstance().getSpec('edgeless:preview').value,
        getThemeExtension(framework),
      ],
    }).render();
    docRef.current = doc;
    editorHostRef.current?.remove();
    editorHostRef.current = editorHost;

    if (firstUpdate) {
      firstUpdate(doc, editorHost);
    } else {
      updateElements();
    }

    // refresh viewport
    const edgelessService = editorHost.std.getService(
      'affine:page'
    ) as EdgelessRootService;
    edgelessService.specSlots.viewConnected.once(({ component }) => {
      const edgelessBlock = component as any;
      doc.readonly = false;
      edgelessBlock.editorViewportSelector = 'ref-viewport';
      const frame = getFrameBlock(doc);
      if (frame && frame.id !== 'SQi7VaLNb8') {
        // frame with id 'SQi7VaLNb8' shouldn't be deleted, it is a part of frame settings
        boundMap.set(docName, Bound.deserialize(frame.xywh));
        doc.deleteBlock(frame);
      }
      const bound = boundMap.get(docName);
      bound && edgelessService.viewport.setViewportByBound(bound);
      doc.readonly = true;
    });

    // append to dom node
    wrapperRef.current.append(editorHost);
  }, [docName, firstUpdate, framework, updateElements]);

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    renderEditor();
    return () => editorHostRef.current?.remove();
  }, [renderEditor]);

  // observe editor settings change
  useEffect(() => {
    const sub = editorSetting.provider
      .watchAll()
      .pipe(
        map(settings => {

Review comment (suggestion):
can replace `frame.id` with `docName` or `keyName`

Code after:
      store: doc,
      extensions: [
        ...SpecProvider.getInstance().getSpec('edgeless:preview').value,
        getThemeExtension(framework),
      ],
    }).render();
    docRef.current = doc;
    editorHostRef.current?.remove();
    editorHostRef.current = editorHost;

    if (firstUpdate) {
      firstUpdate(doc, editorHost);
    } else {
      updateElements();
    }

    // refresh viewport
    const edgelessService = editorHost.std.getService(
      'affine:page'
    ) as EdgelessRootService;
    edgelessService.specSlots.viewConnected.once(({ component }) => {
      const edgelessBlock = component as any;
      doc.readonly = false;
      edgelessBlock.editorViewportSelector = 'ref-viewport';
      const frame = getFrameBlock(doc);
      if (frame && docName !== 'frame') {
        // docName with value 'frame' shouldn't be deleted, it is a part of frame settings
        boundMap.set(docName, Bound.deserialize(frame.xywh));
        doc.deleteBlock(frame);
      }
      const bound = boundMap.get(docName);
      bound && edgelessService.viewport.setViewportByBound(bound);
      doc.readonly = true;
    });

    // append to dom node
    wrapperRef.current.append(editorHost);
  }, [docName, firstUpdate, framework, updateElements]);

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    renderEditor();
    return () => editorHostRef.current?.remove();
  }, [renderEditor]);

  // observe editor settings change
  useEffect(() => {
    const sub = editorSetting.provider
      .watchAll()
      .pipe(
        map(settings => {