straplight 1.2.0 → 1.2.1

package/dist/_chunks/index-Cii-JcUl.js

@@ -0,0 +1,590 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+const react = require("react");
+const reactRouterDom = require("react-router-dom");
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const icons = require("@strapi/icons");
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "straplight";
+function NavigateCapture() {
+  const navigate = reactRouterDom.useNavigate();
+  react.useEffect(() => {
+    window.__straplight = window.__straplight || {};
+    window.__straplight.navigate = navigate;
+  }, [navigate]);
+  return null;
+}
+const DEFAULTS = {
+  debounceMs: 200,
+  minQueryLength: 1
+};
+function useStraplightSettings() {
+  const [settings, setSettings] = react.useState(DEFAULTS);
+  react.useEffect(() => {
+    const { get } = admin.getFetchClient();
+    get(`/${PLUGIN_ID}/settings`).then(({ data }) => {
+      setSettings({
+        debounceMs: data.settings?.debounceMs ?? DEFAULTS.debounceMs,
+        minQueryLength: data.settings?.minQueryLength ?? DEFAULTS.minQueryLength
+      });
+    }).catch(() => {
+    });
+  }, []);
+  return settings;
+}
+function useStraplight() {
+  const settings = useStraplightSettings();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [query, setQuery] = react.useState("");
+  const [results, setResults] = react.useState([]);
+  const [loading, setLoading] = react.useState(false);
+  const [selectedIndex, setSelectedIndex] = react.useState(0);
+  const debounceRef = react.useRef(null);
+  const requestIdRef = react.useRef(0);
+  react.useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, []);
+  const close = react.useCallback(() => {
+    setIsOpen(false);
+    setQuery("");
+    setResults([]);
+    setSelectedIndex(0);
+    setLoading(false);
+    requestIdRef.current++;
+  }, []);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    const trimmed = query.trim();
+    if (trimmed.length < settings.minQueryLength) {
+      setResults([]);
+      setSelectedIndex(0);
+      setLoading(false);
+      return;
+    }
+    debounceRef.current = setTimeout(async () => {
+      const id = ++requestIdRef.current;
+      setLoading(true);
+      try {
+        const { get } = admin.getFetchClient();
+        const { data } = await get(`/${PLUGIN_ID}/search`, {
+          params: { q: trimmed }
+        });
+        if (id !== requestIdRef.current) return;
+        setResults(data.results || []);
+        setSelectedIndex(0);
+      } catch {
+        if (id !== requestIdRef.current) return;
+        setResults([]);
+      } finally {
+        if (id === requestIdRef.current) {
+          setLoading(false);
+        }
+      }
+    }, settings.debounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, isOpen, settings.debounceMs, settings.minQueryLength]);
+  const navigateToResult = react.useCallback(
+    (result) => {
+      const path = `/content-manager/collection-types/${result.uid}/${result.documentId}`;
+      const nav = window.__straplight?.navigate;
+      if (nav) {
+        nav(path);
+      } else {
+        window.location.href = `/admin${path}`;
+      }
+      close();
+    },
+    [close]
+  );
+  const onKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((i) => i < results.length - 1 ? i + 1 : 0);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((i) => i > 0 ? i - 1 : results.length - 1);
+      } else if (e.key === "Enter" && results.length > 0) {
+        e.preventDefault();
+        navigateToResult(results[selectedIndex]);
+      }
+    },
+    [results, selectedIndex, navigateToResult, close]
+  );
+  return {
+    isOpen,
+    query,
+    setQuery,
+    results,
+    loading,
+    selectedIndex,
+    close,
+    onKeyDown,
+    navigateToResult
+  };
+}
+const OVERLAY_STYLES = `
+#straplight-portal input::placeholder {
+  color: inherit;
+  opacity: 0.6;
+}
+@keyframes straplight-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes straplight-slide-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
+  to { opacity: 1; transform: translateX(-50%); }
+}
+@keyframes straplight-spin {
+  to { transform: rotate(360deg); }
+}
+`;
+function StraplightOverlay() {
+  const {
+    isOpen,
+    query,
+    setQuery,
+    results,
+    loading,
+    selectedIndex,
+    close,
+    onKeyDown,
+    navigateToResult
+  } = useStraplight();
+  const inputRef = react.useRef(null);
+  const listRef = react.useRef(null);
+  react.useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!listRef.current) return;
+    const selected = listRef.current.children[selectedIndex];
+    if (selected) {
+      selected.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+  if (!isOpen) return null;
+  const isMac = typeof navigator !== "undefined" && /mac/i.test(navigator.platform || navigator.userAgent);
+  const modKey = isMac ? "⌘" : "Ctrl";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: OVERLAY_STYLES }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        onClick: close,
+        background: "rgba(0, 0, 0, 0.5)",
+        position: "fixed",
+        zIndex: 99999,
+        animation: "straplight-fade-in 0.15s ease-out",
+        style: {
+          inset: 0,
+          backdropFilter: "blur(4px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        onKeyDown,
+        background: "neutral0",
+        shadow: "filterShadow",
+        borderRadius: "12px",
+        maxHeight: "440px",
+        maxWidth: "calc(100vw - 32px)",
+        overflow: "hidden",
+        position: "fixed",
+        top: "calc(50% - 50px)",
+        left: "50%",
+        width: "580px",
+        zIndex: 1e5,
+        animation: "straplight-slide-in 0.2s ease-out 0.05s both",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Box,
+            {
+              paddingLeft: 4,
+              paddingRight: 4,
+              paddingTop: 3,
+              paddingBottom: 3,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Flex,
+                {
+                  items: "center",
+                  gap: "10px",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Box,
+                      {
+                        display: "contents",
+                        color: "neutral400",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { width: 20, height: 20 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Box,
+                      {
+                        color: "neutral700",
+                        flex: "1",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            ref: inputRef,
+                            type: "text",
+                            value: query,
+                            onChange: (e) => setQuery(e.target.value),
+                            placeholder: "Search content...",
+                            style: {
+                              border: "none",
+                              outline: "none",
+                              fontSize: "16px",
+                              fontFamily: "inherit",
+                              color: "inherit",
+                              backgroundColor: "transparent"
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Box,
+            {
+              flex: "1",
+              overflow: "auto",
+              ref: listRef,
+              padding: results.length > 0 ? 2 : 0,
+              children: [
+                query.trim() && !loading && results.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Box,
+                  {
+                    color: "neutral600",
+                    paddingLeft: 4,
+                    paddingRight: 4,
+                    paddingTop: 8,
+                    paddingBottom: 8,
+                    textAlign: "center",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "No results found" })
+                  }
+                ),
+                results.map((result, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ResultItem,
+                  {
+                    result,
+                    isSelected: index2 === selectedIndex,
+                    onClick: () => navigateToResult(result)
+                  },
+                  `${result.uid}-${result.documentId}`
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Box,
+            {
+              paddingLeft: 4,
+              paddingRight: 4,
+              paddingTop: 3,
+              paddingBottom: 3,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Flex,
+                {
+                  color: "neutral600",
+                  gap: "16px",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontSize: "12px", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "↑↓" }),
+                      " navigate"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontSize: "12px", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "⏎" }),
+                      " open"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontSize: "12px", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: "esc" }),
+                      " close"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { fontSize: "12px", style: { marginLeft: "auto" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(Kbd, { children: [
+                        modKey,
+                        "+K"
+                      ] }),
+                      " toggle"
+                    ] })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function ResultItem({
+  result,
+  isSelected,
+  onClick
+}) {
+  const [hovered, setHovered] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      paddingLeft: 3,
+      paddingRight: 3,
+      paddingTop: 2,
+      paddingBottom: 2,
+      borderRadius: "8px",
+      transition: "background-color 0.1s",
+      cursor: "pointer",
+      background: isSelected || hovered ? "neutral150" : "transparent",
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Flex,
+        {
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Box,
+              {
+                flex: "1",
+                overflow: "hidden",
+                marginRight: 3,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.Flex,
+                  {
+                    alignItems: "baseline",
+                    gap: "8px",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Box,
+                        {
+                          shrink: "0",
+                          minWidth: 0,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Typography,
+                            {
+                              fontWeight: isSelected ? 600 : 400,
+                              style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: result.label
+                            }
+                          )
+                        }
+                      ),
+                      result.fields && result.fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Box,
+                        {
+                          shrink: "1",
+                          minWidth: 0,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            designSystem.Typography,
+                            {
+                              fontSize: "12px",
+                              textColor: "neutral600",
+                              style: {
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: result.fields.map((f) => f.value).join(" · ")
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Box,
+              {
+                color: "neutral600",
+                background: "neutral150",
+                paddingLeft: 2,
+                paddingRight: 2,
+                paddingTop: 1,
+                paddingBottom: 1,
+                borderRadius: "4px",
+                shrink: "0",
+                children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontSize: "11px", children: result.contentType })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Kbd({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      display: "inline-block",
+      borderColor: "neutral200",
+      background: "neutral150",
+      borderRadius: "4px",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "kbd",
+        {
+          style: {
+            display: "inline-block",
+            padding: "1px 5px",
+            fontSize: "11px",
+            fontFamily: "inherit",
+            borderRadius: "4px"
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function resolveIsDark() {
+  const stored = localStorage.getItem("STRAPI_THEME") || "system";
+  if (stored === "dark") return true;
+  if (stored === "light") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function StraplightProvider() {
+  const [isDark, setIsDark] = react.useState(resolveIsDark);
+  react.useEffect(() => {
+    function update() {
+      setIsDark(resolveIsDark());
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", update);
+    window.addEventListener("storage", update);
+    const originalSetItem = localStorage.setItem.bind(localStorage);
+    localStorage.setItem = function(key, value) {
+      originalSetItem(key, value);
+      if (key === "STRAPI_THEME") update();
+    };
+    return () => {
+      mq.removeEventListener("change", update);
+      window.removeEventListener("storage", update);
+      localStorage.setItem = originalSetItem;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { theme: isDark ? designSystem.darkTheme : designSystem.lightTheme, children: /* @__PURE__ */ jsxRuntime.jsx(StraplightOverlay, {}) });
+}
+const index = {
+  register(app) {
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      name: PLUGIN_ID
+    });
+  },
+  bootstrap(app) {
+    app.addSettingsLink("global", {
+      id: `${PLUGIN_ID}-settings`,
+      to: PLUGIN_ID,
+      intlLabel: {
+        id: `${PLUGIN_ID}.settings.link`,
+        defaultMessage: "Straplight"
+      },
+      permissions: [],
+      async Component() {
+        const { SettingsPage } = await Promise.resolve().then(() => require("./Settings-CTQDyLBP.js"));
+        return { default: SettingsPage };
+      }
+    });
+    const contentManager = app.getPlugin("content-manager");
+    contentManager.injectComponent("listView", "actions", {
+      name: "straplight-nav-capture",
+      Component: NavigateCapture
+    });
+    import("react-dom/client").then(({ createRoot }) => {
+      import("react/jsx-runtime").then(({ jsx }) => {
+        const el = document.createElement("div");
+        el.id = "straplight-portal";
+        document.body.appendChild(el);
+        const root = createRoot(el);
+        root.render(jsx(StraplightProvider, {}));
+      });
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-B4KWt_jN.js")) }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+exports.PLUGIN_ID = PLUGIN_ID;
+exports.index = index;

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-CuzgWWKQ.js");
+const index = require("../_chunks/index-Cii-JcUl.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-B2B6CFFk.mjs";
+import { i } from "../_chunks/index-C5h4P4yg.mjs";
 export {
   i as default
 };

package/dist/admin/src/components/StraplightProvider.d.ts

@@ -0,0 +1 @@
+export declare function StraplightProvider(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "straplight",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Spotlight-like search for Strapi admin",
   "license": "MIT",
   "author": "Bartosz Gamza",