@adecore/editor-react 0.42.0 → 0.44.0

package/dist/PickPopup.js

@@ -4,65 +4,164 @@ import { createPortal } from 'react-dom';
 import { PathText } from "./PathText.js";
 import { keepFocusOutOfList, useInputPopup } from './popup-focus.js';
 import { placePopup } from './popup-placement.js';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CARD = 'fixed top-0 left-0 z-(--z-popup) flex w-[420px] flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)';
+/* The label with the part a query matched marked, whatever the case. */
+function MatchedLabel(t0) {
+  const $ = _c(18);
+  const {
+    label,
+    query
+  } = t0;
+  let start;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== label || $[1] !== query) {
+    t4 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      start = query === null || query === "" ? -1 : label.toLowerCase().indexOf(query.toLowerCase());
+      if (query === null || start < 0) {
+        t4 = label;
+        break bb0;
+      }
+      t3 = label.slice(0, start);
+      t1 = "bg-transparent font-semibold text-accent";
+      t2 = label.slice(start, start + query.length);
+    }
+    $[0] = label;
+    $[1] = query;
+    $[2] = start;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    start = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+    t4 = $[6];
+  }
+  if (t4 !== Symbol.for("react.early_return_sentinel")) {
+    return t4;
+  }
+  let t5;
+  if ($[7] !== t1 || $[8] !== t2) {
+    t5 = /*#__PURE__*/_jsx("mark", {
+      className: t1,
+      children: t2
+    });
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== label || $[11] !== query.length || $[12] !== start) {
+    t6 = label.slice(start + query.length);
+    $[10] = label;
+    $[11] = query.length;
+    $[12] = start;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== t3 || $[15] !== t5 || $[16] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t3, t5, t6]
+    });
+    $[14] = t3;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  return t7;
+}
 function PreviewLines(t0) {
-  const $ = _c(13);
+  const $ = _c(17);
   const {
     preview
   } = t0;
+  if (preview.kind === "text") {
+    let t1;
+    if ($[0] !== preview.added) {
+      t1 = preview.added.map(_temp);
+      $[0] = preview.added;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== t1) {
+      t2 = /*#__PURE__*/_jsx("div", {
+        className: "max-h-48 overflow-auto border-t border-border p-2 font-mono text-code whitespace-pre",
+        children: t1
+      });
+      $[2] = t1;
+      $[3] = t2;
+    } else {
+      t2 = $[3];
+    }
+    return t2;
+  }
   let t1;
-  if ($[0] !== preview.removed) {
-    t1 = preview.removed.map(_temp);
-    $[0] = preview.removed;
-    $[1] = t1;
+  if ($[4] !== preview.removed) {
+    t1 = preview.removed.map(_temp2);
+    $[4] = preview.removed;
+    $[5] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[5];
   }
   let t2;
-  if ($[2] !== preview.added) {
-    t2 = preview.added.map(_temp2);
-    $[2] = preview.added;
-    $[3] = t2;
+  if ($[6] !== preview.added) {
+    t2 = preview.added.map(_temp3);
+    $[6] = preview.added;
+    $[7] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[7];
   }
   let t3;
-  if ($[4] !== preview.note) {
+  if ($[8] !== preview.note) {
     t3 = preview.note !== null && /*#__PURE__*/_jsx("div", {
       className: "px-1.5 font-sans text-xs text-text-muted",
       children: preview.note
     });
-    $[4] = preview.note;
-    $[5] = t3;
+    $[8] = preview.note;
+    $[9] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[9];
   }
   let t4;
-  if ($[6] !== preview.refusal) {
+  if ($[10] !== preview.refusal) {
     t4 = preview.refusal !== undefined && /*#__PURE__*/_jsx("div", {
       role: "alert",
       className: "px-1.5 py-0.5 font-sans text-xs text-status-error",
       children: preview.refusal
     });
-    $[6] = preview.refusal;
-    $[7] = t4;
+    $[10] = preview.refusal;
+    $[11] = t4;
   } else {
-    t4 = $[7];
+    t4 = $[11];
   }
   let t5;
-  if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
+  if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
     t5 = /*#__PURE__*/_jsxs("div", {
       className: "flex flex-col gap-px border-t border-border p-1 font-mono text-code",
       children: [t1, t2, t3, t4]
     });
-    $[8] = t1;
-    $[9] = t2;
-    $[10] = t3;
-    $[11] = t4;
-    $[12] = t5;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[16];
   }
   return t5;
 }
@@ -70,7 +169,7 @@ function PreviewLines(t0) {
  * The list of an editor's pick feature under the character it belongs to. A press on a row never takes
  * the focus from the editor, so the keys keep going to it while the list is open.
  */
-function _temp2(line_0, index_0) {
+function _temp3(line_1, index_1) {
   return /*#__PURE__*/_jsxs("div", {
     className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre",
     children: [/*#__PURE__*/_jsx("span", {
@@ -78,11 +177,11 @@ function _temp2(line_0, index_0) {
       children: "+"
     }), /*#__PURE__*/_jsx("span", {
       className: "min-w-0 truncate",
-      children: line_0
+      children: line_1
     })]
-  }, `+${index_0}`);
+  }, `+${index_1}`);
 }
-function _temp(line, index) {
+function _temp2(line_0, index_0) {
   return /*#__PURE__*/_jsxs("div", {
     className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre",
     children: [/*#__PURE__*/_jsx("span", {
@@ -90,12 +189,17 @@ function _temp(line, index) {
       children: "\u2212"
     }), /*#__PURE__*/_jsx("span", {
       className: "min-w-0 truncate",
-      children: line
+      children: line_0
     })]
-  }, `-${index}`);
+  }, `-${index_0}`);
+}
+function _temp(line, index) {
+  return /*#__PURE__*/_jsx("div", {
+    children: line === "" ? " " : line
+  }, index);
 }
 export function PickPopup(t0) {
-  const $ = _c(31);
+  const $ = _c(37);
   const {
     language,
     view,
@@ -175,117 +279,154 @@ export function PickPopup(t0) {
     t4 = $[10];
   }
   const activeId = t4;
-  useInputPopup(language, listId, activeId);
   let t5;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
-      visibility: "hidden"
-    };
-    $[11] = t5;
+  if ($[11] !== view.groups) {
+    t5 = view.groups.some(_temp5);
+    $[11] = view.groups;
+    $[12] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[12];
   }
+  const mnemonics = t5;
+  useInputPopup(language, listId, activeId);
   let t6;
-  if ($[12] !== language) {
-    t6 = keepFocusOutOfList(() => language.editor.focus());
-    $[12] = language;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      visibility: "hidden"
+    };
     $[13] = t6;
   } else {
     t6 = $[13];
   }
   let t7;
-  if ($[14] !== view.title) {
-    t7 = view.title !== null && /*#__PURE__*/_jsx("div", {
-      className: "border-b border-border px-3 py-1.5 text-xs text-text-muted",
-      children: view.title
-    });
-    $[14] = view.title;
+  if ($[14] !== language) {
+    t7 = keepFocusOutOfList(() => language.editor.focus());
+    $[14] = language;
     $[15] = t7;
   } else {
     t7 = $[15];
   }
   let t8;
-  if ($[16] !== language || $[17] !== optionIds || $[18] !== view.active || $[19] !== view.groups) {
-    t8 = view.groups.map((group_0, groupIndex) => /*#__PURE__*/_jsxs("div", {
+  if ($[16] !== view.query || $[17] !== view.title) {
+    t8 = (view.title !== null || view.query !== null) && /*#__PURE__*/_jsxs("div", {
+      className: "flex items-baseline gap-2 border-b border-border px-3 py-1.5 text-xs text-text-muted",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "min-w-0 truncate",
+        children: view.title
+      }), view.query !== null && view.query !== "" && /*#__PURE__*/_jsx("span", {
+        className: "ml-auto shrink-0 font-mono text-text",
+        children: view.query
+      })]
+    });
+    $[16] = view.query;
+    $[17] = view.title;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== language || $[20] !== mnemonics || $[21] !== optionIds || $[22] !== view.active || $[23] !== view.chosen || $[24] !== view.groups || $[25] !== view.query) {
+    t9 = view.groups.map((group_1, groupIndex) => /*#__PURE__*/_jsxs("div", {
       role: "group",
       className: "flex flex-col",
-      children: [group_0.title !== null && /*#__PURE__*/_jsx("div", {
+      children: [group_1.title !== null && /*#__PURE__*/_jsx("div", {
         className: "px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint",
-        children: group_0.title
-      }), group_0.rows.map(row_0 => /*#__PURE__*/_jsxs("button", {
-        id: optionIds.get(row_0.id),
-        ref: row_0.id === view.active ? activeRow : undefined,
+        children: group_1.title
+      }), group_1.rows.map(row_1 => /*#__PURE__*/_jsxs("button", {
+        id: optionIds.get(row_1.id),
+        ref: row_1.id === view.active ? activeRow : undefined,
         type: "button",
         role: "option",
         tabIndex: -1,
-        "aria-selected": row_0.id === view.active,
-        "data-active": row_0.id === view.active,
-        className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row",
-        onClick: () => language.pick.choose(row_0.id),
-        children: [/*#__PURE__*/_jsx("span", {
-          className: row_0.path ? "shrink-0" : "min-w-0 truncate",
-          children: row_0.label
-        }), row_0.path ? /*#__PURE__*/_jsx(PathText, {
-          path: row_0.detail,
+        "aria-selected": row_1.id === view.active || view.chosen.includes(row_1.id),
+        "aria-keyshortcuts": row_1.mnemonic,
+        "data-active": row_1.id === view.active,
+        "data-chosen": view.chosen.includes(row_1.id),
+        className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row data-[chosen=true]:bg-accent/15",
+        onClick: event_0 => language.pick.choose(row_1.id, {
+          toggle: event_0.metaKey || event_0.ctrlKey,
+          range: event_0.shiftKey
+        }),
+        children: [mnemonics && /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          className: "w-3 shrink-0 text-center font-mono text-text-faint",
+          children: row_1.mnemonic
+        }), /*#__PURE__*/_jsx("span", {
+          className: row_1.path ? "shrink-0" : "min-w-0 truncate",
+          children: /*#__PURE__*/_jsx(MatchedLabel, {
+            label: row_1.label,
+            query: view.query
+          })
+        }), row_1.path ? /*#__PURE__*/_jsx(PathText, {
+          path: row_1.detail,
           className: "ml-auto font-mono text-text-faint"
         }) : /*#__PURE__*/_jsx("span", {
           className: "ml-auto shrink-0 font-mono text-text-faint",
-          children: row_0.id === view.active && row_0.detail === "" ? "\u21B5" : row_0.detail
+          children: row_1.id === view.active && row_1.detail === "" ? "\u21B5" : row_1.detail
         })]
-      }, row_0.id))]
-    }, group_0.title ?? groupIndex));
-    $[16] = language;
-    $[17] = optionIds;
-    $[18] = view.active;
-    $[19] = view.groups;
-    $[20] = t8;
+      }, row_1.id))]
+    }, group_1.title ?? groupIndex));
+    $[19] = language;
+    $[20] = mnemonics;
+    $[21] = optionIds;
+    $[22] = view.active;
+    $[23] = view.chosen;
+    $[24] = view.groups;
+    $[25] = view.query;
+    $[26] = t9;
   } else {
-    t8 = $[20];
+    t9 = $[26];
   }
-  let t9;
-  if ($[21] !== listId || $[22] !== t8) {
-    t9 = /*#__PURE__*/_jsx("div", {
+  let t10;
+  if ($[27] !== listId || $[28] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
       id: listId,
       role: "listbox",
       className: "min-h-0 flex-1 overflow-y-auto p-1",
-      children: t8
+      children: t9
     });
-    $[21] = listId;
-    $[22] = t8;
-    $[23] = t9;
+    $[27] = listId;
+    $[28] = t9;
+    $[29] = t10;
   } else {
-    t9 = $[23];
+    t10 = $[29];
   }
-  let t10;
-  if ($[24] !== view.preview) {
-    t10 = view.preview !== null && /*#__PURE__*/_jsx(PreviewLines, {
+  let t11;
+  if ($[30] !== view.preview) {
+    t11 = view.preview !== null && /*#__PURE__*/_jsx(PreviewLines, {
       preview: view.preview
     });
-    $[24] = view.preview;
-    $[25] = t10;
+    $[30] = view.preview;
+    $[31] = t11;
   } else {
-    t10 = $[25];
+    t11 = $[31];
   }
-  let t11;
-  if ($[26] !== t10 || $[27] !== t6 || $[28] !== t7 || $[29] !== t9) {
-    t11 = createPortal(/*#__PURE__*/_jsxs("div", {
+  let t12;
+  if ($[32] !== t10 || $[33] !== t11 || $[34] !== t7 || $[35] !== t8) {
+    t12 = createPortal(/*#__PURE__*/_jsxs("div", {
       ref: card,
       className: CARD,
-      style: t5,
-      onPointerDown: _temp3,
-      ...t6,
-      children: [t7, t9, t10]
+      style: t6,
+      onPointerDown: _temp6,
+      ...t7,
+      children: [t8, t10, t11]
     }), document.body);
-    $[26] = t10;
-    $[27] = t6;
-    $[28] = t7;
-    $[29] = t9;
-    $[30] = t11;
+    $[32] = t10;
+    $[33] = t11;
+    $[34] = t7;
+    $[35] = t8;
+    $[36] = t12;
   } else {
-    t11 = $[30];
+    t12 = $[36];
   }
-  return t11;
+  return t12;
 }
-function _temp3(event) {
+function _temp6(event) {
   return event.preventDefault();
+}
+function _temp5(group_0) {
+  return group_0.rows.some(_temp4);
+}
+function _temp4(row_0) {
+  return row_0.mnemonic !== undefined;
 }

package/dist/WrapCard.d.ts

@@ -0,0 +1,8 @@
+import type { EditorRect } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { WrapView } from './popups.ts';
+export declare function WrapCard({ language, view, rect }: {
+    language: EditorLanguage;
+    view: WrapView;
+    rect: EditorRect;
+}): import("react").JSX.Element;

package/dist/WrapCard.js

@@ -0,0 +1,172 @@
+import { c as _c } from "react/compiler-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Input } from '@adecore/ui';
+import { AnchoredPopup } from "./AnchoredPopup.js";
+/* The field for the abbreviation a selection is wrapped in: Enter wraps, Escape or leaving the field cancels. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function WrapCard(t0) {
+  const $ = _c(30);
+  const {
+    language,
+    view,
+    rect
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const input = useRef(null);
+  const [value, setValue] = useState("");
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      input.current?.focus();
+    };
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  useLayoutEffect(t1, t2);
+  let t3;
+  if ($[2] !== language.editor || $[3] !== language.markup || $[4] !== value) {
+    t3 = function onKeyDown(event) {
+      if (event.nativeEvent.isComposing) {
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        language.markup.cancelWrap();
+        language.editor.focus();
+      } else {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
+          if (value.trim() !== "") {
+            language.markup.submitWrap(value);
+          }
+        }
+      }
+    };
+    $[2] = language.editor;
+    $[3] = language.markup;
+    $[4] = value;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const onKeyDown = t3;
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      prefer: "above"
+    };
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== t) {
+    t5 = t("language.markup.wrap");
+    $[7] = t;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const t6 = view.error !== null;
+  let t7;
+  if ($[9] !== t) {
+    t7 = t("language.markup.placeholder");
+    $[9] = t;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = event_0 => setValue(event_0.target.value);
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  let t9;
+  if ($[12] !== language.markup) {
+    t9 = () => language.markup.cancelWrap();
+    $[12] = language.markup;
+    $[13] = t9;
+  } else {
+    t9 = $[13];
+  }
+  let t10;
+  if ($[14] !== onKeyDown || $[15] !== t5 || $[16] !== t6 || $[17] !== t7 || $[18] !== t9 || $[19] !== value) {
+    t10 = /*#__PURE__*/_jsx(Input, {
+      ref: input,
+      size: "sm",
+      mono: true,
+      value: value,
+      spellCheck: false,
+      autoComplete: "off",
+      "aria-label": t5,
+      "aria-invalid": t6,
+      placeholder: t7,
+      onChange: t8,
+      onKeyDown: onKeyDown,
+      onBlur: t9
+    });
+    $[14] = onKeyDown;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t9;
+    $[19] = value;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== t || $[22] !== view.error) {
+    t11 = view.error !== null ? /*#__PURE__*/_jsx("div", {
+      role: "alert",
+      className: "text-xs text-status-error",
+      children: view.error
+    }) : /*#__PURE__*/_jsxs("div", {
+      className: "text-xs text-text-muted",
+      children: ["\u21B5 ", t("language.markup.apply")]
+    });
+    $[21] = t;
+    $[22] = view.error;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] !== t10 || $[25] !== t11) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      className: "flex w-[280px] flex-col gap-1.5 p-2",
+      children: [t10, t11]
+    });
+    $[24] = t10;
+    $[25] = t11;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  let t13;
+  if ($[27] !== rect || $[28] !== t12) {
+    t13 = /*#__PURE__*/_jsx(AnchoredPopup, {
+      rect: rect,
+      placement: t4,
+      children: t12
+    });
+    $[27] = rect;
+    $[28] = t12;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  return t13;
+}

package/dist/call-hierarchy-model.d.ts

@@ -1,5 +1,6 @@
-import type { CallHierarchyIncomingCall, CallHierarchyItem, CallHierarchyOutgoingCall, Range } from '@adecore/lsp';
-export type CallDirection = 'incoming' | 'outgoing';
+import type { CallHierarchyIncomingCall, CallHierarchyItem, CallHierarchyOutgoingCall, Range, TypeHierarchyItem } from '@adecore/lsp';
+export type CallDirection = 'incoming' | 'outgoing' | 'supertypes' | 'subtypes';
+export declare function isTypeDirection(direction: CallDirection): direction is 'supertypes' | 'subtypes';
 export declare const CALL_LEVEL_LIMIT = 50;
 export type CallLoad = 'idle' | 'loading' | 'loaded' | 'failed';
 export interface CallNode {
@@ -44,6 +45,7 @@ export declare function statusIdOf(parent: string): string;
 export declare function moreIdOf(parent: string): string;
 export declare function rootsOf(items: readonly CallHierarchyItem[]): CallNode[];
 export declare function childrenOf(direction: CallDirection, parent: CallNode, calls: readonly (CallHierarchyIncomingCall | CallHierarchyOutgoingCall)[]): CallNode[];
+export declare function typeChildrenOf(parent: CallNode, items: readonly TypeHierarchyItem[]): CallNode[];
 export declare function rowsOf(nodes: ReadonlyMap<string, CallNode>, roots: readonly string[]): CallRow[];
 export declare function stepsOf(rows: readonly CallRow[]): CallRow[];
 export declare function targetOf(node: CallNode, site?: number): {

package/dist/call-hierarchy-model.js

@@ -1,3 +1,7 @@
+/* Whether a direction walks a type hierarchy and not the calls. */
+export function isTypeDirection(direction) {
+  return direction === 'supertypes' || direction === 'subtypes';
+}
 /* The most calls of one level that are drawn at once; the rest wait behind a row that shows more. */
 export const CALL_LEVEL_LIMIT = 50;
 /* The id of the status line under a node. */
@@ -47,6 +51,22 @@ export function childrenOf(direction, parent, calls) {
     shown: 0
   }));
 }
+/* The children of a node made from the types a server returned; a type has no call sites, so a row goes to the type itself. */
+export function typeChildrenOf(parent, items) {
+  return items.map((item, index) => ({
+    id: `${parent.id}.${index}`,
+    parent: parent.id,
+    level: parent.level + 1,
+    item,
+    sites: [],
+    siteUri: null,
+    expanded: false,
+    load: 'idle',
+    error: null,
+    children: [],
+    shown: 0
+  }));
+}
 /* The lines the tree draws: every root, and under an expanded node its status, its calls and the row that shows more. */
 export function rowsOf(nodes, roots) {
   const rows = [];