@dalgoridim/headless-cms 0.1.0 → 0.2.1

package/dist/client/index.cjs

@@ -1,13 +1,11 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -35,14 +33,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/client/index.ts
@@ -52,22 +42,19 @@ __export(client_exports, {
   CmsAuthProvider: () => CmsAuthProvider,
   ContentEditSpan: () => ContentEditSpan,
   EditableImage: () => EditableImage,
-  MarkdownEditor: () => MarkdownEditor,
   PageProvider: () => PageProvider,
-  ProjectContentEditor: () => ProjectContentEditor,
-  cn: () => cn,
   useCmsAuth: () => useCmsAuth,
+  useMarkdownEditor: () => useMarkdownEditor,
   usePageContext: () => usePageContext
 });
 module.exports = __toCommonJS(client_exports);
 
 // src/client/PageProvider.tsx
 var import_react = require("react");
-var import_sonner = require("sonner");
 var import_jsx_runtime = require("react/jsx-runtime");
 var defaultNotifier = {
-  success: (m) => import_sonner.toast.success(m),
-  error: (m) => import_sonner.toast.error(m)
+  success: (m) => console.info(`[cms] ${m}`),
+  error: (m) => console.error(`[cms] ${m}`)
 };
 var PageContext = (0, import_react.createContext)(void 0);
 var dirtyKey = (collection, sectionKey) => `${collection}:${sectionKey}`;
