Merge pull request #386 from toeverything/feat/code

feat(code): focus

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -39,7 +39,7 @@ import { yaml } from '@codemirror/legacy-modes/mode/yaml';
 import { Extension } from '@codemirror/state';
 import {
     BlockPendantProvider,
-    useOnSelect,
+    useOnSelectActive,
 } from '@toeverything/components/editor-core';
 import { DuplicateIcon } from '@toeverything/components/icons';
 import { Option, Select, styled } from '@toeverything/components/ui';
@@ -147,7 +147,8 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
             codeMirror?.current?.view?.focus();
         }
     };
-    useOnSelect(block.id, (_is_select: boolean) => {
+    //TODO listen codeMirror.up down event , active
+    useOnSelectActive(block.id, () => {
         focusCode();
     });
     const onChange = (value: string) => {
@@ -161,9 +162,9 @@ export const CodeView = ({ block, editor }: CreateCodeView) => {
     };
     useEffect(() => {
         handleLangChange(langType ? langType : DEFAULT_LANG);
-        setTimeout(() => {
+        // setTimeout(() => {
-            focusCode();
+        //     focusCode();
-        }, 100);
+        // }, 100);
     }, []);
 
     const copyCode = () => {

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

@@ -1,21 +1,21 @@
+import { Protocol } from '@toeverything/datasource/db-service';
 import {
-    BaseView,
     AsyncBlock,
+    BaseView,
     BlockEditor,
     HTML2BlockResult,
 } from '@toeverything/framework/virgo';
-import { Protocol } from '@toeverything/datasource/db-service';
-import { CodeView } from './CodeView';
 import {
     Block2HtmlProps,
     commonBlock2HtmlContent,
     commonHTML2block,
 } from '../../utils/commonBlockClip';
+import { CodeView } from './CodeView';
 
 export class CodeBlock extends BaseView {
     type = Protocol.Block.Type.code;
     public override selectable = true;
-    public override editable = false;
+    public override editable = true;
     // View = CodeView;
     View = CodeView;
     override async onCreate(block: AsyncBlock): Promise<AsyncBlock> {

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

@@ -97,6 +97,23 @@ export const TextView = ({
     const onBackspace: TextProps['handleBackSpace'] = editor.withBatch(
         async props => {
             const { isCollAndStart } = props;
+            const activeBlockIds =
+                editor.selectionManager.getSelectedNodesIds();
+
+            // when only one group selected , remove this group block
+            if (activeBlockIds && activeBlockIds.length === 1) {
+                const activeBlock = await editor.getBlockById(
+                    activeBlockIds[0]
+                );
+
+                if (
+                    activeBlock &&
+                    activeBlock.type === Protocol.Block.Type.group
+                ) {
+                    await activeBlock.remove();
+                    return true;
+                }
+            }
             if (!isCollAndStart) {
                 return false;
             }

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

@@ -406,6 +406,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
                 textRef.current.isEmpty() || textRef.current.isSelectAll();
 
             const ifSelectGroup = await selectGroupBlocks(isSelectAll);
+
             if (ifSelectGroup) {
                 return false;
             }

libs/components/editor-plugins/src/menu/command-menu/Menu.tsx

@@ -118,7 +118,7 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
                                 ?.getRangeAt(0)
                                 ?.getBoundingClientRect();
                         if (rect) {
-                            let rectTop = rect.top;
+                            const rectTop = rect.top;
                             const clientHeight =
                                 document.documentElement.clientHeight;
 
@@ -224,8 +224,10 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
                 await commonCommandMenuHandler(blockId, type, editor);
             }
             const block = await editor.getBlockById(blockId);
-            let nextBlock = await block.nextSibling();
+            const nextBlock = await block.nextSibling();
-            editor.selectionManager.activeNodeByNodeId(nextBlock.id);
+            setTimeout(() => {
+                editor.selectionManager.activeNodeByNodeId(nextBlock.id);
+            });
             if (block.blockProvider.isEmpty()) {
                 block.remove();
             }