@ynput/ayon-frontend-shared 0.4.1 → 0.4.2

package/dist/shared/src/containers/ProjectTreeTable/widgets/MarkdownWidget.es.js

@@ -1,309 +1,22 @@
-import { j as r } from "../../../../../_virtual/jsx-runtime.es.js";
-import { useState as f, useRef as M, useEffect as h, useMemo as q, useCallback as j } from "react";
+import { j as e } from "../../../../../_virtual/jsx-runtime.es.js";
+import { useState as p, useRef as M, useEffect as h, useMemo as q, useCallback as j } from "react";
 import I from "react-quill-ayon";
 import { Button as F, Dialog as C } from "@ynput/ayon-react-components";
 import { QuillListStyles as G } from "../../../components/QuillListStyles/QuillListStyles.es.js";
 import { StyledEditor as U, StyledQuillContainer as _, StyledMarkdown as J, StyledHiddenMarkdown as X } from "../../../components/DetailsPanelDetails/DescriptionSection.styles.es.js";
-import "../../../components/DetailsPanelDetails/DetailsPanelDetails.es.js";
 import { DescriptionSection as Y } from "../../../components/DetailsPanelDetails/DescriptionSection.es.js";
-import "../../../components/DetailsPanelDetails/DetailsSection.es.js";
-import "../../../components/DetailsPanelDetails/FieldLabel.es.js";
 import Z from "../../Feed/components/CommentInput/InputMarkdownConvert.es.js";
 import { convertToMarkdown as R } from "../../Feed/components/CommentInput/quillToMarkdown.es.js";