@@ -316,99 +303,8 @@ function CmsAuthProvider({
 
 // src/client/ContentEditSpan.tsx
 var import_react3 = require("react");
-
-// src/client/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
-// src/client/ContentEditSpan.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var PATTERNS = [
-  { regex: /^\*\*(.+?)\*\*/, mark: "bold" },
-  { regex: /^\*(.+?)\*/, mark: "italic" },
-  { regex: /^~~br~~/, mark: "break" },
-  { regex: /^~~(.+?)~~/, mark: "strike" },
-  { regex: /^\^\^(.+?)\^\^/, mark: "primary" },
-  { regex: /^__(.+?)__/, mark: "underline" },
-  {
-    regex: /^\[(.+?)\]\((https?:\/\/[^\s)]+)\)/,
-    mark: "link",
-    isLink: true
-  }
-];
-function parseSpecialString(input) {
-  const out = [];
-  let text = input;
-  while (text.length) {
-    let matched = false;
-    for (const p of PATTERNS) {
-      const m = p.regex.exec(text);
-      if (!m) continue;
-      matched = true;
-      if (p.mark === "break") {
-        out.push({ text: "\n", break: true });
-      } else if ("isLink" in p) {
-        out.push({ text: m[1], link: m[2] });
-      } else {
-        const inner = parseSpecialString(m[1]);
-        inner.forEach(
-          (n) => n[p.mark] = true
-        );
-        out.push(...inner);
-      }
-      text = text.slice(m[0].length);
-      break;
-    }
-    if (!matched) {
-      out.push({ text: text[0] });
-      text = text.slice(1);
-    }
-  }
-  return out;
-}
-function RenderStatic({
-  raw,
-  as: Component = "span",
-  className
-}) {
-  const nodes = parseSpecialString(raw);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: nodes.map((l, i) => {
-    if (l.break) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}, i);
-    let el = l.text;
-    if (l.bold) el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: el });
-    if (l.italic) el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("em", { children: el });
-    if (l.strike) el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("s", { children: el });
-    if (l.primary || l.underline) {
-      el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "span",
-        {
-          style: {
-            color: l.primary ? "var(--color-primary)" : void 0,
-            textDecoration: l.underline ? "underline" : void 0
-          },
-          children: el
-        }
-      );
-    }
-    if (l.link) {
-      el = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "a",
-        {
-          href: l.link,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "inline hover:underline",
-          children: el
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: el }, i);
-  }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { className, children: content });
-}
+var defaultRenderValue = (raw) => raw;
 function getNestedValue(obj, path) {
   const keys = path.split(".");
   let current = obj;
@@ -420,20 +316,22 @@ function getNestedValue(obj, path) {
   return current;
 }
 function ContentEditSpan({
-  collection = "portfolio",
+  collection,
   sectionKey,
   fieldKey,
   className,
   children,
-  as = "span"
+  as = "span",
+  renderValue = defaultRenderValue
 }) {
   var _a, _b;
   const { sections, editField } = usePageContext();
   const { isEditing } = useCmsAuth();
   const section = (_a = sections[collection]) == null ? void 0 : _a[sectionKey];
   const raw = (_b = getNestedValue(section, fieldKey)) != null ? _b : typeof children === "string" ? children : "";
+  const Component = as;
   if (!isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderStatic, { raw, as, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { className, children: renderValue(raw) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     EditableContentSpan,
@@ -444,18 +342,20 @@ function ContentEditSpan({
       className,
       raw,
       editField,
-      as
+      as,
+      renderValue
     }
   );
 }
 function EditableContentSpan({
-  collection = "portfolio",
+  collection,
   sectionKey,
   fieldKey,
   className,
   raw,
   editField,
-  as: Component = "span"
+  as: Component = "span",
+  renderValue
 }) {
   const { isEditing } = useCmsAuth();
   const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
@@ -503,19 +403,16 @@ function EditableContentSpan({
     Component,
     {
       ref: contentRef,
-      className: cn(
-        className,
-        "outline-none transition-all duration-200",
-        "whitespace-pre-wrap break-words overflow-wrap-anywhere",
-        isFocused && "ring-2 ring-primary/50 ring-offset-2 ring-offset-neutral-900 rounded-sm px-2",
-        !isFocused && isEditing && "hover:ring-1 hover:ring-primary/30 hover:ring-offset-1 hover:ring-offset-neutral-900 hover:rounded-sm hover:px-2 cursor-text"
-      ),
+      className,
+      "data-cms-editable": "",
+      "data-cms-editing": isEditing ? "" : void 0,
+      "data-cms-focused": isFocused ? "" : void 0,
       contentEditable: isEditing,
       suppressContentEditableWarning: true,
       onInput: handleInput,
       onBlur: handleBlur,
       onFocus: handleFocus,
-      children: !isFocused && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RenderStatic, { raw: editValue, as: "span" })
+      children: !isFocused && renderValue(editValue)
     },
     isFocused ? "editing" : "static"
   );
@@ -523,8 +420,6 @@ function EditableContentSpan({
 
 // src/client/EditableImage.tsx
 var import_react4 = require("react");
-var import_react_dom = require("react-dom");
-var import_lucide_react = require("lucide-react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function EditableImage({
   sectionKey,
@@ -532,15 +427,13 @@ function EditableImage({
   src,
   collection,
   docId,
-  className
+  className,
+  children
 }) {
   const { isEditing } = useCmsAuth();
   const { editField, setPendingImage, pendingImages, saving } = usePageContext();
   const [preview, setPreview] = (0, import_react4.useState)(src);
   const [hasError, setHasError] = (0, import_react4.useState)(false);
-  const [showUrlModal, setShowUrlModal] = (0, import_react4.useState)(false);
-  const [urlInput, setUrlInput] = (0, import_react4.useState)("");
-  const [urlPreview, setUrlPreview] = (0, import_react4.useState)("");
   const inputRef = (0, import_react4.useRef)(null);
   const pendingImage = pendingImages.find(
     (img) => img.sectionKey === sectionKey && img.fieldKey === fieldKey
@@ -565,442 +458,102 @@ function EditableImage({
       isExternal: false
     });
   };
-  const handleUrlConfirm = () => {
-    if (!urlPreview) return;
-    setPreview(urlPreview);
+  const openFilePicker = () => {
+    var _a;
+    if (saving) return;
+    (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const setExternalUrl = (value) => {
+    let valid = false;
+    try {
+      const url = new URL(value);
+      valid = url.protocol === "http:" || url.protocol === "https:";
+    } catch (e) {
+      valid = false;
+    }
+    if (!valid) return false;
+    setPreview(value);
     setHasError(false);
-    editField(collection, sectionKey, fieldKey, urlPreview);
+    editField(collection, sectionKey, fieldKey, value);
     setPendingImage({
       file: null,
-      localUrl: urlPreview,
+      localUrl: value,
       sectionKey,
       fieldKey,
       collection,
       docId,
       isExternal: true
     });
-    setShowUrlModal(false);
-    setUrlInput("");
-    setUrlPreview("");
+    return true;
   };
-  const handleUrlChange = (value) => {
-    setUrlInput(value);
-    try {
-      const url = new URL(value);
-      if (url.protocol === "http:" || url.protocol === "https:") {
-        setUrlPreview(value);
-      } else {
-        setUrlPreview("");
-      }
-    } catch (e) {
-      setUrlPreview("");
-    }
+  const state = {
+    src: imgSrc,
+    isEditing,
+    saving,
+    hasError,
+    openFilePicker,
+    setExternalUrl,
+    imgProps: { src: imgSrc, onError: () => setHasError(true) }
   };
-  const imageNode = hasError || !imgSrc ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center justify-center w-full h-full p-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-32 h-32 mx-auto rounded-2xl bg-neutral-800/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "svg",
-      {
-        className: "w-16 h-16 text-neutral-600",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 1.5,
-            d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-neutral-500 text-lg", children: "No image available" })
-  ] }) }) : (
-    // eslint-disable-next-line @next/next/no-img-element
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "img",
+      "input",
       {
-        src: imgSrc,
-        alt: "",
-        className: "w-full h-full object-cover",
-        onError: () => setHasError(true)
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        disabled: saving,
+        onChange: handleFileChange,
+        style: { display: "none" }
       }
-    )
-  );
-  if (!isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: imageNode });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("relative group", className), children: [
-      imageNode,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity", children: saving ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-8 h-8 border-4 border-white border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-12", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_lucide_react.CameraIcon,
-          {
-            className: "w-12 h-12 text-white cursor-pointer hover:text-primary",
-            onClick: (e) => {
-              var _a;
-              e.stopPropagation();
-              (_a = inputRef.current) == null ? void 0 : _a.click();
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_lucide_react.Link2Icon,
-          {
-            className: "w-12 h-12 text-white cursor-pointer hover:text-primary",
-            onClick: (e) => {
-              e.stopPropagation();
-              setShowUrlModal(true);
-            }
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "input",
-        {
-          ref: inputRef,
-          type: "file",
-          accept: "image/*",
-          disabled: saving,
-          onChange: handleFileChange,
-          className: "absolute inset-0 opacity-0 pointer-events-none"
-        }
-      )
-    ] }),
-    showUrlModal && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "fixed inset-0 bg-black/70 flex items-center justify-center z-9999 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "bg-neutral-900 rounded-xl p-6 max-w-sm w-full space-y-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-lg font-bold", children: "Add Image URL" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "input",
-          {
-            type: "text",
-            value: urlInput,
-            onChange: (e) => handleUrlChange(e.target.value),
-            placeholder: "https://example.com/image.png",
-            className: "w-full px-3 py-2 rounded bg-neutral-800 border border-neutral-700"
-          }
-        ),
-        urlPreview ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "img",
-            {
-              src: urlPreview,
-              alt: "",
-              className: "w-full h-40 object-contain rounded",
-              onError: () => setHasError(true)
-            }
-          )
-        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-40 flex items-center justify-center text-neutral-500", children: "Invalid URL" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "button",
-            {
-              onClick: () => setShowUrlModal(false),
-              className: "px-3 py-1 bg-neutral-700 rounded text-sm",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.XIcon, { className: "w-4 h-4 inline" }),
-                " Cancel"
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            "button",
-            {
-              onClick: handleUrlConfirm,
-              disabled: !urlPreview,
-              className: "px-3 py-1 bg-primary rounded text-sm disabled:opacity-50",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.CheckIcon, { className: "w-4 h-4 inline" }),
-                " Confirm"
-              ]
-            }
-          )
-        ] })
-      ] }) }),
-      document.body
+    ),
+    children ? children(state) : (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", __spreadProps(__spreadValues({}, state.imgProps), { alt: "" }))
     )
   ] });
 }
 
 // src/client/MarkdownEditor.tsx
 var import_react5 = require("react");
