feat(web): add tooltip to composer file mention pill (#1944)

Guilherme Vieira committed 7 months ago

Commit 28cb9db1 parent 7968f271 file · +48 −62Browse files

Unified · Split

apps/web/src/components/ComposerPromptEditor.tsx+48−62

   type ElementNode,
   type LexicalNode,
   type SerializedLexicalNode,
-  TextNode,
-  type EditorConfig,
   type EditorState,
   type NodeKey,
-  type SerializedTextNode,
   type Spread,
 } from "lexical";
 import {
     type: "composer-mention";
     version: 1;
   },
-  SerializedTextNode
+  SerializedLexicalNode
 >;
 type SerializedComposerSkillNode = Spread<
   onRemoveTerminalContext: () => {},
 });
-class ComposerMentionNode extends TextNode {
+function ComposerMentionDecorator(props: { path: string }) {
+  const theme = resolvedThemeFromDocument();
+  const chip = (
+    <span
+      className={COMPOSER_INLINE_CHIP_CLASS_NAME}
+      contentEditable={false}
+      spellCheck={false}
+      data-composer-mention-chip="true"
+    >
+      <img
+        alt=""
+        aria-hidden="true"
+        className={COMPOSER_INLINE_CHIP_ICON_CLASS_NAME}
+        loading="lazy"
+        src={getVscodeIconUrlForEntry(props.path, inferEntryKindFromPath(props.path), theme)}
+      />
+      <span className={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}>{basenameOfPath(props.path)}</span>
+    </span>
+  );
+  return (
+    <Tooltip>
+      <TooltipTrigger render={chip} />
+      <TooltipPopup
+        side="top"
+        className="max-w-[30rem] whitespace-normal leading-tight wrap-anywhere"
+      >
+        {props.path}
+      </TooltipPopup>
+    </Tooltip>
+  );
+}
+class ComposerMentionNode extends DecoratorNode<ReactElement> {
   __path: string;
   static override getType(): string {
   }
   static override importJSON(serializedNode: SerializedComposerMentionNode): ComposerMentionNode {
-    return $createComposerMentionNode(serializedNode.path);
+    return $createComposerMentionNode(serializedNode.path).updateFromJSON(serializedNode);
   }
   constructor(path: string, key?: NodeKey) {
+    super(key);
     const normalizedPath = path.startsWith("@") ? path.slice(1) : path;
-    super(`@${normalizedPath}`, key);
     this.__path = normalizedPath;
   }
     };
   }
-  override createDOM(_config: EditorConfig): HTMLElement {
+  override createDOM(): HTMLElement {
     const dom = document.createElement("span");
-    dom.className = COMPOSER_INLINE_CHIP_CLASS_NAME;
+    dom.className = "inline-flex align-middle leading-none";
-    dom.contentEditable = "false";
-    dom.setAttribute("spellcheck", "false");
-    renderMentionChipDom(dom, this.__path);
     return dom;
   }
-  override updateDOM(
+  override updateDOM(): false {
-    prevNode: ComposerMentionNode,
-    dom: HTMLElement,
-    _config: EditorConfig,
-  ): boolean {
-    dom.contentEditable = "false";
-    if (prevNode.__text !== this.__text || prevNode.__path !== this.__path) {
-      renderMentionChipDom(dom, this.__path);
-    }
-    return false;
-  }
-  override canInsertTextBefore(): false {
     return false;
   }
-  override canInsertTextAfter(): false {
+  override getTextContent(): string {
-    return false;
+    return `@${this.__path}`;
   }
-  override isTextEntity(): true {
+  override isInline(): true {
     return true;
   }
-  override isToken(): true {
+  override decorate(): ReactElement {
-    return true;
+    return <ComposerMentionDecorator path={this.__path} />;
   }
 }
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
-function renderMentionChipDom(container: HTMLElement, pathValue: string): void {
-  container.textContent = "";
-  container.style.setProperty("user-select", "none");
-  container.style.setProperty("-webkit-user-select", "none");
-  const theme = resolvedThemeFromDocument();
-  const icon = document.createElement("img");
-  icon.alt = "";
-  icon.ariaHidden = "true";
-  icon.className = COMPOSER_INLINE_CHIP_ICON_CLASS_NAME;
-  icon.loading = "lazy";
-  icon.src = getVscodeIconUrlForEntry(pathValue, inferEntryKindFromPath(pathValue), theme);
-  const label = document.createElement("span");
-  label.className = COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME;
-  label.textContent = basenameOfPath(pathValue);
-  container.append(icon, label);
-}
 function terminalContextSignature(contexts: ReadonlyArray<TerminalContextDraft>): string {
   return contexts
     .map((context) =>
   }
   if ($isTextNode(node)) {
-    if (node instanceof ComposerMentionNode) {
-      return getAbsoluteOffsetForInlineTokenPoint(node, offset, pointOffset);
-    }
     return offset + Math.min(pointOffset, node.getTextContentSize());
   }
-  if (node instanceof ComposerSkillNode || node instanceof ComposerTerminalContextNode) {
+  if (isComposerInlineTokenNode(node)) {
     return getAbsoluteOffsetForInlineTokenPoint(node, offset, pointOffset);
   }
   }
   if ($isTextNode(node)) {
-    if (node instanceof ComposerMentionNode) {
-      return getExpandedAbsoluteOffsetForInlineTokenPoint(node, offset, pointOffset);
-    }
     return offset + Math.min(pointOffset, node.getTextContentSize());
   }
-  if (node instanceof ComposerSkillNode || node instanceof ComposerTerminalContextNode) {
+  if (isComposerInlineTokenNode(node)) {
     return getExpandedAbsoluteOffsetForInlineTokenPoint(node, offset, pointOffset);
   }
   node: LexicalNode,
   remainingRef: { value: number },
 ): { key: string; offset: number; type: "text" | "element" } | null {
-  if (node instanceof ComposerMentionNode || node instanceof ComposerSkillNode) {
+  if (isComposerInlineTokenNode(node)) {
-    return findSelectionPointForInlineToken(node, remainingRef);
-  }
-  if (node instanceof ComposerTerminalContextNode) {
     return findSelectionPointForInlineToken(node, remainingRef);
   }