@powerhousedao/builder-profile 0.0.5 → 0.0.6

package/dist/editors/builder-profile/components/markdown-editor.d.ts

@@ -0,0 +1,12 @@
+export type MarkdownEditorMode = "preview" | "edit" | "live";
+interface MarkdownEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: (value: string) => void;
+    height?: number;
+    label?: string;
+    labelClassName?: string;
+}
+export declare function MarkdownEditor({ value, onChange, onBlur, height, label, labelClassName, }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=markdown-editor.d.ts.map

package/dist/editors/builder-profile/components/markdown-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../../../editors/builder-profile/components/markdown-editor.tsx"],"names":[],"mappings":"AAeA,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7D,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAY,EACZ,KAAiB,EACjB,cAAqD,GACtD,EAAE,mBAAmB,2CA2LrB"}

package/dist/editors/builder-profile/components/markdown-editor.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
+import { useLocalStorage } from "usehooks-ts";
+// Custom preview renderer to make links open in new tabs and ensure proper list rendering
+const previewOptions = {
+    components: {
+        a: ({ ...props }) => (_jsx("a", { ...props, target: "_blank", rel: "noopener noreferrer" })),
+    },
+    rehypePlugins: [rehypeSlug],
+    remarkPlugins: [remarkGfm],
+};
+export function MarkdownEditor({ value, onChange, onBlur, height = 350, label = "Content", labelClassName = "text-sm leading-4 mb-3 font-medium", }) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const [MDEditor, setMDEditor] = useState(null);
+    const [contentValue, setContentValue] = useState(" ");
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const [viewMarkdownMode, setViewMarkdownMode] = useLocalStorage("markdown-editor-view-mode", "live");
+    // Ensure we have a valid mode for the editor
+    const editorMode = viewMarkdownMode || "live";
+    // Load the MDEditor component dynamically
+    useEffect(() => {
+        // Use a more robust dynamic import approach
+        const loadEditor = async () => {
+            try {
+                const module = await import("@uiw/react-md-editor");
+                setMDEditor(() => module.default);
+                setIsLoaded(true);
+                setLoadError(null);
+            }
+            catch (error) {
+                console.error("Failed to load MDEditor:", error);
+                setLoadError(error instanceof Error ? error.message : "Failed to load editor");
+                setIsLoaded(true);
+            }
+        };
+        // Add a small delay to ensure DOM is ready
+        const timer = setTimeout(loadEditor, 0);
+        return () => clearTimeout(timer);
+    }, []);
+    // Update contentValue when value prop changes
+    useEffect(() => {
+        if (isLoaded) {
+            const stringValue = typeof value === "string" ? value : "";
+            const safeValue = stringValue.trim() || " ";
+            setContentValue(safeValue);
+        }
+    }, [value, isLoaded]);
+    useEffect(() => {
+        if (!MDEditor)
+            return;
+        const handleViewButtonClick = () => {
+            const buttonLive = document.querySelector("button[data-name='live']");
+            const buttonEdit = document.querySelector("button[data-name='edit']");
+            const buttonPreview = document.querySelector("button[data-name='preview']");
+            const liveLi = buttonLive?.closest("li");
+            const editLi = buttonEdit?.closest("li");
+            const previewLi = buttonPreview?.closest("li");
+            if (previewLi && previewLi.classList.contains("active")) {
+                setViewMarkdownMode("preview");
+            }
+            if (editLi && editLi.classList.contains("active")) {
+                setViewMarkdownMode("edit");
+            }
+            if (liveLi && liveLi.classList.contains("active")) {
+                setViewMarkdownMode("live");
+            }
+        };
+        document.addEventListener("click", handleViewButtonClick, true);
+        return () => {
+            document.removeEventListener("click", handleViewButtonClick, true);
+        };
+    }, [MDEditor, setViewMarkdownMode]);
+    // Handle content changes
+    const handleContentChange = (newValue) => {
+        if (newValue !== undefined) {
+            const stringValue = typeof newValue === "string" ? newValue : "";
+            // Only replace completely empty strings with a space, preserve all other content
+            const safeValue = stringValue === "" ? " " : stringValue;
+            setContentValue(safeValue);
+            onChange(newValue); // Keep the original value for the parent component
+        }
+    };
+    // Handle content blur
+    const handleContentBlur = (e) => {
+        if (onBlur) {
+            onBlur(e.target.value);
+        }
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsx("style", { children: `
+          .w-md-editor-preview ul {
+            list-style-type: disc !important;
+            padding-left: 2em !important;
+          }
+
+          .w-md-editor-preview ol {
+            list-style-type: decimal !important;
+            padding-left: 2em !important;
+          }
+
+          /* Ensure proper table styling */
+          .w-md-editor-preview table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 1em 0;
+          }
+
+          .w-md-editor-preview th,
+          .w-md-editor-preview td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+          }
+
+          .w-md-editor-preview th {
+            background-color: #f5f5f5;
+          }
+         
+        .w-md-editor-text-pre code, .w-md-editor-text-pre div {
+            font-size: 16px !important;
+            line-height: 24px !important;
+          }
+          .w-md-editor-text-input {
+            font-size: 16px !important;
+            line-height: 24px !important;
+          }
+            
+        ` }), label && _jsx("p", { className: labelClassName, children: label }), !isLoaded && (_jsx("div", { className: "w-full border border-gray-300 rounded-md p-3 bg-white", style: { height: `${height}px` }, children: _jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-500", children: "Loading editor..." }) })), isLoaded && loadError && (_jsx("div", { className: "w-full border border-red-300 rounded-md p-3 bg-red-50", style: { height: `${height}px` }, children: _jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center text-red-600", children: [_jsx("p", { className: "text-sm font-medium mb-2", children: "Failed to load markdown editor" }), _jsx("p", { className: "text-xs text-red-500", children: loadError }), _jsx("textarea", { className: "w-full h-full mt-2 p-2 border border-gray-300 rounded text-sm", placeholder: "Fallback text editor - write your content here...", value: value, onChange: (e) => onChange(e.target.value), onBlur: (e) => onBlur?.(e.target.value) })] }) })), isLoaded && MDEditor && (_jsx("div", { "data-color-mode": "light", className: "w-full", children: _jsx(MDEditor, { height: height, value: contentValue, onChange: handleContentChange, onBlur: handleContentBlur, previewOptions: previewOptions, enableScroll: true, preview: editorMode, textareaProps: {
+                        placeholder: "Write your content here...",
+                    } }) }))] }));
+}

