@firecms/core 3.0.0-canary.210 → 3.0.0-canary.211

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.210",
+  "version": "3.0.0-canary.211",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.210",
-    "@firecms/formex": "^3.0.0-canary.210",
-    "@firecms/ui": "^3.0.0-canary.210",
+    "@firecms/editor": "^3.0.0-canary.211",
+    "@firecms/formex": "^3.0.0-canary.211",
+    "@firecms/ui": "^3.0.0-canary.211",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.3",
     "clsx": "^2.1.1",
@@ -62,6 +62,7 @@
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
+    "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
@@ -104,7 +105,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "b8bcb3a2230e8b02644ce5ed0891b273e7e7d630",
+  "gitHead": "ee9fd6ecade3bb23be5cfa025117be9fe2b6fd7f",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityJsonPreview.tsx

@@ -0,0 +1,66 @@
+import React, { useRef, useEffect, useCallback } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+    const preRef = useRef<HTMLPreElement>(null);
+
+    // Global keydown handler
+    const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+        // Check for Control (Windows/Linux) or Command (macOS) + "a":
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+            // If our code view is mounted, perform selection
+            if (preRef.current) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const selection = window.getSelection();
+                const range = document.createRange();
+                range.selectNodeContents(preRef.current);
+                if (selection) {
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            }
+        }
+    }, []);
+
+    // Attach the global keydown listener when component mounts,
+    // and remove it when it unmounts.
+    useEffect(() => {
+        document.addEventListener("keydown", handleGlobalKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleGlobalKeyDown);
+        };
+    }, [handleGlobalKeyDown]);
+
+    return (
+        <Highlight
+            theme={mode === "dark" ? themes.vsDark : themes.vsLight}
+            code={code}
+            language="json"
+        >
+            {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                    // Bind the ref to our pre element so we can select its contents.
+                    ref={preRef}
+                    style={{
+                        ...style,
+                        background: "inherit"
+                    }}
+                    className="container mx-auto p-8 rounded text-sm"
+                >
+          {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} className="text-wrap">
+                  {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} className="word-break" />
+                  ))}
+              </div>
+          ))}
+        </pre>
+            )}
+        </Highlight>
+    );
+}

package/src/core/EntityEditView.tsx

@@ -16,12 +16,14 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
+import { EntityJsonPreview } from "../components/EntityJsonPreview";
 
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -141,7 +143,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        barActions,
                                                                        status,
                                                                        setStatus,
-                                                                       formProps,
+                                                                       formProps
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
@@ -186,7 +188,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const includeJsonView = true;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
     const {
         resolvedEntityViews,
@@ -229,6 +232,17 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const globalLoading = dataLoading && !usedEntity;
 
+    const jsonView = <div
+        className={cls("relative flex-1 h-full overflow-auto w-full",
+            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+        key={"json_view"}
+        role="tabpanel">
+        <ErrorBoundary>
+            <EntityJsonPreview
+                values={formContext?.values ?? {}}/>
+        </ErrorBoundary>
+    </div>;
+
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.id ?? subcollection.path;
         const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
@@ -269,7 +283,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection,
+                collection
             });
         }
     };
@@ -303,7 +317,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         onSaved={(params) => {
             const res = {
                 ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
             };
             onSaved?.(res);
             formProps?.onSaved?.(res);
@@ -350,6 +364,14 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     onSideTabClick(value);
                 }}>
 
+                {includeJsonView && <Tab
+                    disabled={!hasAdditionalViews}
+                    value={JSON_TAB_VALUE}
+                    innerClassName={"block"}
+                    className={"text-sm"}>
+                    <CodeIcon size={"small"}/>
+                </Tab>}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
@@ -357,6 +379,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     {collection.singularName ?? collection.name}
                 </Tab>
 
+
                 {customViewTabs}
 
                 {subcollectionTabs}
@@ -369,7 +392,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </div>
             : entityView}
 
-        {/*{secondaryForms}*/}
+        {jsonView}
 
         {customViewsView}
 

package/src/internal/useBuildSideEntityController.tsx

@@ -20,6 +20,7 @@ import {
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useCustomizationController, useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
+import { JSON_TAB_VALUE } from "../core/EntityEditView";
 
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
@@ -31,7 +32,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
 
-    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
 
     let resolvedWidth: string | undefined;
     if (props.width) {