@redocly/theme 0.54.0-next.0 → 0.54.0-next.2

package/src/core/constants/search.ts

@@ -37,3 +37,5 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
   [AiSearchError.EmptyResponse]: defaultErrorConfig,
   [AiSearchError.ErrorProcessingResponse]: defaultErrorConfig,
 } as const;
+
+export const SEARCH_DEBOUNCE_TIME_MS = 300;

package/src/core/hooks/__mocks__/index.ts

@@ -25,3 +25,4 @@ export * from '@redocly/theme/core/hooks/search/use-search-dialog';
 export * from '@redocly/theme/core/hooks/use-language-picker';
 export * from '@redocly/theme/core/hooks/__mocks__/use-element-size';
 export * from '@redocly/theme/core/hooks/__mocks__/use-time-ago';
+export * from '@redocly/theme/core/hooks/__mocks__/use-input-key-commands';

package/src/core/hooks/__mocks__/use-input-key-commands.ts

@@ -0,0 +1,3 @@
+export const useInputKeyCommands = jest.fn(() => ({
+  onKeyDown: jest.fn(),
+}));

package/src/core/hooks/index.ts

@@ -35,3 +35,4 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-code-panel';
 export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
 export * from '@redocly/theme/core/hooks/use-time-ago';
+export * from '@redocly/theme/core/hooks/use-input-key-commands';

package/src/core/hooks/menu/use-nested-menu.ts

@@ -37,8 +37,16 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
   });
 
   function scrollIfNeeded(el: Element, centerIfNeeded: boolean = false) {
+    const rect = el.getBoundingClientRect();
+    const isInViewport =
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+    // Only scroll if element is in viewport to prevent page jumping
     // @ts-ignore
-    if (typeof el.scrollIntoViewIfNeeded === 'function') {
+    if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
       // @ts-ignore
       el.scrollIntoViewIfNeeded(centerIfNeeded);
     }

package/src/core/hooks/search/use-recent-searches.ts

@@ -1,49 +1,82 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useSyncExternalStore } from 'react';
 
 import { isBrowser } from '@redocly/theme/core/utils';
 
 const RECENT_SEARCHES_KEY = 'recentSearches';
 const RECENT_SEARCHES_LIMIT = 5;
 
-function getRecentSearches() {
-  if (!isBrowser()) return [];
+const createRecentSearchesStore = () => {
+  const subscribers = new Set<() => void>();
+  let cachedSnapshot: string[];
 
-  const recentSearchesStr = window.localStorage.getItem(RECENT_SEARCHES_KEY);
+  const getSnapshot = (): string[] => {
+    if (!isBrowser()) return [];
 
-  if (!recentSearchesStr) return [];
+    if (cachedSnapshot) return cachedSnapshot;
 
-  return JSON.parse(recentSearchesStr) as string[];
-}
+    try {
+      const stored = localStorage.getItem(RECENT_SEARCHES_KEY);
+      cachedSnapshot = stored ? JSON.parse(stored) : [];
+      return cachedSnapshot;
+    } catch (e) {
+      cachedSnapshot = [];
+      return cachedSnapshot;
+    }
+  };
 
-function updateRecentSearches(value: string, isAdd: boolean) {
-  if (!isBrowser()) return [];
+  const updateItems = (value: string, isAdd: boolean) => {
+    if (!isBrowser()) return;
 
-  const recentSearches = getRecentSearches();
+    const currentItems = getSnapshot();
+    const valueIndex = currentItems.indexOf(value);
 
-  if (value === '') return recentSearches;
+    if (valueIndex !== -1) {
+      currentItems.splice(valueIndex, 1);
+    }
 
-  const valueIndex = recentSearches.indexOf(value);
+    if (isAdd) {
+      currentItems.unshift(value);
+    }
 
-  if (valueIndex !== -1) recentSearches.splice(valueIndex, 1);
-  if (isAdd) recentSearches.unshift(value);
+    const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
 
-  localStorage?.setItem(
-    RECENT_SEARCHES_KEY,
-    JSON.stringify(recentSearches.slice(0, RECENT_SEARCHES_LIMIT)),
-  );
+    localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(limitedItems));
+    cachedSnapshot = limitedItems;
+
+    subscribers.forEach((callback) => callback());
+  };
 
-  return recentSearches;
-}
+  const subscribe = (callback: () => void) => {
+    subscribers.add(callback);
+    return () => subscribers.delete(callback);
+  };
 
