@griddo/ax 1.62.8 → 1.63.2

package/src/components/MainWrapper/AppBar/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { IErrorItem } from "@ax/types";
+import { trimText } from "@ax/helpers";
 import {
   Button,
   Icon,
@@ -144,19 +145,30 @@ const AppBar = (props: IProps): JSX.Element => {
 
   return (
     <S.Header className={`${fixedClass} ${additionalClass}`} inversed={inversed}>
-      <S.Wrapper>
+      <S.WrapperTitle>
         {backLink && (
           <Tooltip content="Back to content screen" bottom>
             <IconAction icon="FullArrowLeft" onClick={goToPages} inversed={inversed} />
           </Tooltip>
         )}
         <S.Title>
-          {title}
+          {trimText(title, 50)}
           <S.Subtitle>{subtitle}</S.Subtitle>
         </S.Title>
-        {tabs && <Tabs tabs={tabs.tabSet} active={tabs.selectedTab} setSelectedTab={tabs.action} isInAppBar={true} />}
-      </S.Wrapper>
-      <S.Wrapper>
+      </S.WrapperTitle>
+      {tabs && (
+        <S.WrapperTabs>
+          <Tabs
+            tabs={tabs.tabSet}
+            icons={tabs.icons}
+            active={tabs.selectedTab}
+            setSelectedTab={tabs.action}
+            isInAppBar={true}
+            inversed={inversed}
+          />
+        </S.WrapperTabs>
+      )}
+      <S.WrapperEnd>
         {searchAction && (
           <>
             <S.SearchWrapper>
@@ -220,7 +232,7 @@ const AppBar = (props: IProps): JSX.Element => {
             </FloatingMenu>
           </Tooltip>
         )}
-      </S.Wrapper>
+      </S.WrapperEnd>
     </S.Header>
   );
 };
@@ -229,7 +241,7 @@ interface IAppBarProps {
   backLink?: boolean | string;
   rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
   rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-  tabs?: { tabSet: any; selectedTab: string; action: (e: any) => void };
+  tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
   downArrowMenu?: { displayed: boolean; options: any; button: any };
   title: string;
   subtitle?: string;

package/src/components/MainWrapper/AppBar/style.tsx

@@ -2,17 +2,32 @@ import styled from "styled-components";
 
 const ActionMenu = styled.ul``;
 
-const Wrapper = styled.div`
+const WrapperTabs = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-right: auto;
+`;
+
+const WrapperEnd = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+`;
+
+const WrapperTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 600px;
+  margin-right: ${(p) => p.theme.spacing.xl};
 `;
 
 const Title = styled.h1`
   margin: 0;
   ${(p) => p.theme.textStyle.headingM};
   padding-left: ${(p) => p.theme.spacing.m};
-  margin-right: calc(${(p) => p.theme.spacing.m} * 3);
 `;
 
 const Subtitle = styled.span`
@@ -97,7 +112,6 @@ const Header = styled.section<{ inversed?: boolean }>`
   min-height: ${(p) => p.theme.spacing.xl};
   background: ${(p) => (p.inversed ? p.theme.color.uiMainMenuBackground : p.theme.color.uiBackground02)};
   display: flex;
-  justify-content: space-between;
   padding-right: ${(p) => p.theme.spacing.s};
 
   button:first-child {
@@ -160,7 +174,7 @@ const SearchWrapper = styled.div`
 export {
   ActionMenu,
   Header,
-  Wrapper,
+  WrapperTabs,
   Title,
   Subtitle,
   ActionText,
@@ -175,4 +189,6 @@ export {
   IconWrapper,
   ErrorWrapper,
   SearchWrapper,
+  WrapperEnd,
+  WrapperTitle,
 };

package/src/components/MainWrapper/index.tsx

@@ -26,7 +26,7 @@ interface IWrapperProps {
   fixedAppBar?: boolean;
   additionalClass?: string;
   downArrowMenu?: { displayed: boolean; options: any; button: any };
-  tabs?: { tabSet: any; selectedTab: string; action: (e: any) => void };
+  tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
   pageStatus?: string;
   language?: { locale: string; id: number | null } | null;
   availableLanguages?: any[] | null;

package/src/components/SideModal/index.tsx

@@ -140,7 +140,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         <S.Wrapper ref={node} optionsType={optionsType}>
           <S.Header>
             <S.Title>{optionsType}</S.Title>
-            {showSearch && (
+            {showSearch && optionsType !== "components" && (
               <S.SearchWrapper>
                 <SearchField onChange={setSearchQuery} closeOnInactive />
               </S.SearchWrapper>

package/src/components/TableFilters/DateFilter/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const DateFilter = (props: IStatusFilterProps): JSX.Element => {
+  const { sortItems, sortedState } = props;
+  const { isAscending, sortedByDate } = sortedState;
+  const sortByModifiedDate = (isAscending: boolean) => sortItems("date", isAscending);
+
+  const sortOldestModifiedDate = () => sortByModifiedDate(true);
+  const sortMostRecentModifiedDate = () => sortByModifiedDate(false);
+
+  const SortedStateArrow = () =>
+    isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
+
+  const Header = () => (
+    <S.Date isActive={sortedByDate}>
+      Date
+      <S.IconsWrapper>
+        {sortedByDate && <SortedStateArrow />}
+        <S.InteractiveArrow>
+          <Icon name="DownArrow" size="16" />
+        </S.InteractiveArrow>
+      </S.IconsWrapper>
+    </S.Date>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Sort by creation date</ListTitle>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortMostRecentModifiedDate}>
+        Most recent
+      </ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortOldestModifiedDate}>
+        Oldest
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface IStatusFilterProps {
+  sortedState: any;
+  sortItems(orderPointer: string, isAscendent: boolean): any;
+}
+
+export default DateFilter;

package/src/components/TableFilters/DateFilter/style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const Date = styled(Header) <{ isActive: boolean }>`
+  width: 100px;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { Date, IconsWrapper, InteractiveArrow };

package/src/components/TableFilters/index.tsx

@@ -6,6 +6,7 @@ import SiteFilter from "./SiteFilter";
 import StatusFilter from "./StatusFilter";
 import TranslationsFilter from "./TranslationsFilter";
 import TypeFilter from "./TypeFilter";
+import DateFilter from "./DateFilter";
 
 export {
   CategoryFilter,
@@ -16,4 +17,5 @@ export {
   StatusFilter,
   TranslationsFilter,
   TypeFilter,
+  DateFilter,
 };

package/src/components/Tabs/index.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from "react";
-import { Icon } from "@ax/components";
+import { Icon, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
-const Tabs = ({ tabs, icons, active, setSelectedTab, isInAppBar, noMargins }: ITabsProps): JSX.Element => {
+const Tabs = (props: ITabsProps): JSX.Element => {
+  const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed } = props;
+
   useEffect(() => {
     tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
   }, [tabs, setSelectedTab]);
@@ -26,12 +28,14 @@ const Tabs = ({ tabs, icons, active, setSelectedTab, isInAppBar, noMargins }: IT
   if (icons) {
     return (
       <S.TabsRow icons={true} isInAppBar={isInAppBar}>
-        {icons.map((tab: any) => {
-          const handleClick = () => setSelectedTab(tab);
+        {icons.map((tab: ITabIcon) => {
+          const handleClick = () => setSelectedTab(tab.name);
           return (
-            <S.TabItem key={tab} active={tab === active} onClick={handleClick}>
+            <S.TabItem key={tab.name} active={tab.name === active} onClick={handleClick} inversed={inversed}>
               <S.TabIcon>
-                <Icon name={tab} />
+                <Tooltip content={tab.text} bottom>
+                  <Icon name={tab.name} />
+                </Tooltip>
               </S.TabIcon>
             </S.TabItem>
           );
@@ -45,11 +49,17 @@ const Tabs = ({ tabs, icons, active, setSelectedTab, isInAppBar, noMargins }: IT
 
 interface ITabsProps {
   tabs?: any[];
-  icons?: string[];
+  icons?: ITabIcon[];
   isInAppBar?: boolean;
   active: string;
   setSelectedTab: any;
   noMargins?: boolean;
+  inversed?: boolean;
+}
+
+interface ITabIcon {
+  name: string;
+  text: string;
 }
 
 export default Tabs;

package/src/components/Tabs/style.tsx

@@ -1,28 +1,30 @@
 import styled from "styled-components";
 
-export const TabsRow = styled.div<{ icons?: boolean, isInAppBar?: boolean, noMargins?: boolean }>`
+const TabsRow = styled.div<{ icons?: boolean; isInAppBar?: boolean; noMargins?: boolean }>`
   display: flex;
-  border-bottom: ${p => (p.icons || p.isInAppBar || p.noMargins ? "none" : `1px solid ${p.theme.color.uiLine}`)};
-  margin-bottom: ${p => (p.isInAppBar || p.noMargins ? 0 : p.theme.spacing.m) };
+  border-bottom: ${(p) => (p.icons || p.isInAppBar || p.noMargins ? "none" : `1px solid ${p.theme.color.uiLine}`)};
+  margin-bottom: ${(p) => (p.isInAppBar || p.noMargins ? 0 : p.theme.spacing.m)};
   align-self: flex-end;
-  height: ${p => p.noMargins ? "auto" : "100%"};
+  height: ${(p) => (p.noMargins || p.isInAppBar ? "auto" : "100%")};
 `;
 
-export const TabItem = styled.button<{ active: boolean, isInAppBar?: boolean }>`
+const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean }>`
   flex-grow: 1;
   border: none;
-  border-bottom: 4px solid ${p => (p.active ? p.theme.color.interactive01 : "transparent")};
-  ${p => p.theme.textStyle.headingXS};
-  color: ${p => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
-  cursor: ${p => (p.active ? "initial" : "pointer")};
+  border-bottom: 4px solid
+    ${(p) =>
+      !p.active ? "transparent" : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01};
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  cursor: ${(p) => (p.active ? "initial" : "pointer")};
   background: transparent;
-  height: ${p => (p.isInAppBar ? "100%" : "48px")};
+  height: ${(p) => (p.isInAppBar ? "100%" : "48px")};
 
   &:hover {
-    color: ${p => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.interactive01)};
+    color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.interactive01)};
     svg {
       path {
-        fill: ${p => p.theme.color.interactive01};
+        fill: ${(p) => (p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
       }
     }
   }
@@ -33,12 +35,23 @@ export const TabItem = styled.button<{ active: boolean, isInAppBar?: boolean }>`
   }
 
   svg {
-    width: ${p => p.theme.spacing.m};
-    height: ${p => p.theme.spacing.m};
+    width: ${(p) => p.theme.spacing.m};
+    height: ${(p) => p.theme.spacing.m};
     path {
-      fill: ${p => (p.active ? p.theme.color.interactive01 : p.theme.color.iconNonActive)};
+      fill: ${(p) =>
+        !p.active
+          ? p.theme.color.interactiveDisabled
+          : p.inversed
+          ? p.theme.color.iconHighEmphasisInverse
+          : p.theme.color.interactive01};
     }
   }
 `;
 
-export const TabIcon = styled.div``;
+const TabIcon = styled.div`
+  text-transform: none;
+  padding-left: ${(p) => p.theme.spacing.xxs};
+  padding-right: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { TabsRow, TabItem, TabIcon };

package/src/components/Tooltip/index.tsx

@@ -4,7 +4,7 @@ import { useHandleClickOutside } from "@ax/hooks";
 import * as S from "./style";
 
 const Tooltip = (props: IProps): JSX.Element => {
-  const { content, children, hideOnClick, bottom, left } = props;
+  const { content, children, hideOnClick = true, bottom, left } = props;
 
   const initialState: IState = {
     active: false,

package/src/components/Tooltip/style.tsx

@@ -26,6 +26,8 @@ const Tip = styled.div<{
   white-space: nowrap;
   display: ${(p) => (p.active ? "block" : "none")};
   animation: fadeIn 0.3s;
+  font-weight: normal;
+  text-transform: none;
 
   @keyframes fadeIn {
     from {

package/src/components/index.tsx

@@ -39,6 +39,7 @@ import {
   StatusFilter,
   TranslationsFilter,
   TypeFilter,
+  DateFilter,
 } from "./TableFilters";
 
 import ActionMenu from "./ActionMenu";
@@ -121,6 +122,7 @@ export {
   ListTitle,
   ListItem,
   //Filters
+  DateFilter,
   CategoryFilter,
   CustomizeFilters,
   LiveFilter,

package/src/containers/App/reducer.tsx

@@ -37,7 +37,8 @@ export interface IUser {
 }
 
 export interface IGlobalSettings {
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   globalLogoBig: string;
   globalLogoMini: string;
   siteLogoBig: string;
@@ -66,6 +67,7 @@ export const initialState = {
   globalLangs: [],
   globalSettings: {
     cloudinaryName: "",
+    damDomain: "",
     globalLogoBig: "",
     globalLogoMini: "",
     siteLogoBig: "",

package/src/containers/PageEditor/actions.tsx

@@ -77,7 +77,7 @@ import {
 } from "./interfaces";
 
 const { setIsLoading, setIsSaving } = appActions;
-const { getSiteDefaults } = navigationActions;
+const { getSiteDefaults, getDefaults } = navigationActions;
 
 // AUDIT: THIS FILE IS WAY TOO LONG - LOOK FOR A REFACTOR SOLUTION
 // FIXME: CHECK EDITOR CONTENT STRUCTURE (editorContent.editorContent)
@@ -154,6 +154,40 @@ function setUserEditing(userEditing: IUserEditing | null): ISetUserEditing {
   return { type: SET_USER_EDITING, payload: { userEditing } };
 }
 
+function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        app: { lang },
+        pageEditor: {
+          selectedEditorID,
+          editorContent: {
+            editorContent: { parent, site, entity, language },
+          },
+        },
+      } = getState();
+
+      const responseActions = {
+        handleSuccess: (data: any) => {
+          const { items } = data;
+          const translatedParent = items.filter(
+            (item: any) => (item.languageId === lang.id && language !== lang.id && item.pageId) || null
+          );
+          const translatedParentId = translatedParent && translatedParent[0] ? translatedParent[0].pageId : null;
+          updateEditorContent(selectedEditorID, "parent", translatedParentId)(dispatch, getState);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => pages.getPageLanguages(parent, site, entity);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e); // TODO: capturar error bien
+    }
+  };
+}
+
 function createNewTranslation(isNewTranslation: boolean): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -258,10 +292,11 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
         const pageLiveStatus = page.draftFromPage
           ? pageStatus.MODIFIED
           : isNewTranslation
-          ? pageStatus.OFFLINE
-          : page.liveStatus.status;
+            ? pageStatus.OFFLINE
+            : page.liveStatus.status;
 
         if (isReqOk(response.status)) {
+          addTemplate(page.templateId)(dispatch);
           setRootEditorID(dispatch, getState);
           generatePageContent(page, dispatch, getState);
           dispatch(setCurrentPageName(page.title));
@@ -269,7 +304,6 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
           dispatch(setTemplateConfig(page.templateConfig));
           dispatch(setUserEditing(page.editing));
           dispatch(setCurrentPageStatus(pageLiveStatus));
-          addTemplate(page.templateId)(dispatch);
         }
       } else {
         if (!isNewTranslation) {
@@ -285,6 +319,24 @@ function getPage(pageID?: number, global?: boolean): (dispatch: Dispatch, getSta
   };
 }
 
+function getTemplatePage(template: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+  return async (dispatch, getState) => {
+    try {
+      dispatch(setIsLoading(true));
+
+      const baseSchema = "Page";
+
+      await addTemplate(template)(dispatch);
+      await getTemplateConfig(template)(dispatch, getState);
+      await getDefaults()(dispatch, getState);
+      generateNewPage(dispatch, getState, baseSchema);
+    } catch (e) {
+      dispatch(setIsLoading(false));
+      console.log(e); // TODO: capturar error bien
+    }
+  };
+}
+
 function savePage(
   createDraft: boolean,
   publishPage?: any,
@@ -682,15 +734,17 @@ function overwriteHeaderConfig(params: IFieldProps): (dispatch: Dispatch, getSta
   };
 }
 
-function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState: any) {
+function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState: any): void {
   const {
-    pageEditor: { selectedEditorID },
+    pageEditor: { selectedEditorID, isNewTranslation, template },
     navigation: { currentDefaultsContent },
+    dataPacks: { configFormData },
   } = getState();
   const { header, footer, isGlobal } = editorContent;
+  const { defaultHeader, defaultFooter } = configFormData.templates && configFormData.templates[template] || {};
   const { header: pageHeader, footer: pageFooter } = getPageNavigation(
-    header,
-    footer,
+    header || defaultHeader,
+    footer || defaultFooter,
     currentDefaultsContent,
     isGlobal
   );
@@ -701,12 +755,12 @@ function generatePageContent(editorContent: IPage, dispatch: Dispatch, getState:
   const schema = getSchema(component);
 
   dispatch(setSchema(schema));
-
   dispatch(setEditorContent(pageContent));
   dispatch(updateBreadcrumb(selectedEditorID));
   dispatch(setSelectedPageContent(selectedContent));
   dispatch(setSelectedParent(selectedParent));
   dispatch(setIsLoading(false));
+  if (isNewTranslation) setTranslatedParent()(dispatch, getState);
 }
 
 function updateEditorContent(
@@ -783,7 +837,7 @@ function updateBreadcrumb(editorID: number): any {
     const { header, footer } = editorContent;
     const navigationIds = [header?.editorID, footer?.editorID];
     if (navigationIds.includes(editorID)) {
-      const rootBreadcrumb = { editorID: 0, displayName: 'Page', component: 'Page' };
+      const rootBreadcrumb = { editorID: 0, displayName: "Page", component: "Page" };
       newBreadcrumb.unshift(rootBreadcrumb);
     }
 
@@ -1019,4 +1073,5 @@ export {
   setSitePageID,
   sendPagePing,
   discardDraft,
+  getTemplatePage,
 };

package/src/containers/Settings/DataPacks/actions.tsx

@@ -132,7 +132,7 @@ function getSiteDataPack(packID: string): (dispatch: Dispatch, getState: any) =>
         handleError: () => console.log("Error en getDataPack"),
       };
 
-      const callback = async () => dataPack.getSiteDataPack(currentSiteID, packID);
+      const callback = async () => await dataPack.getSiteDataPack(currentSiteID, packID);
 
       await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
     } catch (e) {
@@ -226,6 +226,9 @@ function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any)
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
+      delete configFormData.defaultHeader;
+      delete configFormData.defaultFooter;
+
       const callback = async () => dataPack.updateDataPack(currentSiteID, dataPackID, configFormData);
 
       await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);

package/src/containers/Sites/actions.tsx

@@ -141,6 +141,7 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
     try {
       const {
         structuredData: { structuredData: currentStructuredData },
+        structuredData: { categories: currentCategories },
       } = getState();
 
       dispatch(setIsLoading(true));
@@ -192,8 +193,9 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
         const data = structuredDataResponse.data.items;
 
         const categories = structuredDataActions.filterStructuredData(data, true, currentSiteInfo.id);
+
         const structuredDataValues = structuredDataActions.filterStructuredData(data, false, currentSiteInfo.id);
-        dispatch(structuredDataActions.setCategories(categories));
+        dispatch(structuredDataActions.setCategories({ global: currentCategories.global, site: categories.site }));
 
         dispatch(
           structuredDataActions.setStructuredData({ ...currentStructuredData, site: structuredDataValues.site })

package/src/helpers/dates.tsx

@@ -60,14 +60,13 @@ const getStringifyDateRange = (start: Date, end: Date, formatDate?: string): str
 const getHumanLastModifiedDate = (modified: Date): string => {
   const now = new Date();
   const date = new Date(modified);
-  const dateWithTimezone = addMinutes(date, date.getTimezoneOffset());
 
   const oneDay = 60 * 60 * 24 * 1000;
-  const isMoreThan24Hours = now.getTime() - dateWithTimezone.getTime() > oneDay;
+  const isMoreThan24Hours = now.getTime() - date.getTime() > oneDay;
 
   return isMoreThan24Hours
-    ? format(dateWithTimezone, "d MMM HH:mm")
-    : formatDistanceToNowStrict(dateWithTimezone, { addSuffix: true });
+    ? format(date, "d MMM HH:mm")
+    : formatDistanceToNowStrict(date, { addSuffix: true });
 };
 
 const getFormattedDateWithTimezone = (date: Date, formatString: string): string => {

package/src/helpers/index.tsx

@@ -19,6 +19,7 @@ import {
   getFileExtension,
   splitAndJoin,
   splitAndTrim,
+  copyTextToClipboard,
 } from "./strings";
 
 import {
@@ -164,4 +165,5 @@ export {
   getDataPackSchema,
   splitAndJoin,
   splitAndTrim,
+  copyTextToClipboard,
 };