Merge branch 'main' of github.com:anyproto/anytype-ts

src/scss/menu/dataview/option.scss

@@ -46,6 +46,7 @@
 	}
 	
 	.menu.menuDataviewOptionEdit {
+		.content { overflow: visible; max-height: unset; }
 		.filter { margin-bottom: 8px; }
 		.item:hover::before { background: $colorShapeHighlightMedium; }
 		.item.active::before { z-index: 1; }

src/ts/component/block/dataview/cell/index.tsx

@@ -14,8 +14,6 @@ import CellFile from './file';
 
 interface Props extends I.Cell {
 	elementId?: string;
-	menuClassName?: string;
-	menuClassNameWrap?: string;
 	showTooltip?: boolean;
 	tooltipX?: I.MenuDirection.Left | I.MenuDirection.Center | I.MenuDirection.Right;
 	tooltipY?: I.MenuDirection.Top | I.MenuDirection.Bottom;

src/ts/component/block/dataview/cell/select.tsx

@@ -82,6 +82,7 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
 									id={`item-${item.id}`}
 									className={cni.join(' ')}
 									draggable={!isStatus}
+									onContextMenu={e => this.onContextMenu(e, item)}
 									{...UtilCommon.dataProps({ id: item.id, index: i })}
 								>
 									<Tag 
@@ -123,10 +124,12 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
 					<span className="over">
 						{value.map((item: any, i: number) => (
 							<Tag 
+								id={`item-${item.id}`}
 								key={item.id} 
 								text={item.name} 
 								color={item.color}
-								className={Relation.selectClassName(relation.format)} 
+								className={Relation.selectClassName(relation.format)}
+								onContextMenu={e => this.onContextMenu(e, item)}
 							/>
 						))}
 						{arrayLimit && (length > arrayLimit) ? <div className="more">+{length - arrayLimit}</div> : ''}
@@ -319,6 +322,27 @@ const CellSelect = observer(class CellSelect extends React.Component<I.Cell, Sta
 		this.setValue([]);
 	};
 
+	onContextMenu (e: React.MouseEvent, item: any) {
+		const { id, canEdit, menuClassName, menuClassNameWrap } = this.props;
+
+		if (!canEdit) {
+			return;
+		};
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		menuStore.open('dataviewOptionEdit', { 
+			element: `#${id} #item-${item.id}`,
+			className: menuClassName,
+			classNameWrap: menuClassNameWrap,
+			offsetY: 4,
+			data: {
+				option: item,
+			}
+		});
+	};
+
 	getItems (): any[] {
 		const { relation, getRecord, recordId } = this.props;
 		const record = getRecord(recordId);

src/ts/component/util/tag.tsx

@@ -8,6 +8,7 @@ interface Props {
 	color?: string;
 	canEdit?: boolean;
 	onRemove?: (e: any) => void;
+	onContextMenu?(e: any): void;
 };
 
 class Tag extends React.Component<Props> {
@@ -21,7 +22,7 @@ class Tag extends React.Component<Props> {
 	};
 
 	render () {
-		const { text, color, className, canEdit } = this.props;
+		const { id, text, color, className, canEdit, onContextMenu } = this.props;
 		const cn = [ 'tagItem', 'tagColor', 'tagColor-' + (color || 'default') ];
 		
 		if (className) {
@@ -42,9 +43,11 @@ class Tag extends React.Component<Props> {
 		
 		return (
 			<span 
+				id={id}
 				ref={node => this.node = node}
 				contentEditable={false} 
 				className={cn.join(' ')}
+				onContextMenu={onContextMenu}
 			>
 				<span className="inner">{text}</span>
 				{icon}

src/ts/interface/block/dataview.ts

@@ -204,6 +204,8 @@ export interface Cell {
 	textLimit?: number;
 	arrayLimit?: number;
 	shortUrl?: boolean;
+	menuClassName?: string;
+	menuClassNameWrap?: string;
 	getView?(): View;
 	getRecord(id: string): any;
 	onChange?(value: any, callBack?: (message: any) => void): void;