-var import_react_dom2 = require("react-dom");
-var import_react_markdown = __toESM(require("react-markdown"), 1);
-var import_remark_gfm = __toESM(require("remark-gfm"), 1);
-var import_lucide_react2 = require("lucide-react");
-var import_sonner2 = require("sonner");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function MarkdownEditor({
+function useMarkdownEditor({
   initialValue,
-  onSave,
-  trigger,
-  title = "Edit Content"
-}) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [content, setContent] = (0, import_react5.useState)(initialValue);
-  const [isPreview, setIsPreview] = (0, import_react5.useState)(false);
-  const handleOpen = () => {
-    setContent(initialValue);
-    setOpen(true);
-  };
-  const handleSave = () => {
-    onSave(content);
-    setOpen(false);
-  };
-  const handleCancel = () => {
-    setContent(initialValue);
-    setOpen(false);
-  };
-  const insertMarkdown = (before, after = "", placeholder = "text") => {
-    const textarea = document.querySelector(
-      "textarea[data-markdown-editor]"
-    );
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const selectedText = content.substring(start, end) || placeholder;
-    const newText = content.substring(0, start) + before + selectedText + after + content.substring(end);
-    setContent(newText);
-    setTimeout(() => {
-      textarea.focus();
-      const newCursorPos = start + before.length + selectedText.length;
-      textarea.setSelectionRange(newCursorPos, newCursorPos);
-    }, 0);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    trigger ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { onClick: handleOpen, children: trigger }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: handleOpen,
-        className: "inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border border-neutral-700 hover:bg-neutral-800 transition-colors",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EditIcon, { className: "w-4 h-4" }),
-          "Edit Content"
-        ]
-      }
-    ),
-    open && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 z-[10001] flex items-center justify-center bg-black/70 p-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "md:max-w-6xl w-full h-[90vh] flex flex-col bg-neutral-950 border border-neutral-800 rounded-xl overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 pt-6 pb-4 border-b border-neutral-800", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h2", { className: "text-2xl font-bold flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-2 bg-primary/10 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.TypeIcon, { className: "w-5 h-5 text-primary" }) }),
-            title
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: () => setIsPreview(!isPreview),
-              className: cn(
-                "flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium",
-                isPreview ? "bg-primary text-white" : "bg-neutral-800 hover:bg-neutral-700 text-neutral-300"
-              ),
-              children: isPreview ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EditIcon, { className: "w-4 h-4" }),
-                "Edit"
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EyeIcon, { className: "w-4 h-4" }),
-                "Preview"
-              ] })
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
-          !isPreview && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1 px-4 py-3 border-b border-neutral-800 bg-neutral-900/50 overflow-x-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Heading1Icon, { className: "w-4 h-4" }),
-                label: "Heading 1",
-                onClick: () => insertMarkdown("# ", "", "Heading")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Heading2Icon, { className: "w-4 h-4" }),
-                label: "Heading 2",
-                onClick: () => insertMarkdown("## ", "", "Heading")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-6 bg-neutral-700 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.BoldIcon, { className: "w-4 h-4" }),
-                label: "Bold",
-                onClick: () => insertMarkdown("**", "**", "bold text")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ItalicIcon, { className: "w-4 h-4" }),
-                label: "Italic",
-                onClick: () => insertMarkdown("*", "*", "italic text")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-6 bg-neutral-700 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.LinkIcon, { className: "w-4 h-4" }),
-                label: "Link",
-                onClick: () => insertMarkdown("[", "](url)", "link text")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ImageIcon, { className: "w-4 h-4" }),
-                label: "Image",
-                onClick: () => insertMarkdown("![", "](url)", "alt text")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-6 bg-neutral-700 mx-1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ListIcon, { className: "w-4 h-4" }),
-                label: "List",
-                onClick: () => insertMarkdown("- ", "", "list item")
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              ToolbarButton,
-              {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CodeIcon, { className: "w-4 h-4" }),
-                label: "Code",
-                onClick: () => insertMarkdown("```\n", "\n```", "code")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 overflow-auto p-6", children: isPreview ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "prose prose-invert prose-lg max-w-none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "h-full flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "textarea",
-              {
-                "data-markdown-editor": true,
-                value: content,
-                onChange: (e) => setContent(e.target.value),
-                className: "h-full w-full resize-none rounded-md font-mono text-sm bg-neutral-900/50 border border-neutral-800 p-3 outline-none focus:border-primary",
-                placeholder: "# Project Title\n\n## Overview\nWrite your description here..."
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mt-4 p-4 bg-neutral-900/50 border border-neutral-800 rounded-lg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { className: "text-sm font-semibold mb-3 text-neutral-300 flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CodeIcon, { className: "w-4 h-4 text-primary" }),
-                "Markdown Guide"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-3 text-xs", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "# Heading 1", desc: "Main heading" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "## Heading 2", desc: "Sub heading" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "**bold**", desc: "Bold text" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "*italic*", desc: "Italic text" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "[link](url)", desc: "Hyperlink" }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GuideItem, { code: "- list item", desc: "Bullet list" })
-              ] })
-            ] })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 py-4 border-t border-neutral-800 bg-neutral-900/30", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-sm text-neutral-500", children: [
-            content.length,
-            " characters"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: handleCancel,
-                className: "inline-flex items-center gap-2 px-4 py-2 text-sm rounded-md border border-neutral-700 hover:bg-neutral-800 transition-colors",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.XIcon, { className: "w-4 h-4" }),
-                  "Cancel"
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: handleSave,
-                className: "inline-flex items-center gap-2 px-4 py-2 text-sm rounded-md bg-primary text-white hover:opacity-90 transition-opacity",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.SaveIcon, { className: "w-4 h-4" }),
-                  "Save Content"
-                ]
-              }
-            )
-          ] })
-        ] }) })
-      ] }) }),
-      document.body
-    )
-  ] });
-}
-function ToolbarButton({
-  icon,
-  label,
-  onClick
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      title: label,
-      className: "p-2 rounded-lg hover:bg-neutral-800 text-neutral-400 hover:text-white transition-colors",
-      children: icon
-    }
-  );
-}
-function GuideItem({ code, desc }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "text-primary bg-primary/10 px-2 py-1 rounded text-xs font-mono", children: code }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-neutral-500", children: desc })
-  ] });
-}
-function ProjectContentEditor({
-  content,
   onSave
 }) {
-  const [saving, setSaving] = (0, import_react5.useState)(false);
-  const handleSave = async (newContent) => {
-    setSaving(true);
-    try {
-      await onSave(newContent);
-      import_sonner2.toast.success("Content saved successfully!");
-    } catch (error) {
-      console.error("Failed to save content:", error);
-      import_sonner2.toast.error("Failed to save content");
-    } finally {
-      setSaving(false);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    MarkdownEditor,
-    {
-      initialValue: content,
-      onSave: handleSave,
-      title: "Edit Project Content",
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "button",
-        {
-          className: "px-4 py-2 bg-neutral-800 rounded-lg hover:bg-neutral-700 transition-colors flex items-center gap-2 border border-neutral-700 hover:border-primary/50",
-          disabled: saving,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.EditIcon, { className: "w-4 h-4" }),
-            saving ? "Saving..." : "Edit Full Content"
-          ]
-        }
-      )
-    }
+  const [value, setValue] = (0, import_react5.useState)(initialValue);
+  const textareaRef = (0, import_react5.useRef)(null);
+  const insert = (0, import_react5.useCallback)(
+    (before, after = "", placeholder = "text") => {
+      var _a, _b;
+      const textarea = textareaRef.current;
+      const start = (_a = textarea == null ? void 0 : textarea.selectionStart) != null ? _a : value.length;
+      const end = (_b = textarea == null ? void 0 : textarea.selectionEnd) != null ? _b : value.length;
+      const selected = value.substring(start, end) || placeholder;
+      const next = value.substring(0, start) + before + selected + after + value.substring(end);
+      setValue(next);
+      setTimeout(() => {
+        if (!textarea) return;
+        textarea.focus();
+        const caret = start + before.length + selected.length;
+        textarea.setSelectionRange(caret, caret);
+      }, 0);
+    },
+    [value]
+  );
+  const reset = (0, import_react5.useCallback)(
+    (to = initialValue) => setValue(to),
+    [initialValue]
   );
+  const save = (0, import_react5.useCallback)(() => onSave(value), [onSave, value]);
+  return {
+    value,
+    setValue,
+    textareaRef,
+    insert,
+    reset,
+    save,
+    charCount: value.length
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1008,11 +561,9 @@ function ProjectContentEditor({
   CmsAuthProvider,
   ContentEditSpan,
   EditableImage,
-  MarkdownEditor,
   PageProvider,
-  ProjectContentEditor,
-  cn,
   useCmsAuth,
+  useMarkdownEditor,
   usePageContext
 });
 //# sourceMappingURL=index.cjs.map