package/dist/editors/builder-profile/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/builder-profile/editor.tsx"],"names":[],"mappings":"AAuCA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAugB7B"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/builder-profile/editor.tsx"],"names":[],"mappings":"AAwCA,MAAM,CAAC,OAAO,UAAU,MAAM,4CAmgB7B"}

package/dist/editors/builder-profile/editor.js

@@ -12,6 +12,7 @@ import { LinksSection } from "./components/LinksSection.js";
 import { ContributorsSection } from "./components/ContributorsSection.js";
 import { ProfilePreview } from "./components/ProfilePreview.js";
 import { ImageUrlInput } from "./components/ImageUrlInput.js";
+import { MarkdownEditor } from "./components/markdown-editor.js";
 const STATUS_OPTIONS = [
     { value: "ACTIVE", label: "Active", color: "bg-emerald-500" },
     { value: "INACTIVE", label: "Inactive", color: "bg-slate-400" },
@@ -242,9 +243,5 @@ export default function Editor() {
                                                     }
                                                 }, children: [_jsx("option", { value: "", disabled: true, children: "Select status..." }), STATUS_OPTIONS.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }), _jsxs("div", { children: [_jsx("label", { className: "field-label", children: "Profile Type" }), _jsxs("div", { className: "type-toggle", children: [_jsx("button", { type: "button", onClick: () => handleTypeChange("INDIVIDUAL"), className: state?.type === "INDIVIDUAL" ? "active" : "", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(User, { size: 16 }), "Individual"] }) }), _jsx("button", { type: "button", onClick: () => handleTypeChange("TEAM"), className: state?.type === "TEAM" ? "active" : "", children: _jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsx(Users, { size: 16 }), "Team"] }) })] }), _jsx("p", { className: "field-hint", children: state?.type === "TEAM"
                                                     ? "Teams can add contributors to their profile"
-                                                    : "Individual profiles represent a single builder" })] })] })] }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center", children: _jsx(FileText, { size: 18, className: "text-emerald-600" }) }), "About"] }), _jsxs("div", { children: [_jsx("label", { className: "field-label", children: "Description" }), _jsx(Textarea, { className: "w-full", defaultValue: state?.description || "", onBlur: (e) => {
-                                            if (e.target.value !== state?.description) {
-                                                handleFieldChange("description", e.target.value);
-                                            }
-                                        }, placeholder: "Describe your expertise, focus areas, and what you bring to the ecosystem...", rows: 4, autoExpand: true }), _jsx("p", { className: "field-hint", children: "A compelling description helps others understand your capabilities" })] })] }), _jsx(SkillsSection, { skills: state?.skils || [], onAddSkill: handleAddSkill, onRemoveSkill: handleRemoveSkill }), _jsx(ScopesSection, { scopes: state?.scopes || [], onAddScope: handleAddScope, onRemoveScope: handleRemoveScope }), _jsx(LinksSection, { links: state?.links || [], onAddLink: handleAddLink, onEditLink: handleEditLink, onRemoveLink: handleRemoveLink }), state?.type === "TEAM" && (_jsx(ContributorsSection, { contributors: state.contributors, onAddContributor: handleAddContributor, onRemoveContributor: handleRemoveContributor })), _jsx(ToastContainer, { position: "bottom-right" })] })] }));
+                                                    : "Individual profiles represent a single builder" })] })] })] }), _jsxs("div", { className: "section-card p-6", children: [_jsxs("h3", { className: "text-lg font-semibold text-slate-900 mb-6 flex items-center gap-2", children: [_jsx("span", { className: "w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center", children: _jsx(FileText, { size: 18, className: "text-emerald-600" }) }), "About"] }), _jsxs("div", { children: [_jsx(MarkdownEditor, { label: "What is the builder profile about?", height: 350, value: state?.description || "", onChange: () => { }, onBlur: (value) => handleFieldChange("description", value) }), _jsx("p", { className: "field-hint", children: "A compelling description helps others understand your capabilities" })] })] }), _jsx(SkillsSection, { skills: state?.skils || [], onAddSkill: handleAddSkill, onRemoveSkill: handleRemoveSkill }), _jsx(ScopesSection, { scopes: state?.scopes || [], onAddScope: handleAddScope, onRemoveScope: handleRemoveScope }), _jsx(LinksSection, { links: state?.links || [], onAddLink: handleAddLink, onEditLink: handleEditLink, onRemoveLink: handleRemoveLink }), state?.type === "TEAM" && (_jsx(ContributorsSection, { contributors: state.contributors, onAddContributor: handleAddContributor, onRemoveContributor: handleRemoveContributor })), _jsx(ToastContainer, { position: "bottom-right" })] })] }));
 }

