feat(app-headless-cms): enable full-screen editor for content entries #4443
Conversation
… into leo/feat/hcms-fullscreen-editor
|
/cypress |
|
Cypress E2E tests have been initiated (for more information, click here). ✨ |
| const isNewEntry = useMemo(() => !entry.meta?.title, [entry.meta]); | ||
| const version = useMemo(() => entry.meta?.version ?? null, [entry.meta]); | ||
| const status = useMemo(() => entry.meta?.status ?? null, [entry.meta]); |
There was a problem hiding this comment.
All three hooks will always run, if entry.meta changes. You might as well combine all 3 into 1 hook, which returns an object { isNewEntry, version, status }. Otherwise, use specific dependencies on each hook, like entry.meta?.title, entry.meta?.version, etc.
| const isNewEntry = useMemo(() => !entry.meta?.title, [entry.meta]); | ||
| const version = useMemo(() => entry.meta?.version ?? null, [entry.meta]); | ||
| const status = useMemo(() => entry.meta?.status ?? null, [entry.meta]); | ||
| const modelName = useMemo(() => model.name, [model.name]); |
There was a problem hiding this comment.
This useMemo is completely pointless. You'll spend more processing power to execute the hook, than gain anything. You're memoizing that same string value, which you have in the dependencies array :)
| } from "./FullScreenContentEntry.styled"; | ||
|
|
||
| export const FullScreenContentEntryHeaderLeft = () => { | ||
| const { model } = useModel(); |
There was a problem hiding this comment.
This hook is redundant, because useContentEntry() hook below, has access to that same model, just add a contentModel key.
| const title = useMemo( | ||
| () => entry?.meta?.title || `New ${model.name}`, | ||
| [entry.meta, model.name] | ||
| ); |
There was a problem hiding this comment.
These type of memoizations are adding more calculations than they're optimizing. These simple assingments can be executed on each render, especially since the output is a primitive string.
| }); | ||
|
|
||
| export const FullScreenContentEntry = () => { | ||
| return ( |
There was a problem hiding this comment.
Add feature flag here, and remove it from all other components:
if (!featureFlags.allowCmsFullScreenEditor) {
return null;
}
If the feature is disabled, you simply don't decorate anything.
Changes
This PR introduces a new experimental full-screen editor for headless CMS entries. The feature is under the feature flag:
allowCmsFullScreenEditor: true.As we work on this feature, we enable the EntryForm Header to be decorated. This capability is essential for its development.
How Has This Been Tested?
Manually