@ynput/ayon-frontend-shared 0.2.28 → 0.2.29

package/dist/shared/src/components/{ListAttributeForm/ListAttributeForm.es.js → DetailsPanelDetails/DescriptionSection.es.js}

@@ -1,10 +1,22 @@
-import { j as F } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as h, useMemo as C, useEffect as L, useCallback as V } from "react";
-import "@ynput/ayon-react-components";
+import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
+import { useRef as b, useState as v, useEffect as D } from "react";
+import { Button as a } from "@ynput/ayon-react-components";
+import w from "react-quill-ayon";
+import E from "clsx";
+import { BorderedSection as d } from "./BorderedSection.es.js";
+import { QuillListStyles as H } from "../QuillListStyles/QuillListStyles.es.js";
+import { StyledLoadingSkeleton as R, StyledContent as M, StyledEditor as Q, StyledQuillContainer as V, StyledFooter as B, StyledButtonContainer as F, StyledHiddenMarkdown as L } from "./DescriptionSection.styles.es.js";
+import O from "../../containers/Feed/components/CommentInput/InputMarkdownConvert.es.js";
+import { useDescriptionEditor as U } from "./hooks/useDescriptionEditor.es.js";
+import { mentionTypeOptions as I } from "./hooks/useMentionSystem.es.js";
+import { useQuillFormats as K } from "./hooks/useQuillFormats.es.js";
 import "lodash";
-import { toast as v } from "react-toastify";
+import "react-toastify";
 import "uuid";
 import "../../util/pubsub.es.js";
+import "../../context/RemoteModulesContext.es.js";
+import "../../../../_virtual/runtime.es.js";
+import "../../../../_virtual/semver.es.js";
 import "../../api/base/client.es.js";
 import "../../api/generated/graphql.es.js";
 import "../../api/generated/graphqlLinks.es.js";
@@ -58,7 +70,7 @@ import "../../api/queries/entities/getEntity.es.js";
 import "../../api/queries/entities/getEntityPanel.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
 import "../../api/queries/entityLists/getLists.es.js";
-import { useUpdateEntityListMutation as w } from "../../api/queries/entityLists/updateLists.es.js";
+import "../../api/queries/entityLists/updateLists.es.js";
 import "../../api/queries/entityLists/getListsAttributes.es.js";
 import "../../api/queries/entityLists/updateListsAttributes.es.js";
 import "../../api/queries/folders/getFolders.es.js";
@@ -70,7 +82,7 @@ import "../../api/queries/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
 import "../../api/queries/permissions/getPermissions.es.js";
 import "../../api/queries/products/createProduct.es.js";
-import { useGetProjectQuery as x } from "../../api/queries/project/getProject.es.js";
+import "../../api/queries/project/getProject.es.js";
 import "../../api/queries/project/updateProject.es.js";
 import "../../api/queries/review/getReview.es.js";
 import "../../api/queries/review/updateReview.es.js";
@@ -83,10 +95,6 @@ import "../../api/queries/versions/updateVersions.es.js";
 import "../../api/queries/views/getViews.es.js";
 import "../../api/queries/views/updateViews.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
-import { DetailsPanelAttributesEditor as A } from "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
-import "../../context/RemoteModulesContext.es.js";
-import "../../../../_virtual/runtime.es.js";
-import "../../../../_virtual/semver.es.js";
 import "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
 import "../../context/SettingsPanelContext.es.js";
@@ -99,107 +107,111 @@ import "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
 import "react-redux";
 import "custom-protocol-check";