package/dist/style.css

@@ -8,6 +8,7 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-100: hsl(3 82% 96%);
+    --color-red-300: hsl(6 82% 87%);
     --color-red-500: hsl(5 80% 78%);
     --color-red-600: hsl(4 81% 74%);
     --color-orange-500: hsl(33 99% 70%);
@@ -83,6 +84,7 @@
     --tracking-wider: 0.05em;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
@@ -293,6 +295,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -329,6 +334,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -398,6 +406,9 @@
   .flex-shrink-0 {
     flex-shrink: 0;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -414,6 +425,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .flex-col {
+    flex-direction: column;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -492,6 +506,9 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .rounded-sm {
     border-radius: var(--radius-sm);
   }
@@ -533,6 +550,9 @@
   .border-indigo-100 {
     border-color: var(--color-indigo-100);
   }
+  .border-red-300 {
+    border-color: var(--color-red-300);
+  }
   .border-slate-100 {
     border-color: var(--color-slate-100);
   }
@@ -605,6 +625,9 @@
   .bg-purple-500 {
     background-color: var(--color-purple-500);
   }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -796,6 +819,10 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -863,6 +890,9 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-sky-700 {
     color: var(--color-sky-700);
   }
@@ -923,6 +953,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1304,6 +1338,59 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -1384,6 +1471,19 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@powerhousedao/builder-profile",
   "description": "Builder profile document model",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "license": "AGPL-3.0-only",
   "type": "module",
   "files": [
@@ -66,11 +66,13 @@
     "@powerhousedao/common": "latest",
     "@powerhousedao/design-system": "latest",
     "@powerhousedao/document-engineering": "^1.38.0",
+    "@uiw/react-md-editor": "^4.0.11",
     "document-model": "latest",
     "error": "^10.4.0",
     "graphql": "^16.10.0",
     "graphql-tag": "^2.12.6",
     "lucide-react": "^0.556.0",
+    "rehype-slug": "^6.0.0",
     "zod": "^3.24.2"
   },
   "devDependencies": {