chore(core): tracking events for doc properties (#8651)

fix AF-1565

packages/frontend/core/src/modules/doc-info/types.ts

@@ -32,4 +32,5 @@ export interface DatabaseCellRendererProps {
   rowId: string;
   cell: DatabaseValueCell;
   dataSource: DatabaseBlockDataSource;
+  onChange: (value: unknown) => void;
 }

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/checkbox.tsx

@@ -8,6 +8,7 @@ export const CheckboxCell = ({
   cell,
   rowId,
   dataSource,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const value = useLiveData(cell.value$ as LiveData<boolean>);
   return (
@@ -16,6 +17,7 @@ export const CheckboxCell = ({
       value={value ? 'true' : 'false'}
       onChange={v => {
         dataSource.cellValueChange(rowId, cell.property.id, v === 'true');
+        onChange?.(v === 'true');
       }}
     />
   );

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/date.tsx

@@ -20,6 +20,7 @@ export const DateCell = ({
   cell,
   rowId,
   dataSource,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const value = useLiveData(
     cell.value$ as LiveData<number | string | undefined>
@@ -34,6 +35,7 @@ export const DateCell = ({
           cell.property.id,
           fromInternalDateString(v)
         );
+        onChange?.(fromInternalDateString(v));
       }}
     />
   );

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/link.tsx

@@ -21,6 +21,7 @@ export const LinkCell = ({
   cell,
   dataSource,
   rowId,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const isEmpty = useLiveData(
     cell.value$.map(value => typeof value !== 'string' || !value)
@@ -35,7 +36,8 @@ export const LinkCell = ({
     dataSource.cellValueChange(rowId, cell.id, tempValue.trim());
     setEditing(false);
     setTempValue(tempValue.trim());
-  }, [dataSource, rowId, cell.id, tempValue]);
+    onChange?.(tempValue.trim());
+  }, [dataSource, rowId, cell.id, onChange, tempValue]);
 
   const handleOnChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
     e => {

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/number.tsx

@@ -7,6 +7,7 @@ export const NumberCell = ({
   cell,
   rowId,
   dataSource,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const value = useLiveData(cell.value$);
   return (
@@ -14,6 +15,7 @@ export const NumberCell = ({
       value={value}
       onChange={v => {
         dataSource.cellValueChange(rowId, cell.property.id, v);
+        onChange?.(v);
       }}
     />
   );

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/progress.tsx

@@ -9,6 +9,7 @@ export const ProgressCell = ({
   cell,
   dataSource,
   rowId,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const value = useLiveData(cell.value$ as LiveData<number>);
   const isEmpty = value === undefined;
@@ -27,6 +28,7 @@ export const ProgressCell = ({
         }}
         onBlur={() => {
           dataSource.cellValueChange(rowId, cell.id, localValue);
+          onChange?.(localValue);
         }}
       />
     </PropertyValue>

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/rich-text.tsx

@@ -40,6 +40,7 @@ const renderRichText = ({
 export const RichTextCell = ({
   cell,
   dataSource,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const std = useBlockStdScope(dataSource.doc);
   const text = useLiveData(cell.value$ as LiveData<Y.Text>);
@@ -49,14 +50,19 @@ export const RichTextCell = ({
     if (ref.current) {
       ref.current.innerHTML = '';
       const richText = renderRichText({ doc: dataSource.doc, std, text });
+      const listener = () => {
+        onChange(text);
+      };
       if (richText) {
+        richText.addEventListener('change', listener);
         ref.current.append(richText);
         return () => {
+          richText.removeEventListener('change', listener);
           richText.remove();
         };
       }
     }
     return () => {};
-  }, [dataSource.doc, std, text]);
+  }, [dataSource.doc, onChange, std, text]);
   return <PropertyValue ref={ref}></PropertyValue>;
 };

packages/frontend/core/src/modules/doc-info/views/database-properties/cells/select.tsx

@@ -147,6 +147,7 @@ const BlocksuiteDatabaseSelector = ({
   dataSource,
   rowId,
   multiple,
+  onChange,
 }: DatabaseCellRendererProps & { multiple: boolean }) => {
   const tagService = useService(TagService);
   const selectCell = cell as any as SingleSelectCell | MultiSelectCell;
@@ -177,21 +178,24 @@ const BlocksuiteDatabaseSelector = ({
   const onDeleteTag = useCallback(
     (tagId: string) => {
       adapter.deleteTag(selectCell, dataSource, tagId);
+      onChange?.(selectCell.value$.value);
     },
-    [dataSource, selectCell]
+    [dataSource, selectCell, onChange]
   );
   const onDeselectTag = useCallback(
     (tagId: string) => {
       adapter.deselectTag(rowId, selectCell, dataSource, tagId, multiple);
+      onChange?.(selectCell.value$.value);
     },
-    [selectCell, dataSource, rowId, multiple]
+    [rowId, selectCell, dataSource, multiple, onChange]
   );
 
   const onSelectTag = useCallback(
     (tagId: string) => {
       adapter.selectTag(rowId, selectCell, dataSource, tagId, multiple);
+      onChange?.(selectCell.value$.value);
     },
-    [rowId, selectCell, dataSource, multiple]
+    [rowId, selectCell, dataSource, multiple, onChange]
   );
 
   const tagColors = useMemo(() => {
@@ -237,6 +241,7 @@ export const SelectCell = ({
   cell,
   dataSource,
   rowId,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const isEmpty = useLiveData(
     cell.value$.map(value => Array.isArray(value) && value.length === 0)
@@ -248,6 +253,7 @@ export const SelectCell = ({
         dataSource={dataSource}
         rowId={rowId}
         multiple={false}
+        onChange={onChange}
       />
     </PropertyValue>
   );
@@ -257,6 +263,7 @@ export const MultiSelectCell = ({
   cell,
   dataSource,
   rowId,
+  onChange,
 }: DatabaseCellRendererProps) => {
   const isEmpty = useLiveData(
     cell.value$.map(value => Array.isArray(value) && value.length === 0)
@@ -268,6 +275,7 @@ export const MultiSelectCell = ({
         dataSource={dataSource}
         rowId={rowId}
         multiple={true}
+        onChange={onChange}
       />
     </PropertyValue>
   );

packages/frontend/core/src/modules/doc-info/views/database-properties/doc-database-backlink-info.tsx

@@ -46,10 +46,12 @@ const DatabaseBacklinkCell = ({
   cell,
   dataSource,
   rowId,
+  onChange,
 }: {
   cell: DatabaseValueCell;
   dataSource: DatabaseBlockDataSource;
   rowId: string;
+  onChange: (value: unknown) => void;
 }) => {
   const cellType = useLiveData(cell.property.type$);
 
@@ -67,7 +69,12 @@ const DatabaseBacklinkCell = ({
       data-testid="database-backlink-cell"
     >
       <DatabaseBacklinkCellName cell={cell} config={config} />
-      <config.Renderer cell={cell} dataSource={dataSource} rowId={rowId} />
+      <config.Renderer
+        cell={cell}
+        dataSource={dataSource}
+        rowId={rowId}
+        onChange={onChange}
+      />
     </li>
   );
 };
@@ -79,9 +86,15 @@ const DatabaseBacklinkCell = ({
 const DatabaseBacklinkRow = ({
   defaultOpen = false,
   row$,
+  onChange,
 }: {
   defaultOpen: boolean;
   row$: Observable<DatabaseRow | undefined>;
+  onChange?: (
+    row: DatabaseRow,
+    cell: DatabaseValueCell,
+    value: unknown
+  ) => void;
 }) => {
   const row = useLiveData(
     useMemo(() => LiveData.from(row$, undefined), [row$])
@@ -132,6 +145,7 @@ const DatabaseBacklinkRow = ({
               cell={cell}
               dataSource={row.dataSource}
               rowId={row.id}
+              onChange={value => onChange?.(row, cell, value)}
             />
           );
         })}
@@ -142,11 +156,17 @@ const DatabaseBacklinkRow = ({
 
 export const DocDatabaseBacklinkInfo = ({
   defaultOpen = [],
+  onChange,
 }: {
   defaultOpen?: {
     databaseId: string;
     rowId: string;
   }[];
+  onChange?: (
+    row: DatabaseRow,
+    cell: DatabaseValueCell,
+    value: unknown
+  ) => void;
 }) => {
   const doc = useService(DocService).doc;
   const docDatabaseBacklinks = useService(DocDatabaseBacklinksService);
@@ -173,6 +193,7 @@ export const DocDatabaseBacklinkInfo = ({
                 backlink.rowId === rowId
             )}
             row$={row$}
+            onChange={onChange}
           />
           <Divider size="thinner" className={styles.divider} />
         </Fragment>