diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx index d6ab8e678..5857f0860 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/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 ( <>
@@ -293,6 +303,7 @@ export const BlocksuiteDocEditor = forwardRef< onDatabasePropertyChange={onDatabasePropertyChange} onPropertyChange={onPropertyChange} onPropertyAdded={onPropertyAdded} + onPropertyInfoChange={onPropertyInfoChange} defaultOpenProperty={defaultOpenProperty} />
diff --git a/packages/frontend/core/src/components/doc-properties/manager/index.tsx b/packages/frontend/core/src/components/doc-properties/manager/index.tsx index 0d2a9d310..cebd8a279 100644 --- a/packages/frontend/core/src/components/doc-properties/manager/index.tsx +++ b/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={} + items={ + + } > @@ -145,8 +155,16 @@ const PropertyItem = ({ export const DocPropertyManager = ({ className, defaultOpenEditMenuPropertyId, + onPropertyInfoChange, ...props -}: HTMLProps & { defaultOpenEditMenuPropertyId?: string }) => { +}: HTMLProps & { + 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) + } /> ))} diff --git a/packages/frontend/core/src/components/doc-properties/menu/edit-doc-property.tsx b/packages/frontend/core/src/components/doc-properties/menu/edit-doc-property.tsx index 37eed0a6a..ad062c6c9 100644 --- a/packages/frontend/core/src/components/doc-properties/menu/edit-doc-property.tsx +++ b/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)) { diff --git a/packages/frontend/core/src/components/doc-properties/sidebar/index.tsx b/packages/frontend/core/src/components/doc-properties/sidebar/index.tsx index 7ffc7a0f0..96a407cf2 100644 --- a/packages/frontend/core/src/components/doc-properties/sidebar/index.tsx +++ b/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 (
@@ -67,6 +78,7 @@ export const DocPropertySidebar = () => { diff --git a/packages/frontend/core/src/components/doc-properties/table.tsx b/packages/frontend/core/src/components/doc-properties/table.tsx index 9774aa5d1..f794755bb 100644 --- a/packages/frontend/core/src/components/doc-properties/table.tsx +++ b/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={} + menuItems={ + + } data-testid="doc-property-name" /> 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) + } /> ))}
@@ -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} />
{ + track.$.docInfoPanel.property.editPropertyMeta({ + type: property.type, + field, + }); + }, + [] + ); + return ( <> onPropertyChange(property, value)} + onPropertyInfoChange={(...args) => + onPropertyInfoChange(property, ...args) + } /> ))} { }); }, []); + const onPropertyInfoChange = useCallback( + (property: DocCustomPropertyInfo, field: string) => { + track.$.settingsPanel.workspace.editPropertyMeta({ + type: property.type, + field, + }); + }, + [] + ); + return (
@@ -32,7 +42,7 @@ const WorkspaceSettingPropertiesMain = () => {
- +
); }; diff --git a/packages/frontend/track/src/events.ts b/packages/frontend/track/src/events.ts index 9e2da883d..11539ad8c 100644 --- a/packages/frontend/track/src/events.ts +++ b/packages/frontend/track/src/events.ts @@ -48,6 +48,7 @@ type DocEvents = | 'copyBlockToLink' | 'bookmark' | 'editProperty' + | 'editPropertyMeta' | 'addProperty'; type EditorEvents = 'bold' | 'italic' | 'underline' | 'strikeThrough'; // END SECTION @@ -168,12 +169,12 @@ const PageEvents = { }, docInfoPanel: { $: ['open'], - property: ['editProperty', 'addProperty'], + property: ['editProperty', 'addProperty', 'editPropertyMeta'], databaseProperty: ['editProperty'], }, settingsPanel: { menu: ['openSettings'], - workspace: ['viewPlans', 'export', 'addProperty'], + workspace: ['viewPlans', 'export', 'addProperty', 'editPropertyMeta'], profileAndBadge: ['viewPlans'], accountUsage: ['viewPlans'], accountSettings: ['uploadAvatar', 'removeAvatar', 'updateUserName'], @@ -316,11 +317,11 @@ const PageEvents = { }, inlineDocInfo: { $: ['toggle'], - property: ['editProperty', 'addProperty'], + property: ['editProperty', 'editPropertyMeta', 'addProperty'], databaseProperty: ['editProperty'], }, sidepanel: { - property: ['addProperty'], + property: ['addProperty', 'editPropertyMeta'], }, biDirectionalLinksPanel: { $: ['toggle'], @@ -459,6 +460,7 @@ export type EventArgs = { type: string; }; editProperty: { type: string }; + editPropertyMeta: { type: string; field: string }; addProperty: { type: string; control: 'at menu' | 'property list' }; linkDoc: { type: string; journal: boolean }; drop: { type: string };