init: the first public commit for AFFiNE

libs/components/editor-blocks/src/blocks/divider/divider-view.tsx

@@ -0,0 +1,37 @@
+import { FC, useState } from 'react';
+import { CreateView } from '@toeverything/framework/virgo';
+import { styled } from '@toeverything/components/ui';
+import { useOnSelect } from '@toeverything/components/editor-core';
+
+const DividerBlock = styled('div')<{ isSelected: boolean }>(
+    ({ isSelected }) => ({
+        margin: 0,
+        padding: '10px 0',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderColor: isSelected ? 'blue' : 'transparent',
+    })
+);
+
+const Line = styled('div')({
+    height: '1px',
+    backgroundColor: '#e2e8f0',
+});
+
+export const DividerView: FC<CreateView> = ({ block, editor }) => {
+    const [isSelected, setIsSelected] = useState(false);
+
+    useOnSelect(block.id, (isSelect: boolean) => {
+        setIsSelected(isSelect);
+    });
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        editor.selectionManager.setSelectedNodesIds([block.id]);
+    };
+
+    return (
+        <DividerBlock isSelected={isSelected} onClick={handleClick}>
+            <Line />
+        </DividerBlock>
+    );
+};

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

@@ -0,0 +1,39 @@
+import {
+    AsyncBlock,
+    BaseView,
+    SelectBlock,
+} from '@toeverything/framework/virgo';
+import { Protocol } from '@toeverything/datasource/db-service';
+import { DividerView } from './divider-view';
+
+export class DividerBlock extends BaseView {
+    type = Protocol.Block.Type.divider;
+    View = DividerView;
+    override html2block(
+        el: Element,
+        parseEl: (el: Element) => any[]
+    ): any[] | null {
+        const tag_name = el.tagName;
+        if (tag_name === 'HR') {
+            return [
+                {
+                    type: this.type,
+                    properties: {
+                        text: {},
+                    },
+                    children: [],
+                },
+            ];
+        }
+
+        return null;
+    }
+
+    override async block2html(
+        block: AsyncBlock,
+        children: SelectBlock[],
+        generateHtml: (el: any[]) => Promise<string>
+    ): Promise<string> {
+        return `<hr>`;
+    }
+}