diff --git a/apps/frontend/src/components/new-launch/editor.tsx b/apps/frontend/src/components/new-launch/editor.tsx index 23f9c8e0..9e8aba43 100644 --- a/apps/frontend/src/components/new-launch/editor.tsx +++ b/apps/frontend/src/components/new-launch/editor.tsx @@ -55,6 +55,7 @@ export const EditorWrapper: FC<{ setGlobalValue, setInternalValue, internalFromAll, + totalChars } = useLaunchStore( useShallow((state) => ({ internal: state.internal.find((p) => p.integration.id === state.current), @@ -75,6 +76,7 @@ export const EditorWrapper: FC<{ deleteInternalValue: state.deleteInternalValue, setGlobalValue: state.setGlobalValue, setInternalValue: state.setInternalValue, + totalChars: state.totalChars, })) ); @@ -271,6 +273,7 @@ export const EditorWrapper: FC<{ autoComplete={canEdit} validateChars={true} identifier={internalFromAll?.identifier || 'global'} + totalChars={totalChars} />
@@ -337,6 +340,7 @@ export const Editor: FC<{ autoComplete?: boolean; validateChars?: boolean; identifier?: string; + totalChars?: number; }> = (props) => { const { allValues, @@ -447,6 +451,9 @@ export const Editor: FC<{ /> )}
+
props.totalChars && "!text-red-500")}> + {props.value.length}/{props.totalChars} +
); }; diff --git a/apps/frontend/src/components/new-launch/manage.modal.tsx b/apps/frontend/src/components/new-launch/manage.modal.tsx index 218440a7..ff13f3f5 100644 --- a/apps/frontend/src/components/new-launch/manage.modal.tsx +++ b/apps/frontend/src/components/new-launch/manage.modal.tsx @@ -176,10 +176,16 @@ export const ManageModal: FC = (props) => { const sliceNeeded = checkAllValid.filter((p: any) => { return p.values.some((a: any) => { - return ( - countCharacters(a.content, p?.integration?.identifier || '') > - (p.maximumCharacters || 1000000) + const weightedLength = countCharacters( + a.content, + p?.integration?.identifier || '' ); + const totalCharacters = + weightedLength > a.content.length + ? weightedLength + : a.content.length; + + return totalCharacters > (p.maximumCharacters || 1000000); }); }); diff --git a/apps/frontend/src/components/new-launch/providers/high.order.provider.tsx b/apps/frontend/src/components/new-launch/providers/high.order.provider.tsx index f7885dcd..a90cfb1f 100644 --- a/apps/frontend/src/components/new-launch/providers/high.order.provider.tsx +++ b/apps/frontend/src/components/new-launch/providers/high.order.provider.tsx @@ -4,6 +4,7 @@ import React, { FC, forwardRef, useCallback, + useEffect, useImperativeHandle, useMemo, } from 'react'; @@ -59,6 +60,8 @@ export const withProvider = function ( isGlobal, tab, setTab, + setTotalChars, + justCurrent, } = useLaunchStore( useShallow((state) => ({ date: state.date, @@ -67,15 +70,39 @@ export const withProvider = function ( global: state.global, internal: state.internal.find((p) => p.integration.id === props.id), integrations: state.selectedIntegrations, + justCurrent: state.current, current: state.current === props.id, isGlobal: state.current === 'global', setCurrent: state.setCurrent, + setTotalChars: state.setTotalChars, selectedIntegration: state.selectedIntegrations.find( (p) => p.integration.id === props.id ), })) ); + useEffect(() => { + if (!setTotalChars) { + return; + } + + if (isGlobal) { + setTotalChars(0); + } + + if (current) { + setTotalChars( + typeof maximumCharacters === 'number' + ? maximumCharacters + : maximumCharacters( + JSON.parse( + selectedIntegration.integration.additionalSettings || '[]' + ) + ) + ); + } + }, [justCurrent, current, isGlobal, setTotalChars]); + const getInternalPlugs = useCallback(async () => { return ( await fetch( @@ -207,7 +234,12 @@ export const withProvider = function ( {(tab === 0 || !SettingsComponent) && !value?.[0]?.content?.length && ( -
{t('start_writing_your_post', 'Start writing your post for a preview')}
+
+ {t( + 'start_writing_your_post', + 'Start writing your post for a preview' + )} +
)} {(tab === 0 || !SettingsComponent) && !!value?.[0]?.content?.length && diff --git a/apps/frontend/src/components/new-launch/store.ts b/apps/frontend/src/components/new-launch/store.ts index a66c897f..4a6e8d54 100644 --- a/apps/frontend/src/components/new-launch/store.ts +++ b/apps/frontend/src/components/new-launch/store.ts @@ -27,6 +27,7 @@ interface StoreState { date: dayjs.Dayjs; repeater?: number; isCreateSet: boolean; + totalChars: number; tags: { label: string; value: string }[]; tab: 0 | 1; current: string; @@ -100,11 +101,13 @@ interface StoreState { setRepeater: (repeater: number) => void; setTags: (tags: { label: string; value: string }[]) => void; setIsCreateSet: (isCreateSet: boolean) => void; + setTotalChars?: (totalChars: number) => void; } const initialState = { date: dayjs(), tags: [] as { label: string; value: string }[], + totalChars: 0, tab: 0 as 0, isCreateSet: false, current: 'global', @@ -445,4 +448,8 @@ export const useLaunchStore = create()((set) => ({ : item ), })), + setTotalChars: (totalChars: number) => + set((state) => ({ + totalChars, + })), }));