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";