@bigbinary/neeto-molecules 4.1.0-beta1 → 4.1.0

package/dist/DocumentEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentEditor.js","sources":["../src/components/DocumentEditor/constants.js","../src/components/DocumentEditor/hooks/useEditor.js","../src/components/DocumentEditor/MediaUploader.jsx","../src/components/DocumentEditor/utils.js","../src/components/DocumentEditor/index.jsx"],"sourcesContent":["export const EDITOR_ADDONS = [\n  \"highlight\",\n  \"emoji\",\n  \"video-upload\",\n  \"code-block\",\n  \"block-quote\",\n  \"image-upload\",\n  \"image-upload-unsplash\",\n  \"divider\",\n  \"video-embed\",\n  \"undo\",\n  \"redo\",\n  \"table\",\n  \"callout\",\n];\n\nexport const DEFAULT_EDITOR_PROPS = {\n  isMenuIndependent: true,\n  addons: [],\n  size: \"medium\",\n};\n\nexport const IMAGE_UPLOAD_CONFIG = {\n  maxImageSize: 1,\n  allowedImageTypes: {\n    \"image/jpg\": [\".jpg\", \".jpeg\"],\n    \"image/png\": [\".png\"],\n    \"image/svg\": [\".svg\"],\n  },\n};\n","import { useCallback } from \"react\";\n\nimport { useFormikContext } from \"formik\";\nimport { isPresent } from \"neetocist\";\nimport useHotkeys from \"neetohotkeys\";\n\nconst useEditor = ({\n  onContentChange,\n  editorContentFieldName,\n  onAttachmentChange,\n  onTitleChange,\n  titleFieldName,\n  editorRef,\n  titleRef,\n}) => {\n  const { setFieldValue, errors } = useFormikContext();\n\n  const handleContentChange = useCallback(\n    content => {\n      setFieldValue(editorContentFieldName, content);\n      onContentChange?.(content);\n    },\n    [editorContentFieldName, onContentChange, setFieldValue]\n  );\n\n  const handleAttachmentChange = useCallback(\n    attachments => {\n      setFieldValue(\"attachments\", attachments);\n      onAttachmentChange?.(attachments);\n    },\n    [onAttachmentChange, setFieldValue]\n  );\n\n  const handleTitleChange = event => {\n    const title = event.target.value;\n    setFieldValue(titleFieldName, title);\n    onTitleChange?.(title);\n  };\n\n  const handleEditorBackspaceKeypress = () => {\n    const editor = editorRef.current?.editor;\n    const selection = editor?.state?.selection;\n    if (\n      editor?.isFocused &&\n      isPresent(titleRef.current) &&\n      selection?.anchor === 1\n    ) {\n      const title = titleRef.current.value;\n      titleRef.current.focus();\n      titleRef.current.setSelectionRange(title?.length, title?.length);\n    }\n  };\n\n  const titleHotkeyRef = useHotkeys(\n    \"return\",\n    () => {\n      editorRef.current?.editor?.commands?.insertContentAt(0, \"<p />\");\n      editorRef.current?.editor?.commands?.focus(\"start\");\n    },\n    { mode: \"scoped\" }\n  );\n\n  const editorHotkeyRef = useHotkeys(\n    \"backspace\",\n    handleEditorBackspaceKeypress,\n    { mode: \"scoped\" }\n  );\n\n  return {\n    handleContentChange,\n    handleAttachmentChange,\n    handleTitleChange,\n    editorHotkeyRef,\n    titleHotkeyRef,\n    errors,\n  };\n};\n\nexport default useEditor;\n","import { ImageUploader } from \"@bigbinary/neeto-image-uploader-frontend\";\nimport { useFormikContext } from \"formik\";\nimport { Spinner } from \"neetoui\";\nimport { isEmpty } from \"ramda\";\n\nimport { IMAGE_UPLOAD_CONFIG } from \"./constants\";\n\nconst MediaUploader = ({ setIsThumbnailImageModalOpen }) => {\n  const {\n    values: { thumbnailImageUrl },\n    setFieldValue,\n    initialValues,\n    submitForm,\n  } = useFormikContext();\n\n  const handleUpload = file => {\n    const { url, signedId } = file;\n    setFieldValue(\"thumbnailImage\", signedId);\n    setFieldValue(\"thumbnailImageUrl\", url);\n    setTimeout(() => {\n      setIsThumbnailImageModalOpen(false);\n      submitForm();\n    });\n  };\n\n  if (isEmpty(initialValues)) {\n    return <Spinner />;\n  }\n\n  return (\n    <ImageUploader\n      className=\"h-auto w-full\"\n      key={thumbnailImageUrl}\n      src={thumbnailImageUrl}\n      uploadConfig={IMAGE_UPLOAD_CONFIG}\n      onUploadComplete={handleUpload}\n    />\n  );\n};\n\nexport default MediaUploader;\n","import { t } from \"i18next\";\nimport { Image } from \"neetoicons\";\n\nexport const getThumbnailAddon = command => ({\n  label: t(\"neetoMolecules.documentEditor.thumbnailImage\"),\n  optionName: \"thumbnail-image\",\n  command,\n  icon: Image,\n  isEnabled: true,\n  \"data-testid\": \"thumbnail-image-addon\",\n});\n","import { memo, useCallback, useMemo, useRef, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { useFormikContext } from \"formik\";\nimport { noop } from \"neetocist\";\nimport { FormikEditor } from \"neetoeditor\";\nimport { MenuHorizontal } from \"neetoicons\";\nimport { Modal, Typography, Dropdown } from \"neetoui\";\nimport { Textarea } from \"neetoui/formik\";\nimport PropTypes from \"prop-types\";\nimport { mergeRight } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { DEFAULT_EDITOR_PROPS, EDITOR_ADDONS } from \"./constants\";\nimport \"./editor.scss\";\nimport useEditor from \"./hooks/useEditor\";\nimport MediaUploader from \"./MediaUploader\";\nimport { getThumbnailAddon } from \"./utils\";\n\nconst Editor = ({\n  attachments,\n  onContentChange,\n  onAttachmentChange,\n  onTitleChange,\n  getTitleRef = noop,\n  getEditorRef = noop,\n  menuClassName,\n  editorContentFieldName = \"htmlContent\",\n  titleFieldName = \"title\",\n  editorProps: customEditorProps = {},\n  titleProps = {},\n  hasThumbnailImage = false,\n  children,\n}) => {\n  const { t } = useTranslation();\n  const { values, setFieldValue, submitForm } = useFormikContext();\n  const { thumbnailImageUrl } = values;\n\n  const { Menu, MenuItem } = Dropdown;\n\n  const titleRef = useRef();\n  const editorRef = useRef();\n  const [isThumbnailImageModalOpen, setIsThumbnailImageModalOpen] =\n    useState(false);\n\n  const editorProps = useMemo(() => {\n    const baseProps = mergeRight(DEFAULT_EDITOR_PROPS, customEditorProps);\n\n    if (!hasThumbnailImage) return baseProps;\n\n    const thumbnailAddon = getThumbnailAddon(() =>\n      setIsThumbnailImageModalOpen(true)\n    );\n\n    return mergeRight(baseProps, { addonCommands: [thumbnailAddon] });\n  }, [customEditorProps, hasThumbnailImage]);\n\n  const {\n    handleContentChange,\n    handleAttachmentChange,\n    handleTitleChange,\n    editorHotkeyRef,\n    titleHotkeyRef,\n    errors,\n  } = useEditor({\n    onContentChange,\n    editorContentFieldName,\n    onAttachmentChange,\n    onTitleChange,\n    titleFieldName,\n    editorRef,\n    titleRef,\n  });\n\n  const setTitleRef = node => {\n    titleHotkeyRef.current = node;\n    getTitleRef(node);\n    titleRef.current = node;\n  };\n\n  const setEditorRef = useCallback(node => {\n    editorRef.current = node;\n    getEditorRef(node);\n  }, []);\n\n  const addons = useMemo(\n    () => EDITOR_ADDONS.concat(editorProps.addons || []),\n    [editorProps.addons]\n  );\n\n  const handleTab = () => {\n    const isListActive =\n      editorRef.current?.editor?.isActive(\"orderedList\") ||\n      editorRef.current?.editor?.isActive(\"bulletList\");\n\n    if (isListActive) {\n      editorRef.current?.editor?.commands?.sinkListItem(\"listItem\");\n\n      return true;\n    }\n\n    return true;\n  };\n\n  const handleDeleteThumbnail = () => {\n    setFieldValue(\"thumbnailImage\", \"\");\n    setFieldValue(\"thumbnailImageUrl\", \"\");\n    setTimeout(submitForm);\n  };\n\n  return (\n    <div\n      className=\"neeto-molecules-document__wrapper\"\n      data-testid=\"document-editor-container\"\n      ref={editorHotkeyRef}\n    >\n      <FormikEditor\n        attachmentsClassName=\"editor-content-attachments w-full flex-shrink-0\"\n        className=\"h-full w-full\"\n        contentClassName=\"editor-content__wrapper neeto-molecules-document__container\"\n        data-cy=\"neeto-molecules-document-content-text-area\"\n        error={undefined}\n        errorWrapperClassName=\"w-full min-h-full flex flex-col items-center\"\n        hideSlashCommands={false}\n        name={editorContentFieldName}\n        ref={setEditorRef}\n        menuClassName={classNames(\n          \"neeto-molecules-document-editor__menubar\",\n          menuClassName\n        )}\n        {...{ attachments, ...editorProps, addons }}\n        contentWrapperClassName=\"w-full flex flex-col flex-grow\"\n        keyboardShortcuts={{ Tab: handleTab, ...editorProps.keyboardShortcuts }}\n        onChange={handleContentChange}\n        onChangeAttachments={handleAttachmentChange}\n      >\n        {children}\n        <div className=\"neeto-molecules-document__container px-6\">\n          <Textarea\n            nakedTextarea\n            className=\"neeto-molecules-document__title\"\n            data-cy=\"neeto-molecules-document-title-text-field\"\n            name={titleFieldName}\n            ref={setTitleRef}\n            rows={1}\n            placeholder={\n              titleProps.placeholder || t(\"neetoMolecules.documentEditor.title\")\n            }\n            onChange={handleTitleChange}\n            onKeyDown={e =>\n              e.key === \"Enter\" && !e.shiftKey && e.preventDefault()\n            }\n            {...titleProps}\n          />\n          {thumbnailImageUrl && (\n            <div className=\"group relative mt-4\">\n              <div className=\"neeto-molecules-document__thumbnail-image\">\n                <img alt=\"Cover\" src={thumbnailImageUrl} />\n              </div>\n              <div className=\"neeto-ui-rounded-full absolute end-2 top-2\">\n                <Dropdown\n                  strategy=\"fixed\"\n                  buttonProps={{\n                    style: \"secondary\",\n                    size: \"small\",\n                    icon: MenuHorizontal,\n                  }}\n                >\n                  <Menu>\n                    <MenuItem.Button onClick={handleDeleteThumbnail}>\n                      {t(\"neetoMolecules.documentEditor.delete\")}\n                    </MenuItem.Button>\n                  </Menu>\n                </Dropdown>\n              </div>\n            </div>\n          )}\n          {errors[editorContentFieldName] && (\n            <Typography\n              className=\"neeto-ui-input__error neeto-molecules-editor-content__error\"\n              data-cy=\"articles-content-input-error\"\n              style=\"body3\"\n            >\n              {errors[editorContentFieldName]}\n            </Typography>\n          )}\n        </div>\n      </FormikEditor>\n      <Modal\n        className=\"media-uploader-modal p-5 pt-0\"\n        data-testid=\"thumbnail-image-modal\"\n        isOpen={isThumbnailImageModalOpen}\n        onClose={() => {\n          setIsThumbnailImageModalOpen(false);\n        }}\n      >\n        <Modal.Header className=\"ms-0 ps-0\">\n          <Typography style=\"h2\">\n            {t(\"neetoMolecules.documentEditor.uploadThumbnailImage\")}\n          </Typography>\n        </Modal.Header>\n        <MediaUploader {...{ setIsThumbnailImageModalOpen }} />\n      </Modal>\n    </div>\n  );\n};\n\nEditor.propTypes = {\n  /**\n   * List of initial attachments.\n   */\n  attachments: PropTypes.arrayOf(\n    PropTypes.shape({\n      contentType: PropTypes.string,\n      filename: PropTypes.string,\n      signedId: PropTypes.string,\n      url: PropTypes.string,\n    })\n  ),\n  /**\n   * Callback that will be triggered when the editor content changes.\n   * This function is not throttled.\n   */\n  onContentChange: PropTypes.func,\n  /**\n   * Callback that will be triggered when the attachments changes.\n   */\n  onAttachmentChange: PropTypes.func,\n  /**\n   * Callback that will be triggered when the article title changes.\n   */\n  onTitleChange: PropTypes.func,\n  /**\n   * This function will be called with the title node reference.\n   */\n  getTitleRef: PropTypes.func,\n  /**\n   * This function will be called with editor reference.\n   */\n  getEditorRef: PropTypes.func,\n  /**\n   * Formik field name of the editor. The default value is `htmlContent`.\n   */\n  editorContentFieldName: PropTypes.string,\n  /**\n   * Formik field name of the title. The default value is `title`.\n   */\n  titleFieldName: PropTypes.string,\n  /**\n   * These props will be passed down to the editor component.\n   */\n  editorProps: PropTypes.object,\n  /**\n   * These props will be passed down to the title text area component.\n   */\n  titleProps: PropTypes.object,\n  /**\n   * A prop to pass class names to the editor menubar.\n   */\n  menuClassName: PropTypes.string,\n  /**\n   * The children will be rendered above the title input field.\n   */\n  children: PropTypes.node,\n  /**\n   * A prop to enable the thumbnail image uploader.\n   */\n  hasThumbnailImage: PropTypes.bool,\n};\n\nEditor.displayName = \"DocumentEditor\";\n\nexport default memo(Editor);\n"],"names":["EDITOR_ADDONS","DEFAULT_EDITOR_PROPS","isMenuIndependent","addons","size","IMAGE_UPLOAD_CONFIG","maxImageSize","allowedImageTypes","useEditor","_ref","onContentChange","editorContentFieldName","onAttachmentChange","onTitleChange","titleFieldName","editorRef","titleRef","_useFormikContext","useFormikContext","setFieldValue","errors","handleContentChange","useCallback","content","handleAttachmentChange","attachments","handleTitleChange","event","title","target","value","handleEditorBackspaceKeypress","_editorRef$current","_editor$state","editor","current","selection","state","isFocused","isPresent","anchor","focus","setSelectionRange","length","titleHotkeyRef","useHotkeys","_editorRef$current2","_editorRef$current3","commands","insertContentAt","mode","editorHotkeyRef","MediaUploader","setIsThumbnailImageModalOpen","thumbnailImageUrl","values","initialValues","submitForm","handleUpload","file","url","signedId","setTimeout","isEmpty","_jsx","Spinner","ImageUploader","className","src","uploadConfig","onUploadComplete","getThumbnailAddon","command","label","t","optionName","icon","Image","isEnabled","Editor","_ref$getTitleRef","getTitleRef","noop","_ref$getEditorRef","getEditorRef","menuClassName","_ref$editorContentFie","_ref$titleFieldName","_ref$editorProps","editorProps","customEditorProps","_ref$titleProps","titleProps","_ref$hasThumbnailImag","hasThumbnailImage","children","_useTranslation","useTranslation","Menu","Dropdown","MenuItem","useRef","_useState","useState","_useState2","_slicedToArray","isThumbnailImageModalOpen","useMemo","baseProps","mergeRight","thumbnailAddon","addonCommands","_useEditor","setTitleRef","node","setEditorRef","concat","handleTab","isListActive","isActive","sinkListItem","handleDeleteThumbnail","_jsxs","ref","FormikEditor","_objectSpread","attachmentsClassName","contentClassName","error","undefined","errorWrapperClassName","hideSlashCommands","name","classNames","contentWrapperClassName","keyboardShortcuts","Tab","onChange","onChangeAttachments","Textarea","nakedTextarea","rows","placeholder","onKeyDown","e","key","shiftKey","preventDefault","alt","strategy","buttonProps","style","MenuHorizontal","Button","onClick","Typography","Modal","isOpen","onClose","Header","displayName","memo"],"mappings":"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"}
+{"version":3,"file":"DocumentEditor.js","sources":["../src/components/DocumentEditor/constants.js","../src/components/DocumentEditor/hooks/useEditor.js","../src/components/DocumentEditor/MediaUploader.jsx","../src/components/DocumentEditor/utils.js","../src/components/DocumentEditor/index.jsx"],"sourcesContent":["export const EDITOR_ADDONS = [\n  \"highlight\",\n  \"emoji\",\n  \"video-upload\",\n  \"code-block\",\n  \"block-quote\",\n  \"image-upload\",\n  \"image-upload-unsplash\",\n  \"divider\",\n  \"video-embed\",\n  \"undo\",\n  \"redo\",\n  \"table\",\n  \"callout\",\n];\n\nexport const DEFAULT_EDITOR_PROPS = {\n  isMenuIndependent: true,\n  addons: [],\n  size: \"medium\",\n};\n\nexport const IMAGE_UPLOAD_CONFIG = {\n  maxImageSize: 1,\n  allowedImageTypes: {\n    \"image/jpg\": [\".jpg\", \".jpeg\"],\n    \"image/png\": [\".png\"],\n    \"image/svg\": [\".svg\"],\n  },\n};\n","import { useCallback } from \"react\";\n\nimport { useFormikContext } from \"formik\";\nimport { isPresent } from \"neetocist\";\nimport useHotkeys from \"neetohotkeys\";\n\nconst useEditor = ({\n  onContentChange,\n  editorContentFieldName,\n  onAttachmentChange,\n  onTitleChange,\n  titleFieldName,\n  editorRef,\n  titleRef,\n}) => {\n  const { setFieldValue, errors } = useFormikContext();\n\n  const handleContentChange = useCallback(\n    content => {\n      setFieldValue(editorContentFieldName, content);\n      onContentChange?.(content);\n    },\n    [editorContentFieldName, onContentChange, setFieldValue]\n  );\n\n  const handleAttachmentChange = useCallback(\n    attachments => {\n      setFieldValue(\"attachments\", attachments);\n      onAttachmentChange?.(attachments);\n    },\n    [onAttachmentChange, setFieldValue]\n  );\n\n  const handleTitleChange = event => {\n    const title = event.target.value;\n    setFieldValue(titleFieldName, title);\n    onTitleChange?.(title);\n  };\n\n  const handleEditorBackspaceKeypress = () => {\n    const editor = editorRef.current?.editor;\n    const selection = editor?.state?.selection;\n    if (\n      editor?.isFocused &&\n      isPresent(titleRef.current) &&\n      selection?.anchor === 1\n    ) {\n      const title = titleRef.current.value;\n      titleRef.current.focus();\n      titleRef.current.setSelectionRange(title?.length, title?.length);\n    }\n  };\n\n  const titleHotkeyRef = useHotkeys(\n    \"return\",\n    () => {\n      editorRef.current?.editor?.commands?.insertContentAt(0, \"<p />\");\n      editorRef.current?.editor?.commands?.focus(\"start\");\n    },\n    { mode: \"scoped\" }\n  );\n\n  const editorHotkeyRef = useHotkeys(\n    \"backspace\",\n    handleEditorBackspaceKeypress,\n    { mode: \"scoped\" }\n  );\n\n  return {\n    handleContentChange,\n    handleAttachmentChange,\n    handleTitleChange,\n    editorHotkeyRef,\n    titleHotkeyRef,\n    errors,\n  };\n};\n\nexport default useEditor;\n","import { ImageUploader } from \"@bigbinary/neeto-image-uploader-frontend\";\nimport { useFormikContext } from \"formik\";\nimport { Spinner } from \"neetoui\";\nimport { isEmpty } from \"ramda\";\n\nimport { IMAGE_UPLOAD_CONFIG } from \"./constants\";\n\nconst MediaUploader = ({ setIsThumbnailImageModalOpen }) => {\n  const {\n    values: { thumbnailImageUrl },\n    setFieldValue,\n    initialValues,\n    submitForm,\n  } = useFormikContext();\n\n  const handleUpload = file => {\n    const { url, signedId } = file;\n    setFieldValue(\"thumbnailImage\", signedId);\n    setFieldValue(\"thumbnailImageUrl\", url);\n    setTimeout(() => {\n      setIsThumbnailImageModalOpen(false);\n      submitForm();\n    });\n  };\n\n  if (isEmpty(initialValues)) {\n    return <Spinner />;\n  }\n\n  return (\n    <ImageUploader\n      className=\"h-auto w-full\"\n      key={thumbnailImageUrl}\n      src={thumbnailImageUrl}\n      uploadConfig={IMAGE_UPLOAD_CONFIG}\n      onUploadComplete={handleUpload}\n    />\n  );\n};\n\nexport default MediaUploader;\n","import { t } from \"i18next\";\nimport { Image } from \"neetoicons\";\n\nexport const getThumbnailAddon = command => ({\n  label: t(\"neetoMolecules.documentEditor.thumbnailImage\"),\n  optionName: \"thumbnail-image\",\n  command,\n  icon: Image,\n  isEnabled: true,\n  \"data-testid\": \"thumbnail-image-addon\",\n});\n","import { memo, useCallback, useMemo, useRef, useState } from \"react\";\n\nimport classNames from \"classnames\";\nimport { useFormikContext } from \"formik\";\nimport { noop } from \"neetocist\";\nimport { FormikEditor } from \"neetoeditor\";\nimport { MenuHorizontal } from \"neetoicons\";\nimport { Modal, Typography, Dropdown } from \"neetoui\";\nimport { Textarea } from \"neetoui/formik\";\nimport PropTypes from \"prop-types\";\nimport { mergeRight } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { DEFAULT_EDITOR_PROPS, EDITOR_ADDONS } from \"./constants\";\nimport \"./editor.scss\";\nimport useEditor from \"./hooks/useEditor\";\nimport MediaUploader from \"./MediaUploader\";\nimport { getThumbnailAddon } from \"./utils\";\n\nconst Editor = ({\n  attachments,\n  onContentChange,\n  onAttachmentChange,\n  onTitleChange,\n  getTitleRef = noop,\n  getEditorRef = noop,\n  menuClassName,\n  editorContentFieldName = \"htmlContent\",\n  titleFieldName = \"title\",\n  editorProps: customEditorProps = {},\n  titleProps = {},\n  hasThumbnailImage = false,\n  children,\n}) => {\n  const { t } = useTranslation();\n  const { values, setFieldValue, submitForm } = useFormikContext();\n  const { thumbnailImageUrl } = values;\n\n  const { Menu, MenuItem } = Dropdown;\n\n  const titleRef = useRef();\n  const editorRef = useRef();\n  const [isThumbnailImageModalOpen, setIsThumbnailImageModalOpen] =\n    useState(false);\n\n  const editorProps = useMemo(() => {\n    const baseProps = mergeRight(DEFAULT_EDITOR_PROPS, customEditorProps);\n\n    if (!hasThumbnailImage) return baseProps;\n\n    const thumbnailAddon = getThumbnailAddon(() =>\n      setIsThumbnailImageModalOpen(true)\n    );\n\n    return mergeRight(baseProps, { addonCommands: [thumbnailAddon] });\n  }, [customEditorProps, hasThumbnailImage]);\n\n  const {\n    handleContentChange,\n    handleAttachmentChange,\n    handleTitleChange,\n    editorHotkeyRef,\n    titleHotkeyRef,\n    errors,\n  } = useEditor({\n    onContentChange,\n    editorContentFieldName,\n    onAttachmentChange,\n    onTitleChange,\n    titleFieldName,\n    editorRef,\n    titleRef,\n  });\n\n  const setTitleRef = node => {\n    titleHotkeyRef.current = node;\n    getTitleRef(node);\n    titleRef.current = node;\n  };\n\n  const setEditorRef = useCallback(node => {\n    editorRef.current = node;\n    getEditorRef(node);\n  }, []);\n\n  const addons = useMemo(\n    () => EDITOR_ADDONS.concat(editorProps.addons || []),\n    [editorProps.addons]\n  );\n\n  const handleTab = () => {\n    const isListActive =\n      editorRef.current?.editor?.isActive(\"orderedList\") ||\n      editorRef.current?.editor?.isActive(\"bulletList\");\n\n    if (isListActive) {\n      editorRef.current?.editor?.commands?.sinkListItem(\"listItem\");\n\n      return true;\n    }\n\n    return true;\n  };\n\n  const handleDeleteThumbnail = () => {\n    setFieldValue(\"thumbnailImage\", \"\");\n    setFieldValue(\"thumbnailImageUrl\", \"\");\n    setTimeout(submitForm);\n  };\n\n  return (\n    <div\n      className=\"neeto-molecules-document__wrapper\"\n      data-testid=\"document-editor-container\"\n      ref={editorHotkeyRef}\n    >\n      <FormikEditor\n        attachmentsClassName=\"editor-content-attachments w-full flex-shrink-0\"\n        className=\"h-full w-full\"\n        contentClassName=\"editor-content__wrapper neeto-molecules-document__container\"\n        data-testid=\"neeto-molecules-document-content-text-area\"\n        error={undefined}\n        errorWrapperClassName=\"w-full min-h-full flex flex-col items-center\"\n        hideSlashCommands={false}\n        name={editorContentFieldName}\n        ref={setEditorRef}\n        menuClassName={classNames(\n          \"neeto-molecules-document-editor__menubar\",\n          menuClassName\n        )}\n        {...{ attachments, ...editorProps, addons }}\n        contentWrapperClassName=\"w-full flex flex-col flex-grow\"\n        keyboardShortcuts={{ Tab: handleTab, ...editorProps.keyboardShortcuts }}\n        onChange={handleContentChange}\n        onChangeAttachments={handleAttachmentChange}\n      >\n        {children}\n        <div className=\"neeto-molecules-document__container px-6\">\n          <Textarea\n            nakedTextarea\n            className=\"neeto-molecules-document__title\"\n            data-testid=\"neeto-molecules-document-title-text-field\"\n            name={titleFieldName}\n            ref={setTitleRef}\n            rows={1}\n            placeholder={\n              titleProps.placeholder || t(\"neetoMolecules.documentEditor.title\")\n            }\n            onChange={handleTitleChange}\n            onKeyDown={e =>\n              e.key === \"Enter\" && !e.shiftKey && e.preventDefault()\n            }\n            {...titleProps}\n          />\n          {thumbnailImageUrl && (\n            <div className=\"group relative mt-4\">\n              <div className=\"neeto-molecules-document__thumbnail-image\">\n                <img alt=\"Cover\" src={thumbnailImageUrl} />\n              </div>\n              <div className=\"neeto-ui-rounded-full absolute end-2 top-2\">\n                <Dropdown\n                  strategy=\"fixed\"\n                  buttonProps={{\n                    style: \"secondary\",\n                    size: \"small\",\n                    icon: MenuHorizontal,\n                  }}\n                >\n                  <Menu>\n                    <MenuItem.Button onClick={handleDeleteThumbnail}>\n                      {t(\"neetoMolecules.documentEditor.delete\")}\n                    </MenuItem.Button>\n                  </Menu>\n                </Dropdown>\n              </div>\n            </div>\n          )}\n          {errors[editorContentFieldName] && (\n            <Typography\n              className=\"neeto-ui-input__error neeto-molecules-editor-content__error\"\n              data-testid=\"articles-content-input-error\"\n              style=\"body3\"\n            >\n              {errors[editorContentFieldName]}\n            </Typography>\n          )}\n        </div>\n      </FormikEditor>\n      <Modal\n        className=\"media-uploader-modal p-5 pt-0\"\n        data-testid=\"thumbnail-image-modal\"\n        isOpen={isThumbnailImageModalOpen}\n        onClose={() => {\n          setIsThumbnailImageModalOpen(false);\n        }}\n      >\n        <Modal.Header className=\"ms-0 ps-0\">\n          <Typography style=\"h2\">\n            {t(\"neetoMolecules.documentEditor.uploadThumbnailImage\")}\n          </Typography>\n        </Modal.Header>\n        <MediaUploader {...{ setIsThumbnailImageModalOpen }} />\n      </Modal>\n    </div>\n  );\n};\n\nEditor.propTypes = {\n  /**\n   * List of initial attachments.\n   */\n  attachments: PropTypes.arrayOf(\n    PropTypes.shape({\n      contentType: PropTypes.string,\n      filename: PropTypes.string,\n      signedId: PropTypes.string,\n      url: PropTypes.string,\n    })\n  ),\n  /**\n   * Callback that will be triggered when the editor content changes.\n   * This function is not throttled.\n   */\n  onContentChange: PropTypes.func,\n  /**\n   * Callback that will be triggered when the attachments changes.\n   */\n  onAttachmentChange: PropTypes.func,\n  /**\n   * Callback that will be triggered when the article title changes.\n   */\n  onTitleChange: PropTypes.func,\n  /**\n   * This function will be called with the title node reference.\n   */\n  getTitleRef: PropTypes.func,\n  /**\n   * This function will be called with editor reference.\n   */\n  getEditorRef: PropTypes.func,\n  /**\n   * Formik field name of the editor. The default value is `htmlContent`.\n   */\n  editorContentFieldName: PropTypes.string,\n  /**\n   * Formik field name of the title. The default value is `title`.\n   */\n  titleFieldName: PropTypes.string,\n  /**\n   * These props will be passed down to the editor component.\n   */\n  editorProps: PropTypes.object,\n  /**\n   * These props will be passed down to the title text area component.\n   */\n  titleProps: PropTypes.object,\n  /**\n   * A prop to pass class names to the editor menubar.\n   */\n  menuClassName: PropTypes.string,\n  /**\n   * The children will be rendered above the title input field.\n   */\n  children: PropTypes.node,\n  /**\n   * A prop to enable the thumbnail image uploader.\n   */\n  hasThumbnailImage: PropTypes.bool,\n};\n\nEditor.displayName = \"DocumentEditor\";\n\nexport default memo(Editor);\n"],"names":["EDITOR_ADDONS","DEFAULT_EDITOR_PROPS","isMenuIndependent","addons","size","IMAGE_UPLOAD_CONFIG","maxImageSize","allowedImageTypes","useEditor","_ref","onContentChange","editorContentFieldName","onAttachmentChange","onTitleChange","titleFieldName","editorRef","titleRef","_useFormikContext","useFormikContext","setFieldValue","errors","handleContentChange","useCallback","content","handleAttachmentChange","attachments","handleTitleChange","event","title","target","value","handleEditorBackspaceKeypress","_editorRef$current","_editor$state","editor","current","selection","state","isFocused","isPresent","anchor","focus","setSelectionRange","length","titleHotkeyRef","useHotkeys","_editorRef$current2","_editorRef$current3","commands","insertContentAt","mode","editorHotkeyRef","MediaUploader","setIsThumbnailImageModalOpen","thumbnailImageUrl","values","initialValues","submitForm","handleUpload","file","url","signedId","setTimeout","isEmpty","_jsx","Spinner","ImageUploader","className","src","uploadConfig","onUploadComplete","getThumbnailAddon","command","label","t","optionName","icon","Image","isEnabled","Editor","_ref$getTitleRef","getTitleRef","noop","_ref$getEditorRef","getEditorRef","menuClassName","_ref$editorContentFie","_ref$titleFieldName","_ref$editorProps","editorProps","customEditorProps","_ref$titleProps","titleProps","_ref$hasThumbnailImag","hasThumbnailImage","children","_useTranslation","useTranslation","Menu","Dropdown","MenuItem","useRef","_useState","useState","_useState2","_slicedToArray","isThumbnailImageModalOpen","useMemo","baseProps","mergeRight","thumbnailAddon","addonCommands","_useEditor","setTitleRef","node","setEditorRef","concat","handleTab","isListActive","isActive","sinkListItem","handleDeleteThumbnail","_jsxs","ref","FormikEditor","_objectSpread","attachmentsClassName","contentClassName","error","undefined","errorWrapperClassName","hideSlashCommands","name","classNames","contentWrapperClassName","keyboardShortcuts","Tab","onChange","onChangeAttachments","Textarea","nakedTextarea","rows","placeholder","onKeyDown","e","key","shiftKey","preventDefault","alt","strategy","buttonProps","style","MenuHorizontal","Button","onClick","Typography","Modal","isOpen","onClose","Header","displayName","memo"],"mappings":"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"}

