@ynput/ayon-frontend-shared 0.4.1 → 0.4.2

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownWidget.cjs.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","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.cjs.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","handleKeyDown","modules","jsxs","StyledEditor","QuillListStyles","StyledQuillContainer","ReactQuill","StyledMarkdown","ReactMarkdown","remarkGfm","emoji","remarkDirective","remarkDirectiveRehype","url","StyledHiddenMarkdown","InputMarkdownConvert","mentionTypeOptions","val"],"mappings":"u/BAuBMA,EAAeC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU5BC,EAAgBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBvBG,EAAsD,CAAC,CAC3D,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,OAAAC,CACF,IAEIC,EAAAA,kBAAAA,IAACC,EAAAA,OAAA,CACC,OAAO,mBACP,KAAK,KACL,OAAAJ,EACA,QAAAC,EACA,MAAO,CAAE,UAAW,MAAA,EAEpB,SAAAE,EAAAA,kBAAAA,IAACE,EAAAA,mBAAA,CACC,YAAaN,EACb,QAAS,GACT,QAAS,GACT,cAAe,GACf,YAAa,GACb,SAAUG,EACV,SAAUD,EACV,UAAW,EAAA,CAAA,CACb,CAAA,EAYOK,GAA0C,CAAC,CACtD,MAAOC,EACP,SAAAC,EACA,aAAAC,EACA,UAAAC,EACA,WAAAC,EACA,SAAAC,EACA,WAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAiBC,CAAkB,EAAIF,EAAAA,SAAS,EAAE,EACnD,CAACG,EAAOC,CAAQ,EAAIJ,EAAAA,SAAS,CAAC,EAC9B,CAACK,EAAcC,CAAe,EAAIN,EAAAA,SAAS,EAAK,EAChDO,EAAcC,EAAAA,OAAuB,IAAI,EACzCC,EAAYD,EAAAA,OAAY,IAAI,EAC5BE,EAAeF,EAAAA,OAAuB,IAAI,EAE1CG,EAAqBC,EAAAA,gBAAA,EAErBC,EAAoBnB,GAAa,CAACC,EAExCmB,EAAAA,UAAU,IAAM,CACd,GAAI,CAACJ,EAAa,QAAS,OAC3B,MAAMK,EAAiB,IAAI,eAAgBC,GAAY,CACrD,UAAWC,KAASD,EAClBZ,EAASa,EAAM,YAAY,KAAK,CAEpC,CAAC,EACD,OAAAF,EAAe,QAAQL,EAAa,OAAO,EACpC,IAAMK,EAAe,WAAA,CAC9B,EAAG,CAAA,CAAE,EAEL,KAAM,CAAE,OAAAG,EAAQ,MAAAC,CAAA,EAAUC,EAAAA,QAAQ,IAAM,CACtC,MAAMC,EAAiBR,EAAoBS,EAAAA,kBAAkBxB,CAAW,EAAE,CAAC,EAAIP,EAC/E,GAAI,CAAC8B,EAAgB,MAAO,CAAE,OAAQ,GAAI,MAAO,CAAA,EACjD,GAAI,CAAClB,EAAO,MAAO,CAAE,OAAQ,GAAI,MAAO,CAAA,EAExC,MAAMoB,EAAkBF,EACrB,WAAW;AAAA;AAAA,EAAQ,QAAQ,EAC3B,QAAQ,6CAA8C,EAAE,EACxD,WAAW,SAAU;AAAA,CAAI,EAKtBG,EAAe,KAAK,IAAI,EAAG,KAAK,OAAOrB,EAAQ,GADnC,CACiD,CAAC,EAE9DgB,EAAQI,EAAgB,MAAM;AAAA,CAAI,EAAE,OAAO,CAACE,EAAaC,IACtDD,EAAM,KAAK,IAAI,EAAG,KAAK,KAAKC,EAAK,OAASF,CAAY,CAAC,EAC7D,CAAC,EAEJ,GAAIL,GAAS,EAAG,MAAO,CAAE,OAAQ,GAAI,MAAAA,CAAAA,EACrC,MAAMQ,EAAmB,IAAMR,EAAQ,GAAK,GAC5C,MAAO,CAAE,OAAQ,KAAK,IAAI,IAAKQ,CAAgB,EAAG,MAAAR,CAAAA,CACpD,EAAG,CAAC5B,EAAcY,EAAOU,EAAmBf,CAAW,CAAC,EAGxDgB,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,EAAY,QAAS,OAC1B,MAAMqB,EAAOrB,EAAY,QAAQ,UACjCL,EAAmB0B,CAAI,EAClBf,GACHd,EAAe6B,CAAI,CAEvB,EAAG,CAACrC,CAAY,CAAC,EAGjBuB,EAAAA,UAAU,IAAM,CACVD,GACFd,EAAeE,CAAe,CAElC,EAAG,CAACY,EAAmBZ,CAAe,CAAC,EAGvCa,EAAAA,UAAU,IAAM,CACd,GAAID,GAAqBJ,EAAU,QAAS,CAC1C,MAAMoB,EAAQpB,EAAU,QAAQ,UAAA,EAChCoB,EAAM,MAAA,EACN,MAAMC,EAAMD,EAAM,UAAA,EAClBA,EAAM,aAAaC,EAAK,CAAC,CAC3B,CACF,EAAG,CAACjB,CAAiB,CAAC,EAEtB,MAAMkB,EAAaC,EAAAA,YAAY,IAAM,CACnC,GAAI,CAACvB,EAAU,QAAS,OAExB,MAAMmB,EADQnB,EAAU,QAAQ,UAAA,EACb,KAAK,UAClB,CAACwB,CAAQ,EAAIX,EAAAA,kBAAkBM,CAAI,EAGnCM,EAAkBD,EAAS,KAAA,EAC3BE,GAAoB5C,GAAgB,IAAI,KAAA,EAE1C2C,IAAoBC,EACtB3C,EAAS0C,CAAe,EAExBzC,IAAA,CAEJ,EAAG,CAACD,EAAUC,EAAcF,CAAY,CAAC,EAEnC6C,EAAaJ,EAAAA,YAChB,GAAwB,CAEvB,GAAI,EAAAvB,EAAU,SACUA,EAAU,QAAQ,eAAA,EAEtB,SAAS,EAAE,aAAqB,GAKpD,IAAI,EAAE,yBAAyB,aAAe,EAAE,cAAc,QAAQ,gBAAgB,EAAG,CACvFhB,IAAA,EACA,MACF,CACAsC,EAAA,EACF,EACA,CAACA,CAAU,CAAA,EAGPM,EAAgBL,EAAAA,YACnB,GAA2B,CACtB,EAAE,MAAQ,UACZ,EAAE,gBAAA,EACFvC,IAAA,GACS,EAAE,MAAQ,UAAY,EAAE,SAAW,EAAE,WAC9C,EAAE,eAAA,EACF,EAAE,gBAAA,EACFsC,EAAA,EAEJ,EACA,CAACA,EAAYtC,CAAY,CAAA,EAGrB6C,EAAU,CACd,QAAS,GACT,SAAU,EAAA,EAGZ,MAAI,CAAC/C,GAAgB,CAACsB,EAA0B,KAG9C0B,EAAAA,kBAAAA,KAAC,MAAA,CAAI,IAAK7B,EAAc,MAAO,CAAE,MAAO,OAAQ,OAAAQ,EAAQ,SAAU,WAAY,SAAU,GACrF,SAAA,CAAArB,GAAcsB,GAAS,GACtBhC,EAAAA,kBAAAA,IAACT,EAAA,CACC,KAAK,iBACL,UAAU,cACV,QAAQ,OACR,QAAS,IAAM,CACb4B,EAAgB,EAAI,EACpBV,IAAA,CACF,CAAA,CAAA,EAGHiB,GAAqB,CAACR,EACrBlB,EAAAA,kBAAAA,IAACqD,EAAAA,aAAA,CACC,MAAO,CAAE,OAAAtB,CAAA,EACT,UAAU,0BACV,OAAQkB,EACR,UAAWC,EAEX,SAAAlD,EAAAA,kBAAAA,IAACsD,EAAAA,gBAAA,CAAgB,MAAO,CAAE,OAAAvB,CAAA,EACxB,SAAA/B,EAAAA,kBAAAA,IAACuD,EAAAA,qBAAA,CAAqB,MAAO,CAAE,OAAAxB,CAAA,EAC7B,SAAA/B,EAAAA,kBAAAA,IAACwD,EAAA,CACC,IAAKlC,EACL,MAAM,OACN,MAAOX,EACP,SAAUC,EACV,QAAAuC,EACA,QAAS3B,CAAA,CAAA,EAEb,CAAA,CACF,CAAA,CAAA,EAGFxB,EAAAA,kBAAAA,IAACyD,EAAAA,eAAA,CAAe,UAAU,YAAY,MAAO,CAAE,OAAA1B,EAAQ,SAAU,MAAA,EAC/D,SAAA/B,wBAACN,EAAA,CAAc,UAAU,mBACvB,SAAAM,EAAAA,kBAAAA,IAAC0D,EAAA,CACC,cAAe,CAACC,EAAWC,EAAOC,EAAiBC,CAAqB,EACxE,aAAeC,GAAQA,EAEtB,SAAA3D,GAAgB,EAAA,CAAA,EAErB,CAAA,CACF,EAGFJ,EAAAA,kBAAAA,IAACgE,EAAAA,qBAAA,CAAqB,IAAK5C,EACzB,SAAApB,EAAAA,kBAAAA,IAACiE,EAAAA,QAAA,CAAqB,YAAaC,EAAAA,mBAAoB,UAAW9D,GAAgB,EAAA,CAAI,CAAA,CACxF,EAEAJ,EAAAA,kBAAAA,IAACL,EAAA,CACC,OAAQuB,EACR,QAAS,IAAMC,EAAgB,EAAK,EACpC,MAAOR,GAAeP,EACtB,OAAS+D,GAAQ,CACf9D,EAAS8D,CAAG,EACZhD,EAAgB,EAAK,CACvB,CAAA,CAAA,CACF,EACF,CAEJ"}