neuphlo-editor 2.3.1 → 2.4.1

package/dist/react/index.cjs

@@ -706,6 +706,24 @@ MentionCommand.displayName = "MentionCommand";
 // src/headless/extensions/Mention/mention-node-view.tsx
 var import_react8 = require("@tiptap/react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var GRADIENT_MAP = {
+  red: "linear-gradient(135deg, #ef4444, #fb7185)",
+  coral: "linear-gradient(135deg, #f87171, #fb923c)",
+  orange: "linear-gradient(135deg, #f97316, #fbbf24)",
+  amber: "linear-gradient(135deg, #f59e0b, #facc15)",
+  lime: "linear-gradient(135deg, #84cc16, #4ade80)",
+  green: "linear-gradient(135deg, #10b981, #2dd4bf)",
+  teal: "linear-gradient(135deg, #14b8a6, #22d3ee)",
+  cyan: "linear-gradient(135deg, #06b6d4, #60a5fa)",
+  blue: "linear-gradient(135deg, #3b82f6, #818cf8)",
+  indigo: "linear-gradient(135deg, #6366f1, #a78bfa)",
+  violet: "linear-gradient(135deg, #8b5cf6, #a855f7)",
+  purple: "linear-gradient(135deg, #a855f7, #d946ef)",
+  fuchsia: "linear-gradient(135deg, #d946ef, #f472b6)",
+  pink: "linear-gradient(135deg, #ec4899, #fb7185)",
+  slate: "linear-gradient(135deg, #64748b, #71717a)",
+  stone: "linear-gradient(135deg, #78716c, #a3a3a3)"
+};
 function NodeIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }),
@@ -752,7 +770,26 @@ var MentionNodeView = (props) => {
       children: [
         isNode && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NodeIcon, {}),
         isArticle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArticleIcon, {}),
-        !isReference && avatar && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        !isReference && avatar && avatar in GRADIENT_MAP && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              width: "20px",
+              height: "20px",
+              borderRadius: "50%",
+              background: GRADIENT_MAP[avatar],
+              color: "#ffffff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "8px",
+              fontWeight: 600,
+              flexShrink: 0
+            },
+            children: (label || id).split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase()
+          }
+        ),
+        !isReference && avatar && !(avatar in GRADIENT_MAP) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "img",
           {
             src: avatar,
@@ -897,7 +934,8 @@ var createMentionExtension = (options) => {
               nodeId: item.nodeId,
               slug: item.slug
             }
-          }
+          },
+          { type: "text", text: " " }
         ]).run();
       },
       render: renderMentionSuggestion