gristlabs_grist-core/app/client/widgets/FloatingEditor.ts
George Gevoian ea8a59c5e9 (core) Implement AI Assistant UI V2
Summary:
Implements the latest design of the Formula AI Assistant.

Also switches out brace to the latest build of ace.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3949
2023-07-13 10:30:35 -04:00

198 lines
6.5 KiB
TypeScript

import * as commands from 'app/client/components/commands';
import {GristDoc} from 'app/client/components/GristDoc';
import {detachNode} from 'app/client/lib/dom';
import {FocusLayer} from 'app/client/lib/FocusLayer';
import {makeT} from 'app/client/lib/localization';
import {FLOATING_POPUP_MAX_WIDTH_PX, FloatingPopup} from 'app/client/ui/FloatingPopup';
import {theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {Disposable, dom, Holder, IDisposableOwner, IDomArgs,
makeTestId, MultiHolder, Observable, styled} from 'grainjs';
const t = makeT('FloatingEditor');
const testId = makeTestId('test-floating-editor-');
export interface IFloatingOwner extends IDisposableOwner {
detach(): HTMLElement;
attach(content: HTMLElement): Promise<void>|void;
}
export interface FloatingEditorOptions {
gristDoc: GristDoc;
/**
* The element that `placement` should be relative to.
*/
refElem?: Element;
/**
* How to position the editor.
*
* If "overlapping", the editor will be positioned on top of `refElem`, anchored
* to its top-left corner.
*
* If "adjacent", the editor will be positioned to the left or right of `refElem`,
* depending on available space.
*
* If "fixed", the editor will be positioned in the bottom-right corner of the
* viewport.
*
* Defaults to "fixed".
*/
placement?: 'overlapping' | 'adjacent' | 'fixed';
}
export class FloatingEditor extends Disposable {
public active = Observable.create<boolean>(this, false);
private _gristDoc = this._options.gristDoc;
private _placement = this._options.placement ?? 'fixed';
private _refElem = this._options.refElem;
constructor(
private _fieldEditor: IFloatingOwner,
private _options: FloatingEditorOptions
) {
super();
this.autoDispose(commands.createGroup({
detachEditor: this.createPopup.bind(this),
}, this, true));
}
public createPopup() {
const editor = this._fieldEditor;
const popupOwner = Holder.create(editor);
const tempOwner = new MultiHolder();
try {
// Create a layer to grab the focus, when we will move the editor to the popup. Otherwise the focus
// will be moved to the clipboard which can destroy us (as it will be treated as a clickaway). So here
// we are kind of simulating always focused editor (even if it is not in the dom for a brief moment).
FocusLayer.create(tempOwner, { defaultFocusElem: document.activeElement as any});
// Take some data from gristDoc to create a title.
const cursor = this._gristDoc.cursorPosition.get()!;
const vs = this._gristDoc.docModel.viewSections.getRowModel(cursor.sectionId!);
const table = vs.tableId.peek();
const field = vs.viewFields.peek().at(cursor.fieldIndex!)!;
const title = `${table}.${field.label.peek()}`;
let content: HTMLElement;
// Now create the popup. It will be owned by the editor itself.
const popup = FloatingPopup.create(popupOwner, {
content: () => (content = editor.detach()), // this will be called immediately, and will move some dom between
// existing editor and the popup. We need to save it, so we can
// detach it on close.
title: () => title, // We are not reactive yet
closeButton: true, // Show the close button with a hover
closeButtonIcon: 'Minimize',
closeButtonHover: () => t('Collapse Editor'),
onClose: async () => {
const layer = FocusLayer.create(null, { defaultFocusElem: document.activeElement as any});
try {
detachNode(content);
popupOwner.dispose();
await editor.attach(content);
} finally {
layer.dispose();
}
},
minHeight: 550,
initialPosition: this._getInitialPosition(),
args: [testId('popup')]
});
// Set a public flag that we are active.
this.active.set(true);
popup.onDispose(() => {
this.active.set(false);
});
// Show the popup with the editor.
popup.showPopup();
} finally {
// Dispose the focus layer, we only needed it for the time when the dom was moved between parents.
tempOwner.dispose();
}
}
private _getInitialPosition(): [number, number] | undefined {
if (!this._refElem || this._placement === 'fixed') {
return undefined;
}
const refElem = this._refElem as HTMLElement;
const refElemBoundingRect = refElem.getBoundingClientRect();
if (this._placement === 'overlapping') {
// Anchor the floating editor to the top-left corner of the refElement.
return [
refElemBoundingRect.left,
refElemBoundingRect.top,
];
} else {
if (window.innerWidth - refElemBoundingRect.right >= FLOATING_POPUP_MAX_WIDTH_PX) {
// If there's enough space to the right of refElement, position the
// floating editor there.
return [
refElemBoundingRect.right,
refElemBoundingRect.top,
];
} else {
// Otherwise position it to the left of refElement; note that it may still
// overlap if there isn't enough space on this side either.
return [
refElemBoundingRect.left - FLOATING_POPUP_MAX_WIDTH_PX,
refElemBoundingRect.top,
];
}
}
}
}
export function createDetachedIcon(...args: IDomArgs<HTMLDivElement>) {
return cssResizeIconWrapper(
cssSmallIcon('Maximize'),
dom.on('click', (e) => {
e.stopPropagation();
e.preventDefault();
commands.allCommands.detachEditor.run();
}),
dom.on('mousedown', (e) => {
e.preventDefault();
e.stopPropagation();
}),
testId('detach-button'),
...args
);
}
const cssSmallIcon = styled(icon, `
width: 14px;
height: 14px;
`);
const cssResizeIconWrapper = styled('div', `
position: absolute;
right: -2px;
top: -20px;
line-height: 0px;
cursor: pointer;
z-index: 10;
--icon-color: ${theme.cellBg};
background: var(--grist-theme-control-primary-bg, var(--grist-primary-fg));
height: 20px;
width: 21px;
--icon-color: white;
display: flex;
align-items: center;
justify-content: center;
line-height: 0px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
&:hover {
background: var(--grist-theme-control-primary-hover-bg, var(--grist-primary-fg-hover))
}
& > div {
transition: background .05s ease-in-out;
}
`);