Merge branch 'develop' into fix/experience

.all-contributorsrc

@@ -10,6 +10,7 @@
     "commit": false,
     "commitConvention": "angular",
     "contributorsPerLine": 7,
+    "badgeTemplate": "\n[all-contributors-badge]: https://img.shields.io/badge/all_contributors-<%= contributors.length %>-orange.svg?style=flat-square\n",
     "contributors": [
         {
             "login": "darkskygit",
@@ -229,6 +230,42 @@
             "contributions": [
                 "doc"
             ]
+        },
+        {
+            "login": "liby",
+            "name": "Bryan Lee",
+            "avatar_url": "https://avatars.githubusercontent.com/u/38807139?v=4",
+            "profile": "https://liby.github.io/notes",
+            "contributions": [
+                "code"
+            ]
+        },
+        {
+            "login": "chenmoonmo",
+            "name": "Simon Li",
+            "avatar_url": "https://avatars.githubusercontent.com/u/36295999?v=4",
+            "profile": "https://github.com/chenmoonmo",
+            "contributions": [
+                "code"
+            ]
+        },
+        {
+            "login": "githbq",
+            "name": "Bob Hu",
+            "avatar_url": "https://avatars.githubusercontent.com/u/10009709?v=4",
+            "profile": "https://github.com/githbq",
+            "contributions": [
+                "code"
+            ]
+        },
+        {
+            "login": "lucky-chap",
+            "name": "Quavo",
+            "avatar_url": "https://avatars.githubusercontent.com/u/67266933?v=4",
+            "profile": "https://quavo.vercel.app/",
+            "contributions": [
+                "doc"
+            ]
         }
     ]
 }

.cz-config.js

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

.env

@@ -1,4 +1,5 @@
 # use for download icon from figma
+
 FIGMA_TOKEN
 NODE_ENV
 AFFINE_FEATURE_FLAG_TOKEN

.vscode/settings.json

@@ -25,6 +25,7 @@
         "Kanban",
         "keyval",
         "ligo",
+        "livedemo",
         "lozad",
         "mastersthesis",
         "nrwl",

README.md

@@ -18,7 +18,7 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 -->
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 
-[all-contributors-badge]: https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square
+[all-contributors-badge]: https://img.shields.io/badge/all_contributors-27-orange.svg?style=flat-square
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
@@ -224,6 +224,10 @@ For help, discussion about best practices, or any other conversation that would
   <tr>
     <td align="center"><a href="https://github.com/westongraham"><img src="https://avatars.githubusercontent.com/u/89493023?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Weston Graham</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=westongraham" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/pointmax"><img src="https://avatars.githubusercontent.com/u/49361135?v=4?s=50" width="50px;" alt=""/><br /><sub><b>pointmax</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=pointmax" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://liby.github.io/notes"><img src="https://avatars.githubusercontent.com/u/38807139?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Bryan Lee</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=liby" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/chenmoonmo"><img src="https://avatars.githubusercontent.com/u/36295999?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Simon Li</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=chenmoonmo" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/githbq"><img src="https://avatars.githubusercontent.com/u/10009709?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Bob Hu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=githbq" title="Code">💻</a></td>
+    <td align="center"><a href="https://quavo.vercel.app/"><img src="https://avatars.githubusercontent.com/u/67266933?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Quavo</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lucky-chap" title="Documentation">📖</a></td>
   </tr>
 </table>
 

apps/ligo-virgo-e2e/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "ligo-virgo-e2e",
+    "version": "1.0.0",
+    "license": "MIT",
+    "description": "",
+    "author": "AFFiNE <developer@affine.pro>",
+    "dependencies": {},
+    "devDependencies": {
+        "cypress": "^10.4.0"
+    }
+}

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-e2e/src/support/commands.ts

@@ -12,14 +12,14 @@
 declare namespace Cypress {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Chainable<Subject> {
-        login(email: string, password: string): void;
+        // login(email: string, password: string): void;
     }
 }
 //
 // -- This is a parent command --
-Cypress.Commands.add('login', (email, password) => {
+// Cypress.Commands.add('login', (email, password) => {
-    console.log('Custom command example: Login', email, password);
+//     console.log('Custom command example: Login', email, password);
-});
+// });
 //
 // -- This is a child command --
 // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })

apps/ligo-virgo/src/pages/AppContainer.tsx

@@ -1,11 +1,20 @@
-import { Outlet } from 'react-router-dom';
+import { css, Global } from '@emotion/react';
-
 import { LayoutHeader, SettingsSidebar } from '@toeverything/components/layout';
 import { styled } from '@toeverything/components/ui';
+import { Outlet } from 'react-router-dom';
 
 export function LigoVirgoRootContainer() {
     return (
-        <StyledRootContainer id="idAppRoot">
+        <>
+            <Global
+                styles={css`
+                    #root {
+                        display: flex;
+                        flex-direction: row;
+                        height: 100vh;
+                    }
+                `}
+            />
             <StyledContentContainer>
                 <LayoutHeader />
                 <StyledMainContainer>
@@ -13,7 +22,7 @@ export function LigoVirgoRootContainer() {
                 </StyledMainContainer>
             </StyledContentContainer>
             <SettingsSidebar />
-        </StyledRootContainer>
+        </>
     );
 }
 
@@ -23,12 +32,6 @@ const StyledMainContainer = styled('div')({
     overflowY: 'hidden',
 });
 
-const StyledRootContainer = styled('div')({
-    display: 'flex',
-    flexDirection: 'row',
-    height: '100vh',
-});
-
 const StyledContentContainer = styled('div')({
     flex: 'auto',
     display: 'flex',

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,8 +22,12 @@ export function WorkspaceHome() {
                     workspace_id,
                     user_initial_page_id,
                     TemplateFactory.generatePageTemplateByGroupKeys({
-                        name: '👋 Get Started with AFFINE',
+                        name: '👋 Get Started with AFFiNE',
-                        groupKeys: ['getStartedGroup0', 'getStartedGroup1'],
+                        groupKeys: [
+                            'getStartedGroup0',
+                            'getStartedGroup1',
+                            'getStartedGroup2',
+                        ],
                     })
                 );
             }

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',
                     },

apps/venus/src/app/index.tsx

@@ -715,9 +715,9 @@ export function App() {
                         >
                             Your data is yours; it is always locally stored and
                             secured - available to you always. While still being
-                            able enjoy collaboration features such as real-time
+                            able to enjoy collaboration features such as
-                            editing and sharing with others, without any cloud
+                            real-time editing and sharing with others, without
-                            setup.
+                            any cloud setup.
                         </Typography>
                     </Box>
                 </Grid>

docs/CONTRIBUTING.md

@@ -1,13 +0,0 @@
-# AFFiNE CONTRIBUTING
-
-Contributions are **welcome** and will be fully **credited**.
-
-## **Requirements**
-
-If the project maintainer has any additional requirements, you will find them listed here.
-
--   Code Style [AFFiNE Code Guideline](./affine-code-guideline.md)
--   Git Rules [AFFiNE Git Guideline ](./affine-git-guideline.md)
--   • **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
-
-**Happy coding**!

docs/affine-code-guideline.md

@@ -1,22 +0,0 @@
-# AFFiNE Code Guideline
-
-| Item                                            | Specification                                       | Example                                                                               |
-| ----------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| [Packages/Paths]()                              | aaa-bbb-ccc                                         | ligo-virgo, editor-todo                                                               |
-| [.tsx]()                                        | PascalCase                                          | AddPage.tsx                                                                           |
-| [.ts]()                                         | kebab-case                                          | file-export.ts                                                                        |
-| [.json]()                                       | kebab-case                                          | file-export.ts                                                                        |
-| [Domain File]()                                 | OpenRules                                           | xx._d.ts_ | _tsconfig.xx_.json | xx.spec .ts | .env.xx | yy-ds.ts |
-| [Types]()                                       | UpperCamelCase                                      | WebEvent                                                                              |
-| [Enum variants]()                               | UpperCamelCase                                      | Status{ Todo,Completed }                                                              |
-| [Functions]()                                   | lowerCamelCase                                      |                                                                                       |
-| [React Funciton Compoment]()                    | UpperCamelCase                                      | function DocShare(){}                                                                 |
-| [React HOC]()                                   | UpperCamelCase                                      | function BussinessText(){}                                                            |
-| [Function Parameter]()                          | lowerCamelCase                                      | function searchByIdOrName(idOrname){ }                                                |
-| [Methods for external access]()                 | lowerCamelCase                                      | public sayHello(){ };                                                                 |
-| [Externally Accessible Variables (Variables)]() | lowerCamelCase                                      | animal.sleepCount                                                                     |
-| [General constructors]()                        | constructor or with_more_details                    |                                                                                       |
-| [Local variables]()                             | lowerCamelCase                                      | const tableCollection = [];                                                           |
-| [Statics]()                                     | SCREAMING_SNAKE_CASE                                | GLOBAL_MESSAGES                                                                       |
-| [Constants](b)                                  | SCREAMING_SNAKE_CASE                                | GLOBAL_CONFIG                                                                         |
-| [Type parameters]()                             | UpperCamelCase , usually a single capital letter: T | let a: Animal = new Animal()                                                          |

docs/affine-git-guideline.md

@@ -1,91 +0,0 @@
-# AFFiNE Git Guideline
-
-# 1. Git Branch Name
-
--   fix/
--   feat/
-
-# 2. **Commit message guidelines**
-
-AFFiNE uses [semantic-release](https://github.com/semantic-release/semantic-release) for automated version management and package publishing. For that to work, commitmessages need to be in the right format.
-
-### **Atomic commits**
-
-If possible, make [atomic commits](https://en.wikipedia.org/wiki/Atomic_commit), which means:
-
--   a commit should contain exactly one self-contained functional change
--   a functional change should be contained in exactly one commit
--   a commit should not create an inconsistent state (such as test errors, linting errors, partial fix, feature with documentation etc...)
-
-A complex feature can be broken down into multiple commits as long as each one keep a consistent state and consist of a self-contained change.
-
-### **Commit message format**
-
-Each commit message consists of a **header**, a **body** and a **footer**. The header has a special format that includes a **type**, a **scope** and a **subject**:
-
-`<type>(<scope>): <subject>
-<BLANK LINE>
-
-<body>
-<BLANK LINE>
-<footer>`
-
-The **header** is mandatory and the **scope** of the header is optional.
-
-The **footer** can contain a [closing reference to an issue](https://help.github.com/articles/closing-issues-via-commit-messages).
-
-### **Revert**
-
-If the commit reverts a previous commit, it should begin with `revert:` , followed by the header of the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is the SHA of the commit being reverted.
-
-### **Type**
-
-The type must be one of the following:
-| Type | Description |
-| ----------- | ----------- |
-| build | Changes that affect the build system or external | dependencies (example scopes: gulp, broccoli, npm) |
-| ci | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs) |
-| docs | Documentation only changes |
-| feat | A new feature |
-| fix | A bug fix |
-| perf | A code change that improves performance |
-| refactor | A code change that neither fixes a bug nor adds a feature |
-| style | Changes that do not affect the meaning of the code(white-space, formatting, missing semi-colons, etc) |
-| test | Adding missing tests or correcting existing tests |
-| chore | Changes to the build process or auxiliary tools | |
-
-### **Subject**
-
-The subject contains succinct description of the change:
-
--   use the imperative, present tense: "change" not "changed" nor "changes"
--   don't capitalize first letter
--   no dot (.) at the end
-
-### **Body**
-
-Just as in the **subject**, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
-
-### **Footer**
-
-The footer should contain any information about **Breaking Changes** and is also the place to reference GitHub issues that this commit **Closes**.
-
-**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.
-
-### **Examples**
-
-`fix(pencil): stop graphite breaking when too much pressure applied`
-
-``feat(pencil): add 'graphiteWidth' option`
-
-Fix #42`
-
-`perf(pencil): remove graphiteWidth option`
-
-BREAKING CHANGE: The graphiteWidth option has been removed.
-
-The default graphite width of 10mm is always used for performance reasons.`
-
-# 3. tracking-your-work-with-issues
-
-[https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues](https://docs.github.com/en/issues/tracking-your-work-with-issues/about-issues)

docs/affine-icons-user-guide.md

@@ -1,7 +0,0 @@
-## AFFiNE Icons
-
-> Abundant and colorful icon resource for free free use
-
-Website: [http://localhost:4200/tools/icons](http://localhost:4200/tools/icons)
-
-Figma: [Figma AFFiNE Icons](https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734)

docs/how-to-add-ui-component-in-affine.md

@@ -1,53 +0,0 @@
-# Tutorial
-
-AFFiNE defines a new component development specification in Figma, extends AFFiNE UI Components based on MUI BASE and MUI SYSTEM, and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , eg `src/libs/components/ui/src/button/base-button.ts`
-
-```jsx
-import ButtonUnstyled, {
-    buttonUnstyledClasses,
-} from '@mui/base/ButtonUnstyled';
-import { styled } from '../styled';
-
-/* eslint-disable @typescript-eslint/naming-convention */
-const blue = {
-    500: '#007FFF',
-    600: '#0072E5',
-    700: '#0059B2',
-};
-/* eslint-enable @typescript-eslint/naming-convention */
-
-export const BaseButton = styled(ButtonUnstyled)`
-    font-family: IBM Plex Sans, sans-serif;
-    font-weight: bold;
-    font-size: 0.875rem;
-    background-color: ${blue[500]};
-    border-radius: 8px;
-    padding: 4px 8px;
-    color: white;
-    transition: all 150ms ease;
-    cursor: pointer;
-    border: none;
-
-    &:hover {
-        background-color: ${blue[600]};
-    }
-
-    &.${buttonUnstyledClasses.active} {
-        background-color: ${blue[700]};
-    }
-
-    &.${buttonUnstyledClasses.focusVisible} {
-        box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
-        outline: none;
-    }
-
-    &.${buttonUnstyledClasses.disabled} {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-`;
-```
-
-```jsx
-export { BaseButton } from './base-button';
-```

docs/how-to-auto-download-figma-assets-in-affine.md

@@ -1,13 +0,0 @@
-Create or edit the `.env.local` file in the project root directory, add `FIGMA_TOKEN`, you can refer to Generate ACCESS_TOKEN: https://www.figma.com/developers/api#access-tokens
-
-```
-FIGMA_TOKEN=your-figma-token
-```
-
-Execute the command `nx run components-icons:figmaRes` to synchronize figma resources
-
-figma icon resource address: https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734
-
-### Icon Supplementary Style
-
-Some icons downloaded directly have incorrect styles. You can add supplementary styles in `tools/executors/figmaRes/patch-styles.js`. The key is the name of the icon kebab-case.

docs/how-to-customize-rollup-config.md

@@ -1,3 +0,0 @@
-## Single Component Rollup Config
-
-If styles are used in a Component, `rollupConfig` under `project.json` needs to be modified to `libs/rollup.config.cjs`

docs/how-to-write-css-in-affine.md

@@ -1,103 +0,0 @@
-[toc]
-
-# Tutorial
-
-1. MUI styled
-
-```jsx
-import type { MouseEventHandler, ReactNode } from 'react';
-import { styled } from '@toeverything/components/ui';
-
-const CardContainer = styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: '#fff',
-    border: '1px solid #E2E7ED',
-    borderRadius: '5px',
-});
-
-const CardContent = styled('div')({
-    margin: '23px 52px 24px 19px',
-});
-
-const CardActions = styled('div')({
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    width: '100%',
-    height: '29px',
-    background: 'rgba(152, 172, 189, 0.1)',
-    borderRadius: '0px 0px 5px 5px',
-    padding: '6px 0 6px 19px',
-    fontSize: '12px',
-    fontWeight: '300',
-    color: '#98ACBD',
-});
-
-const PlusIcon = styled('div')({
-    marginRight: '9px',
-    fontWeight: '500',
-    lineHeight: 0,
-    '::before': {
-        content: '"+"',
-    },
-});
-
-export const Card = ({
-    children,
-    onAddItem,
-}: {
-    children?: ReactNode,
-    onAddItem?: MouseEventHandler<HTMLDivElement>,
-}) => {
-    return (
-        <CardContainer>
-            <CardContent>{children}</CardContent>
-            <CardActions onClick={onAddItem}>
-                <PlusIcon />
-                Add item
-            </CardActions>
-        </CardContainer>
-    );
-};
-```
-
-## 2. import `*.scss`
-
-```jsx
-import styles from './tree-item.module.scss';
-
-export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
-    () => {
-
-        return (
-            <li
-                ref={wrapperRef}
-                className={cx(
-                    styles['Wrapper'],
-                    clone && styles['clone'],
-                    ghost && styles['ghost'],
-                    indicator && styles['indicator']
-                )}
-                style={
-                    {
-                        '--spacing': `${indentationWidth * depth}px`
-                    } as CSSProperties
-                }
-                {...props}
-            >
-
-            </li>
-        );
-    }
-);
-
-
-```
-
-## 3. import `*.css`,
-
-```js
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/lib/codemirror';
-```

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-commands/src/group-shapes.ts

@@ -100,6 +100,7 @@ export function groupShapes(
 
     afterShapes[groupId] = TLDR.get_shape_util(TDShapeType.Group).create({
         id: groupId,
+        affineId: groupId,
         childIndex: groupChildIndex,
         parentId: groupParentId,
         point: [groupBounds.minX, groupBounds.minY],
@@ -217,7 +218,6 @@ export function groupShapes(
             }
         }
     });
-
     return {
         id: 'group',
         before: {

libs/components/board-draw/src/components/align-panel/index.tsx

@@ -0,0 +1,66 @@
+import { styled, Tooltip } from '@toeverything/components/ui';
+import { AlignType } from '../command-panel/AlignOperation';
+
+interface AlignObject {
+    name?: string;
+    /**
+     * color: none means no color
+     */
+    title: string;
+    icon?: JSX.Element;
+}
+/**
+ * ColorValue : none means no color
+ */
+interface AlignProps {
+    alignOptions: AlignObject[];
+    selected?: string;
+    onSelect?: (alginType: AlignType) => void;
+}
+
+export const AlignPanel = ({
+    alignOptions,
+    selected,
+    onSelect,
+}: AlignProps) => {
+    return (
+        <Container>
+            {alignOptions.map(alignOption => {
+                const option = alignOption.name as AlignType;
+                // const selected = color;
+                return (
+                    <Tooltip key={option} content={alignOption.title}>
+                        <SelectableContainer
+                            onClick={() => {
+                                onSelect?.(option);
+                            }}
+                        >
+                            {alignOption.icon}
+                        </SelectableContainer>
+                    </Tooltip>
+                );
+            })}
+        </Container>
+    );
+};
+
+const Container = styled('div')({
+    width: '170px',
+    display: 'flex',
+    flexWrap: 'wrap',
+});
+
+const SelectableContainer = styled('div')<{ selected?: boolean }>(
+    ({ selected, theme }) => ({
+        color: theme.affine.palette.icons,
+        borderRadius: '5px',
+        overflow: 'hidden',
+        margin: '5px',
+        padding: '3px',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        '&:hover': {
+            backgroundColor: theme.affine.palette.hover,
+        },
+    })
+);

libs/components/board-draw/src/components/command-panel/AlignOperation.tsx

@@ -0,0 +1,108 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import { DistributeType, TDShape } from '@toeverything/components/board-types';
+import {
+    AlignIcon,
+    ShapesAlignBottomIcon,
+    ShapesAlignHorizontalCenterIcon,
+    ShapesAlignLeftIcon,
+    ShapesAlignRightIcon,
+    ShapesAlignTopIcon,
+    ShapesAlignVerticalCenterIcon,
+    ShapesDistributeHorizontalIcon,
+    ShapesDistributeVerticalIcon,
+} from '@toeverything/components/icons';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+interface BorderColorConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+export enum AlignType {
+    Top = 'top',
+    CenterVertical = 'centerVertical',
+    Bottom = 'bottom',
+    Left = 'left',
+    CenterHorizontal = 'centerHorizontal',
+    Right = 'right',
+}
+
+let AlignPanelArr = [
+    {
+        name: 'left',
+        title: 'Align left',
+        icon: <ShapesAlignLeftIcon></ShapesAlignLeftIcon>,
+    },
+    {
+        name: 'centerVertical',
+        title: 'Align Center Vertical',
+        icon: <ShapesAlignVerticalCenterIcon></ShapesAlignVerticalCenterIcon>,
+    },
+    {
+        name: 'right',
+        title: 'Align right',
+        icon: <ShapesAlignRightIcon></ShapesAlignRightIcon>,
+    },
+    {
+        name: 'top',
+        title: 'Align top',
+        icon: <ShapesAlignTopIcon></ShapesAlignTopIcon>,
+    },
+    {
+        name: 'bottom',
+        title: 'Align bottom',
+        icon: <ShapesAlignBottomIcon></ShapesAlignBottomIcon>,
+    },
+
+    {
+        name: 'centerHorizontal',
+        title: 'Align centerHorizontal',
+        icon: (
+            <ShapesAlignHorizontalCenterIcon></ShapesAlignHorizontalCenterIcon>
+        ),
+    },
+    {
+        name: 'distributeCenterHorizontal',
+        title: 'Align distribute center horizontal',
+        icon: <ShapesDistributeHorizontalIcon></ShapesDistributeHorizontalIcon>,
+    },
+    {
+        name: 'distributeCenterVertical',
+        title: 'Align distribute center horizontal',
+        icon: <ShapesDistributeVerticalIcon></ShapesDistributeVerticalIcon>,
+    },
+];
+export const AlignOperation = ({ app, shapes }: BorderColorConfigProps) => {
+    const setAlign = (alginType: string) => {
+        switch (alginType) {
+            case 'distributeCenterHorizontal':
+                app.distribute(DistributeType.Horizontal);
+                break;
+            case 'distributeCenterVertical':
+                app.distribute(DistributeType.Vertical);
+                break;
+            default:
+                app.align(alginType as AlignType);
+                break;
+        }
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={setAlign}
+                ></AlignPanel>
+            }
+        >
+            <Tooltip content="Align" placement="top-start">
+                <IconButton>
+                    <AlignIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};

libs/components/board-draw/src/components/command-panel/CommandPanel.tsx

@@ -1,6 +1,7 @@
 import { TLDR, TldrawApp } from '@toeverything/components/board-state';
 import { Divider, Popover, styled } from '@toeverything/components/ui';
 import { Fragment } from 'react';
+import { AlignOperation } from './AlignOperation';
 import { BorderColorConfig } from './BorderColorConfig';
 import { DeleteShapes } from './DeleteOperation';
 import { FillColorConfig } from './FillColorConfig';
@@ -8,6 +9,7 @@ import { FontSizeConfig } from './FontSizeConfig';
 import { FrameFillColorConfig } from './FrameFillColorConfig';
 import { Group, UnGroup } from './GroupOperation';
 import { Lock, Unlock } from './LockOperation';
+import { MoveCoverageConfig } from './MoveCoverage';
 import { StrokeLineStyleConfig } from './stroke-line-style-config';
 import { getAnchor, useConfig } from './utils';
 
@@ -91,6 +93,19 @@ export const CommandPanel = ({ app }: { app: TldrawApp }) => {
                 shapes={config.deleteShapes.selectedShapes}
             />
         ),
+        moveCoverageConfig: (
+            <MoveCoverageConfig
+                key="deleteShapes1"
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            />
+        ),
+        alginOperation: config.group.selectedShapes.length ? (
+            <AlignOperation
+                app={app}
+                shapes={config.deleteShapes.selectedShapes}
+            ></AlignOperation>
+        ) : null,
     };
 
     const nodes = Object.entries(configNodes).filter(([key, node]) => !!node);

libs/components/board-draw/src/components/command-panel/GroupOperation.tsx

@@ -1,7 +1,8 @@
-import type { TldrawApp } from '@toeverything/components/board-state';
+import { TLDR, TldrawApp } from '@toeverything/components/board-state';
-import type { TDShape } from '@toeverything/components/board-types';
+import { TDShape, TDShapeType } from '@toeverything/components/board-types';
 import { GroupIcon, UngroupIcon } from '@toeverything/components/icons';
 import { IconButton, Tooltip } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
 import { getShapeIds } from './utils';
 
 interface GroupAndUnGroupProps {
@@ -10,8 +11,38 @@ interface GroupAndUnGroupProps {
 }
 
 export const Group = ({ app, shapes }: GroupAndUnGroupProps) => {
-    const group = () => {
+    const group = async () => {
-        app.group(getShapeIds(shapes));
+        let groupShape = await services.api.editorBlock.create({
+            workspace: app.document.id,
+            parentId: app.appState.currentPageId,
+            type: 'shape',
+        });
+        await services.api.editorBlock.update({
+            workspace: groupShape.workspace,
+            id: groupShape.id,
+            properties: {
+                shapeProps: {
+                    value: JSON.stringify(
+                        TLDR.get_shape_util(TDShapeType.Group).create({
+                            id: groupShape.id,
+                            affineId: groupShape.id,
+                            childIndex: 1,
+                            parentId: app.appState.currentPageId,
+                            point: [0, 0],
+                            size: [0, 0],
+                            children: getShapeIds(shapes),
+                            workspace: app.document.id,
+                        })
+                    ),
+                },
+            },
+        });
+
+        app.group(
+            getShapeIds(shapes),
+            groupShape.id,
+            app.appState.currentPageId
+        );
     };
     return (
         <Tooltip content="Group">

libs/components/board-draw/src/components/command-panel/MoveCoverage.tsx

@@ -0,0 +1,77 @@
+import type { TldrawApp } from '@toeverything/components/board-state';
+import type { TDShape } from '@toeverything/components/board-types';
+import {
+    BringForwardIcon,
+    BringToFrontIcon,
+    LayersIcon,
+    SendBackwardIcon,
+    SendToBackIcon,
+} from '@toeverything/components/icons';
+import { IconButton, Popover, Tooltip } from '@toeverything/components/ui';
+import { AlignPanel } from '../align-panel';
+
+interface FontSizeConfigProps {
+    app: TldrawApp;
+    shapes: TDShape[];
+}
+
+const AlignPanelArr = [
+    {
+        title: 'To Front',
+        name: 'tofront',
+        icon: <BringToFrontIcon />,
+    },
+    {
+        title: 'Forward',
+        name: 'forward',
+        icon: <BringForwardIcon />,
+    },
+    {
+        title: 'Backward',
+        name: 'backward',
+        icon: <SendBackwardIcon />,
+    },
+    {
+        title: 'To Back',
+        name: 'toback',
+        icon: <SendToBackIcon />,
+    },
+];
+
+export const MoveCoverageConfig = ({ app, shapes }: FontSizeConfigProps) => {
+    const moveCoverage = (type: string) => {
+        switch (type) {
+            case 'toback':
+                app.moveToBack();
+                break;
+            case 'backward':
+                app.moveBackward();
+                break;
+            case 'forward':
+                app.moveForward();
+                break;
+            case 'tofront':
+                app.moveToFront();
+                break;
+        }
+    };
+
+    return (
+        <Popover
+            trigger="hover"
+            placement="bottom-start"
+            content={
+                <AlignPanel
+                    alignOptions={AlignPanelArr}
+                    onSelect={moveCoverage}
+                ></AlignPanel>
+            }
+        >
+            <Tooltip content="Layers" placement="top-start">
+                <IconButton>
+                    <LayersIcon />
+                </IconButton>
+            </Tooltip>
+        </Popover>
+    );
+};

libs/components/board-draw/src/components/tools-panel/ToolsPanel.tsx

@@ -52,8 +52,8 @@ const tools: Array<{
     { type: 'frame', label: 'Frame', tooltip: 'Frame', icon: FrameIcon },
     {
         type: TDShapeType.Editor,
-        label: 'Text',
+        label: 'Text Block',
-        tooltip: 'Text',
+        tooltip: 'Text Block',
         icon: TextIcon,
     },
     { type: 'shapes', component: ShapeTools },
@@ -61,9 +61,9 @@ const tools: Array<{
     { type: 'Connector', component: LineTools },
     // { type: 'erase', label: 'Erase', tooltip: 'Erase', icon: EraseIcon },
     {
-        type: TDShapeType.HandDraw,
+        type: TDShapeType.HandDrag,
-        label: 'HandDraw',
+        label: 'Hand Drag',
-        tooltip: 'HandDraw',
+        tooltip: 'Hand Drag',
         icon: HandToolIcon,
     },
     {

libs/components/board-sessions/src/translate-session.ts

@@ -111,7 +111,8 @@ export class TranslateSession extends BaseSession {
                             Utils.boundsContain(
                                 TLDR.get_bounds(shap),
                                 TLDR.get_bounds(shapItem)
-                            )
+                            ) &&
+                            !shapItem.isLocked
                         ) {
                             selectedShapes.push(shapItem);
                         }

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

@@ -10,7 +10,7 @@ import {
 } from '@toeverything/components/board-types';
 import { MIN_PAGE_WIDTH } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
-import type { SyntheticEvent } from 'react';
+import type { MouseEvent, SyntheticEvent } from 'react';
 import { memo, useCallback, useEffect, useRef } from 'react';
 import {
     defaultTextStyle,
@@ -135,6 +135,15 @@ export class EditorUtil extends TDShapeUtil<T, E> {
                 }
             }, [app, state, shape.id, editingText, editingId]);
 
+            const onMouseDown = useCallback(
+                (e: MouseEvent) => {
+                    if (e.detail === 2) {
+                        app.setEditingText(shape.id);
+                    }
+                },
+                [app, shape.id]
+            );
+
             return (
                 <HTMLContainer ref={ref} {...events}>
                     <Container
@@ -143,12 +152,13 @@ export class EditorUtil extends TDShapeUtil<T, E> {
                         onPointerDown={stopPropagation}
                         onMouseEnter={activateIfEditing}
                         onDragEnter={activateIfEditing}
+                        onMouseDown={onMouseDown}
                     >
                         <MemoAffineEditor
                             workspace={workspace}
                             rootBlockId={rootBlockId}
                             scrollBlank={false}
-                            isWhiteboard
+                            isEdgeless
                         />
                         {editingText ? null : <Mask />}
                     </Container>

libs/components/board-state/src/tldraw-app.ts

@@ -3853,12 +3853,9 @@ export class TldrawApp extends StateManager<TDSnapshot> {
     };
 
     private get_viewbox_from_svg = (svgStr: string | ArrayBuffer | null) => {
-        const viewBoxRegex =
-            /.*?viewBox=["'](-?[\d.]+[, ]+-?[\d.]+[, ][\d.]+[, ][\d.]+)["']/;
-
         if (typeof svgStr === 'string') {
-            const matches = svgStr.match(viewBoxRegex);
+            let viewBox = new DOMParser().parseFromString(svgStr, 'text/xml');
-            return matches && matches.length >= 2 ? matches[1] : null;
+            return viewBox.children[0].getAttribute('viewBox');
         }
 
         console.warn('could not get viewbox from svg string');
@@ -3994,7 +3991,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
                 this.patchState({
                     settings: {
                         forcePanning:
-                            this.currentTool.type === TDShapeType.HandDraw,
+                            this.currentTool.type === TDShapeType.HandDrag,
                     },
                 });
                 this.spaceKey = false;

libs/components/board-tools/src/hand-drag/hand-drag-tool.ts

@@ -9,8 +9,8 @@ enum Status {
     Draw = 'draw',
 }
 
-export class HandDrawTool extends BaseTool {
+export class HandDragTool extends BaseTool {
-    override type = TDShapeType.HandDraw as const;
+    override type = TDShapeType.HandDrag as const;
 
     override status: Status = Status.Idle;
 

libs/components/board-tools/src/hand-drag/index.ts

@@ -0,0 +1 @@
+export * from './hand-drag-tool';

libs/components/board-tools/src/hand-draw/index.ts

@@ -1 +0,0 @@
-export * from './hand-draw-tool';

libs/components/board-tools/src/index.ts

@@ -5,7 +5,7 @@ import { EditorTool } from './editor-tool';
 import { EllipseTool } from './ellipse-tool';
 import { EraseTool } from './erase-tool';
 import { FrameTool } from './frame-tool/frame-tool';
-import { HandDrawTool } from './hand-draw';
+import { HandDragTool } from './hand-drag';
 import { HexagonTool } from './hexagon-tool';
 import { HighlightTool } from './highlight-tool';
 import { LaserTool } from './laser-tool';
@@ -32,7 +32,7 @@ export interface ToolsMap {
     [TDShapeType.Highlight]: typeof HighlightTool;
     [TDShapeType.Editor]: typeof EditorTool;
     [TDShapeType.WhiteArrow]: typeof WhiteArrowTool;
-    [TDShapeType.HandDraw]: typeof HandDrawTool;
+    [TDShapeType.HandDrag]: typeof HandDragTool;
     [TDShapeType.Laser]: typeof LaserTool;
     [TDShapeType.Frame]: typeof FrameTool;
 }
@@ -59,6 +59,6 @@ export const tools: { [K in TDToolType]: ToolsMap[K] } = {
     [TDShapeType.Hexagon]: HexagonTool,
     [TDShapeType.WhiteArrow]: WhiteArrowTool,
     [TDShapeType.Laser]: LaserTool,
-    [TDShapeType.HandDraw]: HandDrawTool,
+    [TDShapeType.HandDrag]: HandDragTool,
     [TDShapeType.Frame]: FrameTool,
 };

libs/components/board-types/src/types.ts

@@ -212,7 +212,7 @@ export type TDToolType =
     | TDShapeType.WhiteArrow
     | TDShapeType.Editor
     | TDShapeType.Frame
-    | TDShapeType.HandDraw;
+    | TDShapeType.HandDrag;
 
 export type Easing =
     | 'linear'
@@ -287,7 +287,7 @@ export enum TDShapeType {
     Video = 'video',
     Editor = 'editor',
     WhiteArrow = 'white-arrow',
-    HandDraw = 'hand-draw',
+    HandDrag = 'hand-drag',
     Frame = 'frame',
 }
 

libs/components/common/src/lib/text/slate-utils.ts

@@ -2,28 +2,28 @@
 import {
     Descendant,
     Editor,
+    Location,
+    Node as SlateNode,
+    Path,
     Point,
-    Transforms,
     Range,
     Text,
-    Location,
+    Transforms,
-    Path,
-    Node as SlateNode,
 } from 'slate';
 import { ReactEditor } from 'slate-react';
 
-import {
-    getCommentsIdsOnTextNode,
-    getEditorMarkForCommentId,
-    MARKDOWN_STYLE_MAP,
-    MatchRes,
-} from './utils';
 import {
     fontBgColorPalette,
     fontColorPalette,
     type TextAlignOptions,
     type TextStyleMark,
 } from './constants';
+import {
+    getCommentsIdsOnTextNode,
+    getEditorMarkForCommentId,
+    MARKDOWN_STYLE_MAP,
+    MatchRes,
+} from './utils';
 
 function isInlineAndVoid(editor: Editor, el: any) {
     return editor.isInline(el) && editor.isVoid(el);
@@ -567,8 +567,51 @@ class SlateUtils {
             anchor: point1,
             focus: point2,
         });
-        // @ts-ignore
+        if (!fragment.length) {
-        return fragment[0].children;
+            console.error('Debug information:', point1, point2, fragment);
+            throw new Error('Failed to get content between!');
+        }
+
+        if (fragment.length > 1) {
+            console.warn(
+                'Fragment length is greater than one, ' +
+                    'please be careful if there is missing content!\n' +
+                    'Debug information:',
+                point1,
+                point2,
+                fragment
+            );
+        }
+
+        const firstFragment = fragment[0];
+        if (!('type' in firstFragment)) {
+            console.error('Debug information:', point1, point2, fragment);
+            throw new Error(
+                'Failed to get content between! type of firstFragment not found!'
+            );
+        }
+
+        const fragmentChildren = firstFragment.children;
+
+        const textChildren: Text[] = [];
+        for (const child of fragmentChildren) {
+            if (!('text' in child)) {
+                console.error('Debug information:', point1, point2, fragment);
+                throw new Error('Fragment exists nested!');
+            }
+            // Filter empty string
+            if (child.text === '') {
+                continue;
+            }
+            textChildren.push(child);
+        }
+        // If nothing, should preserve empty string
+        // Fix Slate Cannot get the start point in the node at path [0] because it has no start text node.
+        if (!textChildren.length) {
+            textChildren.push({ text: '' });
+        }
+
+        return textChildren;
     }
 
     public getSplitContentsBySelection() {

libs/components/editor-blocks/src/blocks/bullet/BulletView.tsx

@@ -173,7 +173,7 @@ export const BulletView = ({ block, editor }: CreateView) => {
             }
             return true;
         } else {
-            return tabBlock(block, isShiftKey);
+            return tabBlock(editor, block, isShiftKey);
         }
     };
 

libs/components/editor-blocks/src/blocks/figma/index.ts

@@ -1,9 +1,9 @@
+import { Protocol } from '@toeverything/datasource/db-service';
 import {
     AsyncBlock,
     BaseView,
     SelectBlock,
 } from '@toeverything/framework/virgo';
-import { Protocol, services } from '@toeverything/datasource/db-service';
 import { FigmaView } from './FigmaView';
 
 export class FigmaBlock extends BaseView {
@@ -19,7 +19,10 @@ export class FigmaBlock extends BaseView {
         const tag_name = el.tagName;
         if (tag_name === 'A' && el.parentElement?.childElementCount === 1) {
             const href = el.getAttribute('href');
-            if (href.indexOf('.figma.com') !== -1) {
+            const allowedHosts = ['www.figma.com'];
+            const host = new URL(href).host;
+
+            if (allowedHosts.includes(host)) {
                 return [
                     {
                         type: this.type,

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/blocks/group/utils/weak-sql/weakSqlCreator.ts

@@ -49,7 +49,7 @@ const weakSqlCreator = (weak_sql_express = ''): Promise<Constraint[]> => {
                 constraints.push({
                     field: field.trim(),
                     relation: relation.trim() as Relation,
-                    value: pickValue(value.replace(/&&|&|;/, '').trim()),
+                    value: pickValue(value.replace(/&&|&|;/g, '').trim()),
                 });
 
                 /* meaningless return value */

libs/components/editor-blocks/src/blocks/numbered/NumberedView.tsx

@@ -167,7 +167,7 @@ export const NumberedView = ({ block, editor }: CreateView) => {
             }
             return true;
         } else {
-            tabBlock(block, isShiftKey);
+            tabBlock(editor, block, isShiftKey);
             return false;
         }
     };

libs/components/editor-blocks/src/blocks/text/TextView.tsx

@@ -2,13 +2,11 @@ import { useState } from 'react';
 
 import { CustomText, TextProps } from '@toeverything/components/common';
 import {
-    mergeGroup,
+    BlockPendantProvider,
     RenderBlockChildren,
     splitGroup,
     supportChildren,
-    unwrapGroup,
     useOnSelect,
-    BlockPendantProvider,
 } from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { Protocol } from '@toeverything/datasource/db-service';
@@ -16,7 +14,7 @@ import { CreateView } from '@toeverything/framework/virgo';
 import { BlockContainer } from '../../components/BlockContainer';
 import { IndentWrapper } from '../../components/IndentWrapper';
 import { TextManage } from '../../components/text-manage';
-import { tabBlock } from '../../utils/indent';
+import { dedentBlock, tabBlock } from '../../utils/indent';
 interface CreateTextView extends CreateView {
     // TODO: need to optimize
     containerClassName?: string;
@@ -69,24 +67,36 @@ export const TextView = ({
         const { contentBeforeSelection, contentAfterSelection } = splitContents;
         const before = [...contentBeforeSelection.content];
         const after = [...contentAfterSelection.content];
-        const _nextBlockChildren = await block.children();
+        const nextBlockChildren = await block.children();
-        const _nextBlock = await editor.createBlock('text');
+        const nextBlock = await editor.createBlock('text');
-        await _nextBlock.setProperty('text', {
+        if (!nextBlock) {
+            throw new Error('Failed to create text block');
+        }
+        await nextBlock.setProperty('text', {
             value: after as CustomText[],
         });
-        _nextBlock.append(..._nextBlockChildren);
-        block.removeChildren();
         await block.setProperty('text', {
             value: before as CustomText[],
         });
-        await block.after(_nextBlock);
 
-        editor.selectionManager.activeNodeByNodeId(_nextBlock.id);
+        if (editor.getRootBlockId() === block.id) {
+            // If the block is the root block,
+            // new block can not append as next sibling,
+            // all new blocks should be append as children.
+            await block.insert(0, [nextBlock]);
+            editor.selectionManager.activeNodeByNodeId(nextBlock.id);
+            return true;
+        }
+        await nextBlock.append(...nextBlockChildren);
+        await block.removeChildren();
+        await block.after(nextBlock);
+
+        editor.selectionManager.activeNodeByNodeId(nextBlock.id);
         return true;
     };
 
-    const onBackspace: TextProps['handleBackSpace'] = async props => {
+    const onBackspace: TextProps['handleBackSpace'] = editor.withBatch(
-        return await editor.withSuspend(async () => {
+        async props => {
             const { isCollAndStart } = props;
             if (!isCollAndStart) {
                 return false;
@@ -95,28 +105,44 @@ export const TextView = ({
                 await block.setType('text');
                 return true;
             }
+            if (editor.getRootBlockId() === block.id) {
+                // Can not delete
+                return false;
+            }
             const parentBlock = await block.parent();
 
             if (!parentBlock) {
                 return false;
             }
-            const preParent = await parentBlock.previousSibling();
+
-            if (Protocol.Block.Type.group === parentBlock.type) {
+            // The parent block is group block or is the root block.
+            // Merge block to previous sibling.
+            //
+            // - group/root   <- parent block
+            //   - text1      <- preNode
+            //   - text2      <- press backspace before target block
+            //     - children
+            //
+            // ---
+            //
+            // - group/root
+            //   - text1text2  <- merge block to previous sibling
+            //     - children  <- children should switch parent block
+            if (
+                Protocol.Block.Type.group === parentBlock.type ||
+                editor.getRootBlockId() === parentBlock.id
+            ) {
                 const children = await block.children();
                 const preNode = await block.physicallyPerviousSibling();
                 // FIXME support children do not means has textBlock
                 // TODO: abstract this part of code
                 if (preNode) {
                     if (supportChildren(preNode)) {
-                        editor.suspend(true);
                         await editor.selectionManager.activePreviousNode(
                             block.id,
                             'end'
                         );
-                        if (
+                        if (!block.blockProvider?.isEmpty()) {
-                            block.getProperty('text').value[0] &&
-                            block.getProperty('text').value[0]?.text !== ''
-                        ) {
                             const value = [
                                 ...preNode.getProperty('text').value,
                                 ...block.getProperty('text').value,
@@ -127,14 +153,14 @@ export const TextView = ({
                         }
                         await preNode.append(...children);
                         await block.remove();
-                        editor.suspend(false);
                     } else {
+                        // If not pre node, block should be merged to the parent block
                         // TODO: point does not clear
                         await editor.selectionManager.activePreviousNode(
                             block.id,
                             'start'
                         );
-                        if (block.blockProvider.isEmpty()) {
+                        if (block.blockProvider?.isEmpty()) {
                             await block.remove();
                             const parentChild = await parentBlock.children();
                             if (
@@ -142,6 +168,8 @@ export const TextView = ({
                                     Protocol.Block.Type.group &&
                                 !parentChild.length
                             ) {
+                                const preParent =
+                                    await parentBlock.previousSibling();
                                 await editor.selectionManager.setSelectedNodesIds(
                                     [preParent?.id ?? editor.getRootBlockId()]
                                 );
@@ -182,20 +210,13 @@ export const TextView = ({
                     await parentBlock.remove();
                 }
                 return true;
-            } else {
-                const nextNodes = await block.nextSiblings();
-                for (const nextNode of nextNodes) {
-                    await nextNode.remove();
-                }
-                block.append(...nextNodes);
-                editor.commands.blockCommands.moveBlockAfter(
-                    block.id,
-                    parentBlock.id
-                );
             }
+
+            dedentBlock(editor, block);
             return true;
-        });
+        }
-    };
+    );
+
     const handleConvert = async (
         toType: string,
         options?: Record<string, unknown>
@@ -211,7 +232,7 @@ export const TextView = ({
         block.firstCreateFlag = true;
     };
     const onTab: TextProps['handleTab'] = async ({ isShiftKey }) => {
-        await tabBlock(block, isShiftKey);
+        await tabBlock(editor, block, isShiftKey);
         return true;
     };
 

libs/components/editor-blocks/src/blocks/todo/TodoView.tsx

@@ -100,7 +100,7 @@ export const TodoView = ({ block, editor }: CreateView) => {
     };
 
     const on_tab: TextProps['handleTab'] = async ({ isShiftKey }) => {
-        await tabBlock(block, isShiftKey);
+        await tabBlock(editor, block, isShiftKey);
         return true;
     };
 

libs/components/editor-blocks/src/blocks/youtube/index.ts

@@ -1,9 +1,9 @@
+import { Protocol } from '@toeverything/datasource/db-service';
 import {
     AsyncBlock,
     BaseView,
     SelectBlock,
 } from '@toeverything/framework/virgo';
-import { Protocol } from '@toeverything/datasource/db-service';
 import { YoutubeView } from './YoutubeView';
 
 export class YoutubeBlock extends BaseView {
@@ -19,7 +19,10 @@ export class YoutubeBlock extends BaseView {
         const tag_name = el.tagName;
         if (tag_name === 'A' && el.parentElement?.childElementCount === 1) {
             const href = el.getAttribute('href');
-            if (href.indexOf('.youtube.com') !== -1) {
+            const allowedHosts = ['www.youtu.be', 'www.youtube.com'];
+            const host = new URL(href).host;
+
+            if (allowedHosts.includes(host)) {
                 return [
                     {
                         type: this.type,

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|livedemo)\.affine\.pro|.*?\.ligo-virgo\.pages\.dev)\/(\w{28}|AFFiNE)\/)?(affine[\w\-_]{16})(\/edgeless)?$/;
 
 export const isAffineUrl = (url?: string) => {
     if (!url) return false;
@@ -7,5 +7,5 @@ export const isAffineUrl = (url?: string) => {
 };
 
 export const toAffineEmbedUrl = (url: string) => {
-    return _regex.exec(url)?.[4];
+    return _regex.exec(url)?.[5];
 };

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

@@ -1,5 +1,7 @@
 export const isYoutubeUrl = (url?: string): boolean => {
-    return url.includes('youtu.be') || url.includes('youtube.com');
+    const allowedHosts = ['www.youtu.be', 'www.youtube.com'];
+    const host = new URL(url).host;
+    return allowedHosts.includes(host);
 };
 
 const _regexp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#&?]*).*/;

libs/components/editor-blocks/src/components/text-manage/TextManage.tsx

@@ -4,10 +4,7 @@ import {
     type SlateUtils,
     type TextProps,
 } from '@toeverything/components/common';
-import {
+import { useOnSelectActive } from '@toeverything/components/editor-core';
-    useOnSelectActive,
-    useOnSelectSetSelection,
-} from '@toeverything/components/editor-core';
 import { styled } from '@toeverything/components/ui';
 import { ContentColumnValue } from '@toeverything/datasource/db-service';
 import {
@@ -119,15 +116,6 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
 
         const properties = block.getProperties();
 
-        const onTextViewSetSelection = (selection: Range | Point) => {
-            if (selection instanceof Point) {
-                //do some thing
-            } else {
-                textRef.current.setSelection(selection);
-            }
-        };
-
-        // block = await editor.commands.blockCommands.createNextBlock(block.id,)
         const onTextViewActive = useCallback(
             (point: CursorTypes) => {
                 // TODO code to be optimized
@@ -209,7 +197,6 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
         );
 
         useOnSelectActive(block.id, onTextViewActive);
-        useOnSelectSetSelection<'Range'>(block.id, onTextViewSetSelection);
 
         useEffect(() => {
             if (textRef.current) {

libs/components/editor-blocks/src/utils/indent.ts

@@ -1,4 +1,7 @@
-import { supportChildren } from '@toeverything/components/editor-core';
+import {
+    supportChildren,
+    type BlockEditor,
+} from '@toeverything/components/editor-core';
 import { Protocol } from '@toeverything/datasource/db-service';
 import { AsyncBlock } from '@toeverything/framework/virgo';
 import type { TodoAsyncBlock } from '../blocks/todo/types';
@@ -6,14 +9,19 @@ import type { TodoAsyncBlock } from '../blocks/todo/types';
 /**
  * Is the block in top level
  */
-export const isTopLevelBlock = (parentBlock: AsyncBlock): boolean => {
+export const isTopLevelBlock = (
+    editor: BlockEditor,
+    block: AsyncBlock
+): boolean => {
     return (
-        parentBlock.type === Protocol.Block.Type.group ||
+        editor.getRootBlockId() === block.id ||
-        parentBlock.type === Protocol.Block.Type.page
+        block.type === Protocol.Block.Type.group ||
+        block.type === Protocol.Block.Type.page
     );
 };
 
 /**
+ * Move down
  * @returns true if indent is success
  * @example
  * ```
@@ -31,7 +39,6 @@ export const isTopLevelBlock = (parentBlock: AsyncBlock): boolean => {
  * ```
  */
 const indentBlock = async (block: TodoAsyncBlock) => {
-    // Move down
     const previousBlock = await block.previousSibling();
 
     if (!previousBlock || !supportChildren(previousBlock)) {
@@ -57,6 +64,7 @@ const indentBlock = async (block: TodoAsyncBlock) => {
 };
 
 /**
+ * Move up
  * @returns true if dedent is success
  * @example
  * ```
@@ -73,13 +81,15 @@ const indentBlock = async (block: TodoAsyncBlock) => {
  *  └─ [ ]
  * ```
  */
-const dedentBlock = async (block: AsyncBlock) => {
+export const dedentBlock = async (editor: BlockEditor, block: AsyncBlock) => {
-    // Move up
+    if (editor.getRootBlockId() === block.id) {
+        return false;
+    }
     let parentBlock = await block.parent();
     if (!parentBlock) {
         throw new Error('Failed to dedent block! Parent block not found!');
     }
-    if (isTopLevelBlock(parentBlock)) {
+    if (isTopLevelBlock(editor, parentBlock)) {
         // Top, do nothing
         return false;
     }
@@ -111,9 +121,13 @@ const dedentBlock = async (block: AsyncBlock) => {
     return true;
 };
 
-export const tabBlock = async (block: AsyncBlock, isShiftKey: boolean) => {
+export const tabBlock = async (
+    editor: BlockEditor,
+    block: AsyncBlock,
+    isShiftKey: boolean
+) => {
     if (isShiftKey) {
-        return await dedentBlock(block);
+        return await dedentBlock(editor, block);
     } else {
         return await indentBlock(block);
     }

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/drag-drop/drag-drop.ts

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines */
+import { Protocol } from '@toeverything/datasource/db-service';
 import { domToRect, Point } from '@toeverything/utils';
 import { AsyncBlock } from '../..';
 import { GridDropType } from '../commands/types';
@@ -6,7 +7,6 @@ import { Editor } from '../editor';
 import { BlockDropPlacement, GroupDirection } from '../types';
 // TODO: Evaluate implementing custom events with Rxjs
 import EventEmitter from 'eventemitter3';
-import { Protocol } from '@toeverything/datasource/db-service';
 
 enum DragType {
     dragBlock = 'dragBlock',
@@ -281,6 +281,10 @@ export class DragDropManager {
             this._editor.getRootBlockId()
         );
         let direction = BlockDropPlacement.none;
+        if (!rootBlock || !rootBlock.dom) {
+            console.warn('Can not find dom bind with block', rootBlock);
+            return;
+        }
         const rootBlockRect = domToRect(rootBlock.dom);
         let targetBlock: AsyncBlock | undefined;
         let typesInfo = {
@@ -303,6 +307,10 @@ export class DragDropManager {
         if (direction !== BlockDropPlacement.none) {
             const blockList = await this._editor.getBlockListByLevelOrder();
             targetBlock = blockList.find(block => {
+                if (!block.dom) {
+                    console.warn('Can not find dom bind with block', block);
+                    return false;
+                }
                 const domRect = domToRect(block.dom);
                 const pointChecker =
                     direction === BlockDropPlacement.outerLeft

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

@@ -1,55 +1,51 @@
 /* eslint-disable max-lines */
 import HotKeys from 'hotkeys-js';
-import LRUCache from 'lru-cache';
 
-import { services } from '@toeverything/datasource/db-service';
+import type { PatchNode } from '@toeverything/components/ui';
 import type {
     BlockFlavors,
     ReturnEditorBlock,
     UpdateEditorBlock,
 } from '@toeverything/datasource/db-service';
-import type { PatchNode } from '@toeverything/components/ui';
+import { services } from '@toeverything/datasource/db-service';
 
-import { AsyncBlock } from './block';
-import type { WorkspaceAndBlockId } from './block';
-import type { BaseView } from './views/base-view';
-import { SelectionManager } from './selection';
-import { Hooks, PluginManager } from './plugin';
-import { EditorCommands } from './commands';
-import {
-    Virgo,
-    HooksRunner,
-    PluginHooks,
-    PluginCreator,
-    StorageManager,
-    VirgoSelection,
-    PluginManagerInterface,
-} from './types';
-import { KeyboardManager } from './keyboard';
-import { MouseManager } from './mouse';
-import { ScrollManager } from './scroll';
-import assert from 'assert';
-import { domToRect, last, Point, sleep } from '@toeverything/utils';
 import { Commands } from '@toeverything/datasource/commands';
+import { domToRect, last, Point, sleep } from '@toeverything/utils';
+import assert from 'assert';
+import type { WorkspaceAndBlockId } from './block';
+import { AsyncBlock } from './block';
+import { BlockHelper } from './block/block-helper';
 import { BrowserClipboard } from './clipboard/browser-clipboard';
 import { ClipboardPopulator } from './clipboard/clipboard-populator';
-import { BlockHelper } from './block/block-helper';
+import { EditorCommands } from './commands';
-import { DragDropManager } from './drag-drop';
 import { EditorConfig } from './config';
+import { DragDropManager } from './drag-drop';
+import { KeyboardManager } from './keyboard';
+import { MouseManager } from './mouse';
+import { Hooks, PluginManager } from './plugin';
+import { ScrollManager } from './scroll';
+import { SelectionManager } from './selection';
+import {
+    HooksRunner,
+    PluginCreator,
+    PluginHooks,
+    PluginManagerInterface,
+    StorageManager,
+    Virgo,
+    VirgoSelection,
+} from './types';
+import type { BaseView } from './views/base-view';
 
 export interface EditorCtorProps {
     workspace: string;
     views: Partial<Record<keyof BlockFlavors, BaseView>>;
     plugins: PluginCreator[];
     rootBlockId: string;
-    isWhiteboard?: boolean;
+    isEdgeless?: boolean;
 }
 
 export class Editor implements Virgo {
-    private _cacheManager = new LRUCache<string, Promise<AsyncBlock | null>>({
+    private _cacheManager = new Map<string, Promise<AsyncBlock | null>>();
-        max: 8192,
-        ttl: 1000 * 60 * 30,
-    });
     public mouseManager = new MouseManager(this);
     public selectionManager = new SelectionManager(this);
     public keyboardManager = new KeyboardManager(this);
@@ -75,7 +71,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 +81,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(
@@ -148,18 +144,41 @@ export class Editor implements Virgo {
     public get container() {
         return this.ui_container;
     }
-    // preference to use withSuspend
+
+    /**
+     * Use it discreetly.
+     * Preference to use {@link withBatch}
+     */
     public suspend(flag: boolean) {
         services.api.editorBlock.suspend(this.workspace, flag);
     }
 
-    public async withSuspend<T extends (...args: any[]) => any>(
+    // TODO support suspend recursion
+    private _isSuspend = false;
+    public withBatch<T extends (...args: any[]) => Promise<any>>(fn: T): T {
+        return (async (...args) => {
+            if (this._isSuspend) {
+                console.warn(
+                    'The editor currently has suspend! Please do not call batch method repeatedly!'
+                );
+            }
+            this._isSuspend = true;
+            services.api.editorBlock.suspend(this.workspace, true);
+            const result = await fn(...args);
+            services.api.editorBlock.suspend(this.workspace, false);
+            this._isSuspend = false;
+            return result;
+        }) as T;
+    }
+
+    /**
+     * Use it discreetly.
+     * Preference to use {@link withBatch}
+     */
+    public async batch<T extends (...args: any[]) => any>(
         fn: T
     ): Promise<Awaited<ReturnType<T>>> {
-        services.api.editorBlock.suspend(this.workspace, true);
+        return this.withBatch(fn)();
-        const result = await fn();
-        services.api.editorBlock.suspend(this.workspace, false);
-        return result;
     }
 
     public setReactRenderRoot(props: {
@@ -211,7 +230,12 @@ export class Editor implements Virgo {
             return await services.api.editorBlock.update(patches);
         },
         remove: async ({ workspace, id }: WorkspaceAndBlockId) => {
-            return await services.api.editorBlock.delete({ workspace, id });
+            const ret = await services.api.editorBlock.delete({
+                workspace,
+                id,
+            });
+            this._cacheManager.delete(id);
+            return ret;
         },
         observe: async (
             { workspace, id }: WorkspaceAndBlockId,

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

@@ -1,15 +1,16 @@
 /* eslint-disable max-lines */
 import {
+    debounce,
     domToRect,
+    getBlockIdByDom,
+    last,
     Point,
     Rect,
-    last,
     without,
-    debounce,
-    getBlockIdByDom,
 } from '@toeverything/utils';
 import EventEmitter from 'eventemitter3';
 
+import { Protocol } from '@toeverything/datasource/db-service';
 import { BlockEditor } from '../..';
 import { AsyncBlock } from '../block';
 import { VirgoSelection } from '../types';
@@ -18,19 +19,17 @@ import {
     changeEventName,
     CursorTypes,
     IdList,
+    SelectBlock,
     selectEndEventName,
     SelectEventCallbackTypes,
     SelectEventTypes,
+    SelectInfo,
     SelectionSettings,
     SelectionSettingsMap,
     SelectionTypes,
     SelectPosition,
-    SelectBlock,
-    SelectInfo,
 } from './types';
 import { isLikeBlockListIds } from './utils';
-import { Protocol } from '@toeverything/datasource/db-service';
-import { Editor } from 'slate';
 // IMP: maybe merge active and select into single function
 
 export type SelectionInfo = InstanceType<
@@ -336,12 +335,12 @@ export class SelectionManager implements VirgoSelection {
                 });
                 for await (const childBlock of selectableChildren) {
                     const { dom } = childBlock;
-                    if (dom && selectionRect.isIntersect(domToRect(dom))) {
-                        selectedNodes.push(childBlock);
-                    }
                     if (!dom) {
                         console.warn('can not find dom bind with block');
                     }
+                    if (dom && selectionRect.isIntersect(domToRect(dom))) {
+                        selectedNodes.push(childBlock);
+                    }
                 }
                 // if just only has one selected maybe select the children
                 if (selectedNodes.length === 1) {
@@ -1063,10 +1062,10 @@ export class SelectionManager implements VirgoSelection {
         index: number,
         blockId: string
     ): Promise<void> {
-        let preRang = document.createRange();
+        const preRang = document.createRange();
         preRang.setStart(nowRange.startContainer, index);
         preRang.setEnd(nowRange.endContainer, index);
-        let prePosition = preRang.getClientRects().item(0);
+        const prePosition = preRang.getClientRects().item(0);
         this.activeNodeByNodeId(
             blockId,
             new Point(prePosition.left, prePosition.bottom)

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/editor/views/base-view.ts

@@ -9,10 +9,10 @@ import {
     BlockDecoration,
     MapOperation,
 } from '@toeverything/datasource/jwt';
+import { cloneDeep } from '@toeverything/utils';
 import type { EventData } from '../block';
 import { AsyncBlock } from '../block';
 import type { Editor } from '../editor';
-import { cloneDeep } from '@toeverything/utils';
 import { SelectBlock } from '../selection';
 
 export interface CreateView {
@@ -114,7 +114,21 @@ export abstract class BaseView {
     // Whether the component is empty
     isEmpty(block: AsyncBlock): boolean {
         const text = block.getProperty('text');
-        return !text?.value?.[0]?.text;
+        const result = !text?.value?.[0]?.text;
+
+        // Assert that the text is really empty
+        if (
+            result &&
+            block.getProperty('text')?.value.some(content => content.text)
+        ) {
+            console.warn(
+                'Assertion isEmpty error! The block has an empty start fragment, but it is not empty',
+                block
+            );
+        }
+        // Assert end
+
+        return result;
     }
 
     getSelProperties(block: AsyncBlock, selectInfo: any): DefaultColumnsValue {

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/command-menu/Menu.tsx

@@ -1,4 +1,6 @@
+import { MuiClickAwayListener } from '@toeverything/components/ui';
 import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { HookType, PluginHooks, Virgo } from '@toeverything/framework/virgo';
 import React, {
     useCallback,
     useEffect,
@@ -6,18 +8,15 @@ import React, {
     useRef,
     useState,
 } from 'react';
-
+import { QueryResult } from '../../search';
-import { MuiClickAwayListener } from '@toeverything/components/ui';
-import { Virgo, HookType, PluginHooks } from '@toeverything/framework/virgo';
-
-import { CommandMenuContainer } from './Container';
 import {
     CommandMenuCategories,
     commandMenuHandlerMap,
     commonCommandMenuHandler,
     menuItemsMap,
 } from './config';
-import { QueryResult } from '../../search';
+import { CommandMenuContainer } from './Container';
+
 export type CommandMenuProps = {
     editor: Virgo;
     hooks: PluginHooks;
@@ -225,7 +224,11 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
                 await commonCommandMenuHandler(blockId, type, editor);
             }
             const block = await editor.getBlockById(blockId);
-            block.remove();
+            let nextBlock = await block.nextSibling();
+            editor.selectionManager.activeNodeByNodeId(nextBlock.id);
+            if (block.blockProvider.isEmpty()) {
+                block.remove();
+            }
         } else {
             if (Protocol.Block.Type[type as BlockFlavorKeys]) {
                 const block = await editor.commands.blockCommands.convertBlock(

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

@@ -75,21 +75,6 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         [editor, groupBlock]
     );
 
-    const handleRootDrop = useCallback(
-        async (e: React.DragEvent<Element>) => {
-            let groupBlockOnDrop = null;
-            if (editor.dragDropManager.isDragGroup(e)) {
-                groupBlockOnDrop = await editor.getGroupBlockByPoint(
-                    new Point(e.clientX, e.clientY)
-                );
-                if (groupBlockOnDrop?.id === groupBlock?.id) {
-                    groupBlockOnDrop = null;
-                }
-            }
-        },
-        [editor, groupBlock]
-    );
-
     const handleRootMouseLeave = useCallback(() => setGroupBlock(null), []);
 
     const handleRootDragEnd = () => {
@@ -128,7 +113,6 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         handleRootMouseMove,
         handleRootMouseDown,
         handleRootDragOver,
-        handleRootDrop,
         handleRootMouseLeave,
     ]);
 
@@ -170,7 +154,11 @@ export const GroupMenu = function ({ editor, hooks }: GroupMenuProps) {
         setShowMenu(false);
 
         if (groupBlock) {
-            const unobserve = groupBlock.onUpdate(() => setGroupBlock(null));
+            const unobserve = groupBlock.onUpdate(() => {
+                requestAnimationFrame(() => {
+                    setGroupBlock(null);
+                });
+            });
             return unobserve;
         }
         return undefined;

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/editor-plugins/src/menu/inline-menu/utils.ts

@@ -1,47 +1,47 @@
 /* eslint-disable max-lines */
-import {
-    HeadingOneIcon,
-    HeadingTwoIcon,
-    HeadingThreeIcon,
-    ToDoIcon,
-    NumberIcon,
-    BulletIcon,
-    FormatBoldEmphasisIcon,
-    FormatItalicIcon,
-    FormatStrikethroughIcon,
-    LinkIcon,
-    CodeIcon,
-    FormatColorTextIcon,
-    FormatBackgroundIcon,
-    AlignLeftIcon,
-    AlignCenterIcon,
-    AlignRightIcon,
-    TurnIntoIcon,
-    BacklinksIcon,
-    MoreIcon,
-    TextFontIcon,
-    QuoteIcon,
-    CalloutIcon,
-    FileIcon,
-    ImageIcon,
-    PagesIcon,
-    CodeBlockIcon,
-    CommentIcon,
-} from '@toeverything/components/icons';
 import {
     fontBgColorPalette,
     fontColorPalette,
     type TextAlignOptions,
 } from '@toeverything/components/common';
-import { Virgo } from '@toeverything/framework/virgo';
-import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
-import { ClickItemHandler, InlineMenuItem } from './types';
 import {
-    inlineMenuNamesKeys,
+    BacklinksIcon,
-    inlineMenuNamesForFontColor,
+    BulletIcon,
-    INLINE_MENU_UI_TYPES,
+    CalloutIcon,
+    CodeBlockIcon,
+    CodeIcon,
+    CommentIcon,
+    FileIcon,
+    FormatBackgroundIcon,
+    FormatBoldEmphasisIcon,
+    FormatColorTextIcon,
+    FormatItalicIcon,
+    FormatStrikethroughIcon,
+    HeadingOneIcon,
+    HeadingThreeIcon,
+    HeadingTwoIcon,
+    ImageIcon,
+    LinkIcon,
+    MoreIcon,
+    NumberIcon,
+    PagesIcon,
+    QuoteIcon,
+    TextAlignCenterIcon,
+    TextAlignLeftIcon,
+    TextAlignRightIcon,
+    TextFontIcon,
+    ToDoIcon,
+    TurnIntoIcon,
+} from '@toeverything/components/icons';
+import { BlockFlavorKeys, Protocol } from '@toeverything/datasource/db-service';
+import { Virgo } from '@toeverything/framework/virgo';
+import {
     inlineMenuNames,
+    inlineMenuNamesForFontColor,
+    inlineMenuNamesKeys,
+    INLINE_MENU_UI_TYPES,
 } from './config';
+import { ClickItemHandler, InlineMenuItem } from './types';
 
 const convert_to_block_type = async ({
     editor,
@@ -732,27 +732,27 @@ export const getInlineMenuData = ({
         },
         {
             type: INLINE_MENU_UI_TYPES.dropdown,
-            icon: AlignLeftIcon,
+            icon: TextAlignLeftIcon,
             name: inlineMenuNames.currentTextAlign,
             nameKey: inlineMenuNamesKeys.currentTextAlign,
             children: [
                 {
                     type: INLINE_MENU_UI_TYPES.icon,
-                    icon: AlignLeftIcon,
+                    icon: TextAlignLeftIcon,
                     name: inlineMenuNames.alignLeft,
                     nameKey: inlineMenuNamesKeys.alignLeft,
                     onClick: common_handler_for_inline_menu,
                 },
                 {
                     type: INLINE_MENU_UI_TYPES.icon,
-                    icon: AlignCenterIcon,
+                    icon: TextAlignCenterIcon,
                     name: inlineMenuNames.alignCenter,
                     nameKey: inlineMenuNamesKeys.alignCenter,
                     onClick: common_handler_for_inline_menu,
                 },
                 {
                     type: INLINE_MENU_UI_TYPES.icon,
-                    icon: AlignRightIcon,
+                    icon: TextAlignRightIcon,
                     name: inlineMenuNames.alignRight,
                     nameKey: inlineMenuNamesKeys.alignRight,
                     onClick: common_handler_for_inline_menu,

libs/components/editor-plugins/src/menu/left-menu/LeftMenuPlugin.tsx

@@ -1,15 +1,15 @@
-import { HookType, BlockDropPlacement } from '@toeverything/framework/virgo';
+import { BlockDropPlacement, HookType } from '@toeverything/framework/virgo';
-import { StrictMode } from 'react';
-import { BasePlugin } from '../../base-plugin';
-import { ignoreBlockTypes } from './menu-config';
-import {
-    LineInfoSubject,
-    LeftMenuDraggable,
-    BlockDomInfo,
-} from './LeftMenuDraggable';
-import { PluginRenderRoot } from '../../utils';
-import { Subject, throttleTime } from 'rxjs';
 import { domToRect, last, Point } from '@toeverything/utils';
+import { StrictMode } from 'react';
+import { Subject, throttleTime } from 'rxjs';
+import { BasePlugin } from '../../base-plugin';
+import { PluginRenderRoot } from '../../utils';
+import {
+    BlockDomInfo,
+    LeftMenuDraggable,
+    LineInfoSubject,
+} from './LeftMenuDraggable';
+import { ignoreBlockTypes } from './menu-config';
 const DRAG_THROTTLE_DELAY = 60;
 export class LeftMenuPlugin extends BasePlugin {
     private _mousedown?: boolean;
@@ -111,6 +111,10 @@ export class LeftMenuPlugin extends BasePlugin {
                 block.dom,
                 block.id
             );
+        if (!targetBlock.dom) {
+            console.warn('Can not find dom bind with block', targetBlock);
+            return;
+        }
         this._lineInfo.next({
             direction,
             blockInfo: {

libs/components/icons/src/auto-icons/align/align.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.4 5.6H5.6v12.8h12.8V5.6ZM4 4v16h16V4H4Z" clip-rule="evenodd"/><path d="M3 3H5V5H3z"/><path d="M3 19H5V21H3z"/><path d="M3 11H5V13H3z"/><path d="M11 3H13V5H11z"/><path d="M11 19H13V21H11z"/><path d="M11 11H13V13H11z"/><path d="M19 3H21V5H19z"/><path d="M19 19H21V21H19z"/><path d="M19 11H21V13H19z"/></svg>

libs/components/icons/src/auto-icons/align/align.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface AlignIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const AlignIcon = ({ color, style, ...props}: AlignIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.4 5.6H5.6v12.8h12.8V5.6ZM4 4v16h16V4H4Z" clipRule="evenodd" /><path d="M3 3H5V5H3z" /><path d="M3 19H5V21H3z" /><path d="M3 11H5V13H3z" /><path d="M11 3H13V5H11z" /><path d="M11 19H13V21H11z" /><path d="M11 11H13V13H11z" /><path d="M19 3H21V5H19z" /><path d="M19 19H21V21H19z" /><path d="M19 11H21V13H19z" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/bring-forward/bring-forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.566 9.434 12 2.87 5.434 9.434l1.132 1.132L11.2 5.93V21h1.6V5.931l4.634 4.635 1.132-1.132Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/bring-forward/bring-forward.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringForwardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BringForwardIcon = ({ color, style, ...props}: BringForwardIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.566 9.434 12 2.87 5.434 9.434l1.132 1.132L11.2 5.93V21h1.6V5.931l4.634 4.635 1.132-1.132Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M18.566 12.434 12 5.87l-6.566 6.565 1.132 1.132L11.2 8.93V21h1.6V8.931l4.634 4.635 1.132-1.132ZM5 3h14v1.6H5V3Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/bring-to-front/bring-to-front.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface BringToFrontIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const BringToFrontIcon = ({ color, style, ...props}: BringToFrontIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M18.566 12.434 12 5.87l-6.566 6.565 1.132 1.132L11.2 8.93V21h1.6V8.931l4.634 4.635 1.132-1.132ZM5 3h14v1.6H5V3Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/index.ts

@@ -1,4 +1,4 @@
-export const timestamp = 1660270988401;
+export const timestamp = 1660793621971;
 export * from './image/image';
 export * from './format-clear/format-clear';
 export * from './backward-undo/backward-undo';
@@ -26,10 +26,10 @@ export * from './format-italic/format-italic';
 export * from './format-strikethrough/format-strikethrough';
 export * from './format-color-text/format-color-text';
 export * from './format-background/format-background';
-export * from './align-left/align-left';
+export * from './text-align-left/text-align-left';
-export * from './align-center/align-center';
+export * from './text-align-center/text-align-center';
-export * from './align-right/align-right';
+export * from './text-align-right/text-align-right';
-export * from './align-justify/align-justify';
+export * from './text-align-justify/text-align-justify';
 export * from './arrow-drop-down/arrow-drop-down';
 export * from './arrow-right/arrow-right';
 export * from './more/more';
@@ -130,3 +130,17 @@ export * from './more-tags-an-subblocks/more-tags-an-subblocks';
 export * from './page-in-page-tree/page-in-page-tree';
 export * from './pin/pin';
 export * from './add/add';
+export * from './shapes-align-left/shapes-align-left';
+export * from './shapes-align-right/shapes-align-right';
+export * from './shapes-distribute-horizontal/shapes-distribute-horizontal';
+export * from './shapes-distribute-vertical/shapes-distribute-vertical';
+export * from './shapes-align-top/shapes-align-top';
+export * from './shapes-align-bottom/shapes-align-bottom';
+export * from './shapes-align-horizontal-center/shapes-align-horizontal-center';
+export * from './shapes-align-vertical-center/shapes-align-vertical-center';
+export * from './bring-forward/bring-forward';
+export * from './send-backward/send-backward';
+export * from './bring-to-front/bring-to-front';
+export * from './send-to-back/send-to-back';
+export * from './align/align';
+export * from './layers/layers';

libs/components/icons/src/auto-icons/layers/layers.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/layers/layers.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface LayersIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const LayersIcon = ({ color, style, ...props}: LayersIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M5.578 8 12 11.211 18.422 8 12 4.789 5.578 8Zm5.975-4.776L3.789 7.106a1 1 0 0 0 0 1.788l7.764 3.882a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-7.764-3.882a1 1 0 0 0-.894 0Z" clipRule="evenodd" /><path fillRule="evenodd" d="m5.579 12-1.789-.895h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.788l-.001-.001-1.789.894.001.001L12 15.211 5.578 12Z" clipRule="evenodd" /><path fillRule="evenodd" d="M5.579 16.094 3.79 15.2h-.001a1 1 0 0 0 0 1.79l7.764 3.881a1 1 0 0 0 .894 0l7.764-3.882a1 1 0 0 0 0-1.789h-.001l-1.789.894.001.001L12 19.306l-6.422-3.211Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/send-backward/send-backward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.8 18.069V3h-1.6v15.069l-4.634-4.635-1.132 1.132L12 21.13l6.566-6.565-1.132-1.132L12.8 18.07Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/send-backward/send-backward.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendBackwardIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SendBackwardIcon = ({ color, style, ...props}: SendBackwardIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12.8 18.069V3h-1.6v15.069l-4.634-4.635-1.132 1.132L12 21.13l6.566-6.565-1.132-1.132L12.8 18.07Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/send-to-back/send-to-back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.8 15.069V3h-1.6v12.069l-4.634-4.635-1.132 1.132L12 18.13l6.566-6.565-1.132-1.132L12.8 15.07ZM19 21H5v-1.6h14V21Z" clip-rule="evenodd"/></svg>

libs/components/icons/src/auto-icons/send-to-back/send-to-back.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface SendToBackIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const SendToBackIcon = ({ color, style, ...props}: SendToBackIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M12.8 15.069V3h-1.6v12.069l-4.634-4.635-1.132 1.132L12 18.13l6.566-6.565-1.132-1.132L12.8 15.07ZM19 21H5v-1.6h14V21Z" clipRule="evenodd" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-align-bottom/shapes-align-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21H3v-1h18v1Z" clip-rule="evenodd"/><path d="M7 17H15V20H7z" transform="rotate(-90 7 17)"/><path d="M14 17H28V20H14z" transform="rotate(-90 14 17)"/></svg>

libs/components/icons/src/auto-icons/shapes-align-bottom/shapes-align-bottom.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesAlignBottomIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesAlignBottomIcon = ({ color, style, ...props}: ShapesAlignBottomIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21H3v-1h18v1Z" clipRule="evenodd" /><path d="M7 17H15V20H7z" transform="rotate(-90 7 17)" /><path d="M14 17H28V20H14z" transform="rotate(-90 14 17)" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-align-horizontal-center/shapes-align-horizontal-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M11.5 21V3h1v18h-1Z" clip-rule="evenodd"/><path d="M8 7H16V10H8z"/><path d="M5 14H19V17H5z"/></svg>

libs/components/icons/src/auto-icons/shapes-align-horizontal-center/shapes-align-horizontal-center.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesAlignHorizontalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesAlignHorizontalCenterIcon = ({ color, style, ...props}: ShapesAlignHorizontalCenterIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M11.5 21V3h1v18h-1Z" clipRule="evenodd" /><path d="M8 7H16V10H8z" /><path d="M5 14H19V17H5z" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-align-left/shapes-align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M3 21V3h1v18H3Z" clip-rule="evenodd"/><path d="M7 7H15V10H7z"/><path d="M7 14H21V17H7z"/></svg>

libs/components/icons/src/auto-icons/shapes-align-left/shapes-align-left.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesAlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesAlignLeftIcon = ({ color, style, ...props}: ShapesAlignLeftIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M3 21V3h1v18H3Z" clipRule="evenodd" /><path d="M7 7H15V10H7z" /><path d="M7 14H21V17H7z" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-align-right/shapes-align-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 21V3h-1v18h1Z" clip-rule="evenodd"/><path d="M0 0H8V3H0z" transform="matrix(-1 0 0 1 17 7)"/><path d="M0 0H14V3H0z" transform="matrix(-1 0 0 1 17 14)"/></svg>

libs/components/icons/src/auto-icons/shapes-align-right/shapes-align-right.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesAlignRightIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesAlignRightIcon = ({ color, style, ...props}: ShapesAlignRightIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 21V3h-1v18h1Z" clipRule="evenodd" /><path d="M0 0H8V3H0z" transform="matrix(-1 0 0 1 17 7)" /><path d="M0 0H14V3H0z" transform="matrix(-1 0 0 1 17 14)" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-align-top/shapes-align-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 3H3v1h18V3Z" clip-rule="evenodd"/><path d="M0 0H8V3H0z" transform="matrix(0 1 1 0 7 7)"/><path d="M0 0H14V3H0z" transform="matrix(0 1 1 0 14 7)"/></svg>

libs/components/icons/src/auto-icons/shapes-align-top/shapes-align-top.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesAlignTopIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesAlignTopIcon = ({ color, style, ...props}: ShapesAlignTopIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 3H3v1h18V3Z" clipRule="evenodd" /><path d="M0 0H8V3H0z" transform="matrix(0 1 1 0 7 7)" /><path d="M0 0H14V3H0z" transform="matrix(0 1 1 0 14 7)" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-align-vertical-center/shapes-align-vertical-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M21 12.5H3v-1h18v1Z" clip-rule="evenodd"/><path d="M7 16H15V19H7z" transform="rotate(-90 7 16)"/><path d="M14 19H28V22H14z" transform="rotate(-90 14 19)"/></svg>

libs/components/icons/src/auto-icons/shapes-align-vertical-center/shapes-align-vertical-center.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesAlignVerticalCenterIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesAlignVerticalCenterIcon = ({ color, style, ...props}: ShapesAlignVerticalCenterIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M21 12.5H3v-1h18v1Z" clipRule="evenodd" /><path d="M7 16H15V19H7z" transform="rotate(-90 7 16)" /><path d="M14 19H28V22H14z" transform="rotate(-90 14 19)" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-distribute-horizontal/shapes-distribute-horizontal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20 21V3h-1v18h1ZM5 21V3H4v18h1Z" clip-rule="evenodd"/><path d="M0 0H10V3H0z" transform="matrix(0 -1 -1 0 13.5 17)"/></svg>

libs/components/icons/src/auto-icons/shapes-distribute-horizontal/shapes-distribute-horizontal.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesDistributeHorizontalIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesDistributeHorizontalIcon = ({ color, style, ...props}: ShapesDistributeHorizontalIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20 21V3h-1v18h1ZM5 21V3H4v18h1Z" clipRule="evenodd" /><path d="M0 0H10V3H0z" transform="matrix(0 -1 -1 0 13.5 17)" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/shapes-distribute-vertical/shapes-distribute-vertical.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M20.75 4.25h-18v1h18v-1ZM20.75 18.75h-18v1h18v-1Z" clip-rule="evenodd"/><path d="M0 0H10V3H0z" transform="matrix(-1 0 0 1 17 10.5)"/></svg>

libs/components/icons/src/auto-icons/shapes-distribute-vertical/shapes-distribute-vertical.tsx

@@ -0,0 +1,18 @@
+
+// eslint-disable-next-line no-restricted-imports
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export interface ShapesDistributeVerticalIconProps extends Omit<SvgIconProps, 'color'> {
+    color?: string
+}
+
+export const ShapesDistributeVerticalIcon = ({ color, style, ...props}: ShapesDistributeVerticalIconProps) => {
+    const propsStyles = {"color": color};
+    const customStyles = {};
+    const styles = {...propsStyles, ...customStyles, ...style}
+    return (
+        <SvgIcon style={styles} {...props}>
+        <path fillRule="evenodd" d="M20.75 4.25h-18v1h18v-1ZM20.75 18.75h-18v1h18v-1Z" clipRule="evenodd" /><path d="M0 0H10V3H0z" transform="matrix(-1 0 0 1 17 10.5)" />
+        </SvgIcon>
+    )
+};

libs/components/icons/src/auto-icons/text-align-center/text-align-center.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignCenterIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignCenterIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignCenterIcon = ({ color, style, ...props}: AlignCenterIconProps) => {
+export const TextAlignCenterIcon = ({ color, style, ...props}: TextAlignCenterIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/text-align-justify/text-align-justify.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignJustifyIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignJustifyIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignJustifyIcon = ({ color, style, ...props}: AlignJustifyIconProps) => {
+export const TextAlignJustifyIcon = ({ color, style, ...props}: TextAlignJustifyIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}

libs/components/icons/src/auto-icons/text-align-left/text-align-left.tsx

@@ -2,11 +2,11 @@
 // eslint-disable-next-line no-restricted-imports
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-export interface AlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
+export interface TextAlignLeftIconProps extends Omit<SvgIconProps, 'color'> {
     color?: string
 }
 
-export const AlignLeftIcon = ({ color, style, ...props}: AlignLeftIconProps) => {
+export const TextAlignLeftIcon = ({ color, style, ...props}: TextAlignLeftIconProps) => {
     const propsStyles = {"color": color};
     const customStyles = {};
     const styles = {...propsStyles, ...customStyles, ...style}