package/dist/DynamicVariables.js

@@ -10,7 +10,7 @@ import { mergeLeft, uniqBy, prop, isEmpty } from 'ramda';
 import { n } from './inject-css-C2dztUxs.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var css = ".neeto-molecules-dynamic-variables{display:flex;flex-direction:column;gap:.375rem;max-width:22.5rem;min-width:11.5rem;padding:.5rem}.neeto-molecules-dynamic-variables__list{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.neeto-molecules-dynamic-variables__list button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:.375rem;text-align:start;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.neeto-molecules-dynamic-variables__list button:focus,.neeto-molecules-dynamic-variables__list button:focus-visible,.neeto-molecules-dynamic-variables__list button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
+var css = ".neeto-molecules-dynamic-variables{display:flex;flex-direction:column;gap:.375rem;max-width:22.5rem;min-width:11.5rem;padding:.5rem}.neeto-molecules-dynamic-variables__list{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.neeto-molecules-dynamic-variables__list button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:.375rem;text-align:start;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (prefers-reduced-motion:reduce){.neeto-molecules-dynamic-variables__list button{transition:none}}.neeto-molecules-dynamic-variables__list button:focus,.neeto-molecules-dynamic-variables__list button:focus-visible,.neeto-molecules-dynamic-variables__list button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
 n(css,{});
 
 var parseVariables = function parseVariables() {
@@ -76,15 +76,13 @@ var DynamicVariables = function DynamicVariables(_ref) {
     strategy: "fixed",
     zIndex: 99999,
     buttonProps: _objectSpread({
-      "data-testid": "variables-dropdown",
-      "data-cy": "dynamic-variables-button"
+      "data-testid": "dynamic-variables-button"
     }, buttonProps)
   }, dropdownProps), {}, {
     children: /*#__PURE__*/jsx(Menu, {
       children: /*#__PURE__*/jsx("div", {
         className: "neeto-molecules-dynamic-variables",
-        "data-cy": "dynamic-variables-list",
-        "data-testid": "variables-list",
+        "data-testid": "dynamic-variables-list",
         children: parsedVariables.map(function (_ref2) {
           var label = _ref2.label,
             variables = _ref2.variables;
@@ -99,10 +97,10 @@ var DynamicVariables = function DynamicVariables(_ref) {
               })]
             }), /*#__PURE__*/jsx("div", {
               className: "neeto-molecules-dynamic-variables__list",
-              "data-cy": joinHyphenCase("dynamic-variables-list", label),
+              "data-testid": joinHyphenCase("dynamic-variables-list", label),
               children: variables.map(function (item) {
                 return /*#__PURE__*/jsx("button", {
-                  "data-cy": joinHyphenCase("dynamic-variables-list-item", item.label),
+                  "data-testid": joinHyphenCase("dynamic-variables-list-item", item.label),
                   onClick: function onClick() {
                     return onVariableClick(item);
                   },

package/dist/DynamicVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicVariables.js","sources":["../src/components/DynamicVariables/utils.js","../src/components/DynamicVariables/index.jsx"],"sourcesContent":["import { findBy } from \"neetocist\";\nimport { prop, isEmpty, uniqBy, mergeLeft } from \"ramda\";\n\nexport const parseVariables = (variableArr = []) => {\n  const uncategorized = [];\n  const groupedVariables = [];\n  const categorySet = new Set();\n\n  variableArr.forEach(variable => {\n    const { category, label, variables } = variable;\n    if (category && variables) {\n      const parsedVariables = variables.map(\n        mergeLeft({ category, categoryLabel: label })\n      );\n\n      if (!categorySet.has(category)) {\n        categorySet.add(category);\n        groupedVariables.push({ label, variables: parsedVariables });\n      } else {\n        const existingGroup = findBy({ label }, groupedVariables);\n\n        existingGroup.variables = uniqBy(\n          prop(\"key\"),\n          existingGroup.variables.concat(parsedVariables)\n        );\n      }\n    } else {\n      uncategorized.push(variable);\n    }\n  });\n\n  if (!isEmpty(uncategorized)) {\n    groupedVariables.push({\n      label: !isEmpty(groupedVariables) ? \"Others\" : null,\n      variables: uncategorized,\n    });\n  }\n\n  return groupedVariables;\n};\n","import { Fragment } from \"react\";\n\nimport { noop } from \"neetocist\";\nimport { joinHyphenCase } from \"neetocommons/utils/general\";\nimport { Braces } from \"neetoicons\";\nimport { Dropdown, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { isEmpty } from \"ramda\";\n\nimport \"./dynamic-variables.scss\";\nimport { parseVariables } from \"./utils\";\n\nconst { Menu } = Dropdown;\n\nconst DynamicVariables = ({\n  onVariableClick = noop,\n  variables = [],\n  buttonProps,\n  ...dropdownProps\n}) => {\n  if (isEmpty(variables)) {\n    return null;\n  }\n\n  const parsedVariables = parseVariables(variables);\n\n  return (\n    <Dropdown\n      appendTo={() => document.body}\n      buttonStyle=\"secondary\"\n      icon={Braces}\n      strategy=\"fixed\"\n      zIndex={99999}\n      buttonProps={{\n        \"data-testid\": \"variables-dropdown\",\n        \"data-cy\": \"dynamic-variables-button\",\n        ...buttonProps,\n      }}\n      {...dropdownProps}\n    >\n      <Menu>\n        <div\n          className=\"neeto-molecules-dynamic-variables\"\n          data-cy=\"dynamic-variables-list\"\n          data-testid=\"variables-list\"\n        >\n          {parsedVariables.map(({ label, variables }) => (\n            <Fragment key={label}>\n              {label && (\n                <div className=\"flex flex-row items-center gap-x-2\">\n                  <Typography style=\"h6\">{label}</Typography>\n                  <hr className=\"neeto-ui-border-gray-200 flex flex-grow\" />\n                </div>\n              )}\n              <div\n                className=\"neeto-molecules-dynamic-variables__list\"\n                data-cy={joinHyphenCase(\"dynamic-variables-list\", label)}\n              >\n                {variables.map(item => (\n                  <button\n                    key={item.label}\n                    data-cy={joinHyphenCase(\n                      \"dynamic-variables-list-item\",\n                      item.label\n                    )}\n                    onClick={() => onVariableClick(item)}\n                  >\n                    {item.label}\n                  </button>\n                ))}\n              </div>\n            </Fragment>\n          ))}\n        </div>\n      </Menu>\n    </Dropdown>\n  );\n};\n\nDynamicVariables.propTypes = {\n  /**\n   * A function that is triggered when a dynamic variable button is clicked. It receives an object containing information about the clicked variable.\n   */\n  onVariableClick: PropTypes.func,\n  /**\n   * An array of objects, each representing a category or standalone variable, with the ability to define a label, key, and default value for each variable.\n   */\n  variables: PropTypes.arrayOf(\n    PropTypes.shape({ label: PropTypes.string, key: PropTypes.string })\n  ),\n};\n\nexport default DynamicVariables;\n"],"names":["parseVariables","variableArr","arguments","length","undefined","uncategorized","groupedVariables","categorySet","Set","forEach","variable","category","label","variables","parsedVariables","map","mergeLeft","categoryLabel","has","add","push","existingGroup","findBy","uniqBy","prop","concat","isEmpty","Menu","Dropdown","DynamicVariables","_ref","_ref$onVariableClick","onVariableClick","noop","_ref$variables","buttonProps","dropdownProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","appendTo","document","body","buttonStyle","icon","Braces","strategy","zIndex","children","className","_ref2","_jsxs","Fragment","Typography","style","joinHyphenCase","item","onClick"],"mappings":";;;;;;;;;;;;;;;AAGO,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,GAAyB;AAAA,EAAA,IAArBC,WAAW,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE;EAC7C,IAAMG,aAAa,GAAG,EAAE;EACxB,IAAMC,gBAAgB,GAAG,EAAE;AAC3B,EAAA,IAAMC,WAAW,GAAG,IAAIC,GAAG,EAAE;AAE7BP,EAAAA,WAAW,CAACQ,OAAO,CAAC,UAAAC,QAAQ,EAAI;AAC9B,IAAA,IAAQC,QAAQ,GAAuBD,QAAQ,CAAvCC,QAAQ;MAAEC,KAAK,GAAgBF,QAAQ,CAA7BE,KAAK;MAAEC,SAAS,GAAKH,QAAQ,CAAtBG,SAAS;IAClC,IAAIF,QAAQ,IAAIE,SAAS,EAAE;AACzB,MAAA,IAAMC,eAAe,GAAGD,SAAS,CAACE,GAAG,CACnCC,SAAS,CAAC;AAAEL,QAAAA,QAAQ,EAARA,QAAQ;AAAEM,QAAAA,aAAa,EAAEL;AAAM,OAAC,CAC9C,CAAC;AAED,MAAA,IAAI,CAACL,WAAW,CAACW,GAAG,CAACP,QAAQ,CAAC,EAAE;AAC9BJ,QAAAA,WAAW,CAACY,GAAG,CAACR,QAAQ,CAAC;QACzBL,gBAAgB,CAACc,IAAI,CAAC;AAAER,UAAAA,KAAK,EAALA,KAAK;AAAEC,UAAAA,SAAS,EAAEC;AAAgB,SAAC,CAAC;AAC9D,MAAA,CAAC,MAAM;QACL,IAAMO,aAAa,GAAGC,MAAM,CAAC;AAAEV,UAAAA,KAAK,EAALA;SAAO,EAAEN,gBAAgB,CAAC;AAEzDe,QAAAA,aAAa,CAACR,SAAS,GAAGU,MAAM,CAC9BC,IAAI,CAAC,KAAK,CAAC,EACXH,aAAa,CAACR,SAAS,CAACY,MAAM,CAACX,eAAe,CAChD,CAAC;AACH,MAAA;AACF,IAAA,CAAC,MAAM;AACLT,MAAAA,aAAa,CAACe,IAAI,CAACV,QAAQ,CAAC;AAC9B,IAAA;AACF,EAAA,CAAC,CAAC;AAEF,EAAA,IAAI,CAACgB,OAAO,CAACrB,aAAa,CAAC,EAAE;IAC3BC,gBAAgB,CAACc,IAAI,CAAC;MACpBR,KAAK,EAAE,CAACc,OAAO,CAACpB,gBAAgB,CAAC,GAAG,QAAQ,GAAG,IAAI;AACnDO,MAAAA,SAAS,EAAER;AACb,KAAC,CAAC;AACJ,EAAA;AAEA,EAAA,OAAOC,gBAAgB;AACzB,CAAC;;;;;AC3BD,IAAQqB,IAAI,GAAKC,QAAQ,CAAjBD,IAAI;AAEZ,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAKhB;AAAA,EAAA,IAAAC,oBAAA,GAAAD,IAAA,CAJJE,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAA,MAAA,GAAGE,IAAI,GAAAF,oBAAA;IAAAG,cAAA,GAAAJ,IAAA,CACtBjB,SAAS;AAATA,IAAAA,SAAS,GAAAqB,cAAA,KAAA,MAAA,GAAG,EAAE,GAAAA,cAAA;IACdC,WAAW,GAAAL,IAAA,CAAXK,WAAW;AACRC,IAAAA,aAAa,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;AAEhB,EAAA,IAAIZ,OAAO,CAACb,SAAS,CAAC,EAAE;AACtB,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,IAAMC,eAAe,GAAGd,cAAc,CAACa,SAAS,CAAC;AAEjD,EAAA,oBACE0B,GAAA,CAACX,QAAQ,EAAAY,aAAA,CAAAA,aAAA,CAAA;IACPC,QAAQ,EAAE,SAAVA,QAAQA,GAAA;MAAA,OAAQC,QAAQ,CAACC,IAAI;IAAA,CAAC;AAC9BC,IAAAA,WAAW,EAAC,WAAW;AACvBC,IAAAA,IAAI,EAAEC,MAAO;AACbC,IAAAA,QAAQ,EAAC,OAAO;AAChBC,IAAAA,MAAM,EAAE,KAAM;AACdb,IAAAA,WAAW,EAAAK,aAAA,CAAA;AACT,MAAA,aAAa,EAAE,oBAAoB;AACnC,MAAA,SAAS,EAAE;AAA0B,KAAA,EAClCL,WAAW;AACd,GAAA,EACEC,aAAa,CAAA,EAAA,EAAA,EAAA;IAAAa,QAAA,eAEjBV,GAAA,CAACZ,IAAI,EAAA;AAAAsB,MAAAA,QAAA,eACHV,GAAA,CAAA,KAAA,EAAA;AACEW,QAAAA,SAAS,EAAC,mCAAmC;AAC7C,QAAA,SAAA,EAAQ,wBAAwB;AAChC,QAAA,aAAA,EAAY,gBAAgB;AAAAD,QAAAA,QAAA,EAE3BnC,eAAe,CAACC,GAAG,CAAC,UAAAoC,KAAA,EAAA;AAAA,UAAA,IAAGvC,KAAK,GAAAuC,KAAA,CAALvC,KAAK;YAAEC,SAAS,GAAAsC,KAAA,CAATtC,SAAS;UAAA,oBACtCuC,IAAA,CAACC,QAAQ,EAAA;YAAAJ,QAAA,EAAA,CACNrC,KAAK,iBACJwC,IAAA,CAAA,KAAA,EAAA;AAAKF,cAAAA,SAAS,EAAC,oCAAoC;cAAAD,QAAA,EAAA,cACjDV,GAAA,CAACe,UAAU,EAAA;AAACC,gBAAAA,KAAK,EAAC,IAAI;AAAAN,gBAAAA,QAAA,EAAErC;eAAkB,CAAC,eAC3C2B,GAAA,CAAA,IAAA,EAAA;AAAIW,gBAAAA,SAAS,EAAC;AAAyC,eAAE,CAAC;aACvD,CACN,eACDX,GAAA,CAAA,KAAA,EAAA;AACEW,cAAAA,SAAS,EAAC,yCAAyC;AACnD,cAAA,SAAA,EAASM,cAAc,CAAC,wBAAwB,EAAE5C,KAAK,CAAE;AAAAqC,cAAAA,QAAA,EAExDpC,SAAS,CAACE,GAAG,CAAC,UAAA0C,IAAI,EAAA;AAAA,gBAAA,oBACjBlB,GAAA,CAAA,QAAA,EAAA;AAEE,kBAAA,SAAA,EAASiB,cAAc,CACrB,6BAA6B,EAC7BC,IAAI,CAAC7C,KACP,CAAE;kBACF8C,OAAO,EAAE,SAATA,OAAOA,GAAA;oBAAA,OAAQ1B,eAAe,CAACyB,IAAI,CAAC;kBAAA,CAAC;kBAAAR,QAAA,EAEpCQ,IAAI,CAAC7C;iBAAK,EAPN6C,IAAI,CAAC7C,KAQJ,CAAC;cAAA,CACV;AAAC,aACC,CAAC;AAAA,WAAA,EAvBOA,KAwBL,CAAC;QAAA,CACZ;OACE;KACD;AAAC,GAAA,CACC,CAAC;AAEf;;;;"}
+{"version":3,"file":"DynamicVariables.js","sources":["../src/components/DynamicVariables/utils.js","../src/components/DynamicVariables/index.jsx"],"sourcesContent":["import { findBy } from \"neetocist\";\nimport { prop, isEmpty, uniqBy, mergeLeft } from \"ramda\";\n\nexport const parseVariables = (variableArr = []) => {\n  const uncategorized = [];\n  const groupedVariables = [];\n  const categorySet = new Set();\n\n  variableArr.forEach(variable => {\n    const { category, label, variables } = variable;\n    if (category && variables) {\n      const parsedVariables = variables.map(\n        mergeLeft({ category, categoryLabel: label })\n      );\n\n      if (!categorySet.has(category)) {\n        categorySet.add(category);\n        groupedVariables.push({ label, variables: parsedVariables });\n      } else {\n        const existingGroup = findBy({ label }, groupedVariables);\n\n        existingGroup.variables = uniqBy(\n          prop(\"key\"),\n          existingGroup.variables.concat(parsedVariables)\n        );\n      }\n    } else {\n      uncategorized.push(variable);\n    }\n  });\n\n  if (!isEmpty(uncategorized)) {\n    groupedVariables.push({\n      label: !isEmpty(groupedVariables) ? \"Others\" : null,\n      variables: uncategorized,\n    });\n  }\n\n  return groupedVariables;\n};\n","import { Fragment } from \"react\";\n\nimport { noop } from \"neetocist\";\nimport { joinHyphenCase } from \"neetocommons/utils/general\";\nimport { Braces } from \"neetoicons\";\nimport { Dropdown, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { isEmpty } from \"ramda\";\n\nimport \"./dynamic-variables.scss\";\nimport { parseVariables } from \"./utils\";\n\nconst { Menu } = Dropdown;\n\nconst DynamicVariables = ({\n  onVariableClick = noop,\n  variables = [],\n  buttonProps,\n  ...dropdownProps\n}) => {\n  if (isEmpty(variables)) {\n    return null;\n  }\n\n  const parsedVariables = parseVariables(variables);\n\n  return (\n    <Dropdown\n      appendTo={() => document.body}\n      buttonStyle=\"secondary\"\n      icon={Braces}\n      strategy=\"fixed\"\n      zIndex={99999}\n      buttonProps={{\n        \"data-testid\": \"dynamic-variables-button\",\n        ...buttonProps,\n      }}\n      {...dropdownProps}\n    >\n      <Menu>\n        <div\n          className=\"neeto-molecules-dynamic-variables\"\n          data-testid=\"dynamic-variables-list\"\n        >\n          {parsedVariables.map(({ label, variables }) => (\n            <Fragment key={label}>\n              {label && (\n                <div className=\"flex flex-row items-center gap-x-2\">\n                  <Typography style=\"h6\">{label}</Typography>\n                  <hr className=\"neeto-ui-border-gray-200 flex flex-grow\" />\n                </div>\n              )}\n              <div\n                className=\"neeto-molecules-dynamic-variables__list\"\n                data-testid={joinHyphenCase(\"dynamic-variables-list\", label)}\n              >\n                {variables.map(item => (\n                  <button\n                    key={item.label}\n                    data-testid={joinHyphenCase(\n                      \"dynamic-variables-list-item\",\n                      item.label\n                    )}\n                    onClick={() => onVariableClick(item)}\n                  >\n                    {item.label}\n                  </button>\n                ))}\n              </div>\n            </Fragment>\n          ))}\n        </div>\n      </Menu>\n    </Dropdown>\n  );\n};\n\nDynamicVariables.propTypes = {\n  /**\n   * A function that is triggered when a dynamic variable button is clicked. It receives an object containing information about the clicked variable.\n   */\n  onVariableClick: PropTypes.func,\n  /**\n   * An array of objects, each representing a category or standalone variable, with the ability to define a label, key, and default value for each variable.\n   */\n  variables: PropTypes.arrayOf(\n    PropTypes.shape({ label: PropTypes.string, key: PropTypes.string })\n  ),\n};\n\nexport default DynamicVariables;\n"],"names":["parseVariables","variableArr","arguments","length","undefined","uncategorized","groupedVariables","categorySet","Set","forEach","variable","category","label","variables","parsedVariables","map","mergeLeft","categoryLabel","has","add","push","existingGroup","findBy","uniqBy","prop","concat","isEmpty","Menu","Dropdown","DynamicVariables","_ref","_ref$onVariableClick","onVariableClick","noop","_ref$variables","buttonProps","dropdownProps","_objectWithoutProperties","_excluded","_jsx","_objectSpread","appendTo","document","body","buttonStyle","icon","Braces","strategy","zIndex","children","className","_ref2","_jsxs","Fragment","Typography","style","joinHyphenCase","item","onClick"],"mappings":"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"}

package/dist/EmailForm.js

@@ -5,19 +5,18 @@ import classnames from 'classnames';
 import { useFormikContext, Field } from 'formik';
 import { isPresent, isNotEmpty, notEqualsDeep, noop } from '@bigbinary/neeto-cist';
 import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
-import Typography from '@bigbinary/neetoui/Typography';
 import Button from '@bigbinary/neetoui/Button';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Radio from '@bigbinary/neetoui/formik/Radio';
 import { prop, equals, pluck, isEmpty } from 'ramda';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { t } from 'i18next';
 import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import * as yup from 'yup';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Input from '@bigbinary/neetoui/formik/Input';
 import _typeof from '@babel/runtime/helpers/typeof';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import SendToFields from './SendToFields.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
@@ -32,6 +31,7 @@ import { n } from './inject-css-C2dztUxs.js';
 import Form from '@bigbinary/neetoui/formik/Form';
 import '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import '@bigbinary/neeto-editor/EditorContent';
+import '@bigbinary/neetoui/Typography';
 import './index-DAYCJu79.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import '@babel/runtime/helpers/toConsumableArray';
@@ -47,6 +47,7 @@ import '@babel/runtime/helpers/objectWithoutProperties';
 import '@bigbinary/neeto-icons/Braces';
 import '@bigbinary/neetoui/Dropdown';
 import './Breadcrumbs.js';
+import '@bigbinary/neeto-commons-frontend/react-utils';
 import 'react-router-dom';
 import './HelpPopover.js';
 import '@bigbinary/neeto-icons/Help';
@@ -54,7 +55,6 @@ import '@bigbinary/neetoui/Popover';
 import './MoreDropdown.js';
 import '@bigbinary/neeto-icons/MenuHorizontal';
 import '@bigbinary/neeto-icons/MenuVertical';
-import '@bigbinary/neeto-commons-frontend/react-utils';
 import './Search.js';
 import '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
 import '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
@@ -111,7 +111,9 @@ var EDITOR_ADDONS = ["highlight", "emoji", "code-block", "block-quote", "image-u
 var EmailFormContext = /*#__PURE__*/createContext({
   showSendToField: false,
   showSendToAsRadio: false,
-  showReplyToField: false
+  showReplyToField: false,
+  showCcField: false,
+  showBccField: false
 });
 
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -139,7 +141,7 @@ var getValidationSchema = function getValidationSchema(_ref) {
 var getReplyToFieldLabelProps = function getReplyToFieldLabelProps(_ref2) {
   var popoverProps = _ref2.popoverProps;
   return {
-    helpIconProps: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "data-testid", "reply-to-tooltip"), "data-cy", "reply-to-tooltip"), "tooltipProps", !isPresent(popoverProps) && {
+    helpIconProps: _defineProperty(_defineProperty(_defineProperty({}, "data-testid", "reply-to-tooltip"), "tooltipProps", !isPresent(popoverProps) && {
       content: t("neetoMolecules.emailForm.tooltips.replyTo"),
       touch: ["hold", 500]
     }), "popoverProps", isPresent(popoverProps) && _objectSpread$3(_objectSpread$3({}, popoverProps), {}, {
@@ -178,7 +180,7 @@ var ReplyToField = function ReplyToField(_ref) {
       options: options,
       isClearable: true,
       className: "w-full",
-      "data-testid": "replyToOptions",
+      "data-testid": "reply-to-select-field",
       label: t("neetoMolecules.emailForm.labels.replyTo"),
       name: "replyTo",
       onChange: function onChange(data) {
@@ -190,9 +192,10 @@ var ReplyToField = function ReplyToField(_ref) {
   return /*#__PURE__*/jsx(Input, {
     labelProps: labelProps,
     autoFocus: true,
+    nakedInput: true,
     required: true,
     className: "w-full",
-    "data-testid": "replyToInput",
+    "data-testid": "reply-to-input-field",
     label: t("neetoMolecules.emailForm.labels.replyTo"),
     name: "replyTo",
     placeholder: t("neetoMolecules.emailForm.placeholders.emailPlaceholder"),
@@ -261,43 +264,30 @@ var SubjectField = function SubjectField(_ref) {
     var updatedSubject = [text.slice(0, splitIndex), " {{".concat(variable, "}}"), text.slice(splitIndex)].join("");
     updateText(updatedSubject);
   };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Input$1, {
-      error: error,
-      name: name,
-      onBlur: onBlur,
-      required: required,
-      label: t("neetoMolecules.emailForm.labels.subject"),
-      size: "large",
-      value: text,
-      suffix: /*#__PURE__*/jsx(DynamicVariables, {
-        variables: subjectVariables,
-        dropdownProps: {
-          className: "neeto-ui-dropdown__popup overflow-y-auto",
-          buttonSize: "small"
-        },
-        onVariableClick: tagClickHandler
-      }),
-      onChange: withEventTargetValue(updateText),
-      onFocus: function onFocus() {
-        return setIsFieldFocusedOnce(true);
-      }
-    }), /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-600 mt-2",
-      "data-cy": "subject-input-variable-label",
-      style: "body3",
-      children: /*#__PURE__*/jsx(Trans, {
-        components: {
-          span: /*#__PURE__*/jsx("span", {
-            className: "font-semibold"
-          })
-        },
-        i18nKey: "neetoMolecules.emailForm.helpText",
-        values: {
-          type: "subject"
-        }
-      })
-    })]
+  return /*#__PURE__*/jsx(Input$1, {
+    error: error,
+    name: name,
+    onBlur: onBlur,
+    required: required,
+    nakedInput: true,
+    label: t("neetoMolecules.emailForm.labels.subject"),
+    placeholder: t("neetoMolecules.emailForm.placeholders.subject"),
+    value: text,
+    suffix: /*#__PURE__*/jsx(DynamicVariables, {
+      buttonProps: {
+        className: "m-1"
+      },
+      variables: subjectVariables,
+      dropdownProps: {
+        className: "neeto-ui-dropdown__popup overflow-y-auto",
+        buttonSize: "small"
+      },
+      onVariableClick: tagClickHandler
+    }),
+    onChange: withEventTargetValue(updateText),
+    onFocus: function onFocus() {
+      return setIsFieldFocusedOnce(true);
+    }
   });
 };
 
@@ -355,89 +345,82 @@ var EmailForm = function EmailForm(_ref) {
   var showSendToRadioField = showSendToField && showSendToAsRadio && isNotEmpty(sendToFieldOptions);
   var showSendToTextField = showSendToField && !showSendToRadioField;
   return /*#__PURE__*/jsxs("div", {
-    "data-cy": "email-form",
     "data-testid": "email-form",
     className: classnames("neeto-notification-email-wrapper__form-container flex flex-1 flex-col items-start gap-2 !pb-0", _defineProperty({}, className, className)),
-    children: [showFields && /*#__PURE__*/jsxs("div", {
-      className: "flex w-full flex-col items-start justify-start gap-6",
-      children: [/*#__PURE__*/jsx(Field, {
-        name: "subject",
-        children: function children(_ref2) {
-          var _ref2$field = _ref2.field,
-            value = _ref2$field.value,
-            onBlur = _ref2$field.onBlur,
-            _ref2$meta = _ref2.meta,
-            error = _ref2$meta.error,
-            touched = _ref2$meta.touched;
-          return /*#__PURE__*/jsx("div", {
-            className: "w-full",
-            children: /*#__PURE__*/jsx(SubjectField, {
-              onBlur: onBlur,
-              subjectVariables: subjectVariables,
-              required: true,
-              error: touched && error ? t(error) : undefined,
-              name: "subject",
-              text: value,
-              updateText: function updateText(text) {
-                return setFieldValue("subject", text);
-              }
-            })
-          });
-        }
-      }), showSendToRadioField && /*#__PURE__*/jsx(Radio, {
-        "data-testid": "send-to-id",
-        label: t("neetoMolecules.emailForm.labels.sendTo"),
-        labelProps: {
-          required: true
-        },
-        name: "sendToId",
-        children: sendToFieldOptions.map(function (_ref3) {
-          var label = _ref3.label,
-            value = _ref3.value;
-          return /*#__PURE__*/createElement(Radio.Item, {
-            label: label,
-            value: value,
-            key: value
-          });
-        })
-      }), /*#__PURE__*/jsx(SendToField, {
-        showBccField: showBccField,
-        showCcField: showCcField,
-        showSendToTextField: showSendToTextField
-      }), showReplyToField && /*#__PURE__*/jsx(ReplyToField, _objectSpread$2({
-        options: replyToOptions
-      }, replyToFieldProps)), /*#__PURE__*/jsxs("div", {
-        className: "w-full",
-        "data-cy": "message-input-container",
-        children: [/*#__PURE__*/jsx(FormikEditor, {
-          required: true,
-          addons: editorAddons,
-          "data-cy": "message-input-field",
-          id: "form_message",
-          label: t("neetoMolecules.emailForm.labels.message"),
-          name: "message",
-          ref: editorRef,
-          variables: messageVariables,
-          shouldUpdate: function shouldUpdate(nextProps, prevProps) {
-            return notEqualsDeep(nextProps.variables, prevProps.variables);
-          }
-        }), /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-500 mt-2",
-          "data-cy": "message-input-variable-label",
-          style: "body3",
-          children: /*#__PURE__*/jsx(Trans, {
-            i18nKey: "neetoMolecules.emailForm.helpText",
-            values: {
-              type: "message"
-            },
-            components: {
-              span: /*#__PURE__*/jsx("span", {
-                className: "font-semibold"
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w-full grow",
+      children: showFields && /*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col items-start justify-start gap-5",
+        children: [showSendToRadioField && /*#__PURE__*/jsx(Radio, {
+          className: "pb-2",
+          "data-testid": "send-to-id",
+          label: t("neetoMolecules.emailForm.labels.sendTo"),
+          labelProps: {
+            required: true
+          },
+          name: "sendToId",
+          children: sendToFieldOptions.map(function (_ref2) {
+            var label = _ref2.label,
+              value = _ref2.value;
+            return /*#__PURE__*/createElement(Radio.Item, {
+              label: label,
+              value: value,
+              key: value
+            });
+          })
+        }), /*#__PURE__*/jsx(SendToField, {
+          showBccField: showBccField,
+          showCcField: showCcField,
+          showSendToTextField: showSendToTextField
+        }), showReplyToField && /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-border-gray-200 w-full border-b pb-1",
+          children: /*#__PURE__*/jsx(ReplyToField, _objectSpread$2({
+            options: replyToOptions
+          }, replyToFieldProps))
+        }), /*#__PURE__*/jsx(Field, {
+          name: "subject",
+          children: function children(_ref3) {
+            var _ref3$field = _ref3.field,
+              value = _ref3$field.value,
+              onBlur = _ref3$field.onBlur,
+              _ref3$meta = _ref3.meta,
+              error = _ref3$meta.error,
+              touched = _ref3$meta.touched;
+            return /*#__PURE__*/jsx("div", {
+              className: "neeto-notification-email-subject-block neeto-ui-border-gray-200 w-full border-b pb-1",
+              children: /*#__PURE__*/jsx(SubjectField, {
+                onBlur: onBlur,
+                subjectVariables: subjectVariables,
+                required: true,
+                error: touched && error ? t(error) : undefined,
+                name: "subject",
+                text: value,
+                updateText: function updateText(text) {
+                  return setFieldValue("subject", text);
+                }
               })
+            });
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-notification-email-message-block w-full",
+          "data-testid": "message-input-container",
+          children: /*#__PURE__*/jsx(FormikEditor, {
+            required: true,
+            addons: editorAddons,
+            "data-testid": "message-input-field",
+            hideSlashCommands: false,
+            id: "form_message",
+            menuType: "fixed",
+            name: "message",
+            placeholder: t("neetoMolecules.emailForm.placeholders.message"),
+            ref: editorRef,
+            variables: messageVariables,
+            shouldUpdate: function shouldUpdate(nextProps, prevProps) {
+              return notEqualsDeep(nextProps.variables, prevProps.variables);
             }
           })
         })]
-      })]
+      })
     }), /*#__PURE__*/jsxs("div", {
       className: "neeto-ui-bg-white neeto-notification-email-wrapper__action-block z-10 flex w-full justify-between py-6 lg:sticky lg:bottom-0",
       children: [/*#__PURE__*/jsx(ActionBlock, {
@@ -449,7 +432,7 @@ var EmailForm = function EmailForm(_ref) {
         className: "neeto-ui-action-block__wrapper",
         children: /*#__PURE__*/jsx(Button, {
           disabled: disabled,
-          "data-cy": "resetToDefaultButton",
+          "data-testid": "reset-to-default-button",
           label: t("neetoMolecules.emailForm.labels.resetToDefault"),
           loading: isResetting,
           style: "tertiary",
@@ -463,7 +446,7 @@ var EmailForm = function EmailForm(_ref) {
   });
 };
 
-var css = ".neeto-notification-email-wrapper{height:calc(100vh - 64px);height:calc(100dvh - 64px)}";
+var css = ".neeto-notification-email-wrapper{height:calc(100vh - 64px);height:calc(100dvh - 64px)}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__control{border:none}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__control--is-focused{box-shadow:none!important}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__value-container{padding-left:0}.neeto-notification-email-message-block p.is-editor-empty{font-size:14px}.neeto-notification-email-subject-block .neeto-ui-input__suffix{padding:0}.neeto-molecules-email-preview-ribbon{background:#ffee6a;border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;box-shadow:0 3px 4px 0 rgba(0,0,0,.149);color:#49545c;font-size:14px;font-weight:500;min-width:-moz-max-content;min-width:max-content;padding:6px 12px;position:absolute;right:-6px;text-align:center;top:-6px;z-index:10}.neeto-molecules-email-preview-ribbon:after{border-color:transparent #ddd06b;border-style:solid;border-width:0 0 12px 6px;content:\"\";left:auto;position:absolute;right:0;top:100%;z-index:-20}";
 n(css,{});
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }