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,
+ })),
}));