Currently, `GfxViewportElement` hides DOM blocks outside the viewport using `display: none` to optimize performance. However, this approach presents two issues:
1. Even when hidden, all top-level blocks still undergo frequent CSS transform updates during viewport panning and zooming.
2. Hidden blocks cannot access DOM layout information, preventing `TurboRenderer` from updating the complete canvas bitmap.
To address this, this PR introduces a refactoring that divides all top-level edgeless blocks into two states: `idle` and `active`. The improvements are as follows:
1. Blocks outside the viewport are set to the `idle` state, meaning they no longer update their DOM during viewport panning or zooming. Only `active` blocks within the viewport are updated frame by frame.
2. For `idle` blocks, the hiding method switches from `display: none` to `visibility: hidden`, ensuring their layout information remains accessible to `TurboRenderer`.
[Screen Recording 2025-03-07 at 3.23.56 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/lEGcysB4lFTEbCwZ8jMv/4bac640b-f5b6-4b0b-904d-5899f96cf375.mov" />](https://app.graphite.dev/media/video/lEGcysB4lFTEbCwZ8jMv/4bac640b-f5b6-4b0b-904d-5899f96cf375.mov)
While this minimizes DOM updates, it introduces a trade-off: `idle` blocks retain an outdated layout state. Since their positions are updated using a lazy update strategy, their layout state remains frozen at the moment they were last moved out of the viewport:
To resolve this, the PR serializes and stores the viewport field of the block at that moment on the `idle` block itself. This allows the correct layout, positioned in the model coordinate system, to be restored from the stored data.
This PR implements a significant refactoring of the embed block services across multiple components (Figma, GitHub, Loom, and YouTube) in the BlockSuite codebase. Here are the key changes:
1. **Architecture Change**:
- Moves from a dynamic registration pattern to a more declarative configuration approach
- Replaces `EmbedOptionProvider.registerEmbedBlockOptions()` calls with a new `EmbedOptionConfig` factory function
2. **Service Refactoring**:
- For each embed block type (Figma, GitHub, Loom, YouTube):
- Separates configuration from service logic
- Creates new `EmbedBlockOptionConfig` constants using the new `EmbedOptionConfig` factory
- Removes the `mounted()` lifecycle hook from services where it was only used for registration
3. **Core Changes**:
- In `embed-option-service.ts`:
- Introduces new `EmbedOptionConfigIdentifier` for dependency injection
- Adds `EmbedOptionConfig` factory function for creating embed configurations
- Updates `EmbedOptionService` constructor to automatically register configurations
- Modifies DI setup to include `StdIdentifier` dependency
4. **Spec Updates**:
- Updates all block specs to include the new configuration objects
- Maintains existing functionality while using the new pattern
The main benefit of this refactoring is:
- More declarative configuration approach
- Better separation of concerns
- Reduced runtime registration code
- More predictable initialization of embed options
Let me analyze this diff and provide a clear description of the changes.
This PR introduces several significant changes focused on AI integration and code organization in the AFFiNE codebase:
1. **Enhanced SpecBuilder Functionality** (`blocksuite/affine/shared/src/utils/spec/spec-builder.ts`):
- Added method chaining by returning `this` from `extend`, `omit`, and `replace` methods
- Added new utility methods:
- `hasAll(target: ExtensionType[])`: Checks if all specified extensions exist
- `hasOneOf(target: ExtensionType[])`: Checks if at least one specified extension exists
2. **AI Extensions Modularization**:
- Split the large AI-related code into separate modular files under `packages/frontend/core/src/blocksuite/ai/extensions/`:
- `ai-code.ts`: Code block AI integration
- `ai-edgeless-root.ts`: Edgeless mode AI features
- `ai-image.ts`: Image block AI capabilities
- `ai-page-root.ts`: Page root AI integration
- `ai-paragraph.ts`: Paragraph block AI features
- `enable-ai.ts`: Central AI extension enablement logic
3. **Widget Improvements**:
- Enhanced `AffineAIPanelWidget` and `EdgelessCopilotWidget` with proper widget extensions
- Moved widget-specific extensions into their respective files
- Added proper type definitions and component registrations
4. **Code Organization**:
- Simplified exports in `index.ts`
- Better separation of concerns between different AI-related components
- More modular approach to AI feature integration
5. **AI Integration Architecture**:
- Introduced a new `enableAIExtension` function that handles:
- Replacing standard blocks with AI-enhanced versions
- Conditional enabling of AI features based on the current spec configuration
- Extension of AI chat capabilities
The changes primarily focus on improving code organization, maintainability, and the architecture of AI feature integration in the AFFiNE editor. The modularization will make it easier to maintain and extend AI capabilities across different block types and editor modes.
refactor(editor): invalidate support in turbo renderer
- Added `invalidate()` method to clear cache and canvas
- Simplified debug pane controls to single invalidate button
- Replaced layout update with refresh debounce on block updates
- Improved cache handling and bitmap drawing flow
refactor: refresh after invalidate
### TL;DR
Refactored `SpecProvider` singleton access pattern and reorganized adapter/extension code structure.
### What changed?
- Changed `SpecProvider.getInstance()` to `SpecProvider._` for cleaner singleton access
- Moved adapter/extension code from `_common` directory to dedicated `adapters` and `extensions` folders
- Consolidated adapter extensions into a single file
- Removed unused dependencies from package.json
- Deleted unnecessary schema files
- Extracted `MobileSpecsPatches` class into the mobile patching code
- Updated all references to use the new `SpecProvider._` accessor
### How to test?
- Verify all specs are properly registered and accessible via `SpecProvider._`
- Test adapter functionality for HTML, Markdown, Notion HTML and plain text
- Check mobile-specific features and patches work correctly
- Ensure preview functionality works in both page and edgeless modes
### Why make this change?
- Improves code organization by properly separating adapters and extensions
- Simplifies singleton access pattern
- Removes unnecessary dependencies and files
- Makes the codebase more maintainable by consolidating related functionality
### TL;DR
Moved image proxy middleware and adapter extensions to their respective packages and introduced a new spec provider for adapter registration.
### What changed?
- Relocated `defaultImageProxyMiddleware` from blocks to `@blocksuite/affine-block-image`
- Moved `PresentTool` from fragment-frame-panel to block-frame
- Created new adapter extension specs for HTML, Markdown, and Notion HTML
- Introduced a spec provider pattern for adapter registration
- Removed direct transformer references from RootService
- Updated imports across affected files to use new locations
### How to test?
1. Verify image proxy functionality works in exports and imports
2. Test HTML, Markdown, and Notion HTML adapters still function correctly
3. Confirm presentation mode works with the relocated PresentTool
4. Check that all file import/export operations continue to work as expected
### Why make this change?
This reorganization improves code modularity by placing features in their logical packages and introduces a more maintainable pattern for adapter registration. The spec provider pattern makes it easier to manage and extend adapter functionality while reducing coupling between components.