-import { mentionTypeOptions as $ } from "../../../components/DetailsPanelDetails/hooks/useMentionSystem.es.js";
-import { useQuillFormats as V } from "../../../components/DetailsPanelDetails/hooks/useQuillFormats.es.js";
-import "lodash";
-import "react-toastify";
-import "uuid";
-import "../../../api/base/client.es.js";
-import "../../../api/generated/graphql.es.js";
-import "../../../api/generated/graphqlLinks.es.js";
-import "../../../api/generated/access.es.js";
-import "../../../api/generated/actions.es.js";
-import "../../../api/generated/activityFeed.es.js";
-import "../../../api/generated/addons.es.js";
-import "../../../api/generated/anatomy.es.js";
-import "../../../api/generated/attributes.es.js";
-import "../../../api/generated/authentication.es.js";
-import "../../../api/generated/bundles.es.js";
-import "../../../api/generated/configuration.es.js";
-import "../../../api/generated/dataImport.es.js";
-import "../../../api/generated/desktop.es.js";
-import "../../../api/generated/entityLists.es.js";
-import "../../../api/generated/events.es.js";
-import "../../../api/generated/files.es.js";
-import "../../../api/generated/folders.es.js";
-import "../../../api/generated/inbox.es.js";
-import "../../../api/generated/links.es.js";
-import "../../../api/generated/market.es.js";
-import "../../../api/generated/onboarding.es.js";
-import "../../../api/generated/operations.es.js";
-import "../../../api/generated/products.es.js";
-import "../../../api/generated/projectDashboard.es.js";
-import "../../../api/generated/projects.es.js";
-import "../../../api/generated/projectFolders.es.js";
-import "../../../api/generated/reviewables.es.js";
-import "../../../api/generated/services.es.js";
-import "../../../api/generated/system.es.js";
-import "../../../api/generated/tasks.es.js";
-import "../../../api/generated/teams.es.js";
-import "../../../api/generated/thumbnails.es.js";
-import "../../../api/generated/uRIs.es.js";
-import "../../../api/generated/users.es.js";
-import "../../../api/generated/versions.es.js";
-import "../../../api/generated/workfiles.es.js";
-import "../../../api/generated/ynputCloud.es.js";
-import "../../../api/generated/grouping.es.js";
-import "../../../api/generated/views.es.js";
-import "../../../api/queries/actions/getActions.es.js";
-import "../../../api/queries/activities/getActivities.es.js";
-import "../../../api/queries/activities/updateReaction.es.js";
-import "../../../api/queries/activities/getMentions.es.js";
-import "../../../api/queries/activities/getCategories.es.js";
-import "../../../api/queries/addons/getAddons.es.js";
-import "../../../api/queries/addons/updateAddons.es.js";
-import "../../../api/queries/attributes/getAttributes.es.js";
-import "../../../api/queries/attributes/updateAttributes.es.js";
-import "../../../api/queries/authentication/getAuthentication.es.js";
-import "../../../api/queries/bundles/getBundles.es.js";
-import "../../../api/queries/bundles/updateBundles.es.js";
-import "../../../api/queries/cloud/cloud.es.js";
-import "../../../api/queries/columnStats/metricTargets.es.js";
-import "../../../api/queries/columnStats/groupCounts.es.js";
-import "../../../api/queries/config/getConfig.es.js";
-import "../../../api/queries/config/updateConfig.es.js";
-import "../../../api/queries/entities/getEntity.es.js";
-import "../../../api/queries/entities/getEntityPanel.es.js";
-import "../../../api/queries/overview/getOverview.es.js";
-import "../../../api/queries/overview/updateOverview.es.js";
-import "../../../api/queries/versions/getVersionsProducts.es.js";
-import "../../../api/queries/links/getEntityLinks.es.js";
-import "../../../api/queries/entities/updateEntity.es.js";
-import "../../../api/queries/entityLists/getLists.es.js";
-import "../../../api/queries/entityLists/updateLists.es.js";
-import "../../../api/queries/entityLists/getListsAttributes.es.js";
-import "../../../api/queries/entityLists/listItemsColumnStats.es.js";
-import "../../../api/queries/entityLists/updateListsAttributes.es.js";
-import "../../../api/queries/entityLists/listFolders.es.js";
-import "../../../api/queries/folders/getFolders.es.js";
-import "../../../api/queries/folders/getFolderDeleteInfo.es.js";
-import "../../../api/queries/grouping/getGrouping.es.js";
-import "../../../api/queries/links/updateLinks.es.js";
-import "../../../api/queries/links/getLinks.es.js";
-import "../../../api/queries/permissions/getPermissions.es.js";
-import "../../../api/queries/products/createProduct.es.js";
-import "../../../api/queries/products/getFolderProducts.es.js";
-import "../../../api/queries/project/getProject.es.js";
-import "../../../api/queries/project/updateProject.es.js";
-import "../../../api/queries/projectFolders/projectFolders.es.js";
-import "../../../api/queries/review/getReview.es.js";
-import "../../../api/queries/review/updateReview.es.js";
-import "../../../api/queries/share/share.es.js";
-import "../../../api/queries/system/getSystem.es.js";
-import "../../../api/queries/tasks/getTasks.es.js";
-import "../../../api/queries/tasks/updateTasks.es.js";
-import "../../../api/queries/teams/getTeams.es.js";
-import "../../../api/queries/userDashboard/getUserDashboard.es.js";
-import "../../../api/queries/users/getUsers.es.js";
-import "../../../api/queries/users/updateUsers.es.js";
-import "../../../api/queries/users/guests.es.js";
-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 "../../../api/queries/uris/getUris.es.js";
-import "../../../util/pubsub.es.js";
-import "../../../context/RemoteModulesContext.es.js";
-import "../../../../../_virtual/runtime.es.js";
-import "../../../../../_virtual/semver.es.js";
-import "../../../context/PowerpackContextInstance.es.js";
-import "../../../context/UriContext.es.js";
-import "../../../context/DetailsPanelContextInstance.es.js";
-import "../../../context/SubtasksModulesContextInstance.es.js";
-import "../../../context/ThumbnailUploaderContext.es.js";
-import "../../../context/SettingsPanelContext.es.js";
-import "../../../context/pip/PiPProvider.es.js";
-import "react-dom";
-import "../../../context/pip/PiPWrapper.es.js";
-import "../../../context/AddonProjectContext.es.js";
-import "../../../context/AddonContext.es.js";
-import "../../../context/MenuContext.es.js";
-import "../../../context/WebsocketContext.es.js";
-import "../../../context/GlobalContext.es.js";
-import "../../../context/ProjectContext.es.js";
-import "../../../context/ProjectFoldersContextInstance.es.js";
-import "../../../context/EntityUpdatesContextInstance.es.js";
-import "../../ContextMenu/ContextMenuContext.es.js";
-/* empty css                                    */
-import "clsx";
-import "../../Feed/context/FeedContext.es.js";
-import "../../Feed/components/Tooltips/UserTooltipItem.es.js";
-import "../../Feed/components/Tooltips/UserTooltip/UserTooltip.styled.es.js";
-import "../../Feed/components/Tooltips/TeamTooltip/TeamTooltip.styled.es.js";
-import "../../Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.es.js";
-import "../../Feed/components/FileUploadPreview/FileUploadPreview.styled.es.js";
-import "../../Feed/components/FileUploadPreview/Mimes/TextMime.es.js";
-import tt from "react-markdown";
-import rt from "remark-emoji";
-import ot from "remark-gfm";
-import it from "remark-directive";
-import mt from "remark-directive-rehype";
-import "../../Feed/components/CommentInput/CommentInput.es.js";
-import "../../Feed/components/ReactionContainer/Reactions.styled.es.js";
-import "../../Feed/components/FilesGrid/FilesGrid.styled.es.js";
-import "../../Feed/components/FileUploadCard/FileUploadCard.styled.es.js";
-import "../../Feed/components/ActivityComment/ActivityComment.styled.es.js";
-import "../../Feed/components/ActivityCheckbox/ActivityCheckbox.styled.es.js";
-import "../../../components/AddonLoadingScreen/AddonLoadingScreen.es.js";
-import "../../../../../node_modules/match-sorter/dist/match-sorter.esm.es.js";
-import "../../../components/AccessSearchInput/AccessSearchInput.styled.es.js";
-import "../../../components/AccessUser/AccessUser.es.js";
-import "../../../components/AttributeEditor/AttributeEditor.es.js";
-import "../../../components/AttributeEditor/attributeTypeMap.es.js";
-import "../../../components/Badge/Badge.es.js";
-import "../../../components/Chips/Chips.es.js";
-import "date-fns";
-import "../../../components/DateRangePicker/DateRangePicker.styled.es.js";
-import "../../../components/LinksManager/CellEditingDialog.es.js";
-import "../../../components/DeleteEntitiesConfirm/DeleteConfirmContent.es.js";
-import "../../../components/DeleteEntitiesConfirm/DeleteEntitiesConfirmDialog.styled.es.js";
-import "../../../../../_virtual/index.es.js";
-import "../../../../../node_modules/refractor/lib/common.es.js";
-import "../../../../../node_modules/refractor/lib/all.es.js";
-/* empty css                                                                                 */
-import "../../../components/DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
-import "../../../components/DoneCheckbox/DoneCheckbox.es.js";
-import "../../../components/EarlyPreview/EarlyPreview.es.js";
-import "../../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";
-import "../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
-import "../../../components/InfoMessage/InfoMessage.es.js";
-import "@dnd-kit/core";
-import "@dnd-kit/sortable";
-import "../../../components/EnumEditor/EnumEditor.styled.es.js";
-import "../../../components/EntityPanelUploader/EntityPanelUploader.styled.es.js";
-import "axios";
-import "../../../components/ReviewablesList/ReviewablesList.styled.es.js";
-import "../../../components/ReviewablesList/ReviewablesUpload.styled.es.js";
-import "../../../components/EntityPath/EntityPath.styled.es.js";
-import "../../../components/EntityPath/SegmentProvider.es.js";
-import "../../../components/FeaturedVersionOrder/FeaturedVersionOrder.es.js";
-import "../../../components/Feedback/FeedbackContextInstance.es.js";
-import "../../../components/Feedback/SupportBubble.es.js";
-import "../../../components/FileThumbnail/FileThumbnail.es.js";
-import "../../../components/LegacyBadge/LegacyBadge.es.js";
-import "../../../components/LinksManager/LinksManager.styled.es.js";
-import "../../EntityPickerDialog/EntityPickerDialog.es.js";
-import "../../../components/Powerpack/PowerpackButton.es.js";
-import "../../../components/Powerpack/FreeTrialLink.es.js";
-import "../../../components/Powerpack/PowerpackDialog.styled.es.js";
-import "../../../components/Powerpack/CTAButton.es.js";
-import "../../../components/Powerpack/RequiredAddonVersion.es.js";
-import "../../../components/ProjectTableSettings/ProjectTableSettings.es.js";
-import "../../../components/ProjectTableSettings/ColumnsSettings.es.js";
-import "../../../components/SizeSlider/SizeSlider.es.js";
-import "react-router-dom";
-import "../../Slicer/components/Slicer.es.js";
-import "../../Slicer/context/SlicerContextInstance.es.js";
-import "../../Slicer/components/SlicerDropdownFallback.es.js";
-import "../../NewEntity/components/NewEntity.es.js";
-import "@tanstack/react-virtual";
-import "@tanstack/react-table";
-import "../buildTreeTableColumns.es.js";
-import "../ProjectTreeTable.styled.es.js";
-import "../components/HeaderActionButton.es.js";
-import "../components/RowSelectionHeader.es.js";
-import "../components/SelectionCell.es.js";
-import "../context/CellEditingContext.es.js";
-import "../../../components/SearchFilter/filterDates.es.js";
-import "short-uuid";
-import "../utils/columnIds.es.js";
-import "../context/SelectionCellsContext.es.js";
-import "../context/ProjectTableQueriesContext.es.js";
-import "../context/ColumnSettingsContext.es.js";
-import "../context/ProjectTableContextInstance.es.js";
-import "../context/ClipboardContext.es.js";
-import "../context/SelectedRowsContext.es.js";
-import "../context/DetailsPanelEntityContext.es.js";
-import "../context/ProjectDataContextInstance.es.js";
-import "../components/TableFooterRow.es.js";
-import "./CellWidget.es.js";
-import "./CollapsedWidget.es.js";
-import "./DateWidget.es.js";
-import "./EnumWidget.es.js";
-import "./EnumCellValue.es.js";
-import "./TextWidget.es.js";
-import "./BooleanWidget.es.js";
-import "./EntityNameWidget.es.js";
-import "./EntityWidget.es.js";
-import "./GroupHeaderWidget.es.js";
-import "./ThumbnailWidget.es.js";
-import "./LinksWidget.es.js";
-import "./EmptyWidget.es.js";
-import "./ErrorWidget.es.js";
-import "../../NewEntity/context/NewEntityContextInstance.es.js";
-import "../../NewEntity/components/NewEntityForm.es.js";
-import "../../Slicer/hooks/useTableDataBySlice.es.js";
-import "react-redux";
-import "../../../components/ReviewableCard/ReviewableCard.es.js";
-import "../../../components/ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
-import "../../../components/SearchFilter/CustomDateRangeDialog.es.js";
-import "../../../components/SettingsPanel/SettingsPanel.es.js";
-import "../../../components/SettingsPanel/SettingsPanelItemTemplate.es.js";
-import "../../../components/ShareOptionIcon/ShareOptionIcon.es.js";
-import "../../../components/SimpleFormDialog/SimpleFormDialog.es.js";
-import "../../../components/StyledLink/StyledLink.es.js";
-import "../../../components/SyncButton/SyncButton.es.js";
-import "../../../components/TableGridSwitch/TableGridSwitch.es.js";
-import "../../../components/Thumbnail/Thumbnail.styled.es.js";
-import "../../../components/Thumbnail/StackedThumbnails.es.js";
-import "../../../components/ThumbnailSimple/ThumbnailSimple.es.js";
-import "../../../components/VersionUploader/components/UploadVersionDialog.es.js";
-import "../../../components/VersionUploader/context/VersionUploadContextInstance.es.js";
-import "../../../components/Watchers/Watchers.es.js";
-import "../../../components/Menu/Menu.styled.es.js";
-import "../../../components/Menu/MenuItem.es.js";
-import "../../../components/ReviewablesSelector/ReviewablesSelector.es.js";
-import "../../../components/ColumnHeaderMenuUI.es.js";
-import "../../Feed/components/ActivityReference/ActivityReference.styled.es.js";
-import "../../Feed/components/ActivityStatus/ActivityStatus.es.js";
-import "../../Feed/components/ActivityHeader/ActivityHeader.styled.es.js";
-import "../../Feed/components/ActivityDate.es.js";
-import "../../Feed/components/ActivityVersionReview/ActivityVersionReview.styled.es.js";
-import "../../Feed/components/ActivityCategorySelect/ActivityCategorySelect.es.js";
-import "../../Feed/components/ActivityCategorySelect/CategoryDropdownItem.es.js";
-import "../../Feed/components/ActivityCategorySelect/CategoryTag.es.js";
-import "../../Feed/components/ActivityFieldChange/ActivityFieldChange.styled.es.js";
-import "../../Feed/components/ActivityFieldChange/FieldValue.es.js";
-import "../../Feed/components/ActivityAssigneeChange/ActivityAssigneeChange.styled.es.js";
-import "../../Feed/components/ActivityVersions/ActivityVersions.styled.es.js";
-import "../../Feed/components/ActivityGroup/ActivityGroup.styled.es.js";
-import "../../Feed/Feed.styled.es.js";
-import "../../Feed/components/FeedSearchFilter.es.js";
-import "../../DetailsPanel/DetailsPanel.styled.es.js";
-import "../../DetailsPanel/components/DetailsPanelTabs/DetailsPanelTabs.styled.es.js";
-import "../../DetailsPanel/components/DetailsPanelHeader/LinkedTaskRow.styled.es.js";
-import "../../DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
-import "../../../components/PlayableIcon/PlayableIcon.es.js";
-import "../../DetailsPanel/components/DetailsPanelFiles/DetailsPanelFiles.es.js";
-import "../../DetailsPanel/components/DetailsPanelMoreMenu/components/ShareDialog.es.js";
-import "../../DetailsPanel/components/TabHeaderAndFilters/TabHeaderAndFilters.styled.es.js";
-import "../../DetailsPanel/components/SubtasksSearchFilter/SubtasksSearchFilter.es.js";
-import "../../DetailsPanel/components/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
-import "../../DetailsPanel/components/DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
-import "../../Actions/Actions.styled.es.js";
-import "../../Actions/ActionsDropdown/ActionsDropdown.es.js";
-import "../../Actions/ActionIcon.es.js";
-import "../../Views/ViewsMenu/ViewsMenu.es.js";
-import "../../Views/context/ViewsContextInstance.es.js";
-import "../../Views/Views.styled.es.js";
-import "../../Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
-import "../../ListTable/ListTableRow.es.js";
-import "../../ListTable/ListTable.styled.es.js";
-import "../../../context/DeleteEntitiesContext.es.js";
-import "custom-protocol-check";
-import "../components/GroupSettingsFallback.es.js";
+import "../../../components/DetailsPanelDetails/hooks/useMentionSystem.es.js";
+import { useQuillFormats as $ } from "../../../components/DetailsPanelDetails/hooks/useQuillFormats.es.js";
+import V from "react-markdown";
+import tt from "remark-gfm";
+import et from "remark-emoji";
+import rt from "remark-directive";
+import nt from "remark-directive-rehype";
 import S from "styled-components";
-const pt = S(F)`
+import { mentionTypeOptions as ot } from "../../../util/mentionTypeOptions.es.js";
+const it = S(F)`
   position: absolute;
   right: -40px;
   top: 38px;
@@ -311,7 +24,7 @@ const pt = S(F)`
   width: 32px;
   height: 32px;
   padding: 2px;
-`, et = S.div`
+`, st = S.div`
   width: 100%;
   height: min-content;
   padding: 6px 4px;
@@ -319,105 +32,105 @@ const pt = S(F)`
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
-`, nt = ({
-  value: o,
-  isOpen: s,
-  onClose: m,
+`, lt = ({
+  value: r,
+  isOpen: c,
+  onClose: o,
   onSave: x
-}) => /* @__PURE__ */ r.jsx(
+}) => /* @__PURE__ */ e.jsx(
   C,
   {
     header: "Edit Description",
     size: "lg",
-    isOpen: s,
-    onClose: m,
+    isOpen: c,
+    onClose: o,
     style: { maxHeight: "80vh" },
-    children: /* @__PURE__ */ r.jsx(
+    children: /* @__PURE__ */ e.jsx(
       Y,
       {
-        description: o,
+        description: r,
         isLarge: !0,
         isMixed: !1,
         enableEditing: !0,
         initialEdit: !0,
         onChange: x,
-        onCancel: m,
+        onCancel: o,
         isLoading: !1
       }
     )
   }
-), Cp = ({
-  value: o,
-  onChange: s,
-  onCancelEdit: m,
+), Rt = ({
+  value: r,
+  onChange: c,
+  onCancelEdit: o,
   isEditing: x,
   isReadOnly: T,
   onExpand: b,
   showExpand: H
 }) => {
-  const [c, g] = f(""), [E, L] = f(""), [y, O] = f(0), [D, w] = f(!1), k = M(null), e = M(null), v = M(null), N = V(), i = x && !T;
+  const [d, g] = p(""), [E, L] = p(""), [y, O] = p(0), [D, w] = p(!1), k = M(null), s = M(null), v = M(null), N = $(), n = x && !T;
   h(() => {
     if (!v.current) return;
-    const t = new ResizeObserver((p) => {
-      for (const d of p)
-        O(d.contentRect.width);
+    const t = new ResizeObserver((i) => {
+      for (const u of i)
+        O(u.contentRect.width);
     });
     return t.observe(v.current), () => t.disconnect();
   }, []);
-  const { height: l, lines: z } = q(() => {
-    const t = i ? R(c)[0] : o;
+  const { height: a, lines: z } = q(() => {
+    const t = n ? R(d)[0] : r;
     if (!t) return { height: 32, lines: 0 };
     if (!y) return { height: 32, lines: 0 };
-    const p = t.replaceAll(`
+    const i = t.replaceAll(`
 
 `, "[[DN]]").replace(/\n(?!( *[-*+] )|( *\d+\. )|( {0,3}[#|>]))/g, "").replaceAll("[[DN]]", `
-`), u = Math.max(1, Math.floor((y - 7) / 7)), n = p.split(`
-`).reduce((P, Q) => P + Math.max(1, Math.ceil(Q.length / u)), 0);
-    if (n <= 1) return { height: 32, lines: n };
-    const K = 32 + (n - 1) * 20;
-    return { height: Math.min(112, K), lines: n };
-  }, [o, y, i, c]);
+`), f = Math.max(1, Math.floor((y - 7) / 7)), l = i.split(`
+`).reduce((P, Q) => P + Math.max(1, Math.ceil(Q.length / f)), 0);
+    if (l <= 1) return { height: 32, lines: l };
+    const K = 32 + (l - 1) * 20;
+    return { height: Math.min(112, K), lines: l };
+  }, [r, y, n, d]);
   h(() => {
     if (!k.current) return;
     const t = k.current.innerHTML;
-    L(t), i || g(t);
-  }, [o]), h(() => {
-    i && g(E);
-  }, [i, E]), h(() => {
-    if (i && e.current) {
-      const t = e.current.getEditor();
+    L(t), n || g(t);
+  }, [r]), h(() => {
+    n && g(E);
+  }, [n, E]), h(() => {
+    if (n && s.current) {
+      const t = s.current.getEditor();
       t.focus();
-      const p = t.getLength();
-      t.setSelection(p, 0);
+      const i = t.getLength();
+      t.setSelection(i, 0);
     }
-  }, [i]);
-  const a = j(() => {
-    if (!e.current) return;
-    const p = e.current.getEditor().root.innerHTML, [d] = R(p), u = d.trim(), n = (o || "").trim();
-    u !== n ? s(u) : m?.();
-  }, [s, m, o]), W = j(
+  }, [n]);
+  const m = j(() => {
+    if (!s.current) return;
+    const i = s.current.getEditor().root.innerHTML, [u] = R(i), f = u.trim(), l = (r || "").trim();
+    f !== l ? c(f) : o?.();
+  }, [c, o, r]), W = j(
     (t) => {
-      if (!(e.current && e.current.getEditingArea().contains(t.relatedTarget))) {
+      if (!(s.current && s.current.getEditingArea().contains(t.relatedTarget))) {
         if (t.relatedTarget instanceof HTMLElement && t.relatedTarget.closest(".expand-button")) {
-          m?.();
+          o?.();
           return;
         }
-        a();
+        m();
       }
     },
-    [a]
+    [m]
   ), A = j(
     (t) => {
-      t.key === "Escape" ? (t.stopPropagation(), m?.()) : t.key === "Enter" && (t.metaKey || t.ctrlKey) && (t.preventDefault(), t.stopPropagation(), a());
+      t.key === "Escape" ? (t.stopPropagation(), o?.()) : t.key === "Enter" && (t.metaKey || t.ctrlKey) && (t.preventDefault(), t.stopPropagation(), m());
     },
-    [a, m]
+    [m, o]
   ), B = {
     toolbar: !1,
     magicUrl: !0
   };
-  return !o && !i ? null : /* @__PURE__ */ r.jsxs("div", { ref: v, style: { width: "100%", height: l, position: "relative", minWidth: 0 }, children: [
-    H && z >= 3 && /* @__PURE__ */ r.jsx(
-      pt,
+  return !r && !n ? null : /* @__PURE__ */ e.jsxs("div", { ref: v, style: { width: "100%", height: a, position: "relative", minWidth: 0 }, children: [
+    H && z >= 3 && /* @__PURE__ */ e.jsx(
+      it,
       {
         icon: "expand_content",
         className: "field-tools",
@@ -427,48 +140,48 @@ const pt = S(F)`
         }
       }
     ),
-    i && !D ? /* @__PURE__ */ r.jsx(
+    n && !D ? /* @__PURE__ */ e.jsx(
       U,
       {
-        style: { height: l },
+        style: { height: a },
         className: "block-shortcuts compact",
         onBlur: W,
         onKeyDown: A,
-        children: /* @__PURE__ */ r.jsx(G, { style: { height: l }, children: /* @__PURE__ */ r.jsx(_, { style: { height: l }, children: /* @__PURE__ */ r.jsx(
+        children: /* @__PURE__ */ e.jsx(G, { style: { height: a }, children: /* @__PURE__ */ e.jsx(_, { style: { height: a }, children: /* @__PURE__ */ e.jsx(
           I,
           {
-            ref: e,
+            ref: s,
             theme: "snow",
-            value: c,
+            value: d,
             onChange: g,
             modules: B,
             formats: N
           }
         ) }) })
       }
-    ) : /* @__PURE__ */ r.jsx(J, { className: "read-only", style: { height: l, overflow: "auto" }, children: /* @__PURE__ */ r.jsx(et, { className: "markdown-content", children: /* @__PURE__ */ r.jsx(
-      tt,
+    ) : /* @__PURE__ */ e.jsx(J, { className: "read-only", style: { height: a, overflow: "auto" }, children: /* @__PURE__ */ e.jsx(st, { className: "markdown-content", children: /* @__PURE__ */ e.jsx(
+      V,
       {
-        remarkPlugins: [ot, rt, it, mt],
+        remarkPlugins: [tt, et, rt, nt],
         urlTransform: (t) => t,
-        children: o || ""
+        children: r || ""
       }
     ) }) }),
-    /* @__PURE__ */ r.jsx(X, { ref: k, children: /* @__PURE__ */ r.jsx(Z, { typeOptions: $, initValue: o || "" }) }),
-    /* @__PURE__ */ r.jsx(
-      nt,
+    /* @__PURE__ */ e.jsx(X, { ref: k, children: /* @__PURE__ */ e.jsx(Z, { typeOptions: ot, initValue: r || "" }) }),
+    /* @__PURE__ */ e.jsx(
+      lt,
       {
         isOpen: D,
         onClose: () => w(!1),
-        value: c || o,
+        value: d || r,
         onSave: (t) => {
-          s(t), w(!1);
+          c(t), w(!1);
         }
       }
     )
   ] });
 };
 export {
-  Cp as MarkdownWidget
+  Rt as MarkdownWidget
 };
 //# sourceMappingURL=MarkdownWidget.es.js.map

package/dist/shared/src/containers/ProjectTreeTable/widgets/MarkdownWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/MarkdownWidget.tsx"],"sourcesContent":["import { FC, useRef, useEffect, useState, useCallback, useMemo } from 'react'\nimport ReactQuill from 'react-quill-ayon'\nimport { Button, Dialog } from '@ynput/ayon-react-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { QuillListStyles } from '@shared/components/QuillListStyles'\nimport {\n  StyledEditor,\n  StyledQuillContainer,\n  StyledHiddenMarkdown,\n  StyledMarkdown,\n} from '@shared/components/DetailsPanelDetails/DescriptionSection.styles'\nimport { DescriptionSection } from '@shared/components/DetailsPanelDetails'\nimport InputMarkdownConvert from '@shared/containers/Feed/components/CommentInput/InputMarkdownConvert'\nimport { convertToMarkdown } from '@shared/containers/Feed/components/CommentInput/quillToMarkdown'\nimport { mentionTypeOptions, useQuillFormats } from '@shared/components/DetailsPanelDetails/hooks'\nimport ReactMarkdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\nimport emoji from 'remark-emoji'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\nimport styled from 'styled-components'\n\nconst ExpandButton = styled(Button)`\n  position: absolute;\n  right: -40px;\n  top: 38px;\n  z-index: 100;\n  width: 32px;\n  height: 32px;\n  padding: 2px;\n`\n\nconst InnerMarkdown = styled.div`\n  width: 100%;\n  height: min-content;\n  padding: 6px 4px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n`\n\ninterface MarkdownEditorDialogProps {\n  value: string\n  isOpen: boolean\n  onClose: () => void\n  onSave: (value: string) => void\n}\n\nconst MarkdownEditorDialog: FC<MarkdownEditorDialogProps> = ({\n  value,\n  isOpen,\n  onClose,\n  onSave,\n}) => {\n  return (\n    <Dialog\n      header=\"Edit Description\"\n      size=\"lg\"\n      isOpen={isOpen}\n      onClose={onClose}\n      style={{ maxHeight: '80vh' }}\n    >\n      <DescriptionSection\n        description={value}\n        isLarge={true}\n        isMixed={false}\n        enableEditing={true}\n        initialEdit={true}\n        onChange={onSave}\n        onCancel={onClose}\n        isLoading={false}\n      />\n    </Dialog>\n  )\n}\n\nexport interface MarkdownWidgetProps extends WidgetBaseProps {\n  value: string\n  isReadOnly?: boolean\n  onExpand?: () => void\n  showExpand?: boolean\n}\n\nexport const MarkdownWidget: FC<MarkdownWidgetProps> = ({\n  value: initialValue,\n  onChange,\n  onCancelEdit,\n  isEditing,\n  isReadOnly,\n  onExpand,\n  showExpand,\n}) => {\n  const [editorValue, setEditorValue] = useState('')\n  const [descriptionHtml, setDescriptionHtml] = useState('')\n  const [width, setWidth] = useState(0)\n  const [isExpandOpen, setIsExpandOpen] = useState(false)\n  const markdownRef = useRef<HTMLDivElement>(null)\n  const editorRef = useRef<any>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const conditionalFormats = useQuillFormats()\n\n  const isActuallyEditing = isEditing && !isReadOnly\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width)\n      }\n    })\n    resizeObserver.observe(containerRef.current)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const { height, lines } = useMemo(() => {\n    const valueToMeasure = isActuallyEditing ? convertToMarkdown(editorValue)[0] : initialValue\n    if (!valueToMeasure) return { height: 32, lines: 0 }\n    if (!width) return { height: 32, lines: 0 } // fallback or initial state\n\n    const normalizedValue = valueToMeasure\n      .replaceAll('\\n\\n', '[[DN]]')\n      .replace(/\\n(?!( *[-*+] )|( *\\d+\\. )|( {0,3}[#|>]))/g, '')\n      .replaceAll('[[DN]]', '\\n')\n\n    // Estimate lines based on text and width\n    // Assuming ~7px average char width for standard UI font at this scale\n    const charWidth = 7\n    const charsPerLine = Math.max(1, Math.floor((width - 7) / charWidth)) // 7px padding adjustment\n\n    const lines = normalizedValue.split('\\n').reduce((acc: number, line: string) => {\n      return acc + Math.max(1, Math.ceil(line.length / charsPerLine))\n    }, 0)\n\n    if (lines <= 1) return { height: 32, lines }\n    const calculatedHeight = 32 + (lines - 1) * 20\n    return { height: Math.min(112, calculatedHeight), lines }\n  }, [initialValue, width, isActuallyEditing, editorValue])\n\n  // Convert markdown to HTML once on mount/value change\n  useEffect(() => {\n    if (!markdownRef.current) return\n    const html = markdownRef.current.innerHTML\n    setDescriptionHtml(html)\n    if (!isActuallyEditing) {\n      setEditorValue(html)\n    }\n  }, [initialValue])\n\n  // Sync editor value when entering edit mode\n  useEffect(() => {\n    if (isActuallyEditing) {\n      setEditorValue(descriptionHtml)\n    }\n  }, [isActuallyEditing, descriptionHtml])\n\n  // Autofocus when editing\n  useEffect(() => {\n    if (isActuallyEditing && editorRef.current) {\n      const quill = editorRef.current.getEditor()\n      quill.focus()\n      const len = quill.getLength()\n      quill.setSelection(len, 0)\n    }\n  }, [isActuallyEditing])\n\n  const handleSave = useCallback(() => {\n    if (!editorRef.current) return\n    const quill = editorRef.current.getEditor()\n    const html = quill.root.innerHTML\n    const [markdown] = convertToMarkdown(html)\n\n    // Only save if content actually changed\n    const currentMarkdown = markdown.trim()\n    const previousMarkdown = (initialValue || '').trim()\n\n    if (currentMarkdown !== previousMarkdown) {\n      onChange(currentMarkdown)\n    } else {\n      onCancelEdit?.()\n    }\n  }, [onChange, onCancelEdit, initialValue])\n\n  const handleBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // Check if the blur event is caused by clicking inside the editor (e.g. toolbar)\n      if (editorRef.current) {\n        const editorElement = editorRef.current.getEditingArea()\n        // If the newly focused element is still within the editor, don't trigger save\n        if (editorElement.contains(e.relatedTarget as Node)) {\n          return\n        }\n      }\n      // If it's the expand button, close but stop editing but don't save\n      if (e.relatedTarget instanceof HTMLElement && e.relatedTarget.closest('.expand-button')) {\n        onCancelEdit?.()\n        return\n      }\n      handleSave()\n    },\n    [handleSave],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        onCancelEdit?.()\n      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        e.stopPropagation()\n        handleSave()\n      }\n    },\n    [handleSave, onCancelEdit],\n  )\n\n  const modules = {\n    toolbar: false,\n    magicUrl: true,\n  }\n\n  if (!initialValue && !isActuallyEditing) return null\n\n  return (\n    <div ref={containerRef} style={{ width: '100%', height, position: 'relative', minWidth: 0 }}>\n      {showExpand && lines >= 3 && (\n        <ExpandButton\n          icon=\"expand_content\"\n          className=\"field-tools\"\n          variant=\"text\"\n          onClick={() => {\n            setIsExpandOpen(true)\n            onExpand?.()\n          }}\n        />\n      )}\n      {isActuallyEditing && !isExpandOpen ? (\n        <StyledEditor\n          style={{ height }}\n          className=\"block-shortcuts compact\"\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n        >\n          <QuillListStyles style={{ height }}>\n            <StyledQuillContainer style={{ height }}>\n              <ReactQuill\n                ref={editorRef}\n                theme=\"snow\"\n                value={editorValue}\n                onChange={setEditorValue}\n                modules={modules}\n                formats={conditionalFormats}\n              />\n            </StyledQuillContainer>\n          </QuillListStyles>\n        </StyledEditor>\n      ) : (\n        <StyledMarkdown className=\"read-only\" style={{ height, overflow: 'auto' }}>\n          <InnerMarkdown className=\"markdown-content\">\n            <ReactMarkdown\n              remarkPlugins={[remarkGfm, emoji, remarkDirective, remarkDirectiveRehype]}\n              urlTransform={(url) => url}\n            >\n              {initialValue || ''}\n            </ReactMarkdown>\n          </InnerMarkdown>\n        </StyledMarkdown>\n      )}\n\n      <StyledHiddenMarkdown ref={markdownRef}>\n        <InputMarkdownConvert typeOptions={mentionTypeOptions} initValue={initialValue || ''} />\n      </StyledHiddenMarkdown>\n\n      <MarkdownEditorDialog\n        isOpen={isExpandOpen}\n        onClose={() => setIsExpandOpen(false)}\n        value={editorValue || initialValue}\n        onSave={(val) => {\n          onChange(val)\n          setIsExpandOpen(false)\n        }}\n      />\n    </div>\n  )\n}\n"],"names":["ExpandButton","styled","Button","InnerMarkdown","MarkdownEditorDialog","value","isOpen","onClose","onSave","jsx","Dialog","DescriptionSection","MarkdownWidget","initialValue","onChange","onCancelEdit","isEditing","isReadOnly","onExpand","showExpand","editorValue","setEditorValue","useState","descriptionHtml","setDescriptionHtml","width","setWidth","isExpandOpen","setIsExpandOpen","markdownRef","useRef","editorRef","containerRef","conditionalFormats","useQuillFormats","isActuallyEditing","useEffect","resizeObserver","entries","entry","height","lines","useMemo","valueToMeasure","convertToMarkdown","normalizedValue","charsPerLine","acc","line","calculatedHeight","html","quill","len","handleSave","useCallback","markdown","currentMarkdown","previousMarkdown","handleBlur","e","handleKeyDown","modules","jsxs","StyledEditor","QuillListStyles","StyledQuillContainer","ReactQuill","StyledMarkdown","ReactMarkdown","remarkGfm","emoji","remarkDirective","remarkDirectiveRehype","url","StyledHiddenMarkdown","InputMarkdownConvert","mentionTypeOptions","val"],"mappings":"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"}
+{"version":3,"file":"MarkdownWidget.es.js","sources":["../../../../../../src/containers/ProjectTreeTable/widgets/MarkdownWidget.tsx"],"sourcesContent":["import { FC, useRef, useEffect, useState, useCallback, useMemo } from 'react'\nimport ReactQuill from 'react-quill-ayon'\nimport { Button, Dialog } from '@ynput/ayon-react-components'\nimport { WidgetBaseProps } from './CellWidget'\nimport { QuillListStyles } from '@shared/components/QuillListStyles'\nimport {\n  StyledEditor,\n  StyledQuillContainer,\n  StyledHiddenMarkdown,\n  StyledMarkdown,\n} from '@shared/components/DetailsPanelDetails/DescriptionSection.styles'\nimport { DescriptionSection } from '@shared/components/DetailsPanelDetails/DescriptionSection'\nimport InputMarkdownConvert from '@shared/containers/Feed/components/CommentInput/InputMarkdownConvert'\nimport { convertToMarkdown } from '@shared/containers/Feed/components/CommentInput/quillToMarkdown'\nimport { mentionTypeOptions } from '@shared/components/DetailsPanelDetails/hooks/useMentionSystem'\nimport { useQuillFormats } from '@shared/components/DetailsPanelDetails/hooks/useQuillFormats'\nimport ReactMarkdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\nimport emoji from 'remark-emoji'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\nimport styled from 'styled-components'\n\nconst ExpandButton = styled(Button)`\n  position: absolute;\n  right: -40px;\n  top: 38px;\n  z-index: 100;\n  width: 32px;\n  height: 32px;\n  padding: 2px;\n`\n\nconst InnerMarkdown = styled.div`\n  width: 100%;\n  height: min-content;\n  padding: 6px 4px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n`\n\ninterface MarkdownEditorDialogProps {\n  value: string\n  isOpen: boolean\n  onClose: () => void\n  onSave: (value: string) => void\n}\n\nconst MarkdownEditorDialog: FC<MarkdownEditorDialogProps> = ({\n  value,\n  isOpen,\n  onClose,\n  onSave,\n}) => {\n  return (\n    <Dialog\n      header=\"Edit Description\"\n      size=\"lg\"\n      isOpen={isOpen}\n      onClose={onClose}\n      style={{ maxHeight: '80vh' }}\n    >\n      <DescriptionSection\n        description={value}\n        isLarge={true}\n        isMixed={false}\n        enableEditing={true}\n        initialEdit={true}\n        onChange={onSave}\n        onCancel={onClose}\n        isLoading={false}\n      />\n    </Dialog>\n  )\n}\n\nexport interface MarkdownWidgetProps extends WidgetBaseProps {\n  value: string\n  isReadOnly?: boolean\n  onExpand?: () => void\n  showExpand?: boolean\n}\n\nexport const MarkdownWidget: FC<MarkdownWidgetProps> = ({\n  value: initialValue,\n  onChange,\n  onCancelEdit,\n  isEditing,\n  isReadOnly,\n  onExpand,\n  showExpand,\n}) => {\n  const [editorValue, setEditorValue] = useState('')\n  const [descriptionHtml, setDescriptionHtml] = useState('')\n  const [width, setWidth] = useState(0)\n  const [isExpandOpen, setIsExpandOpen] = useState(false)\n  const markdownRef = useRef<HTMLDivElement>(null)\n  const editorRef = useRef<any>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const conditionalFormats = useQuillFormats()\n\n  const isActuallyEditing = isEditing && !isReadOnly\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width)\n      }\n    })\n    resizeObserver.observe(containerRef.current)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const { height, lines } = useMemo(() => {\n    const valueToMeasure = isActuallyEditing ? convertToMarkdown(editorValue)[0] : initialValue\n    if (!valueToMeasure) return { height: 32, lines: 0 }\n    if (!width) return { height: 32, lines: 0 } // fallback or initial state\n\n    const normalizedValue = valueToMeasure\n      .replaceAll('\\n\\n', '[[DN]]')\n      .replace(/\\n(?!( *[-*+] )|( *\\d+\\. )|( {0,3}[#|>]))/g, '')\n      .replaceAll('[[DN]]', '\\n')\n\n    // Estimate lines based on text and width\n    // Assuming ~7px average char width for standard UI font at this scale\n    const charWidth = 7\n    const charsPerLine = Math.max(1, Math.floor((width - 7) / charWidth)) // 7px padding adjustment\n\n    const lines = normalizedValue.split('\\n').reduce((acc: number, line: string) => {\n      return acc + Math.max(1, Math.ceil(line.length / charsPerLine))\n    }, 0)\n\n    if (lines <= 1) return { height: 32, lines }\n    const calculatedHeight = 32 + (lines - 1) * 20\n    return { height: Math.min(112, calculatedHeight), lines }\n  }, [initialValue, width, isActuallyEditing, editorValue])\n\n  // Convert markdown to HTML once on mount/value change\n  useEffect(() => {\n    if (!markdownRef.current) return\n    const html = markdownRef.current.innerHTML\n    setDescriptionHtml(html)\n    if (!isActuallyEditing) {\n      setEditorValue(html)\n    }\n  }, [initialValue])\n\n  // Sync editor value when entering edit mode\n  useEffect(() => {\n    if (isActuallyEditing) {\n      setEditorValue(descriptionHtml)\n    }\n  }, [isActuallyEditing, descriptionHtml])\n\n  // Autofocus when editing\n  useEffect(() => {\n    if (isActuallyEditing && editorRef.current) {\n      const quill = editorRef.current.getEditor()\n      quill.focus()\n      const len = quill.getLength()\n      quill.setSelection(len, 0)\n    }\n  }, [isActuallyEditing])\n\n  const handleSave = useCallback(() => {\n    if (!editorRef.current) return\n    const quill = editorRef.current.getEditor()\n    const html = quill.root.innerHTML\n    const [markdown] = convertToMarkdown(html)\n\n    // Only save if content actually changed\n    const currentMarkdown = markdown.trim()\n    const previousMarkdown = (initialValue || '').trim()\n\n    if (currentMarkdown !== previousMarkdown) {\n      onChange(currentMarkdown)\n    } else {\n      onCancelEdit?.()\n    }\n  }, [onChange, onCancelEdit, initialValue])\n\n  const handleBlur = useCallback(\n    (e: React.FocusEvent) => {\n      // Check if the blur event is caused by clicking inside the editor (e.g. toolbar)\n      if (editorRef.current) {\n        const editorElement = editorRef.current.getEditingArea()\n        // If the newly focused element is still within the editor, don't trigger save\n        if (editorElement.contains(e.relatedTarget as Node)) {\n          return\n        }\n      }\n      // If it's the expand button, close but stop editing but don't save\n      if (e.relatedTarget instanceof HTMLElement && e.relatedTarget.closest('.expand-button')) {\n        onCancelEdit?.()\n        return\n      }\n      handleSave()\n    },\n    [handleSave],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation()\n        onCancelEdit?.()\n      } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        e.stopPropagation()\n        handleSave()\n      }\n    },\n    [handleSave, onCancelEdit],\n  )\n\n  const modules = {\n    toolbar: false,\n    magicUrl: true,\n  }\n\n  if (!initialValue && !isActuallyEditing) return null\n\n  return (\n    <div ref={containerRef} style={{ width: '100%', height, position: 'relative', minWidth: 0 }}>\n      {showExpand && lines >= 3 && (\n        <ExpandButton\n          icon=\"expand_content\"\n          className=\"field-tools\"\n          variant=\"text\"\n          onClick={() => {\n            setIsExpandOpen(true)\n            onExpand?.()\n          }}\n        />\n      )}\n      {isActuallyEditing && !isExpandOpen ? (\n        <StyledEditor\n          style={{ height }}\n          className=\"block-shortcuts compact\"\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n        >\n          <QuillListStyles style={{ height }}>\n            <StyledQuillContainer style={{ height }}>\n              <ReactQuill\n                ref={editorRef}\n                theme=\"snow\"\n                value={editorValue}\n                onChange={setEditorValue}\n                modules={modules}\n                formats={conditionalFormats}\n              />\n            </StyledQuillContainer>\n          </QuillListStyles>\n        </StyledEditor>\n      ) : (\n        <StyledMarkdown className=\"read-only\" style={{ height, overflow: 'auto' }}>\n          <InnerMarkdown className=\"markdown-content\">\n            <ReactMarkdown\n              remarkPlugins={[remarkGfm, emoji, remarkDirective, remarkDirectiveRehype]}\n              urlTransform={(url) => url}\n            >\n              {initialValue || ''}\n            </ReactMarkdown>\n          </InnerMarkdown>\n        </StyledMarkdown>\n      )}\n\n      <StyledHiddenMarkdown ref={markdownRef}>\n        <InputMarkdownConvert typeOptions={mentionTypeOptions} initValue={initialValue || ''} />\n      </StyledHiddenMarkdown>\n\n      <MarkdownEditorDialog\n        isOpen={isExpandOpen}\n        onClose={() => setIsExpandOpen(false)}\n        value={editorValue || initialValue}\n        onSave={(val) => {\n          onChange(val)\n          setIsExpandOpen(false)\n        }}\n      />\n    </div>\n  )\n}\n"],"names":["ExpandButton","styled","Button","InnerMarkdown","MarkdownEditorDialog","value","isOpen","onClose","onSave","jsx","Dialog","DescriptionSection","MarkdownWidget","initialValue","onChange","onCancelEdit","isEditing","isReadOnly","onExpand","showExpand","editorValue","setEditorValue","useState","descriptionHtml","setDescriptionHtml","width","setWidth","isExpandOpen","setIsExpandOpen","markdownRef","useRef","editorRef","containerRef","conditionalFormats","useQuillFormats","isActuallyEditing","useEffect","resizeObserver","entries","entry","height","lines","useMemo","valueToMeasure","convertToMarkdown","normalizedValue","charsPerLine","acc","line","calculatedHeight","html","quill","len","handleSave","useCallback","markdown","currentMarkdown","previousMarkdown","handleBlur","e","handleKeyDown","modules","jsxs","StyledEditor","QuillListStyles","StyledQuillContainer","ReactQuill","StyledMarkdown","ReactMarkdown","remarkGfm","emoji","remarkDirective","remarkDirectiveRehype","url","StyledHiddenMarkdown","InputMarkdownConvert","mentionTypeOptions","val"],"mappings":"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"}