chore(core): edit property meta events (#9253)

fix AF-1986

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -278,6 +278,16 @@ export const BlocksuiteDocEditor = forwardRef<
     []
   );
 
+  const onPropertyInfoChange = useCallback(
+    (property: DocCustomPropertyInfo, field: string) => {
+      track.doc.inlineDocInfo.property.editPropertyMeta({
+        type: property.type,
+        field,
+      });
+    },
+    []
+  );
+
   return (
     <>
       <div className={styles.affineDocViewport}>
@@ -293,6 +303,7 @@ export const BlocksuiteDocEditor = forwardRef<
               onDatabasePropertyChange={onDatabasePropertyChange}
               onPropertyChange={onPropertyChange}
               onPropertyAdded={onPropertyAdded}
+              onPropertyInfoChange={onPropertyInfoChange}
               defaultOpenProperty={defaultOpenProperty}
             />
           </div>

packages/frontend/core/src/components/doc-properties/manager/index.tsx

@@ -27,9 +27,14 @@ import * as styles from './styles.css';
 const PropertyItem = ({
   propertyInfo,
   defaultOpenEditMenu,
+  onPropertyInfoChange,
 }: {
   propertyInfo: DocCustomPropertyInfo;
   defaultOpenEditMenu?: boolean;
+  onPropertyInfoChange?: (
+    field: keyof DocCustomPropertyInfo,
+    value: string
+  ) => void;
 }) => {
   const t = useI18n();
   const workspaceService = useService(WorkspaceService);
@@ -130,7 +135,12 @@ const PropertyItem = ({
             onOpenChange: setMoreMenuOpen,
             modal: true,
           }}
-          items={<EditDocPropertyMenuItems propertyId={propertyInfo.id} />}
+          items={
+            <EditDocPropertyMenuItems
+              propertyId={propertyInfo.id}
+              onPropertyInfoChange={onPropertyInfoChange}
+            />
+          }
         >
           <IconButton size={20} iconClassName={styles.itemMore}>
             <MoreHorizontalIcon />
@@ -145,8 +155,16 @@ const PropertyItem = ({
 export const DocPropertyManager = ({
   className,
   defaultOpenEditMenuPropertyId,
+  onPropertyInfoChange,
   ...props
-}: HTMLProps<HTMLDivElement> & { defaultOpenEditMenuPropertyId?: string }) => {
+}: HTMLProps<HTMLDivElement> & {
+  defaultOpenEditMenuPropertyId?: string;
+  onPropertyInfoChange?: (
+    property: DocCustomPropertyInfo,
+    field: keyof DocCustomPropertyInfo,
+    value: string
+  ) => void;
+}) => {
   const docsService = useService(DocsService);
 
   const properties = useLiveData(docsService.propertyList.sortedProperties$);
@@ -160,6 +178,9 @@ export const DocPropertyManager = ({
             defaultOpenEditMenuPropertyId === propertyInfo.id
           }
           key={propertyInfo.id}
+          onPropertyInfoChange={(...args) =>
+            onPropertyInfoChange?.(propertyInfo, ...args)
+          }
         />
       ))}
     </div>

packages/frontend/core/src/components/doc-properties/menu/edit-doc-property.tsx

@@ -4,6 +4,7 @@ import {
   MenuSeparator,
   useConfirmModal,
 } from '@affine/component';
+import type { DocCustomPropertyInfo } from '@affine/core/modules/db';
 import { DocsService } from '@affine/core/modules/doc';
 import { Trans, useI18n } from '@affine/i18n';
 import { DeleteIcon, InvisibleIcon, ViewIcon } from '@blocksuite/icons/rc';
@@ -26,8 +27,13 @@ import * as styles from './edit-doc-property.css';
 
 export const EditDocPropertyMenuItems = ({
   propertyId,
+  onPropertyInfoChange,
 }: {
   propertyId: string;
+  onPropertyInfoChange?: (
+    field: keyof DocCustomPropertyInfo,
+    value: string
+  ) => void;
 }) => {
   const t = useI18n();
   const docsService = useService(DocsService);
@@ -68,8 +74,9 @@ export const EditDocPropertyMenuItems = ({
       docsService.propertyList.updatePropertyInfo(propertyId, {
         name: e.currentTarget.value,
       });
+      onPropertyInfoChange?.('name', e.currentTarget.value);
     },
-    [docsService.propertyList, propertyId]
+    [docsService.propertyList, propertyId, onPropertyInfoChange]
   );
 
   const handleIconChange = useCallback(
@@ -77,8 +84,9 @@ export const EditDocPropertyMenuItems = ({
       docsService.propertyList.updatePropertyInfo(propertyId, {
         icon: iconName,
       });
+      onPropertyInfoChange?.('icon', iconName);
     },
-    [docsService.propertyList, propertyId]
+    [docsService.propertyList, propertyId, onPropertyInfoChange]
   );
 
   const handleNameChange = useCallback((e: string) => {
@@ -91,8 +99,9 @@ export const EditDocPropertyMenuItems = ({
       docsService.propertyList.updatePropertyInfo(propertyId, {
         show: 'always-show',
       });
+      onPropertyInfoChange?.('show', 'always-show');
     },
-    [docsService.propertyList, propertyId]
+    [docsService.propertyList, propertyId, onPropertyInfoChange]
   );
 
   const handleClickHideWhenEmpty = useCallback(
@@ -101,8 +110,9 @@ export const EditDocPropertyMenuItems = ({
       docsService.propertyList.updatePropertyInfo(propertyId, {
         show: 'hide-when-empty',
       });
+      onPropertyInfoChange?.('show', 'hide-when-empty');
     },
-    [docsService.propertyList, propertyId]
+    [docsService.propertyList, propertyId, onPropertyInfoChange]
   );
 
   const handleClickAlwaysHide = useCallback(
@@ -111,8 +121,9 @@ export const EditDocPropertyMenuItems = ({
       docsService.propertyList.updatePropertyInfo(propertyId, {
         show: 'always-hide',
       });
+      onPropertyInfoChange?.('show', 'always-hide');
     },
-    [docsService.propertyList, propertyId]
+    [docsService.propertyList, propertyId, onPropertyInfoChange]
   );
 
   if (!propertyInfo || !isSupportedDocPropertyType(propertyType)) {

packages/frontend/core/src/components/doc-properties/sidebar/index.tsx

@@ -1,4 +1,5 @@
 import { Divider, IconButton, Tooltip } from '@affine/component';
+import type { DocCustomPropertyInfo } from '@affine/core/modules/db';
 import { DocsService } from '@affine/core/modules/doc';
 import { generateUniqueNameInSequence } from '@affine/core/utils/unique-name';
 import { useI18n } from '@affine/i18n';
@@ -59,6 +60,16 @@ export const DocPropertySidebar = () => {
     [propertyList, properties]
   );
 
+  const onPropertyInfoChange = useCallback(
+    (property: DocCustomPropertyInfo, field: string) => {
+      track.doc.sidepanel.property.editPropertyMeta({
+        type: property.type,
+        field,
+      });
+    },
+    []
+  );
+
   return (
     <div className={styles.container}>
       <CollapsibleRoot defaultOpen>
@@ -67,6 +78,7 @@ export const DocPropertySidebar = () => {
           <DocPropertyManager
             className={styles.manager}
             defaultOpenEditMenuPropertyId={newPropertyId}
+            onPropertyInfoChange={onPropertyInfoChange}
           />
         </CollapsibleContent>
       </CollapsibleRoot>

packages/frontend/core/src/components/doc-properties/table.tsx

@@ -52,6 +52,11 @@ export interface DocPropertiesTableProps {
   defaultOpenProperty?: DefaultOpenProperty;
   onPropertyAdded?: (property: DocCustomPropertyInfo) => void;
   onPropertyChange?: (property: DocCustomPropertyInfo, value: unknown) => void;
+  onPropertyInfoChange?: (
+    property: DocCustomPropertyInfo,
+    field: keyof DocCustomPropertyInfo,
+    value: string
+  ) => void;
   onDatabasePropertyChange?: (
     row: DatabaseRow,
     cell: DatabaseValueCell,
@@ -106,12 +111,17 @@ interface DocPropertyRowProps {
   showAll?: boolean;
   defaultOpenEditMenu?: boolean;
   onChange?: (value: unknown) => void;
+  onPropertyInfoChange?: (
+    field: keyof DocCustomPropertyInfo,
+    value: string
+  ) => void;
 }
 
 export const DocPropertyRow = ({
   propertyInfo,
   defaultOpenEditMenu,
   onChange,
+  onPropertyInfoChange,
 }: DocPropertyRowProps) => {
   const t = useI18n();
   const docService = useService(DocService);
@@ -213,7 +223,12 @@ export const DocPropertyRow = ({
           propertyInfo.name ||
           (typeInfo?.name ? t.t(typeInfo.name) : t['unnamed']())
         }
-        menuItems={<EditDocPropertyMenuItems propertyId={propertyInfo.id} />}
+        menuItems={
+          <EditDocPropertyMenuItems
+            propertyId={propertyInfo.id}
+            onPropertyInfoChange={onPropertyInfoChange}
+          />
+        }
         data-testid="doc-property-name"
       />
       <ValueRenderer
@@ -231,6 +246,11 @@ interface DocWorkspacePropertiesTableBodyProps {
   defaultOpen?: boolean;
   onChange?: (property: DocCustomPropertyInfo, value: unknown) => void;
   onPropertyAdded?: (property: DocCustomPropertyInfo) => void;
+  onPropertyInfoChange?: (
+    property: DocCustomPropertyInfo,
+    field: keyof DocCustomPropertyInfo,
+    value: string
+  ) => void;
 }
 
 // 🏷️ Tags     (⋅ xxx) (⋅ yyy)
@@ -241,7 +261,15 @@ const DocWorkspacePropertiesTableBody = forwardRef<
   DocWorkspacePropertiesTableBodyProps
 >(
   (
-    { className, style, defaultOpen, onChange, onPropertyAdded, ...props },
+    {
+      className,
+      style,
+      defaultOpen,
+      onChange,
+      onPropertyAdded,
+      onPropertyInfoChange,
+      ...props
+    },
     ref
   ) => {
     const t = useI18n();
@@ -304,6 +332,9 @@ const DocWorkspacePropertiesTableBody = forwardRef<
               propertyInfo={property}
               defaultOpenEditMenu={newPropertyId === property.id}
               onChange={value => onChange?.(property, value)}
+              onPropertyInfoChange={(...args) =>
+                onPropertyInfoChange?.(property, ...args)
+              }
             />
           ))}
           <div className={styles.actionContainer}>
@@ -357,6 +388,7 @@ const DocPropertiesTableInner = ({
   defaultOpenProperty,
   onPropertyAdded,
   onPropertyChange,
+  onPropertyInfoChange,
   onDatabasePropertyChange,
   className,
 }: DocPropertiesTableProps) => {
@@ -376,6 +408,7 @@ const DocPropertiesTableInner = ({
             }
             onPropertyAdded={onPropertyAdded}
             onChange={onPropertyChange}
+            onPropertyInfoChange={onPropertyInfoChange}
           />
           <div className={styles.tableHeaderDivider} />
           <DocDatabaseBacklinkInfo