@djangocfg/ui-tools 2.1.241 → 2.1.242

package/README.md

@@ -28,7 +28,7 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `@djangocfg/ui-tools` | Heavy tools with lazy loading |
 | `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
 
-## Tools (13)
+## Tools (14)
 
 | Tool | Bundle Size | Description |
 |------|-------------|-------------|
@@ -38,6 +38,7 @@ This package contains heavy components that are loaded lazily to keep your initi
 | `PrettyCode` | ~500KB | Code syntax highlighting (read-only) |
 | `OpenapiViewer` | ~400KB | OpenAPI schema viewer & playground |
 | `JsonForm` | ~300KB | JSON Schema form generator |
+| `MarkdownEditor` | ~200KB | WYSIWYG markdown editor with Tiptap |
 | `LottiePlayer` | ~200KB | Lottie animation player |
 | `AudioPlayer` | ~200KB | Audio player with WaveSurfer.js |
 | `VideoPlayer` | ~150KB | Professional video player with Vidstack |

package/dist/index.cjs

@@ -21,6 +21,12 @@ var remarkGfm = require('remark-gfm');
 var components = require('@djangocfg/ui-core/components');
 var hooks = require('@djangocfg/ui-core/hooks');
 require('@djangocfg/ui-core/styles/palette');
+var react = require('@tiptap/react');
+var StarterKit = require('@tiptap/starter-kit');
+var Placeholder = require('@tiptap/extension-placeholder');
+var Mention = require('@tiptap/extension-mention');
+var markdown = require('@tiptap/markdown');
+var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -45,6 +51,9 @@ function _interopNamespace(e) {
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
 var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
+var Mention__default = /*#__PURE__*/_interopDefault(Mention);
 
 function Spinner({ className }) {
   const t = i18n.useAppT();
@@ -1628,6 +1637,217 @@ function useLanguage(filename) {
   }, [filename]);
 }
 chunkWGEGR3DF_cjs.__name(useLanguage, "useLanguage");
+var MentionList = React3.forwardRef(
+  ({ items, command }, ref) => {
+    const [selectedIndex, setSelectedIndex] = React3.useState(0);
+    React3.useEffect(() => setSelectedIndex(0), [items]);
+    const select = React3.useCallback(
+      (index) => {
+        const item = items[index];
+        if (item) command(item);
+      },
+      [items, command]
+    );
+    React3.useImperativeHandle(ref, () => ({
+      onKeyDown: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((event) => {
+        if (event.key === "ArrowUp") {
+          setSelectedIndex((i) => (i + items.length - 1) % items.length);
+          return true;
+        }
+        if (event.key === "ArrowDown") {
+          setSelectedIndex((i) => (i + 1) % items.length);
+          return true;
+        }
+        if (event.key === "Enter") {
+          select(selectedIndex);
+          return true;
+        }
+        return false;
+      }, "onKeyDown")
+    }));
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "markdown-mention-list", children: items.map((item, i) => {
+      const isSelected = i === selectedIndex;
+      const cls = `markdown-mention-item ${isSelected ? "selected" : ""}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: cls, onClick: () => select(i), children: [
+        item.thumbnail && /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.thumbnail, alt: "", className: "markdown-mention-avatar" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "markdown-mention-info", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "markdown-mention-name", children: item.label }),
+          item.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "markdown-mention-desc", children: item.description })
+        ] })
+      ] }, item.id);
+    }) });
+  }
+);
+MentionList.displayName = "MentionList";
+
+// src/tools/MarkdownEditor/createMentionSuggestion.ts
+function createMentionSuggestion(config) {
+  const { maxItems = 5, trigger = "@" } = config;
+  return {
+    char: trigger,
+    items: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ query }) => {
+      const q = query.toLowerCase();
+      return config.items.filter((item) => item.label.toLowerCase().includes(q)).slice(0, maxItems);
+    }, "items"),
+    render: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+      let component = null;
+      let popup = null;
+      return {
+        onStart: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
+          component = new react.ReactRenderer(MentionList, {
+            props: {
+              items: props.items,
+              command: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((item) => {
+                props.command({ id: item.id, label: item.label });
+              }, "command")
+            },
+            editor: props.editor
+          });
+          popup = document.createElement("div");
+          popup.style.cssText = "position: absolute; 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);
+        }, "onStart"),
+        onUpdate: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
+          component?.updateProps({
+            items: props.items,
+            command: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((item) => {
+              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`;
+          }
+        }, "onUpdate"),
+        onKeyDown: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name((props) => {
+          if (props.event.key === "Escape") {
+            popup?.remove();
+            component?.destroy();
+            return true;
+          }
+          return component?.ref?.onKeyDown(props.event) ?? false;
+        }, "onKeyDown"),
+        onExit: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => {
+          popup?.remove();
+          component?.destroy();
+        }, "onExit")
+      };
+    }, "render")
+  };
+}
+chunkWGEGR3DF_cjs.__name(createMentionSuggestion, "createMentionSuggestion");
+function getMarkdown(editor) {
+  const storage = editor.storage.markdown;
+  if (!storage?.manager) return editor.getText();
+  return storage.manager.serialize(editor.getJSON());
+}
+chunkWGEGR3DF_cjs.__name(getMarkdown, "getMarkdown");
+function extractMentionIds(editor) {
+  const ids = [];
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "mention" && node.attrs.id) {
+      ids.push(node.attrs.id);
+    }
+  });
+  return [...new Set(ids)];
+}
+chunkWGEGR3DF_cjs.__name(extractMentionIds, "extractMentionIds");
+function MarkdownEditor({
+  value,
+  onChange,
+  placeholder = "Write markdown...",
+  minHeight = 120,
+  className = "",
+  disabled = false,
+  showToolbar = true,
+  mentions,
+  onMentionIdsChange
+}) {
+  const isExternalUpdate = React3.useRef(false);
+  const extensions = React3.useMemo(() => {
+    const exts = [
+      StarterKit__default.default.configure({ heading: { levels: [1, 2, 3] } }),
+      Placeholder__default.default.configure({ placeholder }),
+      markdown.Markdown
+    ];
+    if (mentions) {
+      exts.push(
+        Mention__default.default.configure({
+          HTMLAttributes: { class: "markdown-mention" },
+          suggestion: createMentionSuggestion(mentions),
+          renderText: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ node }) => `@${node.attrs.label}`, "renderText")
+        })
+      );
+    }
+    return exts;
+  }, [placeholder, mentions]);
+  const editor = react.useEditor({
+    immediatelyRender: false,
+    editable: !disabled,
+    extensions,
+    content: value,
+    onUpdate: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(({ editor: editor2 }) => {
+      if (isExternalUpdate.current) return;
+      onChange(getMarkdown(editor2));
+      if (onMentionIdsChange) {
+        onMentionIdsChange(extractMentionIds(editor2));
+      }
+    }, "onUpdate"),
+    editorProps: {
+      attributes: {
+        class: "markdown-editor-content focus:outline-none text-sm",
+        style: `min-height: ${minHeight}px`
+      }
+    }
+  });
+  React3.useEffect(() => {
+    if (!editor) return;
+    const current = getMarkdown(editor);
+    if (current !== value) {
+      isExternalUpdate.current = true;
+      editor.commands.setContent(value);
+      isExternalUpdate.current = false;
+    }
+  }, [value, editor]);
+  const wrapperClass = `markdown-editor rounded-md border border-input bg-background ${disabled ? "opacity-60" : ""} ${className}`.trim();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClass, children: [
+    showToolbar && editor && /* @__PURE__ */ jsxRuntime.jsx(MarkdownToolbar, { editor }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(react.EditorContent, { editor }) })
+  ] });
+}
+chunkWGEGR3DF_cjs.__name(MarkdownEditor, "MarkdownEditor");
+function MarkdownToolbar({ editor }) {
+  const items = React3.useMemo(() => [
+    { icon: lucideReact.Bold, title: "Bold", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleBold().run(), "action"), active: editor.isActive("bold") },
+    { icon: lucideReact.Italic, title: "Italic", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleItalic().run(), "action"), active: editor.isActive("italic") },
+    { icon: lucideReact.Strikethrough, title: "Strike", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleStrike().run(), "action"), active: editor.isActive("strike") },
+    { icon: lucideReact.Code, title: "Code", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleCode().run(), "action"), active: editor.isActive("code") },
+    null,
+    { icon: lucideReact.Heading1, title: "H1", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleHeading({ level: 1 }).run(), "action"), active: editor.isActive("heading", { level: 1 }) },
+    { icon: lucideReact.Heading2, title: "H2", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleHeading({ level: 2 }).run(), "action"), active: editor.isActive("heading", { level: 2 }) },
+    { icon: lucideReact.Heading3, title: "H3", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleHeading({ level: 3 }).run(), "action"), active: editor.isActive("heading", { level: 3 }) },
+    null,
+    { icon: lucideReact.List, title: "Bullet list", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleBulletList().run(), "action"), active: editor.isActive("bulletList") },
+    { icon: lucideReact.ListOrdered, title: "Ordered list", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleOrderedList().run(), "action"), active: editor.isActive("orderedList") },
+    { icon: lucideReact.Quote, title: "Quote", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().toggleBlockquote().run(), "action"), active: editor.isActive("blockquote") },
+    { icon: lucideReact.Minus, title: "Divider", action: /* @__PURE__ */ chunkWGEGR3DF_cjs.__name(() => editor.chain().focus().setHorizontalRule().run(), "action"), active: false }
+  ], [editor]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5 px-2 py-1.5 border-b border-border", children: items.map((item, i) => {
+    if (!item) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-border mx-1" }, i);
+    const Icon = item.icon;
+    const btnClass = `markdown-toolbar-btn ${item.active ? "active" : ""}`;
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: item.action, title: item.title, className: btnClass, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { style: { width: 14, height: 14 } }) }, i);
+  }) });
+}
+chunkWGEGR3DF_cjs.__name(MarkdownToolbar, "MarkdownToolbar");
 
 Object.defineProperty(exports, "AudioReactiveCover", {
   enumerable: true,
@@ -2052,6 +2272,7 @@ exports.LazyWrapper = LazyWrapper;
 exports.LoadingFallback = LoadingFallback;
 exports.LottiePlayer = LottiePlayer;
 exports.MapLoadingFallback = MapLoadingFallback;
+exports.MarkdownEditor = MarkdownEditor;
 exports.MarkdownMessage = MarkdownMessage;
 exports.Mermaid = Mermaid_default;
 exports.OpenapiViewer = OpenapiViewer_default;