@adecore/editor-react 0.38.0 → 0.40.0

package/dist/CallHierarchyPanel.js

@@ -1,5 +1,5 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useId, useLayoutEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ChevronDown, ChevronLeft, ChevronRight, X } from 'lucide-react';
@@ -15,6 +15,7 @@ import { basenameOf, relativeTo } from './paths.js';
 import { PathText } from "./PathText.js";
 import { Preview } from "./PeekPanel.js";
 import { SymbolBadge } from "./SymbolPicker.js";
+import { useInputPopup } from './popup-focus.js';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const INDENT = 14;
 const BASE_INDENT = 8;
@@ -376,7 +377,7 @@ function SymbolRow(t0) {
   return t25;
 }
 function Tree(t0) {
-  const $ = _c(30);
+  const $ = _c(22);
   const {
     language,
     view
@@ -426,44 +427,18 @@ function Tree(t0) {
     t4 = $[8];
   }
   useEffect(t3, t4);
+  useInputPopup(language, treeId, activeId);
   let t5;
-  if ($[9] !== activeId || $[10] !== language.editor || $[11] !== treeId) {
-    t5 = () => {
-      language.editor.setInputPopup({
-        controls: treeId,
-        activeDescendant: activeId
-      });
-      return () => language.editor.setInputPopup(null);
-    };
-    $[9] = activeId;
-    $[10] = language.editor;
-    $[11] = treeId;
-    $[12] = t5;
+  if ($[9] !== t) {
+    t5 = t("language.callHierarchy.label");
+    $[9] = t;
+    $[10] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[10];
   }
   let t6;
-  if ($[13] !== activeId || $[14] !== language || $[15] !== treeId) {
-    t6 = [language, treeId, activeId];
-    $[13] = activeId;
-    $[14] = language;
-    $[15] = treeId;
-    $[16] = t6;
-  } else {
-    t6 = $[16];
-  }
-  useLayoutEffect(t5, t6);
-  let t7;
-  if ($[17] !== t) {
-    t7 = t("language.callHierarchy.label");
-    $[17] = t;
-    $[18] = t7;
-  } else {
-    t7 = $[18];
-  }
-  let t8;
-  if ($[19] !== idOf || $[20] !== language || $[21] !== t || $[22] !== view.active || $[23] !== view.direction || $[24] !== view.rows) {
-    t8 = view.rows.map(row_1 => {
+  if ($[11] !== idOf || $[12] !== language || $[13] !== t || $[14] !== view.active || $[15] !== view.direction || $[16] !== view.rows) {
+    t6 = view.rows.map(row_1 => {
       const active = row_1.id === view.active;
       const ref = active ? activeRow : undefined;
       if (row_1.kind === "node") {
@@ -504,33 +479,33 @@ function Tree(t0) {
         })
       }, row_1.id);
     });
-    $[19] = idOf;
-    $[20] = language;
-    $[21] = t;
-    $[22] = view.active;
-    $[23] = view.direction;
-    $[24] = view.rows;
-    $[25] = t8;
+    $[11] = idOf;
+    $[12] = language;
+    $[13] = t;
+    $[14] = view.active;
+    $[15] = view.direction;
+    $[16] = view.rows;
+    $[17] = t6;
   } else {
-    t8 = $[25];
+    t6 = $[17];
   }
-  let t9;
-  if ($[26] !== t7 || $[27] !== t8 || $[28] !== treeId) {
-    t9 = /*#__PURE__*/_jsx("div", {
+  let t7;
+  if ($[18] !== t5 || $[19] !== t6 || $[20] !== treeId) {
+    t7 = /*#__PURE__*/_jsx("div", {
       id: treeId,
       role: "tree",
-      "aria-label": t7,
+      "aria-label": t5,
       className: "w-1/2 shrink-0 overflow-y-auto border-r border-border py-1",
-      children: t8
+      children: t6
     });
-    $[26] = t7;
-    $[27] = t8;
-    $[28] = treeId;
-    $[29] = t9;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = treeId;
+    $[21] = t7;
   } else {
-    t9 = $[29];
+    t7 = $[21];
   }
-  return t9;
+  return t7;
 }
 function StatusText(t0) {
   const $ = _c(15);

package/dist/CodeAuthorsCard.js

@@ -1,5 +1,4 @@
 import { c as _c } from "react/compiler-runtime";
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GitCommitHorizontal, User, Users } from 'lucide-react';
 import { Button, Icon, Popover, Separator, Tooltip, useNow } from '@adecore/ui';

package/dist/CompletionPopup.js

@@ -6,16 +6,11 @@ import { formatShortcut } from '@adecore/ui';
 import { kindLetterOf, kindToneOf, rowWindow } from './completion-model.js';
 import { SourceLine, SymbolSections } from "./HoverSections.js";
 import { PathText } from "./PathText.js";
-import { keepFocusOutOfList } from './popup-focus.js';
+import { keepFocusOutOfList, useInputPopup } from './popup-focus.js';
 import { placeBeside, placePopup } from './popup-placement.js';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TONES = {
-  callable: 'bg-accent-soft text-accent',
-  value: 'bg-status-running/15 text-status-running',
-  type: 'bg-status-idle/15 text-status-idle',
-  other: 'bg-surface-hover text-text-muted'
-};
+import { TONE_CLASSES } from './symbol-picker-model.js';
 /* The label with the characters that match what was typed set apart. */
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function MarkedLabel(t0) {
   const $ = _c(7);
   const {
@@ -91,7 +86,7 @@ const ROW_CHROME = 72;
  * press on a row never takes the focus from the editor, so typing goes on while the list is open.
  */
 export function CompletionPopup(t0) {
-  const $ = _c(78);
+  const $ = _c(70);
   const {
     language,
     view,
@@ -219,95 +214,69 @@ export function CompletionPopup(t0) {
   }
   const optionId = t7;
   const activeId = view.active >= first && view.active < last ? optionId(view.active) : undefined;
+  useInputPopup(language, listId, activeId);
   let t8;
-  if ($[16] !== activeId || $[17] !== language.editor || $[18] !== listId) {
-    t8 = () => {
-      language.editor.setInputPopup({
-        controls: listId,
-        activeDescendant: activeId
-      });
-      return () => language.editor.setInputPopup(null);
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      visibility: "hidden"
     };
-    $[16] = activeId;
-    $[17] = language.editor;
-    $[18] = listId;
-    $[19] = t8;
+    $[16] = t8;
   } else {
-    t8 = $[19];
+    t8 = $[16];
   }
   let t9;
-  if ($[20] !== activeId || $[21] !== language || $[22] !== listId) {
-    t9 = [language, listId, activeId];
-    $[20] = activeId;
-    $[21] = language;
-    $[22] = listId;
-    $[23] = t9;
-  } else {
-    t9 = $[23];
-  }
-  useLayoutEffect(t8, t9);
-  let t10;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = {
-      visibility: "hidden"
-    };
-    $[24] = t10;
+  if ($[17] !== language.editor) {
+    t9 = keepFocusOutOfList(() => language.editor.focus());
+    $[17] = language.editor;
+    $[18] = t9;
   } else {
-    t10 = $[24];
+    t9 = $[18];
   }
+  const t10 = `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`;
   let t11;
-  if ($[25] !== language.editor) {
-    t11 = keepFocusOutOfList(() => language.editor.focus());
-    $[25] = language.editor;
-    $[26] = t11;
-  } else {
-    t11 = $[26];
-  }
-  const t12 = `calc(${Math.max(widest, need)}ch + ${ROW_CHROME}px)`;
-  let t13;
-  if ($[27] !== t12) {
-    t13 = /*#__PURE__*/_jsx("div", {
+  if ($[19] !== t10) {
+    t11 = /*#__PURE__*/_jsx("div", {
       "aria-hidden": true,
       className: "h-0 overflow-hidden font-mono text-code",
       style: {
-        width: t12
+        width: t10
       }
     });
-    $[27] = t12;
-    $[28] = t13;
+    $[19] = t10;
+    $[20] = t11;
   } else {
-    t13 = $[28];
+    t11 = $[20];
   }
-  let t14;
-  let t15;
-  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = {
+  let t12;
+  let t13;
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = {
       maxHeight: ROW_HEIGHT * VISIBLE_ROWS + 8
     };
-    t15 = event_0 => setListTop(event_0.currentTarget.scrollTop);
-    $[29] = t14;
-    $[30] = t15;
+    t13 = event_0 => setListTop(event_0.currentTarget.scrollTop);
+    $[21] = t12;
+    $[22] = t13;
   } else {
-    t14 = $[29];
-    t15 = $[30];
+    t12 = $[21];
+    t13 = $[22];
   }
-  const t16 = first * ROW_HEIGHT;
-  let t17;
-  if ($[31] !== t16) {
-    t17 = /*#__PURE__*/_jsx("div", {
+  const t14 = first * ROW_HEIGHT;
+  let t15;
+  if ($[23] !== t14) {
+    t15 = /*#__PURE__*/_jsx("div", {
       "aria-hidden": true,
       style: {
-        height: t16
+        height: t14
       }
     });
-    $[31] = t16;
-    $[32] = t17;
+    $[23] = t14;
+    $[24] = t15;
   } else {
-    t17 = $[32];
+    t15 = $[24];
   }
-  let t18;
-  if ($[33] !== first || $[34] !== language.completion || $[35] !== last || $[36] !== optionId || $[37] !== total || $[38] !== view.active || $[39] !== view.rows) {
-    t18 = view.rows.slice(first, last).map((row_0, offset) => {
+  let t16;
+  if ($[25] !== first || $[26] !== language.completion || $[27] !== last || $[28] !== optionId || $[29] !== total || $[30] !== view.active || $[31] !== view.rows) {
+    t16 = view.rows.slice(first, last).map((row_0, offset) => {
       const index_0 = first + offset;
       return /*#__PURE__*/_jsxs("button", {
         id: optionId(index_0),
@@ -322,7 +291,7 @@ export function CompletionPopup(t0) {
         className: "flex h-6 w-full items-center gap-2 overflow-hidden rounded-md px-1.5 text-left text-xs cursor-row",
         onClick: () => void language.completion.accept(false, index_0),
         children: [/*#__PURE__*/_jsx("span", {
-          className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONES[kindToneOf(row_0.kind)]}`,
+          className: `grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs leading-none font-semibold ${TONE_CLASSES[kindToneOf(row_0.kind)]}`,
           children: kindLetterOf(row_0.kind)
         }), /*#__PURE__*/_jsx("span", {
           className: `max-w-full shrink-0 truncate font-mono text-code ${row_0.deprecated ? "line-through" : ""}`,
@@ -339,142 +308,142 @@ export function CompletionPopup(t0) {
         })]
       }, `${index_0}:${row_0.label}`);
     });
-    $[33] = first;
-    $[34] = language.completion;
-    $[35] = last;
-    $[36] = optionId;
-    $[37] = total;
-    $[38] = view.active;
-    $[39] = view.rows;
-    $[40] = t18;
+    $[25] = first;
+    $[26] = language.completion;
+    $[27] = last;
+    $[28] = optionId;
+    $[29] = total;
+    $[30] = view.active;
+    $[31] = view.rows;
+    $[32] = t16;
   } else {
-    t18 = $[40];
+    t16 = $[32];
   }
-  const t19 = (total - last) * ROW_HEIGHT;
-  let t20;
-  if ($[41] !== t19) {
-    t20 = /*#__PURE__*/_jsx("div", {
+  const t17 = (total - last) * ROW_HEIGHT;
+  let t18;
+  if ($[33] !== t17) {
+    t18 = /*#__PURE__*/_jsx("div", {
       "aria-hidden": true,
       style: {
-        height: t19
+        height: t17
       }
     });
-    $[41] = t19;
-    $[42] = t20;
+    $[33] = t17;
+    $[34] = t18;
   } else {
-    t20 = $[42];
+    t18 = $[34];
   }
-  let t21;
-  if ($[43] !== listId || $[44] !== t17 || $[45] !== t18 || $[46] !== t20) {
-    t21 = /*#__PURE__*/_jsxs("div", {
+  let t19;
+  if ($[35] !== listId || $[36] !== t15 || $[37] !== t16 || $[38] !== t18) {
+    t19 = /*#__PURE__*/_jsxs("div", {
       id: listId,
       role: "listbox",
       className: "w-0 min-w-full overflow-y-auto p-1",
-      style: t14,
-      onScroll: t15,
-      children: [t17, t18, t20]
+      style: t12,
+      onScroll: t13,
+      children: [t15, t16, t18]
     });
-    $[43] = listId;
-    $[44] = t17;
-    $[45] = t18;
-    $[46] = t20;
-    $[47] = t21;
+    $[35] = listId;
+    $[36] = t15;
+    $[37] = t16;
+    $[38] = t18;
+    $[39] = t19;
   } else {
-    t21 = $[47];
+    t19 = $[39];
   }
-  let t22;
-  if ($[48] !== t) {
-    t22 = t("language.completion.insert");
-    $[48] = t;
-    $[49] = t22;
+  let t20;
+  if ($[40] !== t) {
+    t20 = t("language.completion.insert");
+    $[40] = t;
+    $[41] = t20;
   } else {
-    t22 = $[49];
+    t20 = $[41];
   }
-  let t23;
-  if ($[50] !== t22) {
-    t23 = /*#__PURE__*/_jsxs("span", {
-      children: ["\u21B5 ", t22]
+  let t21;
+  if ($[42] !== t20) {
+    t21 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21B5 ", t20]
     });
-    $[50] = t22;
-    $[51] = t23;
+    $[42] = t20;
+    $[43] = t21;
   } else {
-    t23 = $[51];
+    t21 = $[43];
   }
-  let t24;
-  if ($[52] !== t) {
-    t24 = t("language.completion.replace");
-    $[52] = t;
-    $[53] = t24;
+  let t22;
+  if ($[44] !== t) {
+    t22 = t("language.completion.replace");
+    $[44] = t;
+    $[45] = t22;
   } else {
-    t24 = $[53];
+    t22 = $[45];
   }
-  let t25;
-  if ($[54] !== t24) {
-    t25 = /*#__PURE__*/_jsxs("span", {
-      children: ["\u21E5 ", t24]
+  let t23;
+  if ($[46] !== t22) {
+    t23 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21E5 ", t22]
     });
-    $[54] = t24;
-    $[55] = t25;
+    $[46] = t22;
+    $[47] = t23;
   } else {
-    t25 = $[55];
+    t23 = $[47];
   }
-  let t26;
-  if ($[56] !== detailsKey || $[57] !== t) {
-    t26 = detailsKey !== null && /*#__PURE__*/_jsxs("span", {
+  let t24;
+  if ($[48] !== detailsKey || $[49] !== t) {
+    t24 = detailsKey !== null && /*#__PURE__*/_jsxs("span", {
       children: [detailsKey, " ", t("language.completion.details")]
     });
-    $[56] = detailsKey;
-    $[57] = t;
-    $[58] = t26;
+    $[48] = detailsKey;
+    $[49] = t;
+    $[50] = t24;
   } else {
-    t26 = $[58];
+    t24 = $[50];
   }
-  let t27;
-  if ($[59] !== view.server) {
-    t27 = /*#__PURE__*/_jsx("span", {
+  let t25;
+  if ($[51] !== view.server) {
+    t25 = /*#__PURE__*/_jsx("span", {
       className: "ml-auto",
       children: view.server
     });
-    $[59] = view.server;
-    $[60] = t27;
+    $[51] = view.server;
+    $[52] = t25;
   } else {
-    t27 = $[60];
+    t25 = $[52];
   }
-  let t28;
-  if ($[61] !== t23 || $[62] !== t25 || $[63] !== t26 || $[64] !== t27) {
-    t28 = /*#__PURE__*/_jsxs("div", {
+  let t26;
+  if ($[53] !== t21 || $[54] !== t23 || $[55] !== t24 || $[56] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
       className: "flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint",
-      children: [t23, t25, t26, t27]
+      children: [t21, t23, t24, t25]
     });
-    $[61] = t23;
-    $[62] = t25;
-    $[63] = t26;
-    $[64] = t27;
-    $[65] = t28;
+    $[53] = t21;
+    $[54] = t23;
+    $[55] = t24;
+    $[56] = t25;
+    $[57] = t26;
   } else {
-    t28 = $[65];
+    t26 = $[57];
   }
-  let t29;
-  if ($[66] !== t11 || $[67] !== t13 || $[68] !== t21 || $[69] !== t28) {
-    t29 = /*#__PURE__*/_jsxs("div", {
+  let t27;
+  if ($[58] !== t11 || $[59] !== t19 || $[60] !== t26 || $[61] !== t9) {
+    t27 = /*#__PURE__*/_jsxs("div", {
       ref: list,
       className: `${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`,
-      style: t10,
+      style: t8,
       onPointerDown: _temp3,
-      ...t11,
-      children: [t13, t21, t28]
+      ...t9,
+      children: [t11, t19, t26]
     });
-    $[66] = t11;
-    $[67] = t13;
-    $[68] = t21;
-    $[69] = t28;
-    $[70] = t29;
+    $[58] = t11;
+    $[59] = t19;
+    $[60] = t26;
+    $[61] = t9;
+    $[62] = t27;
   } else {
-    t29 = $[70];
+    t27 = $[62];
   }
-  let t30;
-  if ($[71] !== view.detailsOpen || $[72] !== view.docs || $[73] !== view.highlightLanguage) {
-    t30 = view.detailsOpen && view.docs !== null && /*#__PURE__*/_jsxs("div", {
+  let t28;
+  if ($[63] !== view.detailsOpen || $[64] !== view.docs || $[65] !== view.highlightLanguage) {
+    t28 = view.detailsOpen && view.docs !== null && /*#__PURE__*/_jsxs("div", {
       ref: docs,
       className: `${CARD} flex w-[360px] flex-col divide-y divide-border overflow-y-auto select-text`,
       style: {
@@ -491,25 +460,25 @@ export function CompletionPopup(t0) {
         text: view.docs.text
       })]
     });
-    $[71] = view.detailsOpen;
-    $[72] = view.docs;
-    $[73] = view.highlightLanguage;
-    $[74] = t30;
+    $[63] = view.detailsOpen;
+    $[64] = view.docs;
+    $[65] = view.highlightLanguage;
+    $[66] = t28;
   } else {
-    t30 = $[74];
+    t28 = $[66];
   }
-  let t31;
-  if ($[75] !== t29 || $[76] !== t30) {
-    t31 = createPortal(/*#__PURE__*/_jsxs(_Fragment, {
-      children: [t29, t30]
+  let t29;
+  if ($[67] !== t27 || $[68] !== t28) {
+    t29 = createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+      children: [t27, t28]
     }), document.body);
-    $[75] = t29;
-    $[76] = t30;
-    $[77] = t31;
+    $[67] = t27;
+    $[68] = t28;
+    $[69] = t29;
   } else {
-    t31 = $[77];
+    t29 = $[69];
   }
-  return t31;
+  return t29;
 }
 function _temp4(event_1) {
   return event_1.preventDefault();

package/dist/DiffView.d.ts

@@ -1,7 +1,7 @@
 import { type Ref } from 'react';
 import type { Editor, EditorEngine, EditorTheme } from '@adecore/editor';
 import { type DiffDocument } from '@adecore/merge';
-import type { DiffSourceTokens } from './diff-syntax.ts';
+import { type DiffSourceTokens } from './diff-syntax.ts';
 import { type DiffLimits } from './diff-expansion.ts';
 export interface DiffViewProps {
     engine: EditorEngine;

package/dist/DiffView.js

@@ -6,6 +6,7 @@ import { diffDisplay, diffSplit } from '@adecore/merge';
 import { wordMarks } from './diff-wordmarks.js';
 import { DiffOverlays } from "./diff-overlays.js";
 import { SplitDiffView } from "./SplitDiffView.js";
+import { repaintOnTokens } from './diff-syntax.js';
 import { LineActionHost, RowHost } from './row-host.js';
 import { DEFAULT_UNFOLD_LIMITS, expandDiff } from './diff-expansion.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -301,35 +302,7 @@ function UnifiedDiffView(t0) {
         });
       };
       refresh();
-      const ownerWindow = element.current?.ownerDocument.defaultView;
-      let pending = false;
-      let stopped = false;
-      let frame;
-      const schedule = () => {
-        if (pending) {
-          return;
-        }
-        pending = true;
-        const paint = () => {
-          pending = false;
-          if (!stopped) {
-            refresh();
-          }
-        };
-        if (ownerWindow?.requestAnimationFrame !== undefined) {
-          frame = ownerWindow.requestAnimationFrame(paint);
-        } else {
-          queueMicrotask(paint);
-        }
-      };
-      const stop_0 = tokens?.subscribe(schedule);
-      return () => {
-        stopped = true;
-        stop_0?.();
-        if (frame !== undefined) {
-          ownerWindow?.cancelAnimationFrame?.(frame);
-        }
-      };
+      return repaintOnTokens(element.current?.ownerDocument.defaultView, tokens, refresh);
     };
     $[40] = engine;
     $[41] = mounted;