- exit fullscreen using Esc

- UL , OL line height 24ppx - Showing only "No fields have been added" for those without fields yet
zesty-io · Jan 31, 2024 · df8edfb · df8edfb
1 parent 992d482
commit df8edfb
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 44 deletions.
diff --git 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 && (
           <FieldError errors={fieldErrors} fields={activeFields} />
         )}
-        {activeFields.length ? (
-          activeFields.map((field) => {
-            return (
-              <div
-                key={`${field.ZUID}`}
-                id={field.ZUID}
-                className={styles.Field}
-              >
-                <Field
-                  ZUID={field.ZUID}
-                  contentModelZUID={field.contentModelZUID}
-                  active={active === field.ZUID}
-                  name={field.name}
-                  label={field.label}
-                  description={field.description}
-                  required={field.required}
-                  relatedFieldZUID={field.relatedFieldZUID}
-                  relatedModelZUID={field.relatedModelZUID}
-                  datatype={field.datatype}
-                  options={field.options}
-                  settings={field.settings}
-                  onChange={onChange}
-                  onSave={onSave}
-                  item={item}
-                  langID={item?.meta?.langID}
-                  errors={fieldErrors[field.name]}
-                  maxLength={MaxLengths[field.datatype]}
-                />
-              </div>
-            );
-          })
-        ) : (
-          <div className={styles.NoFields}>
-            <h1 className={styles.Display}>No fields have been added</h1>
-            <h2 className={styles.SubHead}>
-              Use the{" "}
-              <AppLink to={`/schema/${modelZUID}`}>Schema Builder</AppLink> to
-              define your items content
-            </h2>
-          </div>
-        )}
+
+        {!isFetching &&
+          isSuccess &&
+          (activeFields.length ? (
+            activeFields.map((field) => {
+              return (
+                <div
+                  key={`${field.ZUID}`}
+                  id={field.ZUID}
+                  className={styles.Field}
+                >
+                  <Field
+                    ZUID={field.ZUID}
+                    contentModelZUID={field.contentModelZUID}
+                    active={active === field.ZUID}
+                    name={field.name}
+                    label={field.label}
+                    description={field.description}
+                    required={field.required}
+                    relatedFieldZUID={field.relatedFieldZUID}
+                    relatedModelZUID={field.relatedModelZUID}
+                    datatype={field.datatype}
+                    options={field.options}
+                    settings={field.settings}
+                    onChange={onChange}
+                    onSave={onSave}
+                    item={item}
+                    langID={item?.meta?.langID}
+                    errors={fieldErrors[field.name]}
+                    maxLength={MaxLengths[field.datatype]}
+                  />
+                </div>
+              );
+            })
+          ) : (
+            <div className={styles.NoFields}>
+              <h1 className={styles.Display}>No fields have been added</h1>
+              <h2 className={styles.SubHead}>
+                Use the{" "}
+                <AppLink to={`/schema/${modelZUID}`}>Schema Builder</AppLink> to
+                define your items content
+              </h2>
+            </div>
+          ))}
       </div>
     </ThemeProvider>
   );

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