-export const useRecentSearches = () => {
-  const [items, setItems] = useState<string[]>(getRecentSearches());
+  return {
+    getSnapshot,
+    subscribe,
+    updateItems,
+  };
+};
+
+const recentSearchesStore = createRecentSearchesStore();
+
+export const useRecentSearches = (): {
+  items: string[];
+  addSearchHistoryItem: (value: string) => void;
+  removeSearchHistoryItem: (value: string) => void;
+} => {
+  const items = useSyncExternalStore(
+    recentSearchesStore.subscribe,
+    recentSearchesStore.getSnapshot,
+    () => [],
+  );
 
   const addSearchHistoryItem = useCallback((value: string) => {
-    setItems(updateRecentSearches(value, true));
+    recentSearchesStore.updateItems(value, true);
   }, []);
 
   const removeSearchHistoryItem = useCallback((value: string) => {
-    setItems(updateRecentSearches(value, false));
+    recentSearchesStore.updateItems(value, false);
   }, []);
 
   return { items, addSearchHistoryItem, removeSearchHistoryItem };

package/src/core/hooks/use-input-key-commands.ts

@@ -0,0 +1,98 @@
+import { useCallback, useMemo } from 'react';
+
+type Action = 'selectAll' | 'escape' | 'clear' | 'enter' | 'paste';
+type ActionHandlers = {
+  [key in `on${Capitalize<Action>}`]?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+type KeyboardCommand = {
+  match: (event: React.KeyboardEvent<HTMLInputElement>) => boolean;
+  execute: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+
+export function useInputKeyCommands(actionHandlers?: ActionHandlers) {
+  // MacOS uses Command key instead of Ctrl
+  const ctrlKey = useMemo(() => (navigator.userAgent.includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
+
+  const isSelectAll = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      return event.key === 'a' && event[ctrlKey];
+    },
+    [ctrlKey],
+  );
+
+  const isPaste = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      return event.key === 'v' && event[ctrlKey];
+    },
+    [ctrlKey],
+  );
+
+  const commands = useMemo<KeyboardCommand[]>(
+    () => [
+      {
+        match: (event) => event.key === 'Enter',
+        execute: (event) => actionHandlers?.onEnter?.(event),
+      },
+      {
+        match: (event) => event.key === 'Escape',
+        execute: (event) => {
+          actionHandlers?.onEscape?.(event);
+
+          if (event.currentTarget?.selectionStart !== event.currentTarget?.selectionEnd) {
+            event.stopPropagation();
+            removeSelection(event);
+          }
+        },
+      },
+      {
+        match: isSelectAll,
+        execute: (event) => actionHandlers?.onSelectAll?.(event),
+      },
+      {
+        match: isPaste,
+        execute: (event) => actionHandlers?.onPaste?.(event),
+      },
+      {
+        match: (event) => {
+          if (!event.currentTarget?.value) return false;
+
+          const selectionLength =
+            (event.currentTarget?.selectionEnd ?? 0) - (event.currentTarget?.selectionStart ?? 0);
+          const isFullValueSelected = event.currentTarget?.value.length === selectionLength;
+          const isModifyAction = isPrintableCharacter(event) || isPaste(event) || isDelete(event);
+
+          return isFullValueSelected && isModifyAction;
+        },
+
+        execute: (event) => actionHandlers?.onClear?.(event),
+      },
+    ],
+    [actionHandlers, isPaste, isSelectAll],
+  );
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      for (const command of commands) {
+        if (command.match(event)) {
+          command.execute(event);
+        }
+      }
+    },
+    [commands],
+  );
+
+  return { onKeyDown };
+}
+
+function removeSelection(event: React.KeyboardEvent<HTMLInputElement>) {
+  const selectionEnd = event.currentTarget.selectionEnd ?? 0;
+  event.currentTarget.setSelectionRange(selectionEnd, selectionEnd);
+}
+
+function isPrintableCharacter(event: React.KeyboardEvent<HTMLInputElement>) {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
+}
+
+function isDelete(event: React.KeyboardEvent<HTMLInputElement>) {
+  return event.key === 'Backspace' || event.key === 'Delete';
+}

package/src/markdoc/tags/img.ts

@@ -38,6 +38,9 @@ export const img: MarkdocSchemaWrapper = {
       style: {
         type: [Object, String],
       },
+      lightboxStyle: {
+        type: [Object, String],
+      },
     },
     validate: (node) => {
       if (!node.attributes.src && !node.attributes.srcSet) {