-const l = (o) => o.startsWith("data."), f = (o) => o.replace("data.", ""), E = (o) => o.filter((t) => l(t.name)).map((t) => f(t.name)), Lr = ({
-  projectName: o,
-  list: t,
-  isLoading: b,
-  categoryEnum: u = []
+const N = ({
+  imageUploader: r,
+  disableImageUpload: p = !1
 }) => {
-  const [g, n] = h({
-    label: "",
-    tags: [],
-    active: !1
-  }), { data: a } = x({ projectName: o }), d = C(
-    () => {
-      var i;
-      return [
-        { name: "label", data: { type: "string", title: "Label" } },
-        {
-          name: "tags",
-          data: {
-            type: "list_of_strings",
-            title: "Tags",
-            enum: (i = a == null ? void 0 : a.tags) == null ? void 0 : i.map((m) => ({ value: m.name, label: m.name, color: m.color })),
-            enableCustomValues: !0,
-            enableSearch: !0
-          }
-        },
-        { name: "active", data: { type: "boolean", title: "Active" } },
-        {
-          name: "data.category",
-          data: {
-            type: "string",
-            title: "Category",
-            enum: u
-          },
-          enableCustomValues: !0,
-          enableSearch: !0,
-          allowNone: !0
-        }
-      ];
-    },
-    [a == null ? void 0 : a.tags, u]
-  );
-  L(() => {
-    if (t) {
-      const i = t.data || {}, p = E(d).reduce((r, e) => {
-        const s = `data.${e}`, D = i[e];
-        return r[s] = D || "", r;
-      }, {});
-      n({
-        label: (t == null ? void 0 : t.label) || "",
-        tags: (t == null ? void 0 : t.tags) || [],
-        active: (t == null ? void 0 : t.active) ?? !1,
-        ...p
-      });
+  const i = [
+    [{ header: 2 }, "bold", "italic", "link", "code-block"],
+    [{ list: "ordered" }, { list: "bullet" }]
+    // Removed { list: 'check' }
+  ];
+  return p || i.push(["image"]), {
+    toolbar: i,
+    imageUploader: r,
+    magicUrl: !0
+  };
+}, $o = ({
+  description: r,
+  isMixed: p,
+  enableEditing: i,
+  onChange: c,
+  isLoading: u
+}) => {
+  const e = b(null), [n, l] = v("");
+  D(() => {
+    if (!(r != null && r.trim())) {
+      l("");
+      return;
+    }
+    if (!e.current) return;
+    const m = e.current.innerHTML;
+    l(m);
+  }, [r]);
+  const {
+    isEditing: o,
+    editorValue: f,
+    setEditorValue: h,
+    editorRef: x,
+    handleStartEditing: s,
+    handleSave: j,
+    handleCancel: S,
+    handleKeyDown: g
+  } = U({
+    descriptionHtml: n,
+    enableEditing: i,
+    isMixed: p,
+    onChange: c
+  }), k = K();
+  if (u)
+    return /* @__PURE__ */ t.jsx(d, { title: "Description", children: /* @__PURE__ */ t.jsx(R, {}) });
+  const y = (m) => {
+    if (o)
+      return;
+    if (m.target.closest("a")) {
+      m.stopPropagation();
+      return;
     }
-  }, [t, d]);
-  const [c] = w(), y = V(
-    async (i, m) => {
-      if (!(t != null && t.id)) return console.warn("No list ID provided");
-      let p;
-      if (l(i)) {
-        const r = f(i), e = t.data || {};
-        m === "" && r === "category" ? p = {
-          data: {
-            ...e,
-            [r]: null
+    o || s();
+  }, C = o ? f : n;
+  return /* @__PURE__ */ t.jsxs(
+    d,
+    {
+      title: "Description",
+      showHeader: !o,
+      enableHover: !o,
+      onClick: o ? void 0 : s,
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          M,
+          {
+            className: E({ editing: o }),
+            onClick: y,
+            children: [
+              /* @__PURE__ */ t.jsx(Q, { className: "block-shortcuts", children: /* @__PURE__ */ t.jsx(H, { children: /* @__PURE__ */ t.jsx(V, { children: /* @__PURE__ */ t.jsx(
+                w,
+                {
+                  theme: "snow",
+                  ref: x,
+                  value: C,
+                  onChange: h,
+                  placeholder: "Add a description...",
+                  modules: o ? N({ imageUploader: null, disableImageUpload: !0 }) : { toolbar: !1 },
+                  formats: k,
+                  onKeyDown: g,
+                  readOnly: !o
+                },
+                `description-editor-${o}`
+              ) }) }) }),
+              o && /* @__PURE__ */ t.jsx(B, { children: /* @__PURE__ */ t.jsxs(F, { children: [
+                /* @__PURE__ */ t.jsx(a, { variant: "text", label: "Cancel", onClick: S }),
+                /* @__PURE__ */ t.jsx(a, { variant: "filled", label: "Save", onClick: j })
+              ] }) })
+            ]
           }
-        } : p = {
-          data: {
-            ...e,
-            [r]: m
+        ),
+        /* @__PURE__ */ t.jsx(L, { ref: e, children: /* @__PURE__ */ t.jsx(
+          O,
+          {
+            typeOptions: I,
+            initValue: r || ""
           }
-        }, n((s) => ({ ...s, [i]: m }));
-      } else {
-        const r = { [i]: m };
-        p = r, n((e) => ({ ...e, ...r }));
-      }
-      try {
-        await c({
-          listId: t.id,
-          projectName: o,
-          entityListPatchModel: p
-        });
-      } catch (r) {
-        console.error(r), v.error("Failed to update list attribute: ", r.data.detail);
-      }
-    },
-    [t == null ? void 0 : t.id, t == null ? void 0 : t.data, o, c]
-  );
-  return /* @__PURE__ */ F.jsx(
-    A,
-    {
-      enableEditing: !0,
-      fields: d,
-      form: g,
-      isLoading: b,
-      onChange: y,
-      title: "Attributes"
+        ) })
+      ]
     }
   );
 };
 export {
-  Lr as ListAttributeForm
+  $o as DescriptionSection
 };
-//# sourceMappingURL=ListAttributeForm.es.js.map
+//# sourceMappingURL=DescriptionSection.es.js.map

package/dist/shared/src/components/DetailsPanelDetails/DescriptionSection.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DescriptionSection.es.js","sources":["../../../../../src/components/DetailsPanelDetails/DescriptionSection.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport { Button } from '@ynput/ayon-react-components'\nimport ReactQuill from 'react-quill-ayon'\nimport clsx from 'clsx'\nimport { BorderedSection } from './BorderedSection'\nimport { QuillListStyles } from '../QuillListStyles'\nimport {\n  StyledContent,\n  StyledEditor,\n  StyledFooter,\n  StyledLoadingSkeleton,\n  StyledButtonContainer,\n  StyledQuillContainer,\n  StyledHiddenMarkdown,\n} from './DescriptionSection.styles'\nimport InputMarkdownConvert from '@shared/containers/Feed/components/CommentInput/InputMarkdownConvert'\nimport { mentionTypeOptions, useDescriptionEditor, useQuillFormats } from './hooks'\n\n// Custom modules function for description editor (without checklist)\nconst getDescriptionModules = ({\n  imageUploader,\n  disableImageUpload = false,\n}: {\n  imageUploader: any\n  disableImageUpload?: boolean\n}) => {\n  const toolbar = [\n    [{ header: 2 }, 'bold', 'italic', 'link', 'code-block'],\n    [{ list: 'ordered' }, { list: 'bullet' }], // Removed { list: 'check' }\n  ]\n\n  if (!disableImageUpload) {\n    toolbar.push(['image'])\n  }\n\n  return {\n    toolbar,\n    imageUploader,\n    magicUrl: true,\n  }\n}\n\ninterface DescriptionSectionProps {\n  description: string\n  isMixed: boolean\n  enableEditing: boolean\n  onChange: (description: string) => void\n  isLoading: boolean\n}\n\nexport const DescriptionSection: React.FC<DescriptionSectionProps> = ({\n  description,\n  isMixed,\n  enableEditing,\n  onChange,\n  isLoading,\n}) => {\n  const markdownRef = useRef<HTMLDivElement>(null)\n  const [descriptionHtml, setDescriptionHtml] = useState('')\n\n  useEffect(() => {\n    if (!description?.trim()) {\n      setDescriptionHtml('')\n      return\n    }\n\n    if (!markdownRef.current) return\n\n    const html = markdownRef.current.innerHTML\n    setDescriptionHtml(html)\n  }, [description])\n\n  // Use custom hooks to manage state and logic\n  const {\n    isEditing,\n    editorValue,\n    setEditorValue,\n    editorRef,\n    handleStartEditing,\n    handleSave,\n    handleCancel,\n    handleKeyDown,\n  } = useDescriptionEditor({\n    descriptionHtml,\n    enableEditing,\n    isMixed,\n    onChange,\n  })\n\n  const conditionalFormats = useQuillFormats()\n\n  if (isLoading) {\n    return (\n      <BorderedSection title=\"Description\">\n        <StyledLoadingSkeleton />\n      </BorderedSection>\n    )\n  }\n\n  // Handle clicks on links to prevent edit mode activation\n  const handleContentClick = (e: React.MouseEvent) => {\n    // If we're in editing mode, don't prevent default behavior for links\n    if (isEditing) {\n      return\n    }\n    \n    // Check if the clicked element is a link or inside a link\n    const target = e.target as HTMLElement\n    const link = target.closest('a')\n    \n    if (link) {\n      // If clicking on a link, prevent the edit mode from activating\n      e.stopPropagation()\n      return\n    }\n    \n    // For other clicks when not editing, allow edit mode to activate\n    if (!isEditing) {\n      handleStartEditing()\n    }\n  }\n\n  const quillValue = isEditing ? editorValue : descriptionHtml\n\n  return (\n    <BorderedSection\n      title=\"Description\"\n      showHeader={!isEditing}\n      enableHover={!isEditing}\n      onClick={!isEditing ? handleStartEditing : undefined}\n    >\n      <StyledContent \n        className={clsx({ editing: isEditing })}\n        onClick={handleContentClick}\n      >\n        <StyledEditor className=\"block-shortcuts\">\n          <QuillListStyles>\n            <StyledQuillContainer>\n              <ReactQuill\n                key={`description-editor-${isEditing}`}\n                theme=\"snow\"\n                ref={editorRef}\n                value={quillValue}\n                onChange={setEditorValue}\n                placeholder=\"Add a description...\"\n                modules={\n                  isEditing\n                    ? getDescriptionModules({ imageUploader: null, disableImageUpload: true })\n                    : { toolbar: false }\n                }\n                formats={conditionalFormats}\n                onKeyDown={handleKeyDown}\n                readOnly={!isEditing}\n              />\n            </StyledQuillContainer>\n          </QuillListStyles>\n        </StyledEditor>\n        {isEditing && (\n          <StyledFooter>\n            <StyledButtonContainer>\n              <Button variant=\"text\" label=\"Cancel\" onClick={handleCancel} />\n              <Button variant=\"filled\" label=\"Save\" onClick={handleSave} />\n            </StyledButtonContainer>\n          </StyledFooter>\n        )}\n      </StyledContent>\n      <StyledHiddenMarkdown ref={markdownRef}>\n        <InputMarkdownConvert\n          typeOptions={mentionTypeOptions}\n          initValue={description || ''}\n        />\n      </StyledHiddenMarkdown>\n    </BorderedSection>\n  )\n}\n"],"names":["getDescriptionModules","imageUploader","disableImageUpload","toolbar","DescriptionSection","description","isMixed","enableEditing","onChange","isLoading","markdownRef","useRef","descriptionHtml","setDescriptionHtml","useState","useEffect","html","isEditing","editorValue","setEditorValue","editorRef","handleStartEditing","handleSave","handleCancel","handleKeyDown","useDescriptionEditor","conditionalFormats","useQuillFormats","BorderedSection","jsx","StyledLoadingSkeleton","handleContentClick","e","quillValue","jsxs","StyledContent","clsx","StyledEditor","QuillListStyles","StyledQuillContainer","ReactQuill","StyledFooter","StyledButtonContainer","Button","StyledHiddenMarkdown","InputMarkdownConvert","mentionTypeOptions"],"mappings":"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"}

package/dist/shared/src/components/DetailsPanelDetails/DescriptionSection.styles.cjs.js

@@ -0,0 +1,385 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=o.div`
+  padding: 0;
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &.editing {
+    cursor: default;
+    padding: 0;
+    margin: 0;
+  }
+
+  &:not(.editing) {
+    cursor: pointer !important;
+
+    * {
+      cursor: pointer !important;
+    }
+  }
+`;o.div`
+  color: var(--md-sys-color-on-surface);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  &.empty {
+    color: var(--md-sys-color-on-surface-variant);
+    font-style: italic;
+  }
+`;const e=o.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .ql-toolbar.ql-snow {
+    height: 40px;
+    border: none;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    padding: 4px;
+    display: flex;
+    width: unset;
+
+    .ql-formats {
+      margin-right: 8px;
+      padding-right: 8px;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
+      display: flex;
+      gap: var(--base-gap-small);
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+    button {
+      float: none;
+      height: 32px;
+      width: 32px;
+      border-radius: var(--border-radius-m);
+      transition: all 0.2s ease;
+      border: none;
+      background: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      /* Base styling matching activity section */
+      &,
+      .icon {
+        color: var(--md-sys-color-on-surface);
+      }
+
+      &.ql-active {
+        background-color: var(--md-sys-color-secondary-container);
+
+        .icon {
+          color: var(--md-sys-color-on-secondary-container);
+          font-weight: 600;
+        }
+      }
+
+      &:hover {
+        background-color: var(--md-sys-color-surface-container-high-hover);
+      }
+
+      &:hover.ql-active {
+        background-color: var(--md-sys-color-secondary-container-hover);
+      }
+
+      /* Special styling for header dropdown when active - matching activity reference styling */
+      &.ql-picker.ql-active {
+        background-color: var(--md-sys-color-secondary-container);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--border-radius-m);
+
+        .ql-picker-label {
+          color: var(--md-sys-color-on-secondary-container);
+          font-weight: 600;
+        }
+      }
+
+      /* Picker dropdown styling to match activity section */
+      &.ql-picker {
+        background-color: var(--md-sys-color-surface-container-high);
+        border-radius: var(--border-radius-m);
+
+        &:hover {
+          background-color: var(--md-sys-color-surface-container-high-hover);
+        }
+
+        &:active {
+          background-color: var(--md-sys-color-surface-container-high-active);
+        }
+      }
+    }
+  }
+
+  .ql-container.ql-snow {
+    border: none;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100% - 57px);
+
+    .ql-editor {
+      padding: 12px;
+      min-height: 60px;
+      flex: 1;
+      overflow-y: auto;
+      
+      &[contenteditable="false"] {
+        pointer-events: none;
+        cursor: pointer !important;
+        
+        a {
+          pointer-events: auto;
+          cursor: pointer !important;
+          
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &.ql-blank::before {
+        color: var(--md-sys-color-on-surface-variant);
+        opacity: 0.6;
+        font-style: italic;
+      }
+
+      .ql-code-block-container {
+        background-color: var(--md-sys-color-surface-container-lowest);
+        padding: var(--padding-m);
+        border-radius: var(--border-radius-m);
+      }
+
+      a {
+        color: var(--md-sys-color-primary);
+        text-decoration: none;
+      }
+
+      strong {
+        em,
+        u,
+        a {
+          font-weight: 800;
+        }
+      }
+
+      /* Match activity section typography */
+      h1, h2 {
+        font-size: 24px;
+        margin-top: 16px;
+        margin-bottom: 8px;
+      }
+
+      h2  {
+        a, em, strong {
+        font-size: 20px;
+      }
+
+      p {
+        word-break: break-word;
+        margin-bottom: 8px;
+      }
+
+      ul,
+      ol {
+        margin: 16px 0 !important;
+        padding-left: 20px;
+      }
+
+      blockquote {
+        margin: 0;
+        padding-left: 16px;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          background-color: var(--md-sys-color-outline-variant);
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+`,t=o.div`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding: 8px;
+  height: 48px;
+  border-top: 1px solid var(--md-sys-color-outline-variant);
+`;o.div`
+  .markdown-content {
+    color: var(--md-sys-color-on-surface);
+    line-height: 1.5;
+    white-space: pre-wrap; /* prevent preserved newlines from adding extra gaps compared to editor */
+
+    /* Normalize spacing to match the editor */
+    /* Match editor heading sizes: Quill uses ~1.5em for H2 */
+    h1 {
+      font-size: 1.5rem;
+    }
+    h2 {
+      font-size: 24px;
+      margin-top: 16px;
+      margin-bottom: 8px;
+    }
+    h3 {
+      font-size: 1.125rem;
+    }
+
+    /* Avoid big gaps created by consecutive blank paragraphs */
+    p {
+      margin: 0;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    pre {
+      background-color: var(--md-sys-color-surface-container-lowest);
+      padding: 8px;
+      border-radius: var(--border-radius-m);
+      overflow-x: auto;
+      margin: 0;
+      letter-spacing: 0.25px;
+    }
+
+    strong {
+      em,
+      a {
+        font-weight: 800 !important;
+      }
+    }
+
+    blockquote {
+      border-left: 3px solid var(--md-sys-color-outline);
+      margin: 8px 0;
+      padding-left: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    ul,
+    ol {
+      white-space: nowrap;
+      margin: 16px 0;
+      padding-left: 20px !important;
+    }
+
+    /* Handle mixed lists with data-list attributes */
+    ol li[data-list='bullet'] {
+      list-style-type: disc !important;
+    }
+
+    ol li[data-list='ordered'] {
+      list-style-type: decimal !important;
+    }
+
+    /* Remove extra vertical gap when markdown renders mixed list types consecutively */
+    ul + ul,
+    ul + ol,
+    ol + ul,
+    ol + ol {
+      /* Use a negative top margin to cancel the previous list's bottom margin (margin-collapsing) */
+      margin-top: -16px;
+    }
+
+    ol li {
+      list-style-type: decimal !important;
+      list-style-position: inside !important;
+    }
+
+    ul li {
+      list-style-type: circle !important;
+      list-style-position: inside !important;
+    }
+
+    a {
+      color: var(--md-sys-color-primary);
+      text-decoration: none;
+    }
+
+    h2 {
+      a,
+      em,
+      strong {
+        font-size: 20px;
+        margin-top: 16px;
+        margin-bottom: 8px;
+      }
+    }
+  }
+`;const i=o.div`
+  height: 20px;
+  background: var(--md-sys-color-surface-container-low);
+  border-radius: 4px;
+`;o.span`
+  color: var(--md-sys-color-on-surface-variant);
+  font-style: italic;
+`;const n=o.div`
+  display: flex;
+  gap: 8px;
+`,a=o.div`
+  height: 100%;
+
+  /* Force cursor pointer when ReactQuill is readonly - comprehensive approach */
+  .ql-container.ql-snow .ql-editor[contenteditable='false'] {
+    cursor: pointer !important;
+
+    /* Override cursor for all child elements */
+    * {
+      cursor: pointer !important;
+    }
+
+    /* Specific overrides for common elements that might have different cursors */
+    a,
+    strong,
+    em,
+    code,
+    span,
+    div,
+    p,
+    li,
+    ol,
+    ul,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      cursor: pointer !important;
+    }
+
+    /* Ensure links are clickable and have proper cursor */
+    a {
+      pointer-events: auto !important;
+      cursor: pointer !important;
+      
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* Also handle blank state */
+  .ql-editor.ql-blank {
+    cursor: pointer !important;
+  }
+`,l=o.div`
+  position: fixed;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  top: -9999px;
+  left: -9999px;
+`;exports.StyledButtonContainer=n;exports.StyledContent=r;exports.StyledEditor=e;exports.StyledFooter=t;exports.StyledHiddenMarkdown=l;exports.StyledLoadingSkeleton=i;exports.StyledQuillContainer=a;
+//# sourceMappingURL=DescriptionSection.styles.cjs.js.map