Merge pull request #270 from toeverything/fix/whiteboard-edgeless

fix: whiteboard -> edgeless

.cz-config.js

@@ -26,7 +26,7 @@ module.exports = {
     ],
     scopes: [
         { name: 'selection' },
-        { name: 'whiteboard' },
+        { name: 'edgeless' },
         { name: 'point' },
         { name: 'group' },
         { name: 'page' },

apps/ligo-virgo-e2e/src/integration/app.spec.ts

@@ -4,7 +4,7 @@ describe('ligo-virgo', () => {
     beforeEach(() => cy.visit('/'));
 
     it('basic load check', () => {
-        getTitle().contains('👋 Get Started with AFFINE');
+        getTitle().contains('👋 Get Started with AFFiNE');
 
         cy.get('.block_container').contains('The Essentials');
 

apps/ligo-virgo/src/pages/workspace/Edgeless.tsx

@@ -9,11 +9,11 @@ const MemoAffineBoard = memo(AffineBoard, (prev, next) => {
     return prev.rootBlockId === next.rootBlockId;
 });
 
-type WhiteboardProps = {
+type EdgelessProps = {
     workspace: string;
 };
 
-export const Whiteboard = (props: WhiteboardProps) => {
+export const Edgeless = (props: EdgelessProps) => {
     const { page_id } = useParams();
     const { user } = useUserAndSpaces();
 

apps/ligo-virgo/src/pages/workspace/Home.tsx

@@ -22,7 +22,7 @@ export function WorkspaceHome() {
                     workspace_id,
                     user_initial_page_id,
                     TemplateFactory.generatePageTemplateByGroupKeys({
-                        name: '👋 Get Started with AFFINE',
+                        name: '👋 Get Started with AFFiNE',
                         groupKeys: [
                             'getStartedGroup0',
                             'getStartedGroup1',

apps/ligo-virgo/src/pages/workspace/WorkspaceContainer.tsx

@@ -4,10 +4,10 @@ import { useUserAndSpaces } from '@toeverything/datasource/state';
 
 import { WorkspaceRootContainer } from './Container';
 import { Page } from './docs';
+import { Edgeless } from './Edgeless';
 import { WorkspaceHome } from './Home';
 import Labels from './labels';
 import Pages from './pages';
-import { Whiteboard } from './Whiteboard';
 
 export function WorkspaceContainer() {
     const { workspace_id } = useParams();
@@ -26,8 +26,8 @@ export function WorkspaceContainer() {
                 <Route path="/labels" element={<Labels />} />
                 <Route path="/pages" element={<Pages />} />
                 <Route
-                    path="/:page_id/whiteboard"
+                    path="/:page_id/edgeless"
-                    element={<Whiteboard workspace={workspace_id} />}
+                    element={<Edgeless workspace={workspace_id} />}
                 />
                 <Route
                     path="/:page_id"

apps/ligo-virgo/webpack.config.js

@@ -73,9 +73,9 @@ module.exports = function (webpackConfig) {
                         priority: -5,
                         chunks: 'all',
                     },
-                    whiteboard: {
+                    edgeless: {
                         test: /(libs\/components\/board-|[\\/]node_modules[\\/]@tldraw)/,
-                        name: 'whiteboard',
+                        name: 'edgeless',
                         priority: -7,
                         chunks: 'all',
                     },

libs/components/affine-editor/src/Editor.tsx

@@ -17,7 +17,7 @@ interface AffineEditorProps {
      */
     scrollBlank?: boolean;
 
-    isWhiteboard?: boolean;
+    isEdgeless?: boolean;
 
     scrollContainer?: HTMLElement;
     scrollController?: {
@@ -29,12 +29,12 @@ interface AffineEditorProps {
 function _useConstantWithDispose(
     workspace: string,
     rootBlockId: string,
-    isWhiteboard: boolean
+    isEdgeless: boolean
 ) {
     const ref = useRef<{ data: BlockEditor; onInit: boolean }>(null);
     const { setCurrentEditors } = useCurrentEditors();
     ref.current ??= {
-        data: createEditor(workspace, rootBlockId, isWhiteboard),
+        data: createEditor(workspace, rootBlockId, isEdgeless),
         onInit: true,
     };
 
@@ -42,18 +42,14 @@ function _useConstantWithDispose(
         if (ref.current.onInit) {
             ref.current.onInit = false;
         } else {
-            ref.current.data = createEditor(
+            ref.current.data = createEditor(workspace, rootBlockId, isEdgeless);
-                workspace,
-                rootBlockId,
-                isWhiteboard
-            );
         }
         setCurrentEditors(prev => ({
             ...prev,
             [rootBlockId]: ref.current.data,
         }));
         return () => ref.current.data.dispose();
-    }, [workspace, rootBlockId, isWhiteboard, setCurrentEditors]);
+    }, [workspace, rootBlockId, isEdgeless, setCurrentEditors]);
 
     return ref.current.data;
 }
@@ -64,7 +60,7 @@ export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
             workspace,
             rootBlockId,
             scrollBlank = true,
-            isWhiteboard,
+            isEdgeless,
             scrollController,
             scrollContainer,
         },
@@ -73,7 +69,7 @@ export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
         const editor = _useConstantWithDispose(
             workspace,
             rootBlockId,
-            isWhiteboard
+            isEdgeless
         );
 
         useEffect(() => {

libs/components/affine-editor/src/create-editor.ts

@@ -30,7 +30,7 @@ import { BlockEditor } from '@toeverything/framework/virgo';
 export const createEditor = (
     workspace: string,
     rootBlockId: string,
-    isWhiteboard?: boolean
+    isEdgeless?: boolean
 ) => {
     const blockEditor = new BlockEditor({
         workspace,
@@ -61,7 +61,7 @@ export const createEditor = (
             [Protocol.Block.Type.groupDivider]: new GroupDividerBlock(),
         },
         plugins,
-        isWhiteboard,
+        isEdgeless,
     });
 
     return blockEditor;

libs/components/board-shapes/src/editor-util/EditorUtil.tsx

@@ -148,7 +148,7 @@ export class EditorUtil extends TDShapeUtil<T, E> {
                             workspace={workspace}
                             rootBlockId={rootBlockId}
                             scrollBlank={false}
-                            isWhiteboard
+                            isEdgeless
                         />
                         {editingText ? null : <Mask />}
                     </Container>

libs/components/editor-blocks/src/blocks/group/GroupView.tsx

@@ -103,7 +103,7 @@ export const GroupView = (props: CreateView) => {
                     <View {...props} />
                 </GroupContainer>
 
-                {editor.isWhiteboard ? null : (
+                {editor.isEdgeless ? null : (
                     <GroupAction onAddGroup={addGroup} />
                 )}
             </GroupBox>

libs/components/editor-blocks/src/components/source-view/format-url/affine.ts

@@ -1,5 +1,5 @@
 const _regex =
-    /^(https?:\/\/(localhost:4200|(nightly|app)\.affine\.pro|.*?\.ligo-virgo\.pages\.dev)\/\w{28}\/)?(affine\w{16})(\/whiteboard)?$/;
+    /^(https?:\/\/(localhost:4200|(nightly|app)\.affine\.pro|.*?\.ligo-virgo\.pages\.dev)\/\w{28}\/)?(affine\w{16})(\/edgeless)?$/;
 
 export const isAffineUrl = (url?: string) => {
     if (!url) return false;

libs/components/editor-core/src/RenderRoot.tsx

@@ -1,16 +1,16 @@
-import type { BlockEditor } from './editor';
 import { styled, usePatchNodes } from '@toeverything/components/ui';
-import type { PropsWithChildren } from 'react';
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { EditorProvider } from './Contexts';
-import { SelectionRect, SelectionRef } from './Selection';
 import {
     Protocol,
     services,
     type ReturnUnobserve,
 } from '@toeverything/datasource/db-service';
-import { addNewGroup, appendNewGroup } from './recast-block';
+import type { PropsWithChildren } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { EditorProvider } from './Contexts';
+import type { BlockEditor } from './editor';
 import { useIsOnDrag } from './hooks';
+import { addNewGroup, appendNewGroup } from './recast-block';
+import { SelectionRect, SelectionRef } from './Selection';
 
 interface RenderRootProps {
     editor: BlockEditor;
@@ -160,7 +160,7 @@ export const RenderRoot = ({
     return (
         <EditorProvider value={{ editor, editorElement }}>
             <Container
-                isWhiteboard={editor.isWhiteboard}
+                isEdgeless={editor.isEdgeless}
                 ref={ref => {
                     if (ref != null && ref !== editor.container) {
                         editor.container = ref;
@@ -188,7 +188,7 @@ export const RenderRoot = ({
                 </Content>
                 {/** TODO: remove selectionManager insert */}
                 {editor && <SelectionRect ref={selectionRef} editor={editor} />}
-                {editor.isWhiteboard ? null : <ScrollBlank editor={editor} />}
+                {editor.isEdgeless ? null : <ScrollBlank editor={editor} />}
                 {patchedNodes}
             </Container>
         </EditorProvider>
@@ -262,16 +262,10 @@ function ScrollBlank({ editor }: { editor: BlockEditor }) {
 const PADDING_X = 150;
 
 const Container = styled('div')(
-    ({
+    ({ isEdgeless, isOnDrag }: { isEdgeless: boolean; isOnDrag: boolean }) => ({
-        isWhiteboard,
-        isOnDrag,
-    }: {
-        isWhiteboard: boolean;
-        isOnDrag: boolean;
-    }) => ({
         width: '100%',
-        padding: isWhiteboard ? 0 : `72px ${PADDING_X}px 0 ${PADDING_X}px`,
+        padding: isEdgeless ? 0 : `72px ${PADDING_X}px 0 ${PADDING_X}px`,
-        minWidth: isWhiteboard ? 'unset' : '940px',
+        minWidth: isEdgeless ? 'unset' : '940px',
         position: 'relative',
         ...(isOnDrag && {
             cursor: 'grabbing',

libs/components/editor-core/src/editor/editor.ts

@@ -42,7 +42,7 @@ export interface EditorCtorProps {
     views: Partial<Record<keyof BlockFlavors, BaseView>>;
     plugins: PluginCreator[];
     rootBlockId: string;
-    isWhiteboard?: boolean;
+    isEdgeless?: boolean;
 }
 
 export class Editor implements Virgo {
@@ -75,7 +75,7 @@ export class Editor implements Virgo {
         render: PatchNode;
         has: (key: string) => boolean;
     };
-    public isWhiteboard = false;
+    public isEdgeless = false;
     private _isDisposed = false;
 
     constructor(props: EditorCtorProps) {
@@ -85,8 +85,8 @@ export class Editor implements Virgo {
         this.hooks = new Hooks();
         this.plugin_manager = new PluginManager(this, this.hooks);
         this.plugin_manager.registerAll(props.plugins);
-        if (props.isWhiteboard) {
+        if (props.isEdgeless) {
-            this.isWhiteboard = true;
+            this.isEdgeless = true;
         }
         for (const [name, block] of Object.entries(props.views)) {
             services.api.editorBlock.registerContentExporter(

libs/components/editor-core/src/editor/types.ts

@@ -107,7 +107,7 @@ export interface Virgo {
     getBlockDomById: (id: string) => Promise<HTMLElement>;
     getBlockByPoint: (point: Point) => Promise<AsyncBlock>;
     getGroupBlockByPoint: (point: Point) => Promise<AsyncBlock>;
-    isWhiteboard: boolean;
+    isEdgeless: boolean;
     mouseManager: MouseManager;
 }
 

libs/components/editor-core/src/recast-block/types/view.ts

@@ -7,7 +7,6 @@ export enum RecastScene {
     Page = 'page',
     Kanban = 'kanban',
     Table = 'table',
-    // Whiteboard = 'whiteboard',
 }
 
 export type RecastViewId = string & {

libs/components/editor-plugins/src/menu/group-menu/Plugin.tsx

@@ -14,7 +14,7 @@ export class GroupMenuPlugin extends BasePlugin {
     }
 
     protected override _onRender(): void {
-        if (this.editor.isWhiteboard) return;
+        if (this.editor.isEdgeless) return;
         this.root = new PluginRenderRoot({
             name: PLUGIN_NAME,
             render: this.editor.reactRenderRoot.render,

libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx

@@ -4,7 +4,7 @@ import { StatusText } from './StatusText';
 import { StatusTrack } from './StatusTrack';
 import { DocMode } from './type';
 
-const isBoard = (pathname: string): boolean => pathname.endsWith('/whiteboard');
+const isBoard = (pathname: string): boolean => pathname.endsWith('/edgeless');
 
 export const Switcher = () => {
     const navigate = useNavigate();
@@ -20,11 +20,11 @@ export const Switcher = () => {
         /**
          * There are two possible modes:
          * Page mode: /{workspaceId}/{pageId}
-         * Board mode: /{workspaceId}/{pageId}/whiteboard
+         * Board mode: /{workspaceId}/{pageId}/edgeless
          */
         const pageId = params['*'].split('/')[0];
         const targetUrl = `/${workspaceId}/${pageId}${
-            targetViewMode === DocMode.board ? '/whiteboard' : ''
+            targetViewMode === DocMode.board ? '/edgeless' : ''
         }`;
         navigate(targetUrl);
     };

libs/components/layout/src/header/Header.tsx

@@ -26,7 +26,7 @@ function hideAffineHeader(pathname: string): boolean {
 }
 
 type HeaderIconProps = {
-    isWhiteboardView?: boolean;
+    isEdgelessView?: boolean;
 };
 
 export const AffineHeader = () => {
@@ -38,7 +38,7 @@ export const AffineHeader = () => {
     const { toggleSettingsSidebar: toggleInfoSidebar } =
         useShowSettingsSidebar();
     const theme = useTheme();
-    const isWhiteboardView = pathname.endsWith('/whiteboard');
+    const isEdgelessView = pathname.endsWith('/edgeless');
     const pageHistoryPortalFlag = useFlag('BooleanPageHistoryPortal', false);
     const pageSettingPortalFlag = useFlag('PageSettingPortal', false);
     const BooleanPageSharePortal = useFlag('BooleanPageSharePortal', false);
@@ -77,9 +77,9 @@ export const AffineHeader = () => {
                         <Tooltip content="Doc">
                             <HeaderIcon
                                 style={{ width: '80px' }}
-                                isWhiteboardView={!isWhiteboardView}
+                                isEdgelessView={!isEdgelessView}
                                 onClick={() =>
-                                    isWhiteboardView
+                                    isEdgelessView
                                         ? navigate(
                                               `/${
                                                   params['workspace_id'] ||
@@ -100,17 +100,17 @@ export const AffineHeader = () => {
                                 </span>
                             </HeaderIcon>
                         </Tooltip>
-                        <Tooltip content="Whiteboard">
+                        <Tooltip content="Edgeless">
                             <HeaderIcon
-                                isWhiteboardView={isWhiteboardView}
+                                isEdgelessView={isEdgelessView}
                                 onClick={() =>
-                                    isWhiteboardView
+                                    isEdgelessView
                                         ? null
                                         : navigate(
                                               `/${
                                                   params['workspace_id'] ||
                                                   'space'
-                                              }/${params['*']}` + '/whiteboard'
+                                              }/${params['*']}` + '/edgeless'
                                           )
                                 }
                             >
@@ -166,14 +166,14 @@ const StyledHeaderRight = styled('div')`
 `;
 
 const HeaderIcon = styled(IconButton, {
-    shouldForwardProp: (prop: string) => prop !== 'isWhiteboardView',
+    shouldForwardProp: (prop: string) => prop !== 'isEdgelessView',
-})<HeaderIconProps>(({ isWhiteboardView = false }) => ({
+})<HeaderIconProps>(({ isEdgelessView = false }) => ({
     color: '#98ACBD',
     minWidth: 48,
     width: 48,
     height: 36,
     borderRadius: '8px',
-    ...(isWhiteboardView && {
+    ...(isEdgelessView && {
         color: '#fff',
         backgroundColor: '#3E6FDB',
         '&:hover': {

libs/datasource/db-service/src/protocol/index.ts

@@ -22,7 +22,6 @@ const Protocol = {
             quote: 'quote',
             toc: 'toc',
             database: 'database',
-            whiteboard: 'whiteboard',
             template: 'template',
             discussion: 'discussion',
             comment: 'comment',

libs/datasource/db-service/src/services/editor-block/utils/column/default-config.ts

@@ -16,7 +16,6 @@ export enum GroupScene {
     page = 'page',
     table = 'table',
     kanban = 'kanban',
-    whiteboard = 'whiteboard',
 }
 
 /**

libs/datasource/jwt/src/types/block.ts

@@ -37,7 +37,6 @@ export const BlockFlavors = {
     quote: 'quote' as const, // quote
     toc: 'toc' as const, //directory
     database: 'database' as const, //Multidimensional table
-    whiteboard: 'whiteboard' as const, // whiteboard
     template: 'template' as const, // template
     discussion: 'discussion' as const, // comment header
     comment: 'comment' as const, // comment details