diff --git a/packages/core/dev-test/config.yml b/packages/core/dev-test/config.yml index 6c931bda..0c1d8ddf 100644 --- a/packages/core/dev-test/config.yml +++ b/packages/core/dev-test/config.yml @@ -844,8 +844,6 @@ collections: label: Site Settings file: _data/settings.json description: General Site Settings - editor: - preview: true fields: - label: Number of posts on frontpage name: front_limit diff --git a/packages/core/src/components/collections/CollectionHeader.tsx b/packages/core/src/components/collections/CollectionHeader.tsx index 18a528ed..34678df2 100644 --- a/packages/core/src/components/collections/CollectionHeader.tsx +++ b/packages/core/src/components/collections/CollectionHeader.tsx @@ -76,8 +76,18 @@ const CollectionHeader = ({ return ( <> <div className="flex flex-grow gap-4"> - <h2 className="text-xl font-semibold flex items-center text-gray-800 dark:text-gray-300"> - <div className="mr-2 flex">{icon}</div> + <h2 + className=" + text-xl + font-semibold + flex + items-center + text-gray-800 + dark:text-gray-300 + gap-2 + " + > + <div className="flex items-center">{icon}</div> {pluralLabel} </h2> {newEntryUrl ? ( diff --git a/packages/core/src/components/entry-editor/Editor.tsx b/packages/core/src/components/entry-editor/Editor.tsx index 908644c4..6c1e3632 100644 --- a/packages/core/src/components/entry-editor/Editor.tsx +++ b/packages/core/src/components/entry-editor/Editor.tsx @@ -47,7 +47,6 @@ const Editor: FC<TranslatedProps<EditorProps>> = ({ displayUrl, isModification, draftKey, - showDelete, slug, localBackup, scrollSyncActive, @@ -292,7 +291,6 @@ const Editor: FC<TranslatedProps<EditorProps>> = ({ onPersist={handlePersistEntry} onDelete={handleDeleteEntry} onDuplicate={handleDuplicateEntry} - showDelete={showDelete ?? true} hasChanged={hasChanged} displayUrl={displayUrl} isNewEntry={!slug} @@ -312,7 +310,6 @@ interface CollectionViewOwnProps { name: string; slug?: string; newRecord: boolean; - showDelete?: boolean; } function mapStateToProps(state: RootState, ownProps: CollectionViewOwnProps) { diff --git a/packages/core/src/components/entry-editor/EditorInterface.tsx b/packages/core/src/components/entry-editor/EditorInterface.tsx index a482b16e..1ee36f88 100644 --- a/packages/core/src/components/entry-editor/EditorInterface.tsx +++ b/packages/core/src/components/entry-editor/EditorInterface.tsx @@ -62,7 +62,6 @@ interface EditorInterfaceProps { onPersist: (opts?: EditorPersistOptions) => void; onDelete: () => Promise<void>; onDuplicate: () => void; - showDelete: boolean; hasChanged: boolean; displayUrl: string | undefined; isNewEntry: boolean; @@ -78,7 +77,6 @@ const EditorInterface = ({ entry, fields = [], fieldsErrors, - showDelete, onDelete, onDuplicate, onPersist, @@ -99,6 +97,7 @@ const EditorInterface = ({ const [previewActive, setPreviewActive] = useState( localStorage.getItem(PREVIEW_VISIBLE) !== 'false', ); + const [i18nActive, setI18nActive] = useState( Boolean(localStorage.getItem(I18N_VISIBLE) !== 'false' && locales && locales.length > 0), ); @@ -137,13 +136,16 @@ const EditorInterface = ({ }, []); const [showPreviewToggle, previewInFrame] = useMemo(() => { + console.log('[PREVIEW] collection', collection); let preview = collection.editor?.preview ?? true; + console.log('[PREVIEW] preview', preview); let frame = collection.editor?.frame ?? true; if ('files' in collection) { const file = getFileFromSlug(collection, entry.slug); if (file?.editor?.preview !== undefined) { preview = file.editor.preview; + console.log('[PREVIEW] preview file', preview); } if (file?.editor?.frame !== undefined) { @@ -154,6 +156,11 @@ const EditorInterface = ({ return [preview, frame]; }, [collection, entry.slug]); + const finalPreviewActive = useMemo( + () => showPreviewToggle && previewActive, + [previewActive, showPreviewToggle], + ); + const collectHasI18n = hasI18n(collection); const editor = ( @@ -174,7 +181,7 @@ const EditorInterface = ({ fieldsErrors={fieldsErrors} locale={defaultLocale} submitted={submitted} - hideBorder={!previewActive && !i18nActive} + hideBorder={!finalPreviewActive && !i18nActive} t={t} /> </div> @@ -240,6 +247,8 @@ const EditorInterface = ({ ); const breadcrumbs = useBreadcrumbs(collection, nestedFieldPath, { isNewEntry, summary, t }); + console.log('[PREVIEW] showPreviewToggle', showPreviewToggle); + return ( <MainView breadcrumbs={breadcrumbs} @@ -253,7 +262,6 @@ const EditorInterface = ({ onPersistAndNew={() => handleOnPersist({ createNew: true })} onPersistAndDuplicate={() => handleOnPersist({ createNew: true, duplicate: true })} onDelete={onDelete} - showDelete={showDelete} onDuplicate={onDuplicate} hasChanged={hasChanged} displayUrl={displayUrl} @@ -261,7 +269,7 @@ const EditorInterface = ({ isNewEntry={isNewEntry} isModification={isModification} showPreviewToggle={showPreviewToggle} - previewActive={previewActive} + previewActive={finalPreviewActive} scrollSyncActive={scrollSyncActive} showI18nToggle={collectHasI18n} i18nActive={i18nActive} @@ -274,7 +282,7 @@ const EditorInterface = ({ <EditorContent key={draftKey} i18nActive={i18nActive} - previewActive={previewActive && !i18nActive} + previewActive={finalPreviewActive && !i18nActive} editor={editor} editorSideBySideLocale={editorSideBySideLocale} editorWithPreview={editorWithPreview} diff --git a/packages/core/src/components/entry-editor/EditorToolbar.tsx b/packages/core/src/components/entry-editor/EditorToolbar.tsx index a0e9e691..d09fa43e 100644 --- a/packages/core/src/components/entry-editor/EditorToolbar.tsx +++ b/packages/core/src/components/entry-editor/EditorToolbar.tsx @@ -25,7 +25,6 @@ export interface EditorToolbarProps { onPersistAndNew: () => Promise<void>; onPersistAndDuplicate: () => Promise<void>; onDelete: () => Promise<void>; - showDelete: boolean; onDuplicate: () => void; hasChanged: boolean; displayUrl: string | undefined; @@ -52,7 +51,6 @@ const EditorToolbar = ({ onPersistAndDuplicate, onPersistAndNew, isNewEntry, - showDelete, onDelete, t, showPreviewToggle, @@ -110,10 +108,17 @@ const EditorToolbar = ({ return items; }, [canCreate, isPublished, onDuplicate, onPersist, onPersistAndDuplicate, onPersistAndNew, t]); + console.log( + '[PREVIEW] showI18nToggle || showPreviewToggle || showDelete', + showI18nToggle, + showPreviewToggle, + canDelete, + ); + return useMemo( () => ( <div className="flex gap-2"> - {showI18nToggle || showPreviewToggle || showDelete ? ( + {showI18nToggle || showPreviewToggle || canDelete ? ( <Menu key="extra-menu" label={<MoreVertIcon className="w-5 h-5" />} @@ -154,7 +159,7 @@ const EditorToolbar = ({ </> )} </MenuGroup> - {showDelete && canDelete ? ( + {canDelete ? ( <MenuGroup key="delete-button"> <MenuItemButton onClick={onDelete} startIcon={TrashIcon} color="error"> {t('editor.editorToolbar.deleteEntry')} @@ -174,7 +179,6 @@ const EditorToolbar = ({ [ showI18nToggle, showPreviewToggle, - showDelete, toggleI18n, i18nActive, t, diff --git a/packages/core/src/components/media-library/common/MediaLibrary.tsx b/packages/core/src/components/media-library/common/MediaLibrary.tsx index d326b60d..27acec49 100644 --- a/packages/core/src/components/media-library/common/MediaLibrary.tsx +++ b/packages/core/src/components/media-library/common/MediaLibrary.tsx @@ -4,7 +4,6 @@ import isEmpty from 'lodash/isEmpty'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { translate } from 'react-polyglot'; -import { changeViewStyle } from '@staticcms/core/actions/entries'; import { closeMediaLibrary, deleteMedia, @@ -16,20 +15,17 @@ import { import useMediaFiles from '@staticcms/core/lib/hooks/useMediaFiles'; import { fileExtension } from '@staticcms/core/lib/util'; import MediaLibraryCloseEvent from '@staticcms/core/lib/util/events/MediaLibraryCloseEvent'; -import { selectViewStyle } from '@staticcms/core/reducers/selectors/entries'; import { selectMediaLibraryState } from '@staticcms/core/reducers/selectors/mediaLibrary'; import { useAppDispatch, useAppSelector } from '@staticcms/core/store/hooks'; import alert from '../../common/alert/Alert'; import Button from '../../common/button/Button'; import confirm from '../../common/confirm/Confirm'; -import ViewStyleControl from '../../common/view-style/ViewStyleControl'; import CurrentMediaDetails from './CurrentMediaDetails'; import EmptyMessage from './EmptyMessage'; import FileUploadButton from './FileUploadButton'; import MediaLibraryCardGrid from './MediaLibraryCardGrid'; import MediaLibrarySearch from './MediaLibrarySearch'; -import type { ViewStyle } from '@staticcms/core/constants/views'; import type { MediaFile, TranslatedProps } from '@staticcms/core/interface'; import type { ChangeEvent, FC, KeyboardEvent } from 'react'; @@ -59,7 +55,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals const [query, setQuery] = useState<string | undefined>(undefined); const dispatch = useAppDispatch(); - const viewStyle = useAppSelector(selectViewStyle); const { isVisible, displayURLs, @@ -86,13 +81,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals const files = useMediaFiles(field); - const handleViewStyleChange = useCallback( - (viewStyle: ViewStyle) => { - dispatch(changeViewStyle(viewStyle)); - }, - [dispatch], - ); - useEffect(() => { if (!prevIsVisible && isVisible) { setSelectedFile(null); @@ -378,10 +366,20 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals /> <div className="flex items-center px-5 pt-4"> <div className="flex flex-grow gap-4 mr-8"> - <h2 className="text-xl font-semibold flex items-center text-gray-800 dark:text-gray-300"> - <span className="mr-2"> + <h2 + className=" + text-xl + font-semibold + flex + items-center + gap-2 + text-gray-800 + dark:text-gray-300 + " + > + <div className="flex items-center"> <PhotoIcon className="w-5 h-5" /> - </span> + </div> {t('app.header.media')} </h2> <MediaLibrarySearch @@ -393,7 +391,6 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({ canInsert = fals /> </div> <div className="flex gap-3 items-center relative z-20"> - <ViewStyleControl viewStyle={viewStyle} onChangeViewStyle={handleViewStyleChange} /> <FileUploadButton imagesOnly={forImage} onChange={handlePersist} /> {canInsert ? ( <Button diff --git a/packages/demo/public/config.yml b/packages/demo/public/config.yml index 4ba5bec8..fbe78a21 100644 --- a/packages/demo/public/config.yml +++ b/packages/demo/public/config.yml @@ -845,8 +845,6 @@ collections: label: Site Settings file: _data/settings.json description: General Site Settings - editor: - preview: true fields: - label: Number of posts on frontpage name: front_limit