fix: 卡片的 ui 组件点击执行命令保持光标在卡片上

packages/engine/src/command.ts

@@ -1,5 +1,11 @@
+import { TRIGGER_CARD_ID, UI_SELECTOR } from './constants';
 import { isMarkPlugin } from './plugin';
-import { ChangeInterface, EditorInterface, CommandInterface } from './types';
+import {
+	ChangeInterface,
+	EditorInterface,
+	CommandInterface,
+	CardInterface,
+} from './types';
 import { isEngine } from './utils';
 
 /**
@@ -71,8 +77,21 @@ class Command implements CommandInterface {
 			if (
 				!range.commonAncestorNode.isRoot() &&
 				!range.commonAncestorNode.inEditor()
-			)
+			) {
-				this.editor.focus();
+				const uiElement = range.commonAncestorNode.closest(UI_SELECTOR);
+				let component: CardInterface | undefined = undefined;
+				if (uiElement.length > 0) {
+					const cardId = uiElement.attributes(TRIGGER_CARD_ID);
+					if (cardId) {
+						const { card } = this.editor;
+						component = card.find(cardId);
+						if (component) {
+							card.select(component);
+						}
+					}
+				}
+				if (!component) this.editor.focus();
+			}
 			change.cacheRangeBeforeCommand();
 		}
 		return change;

plugins/backcolor/src/index.ts

@@ -1,4 +1,10 @@
-import { $, ConversionData, MarkPlugin, PluginOptions } from '@aomao/engine';
+import {
+	$,
+	ConversionData,
+	MarkPlugin,
+	PluginOptions,
+	SchemaMark,
+} from '@aomao/engine';
 
 export interface BackcolorOptions extends PluginOptions {
 	hotkey?: { key: string; args: Array<string> };
@@ -12,7 +18,6 @@ export default class<T extends BackcolorOptions> extends MarkPlugin<T> {
 
 	style = {
 		'background-color': '@var0',
-		background: '@var1',
 	};
 
 	variable = {
@@ -20,9 +25,14 @@ export default class<T extends BackcolorOptions> extends MarkPlugin<T> {
 			required: true,
 			value: '@color',
 		},
-		'@var1': '@color',
 	};
 
+	schema(): SchemaMark | SchemaMark[] {
+		const schemas = super.schema() as SchemaMark;
+		schemas.attributes!.style['background'] = '@color';
+		return schemas;
+	}
+
 	conversion(): ConversionData {
 		return [
 			{

plugins/status/src/components/editor.ts

@@ -16,7 +16,7 @@ export type Options = {
 	onBlur?: () => void;
 	onChange?: (
 		value: string,
-		color: {
+		color?: {
 			background: string;
 			color: string;
 		},
@@ -44,7 +44,7 @@ class StatusEditor {
 
 	change() {
 		const { onChange } = this.options;
-		if (onChange) onChange(this.#value!, this.#color!);
+		if (onChange) onChange(this.#value!, this.#color);
 	}
 
 	updateActive(color: { background: string; color: string }) {
@@ -55,6 +55,8 @@ class StatusEditor {
 		);
 		if (index > -1) {
 			svgElements?.eq(index)?.css('display', 'block');
+		} else {
+			this.#color = undefined;
 		}
 	}
 

plugins/status/src/components/index.ts

@@ -84,14 +84,8 @@ class Status<T extends StatusValue = StatusValue> extends Card<T> {
 
 		this.#statusEditor = new StatusEditor({
 			colors: this.getColors(),
-			onChange: (
+			onChange: (text, color) => {
-				text: string,
+				if (color) this.setColor(color);
-				color: {
-					background: string;
-					color: string;
-				},
-			) => {
-				this.setColor(color);
 				this.setValue({
 					text,
 				} as T);