diff --git a/src/apps/content-editor/src/app/components/Editor/Editor.js b/src/apps/content-editor/src/app/components/Editor/Editor.js index ea9c559ac0..d954d95a1d 100644 --- a/src/apps/content-editor/src/app/components/Editor/Editor.js +++ b/src/apps/content-editor/src/app/components/Editor/Editor.js @@ -41,7 +41,11 @@ export default memo(function Editor({ }) { const dispatch = useDispatch(); const isNewItem = itemZUID.slice(0, 3) === "new"; - const { data: fields } = useGetContentModelFieldsQuery(modelZUID); + const { + data: fields, + isSuccess, + isFetching, + } = useGetContentModelFieldsQuery(modelZUID); const activeFields = useMemo(() => { if (fields?.length) { @@ -206,47 +210,50 @@ export default memo(function Editor({ {saveClicked && ( )} - {activeFields.length ? ( - activeFields.map((field) => { - return ( -
- -
- ); - }) - ) : ( -
-

No fields have been added

-

- Use the{" "} - Schema Builder to - define your items content -

-
- )} + + {!isFetching && + isSuccess && + (activeFields.length ? ( + activeFields.map((field) => { + return ( +
+ +
+ ); + }) + ) : ( +
+

No fields have been added

+

+ Use the{" "} + Schema Builder to + define your items content +

+
+ ))} ); diff --git a/src/shell/components/FieldTypeTinyMCE/index.tsx b/src/shell/components/FieldTypeTinyMCE/index.tsx index a577209f8a..7bd325655d 100644 --- a/src/shell/components/FieldTypeTinyMCE/index.tsx +++ b/src/shell/components/FieldTypeTinyMCE/index.tsx @@ -74,6 +74,7 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ // NOTE: controlled component const [initialValue, setInitialValue] = useState(value); const [isSkinLoaded, setIsSkinLoaded] = useState(false); + const [isFullScreen, setIsFullScreen] = useState(false); // NOTE: update if version changes useEffect(() => { @@ -147,6 +148,9 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ }); }, 100); } + } else if (evt.code === "Escape") { + if (isFullScreen) + tinymce.activeEditor.execCommand("mceFullScreen"); } }} onObjectResized={(evt) => { @@ -202,7 +206,6 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ "socialmediaembed", "imageresizer", ], - // NOTE: premium plugins are being loaded from a self hosted location // specific to our application. Making this component not usable outside of our context. external_plugins: externalPlugins ?? {}, @@ -297,7 +300,8 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ p { font-size: 16px; line-height: 24px; }\ span.mce-preview-object.mce-object-video { width: 100%; height: 100% }\ video { width: 100%; height: 100%; object-fill: fill; aspect-ratio: auto;}\ - #tinymce { margin: 16px }`, + #tinymce { margin: 16px; }\ + ul, ol { line-height: 24px; }`, // init_instance_callback: (editor) => { // tinymce.DOM.styleSheetLoader @@ -316,9 +320,11 @@ export const FieldTypeTinyMCE = React.memo(function FieldTypeTinyMCE({ // Limits the content width to 640px when in fullscreen editor.on("FullscreenStateChanged", (evt: any) => { if (evt.state) { + setIsFullScreen(true); editor.contentDocument.documentElement.style.display = "flex"; editor.contentDocument.body.style.width = "640px"; } else { + setIsFullScreen(false); editor.contentDocument.documentElement.style.display = "block"; editor.contentDocument.body.style.width = "auto";