feat: error message will be appear when tag edit empty, resolved #13

libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx

@@ -1,6 +1,12 @@
 import React, { CSSProperties, useState, useEffect } from 'react';
 import { nanoid } from 'nanoid';
-import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
+import {
+    Input,
+    Option,
+    Select,
+    Tooltip,
+    message,
+} from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 import { AsyncBlock } from '../../editor';
 
@@ -23,6 +29,7 @@ import {
     useSelectProperty,
 } from '../../recast-block';
 import {
+    checkPendantForm,
     genInitialOptions,
     getOfficialSelected,
     getPendantConfigByType,
@@ -112,7 +119,15 @@ export const CreatePendantPanel = ({
                         iconConfig={getPendantConfigByType(selectedOption.type)}
                         // isStatusSelect={selectedOption.name === 'Status'}
                         onSure={async (type, newPropertyItem, newValue) => {
-                            if (!fieldName) {
+                            const checkResult = checkPendantForm(
+                                type,
+                                fieldName,
+                                newPropertyItem,
+                                newValue
+                            );
+
+                            if (!checkResult.passed) {
+                                await message.error(checkResult.message);
                                 return;
                             }
 

libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx

@@ -16,12 +16,11 @@ import { OptionType, PendantTypes, TempInformationType } from '../types';
 import {
     getOfficialSelected,
     getPendantConfigByType,
-    // getPendantIconsConfigByNameOrType,
+    checkPendantForm,
 } from '../utils';
 import { usePendant } from '../use-pendant';
 import {
     StyledPopoverWrapper,
-    StyledOperationTitle,
     StyledOperationLabel,
     StyledInputEndAdornment,
     StyledDivider,
@@ -29,7 +28,7 @@ import {
     StyledPopoverSubTitle,
 } from '../StyledComponent';
 import { IconMap, pendantOptions } from '../config';
-import { Input, Tooltip } from '@toeverything/components/ui';
+import { Input, message, Tooltip } from '@toeverything/components/ui';
 import { HelpCenterIcon } from '@toeverything/components/icons';
 
 type SelectPropertyType = MultiSelectProperty | SelectProperty;
@@ -111,6 +110,18 @@ export const UpdatePendantPanel = ({
                 property={property}
                 type={property.type}
                 onSure={async (type, newPropertyItem, newValue) => {
+                    const checkResult = checkPendantForm(
+                        type,
+                        fieldTitle,
+                        newPropertyItem,
+                        newValue
+                    );
+
+                    if (!checkResult.passed) {
+                        await message.error(checkResult.message);
+                        return;
+                    }
+
                     if (
                         type === PendantTypes.MultiSelect ||
                         type === PendantTypes.Select ||

libs/components/editor-core/src/block-pendant/utils.ts

@@ -1,4 +1,5 @@
 import {
+    PropertyType,
     RecastBlockValue,
     RecastPropertyId,
     SelectOption,
@@ -175,3 +176,49 @@ export const genInitialOptions = (
     }
     return [genBasicOption({ index: 0, iconConfig })];
 };
+
+export const checkPendantForm = (
+    type: PropertyType,
+    fieldTitle: string,
+    newProperty: any,
+    newValue: any
+): { passed: boolean; message: string } => {
+    if (!fieldTitle) {
+        return { passed: false, message: 'Please input field title !' };
+    }
+
+    if (
+        type === PendantTypes.MultiSelect ||
+        type === PendantTypes.Select ||
+        type === PendantTypes.Status
+    ) {
+        if (!newProperty) {
+            return {
+                passed: false,
+                message: 'Ensure at least on non-empty option !',
+            };
+        }
+    }
+    if (type === PendantTypes.Information) {
+        if (!newProperty) {
+            return {
+                passed: false,
+                message: 'Ensure at least on non-empty option !',
+            };
+        }
+    }
+    if (
+        type === PendantTypes.Text ||
+        type === PendantTypes.Date ||
+        type === PendantTypes.Mention
+    ) {
+        if (!newValue) {
+            return {
+                passed: false,
+                message: `Please input content !`,
+            };
+        }
+    }
+
+    return { passed: true, message: 'Check passed !' };
+};