diff --git a/apps/frontend/src/components/new-launch/editor.tsx b/apps/frontend/src/components/new-launch/editor.tsx index 533e1539..84abfeb9 100644 --- a/apps/frontend/src/components/new-launch/editor.tsx +++ b/apps/frontend/src/components/new-launch/editor.tsx @@ -10,6 +10,7 @@ import React, { ClipboardEvent, forwardRef, useImperativeHandle, + Fragment, } from 'react'; import clsx from 'clsx'; import { useUser } from '@gitroom/frontend/components/layout/user.context'; @@ -20,7 +21,10 @@ import { BoldText } from '@gitroom/frontend/components/new-launch/bold.text'; import { UText } from '@gitroom/frontend/components/new-launch/u.text'; import { SignatureBox } from '@gitroom/frontend/components/signature'; import { useT } from '@gitroom/react/translation/get.transation.service.client'; -import { useLaunchStore } from '@gitroom/frontend/components/new-launch/store'; +import { + SelectedIntegrations, + useLaunchStore, +} from '@gitroom/frontend/components/new-launch/store'; import { useShallow } from 'zustand/react/shallow'; import { AddPostButton } from '@gitroom/frontend/components/new-launch/add.post.button'; import { MultiMediaComponent } from '@gitroom/frontend/components/media/media.component'; @@ -54,6 +58,7 @@ import Mention from '@tiptap/extension-mention'; import { suggestion } from '@gitroom/frontend/components/new-launch/mention.component'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import { AComponent } from '@gitroom/frontend/components/new-launch/a.component'; +import { capitalize } from 'lodash'; const InterceptBoldShortcut = Extension.create({ name: 'preventBoldWithUnderline', @@ -114,6 +119,8 @@ export const EditorWrapper: FC<{ editor, loadedState, setLoadedState, + selectedIntegration, + chars, } = useLaunchStore( useShallow((state) => ({ internal: state.internal.find((p) => p.integration.id === state.current), @@ -142,6 +149,8 @@ export const EditorWrapper: FC<{ editor: state.editor, loadedState: state.loaded, setLoadedState: state.setLoaded, + selectedIntegration: state.selectedIntegrations, + chars: state.chars, })) ); @@ -357,6 +366,8 @@ export const EditorWrapper: FC<{ totalChars={totalChars} appendImages={appendImages(index)} dummy={dummy} + selectedIntegration={selectedIntegration} + chars={chars} />
@@ -436,7 +447,9 @@ export const Editor: FC<{ validateChars?: boolean; identifier?: string; totalChars?: number; + selectedIntegration: SelectedIntegrations[]; dummy: boolean; + chars: Record; }> = (props) => { const { editorType = 'normal', @@ -444,11 +457,12 @@ export const Editor: FC<{ pictures, setImages, num, - autoComplete, validateChars, identifier, appendImages, + selectedIntegration, dummy, + chars, } = props; const user = useUser(); const [id] = useState(makeId(10)); @@ -637,7 +651,7 @@ export const Editor: FC<{
- {(props?.totalChars || 0) > 0 && ( + {(props?.totalChars || 0) > 0 ? (
{valueWithoutHtml.length}/{props.totalChars}
+ ) : ( +
+ {selectedIntegration?.map((p) => ( + +
chars?.[p.integration.id] && '!text-red-500'}> + {p.integration.name} ({capitalize(p.integration.identifier)}): +
+
chars?.[p.integration.id] && '!text-red-500'}> + {valueWithoutHtml.length}/{chars?.[p.integration.id]} +
+ + ))} +
)}
diff --git a/apps/frontend/src/components/new-launch/manage.modal.tsx b/apps/frontend/src/components/new-launch/manage.modal.tsx index 41dd7e4e..f1657155 100644 --- a/apps/frontend/src/components/new-launch/manage.modal.tsx +++ b/apps/frontend/src/components/new-launch/manage.modal.tsx @@ -142,7 +142,6 @@ export const ManageModal: FC = (props) => { (type: 'draft' | 'now' | 'schedule') => async () => { setLoading(true); const checkAllValid = await ref.current.checkAllValid(); - console.log(checkAllValid); if (type !== 'draft') { const notEnoughChars = checkAllValid.filter((p: any) => { return p.values.some((a: any) => { 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 7a4f2f6f..1a02aa41 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 @@ -89,6 +89,7 @@ export const withProvider = function (params: { setPostComment, setEditor, dummy, + setChars, } = useLaunchStore( useShallow((state) => ({ date: state.date, @@ -106,6 +107,7 @@ export const withProvider = function (params: { setTotalChars: state.setTotalChars, setPostComment: state.setPostComment, setEditor: state.setEditor, + setChars: state.setChars, selectedIntegration: state.selectedIntegrations.find( (p) => p.integration.id === props.id ), @@ -117,6 +119,17 @@ export const withProvider = function (params: { return; } + setChars( + props.id, + typeof maximumCharacters === 'number' + ? maximumCharacters + : maximumCharacters( + JSON.parse( + selectedIntegration.integration.additionalSettings || '[]' + ) + ) + ); + if (isGlobal) { setPostComment(PostComment.ALL); setTotalChars(0); @@ -245,7 +258,12 @@ export const withProvider = function (params: {
setTab(0)} - className={clsx("cursor-pointer rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px]", tab !== 0 && !!SettingsComponent ? '' : 'text-textItemFocused bg-boxFocused')} + className={clsx( + 'cursor-pointer rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px]', + tab !== 0 && !!SettingsComponent + ? '' + : 'text-textItemFocused bg-boxFocused' + )} > {t('preview', 'Preview')}
@@ -255,12 +273,16 @@ export const withProvider = function (params: {
setTab(1)} - className={clsx("cursor-pointer rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px]", tab !== 1 ? '' : 'text-textItemFocused bg-boxFocused')} + className={clsx( + 'cursor-pointer rounded-[4px] flex-1 overflow-hidden whitespace-nowrap text-center pt-[6px] pb-[5px]', + tab !== 1 ? '' : 'text-textItemFocused bg-boxFocused' + )} > {t('settings', 'Settings')} ( {capitalize( selectedIntegration.integration.identifier.split('-')[0] - )}) + )} + )
)} diff --git a/apps/frontend/src/components/new-launch/store.ts b/apps/frontend/src/components/new-launch/store.ts index 6d2c2c45..d92d169e 100644 --- a/apps/frontend/src/components/new-launch/store.ts +++ b/apps/frontend/src/components/new-launch/store.ts @@ -19,7 +19,7 @@ interface Internal { integrationValue: Values[]; } -interface SelectedIntegrations { +export interface SelectedIntegrations { settings: any; integration: Integrations; ref?: RefObject; @@ -123,6 +123,8 @@ interface StoreState { setDummy: (dummy: boolean) => void; setEditor: (editor: 'normal' | 'markdown' | 'html') => void; setLoaded?: (loaded: boolean) => void; + setChars: (id: string, chars: number) => void; + chars: Record; } const initialState = { @@ -143,6 +145,7 @@ const initialState = { selectedIntegrations: [] as SelectedIntegrations[], global: [] as Values[], internal: [] as Internal[], + chars: {}, }; export const useLaunchStore = create()((set) => ({ @@ -536,4 +539,11 @@ export const useLaunchStore = create()((set) => ({ set((state) => ({ loaded, })), + setChars: (id: string, chars: number) => + set((state) => ({ + chars: { + ...state.chars, + [id]: chars, + }, + })), }));