@djangocfg/ui-tools 2.1.291 → 2.1.293

package/dist/index.cjs

@@ -23,6 +23,7 @@ var Placeholder = require('@tiptap/extension-placeholder');
 var Mention = require('@tiptap/extension-mention');
 var markdown = require('@tiptap/markdown');
 var lucideReact = require('lucide-react');
+var dom = require('@floating-ui/dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -262,7 +263,7 @@ function OpenapiLoadingFallback() {
 }
 chunkWGEGR3DF_cjs.__name(OpenapiLoadingFallback, "OpenapiLoadingFallback");
 var LazyDocsLayout = createLazyComponent(
-  () => import('./DocsLayout-IKH7BLSU.cjs').then((mod) => ({ default: mod.DocsLayout })),
+  () => import('./DocsLayout-PLWQJBGU.cjs').then((mod) => ({ default: mod.DocsLayout })),
   {
     displayName: "LazyDocsLayout",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(OpenapiLoadingFallback, {})
@@ -417,7 +418,7 @@ function LottiePlayer(props) {
 }
 chunkWGEGR3DF_cjs.__name(LottiePlayer, "LottiePlayer");
 var DocsLayout = React.lazy(
-  () => import('./DocsLayout-IKH7BLSU.cjs').then((mod) => ({ default: mod.DocsLayout }))
+  () => import('./DocsLayout-PLWQJBGU.cjs').then((mod) => ({ default: mod.DocsLayout }))
 );
 var LoadingFallback7 = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "Loading API Playground..." }) }), "LoadingFallback");
 var Playground = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ config }) => {
@@ -1220,6 +1221,38 @@ function createMentionSuggestion(config) {
     render: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
       let component = null;
       let popup = null;
+      let cleanupAutoUpdate = null;
+      let getReferenceRect = null;
+      const buildVirtualElement = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => ({
+        getBoundingClientRect: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+          const rect = getReferenceRect?.();
+          return rect ?? new DOMRect(0, 0, 0, 0);
+        }, "getBoundingClientRect")
+      }), "buildVirtualElement");
+      const updatePosition = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        if (!popup) return;
+        const virtualEl = buildVirtualElement();
+        void dom.computePosition(virtualEl, popup, {
+          placement: "bottom-start",
+          middleware: [
+            dom.offset(4),
+            dom.flip({ fallbackPlacements: ["top-start"] }),
+            dom.shift({ padding: 8 })
+          ]
+        }).then(({ x, y }) => {
+          if (!popup) return;
+          popup.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+        });
+      }, "updatePosition");
+      const teardown = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+        cleanupAutoUpdate?.();
+        cleanupAutoUpdate = null;
+        popup?.remove();
+        popup = null;
+        component?.destroy();
+        component = null;
+        getReferenceRect = null;
+      }, "teardown");
       return {
         onStart: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
           component = new react.ReactRenderer(MentionList, {
@@ -1232,14 +1265,12 @@ function createMentionSuggestion(config) {
             editor: props.editor
           });
           popup = document.createElement("div");
-          popup.style.cssText = "position: absolute; z-index: 99999;";
+          popup.style.cssText = "position: absolute; top: 0; left: 0; z-index: 99999;";
           popup.appendChild(component.element);
-          const rect = props.clientRect?.();
-          if (rect) {
-            popup.style.top = `${rect.bottom + window.scrollY + 4}px`;
-            popup.style.left = `${rect.left + window.scrollX}px`;
-          }
           document.body.appendChild(popup);
+          getReferenceRect = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => props.clientRect?.() ?? null, "getReferenceRect");
+          const virtualEl = buildVirtualElement();
+          cleanupAutoUpdate = dom.autoUpdate(virtualEl, popup, updatePosition);
         }, "onStart"),
         onUpdate: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
           component?.updateProps({
@@ -1248,29 +1279,41 @@ function createMentionSuggestion(config) {
               props.command({ id: item.id, label: item.label });
             }, "command")
           });
-          const rect = props.clientRect?.();
-          if (rect && popup) {
-            popup.style.top = `${rect.bottom + window.scrollY + 4}px`;
-            popup.style.left = `${rect.left + window.scrollX}px`;
-          }
+          getReferenceRect = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => props.clientRect?.() ?? null, "getReferenceRect");
+          updatePosition();
         }, "onUpdate"),
         onKeyDown: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
           if (props.event.key === "Escape") {
-            popup?.remove();
-            component?.destroy();
+            teardown();
             return true;
           }
           return component?.ref?.onKeyDown(props.event) ?? false;
         }, "onKeyDown"),
         onExit: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
-          popup?.remove();
-          component?.destroy();
+          teardown();
         }, "onExit")
       };
     }, "render")
   };
 }
 chunkWGEGR3DF_cjs.__name(createMentionSuggestion, "createMentionSuggestion");
+
+// src/tools/MarkdownEditor/mentionPresets.ts
+var escapeMd = /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((s) => s.replace(/([\\\[\]()_*~`])/g, "\\$1"), "escapeMd");
+var mentionPresets = {
+  /** "@Label" — default, ideal for chat where LLMs read the text. */
+  plainAt: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((({ label, id }) => `@${label || id}`), "plainAt"),
+  /** "Label" — bare label, no @ prefix. */
+  plainLabel: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((({ label, id }) => label || id), "plainLabel"),
+  /** "[@Label](baseUrl/id)" — clickable markdown link. */
+  markdownLink: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((baseUrl) => ({ label, id }) => `[@${escapeMd(label || id)}](${baseUrl}${encodeURIComponent(id)})`, "markdownLink"),
+  /** "@[Label](scheme://kind/id)" — Notion / Linear-style custom URI. */
+  customUri: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((scheme, kind) => ({ label, id }) => `@[${escapeMd(label || id)}](${scheme}://${kind}/${encodeURIComponent(id)})`, "customUri"),
+  /** "<@id>" — Slack-style id-only reference (label dropped — receivers resolve it). */
+  slackStyle: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((({ id }) => `<@${id}>`), "slackStyle"),
+  /** Inline HTML span — for products that consume markdown with raw HTML allowed. */
+  htmlSpan: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((className = "mention") => ({ label, id }) => `<span class="${className}" data-mention-id="${encodeURIComponent(id)}">@${escapeMd(label || id)}</span>`, "htmlSpan")
+};
 function getMarkdown(editor) {
   const storage = editor.storage.markdown;
   if (!storage?.manager) return editor.getText();
@@ -1314,8 +1357,19 @@ function MarkdownEditor({
       markdown.Markdown
     ];
     if (mentions) {
+      const renderMarkdown = mentions.renderMarkdown ?? mentionPresets.plainAt;
       exts.push(
-        Mention__default.default.configure({
+        Mention__default.default.extend({
+          renderMarkdown(node) {
+            const raw = node.attrs;
+            const attrs = {
+              id: raw?.id ?? "",
+              label: raw?.label ?? ""
+            };
+            if (!attrs.id && !attrs.label) return "";
+            return renderMarkdown(attrs);
+          }
+        }).configure({
           HTMLAttributes: { class: "markdown-mention" },
           suggestion: createMentionSuggestion(mentions),
           renderText: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ node }) => `@${node.attrs.label}`, "renderText")
@@ -1823,6 +1877,7 @@ exports.MarkdownEditor = MarkdownEditor;
 exports.OpenapiViewer = OpenapiViewer_default;
 exports.Spinner = Spinner;
 exports.createLazyComponent = createLazyComponent;
+exports.mentionPresets = mentionPresets;
 exports.useEditor = useEditor;
 exports.useEditorContext = useEditorContext;
 exports.useLanguage = useLanguage;