@ynput/ayon-frontend-shared 0.2.33 → 0.2.34

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentInput.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.tsx"],"sourcesContent":["// React and related hooks\nimport React, { FC, useEffect, useMemo, useRef, useState } from 'react'\n\n// Third-party libraries\nimport clsx from 'clsx'\nimport { toast } from 'react-toastify'\nimport ReactQuill, { Quill } from 'react-quill-ayon'\n\n// Components\nimport { Button, Icon, SaveButton } from '@ynput/ayon-react-components'\nimport CommentMentionSelect from '../CommentMentionSelect/CommentMentionSelect'\nimport InputMarkdownConvert from './InputMarkdownConvert'\nimport FilesGrid from '../FilesGrid'\n\n// Styled components\nimport * as Styled from './CommentInput.styled'\nimport { QuillListStyles } from '../../../../components/QuillListStyles'\n\n// Helpers and utilities\nimport getMentionOptions from '../../mentionHelpers/getMentionOptions'\nimport getMentionUsers from '../../mentionHelpers/getMentionUsers'\nimport getMentionTasks from '../../mentionHelpers/getMentionTasks'\nimport getMentionVersions from '../../mentionHelpers/getMentionVersions'\nimport { convertToMarkdown } from './quillToMarkdown'\nimport { handleFileDrop, parseImages, typeWithDelay } from './helpers'\nimport { getModules, quillFormats } from './modules'\n\n// Hooks\nimport useInitialValue from './hooks/useInitialValue'\nimport useSetCursorEnd from './hooks/useSetCursorEnd'\nimport useMentionLink from './hooks/useMentionLink'\nimport useAnnotationsSync from './hooks/useAnnotationsSync'\nimport { useBlendedCategoryColor } from './hooks/useBlendedCategoryColor'\n\n// State management\nimport useAnnotationsUpload from './hooks/useAnnotationsUpload'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { ActivityCategorySelect, SavedAnnotationMetadata } from '../../index'\nimport { CategoryTag } from '../ActivityCategorySelect/CategoryTag'\nimport { useDetailsPanelContext } from '@shared/context'\n\nvar Delta = Quill.import('delta')\n\nconst mentionTypes = ['@', '@@', '@@@']\nexport const mentionTypeOptions = {\n  '@@@': {\n    id: 'task',\n  },\n  '@@': {\n    id: 'version',\n  },\n  '@': {\n    id: 'user',\n    isCircle: true,\n  },\n}\n\ninterface CommentInputProps {\n  initValue: string | null\n  initFiles?: any[]\n  initCategory?: string | null\n  onSubmit: (markdown: string, files: any[], data?: any) => Promise<void>\n  isEditing?: boolean\n  disabled?: boolean\n  isLoading?: boolean\n  isOpen: boolean\n  onOpen?: () => void\n  onClose?: () => void\n}\n\nconst CommentInput: FC<CommentInputProps> = ({\n  initValue,\n  initFiles = [],\n  initCategory = null,\n  onSubmit,\n  isEditing,\n  disabled,\n  isLoading,\n  isOpen,\n  onOpen,\n  onClose,\n}) => {\n  const {\n    projectName,\n    entities,\n    projectInfo,\n    scope,\n    currentTab,\n    mentionSuggestionsData,\n    categories,\n  } = useFeedContext()\n\n  const { hasLicense, onPowerFeature } = useDetailsPanelContext()\n\n  const {\n    users: mentionUsers,\n    versions: mentionVersions,\n    tasks: mentionTasks,\n  } = mentionSuggestionsData || {}\n\n  const [initHeight, setInitHeight] = useState(88)\n  const [editorValue, setEditorValue] = useState('')\n  // file uploads\n  const [files, setFiles] = useState(initFiles)\n  const [filesUploading, setFilesUploading] = useState([])\n  const [isDropping, setIsDropping] = useState(false)\n  const [isSubmitting, setIsSubmitting] = useState(false)\n\n  const { annotations, removeAnnotation, goToAnnotation } = useAnnotationsSync({\n    entityId: entities[0]?.id,\n    filesUploading,\n  })\n\n  // MENTION STATES\n  const [mention, setMention] = useState<null | any>(null)\n  const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0)\n  // CATEGORY STATE\n  const [category, setCategory] = useState<null | string>(initCategory)\n  const categoryOptions = categories.filter((cat) => cat.accessLevel >= 20)\n  const categoryData = categories.find((cat) => cat.name === category)\n  // Compute blended background color for category\n  const blendedCategoryColor = useBlendedCategoryColor(categoryData?.color)\n  // REFS\n  const editorRef = useRef<any>(null)\n  const editorContainerRef = useRef<HTMLDivElement>(null)\n\n  const markdownRef = useRef<HTMLDivElement>(null)\n\n  // if there is an initial value, set it so the editor is prefilled\n  useInitialValue({\n    markdownRef,\n    initValue,\n    setEditorValue,\n    setInitHeight,\n    isOpen: isOpen,\n    filter: currentTab,\n  })\n\n  // When editing, set selection to the end of the editor\n  useSetCursorEnd({ initHeight, editorRef, isEditing })\n  // create a new quill format for mentions and registers it\n  useMentionLink({ projectName })\n\n  // focus on editor when opened\n  useEffect(() => {\n    if (isOpen) {\n      editorRef.current?.getEditor()?.enable()\n      // block autofocus if opened from an annotation\n      if (annotations.length > 0 && files.length === 0) {\n        return\n      }\n\n      editorRef.current?.focus()\n    }\n    // We don't set annotations or files as useEffect dependencies, because we don't want to focus\n    // the input if it's already open but annotations change (e.g. are removed).\n  }, [isOpen, editorRef])\n\n  mentionTypes.sort((a, b) => b.length - a.length)\n\n  const mentionOptions = useMemo(\n    () =>\n      getMentionOptions(\n        mention?.type,\n        {\n          '@': () => getMentionUsers(mentionUsers),\n          '@@': () => getMentionVersions(mentionVersions),\n          '@@@': () => getMentionTasks(mentionTasks, projectInfo.taskTypes),\n        },\n        mention?.search,\n      ),\n    [mentionTasks, mentionVersions, mentionUsers, mention?.type, mention?.search],\n  )\n\n  // show first 5 and filter itself out\n  const shownMentionOptions = mentionOptions.slice(0, 5)\n\n  // triggered when a mention is selected\n  const [newSelection, setNewSelection] = useState<null | number>()\n\n  useEffect(() => {\n    if (newSelection) {\n      setNewSelection(null)\n      // now we set selection to the end of the mention\n      const quill = editorRef.current.getEditor()\n      quill.setSelection(newSelection)\n    }\n  }, [newSelection])\n\n  const handleSelectMention = (selectedOption: any) => {\n    // get option text\n    const quill = editorRef.current.getEditor()\n\n    const typePrefix = mention.type // the type of mention: @, @@, @@@\n    const search = typePrefix + (mention.search || '') // the full search string: @Tim\n    const mentionLabel = typePrefix + selectedOption.label // the label of the mention: @Tim Bailey\n    // @ts-expect-error\n    const type = mentionTypeOptions[typePrefix] // the type of mention: user, version, task\n    const href = `${type?.id}:${selectedOption.id}` // the href of the mention: user:user.123\n\n    // get selection delta\n    const selection = quill.getSelection(true)\n    const selectionIndex = selection?.index || 0\n    const startIndex = selectionIndex - search.length // the start index of the search\n\n    // first delete the search string\n    quill.deleteText(startIndex, search.length)\n\n    //  insert embed link\n    quill.insertText(startIndex, mentionLabel, 'mention', href)\n\n    const endIndex = startIndex + mentionLabel.length\n\n    // insert a space after the mention\n    quill.updateContents(new Delta().retain(endIndex).insert(' '))\n\n    // remove single \\n after mention\n    quill.updateContents(new Delta().retain(endIndex + 1).delete(1))\n\n    // set selection to the end of the mention + 1\n    setNewSelection(endIndex + 1)\n\n    // reset mention state\n    setMention(null)\n    setMentionSelectedIndex(0)\n  }\n\n  const handleSelectChange = (option: any) => {\n    handleSelectMention(option)\n  }\n\n  const handleChange = (content: string, delta: any, _: any, editor: any) => {\n    let currentCharacter =\n      (delta.ops[0] && delta.ops[0].insert) || (delta.ops[1] && delta.ops[1].insert)\n\n    const tabOrEnter = currentCharacter === '\\n' || currentCharacter === '\\t'\n    // find the first option\n    const selectedOption = mentionOptions[mentionSelectedIndex]\n\n    if (mention && tabOrEnter && selectedOption) {\n      // get option text\n      const retain = (delta.ops[0] && delta.ops[0].retain) || 0\n      // prevent default\n\n      // @ts-ignore\n      handleSelectMention(selectedOption, retain)\n\n      return\n    }\n\n    setEditorValue(content)\n\n    const isDelete = delta.ops.length === 2 && !!delta.ops[1].delete\n\n    if (!currentCharacter && isDelete) {\n      currentCharacter = editor.getText(delta.ops[0].retain - 1, 1)\n    }\n\n    const isMention = mentionTypes.includes(currentCharacter)\n\n    if (isMention) {\n      const mentionIndex = delta.ops.findIndex((op: any) => 'insert' in op || 'delete' in op)\n      const mention = currentCharacter\n      let retain = mentionIndex === 0 ? 0 : delta.ops[mentionIndex - 1].retain\n      if (isDelete) retain = retain - 1\n\n      // for each mention denotation char, check if it is a mention\n      // sort by length of mention denotation char\n      let mentionMatch = null\n\n      // loop through each mention denotation char, with longest first. First one to match is the one we want\n      for (const chars of mentionTypes) {\n        let isMatch = true\n        // start with the last character\n        if (chars.endsWith(mention)) {\n          // loop through the chars backwards\n          for (let i = chars.length - 1; i >= 0; i--) {\n            // skip first character as that's already been checked\n            if (i === 0) continue\n            const char = chars[i - 1]\n            const indexInDelta = retain - (chars.length - i)\n            const valueCharAtIndex = editor.getText(indexInDelta, 1)\n            if (valueCharAtIndex !== char) {\n              isMatch = false\n              break\n            }\n          }\n        } else {\n          isMatch = false\n        }\n\n        if (isMatch) {\n          // console.log('match!!!', chars)\n          mentionMatch = chars\n          break\n        }\n      }\n\n      if (mentionMatch) {\n        setMention({\n          type: mentionMatch,\n          retain: retain,\n        })\n      } else {\n        setMention(null)\n        setMentionSelectedIndex(0)\n      }\n    } else {\n      // get full string between mention and new delta\n      // This is where SEARCH is handled\n      if (mention) {\n        const retain = delta.ops[0].retain\n        // if space is pressed, remove mention\n        if (currentCharacter === ' ' || !retain) {\n          setMention(null)\n          setMentionSelectedIndex(0)\n          return\n        }\n\n        let distanceMentionToRetain = retain - mention.retain\n        if (!isDelete) distanceMentionToRetain++\n        const mentionFull = editor.getText(mention.retain, distanceMentionToRetain)\n        const mentionSearch = mentionFull.replace(mention.type.slice(-1), '')\n        //  check for space in mentionFull\n        if (mentionFull.includes(' ')) {\n          setMention(null)\n          setMentionSelectedIndex(0)\n        } else {\n          setMention({\n            ...mention,\n            search: mentionSearch?.toLowerCase(),\n          })\n        }\n      } else {\n        // just deleting any text\n        const quill = editorRef.current.getEditor()\n        const currentSelection = quill.getSelection(false)\n        const currentFormat = quill.getFormat(currentSelection?.index, currentSelection?.length)\n        if (currentFormat.mention) {\n          // if format is mention, delete the whole mention\n          const [lineBlock] = quill.getLine(currentSelection.index - 1) || []\n          const ops = lineBlock?.cache?.delta?.ops || []\n          // get last op with attributes mention: true\n          const lastMentionOp = ops.reverse().find((op: any) => op.attributes?.mention)\n          if (lastMentionOp) {\n            const mentionLength = lastMentionOp.insert.length\n            quill.deleteText(currentSelection.index - mentionLength, mentionLength)\n          }\n        }\n      }\n    }\n  }\n\n  const addTextToEditor = (type: string) => {\n    // get editor retain\n    const quill = editorRef.current.getEditor()\n\n    let retain = quill.getSelection(true)?.index || 0\n\n    // get character at retain\n    const currentCharacter = quill.getText(retain - 1, 1)\n\n    // if the current character is a character, increment retain\n    const addSpace = currentCharacter !== ' ' && currentCharacter\n    if (addSpace) {\n      quill.insertText(retain, ' ')\n      retain++\n    }\n\n    // This is hack AF, but it works\n    typeWithDelay(quill, retain, type)\n  }\n\n  const handleMentionButton = (type: string) => {\n    // first check if mention is already open\n    if (mention) {\n      const { type, retain, search = '' } = mention\n\n      const quill = editorRef.current.getEditor()\n      const length = type.length + search.length\n      const start = retain - type.length + 1\n      // delete the mention\n      quill.deleteText(start, length)\n    }\n\n    addTextToEditor(type)\n  }\n\n  const handleOpenClick = () => {\n    if (isOpen || disabled) return\n\n    onOpen && onOpen()\n  }\n\n  const handleClose = () => {\n    // get editor value\n    const editor = editorRef.current.getEditor()\n    const text = editor.getText()\n    if (text.length < 2 || isEditing) {\n      setEditorValue('')\n    }\n\n    // always close editor\n    onClose && onClose()\n  }\n\n  const handleFileUploaded = ({ file, data }: any) => {\n    const newFile = {\n      id: data.id,\n      name: file.name,\n      mime: file.type,\n      size: file.size,\n      order: files.length,\n    }\n\n    setFiles((prev) => [...prev, newFile])\n    // remove from uploading\n    setFilesUploading((prev) => prev.filter((uploading: any) => uploading.name !== file.name))\n\n    return newFile\n  }\n\n  const handleFileRemove = (id: string, name: string, isUnsavedAnnotation: boolean) => {\n    if (isUnsavedAnnotation) {\n      // remove from annotations (if it's an unsaved annotation)\n      removeAnnotation?.(id)\n    } else {\n      // remove file from files\n      setFiles((prev) => prev.filter((file) => file.id !== id))\n      // remove from uploading\n      setFilesUploading((prev) => {\n        return prev.filter((file: any) => file.name !== name)\n      })\n    }\n  }\n\n  const handleFileProgress = (e: any, file: any) => {\n    const progress = Math.round((e.loaded * 100) / e.total)\n    if (progress !== 100) {\n      const uploadProgress = {\n        name: file.name,\n        progress,\n        type: file.type,\n        order: files.length + filesUploading.length,\n      }\n\n      // @ts-ignore\n      setFilesUploading((prev) => {\n        // replace or add new progress\n        const newProgress = prev.filter((name: any) => name.name !== file.name)\n        return [...newProgress, uploadProgress]\n      })\n    }\n  }\n\n  // when a file is not dropped onto the comment input\n  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    setIsDropping(false)\n    // upload file\n    handleFileDrop(e, projectName, handleFileProgress, handleFileUploaded)\n  }\n\n  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDropping(true)\n  }\n\n  const uploadAnnotations = useAnnotationsUpload({\n    projectName,\n    onSuccess: handleFileUploaded,\n  })\n\n  const handleSubmit = async () => {\n    try {\n      setIsSubmitting(true)\n      // upload any annotations first\n      let annotationFiles = []\n      let annotationMetadata: SavedAnnotationMetadata[] = []\n\n      if (annotations.length) {\n        const { files, metadata } = await uploadAnnotations(annotations)\n        annotationFiles = files\n        annotationMetadata = metadata\n      }\n\n      // convert to markdown\n      const [markdown] = convertToMarkdown(editorValue)\n\n      // remove img query params\n      const markdownParsed = parseImages(markdown)\n\n      const uploadedFiles = [...files, ...annotationFiles]\n\n      if ((markdownParsed || uploadedFiles.length) && onSubmit) {\n        try {\n          await onSubmit(markdownParsed, uploadedFiles, {\n            annotations: annotationMetadata,\n            category,\n          })\n          // only clear if onSubmit is successful\n          setEditorValue('')\n          setFiles([])\n        } catch (error) {\n          // error is handled in rtk query mutation\n          return\n        }\n      }\n    } catch (error) {\n      console.error(error)\n      toast.error('Something went wrong')\n    } finally {\n      setIsSubmitting(false)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (mention) {\n      // close mention on escape\n      if (e.key === 'Escape') {\n        setMention(null)\n        setMentionSelectedIndex(0)\n        return\n      }\n\n      // add top search of mention\n      if (mention && e.key === 'Tab') {\n        // we handle this in the onChange\n      }\n\n      const arrowDirection = e.key === 'ArrowUp' ? -1 : e.key === 'ArrowDown' ? 1 : 0\n\n      if (arrowDirection) {\n        // navigate through mentions\n        e.preventDefault()\n        let newIndex = mentionSelectedIndex + arrowDirection\n        if (newIndex < 0) newIndex = shownMentionOptions.length - 1\n        if (newIndex >= shownMentionOptions.length) newIndex = 0\n        setMentionSelectedIndex(newIndex)\n      }\n\n      if (e.key === 'Enter') {\n        // we handle this in the onChange\n      }\n    }\n\n    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {\n      handleSubmit()\n    }\n\n    if (e.key === 'Escape') {\n      handleClose()\n    }\n  }\n\n  let quillMinHeight: number | undefined = isOpen ? initHeight + 41 : 44\n  if (isEditing) quillMinHeight = undefined\n\n  // QUILL CONFIG\n  const modules = useMemo(\n    () =>\n      getModules({\n        imageUploader: {\n          projectName,\n          onUpload: handleFileUploaded,\n          onUploadProgress: handleFileProgress,\n        },\n      }),\n    [projectName, setFiles, setFilesUploading],\n  )\n\n  const allFiles = [...annotations, ...(files || []), ...filesUploading].sort(\n    (a, b) => a.order - b.order,\n  )\n  const compactGrid = allFiles.length > 6\n\n  // disable version mentions for folders\n  let mentionsError = null\n  if (entities.length && entities[0].entityType === 'folder') {\n    if (mention?.type === '@@') {\n      mentionsError = 'Version mentions are disabled for folders'\n    }\n  }\n\n  return (\n    <>\n      <Styled.AutoHeight\n        className={clsx('comment-container', { isOpen, isEditing })}\n        onDragOver={handleDragOver}\n        onDragLeave={() => setIsDropping(false)}\n        onDrop={handleDrop}\n        onClick={() => setIsDropping(false)}\n        onKeyDown={(e) => e.stopPropagation()}\n      >\n        <Styled.Comment\n          className={clsx('block-shortcuts', {\n            isOpen,\n            isClosed: !isOpen || disabled,\n            isEditing,\n            isDropping,\n            disabled,\n            isLoading,\n            isSubmitting,\n            category: !!category,\n          })}\n          onKeyDown={handleKeyDown}\n          onClick={handleOpenClick}\n          $categoryPrimary={categoryData?.color}\n          $categoryTertiary={blendedCategoryColor.primary}\n          $categorySecondary={blendedCategoryColor.secondary}\n        >\n          <Styled.Markdown ref={markdownRef}>\n            {/* this is purely used to translate the markdown into html for Editor */}\n            <InputMarkdownConvert typeOptions={mentionTypeOptions} initValue={initValue} />\n          </Styled.Markdown>\n\n          {/* file uploads */}\n          {isOpen && (\n            <FilesGrid\n              files={allFiles}\n              isCompact={compactGrid}\n              onRemove={handleFileRemove}\n              style={{ borderBottom: '1px solid var(--md-sys-color-outline-variant)' }}\n              projectName={projectName}\n              onAnnotationClick={goToAnnotation}\n            />\n          )}\n          {isOpen && !disabled ? (\n            <QuillListStyles ref={editorContainerRef}>\n              <ActivityCategorySelect\n                value={category}\n                categories={categoryOptions}\n                onChange={(c) => setCategory(c)}\n                isCompact={isEditing}\n                hasPowerpack={hasLicense}\n                onPowerFeature={onPowerFeature}\n                style={{\n                  position: isEditing ? 'relative' : 'absolute',\n                  left: 4,\n                  top: isEditing ? 0 : 4,\n                }}\n              />\n\n              <ReactQuill\n                theme=\"snow\"\n                style={{ minHeight: quillMinHeight, maxHeight: 300 }}\n                ref={editorRef}\n                value={editorValue}\n                onChange={handleChange}\n                readOnly={!isOpen}\n                placeholder={'Comment or mention with @user, @@version, @@@task...'}\n                modules={modules}\n                formats={quillFormats}\n              />\n            </QuillListStyles>\n          ) : (\n            <Styled.Placeholder>\n              {disabled ? 'Commenting is disabled across multiple projects.' : 'Add a comment...'}\n            </Styled.Placeholder>\n          )}\n\n          <Styled.Footer>\n            <Styled.Buttons>\n              {/* mention a user */}\n              <Button\n                icon=\"person\"\n                variant=\"text\"\n                onClick={() => handleMentionButton('@')}\n                data-tooltip={'Mention user'}\n                data-shortcut={'@'}\n              />\n              {/* mention a version */}\n              <Button\n                icon=\"layers\"\n                variant=\"text\"\n                onClick={() => handleMentionButton('@@')}\n                data-tooltip={'Mention version'}\n                data-shortcut={'@@'}\n              />\n              {/* mention a task */}\n              <Button\n                icon=\"check_circle\"\n                variant=\"text\"\n                onClick={() => handleMentionButton('@@@')}\n                data-tooltip={'Mention task'}\n                data-shortcut={'@@@'}\n              />\n            </Styled.Buttons>\n            <Styled.Buttons>\n              {isEditing && (\n                <Button variant=\"text\" onClick={handleClose}>\n                  Cancel\n                </Button>\n              )}\n              <SaveButton\n                label={isEditing ? 'Save' : 'Comment'}\n                className=\"comment\"\n                active={!!editorValue || !!files.length}\n                onClick={handleSubmit}\n                disabled={isLoading}\n              />\n            </Styled.Buttons>\n          </Styled.Footer>\n\n          <Styled.Dropzone className={clsx({ show: isDropping && isOpen })}>\n            <Icon icon=\"cloud_upload\" />\n          </Styled.Dropzone>\n        </Styled.Comment>\n        <CommentMentionSelect\n          mention={mention}\n          options={shownMentionOptions}\n          onChange={handleSelectChange}\n          types={mentionTypes}\n          // @ts-ignore\n          config={mentionTypeOptions[mention?.type]}\n          noneFound={!shownMentionOptions.length && mention?.search}\n          noneFoundAtAll={!shownMentionOptions.length && !mention?.search}\n          selectedIndex={mentionSelectedIndex}\n          // @ts-ignore\n          error={mentionsError}\n        />\n      </Styled.AutoHeight>\n    </>\n  )\n}\n\nexport default CommentInput\n"],"names":["Delta","Quill","mentionTypes","mentionTypeOptions","CommentInput","initValue","initFiles","initCategory","onSubmit","isEditing","disabled","isLoading","isOpen","onOpen","onClose","projectName","entities","projectInfo","scope","currentTab","mentionSuggestionsData","categories","useFeedContext","hasLicense","onPowerFeature","useDetailsPanelContext","mentionUsers","mentionVersions","mentionTasks","initHeight","setInitHeight","useState","editorValue","setEditorValue","files","setFiles","filesUploading","setFilesUploading","isDropping","setIsDropping","isSubmitting","setIsSubmitting","annotations","removeAnnotation","goToAnnotation","useAnnotationsSync","_a","mention","setMention","mentionSelectedIndex","setMentionSelectedIndex","category","setCategory","categoryOptions","cat","categoryData","blendedCategoryColor","useBlendedCategoryColor","editorRef","useRef","editorContainerRef","markdownRef","useInitialValue","useSetCursorEnd","useMentionLink","useEffect","_b","_c","a","b","mentionOptions","useMemo","getMentionOptions","getMentionUsers","getMentionVersions","getMentionTasks","shownMentionOptions","newSelection","setNewSelection","handleSelectMention","selectedOption","quill","typePrefix","search","mentionLabel","type","href","selection","startIndex","endIndex","handleSelectChange","option","handleChange","content","delta","_","editor","currentCharacter","tabOrEnter","isDelete","mentionIndex","op","retain","mentionMatch","chars","isMatch","i","char","indexInDelta","distanceMentionToRetain","mentionFull","mentionSearch","currentSelection","lineBlock","lastMentionOp","mentionLength","addTextToEditor","typeWithDelay","handleMentionButton","length","start","handleOpenClick","handleClose","handleFileUploaded","file","data","newFile","prev","uploading","handleFileRemove","id","name","isUnsavedAnnotation","handleFileProgress","e","progress","uploadProgress","handleDrop","handleFileDrop","handleDragOver","uploadAnnotations","useAnnotationsUpload","handleSubmit","annotationFiles","annotationMetadata","metadata","markdown","convertToMarkdown","markdownParsed","parseImages","uploadedFiles","error","toast","handleKeyDown","arrowDirection","newIndex","quillMinHeight","modules","getModules","allFiles","compactGrid","mentionsError","jsx","Fragment","jsxs","Styled.AutoHeight","clsx","Styled.Comment","Styled.Markdown","InputMarkdownConvert","FilesGrid","QuillListStyles","ActivityCategorySelect","c","ReactQuill","quillFormats","Styled.Placeholder","Styled.Footer","Styled.Buttons","Button","SaveButton","Styled.Dropzone","Icon","CommentMentionSelect"],"mappings":"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"}
+{"version":3,"file":"CommentInput.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.tsx"],"sourcesContent":["// React and related hooks\nimport React, { FC, useEffect, useMemo, useRef, useState } from 'react'\n\n// Third-party libraries\nimport clsx from 'clsx'\nimport { toast } from 'react-toastify'\nimport ReactQuill, { Quill } from 'react-quill-ayon'\n\n// Components\nimport { Button, Icon, SaveButton } from '@ynput/ayon-react-components'\nimport CommentMentionSelect from '../CommentMentionSelect/CommentMentionSelect'\nimport InputMarkdownConvert from './InputMarkdownConvert'\nimport FilesGrid from '../FilesGrid'\n\n// Styled components\nimport * as Styled from './CommentInput.styled'\nimport { QuillListStyles } from '../../../../components/QuillListStyles'\n\n// Helpers and utilities\nimport getMentionOptions from '../../mentionHelpers/getMentionOptions'\nimport getMentionUsers from '../../mentionHelpers/getMentionUsers'\nimport getMentionTasks from '../../mentionHelpers/getMentionTasks'\nimport getMentionVersions from '../../mentionHelpers/getMentionVersions'\nimport { convertToMarkdown } from './quillToMarkdown'\nimport { handleFileDrop, parseImages, typeWithDelay } from './helpers'\nimport { getModules, quillFormats } from './modules'\n\n// Hooks\nimport useInitialValue from './hooks/useInitialValue'\nimport useSetCursorEnd from './hooks/useSetCursorEnd'\nimport useMentionLink from './hooks/useMentionLink'\nimport useAnnotationsSync from './hooks/useAnnotationsSync'\nimport { useBlendedCategoryColor } from './hooks/useBlendedCategoryColor'\n\n// State management\nimport useAnnotationsUpload from './hooks/useAnnotationsUpload'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { ActivityCategorySelect, SavedAnnotationMetadata } from '../../index'\nimport { useDetailsPanelContext } from '@shared/context'\n\nvar Delta = Quill.import('delta')\n\nconst mentionTypes = ['@', '@@', '@@@']\nexport const mentionTypeOptions = {\n  '@@@': {\n    id: 'task',\n  },\n  '@@': {\n    id: 'version',\n  },\n  '@': {\n    id: 'user',\n    isCircle: true,\n  },\n}\n\ninterface CommentInputProps {\n  initValue: string | null\n  initFiles?: any[]\n  initCategory?: string | null\n  onSubmit: (markdown: string, files: any[], data?: any) => Promise<void>\n  isEditing?: boolean\n  disabled?: boolean\n  isLoading?: boolean\n  isOpen: boolean\n  onOpen?: () => void\n  onClose?: () => void\n}\n\nconst CommentInput: FC<CommentInputProps> = ({\n  initValue,\n  initFiles = [],\n  initCategory = null,\n  onSubmit,\n  isEditing,\n  disabled,\n  isLoading,\n  isOpen,\n  onOpen,\n  onClose,\n}) => {\n  const {\n    projectName,\n    entities,\n    projectInfo,\n    scope,\n    currentTab,\n    mentionSuggestionsData,\n    categories,\n    isGuest,\n  } = useFeedContext()\n\n  const { hasLicense, onPowerFeature } = useDetailsPanelContext()\n\n  const {\n    users: mentionUsers,\n    versions: mentionVersions,\n    tasks: mentionTasks,\n  } = mentionSuggestionsData || {}\n\n  const [initHeight, setInitHeight] = useState(88)\n  const [editorValue, setEditorValue] = useState('')\n  // file uploads\n  const [files, setFiles] = useState(initFiles)\n  const [filesUploading, setFilesUploading] = useState([])\n  const [isDropping, setIsDropping] = useState(false)\n  const [isSubmitting, setIsSubmitting] = useState(false)\n\n  const { annotations, removeAnnotation, goToAnnotation } = useAnnotationsSync({\n    entityId: entities[0]?.id,\n    filesUploading,\n  })\n\n  // MENTION STATES\n  const [mention, setMention] = useState<null | any>(null)\n  const [mentionSelectedIndex, setMentionSelectedIndex] = useState(0)\n  // CATEGORY STATE\n  const [category, setCategory] = useState<null | string>(initCategory)\n  const categoryOptions = categories.filter((cat) => cat.accessLevel >= 20)\n  const categoryData = categories.find((cat) => cat.name === category)\n  // Compute blended background color for category\n  const blendedCategoryColor = useBlendedCategoryColor(categoryData?.color)\n  // REFS\n  const editorRef = useRef<any>(null)\n  const editorContainerRef = useRef<HTMLDivElement>(null)\n\n  const markdownRef = useRef<HTMLDivElement>(null)\n\n  // if there is an initial value, set it so the editor is prefilled\n  useInitialValue({\n    markdownRef,\n    initValue,\n    setEditorValue,\n    setInitHeight,\n    isOpen: isOpen,\n    filter: currentTab,\n  })\n\n  // When editing, set selection to the end of the editor\n  useSetCursorEnd({ initHeight, editorRef, isEditing })\n  // create a new quill format for mentions and registers it\n  useMentionLink({ projectName })\n\n  // focus on editor when opened\n  useEffect(() => {\n    if (isOpen) {\n      editorRef.current?.getEditor()?.enable()\n      // block autofocus if opened from an annotation\n      if (annotations.length > 0 && files.length === 0) {\n        return\n      }\n\n      editorRef.current?.focus()\n    }\n    // We don't set annotations or files as useEffect dependencies, because we don't want to focus\n    // the input if it's already open but annotations change (e.g. are removed).\n  }, [isOpen, editorRef])\n\n  mentionTypes.sort((a, b) => b.length - a.length)\n\n  const mentionOptions = useMemo(\n    () =>\n      getMentionOptions(\n        mention?.type,\n        {\n          '@': () => getMentionUsers(mentionUsers),\n          '@@': () => getMentionVersions(mentionVersions),\n          '@@@': () => getMentionTasks(mentionTasks, projectInfo.taskTypes),\n        },\n        mention?.search,\n      ),\n    [mentionTasks, mentionVersions, mentionUsers, mention?.type, mention?.search],\n  )\n\n  // show first 5 and filter itself out\n  const shownMentionOptions = mentionOptions.slice(0, 5)\n\n  // triggered when a mention is selected\n  const [newSelection, setNewSelection] = useState<null | number>()\n\n  useEffect(() => {\n    if (newSelection) {\n      setNewSelection(null)\n      // now we set selection to the end of the mention\n      const quill = editorRef.current.getEditor()\n      quill.setSelection(newSelection)\n    }\n  }, [newSelection])\n\n  const handleSelectMention = (selectedOption: any) => {\n    // get option text\n    const quill = editorRef.current.getEditor()\n\n    const typePrefix = mention.type // the type of mention: @, @@, @@@\n    const search = typePrefix + (mention.search || '') // the full search string: @Tim\n    const mentionLabel = typePrefix + selectedOption.label // the label of the mention: @Tim Bailey\n    // @ts-expect-error\n    const type = mentionTypeOptions[typePrefix] // the type of mention: user, version, task\n    const href = `${type?.id}:${selectedOption.id}` // the href of the mention: user:user.123\n\n    // get selection delta\n    const selection = quill.getSelection(true)\n    const selectionIndex = selection?.index || 0\n    const startIndex = selectionIndex - search.length // the start index of the search\n\n    // first delete the search string\n    quill.deleteText(startIndex, search.length)\n\n    //  insert embed link\n    quill.insertText(startIndex, mentionLabel, 'mention', href)\n\n    const endIndex = startIndex + mentionLabel.length\n\n    // insert a space after the mention\n    quill.updateContents(new Delta().retain(endIndex).insert(' '))\n\n    // remove single \\n after mention\n    quill.updateContents(new Delta().retain(endIndex + 1).delete(1))\n\n    // set selection to the end of the mention + 1\n    setNewSelection(endIndex + 1)\n\n    // reset mention state\n    setMention(null)\n    setMentionSelectedIndex(0)\n  }\n\n  const handleSelectChange = (option: any) => {\n    handleSelectMention(option)\n  }\n\n  const handleChange = (content: string, delta: any, _: any, editor: any) => {\n    let currentCharacter =\n      (delta.ops[0] && delta.ops[0].insert) || (delta.ops[1] && delta.ops[1].insert)\n\n    const tabOrEnter = currentCharacter === '\\n' || currentCharacter === '\\t'\n    // find the first option\n    const selectedOption = mentionOptions[mentionSelectedIndex]\n\n    if (mention && tabOrEnter && selectedOption && !isGuest) {\n      // get option text\n      const retain = (delta.ops[0] && delta.ops[0].retain) || 0\n      // prevent default\n\n      // @ts-ignore\n      handleSelectMention(selectedOption, retain)\n\n      return\n    }\n\n    setEditorValue(content)\n\n    const isDelete = delta.ops.length === 2 && !!delta.ops[1].delete\n\n    if (!currentCharacter && isDelete) {\n      currentCharacter = editor.getText(delta.ops[0].retain - 1, 1)\n    }\n\n    const isMention = mentionTypes.includes(currentCharacter)\n\n    if (isMention) {\n      const mentionIndex = delta.ops.findIndex((op: any) => 'insert' in op || 'delete' in op)\n      const mention = currentCharacter\n      let retain = mentionIndex === 0 ? 0 : delta.ops[mentionIndex - 1].retain\n      if (isDelete) retain = retain - 1\n\n      // for each mention denotation char, check if it is a mention\n      // sort by length of mention denotation char\n      let mentionMatch = null\n\n      // loop through each mention denotation char, with longest first. First one to match is the one we want\n      for (const chars of mentionTypes) {\n        let isMatch = true\n        // start with the last character\n        if (chars.endsWith(mention)) {\n          // loop through the chars backwards\n          for (let i = chars.length - 1; i >= 0; i--) {\n            // skip first character as that's already been checked\n            if (i === 0) continue\n            const char = chars[i - 1]\n            const indexInDelta = retain - (chars.length - i)\n            const valueCharAtIndex = editor.getText(indexInDelta, 1)\n            if (valueCharAtIndex !== char) {\n              isMatch = false\n              break\n            }\n          }\n        } else {\n          isMatch = false\n        }\n\n        if (isMatch) {\n          // console.log('match!!!', chars)\n          mentionMatch = chars\n          break\n        }\n      }\n\n      if (mentionMatch) {\n        setMention({\n          type: mentionMatch,\n          retain: retain,\n        })\n      } else {\n        setMention(null)\n        setMentionSelectedIndex(0)\n      }\n    } else {\n      // get full string between mention and new delta\n      // This is where SEARCH is handled\n      if (mention) {\n        const retain = delta.ops[0].retain\n        // if space is pressed, remove mention\n        if (currentCharacter === ' ' || !retain) {\n          setMention(null)\n          setMentionSelectedIndex(0)\n          return\n        }\n\n        let distanceMentionToRetain = retain - mention.retain\n        if (!isDelete) distanceMentionToRetain++\n        const mentionFull = editor.getText(mention.retain, distanceMentionToRetain)\n        const mentionSearch = mentionFull.replace(mention.type.slice(-1), '')\n        //  check for space in mentionFull\n        if (mentionFull.includes(' ')) {\n          setMention(null)\n          setMentionSelectedIndex(0)\n        } else {\n          setMention({\n            ...mention,\n            search: mentionSearch?.toLowerCase(),\n          })\n        }\n      } else {\n        // just deleting any text\n        const quill = editorRef.current.getEditor()\n        const currentSelection = quill.getSelection(false)\n        const currentFormat = quill.getFormat(currentSelection?.index, currentSelection?.length)\n        if (currentFormat.mention) {\n          // if format is mention, delete the whole mention\n          const [lineBlock] = quill.getLine(currentSelection.index - 1) || []\n          const ops = lineBlock?.cache?.delta?.ops || []\n          // get last op with attributes mention: true\n          const lastMentionOp = ops.reverse().find((op: any) => op.attributes?.mention)\n          if (lastMentionOp) {\n            const mentionLength = lastMentionOp.insert.length\n            quill.deleteText(currentSelection.index - mentionLength, mentionLength)\n          }\n        }\n      }\n    }\n  }\n\n  const addTextToEditor = (type: string) => {\n    // get editor retain\n    const quill = editorRef.current.getEditor()\n\n    let retain = quill.getSelection(true)?.index || 0\n\n    // get character at retain\n    const currentCharacter = quill.getText(retain - 1, 1)\n\n    // if the current character is a character, increment retain\n    const addSpace = currentCharacter !== ' ' && currentCharacter\n    if (addSpace) {\n      quill.insertText(retain, ' ')\n      retain++\n    }\n\n    // This is hack AF, but it works\n    typeWithDelay(quill, retain, type)\n  }\n\n  const handleMentionButton = (type: string) => {\n    // first check if mention is already open\n    if (mention) {\n      const { type, retain, search = '' } = mention\n\n      const quill = editorRef.current.getEditor()\n      const length = type.length + search.length\n      const start = retain - type.length + 1\n      // delete the mention\n      quill.deleteText(start, length)\n    }\n\n    addTextToEditor(type)\n  }\n\n  const handleOpenClick = () => {\n    if (isOpen || disabled) return\n\n    onOpen && onOpen()\n  }\n\n  const handleClose = () => {\n    // get editor value\n    const editor = editorRef.current.getEditor()\n    const text = editor.getText()\n    if (text.length < 2 || isEditing) {\n      setEditorValue('')\n    }\n\n    // always close editor\n    onClose && onClose()\n  }\n\n  const handleFileUploaded = ({ file, data }: any) => {\n    const newFile = {\n      id: data.id,\n      name: file.name,\n      mime: file.type,\n      size: file.size,\n      order: files.length,\n    }\n\n    setFiles((prev) => [...prev, newFile])\n    // remove from uploading\n    setFilesUploading((prev) => prev.filter((uploading: any) => uploading.name !== file.name))\n\n    return newFile\n  }\n\n  const handleFileRemove = (id: string, name: string, isUnsavedAnnotation: boolean) => {\n    if (isUnsavedAnnotation) {\n      // remove from annotations (if it's an unsaved annotation)\n      removeAnnotation?.(id)\n    } else {\n      // remove file from files\n      setFiles((prev) => prev.filter((file) => file.id !== id))\n      // remove from uploading\n      setFilesUploading((prev) => {\n        return prev.filter((file: any) => file.name !== name)\n      })\n    }\n  }\n\n  const handleFileProgress = (e: any, file: any) => {\n    const progress = Math.round((e.loaded * 100) / e.total)\n    if (progress !== 100) {\n      const uploadProgress = {\n        name: file.name,\n        progress,\n        type: file.type,\n        order: files.length + filesUploading.length,\n      }\n\n      // @ts-ignore\n      setFilesUploading((prev) => {\n        // replace or add new progress\n        const newProgress = prev.filter((name: any) => name.name !== file.name)\n        return [...newProgress, uploadProgress]\n      })\n    }\n  }\n\n  // when a file is not dropped onto the comment input\n  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n    setIsDropping(false)\n    // upload file\n    handleFileDrop(e, projectName, handleFileProgress, handleFileUploaded)\n  }\n\n  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\n    e.preventDefault()\n    e.stopPropagation()\n    setIsDropping(true)\n  }\n\n  const uploadAnnotations = useAnnotationsUpload({\n    projectName,\n    onSuccess: handleFileUploaded,\n  })\n\n  const handleSubmit = async () => {\n    try {\n      setIsSubmitting(true)\n      // upload any annotations first\n      let annotationFiles = []\n      let annotationMetadata: SavedAnnotationMetadata[] = []\n\n      if (annotations.length) {\n        const { files, metadata } = await uploadAnnotations(annotations)\n        annotationFiles = files\n        annotationMetadata = metadata\n      }\n\n      // convert to markdown\n      const [markdown] = convertToMarkdown(editorValue)\n\n      // remove img query params\n      const markdownParsed = parseImages(markdown)\n\n      const uploadedFiles = [...files, ...annotationFiles]\n\n      if ((markdownParsed || uploadedFiles.length) && onSubmit) {\n        try {\n          await onSubmit(markdownParsed, uploadedFiles, {\n            annotations: annotationMetadata,\n            category: isGuest ? null : category, // guests cannot set category (it is done by default on backend)\n          })\n          // only clear if onSubmit is successful\n          setEditorValue('')\n          setFiles([])\n        } catch (error) {\n          // error is handled in rtk query mutation\n          return\n        }\n      }\n    } catch (error) {\n      console.error(error)\n      toast.error('Something went wrong')\n    } finally {\n      setIsSubmitting(false)\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (mention) {\n      // close mention on escape\n      if (e.key === 'Escape') {\n        setMention(null)\n        setMentionSelectedIndex(0)\n        return\n      }\n\n      // add top search of mention\n      if (mention && e.key === 'Tab') {\n        // we handle this in the onChange\n      }\n\n      const arrowDirection = e.key === 'ArrowUp' ? -1 : e.key === 'ArrowDown' ? 1 : 0\n\n      if (arrowDirection) {\n        // navigate through mentions\n        e.preventDefault()\n        let newIndex = mentionSelectedIndex + arrowDirection\n        if (newIndex < 0) newIndex = shownMentionOptions.length - 1\n        if (newIndex >= shownMentionOptions.length) newIndex = 0\n        setMentionSelectedIndex(newIndex)\n      }\n\n      if (e.key === 'Enter') {\n        // we handle this in the onChange\n      }\n    }\n\n    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {\n      handleSubmit()\n    }\n\n    if (e.key === 'Escape') {\n      handleClose()\n    }\n  }\n\n  let quillMinHeight: number | undefined = isOpen ? initHeight + 41 : 44\n  if (isEditing) quillMinHeight = undefined\n\n  // QUILL CONFIG\n  const modules = useMemo(\n    () =>\n      getModules({\n        imageUploader: {\n          projectName,\n          onUpload: handleFileUploaded,\n          onUploadProgress: handleFileProgress,\n        },\n      }),\n    [projectName, setFiles, setFilesUploading],\n  )\n\n  const allFiles = [...annotations, ...(files || []), ...filesUploading].sort(\n    (a, b) => a.order - b.order,\n  )\n  const compactGrid = allFiles.length > 6\n\n  // disable version mentions for folders\n  let mentionsError = null\n  if (entities.length && entities[0].entityType === 'folder') {\n    if (mention?.type === '@@') {\n      mentionsError = 'Version mentions are disabled for folders'\n    }\n  }\n\n  const getCommentPlaceholder = (isOpen?: boolean) => {\n    if (disabled) {\n      if (isGuest) return 'You do not have permission to comment.'\n      return 'Commenting is disabled across multiple projects.'\n    }\n\n    if (isGuest || !isOpen) return 'Leave a comment'\n\n    return 'Comment or mention with @user, @@version, @@@task...'\n  }\n\n  return (\n    <>\n      <Styled.AutoHeight\n        className={clsx('comment-container', { isOpen, isEditing })}\n        onDragOver={handleDragOver}\n        onDragLeave={() => setIsDropping(false)}\n        onDrop={handleDrop}\n        onClick={() => setIsDropping(false)}\n        onKeyDown={(e) => e.stopPropagation()}\n      >\n        <Styled.Comment\n          className={clsx('block-shortcuts', {\n            isOpen,\n            isClosed: !isOpen || disabled,\n            isEditing,\n            isDropping,\n            disabled,\n            isLoading,\n            isSubmitting,\n            category: !!category && !isGuest,\n          })}\n          onKeyDown={handleKeyDown}\n          onClick={handleOpenClick}\n          $categoryPrimary={categoryData?.color}\n          $categoryTertiary={blendedCategoryColor.primary}\n          $categorySecondary={blendedCategoryColor.secondary}\n        >\n          <Styled.Markdown ref={markdownRef}>\n            {/* this is purely used to translate the markdown into html for Editor */}\n            <InputMarkdownConvert typeOptions={mentionTypeOptions} initValue={initValue} />\n          </Styled.Markdown>\n\n          {/* file uploads */}\n          {isOpen && (\n            <FilesGrid\n              files={allFiles}\n              isCompact={compactGrid}\n              onRemove={handleFileRemove}\n              style={{ borderBottom: '1px solid var(--md-sys-color-outline-variant)' }}\n              projectName={projectName}\n              onAnnotationClick={goToAnnotation}\n            />\n          )}\n          {isOpen && !disabled ? (\n            <QuillListStyles ref={editorContainerRef}>\n              {!isGuest && (\n                <ActivityCategorySelect\n                  value={category}\n                  categories={categoryOptions}\n                  onChange={(c) => setCategory(c)}\n                  isCompact={isEditing}\n                  hasPowerpack={hasLicense}\n                  onPowerFeature={onPowerFeature}\n                  style={{\n                    position: isEditing ? 'relative' : 'absolute',\n                    left: 4,\n                    top: isEditing ? 0 : 4,\n                  }}\n                />\n              )}\n\n              <ReactQuill\n                theme=\"snow\"\n                style={{ minHeight: quillMinHeight, maxHeight: 300 }}\n                ref={editorRef}\n                value={editorValue}\n                onChange={handleChange}\n                readOnly={!isOpen}\n                placeholder={getCommentPlaceholder(true)}\n                modules={modules}\n                formats={quillFormats}\n              />\n            </QuillListStyles>\n          ) : (\n            <Styled.Placeholder>{getCommentPlaceholder()}</Styled.Placeholder>\n          )}\n\n          <Styled.Footer>\n            {!isGuest && (\n              <Styled.Buttons>\n                {/* mention a user */}\n                <Button\n                  icon=\"person\"\n                  variant=\"text\"\n                  onClick={() => handleMentionButton('@')}\n                  data-tooltip={'Mention user'}\n                  data-shortcut={'@'}\n                />\n                {/* mention a version */}\n                <Button\n                  icon=\"layers\"\n                  variant=\"text\"\n                  onClick={() => handleMentionButton('@@')}\n                  data-tooltip={'Mention version'}\n                  data-shortcut={'@@'}\n                />\n                {/* mention a task */}\n                <Button\n                  icon=\"check_circle\"\n                  variant=\"text\"\n                  onClick={() => handleMentionButton('@@@')}\n                  data-tooltip={'Mention task'}\n                  data-shortcut={'@@@'}\n                />\n              </Styled.Buttons>\n            )}\n            <Styled.Buttons style={{ marginLeft: 'auto' }}>\n              {isEditing && (\n                <Button variant=\"text\" onClick={handleClose}>\n                  Cancel\n                </Button>\n              )}\n              <SaveButton\n                label={isEditing ? 'Save' : 'Comment'}\n                className=\"comment\"\n                active={!!editorValue || !!files.length}\n                onClick={handleSubmit}\n                disabled={isLoading}\n              />\n            </Styled.Buttons>\n          </Styled.Footer>\n\n          <Styled.Dropzone className={clsx({ show: isDropping && isOpen })}>\n            <Icon icon=\"cloud_upload\" />\n          </Styled.Dropzone>\n        </Styled.Comment>\n        <CommentMentionSelect\n          mention={mention}\n          options={shownMentionOptions}\n          onChange={handleSelectChange}\n          types={mentionTypes}\n          // @ts-ignore\n          config={mentionTypeOptions[mention?.type]}\n          noneFound={!shownMentionOptions.length && mention?.search}\n          noneFoundAtAll={!shownMentionOptions.length && !mention?.search}\n          selectedIndex={mentionSelectedIndex}\n          // @ts-ignore\n          error={mentionsError}\n          isGuest={isGuest}\n        />\n      </Styled.AutoHeight>\n    </>\n  )\n}\n\nexport default CommentInput\n"],"names":["Delta","Quill","mentionTypes","mentionTypeOptions","CommentInput","initValue","initFiles","initCategory","onSubmit","isEditing","disabled","isLoading","isOpen","onOpen","onClose","projectName","entities","projectInfo","scope","currentTab","mentionSuggestionsData","categories","isGuest","useFeedContext","hasLicense","onPowerFeature","useDetailsPanelContext","mentionUsers","mentionVersions","mentionTasks","initHeight","setInitHeight","useState","editorValue","setEditorValue","files","setFiles","filesUploading","setFilesUploading","isDropping","setIsDropping","isSubmitting","setIsSubmitting","annotations","removeAnnotation","goToAnnotation","useAnnotationsSync","_a","mention","setMention","mentionSelectedIndex","setMentionSelectedIndex","category","setCategory","categoryOptions","cat","categoryData","blendedCategoryColor","useBlendedCategoryColor","editorRef","useRef","editorContainerRef","markdownRef","useInitialValue","useSetCursorEnd","useMentionLink","useEffect","_b","_c","a","b","mentionOptions","useMemo","getMentionOptions","getMentionUsers","getMentionVersions","getMentionTasks","shownMentionOptions","newSelection","setNewSelection","handleSelectMention","selectedOption","quill","typePrefix","search","mentionLabel","type","href","selection","startIndex","endIndex","handleSelectChange","option","handleChange","content","delta","_","editor","currentCharacter","tabOrEnter","isDelete","mentionIndex","op","retain","mentionMatch","chars","isMatch","i","char","indexInDelta","distanceMentionToRetain","mentionFull","mentionSearch","currentSelection","lineBlock","lastMentionOp","mentionLength","addTextToEditor","typeWithDelay","handleMentionButton","length","start","handleOpenClick","handleClose","handleFileUploaded","file","data","newFile","prev","uploading","handleFileRemove","id","name","isUnsavedAnnotation","handleFileProgress","e","progress","uploadProgress","handleDrop","handleFileDrop","handleDragOver","uploadAnnotations","useAnnotationsUpload","handleSubmit","annotationFiles","annotationMetadata","metadata","markdown","convertToMarkdown","markdownParsed","parseImages","uploadedFiles","error","toast","handleKeyDown","arrowDirection","newIndex","quillMinHeight","modules","getModules","allFiles","compactGrid","mentionsError","getCommentPlaceholder","jsx","Fragment","jsxs","Styled.AutoHeight","clsx","Styled.Comment","Styled.Markdown","InputMarkdownConvert","FilesGrid","QuillListStyles","ActivityCategorySelect","c","ReactQuill","quillFormats","Styled.Placeholder","Styled.Footer","Styled.Buttons","Button","SaveButton","Styled.Dropzone","Icon","CommentMentionSelect"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.styled.cjs.js

@@ -31,10 +31,10 @@
   --button-color: var(--md-sys-color-primary);
   --button-color-secondary: var(--md-sys-color-surface-container-highest);
   --border-color: var(--md-sys-color-outline-variant);
-  /* CATEGORY */
-  ${({$categoryPrimary:r,$categorySecondary:e,$categoryTertiary:n})=>t(r,e,n)}
 
   &.category {
+    /* CATEGORY */
+    ${({$categoryPrimary:r,$categorySecondary:e,$categoryTertiary:n})=>t(r,e,n)}
     button.comment {
       color: var(--md-sys-color-on-surface);
       &:hover {

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentInput.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const AutoHeight = styled.div`\n  /* use grid tick for auto height transition */\n  display: grid;\n  height: 100%;\n  /* transition: translate 0.1s, margin-top 0.1s; */\n  position: relative;\n\n  /* when closed default */\n  translate: 0 50px;\n  margin-top: -50px;\n\n  /* when open */\n  &.isOpen {\n    translate: 0 0;\n    margin-top: 0;\n  }\n\n  padding: 0 4px 4px 4px;\n  /* when editing */\n  &.isEditing {\n    padding: 0;\n  }\n`\n\nexport type CommentProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\n// Reusable function for category color CSS\nexport const categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --background-color: ${$categoryTertiary};\n    --button-color: ${$categoryPrimary};\n    --button-color-secondary: ${$categorySecondary};\n    --border-color: ${$categoryPrimary};\n  `\n\nexport const Comment = styled.div<CommentProps>`\n  /* VARS */\n  --background-color: var(--md-sys-color-surface-container);\n  --button-color: var(--md-sys-color-primary);\n  --button-color-secondary: var(--md-sys-color-surface-container-highest);\n  --border-color: var(--md-sys-color-outline-variant);\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n    categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n\n  &.category {\n    button.comment {\n      color: var(--md-sys-color-on-surface);\n      &:hover {\n        background-color: var(--button-color);\n        filter: brightness(1.2);\n      }\n    }\n  }\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  &.isDropping.isOpen {\n    border-color: var(--md-sys-color-primary);\n  }\n\n  border-radius: var(--border-radius-l);\n  overflow: hidden;\n  transition: opacity 250ms 250ms, background-color 250ms, border-color 250ms;\n\n  &.isOpen {\n    /* box shadow */\n    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n\n    .quill {\n      background-color: var(--background-color);\n    }\n  }\n\n  .ql-editor.ql-blank::before {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.25;\n  }\n\n  .ql-editor {\n    ol {\n      padding-left: 0;\n    }\n  }\n\n  /* custom mention styles */\n  .ql-editor {\n    .mention {\n      border-radius: var(--border-radius-m);\n      user-select: none;\n      padding: 0 4px;\n      /* remove underline */\n      text-decoration: none;\n\n      white-space: nowrap;\n      cursor: pointer;\n\n      color: var(--button-color);\n      background-color: var(--button-color-secondary);\n\n      &:hover {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 85%, white);\n      }\n      &:active {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 70%, white);\n      }\n    }\n  }\n\n  /* container styles reset */\n  .ql-container.ql-snow {\n    border: none;\n    /* takes into account the top toolbar */\n    height: calc(100% - 41px);\n\n    .ql-editor {\n      max-height: 259px !important;\n\n      /* code block */\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        &::before,\n        &::after {\n          display: none;\n        }\n\n        color: var(--md-sys-color-primary);\n      }\n\n      a[href^='@'] {\n        text-decoration: none;\n        color: var(--md-sys-color-primary);\n      }\n\n      strong {\n        em,\n        u {\n          font-weight: 800;\n        }\n      }\n    }\n\n    /* link popup */\n    .ql-tooltip {\n      &.ql-hidden {\n        display: none;\n      }\n\n      left: 1px !important;\n      top: -29px !important;\n\n      width: 100%;\n\n      box-shadow: none;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-color: var(--md-sys-color-surface-container-low);\n      border-radius: var(--border-radius-l);\n      padding: 4px;\n      overflow: hidden;\n\n      display: flex;\n      align-items: center;\n\n      .ql-preview {\n        flex: 1;\n        max-width: unset;\n      }\n\n      input {\n        flex: 1;\n        border: none;\n        background-color: var(--md-sys-color-surface-container-lowest);\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n      }\n\n      /* remove before text */\n      /* remove save button */\n      &::before,\n      .ql-action {\n        display: none;\n      }\n\n      .ql-remove {\n        color: var(--md-sys-color-on-surface-variant);\n        margin-right: 4px;\n      }\n    }\n  }\n\n  /* CLOSED */\n  &.isClosed {\n    cursor: pointer;\n    .ql-editor > * {\n      cursor: pointer !important;\n    }\n    &:hover:not(.disabled) {\n      background-color: var(--md-sys-color-surface-container-high);\n    }\n\n    .ql-container.ql-snow {\n      padding-bottom: 0;\n      height: 44px;\n\n      .ql-editor {\n        overflow: hidden;\n      }\n    }\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      height: 0;\n      padding: 0;\n      margin: 0;\n      border-width: 0;\n      opacity: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n  }\n\n  &.disabled {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n    border-color: var(--md-sys-color-surface-container-lowest);\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  &.isLoading,\n  &.isSubmitting {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &.isSubmitting {\n    opacity: 0.3;\n  }\n\n  /* toolbar styles */\n  .ql-toolbar.ql-snow {\n    border: none;\n    background-color: var(--background-color);\n    border-bottom: 1px solid var(--md-sys-color-surface-container-hover);\n    padding: var(--padding-s);\n    display: flex;\n    justify-content: flex-end;\n    height: unset;\n    width: unset;\n\n    .ql-formats {\n      height: 32px;\n      margin-left: 8px;\n      margin-right: 0;\n      padding-left: 8px;\n      border-left: 1px solid var(--md-sys-color-surface-container-hover);\n      display: flex;\n      gap: 2px;\n\n      button {\n        float: none;\n        padding: 6px;\n        border-radius: var(--border-radius-m);\n        height: 32px;\n        width: 32px;\n\n        /* highlight when action */\n        &.ql-active {\n          background-color: var(--button-color-secondary);\n          .icon {\n            color: var(--button-color);\n          }\n        }\n      }\n    }\n\n    button:hover {\n      background-color: var(--button-color-secondary);\n    }\n  }\n\n  /* EDITING */\n  &.isEditing {\n    /* remove box shadow */\n    box-shadow: none;\n    /* remove outline */\n    outline: none;\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      display: none;\n    }\n\n    .ql-container.ql-snow {\n      height: 100%;\n\n      .ql-editor {\n        padding: 8px;\n      }\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  padding: var(--padding-m);\n  border-top: 1px solid var(--md-sys-color-surface-container-hover);\n  background-color: var(--background-color);\n  z-index: 100;\n\n  /* remove save button icon */\n  .comment {\n    min-width: 75px;\n    .icon {\n      display: none;\n    }\n    background-color: var(--button-color);\n  }\n`\n\nexport const Buttons = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n\n  button {\n    &.text {\n      &:hover {\n        background-color: var(--button-color-secondary);\n      }\n    }\n  }\n`\n\nexport const Markdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: 0;\n  transition: opacity 0.2s;\n\n  &.show {\n    opacity: 1;\n  }\n\n  background-color: rgba(0, 0, 0, 0.5);\n\n  z-index: 300;\n\n  .icon {\n    font-size: 40px;\n  }\n`\n\nexport const Placeholder = styled.span`\n  padding: 12px 15px;\n  /* italic */\n  font-style: italic;\n  opacity: 0.4;\n`\n"],"names":["AutoHeight","styled","categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":"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"}
+{"version":3,"file":"CommentInput.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const AutoHeight = styled.div`\n  /* use grid tick for auto height transition */\n  display: grid;\n  height: 100%;\n  /* transition: translate 0.1s, margin-top 0.1s; */\n  position: relative;\n\n  /* when closed default */\n  translate: 0 50px;\n  margin-top: -50px;\n\n  /* when open */\n  &.isOpen {\n    translate: 0 0;\n    margin-top: 0;\n  }\n\n  padding: 0 4px 4px 4px;\n  /* when editing */\n  &.isEditing {\n    padding: 0;\n  }\n`\n\nexport type CommentProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\n// Reusable function for category color CSS\nexport const categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --background-color: ${$categoryTertiary};\n    --button-color: ${$categoryPrimary};\n    --button-color-secondary: ${$categorySecondary};\n    --border-color: ${$categoryPrimary};\n  `\n\nexport const Comment = styled.div<CommentProps>`\n  /* VARS */\n  --background-color: var(--md-sys-color-surface-container);\n  --button-color: var(--md-sys-color-primary);\n  --button-color-secondary: var(--md-sys-color-surface-container-highest);\n  --border-color: var(--md-sys-color-outline-variant);\n\n  &.category {\n    /* CATEGORY */\n    ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n      categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n    button.comment {\n      color: var(--md-sys-color-on-surface);\n      &:hover {\n        background-color: var(--button-color);\n        filter: brightness(1.2);\n      }\n    }\n  }\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  &.isDropping.isOpen {\n    border-color: var(--md-sys-color-primary);\n  }\n\n  border-radius: var(--border-radius-l);\n  overflow: hidden;\n  transition: opacity 250ms 250ms, background-color 250ms, border-color 250ms;\n\n  &.isOpen {\n    /* box shadow */\n    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n\n    .quill {\n      background-color: var(--background-color);\n    }\n  }\n\n  .ql-editor.ql-blank::before {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.25;\n  }\n\n  .ql-editor {\n    ol {\n      padding-left: 0;\n    }\n  }\n\n  /* custom mention styles */\n  .ql-editor {\n    .mention {\n      border-radius: var(--border-radius-m);\n      user-select: none;\n      padding: 0 4px;\n      /* remove underline */\n      text-decoration: none;\n\n      white-space: nowrap;\n      cursor: pointer;\n\n      color: var(--button-color);\n      background-color: var(--button-color-secondary);\n\n      &:hover {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 85%, white);\n      }\n      &:active {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 70%, white);\n      }\n    }\n  }\n\n  /* container styles reset */\n  .ql-container.ql-snow {\n    border: none;\n    /* takes into account the top toolbar */\n    height: calc(100% - 41px);\n\n    .ql-editor {\n      max-height: 259px !important;\n\n      /* code block */\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        &::before,\n        &::after {\n          display: none;\n        }\n\n        color: var(--md-sys-color-primary);\n      }\n\n      a[href^='@'] {\n        text-decoration: none;\n        color: var(--md-sys-color-primary);\n      }\n\n      strong {\n        em,\n        u {\n          font-weight: 800;\n        }\n      }\n    }\n\n    /* link popup */\n    .ql-tooltip {\n      &.ql-hidden {\n        display: none;\n      }\n\n      left: 1px !important;\n      top: -29px !important;\n\n      width: 100%;\n\n      box-shadow: none;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-color: var(--md-sys-color-surface-container-low);\n      border-radius: var(--border-radius-l);\n      padding: 4px;\n      overflow: hidden;\n\n      display: flex;\n      align-items: center;\n\n      .ql-preview {\n        flex: 1;\n        max-width: unset;\n      }\n\n      input {\n        flex: 1;\n        border: none;\n        background-color: var(--md-sys-color-surface-container-lowest);\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n      }\n\n      /* remove before text */\n      /* remove save button */\n      &::before,\n      .ql-action {\n        display: none;\n      }\n\n      .ql-remove {\n        color: var(--md-sys-color-on-surface-variant);\n        margin-right: 4px;\n      }\n    }\n  }\n\n  /* CLOSED */\n  &.isClosed {\n    cursor: pointer;\n    .ql-editor > * {\n      cursor: pointer !important;\n    }\n    &:hover:not(.disabled) {\n      background-color: var(--md-sys-color-surface-container-high);\n    }\n\n    .ql-container.ql-snow {\n      padding-bottom: 0;\n      height: 44px;\n\n      .ql-editor {\n        overflow: hidden;\n      }\n    }\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      height: 0;\n      padding: 0;\n      margin: 0;\n      border-width: 0;\n      opacity: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n  }\n\n  &.disabled {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n    border-color: var(--md-sys-color-surface-container-lowest);\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  &.isLoading,\n  &.isSubmitting {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &.isSubmitting {\n    opacity: 0.3;\n  }\n\n  /* toolbar styles */\n  .ql-toolbar.ql-snow {\n    border: none;\n    background-color: var(--background-color);\n    border-bottom: 1px solid var(--md-sys-color-surface-container-hover);\n    padding: var(--padding-s);\n    display: flex;\n    justify-content: flex-end;\n    height: unset;\n    width: unset;\n\n    .ql-formats {\n      height: 32px;\n      margin-left: 8px;\n      margin-right: 0;\n      padding-left: 8px;\n      border-left: 1px solid var(--md-sys-color-surface-container-hover);\n      display: flex;\n      gap: 2px;\n\n      button {\n        float: none;\n        padding: 6px;\n        border-radius: var(--border-radius-m);\n        height: 32px;\n        width: 32px;\n\n        /* highlight when action */\n        &.ql-active {\n          background-color: var(--button-color-secondary);\n          .icon {\n            color: var(--button-color);\n          }\n        }\n      }\n    }\n\n    button:hover {\n      background-color: var(--button-color-secondary);\n    }\n  }\n\n  /* EDITING */\n  &.isEditing {\n    /* remove box shadow */\n    box-shadow: none;\n    /* remove outline */\n    outline: none;\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      display: none;\n    }\n\n    .ql-container.ql-snow {\n      height: 100%;\n\n      .ql-editor {\n        padding: 8px;\n      }\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  padding: var(--padding-m);\n  border-top: 1px solid var(--md-sys-color-surface-container-hover);\n  background-color: var(--background-color);\n  z-index: 100;\n\n  /* remove save button icon */\n  .comment {\n    min-width: 75px;\n    .icon {\n      display: none;\n    }\n    background-color: var(--button-color);\n  }\n`\n\nexport const Buttons = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n\n  button {\n    &.text {\n      &:hover {\n        background-color: var(--button-color-secondary);\n      }\n    }\n  }\n`\n\nexport const Markdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: 0;\n  transition: opacity 0.2s;\n\n  &.show {\n    opacity: 1;\n  }\n\n  background-color: rgba(0, 0, 0, 0.5);\n\n  z-index: 300;\n\n  .icon {\n    font-size: 40px;\n  }\n`\n\nexport const Placeholder = styled.span`\n  padding: 12px 15px;\n  /* italic */\n  font-style: italic;\n  opacity: 0.4;\n`\n"],"names":["AutoHeight","styled","categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.styled.es.js

@@ -32,10 +32,10 @@ const l = o.div`
   --button-color: var(--md-sys-color-primary);
   --button-color-secondary: var(--md-sys-color-surface-container-highest);
   --border-color: var(--md-sys-color-outline-variant);
-  /* CATEGORY */
-  ${({ $categoryPrimary: r, $categorySecondary: e, $categoryTertiary: n }) => a(r, e, n)}
 
   &.category {
+    /* CATEGORY */
+    ${({ $categoryPrimary: r, $categorySecondary: e, $categoryTertiary: n }) => a(r, e, n)}
     button.comment {
       color: var(--md-sys-color-on-surface);
       &:hover {

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentInput.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const AutoHeight = styled.div`\n  /* use grid tick for auto height transition */\n  display: grid;\n  height: 100%;\n  /* transition: translate 0.1s, margin-top 0.1s; */\n  position: relative;\n\n  /* when closed default */\n  translate: 0 50px;\n  margin-top: -50px;\n\n  /* when open */\n  &.isOpen {\n    translate: 0 0;\n    margin-top: 0;\n  }\n\n  padding: 0 4px 4px 4px;\n  /* when editing */\n  &.isEditing {\n    padding: 0;\n  }\n`\n\nexport type CommentProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\n// Reusable function for category color CSS\nexport const categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --background-color: ${$categoryTertiary};\n    --button-color: ${$categoryPrimary};\n    --button-color-secondary: ${$categorySecondary};\n    --border-color: ${$categoryPrimary};\n  `\n\nexport const Comment = styled.div<CommentProps>`\n  /* VARS */\n  --background-color: var(--md-sys-color-surface-container);\n  --button-color: var(--md-sys-color-primary);\n  --button-color-secondary: var(--md-sys-color-surface-container-highest);\n  --border-color: var(--md-sys-color-outline-variant);\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n    categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n\n  &.category {\n    button.comment {\n      color: var(--md-sys-color-on-surface);\n      &:hover {\n        background-color: var(--button-color);\n        filter: brightness(1.2);\n      }\n    }\n  }\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  &.isDropping.isOpen {\n    border-color: var(--md-sys-color-primary);\n  }\n\n  border-radius: var(--border-radius-l);\n  overflow: hidden;\n  transition: opacity 250ms 250ms, background-color 250ms, border-color 250ms;\n\n  &.isOpen {\n    /* box shadow */\n    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n\n    .quill {\n      background-color: var(--background-color);\n    }\n  }\n\n  .ql-editor.ql-blank::before {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.25;\n  }\n\n  .ql-editor {\n    ol {\n      padding-left: 0;\n    }\n  }\n\n  /* custom mention styles */\n  .ql-editor {\n    .mention {\n      border-radius: var(--border-radius-m);\n      user-select: none;\n      padding: 0 4px;\n      /* remove underline */\n      text-decoration: none;\n\n      white-space: nowrap;\n      cursor: pointer;\n\n      color: var(--button-color);\n      background-color: var(--button-color-secondary);\n\n      &:hover {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 85%, white);\n      }\n      &:active {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 70%, white);\n      }\n    }\n  }\n\n  /* container styles reset */\n  .ql-container.ql-snow {\n    border: none;\n    /* takes into account the top toolbar */\n    height: calc(100% - 41px);\n\n    .ql-editor {\n      max-height: 259px !important;\n\n      /* code block */\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        &::before,\n        &::after {\n          display: none;\n        }\n\n        color: var(--md-sys-color-primary);\n      }\n\n      a[href^='@'] {\n        text-decoration: none;\n        color: var(--md-sys-color-primary);\n      }\n\n      strong {\n        em,\n        u {\n          font-weight: 800;\n        }\n      }\n    }\n\n    /* link popup */\n    .ql-tooltip {\n      &.ql-hidden {\n        display: none;\n      }\n\n      left: 1px !important;\n      top: -29px !important;\n\n      width: 100%;\n\n      box-shadow: none;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-color: var(--md-sys-color-surface-container-low);\n      border-radius: var(--border-radius-l);\n      padding: 4px;\n      overflow: hidden;\n\n      display: flex;\n      align-items: center;\n\n      .ql-preview {\n        flex: 1;\n        max-width: unset;\n      }\n\n      input {\n        flex: 1;\n        border: none;\n        background-color: var(--md-sys-color-surface-container-lowest);\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n      }\n\n      /* remove before text */\n      /* remove save button */\n      &::before,\n      .ql-action {\n        display: none;\n      }\n\n      .ql-remove {\n        color: var(--md-sys-color-on-surface-variant);\n        margin-right: 4px;\n      }\n    }\n  }\n\n  /* CLOSED */\n  &.isClosed {\n    cursor: pointer;\n    .ql-editor > * {\n      cursor: pointer !important;\n    }\n    &:hover:not(.disabled) {\n      background-color: var(--md-sys-color-surface-container-high);\n    }\n\n    .ql-container.ql-snow {\n      padding-bottom: 0;\n      height: 44px;\n\n      .ql-editor {\n        overflow: hidden;\n      }\n    }\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      height: 0;\n      padding: 0;\n      margin: 0;\n      border-width: 0;\n      opacity: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n  }\n\n  &.disabled {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n    border-color: var(--md-sys-color-surface-container-lowest);\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  &.isLoading,\n  &.isSubmitting {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &.isSubmitting {\n    opacity: 0.3;\n  }\n\n  /* toolbar styles */\n  .ql-toolbar.ql-snow {\n    border: none;\n    background-color: var(--background-color);\n    border-bottom: 1px solid var(--md-sys-color-surface-container-hover);\n    padding: var(--padding-s);\n    display: flex;\n    justify-content: flex-end;\n    height: unset;\n    width: unset;\n\n    .ql-formats {\n      height: 32px;\n      margin-left: 8px;\n      margin-right: 0;\n      padding-left: 8px;\n      border-left: 1px solid var(--md-sys-color-surface-container-hover);\n      display: flex;\n      gap: 2px;\n\n      button {\n        float: none;\n        padding: 6px;\n        border-radius: var(--border-radius-m);\n        height: 32px;\n        width: 32px;\n\n        /* highlight when action */\n        &.ql-active {\n          background-color: var(--button-color-secondary);\n          .icon {\n            color: var(--button-color);\n          }\n        }\n      }\n    }\n\n    button:hover {\n      background-color: var(--button-color-secondary);\n    }\n  }\n\n  /* EDITING */\n  &.isEditing {\n    /* remove box shadow */\n    box-shadow: none;\n    /* remove outline */\n    outline: none;\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      display: none;\n    }\n\n    .ql-container.ql-snow {\n      height: 100%;\n\n      .ql-editor {\n        padding: 8px;\n      }\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  padding: var(--padding-m);\n  border-top: 1px solid var(--md-sys-color-surface-container-hover);\n  background-color: var(--background-color);\n  z-index: 100;\n\n  /* remove save button icon */\n  .comment {\n    min-width: 75px;\n    .icon {\n      display: none;\n    }\n    background-color: var(--button-color);\n  }\n`\n\nexport const Buttons = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n\n  button {\n    &.text {\n      &:hover {\n        background-color: var(--button-color-secondary);\n      }\n    }\n  }\n`\n\nexport const Markdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: 0;\n  transition: opacity 0.2s;\n\n  &.show {\n    opacity: 1;\n  }\n\n  background-color: rgba(0, 0, 0, 0.5);\n\n  z-index: 300;\n\n  .icon {\n    font-size: 40px;\n  }\n`\n\nexport const Placeholder = styled.span`\n  padding: 12px 15px;\n  /* italic */\n  font-style: italic;\n  opacity: 0.4;\n`\n"],"names":["AutoHeight","styled","categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":"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"}
+{"version":3,"file":"CommentInput.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const AutoHeight = styled.div`\n  /* use grid tick for auto height transition */\n  display: grid;\n  height: 100%;\n  /* transition: translate 0.1s, margin-top 0.1s; */\n  position: relative;\n\n  /* when closed default */\n  translate: 0 50px;\n  margin-top: -50px;\n\n  /* when open */\n  &.isOpen {\n    translate: 0 0;\n    margin-top: 0;\n  }\n\n  padding: 0 4px 4px 4px;\n  /* when editing */\n  &.isEditing {\n    padding: 0;\n  }\n`\n\nexport type CommentProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\n// Reusable function for category color CSS\nexport const categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --background-color: ${$categoryTertiary};\n    --button-color: ${$categoryPrimary};\n    --button-color-secondary: ${$categorySecondary};\n    --border-color: ${$categoryPrimary};\n  `\n\nexport const Comment = styled.div<CommentProps>`\n  /* VARS */\n  --background-color: var(--md-sys-color-surface-container);\n  --button-color: var(--md-sys-color-primary);\n  --button-color-secondary: var(--md-sys-color-surface-container-highest);\n  --border-color: var(--md-sys-color-outline-variant);\n\n  &.category {\n    /* CATEGORY */\n    ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n      categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n    button.comment {\n      color: var(--md-sys-color-on-surface);\n      &:hover {\n        background-color: var(--button-color);\n        filter: brightness(1.2);\n      }\n    }\n  }\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  &.isDropping.isOpen {\n    border-color: var(--md-sys-color-primary);\n  }\n\n  border-radius: var(--border-radius-l);\n  overflow: hidden;\n  transition: opacity 250ms 250ms, background-color 250ms, border-color 250ms;\n\n  &.isOpen {\n    /* box shadow */\n    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n\n    .quill {\n      background-color: var(--background-color);\n    }\n  }\n\n  .ql-editor.ql-blank::before {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.25;\n  }\n\n  .ql-editor {\n    ol {\n      padding-left: 0;\n    }\n  }\n\n  /* custom mention styles */\n  .ql-editor {\n    .mention {\n      border-radius: var(--border-radius-m);\n      user-select: none;\n      padding: 0 4px;\n      /* remove underline */\n      text-decoration: none;\n\n      white-space: nowrap;\n      cursor: pointer;\n\n      color: var(--button-color);\n      background-color: var(--button-color-secondary);\n\n      &:hover {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 85%, white);\n      }\n      &:active {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 70%, white);\n      }\n    }\n  }\n\n  /* container styles reset */\n  .ql-container.ql-snow {\n    border: none;\n    /* takes into account the top toolbar */\n    height: calc(100% - 41px);\n\n    .ql-editor {\n      max-height: 259px !important;\n\n      /* code block */\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        &::before,\n        &::after {\n          display: none;\n        }\n\n        color: var(--md-sys-color-primary);\n      }\n\n      a[href^='@'] {\n        text-decoration: none;\n        color: var(--md-sys-color-primary);\n      }\n\n      strong {\n        em,\n        u {\n          font-weight: 800;\n        }\n      }\n    }\n\n    /* link popup */\n    .ql-tooltip {\n      &.ql-hidden {\n        display: none;\n      }\n\n      left: 1px !important;\n      top: -29px !important;\n\n      width: 100%;\n\n      box-shadow: none;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-color: var(--md-sys-color-surface-container-low);\n      border-radius: var(--border-radius-l);\n      padding: 4px;\n      overflow: hidden;\n\n      display: flex;\n      align-items: center;\n\n      .ql-preview {\n        flex: 1;\n        max-width: unset;\n      }\n\n      input {\n        flex: 1;\n        border: none;\n        background-color: var(--md-sys-color-surface-container-lowest);\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n      }\n\n      /* remove before text */\n      /* remove save button */\n      &::before,\n      .ql-action {\n        display: none;\n      }\n\n      .ql-remove {\n        color: var(--md-sys-color-on-surface-variant);\n        margin-right: 4px;\n      }\n    }\n  }\n\n  /* CLOSED */\n  &.isClosed {\n    cursor: pointer;\n    .ql-editor > * {\n      cursor: pointer !important;\n    }\n    &:hover:not(.disabled) {\n      background-color: var(--md-sys-color-surface-container-high);\n    }\n\n    .ql-container.ql-snow {\n      padding-bottom: 0;\n      height: 44px;\n\n      .ql-editor {\n        overflow: hidden;\n      }\n    }\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      height: 0;\n      padding: 0;\n      margin: 0;\n      border-width: 0;\n      opacity: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n  }\n\n  &.disabled {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n    border-color: var(--md-sys-color-surface-container-lowest);\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  &.isLoading,\n  &.isSubmitting {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &.isSubmitting {\n    opacity: 0.3;\n  }\n\n  /* toolbar styles */\n  .ql-toolbar.ql-snow {\n    border: none;\n    background-color: var(--background-color);\n    border-bottom: 1px solid var(--md-sys-color-surface-container-hover);\n    padding: var(--padding-s);\n    display: flex;\n    justify-content: flex-end;\n    height: unset;\n    width: unset;\n\n    .ql-formats {\n      height: 32px;\n      margin-left: 8px;\n      margin-right: 0;\n      padding-left: 8px;\n      border-left: 1px solid var(--md-sys-color-surface-container-hover);\n      display: flex;\n      gap: 2px;\n\n      button {\n        float: none;\n        padding: 6px;\n        border-radius: var(--border-radius-m);\n        height: 32px;\n        width: 32px;\n\n        /* highlight when action */\n        &.ql-active {\n          background-color: var(--button-color-secondary);\n          .icon {\n            color: var(--button-color);\n          }\n        }\n      }\n    }\n\n    button:hover {\n      background-color: var(--button-color-secondary);\n    }\n  }\n\n  /* EDITING */\n  &.isEditing {\n    /* remove box shadow */\n    box-shadow: none;\n    /* remove outline */\n    outline: none;\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      display: none;\n    }\n\n    .ql-container.ql-snow {\n      height: 100%;\n\n      .ql-editor {\n        padding: 8px;\n      }\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  padding: var(--padding-m);\n  border-top: 1px solid var(--md-sys-color-surface-container-hover);\n  background-color: var(--background-color);\n  z-index: 100;\n\n  /* remove save button icon */\n  .comment {\n    min-width: 75px;\n    .icon {\n      display: none;\n    }\n    background-color: var(--button-color);\n  }\n`\n\nexport const Buttons = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n\n  button {\n    &.text {\n      &:hover {\n        background-color: var(--button-color-secondary);\n      }\n    }\n  }\n`\n\nexport const Markdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: 0;\n  transition: opacity 0.2s;\n\n  &.show {\n    opacity: 1;\n  }\n\n  background-color: rgba(0, 0, 0, 0.5);\n\n  z-index: 300;\n\n  .icon {\n    font-size: 40px;\n  }\n`\n\nexport const Placeholder = styled.span`\n  padding: 12px 15px;\n  /* italic */\n  font-style: italic;\n  opacity: 0.4;\n`\n"],"names":["AutoHeight","styled","categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":";AAEO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+BpBC,IAAmB,CAC9BC,GACAC,GACAC,MAEAF,KACAG;AAAA,0BACwBD,CAAiB;AAAA,sBACrBF,CAAgB;AAAA,gCACNC,CAAkB;AAAA,sBAC5BD,CAAgB;AAAA,KAGzBI,IAAUN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASxB,CAAC,EAAE,kBAAAE,GAAkB,oBAAAC,GAAoB,mBAAAC,QACzCH,EAAiBC,GAAkBC,GAAoBC,CAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyRlEG,IAASP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBhBQ,IAAUR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBS,IAAWT,EAAO;AAAA;AAAA;AAAA,GAKlBU,IAAWV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0BlBW,IAAcX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),r=require("./CommentMentionSelect.styled.cjs.js"),E=require("@ynput/ayon-react-components"),h=require("../../../../components/UserImage/UserImage.cjs.js"),p=require("clsx"),M=({mention:x,options:i=[],selectedIndex:a,onChange:c,types:d=[],config:t={},noneFound:j,noneFoundAtAll:R,error:n})=>{if(!x||j)return null;let l=[...i];l=i.map(e=>({...e,label:e.label}));let m=`No ${t.id}s found`;return n&&(m=n),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:s.jsxRuntimeExports.jsxs(r.MentionSelect,{tabIndex:0,children:[s.jsxRuntimeExports.jsxs(r.Title,{children:[x.type," ",t!=null&&t.id?t.id.charAt(0).toUpperCase()+t.id.slice(1):"","s"]}),d.includes(x.type)&&l.map((e,u)=>s.jsxRuntimeExports.jsxs(r.MentionItem,{id:e.id,onClick:()=>c(e),className:p({selected:a===u,square:!(t!=null&&t.isCircle)}),children:[e.type==="user"?s.jsxRuntimeExports.jsx(h.UserImage,{size:20,name:e.id,className:"image"}):e.icon&&s.jsxRuntimeExports.jsx(E.Icon,{icon:e.icon,className:"image"}),e.context&&s.jsxRuntimeExports.jsxs(r.MentionPrefix,{children:[e.context," - "]}),s.jsxRuntimeExports.jsx(r.MentionName,{children:e.label}),e.suffix&&s.jsxRuntimeExports.jsx(r.MentionSuffix,{children:e.suffix})]},e.id+"-"+u)),(R||n)&&s.jsxRuntimeExports.jsx(r.MentionItem,{children:m})]})})};module.exports=M;
+"use strict";const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),n=require("./CommentMentionSelect.styled.cjs.js"),E=require("@ynput/ayon-react-components"),h=require("../../../../components/UserImage/UserImage.cjs.js"),o=require("clsx"),M=({mention:r,options:i=[],selectedIndex:a,onChange:c,types:d=[],config:t={},noneFound:j,noneFoundAtAll:R,error:x,isGuest:p})=>{if(!r||j)return null;if(p)return s.jsxRuntimeExports.jsx(n.MentionSelect,{tabIndex:0,children:s.jsxRuntimeExports.jsx(n.MentionItem,{children:"Mentions not supported for guest users"})});let l=[...i];l=i.map(e=>({...e,label:e.label}));let u=`No ${t.id}s found`;return x&&(u=x),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:s.jsxRuntimeExports.jsxs(n.MentionSelect,{tabIndex:0,children:[s.jsxRuntimeExports.jsxs(n.Title,{children:[r.type," ",t!=null&&t.id?t.id.charAt(0).toUpperCase()+t.id.slice(1):"","s"]}),d.includes(r.type)&&l.map((e,m)=>s.jsxRuntimeExports.jsxs(n.MentionItem,{id:e.id,onClick:()=>c(e),className:o({selected:a===m,square:!(t!=null&&t.isCircle)}),children:[e.type==="user"?s.jsxRuntimeExports.jsx(h.UserImage,{size:20,name:e.id,className:"image"}):e.icon&&s.jsxRuntimeExports.jsx(E.Icon,{icon:e.icon,className:"image"}),e.context&&s.jsxRuntimeExports.jsxs(n.MentionPrefix,{children:[e.context," - "]}),s.jsxRuntimeExports.jsx(n.MentionName,{children:e.label}),e.suffix&&s.jsxRuntimeExports.jsx(n.MentionSuffix,{children:e.suffix})]},e.id+"-"+m)),(R||x)&&s.jsxRuntimeExports.jsx(n.MentionItem,{children:u})]})})};module.exports=M;
 //# sourceMappingURL=CommentMentionSelect.cjs.js.map

package/dist/shared/src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentMentionSelect.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","formattedOptions","option","noOptionsString","jsxs","Styled.MentionSelect","Styled.Title","i","Styled.MentionItem","clsx","jsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":"2PAwBMA,EAAuB,CAAC,CAC5B,QAAAC,EACA,QAAAC,EAAU,CAAC,EACX,cAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,OAAAC,EAAS,CAAC,EACV,UAAAC,EACA,eAAAC,EACA,MAAAC,CACF,IAAiC,CAC3B,GAAA,CAACR,GAAWM,EAAkB,OAAA,KAG9B,IAAAG,EAAmB,CAAC,GAAGR,CAAO,EAGfQ,EAAAR,EAAQ,IAAKS,IACvB,CACL,GAAGA,EACH,MAAOA,EAAO,KAChB,EACD,EAEG,IAAAC,EAAkB,MAAMN,EAAO,EAAE,UACrC,OAAIG,IAAyBG,EAAAH,yDAIzB,SAACI,EAAAA,kBAAAA,KAAAC,EAAAA,cAAA,CAAqB,SAAU,EAC9B,SAAA,CAACD,yBAAAE,EAAAA,MAAA,CACE,SAAA,CAAQd,EAAA,KAAK,IAAEK,GAAA,MAAAA,EAAQ,GAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,EAAgBA,EAAO,GAAG,MAAM,CAAC,EAAI,GAAG,GAAA,EAC3F,EACCD,EAAM,SAASJ,EAAQ,IAAI,GAC1BS,EAAiB,IAAI,CAACC,EAAQK,IAC5BH,EAAA,kBAAA,KAACI,EAAO,YAAP,CAEC,GAAIN,EAAO,GACX,QAAS,IAAMP,EAASO,CAAM,EAC9B,UAAWO,EAAK,CAAE,SAAUf,IAAkBa,EAAG,OAAQ,EAACV,GAAA,MAAAA,EAAQ,UAAU,EAE3E,SAAA,CAAOK,EAAA,OAAS,OACdQ,EAAAA,kBAAAA,IAAAC,EAAA,UAAA,CAAU,KAAM,GAAI,KAAMT,EAAO,GAAI,UAAU,OAAQ,CAAA,EAExDA,EAAO,MAASQ,EAAAA,kBAAAA,IAAAE,EAAA,KAAA,CAAK,KAAMV,EAAO,KAAM,UAAU,OAAQ,CAAA,EAE3DA,EAAO,SAAYE,EAAAA,kBAAAA,KAAAS,gBAAA,CAAsB,SAAA,CAAOX,EAAA,QAAQ,KAAA,EAAG,EAC3DQ,EAAAA,kBAAAA,IAAAI,EAAAA,YAAA,CAAoB,WAAO,KAAM,CAAA,EACjCZ,EAAO,QAAUQ,wBAACK,EAAAA,cAAA,CAAsB,WAAO,MAAO,CAAA,CAAA,CAAA,EAZlDb,EAAO,GAAK,IAAMK,CAAA,CAc1B,GACDR,GAAkBC,IAAUU,EAAAA,kBAAAA,IAACF,EAAAA,YAAA,CAAoB,SAAgBL,CAAA,CAAA,CAAA,CAAA,CACrE,CACF,CAAA,CAEJ"}
+{"version":3,"file":"CommentMentionSelect.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n  isGuest?: boolean\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n  isGuest,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  if (isGuest)\n    return (\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.MentionItem>Mentions not supported for guest users</Styled.MentionItem>\n      </Styled.MentionSelect>\n    )\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","isGuest","jsx","Styled.MentionSelect","Styled.MentionItem","formattedOptions","option","noOptionsString","jsxs","Styled.Title","i","clsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":"2PAyBMA,EAAuB,CAAC,CAC5B,QAAAC,EACA,QAAAC,EAAU,CAAC,EACX,cAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,OAAAC,EAAS,CAAC,EACV,UAAAC,EACA,eAAAC,EACA,MAAAC,EACA,QAAAC,CACF,IAAiC,CAC3B,GAAA,CAACT,GAAWM,EAAkB,OAAA,KAE9B,GAAAG,EAEA,OAAAC,wBAACC,EAAAA,cAAA,CAAqB,SAAU,EAC9B,SAAAD,EAAA,kBAAA,IAACE,EAAO,YAAP,CAAmB,SAAA,wCAAA,CAAsC,CAC5D,CAAA,EAIA,IAAAC,EAAmB,CAAC,GAAGZ,CAAO,EAGfY,EAAAZ,EAAQ,IAAKa,IACvB,CACL,GAAGA,EACH,MAAOA,EAAO,KAChB,EACD,EAEG,IAAAC,EAAkB,MAAMV,EAAO,EAAE,UACrC,OAAIG,IAAyBO,EAAAP,yDAIzB,SAACQ,EAAAA,kBAAAA,KAAAL,EAAAA,cAAA,CAAqB,SAAU,EAC9B,SAAA,CAACK,yBAAAC,EAAAA,MAAA,CACE,SAAA,CAAQjB,EAAA,KAAK,IAAEK,GAAA,MAAAA,EAAQ,GAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,EAAgBA,EAAO,GAAG,MAAM,CAAC,EAAI,GAAG,GAAA,EAC3F,EACCD,EAAM,SAASJ,EAAQ,IAAI,GAC1Ba,EAAiB,IAAI,CAACC,EAAQI,IAC5BF,EAAA,kBAAA,KAACJ,EAAO,YAAP,CAEC,GAAIE,EAAO,GACX,QAAS,IAAMX,EAASW,CAAM,EAC9B,UAAWK,EAAK,CAAE,SAAUjB,IAAkBgB,EAAG,OAAQ,EAACb,GAAA,MAAAA,EAAQ,UAAU,EAE3E,SAAA,CAAOS,EAAA,OAAS,OACdJ,EAAAA,kBAAAA,IAAAU,EAAA,UAAA,CAAU,KAAM,GAAI,KAAMN,EAAO,GAAI,UAAU,OAAQ,CAAA,EAExDA,EAAO,MAASJ,EAAAA,kBAAAA,IAAAW,EAAA,KAAA,CAAK,KAAMP,EAAO,KAAM,UAAU,OAAQ,CAAA,EAE3DA,EAAO,SAAYE,EAAAA,kBAAAA,KAAAM,gBAAA,CAAsB,SAAA,CAAOR,EAAA,QAAQ,KAAA,EAAG,EAC3DJ,EAAAA,kBAAAA,IAAAa,EAAAA,YAAA,CAAoB,WAAO,KAAM,CAAA,EACjCT,EAAO,QAAUJ,wBAACc,EAAAA,cAAA,CAAsB,WAAO,MAAO,CAAA,CAAA,CAAA,EAZlDV,EAAO,GAAK,IAAMI,CAAA,CAc1B,GACDX,GAAkBC,IAAUE,EAAAA,kBAAAA,IAACE,EAAAA,YAAA,CAAoB,SAAgBG,CAAA,CAAA,CAAA,CAAA,CACrE,CACF,CAAA,CAEJ"}

package/dist/shared/src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.es.js

@@ -1,55 +1,58 @@
 import { j as s } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { MentionSelect as M, Title as f, MentionItem as x, MentionPrefix as N, MentionName as b, MentionSuffix as C } from "./CommentMentionSelect.styled.es.js";
-import { Icon as I } from "@ynput/ayon-react-components";
+import { MentionSelect as n, MentionItem as a, Title as b, MentionPrefix as p, MentionName as I, MentionSuffix as N } from "./CommentMentionSelect.styled.es.js";
+import { Icon as C } from "@ynput/ayon-react-components";
 import { UserImage as S } from "../../../../components/UserImage/UserImage.es.js";
-import p from "clsx";
-const z = ({
-  mention: r,
-  options: a = [],
+import y from "clsx";
+const A = ({
+  mention: t,
+  options: d = [],
   selectedIndex: c,
-  onChange: n,
-  types: u = [],
-  config: l = {},
-  noneFound: j,
-  noneFoundAtAll: h,
-  error: t
+  onChange: u,
+  types: j = [],
+  config: r = {},
+  noneFound: h,
+  noneFoundAtAll: f,
+  error: l,
+  isGuest: M
 }) => {
-  if (!r || j) return null;
-  let m = [...a];
-  m = a.map((e) => ({
+  if (!t || h) return null;
+  if (M)
+    return /* @__PURE__ */ s.jsx(n, { tabIndex: 0, children: /* @__PURE__ */ s.jsx(a, { children: "Mentions not supported for guest users" }) });
+  let i = [...d];
+  i = d.map((e) => ({
     ...e,
     label: e.label
   }));
-  let d = `No ${l.id}s found`;
-  return t && (d = t), /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(M, { tabIndex: 0, children: [
-    /* @__PURE__ */ s.jsxs(f, { children: [
-      r.type,
+  let m = `No ${r.id}s found`;
+  return l && (m = l), /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(n, { tabIndex: 0, children: [
+    /* @__PURE__ */ s.jsxs(b, { children: [
+      t.type,
       " ",
-      l != null && l.id ? l.id.charAt(0).toUpperCase() + l.id.slice(1) : "",
+      r != null && r.id ? r.id.charAt(0).toUpperCase() + r.id.slice(1) : "",
       "s"
     ] }),
-    u.includes(r.type) && m.map((e, i) => /* @__PURE__ */ s.jsxs(
-      x,
+    j.includes(t.type) && i.map((e, x) => /* @__PURE__ */ s.jsxs(
+      a,
       {
         id: e.id,
-        onClick: () => n(e),
-        className: p({ selected: c === i, square: !(l != null && l.isCircle) }),
+        onClick: () => u(e),
+        className: y({ selected: c === x, square: !(r != null && r.isCircle) }),
         children: [
-          e.type === "user" ? /* @__PURE__ */ s.jsx(S, { size: 20, name: e.id, className: "image" }) : e.icon && /* @__PURE__ */ s.jsx(I, { icon: e.icon, className: "image" }),
-          e.context && /* @__PURE__ */ s.jsxs(N, { children: [
+          e.type === "user" ? /* @__PURE__ */ s.jsx(S, { size: 20, name: e.id, className: "image" }) : e.icon && /* @__PURE__ */ s.jsx(C, { icon: e.icon, className: "image" }),
+          e.context && /* @__PURE__ */ s.jsxs(p, { children: [
             e.context,
             " - "
           ] }),
-          /* @__PURE__ */ s.jsx(b, { children: e.label }),
-          e.suffix && /* @__PURE__ */ s.jsx(C, { children: e.suffix })
+          /* @__PURE__ */ s.jsx(I, { children: e.label }),
+          e.suffix && /* @__PURE__ */ s.jsx(N, { children: e.suffix })
         ]
       },
-      e.id + "-" + i
+      e.id + "-" + x
     )),
-    (h || t) && /* @__PURE__ */ s.jsx(x, { children: d })
+    (f || l) && /* @__PURE__ */ s.jsx(a, { children: m })
   ] }) });
 };
 export {
-  z as default
+  A as default
 };
 //# sourceMappingURL=CommentMentionSelect.es.js.map

package/dist/shared/src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentMentionSelect.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","formattedOptions","option","noOptionsString","jsxs","Styled.MentionSelect","Styled.Title","Styled.MentionItem","clsx","jsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":";;;;;AAwBA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,QAAAC,IAAS,CAAC;AAAA,EACV,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AACF,MAAiC;AAC3B,MAAA,CAACR,KAAWM,EAAkB,QAAA;AAG9B,MAAAG,IAAmB,CAAC,GAAGR,CAAO;AAGf,EAAAQ,IAAAR,EAAQ,IAAI,CAACS,OACvB;AAAA,IACL,GAAGA;AAAA,IACH,OAAOA,EAAO;AAAA,EAChB,EACD;AAEG,MAAAC,IAAkB,MAAMN,EAAO,EAAE;AACrC,SAAIG,MAAyBG,IAAAH,wCAIzB,UAACI,gBAAAA,EAAAA,KAAAC,GAAA,EAAqB,UAAU,GAC9B,UAAA;AAAA,IAACD,gBAAAA,OAAAE,GAAA,EACE,UAAA;AAAA,MAAQd,EAAA;AAAA,MAAK;AAAA,MAAEK,KAAA,QAAAA,EAAQ,KAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,IAAgBA,EAAO,GAAG,MAAM,CAAC,IAAI;AAAA,MAAG;AAAA,IAAA,GAC3F;AAAA,IACCD,EAAM,SAASJ,EAAQ,IAAI,KAC1BS,EAAiB,IAAI,CAACC,GAAQ,MAC5BE,gBAAAA,EAAA;AAAA,MAACG;AAAAA,MAAA;AAAA,QAEC,IAAIL,EAAO;AAAA,QACX,SAAS,MAAMP,EAASO,CAAM;AAAA,QAC9B,WAAWM,EAAK,EAAE,UAAUd,MAAkB,GAAG,QAAQ,EAACG,KAAA,QAAAA,EAAQ,WAAU;AAAA,QAE3E,UAAA;AAAA,UAAOK,EAAA,SAAS,SACdO,gBAAAA,EAAAA,IAAAC,GAAA,EAAU,MAAM,IAAI,MAAMR,EAAO,IAAI,WAAU,QAAQ,CAAA,IAExDA,EAAO,QAASO,gBAAAA,EAAAA,IAAAE,GAAA,EAAK,MAAMT,EAAO,MAAM,WAAU,QAAQ,CAAA;AAAA,UAE3DA,EAAO,WAAYE,gBAAAA,EAAAA,KAAAQ,GAAA,EAAsB,UAAA;AAAA,YAAOV,EAAA;AAAA,YAAQ;AAAA,UAAA,GAAG;AAAA,UAC3DO,gBAAAA,EAAAA,IAAAI,GAAA,EAAoB,YAAO,MAAM,CAAA;AAAA,UACjCX,EAAO,UAAUO,gBAAAA,MAACK,GAAA,EAAsB,YAAO,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAZlDZ,EAAO,KAAK,MAAM;AAAA,IAAA,CAc1B;AAAA,KACDH,KAAkBC,MAAUS,gBAAAA,EAAAA,IAACF,GAAA,EAAoB,UAAgBJ,EAAA,CAAA;AAAA,EAAA,EAAA,CACrE,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"CommentMentionSelect.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n  isGuest?: boolean\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n  isGuest,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  if (isGuest)\n    return (\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.MentionItem>Mentions not supported for guest users</Styled.MentionItem>\n      </Styled.MentionSelect>\n    )\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","isGuest","jsx","Styled.MentionSelect","Styled.MentionItem","formattedOptions","option","noOptionsString","jsxs","Styled.Title","i","clsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":";;;;;AAyBA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,QAAAC,IAAS,CAAC;AAAA,EACV,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AACF,MAAiC;AAC3B,MAAA,CAACT,KAAWM,EAAkB,QAAA;AAE9B,MAAAG;AAEA,WAAAC,gBAAAA,MAACC,GAAA,EAAqB,UAAU,GAC9B,UAAAD,gBAAAA,EAAA,IAACE,GAAA,EAAmB,UAAA,yCAAA,CAAsC,EAC5D,CAAA;AAIA,MAAAC,IAAmB,CAAC,GAAGZ,CAAO;AAGf,EAAAY,IAAAZ,EAAQ,IAAI,CAACa,OACvB;AAAA,IACL,GAAGA;AAAA,IACH,OAAOA,EAAO;AAAA,EAChB,EACD;AAEG,MAAAC,IAAkB,MAAMV,EAAO,EAAE;AACrC,SAAIG,MAAyBO,IAAAP,wCAIzB,UAACQ,gBAAAA,EAAAA,KAAAL,GAAA,EAAqB,UAAU,GAC9B,UAAA;AAAA,IAACK,gBAAAA,OAAAC,GAAA,EACE,UAAA;AAAA,MAAQjB,EAAA;AAAA,MAAK;AAAA,MAAEK,KAAA,QAAAA,EAAQ,KAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,IAAgBA,EAAO,GAAG,MAAM,CAAC,IAAI;AAAA,MAAG;AAAA,IAAA,GAC3F;AAAA,IACCD,EAAM,SAASJ,EAAQ,IAAI,KAC1Ba,EAAiB,IAAI,CAACC,GAAQI,MAC5BF,gBAAAA,EAAA;AAAA,MAACJ;AAAAA,MAAA;AAAA,QAEC,IAAIE,EAAO;AAAA,QACX,SAAS,MAAMX,EAASW,CAAM;AAAA,QAC9B,WAAWK,EAAK,EAAE,UAAUjB,MAAkBgB,GAAG,QAAQ,EAACb,KAAA,QAAAA,EAAQ,WAAU;AAAA,QAE3E,UAAA;AAAA,UAAOS,EAAA,SAAS,SACdJ,gBAAAA,EAAAA,IAAAU,GAAA,EAAU,MAAM,IAAI,MAAMN,EAAO,IAAI,WAAU,QAAQ,CAAA,IAExDA,EAAO,QAASJ,gBAAAA,EAAAA,IAAAW,GAAA,EAAK,MAAMP,EAAO,MAAM,WAAU,QAAQ,CAAA;AAAA,UAE3DA,EAAO,WAAYE,gBAAAA,EAAAA,KAAAM,GAAA,EAAsB,UAAA;AAAA,YAAOR,EAAA;AAAA,YAAQ;AAAA,UAAA,GAAG;AAAA,UAC3DJ,gBAAAA,EAAAA,IAAAa,GAAA,EAAoB,YAAO,MAAM,CAAA;AAAA,UACjCT,EAAO,UAAUJ,gBAAAA,MAACc,GAAA,EAAsB,YAAO,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAZlDV,EAAO,KAAK,MAAMI;AAAA,IAAA,CAc1B;AAAA,KACDX,KAAkBC,MAAUE,gBAAAA,EAAAA,IAACE,GAAA,EAAoB,UAAgBG,EAAA,CAAA;AAAA,EAAA,EAAA,CACrE,EACF,CAAA;AAEJ;"}

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const n=require("../../../../../../_virtual/jsx-runtime.cjs.js"),o=require("./ExistingReactions.cjs.js"),r=require("./ReactionPanelOpener.cjs.js"),R=require("./Reactions.styled.cjs.js"),j=({reactions:i,changeHandler:x,readOnly:u,categoryPrimary:s,categorySecondary:e,categoryTertiary:t})=>n.jsxRuntimeExports.jsxs(R.ReactionsWrapper,{$categoryPrimary:s,$categorySecondary:e,$categoryTertiary:t,children:[!u&&n.jsxRuntimeExports.jsx(r,{reactions:i,changeHandler:x,categoryPrimary:s,categorySecondary:e,categoryTertiary:t}),n.jsxRuntimeExports.jsx(o,{reactions:i,changeHandler:x,categoryPrimary:s,categorySecondary:e,categoryTertiary:t})]});module.exports=j;
+"use strict";const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),u=require("./ExistingReactions.cjs.js"),R=require("./ReactionPanelOpener.cjs.js"),j=require("./Reactions.styled.cjs.js"),p=({reactions:e,changeHandler:t,readOnly:n,category:o,categoryPrimary:i,categorySecondary:c,categoryTertiary:x})=>{const r=o?{categoryPrimary:i,categorySecondary:c,categoryTertiary:x}:{};return s.jsxRuntimeExports.jsxs(j.ReactionsWrapper,{children:[!n&&s.jsxRuntimeExports.jsx(R,{reactions:e,changeHandler:t,...r}),s.jsxRuntimeExports.jsx(u,{reactions:e,changeHandler:t,...r})]})};module.exports=p;
 //# sourceMappingURL=Reactions.cjs.js.map

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reactions.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.tsx"],"sourcesContent":["import ExistingReactions from './ExistingReactions'\nimport ReactionPanelOpener from './ReactionPanelOpener'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  readOnly?: boolean\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reactions = ({\n  reactions,\n  changeHandler,\n  readOnly,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  return (\n    <Styled.ReactionsWrapper\n      $categoryPrimary={categoryPrimary}\n      $categorySecondary={categorySecondary}\n      $categoryTertiary={categoryTertiary}\n    >\n      {!readOnly && (\n        <ReactionPanelOpener\n          reactions={reactions}\n          changeHandler={changeHandler}\n          categoryPrimary={categoryPrimary}\n          categorySecondary={categorySecondary}\n          categoryTertiary={categoryTertiary}\n        />\n      )}\n      <ExistingReactions\n        reactions={reactions}\n        changeHandler={changeHandler}\n        categoryPrimary={categoryPrimary}\n        categorySecondary={categorySecondary}\n        categoryTertiary={categoryTertiary}\n      />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","categoryPrimary","categorySecondary","categoryTertiary","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":"uMAcMA,EAAY,CAAC,CACjB,UAAAC,EACA,cAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,IAEIC,EAAA,kBAAA,KAACC,EAAO,iBAAP,CACC,iBAAkBJ,EAClB,mBAAoBC,EACpB,kBAAmBC,EAElB,SAAA,CAAA,CAACH,GACAM,EAAA,kBAAA,IAACC,EAAA,CACC,UAAAT,EACA,cAAAC,EACA,gBAAAE,EACA,kBAAAC,EACA,iBAAAC,CAAA,CACF,EAEFG,EAAA,kBAAA,IAACE,EAAA,CACC,UAAAV,EACA,cAAAC,EACA,gBAAAE,EACA,kBAAAC,EACA,iBAAAC,CAAA,CAAA,CACF,CAAA,CACF"}
+{"version":3,"file":"Reactions.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport ExistingReactions from './ExistingReactions'\nimport ReactionPanelOpener from './ReactionPanelOpener'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  readOnly?: boolean\n  category?: string\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reactions = ({\n  reactions,\n  changeHandler,\n  readOnly,\n  category,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  // show category colors if category is set (set category and not a guest user)\n  const categoryColors = category ? { categoryPrimary, categorySecondary, categoryTertiary } : {}\n  return (\n    <Styled.ReactionsWrapper>\n      {!readOnly && (\n        <ReactionPanelOpener\n          reactions={reactions}\n          changeHandler={changeHandler}\n          {...categoryColors}\n        />\n      )}\n      <ExistingReactions reactions={reactions} changeHandler={changeHandler} {...categoryColors} />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","category","categoryPrimary","categorySecondary","categoryTertiary","categoryColors","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":"uMAgBMA,EAAY,CAAC,CACjB,UAAAC,EACA,cAAAC,EACA,SAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,IAAa,CAEX,MAAMC,EAAiBJ,EAAW,CAAE,gBAAAC,EAAiB,kBAAAC,EAAmB,iBAAAC,CAAA,EAAqB,CAAC,EAE5F,OAAAE,EAAA,kBAAA,KAACC,mBAAA,CACE,SAAA,CAAA,CAACP,GACAQ,EAAA,kBAAA,IAACC,EAAA,CACC,UAAAX,EACA,cAAAC,EACC,GAAGM,CAAA,CACN,EAEDG,EAAAA,kBAAAA,IAAAE,EAAA,CAAkB,UAAAZ,EAAsB,cAAAC,EAA+B,GAAGM,CAAgB,CAAA,CAAA,EAC7F,CAEJ"}