@firecms/core 3.3.0-canary.451aa49 → 3.3.0-canary.a5780ce

package/dist/preview/components/ArrayEnumPreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { EnumValueConfig } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
 /**
@@ -8,4 +9,4 @@ export declare function ArrayEnumPreview({ name, value, enumValues, size }: {
     name: string | undefined;
     enumValues: EnumValueConfig[];
     size: PreviewSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/preview/components/AsyncPreviewComponent.d.ts

@@ -8,4 +8,4 @@ export interface AsyncPreviewComponentProps {
  *
  * @group Preview components
  */
-export declare const AsyncPreviewComponent: React.MemoExoticComponent<(<M extends Record<string, any>>({ builder }: AsyncPreviewComponentProps) => import("react/jsx-runtime").JSX.Element)>;
+export declare const AsyncPreviewComponent: React.MemoExoticComponent<(<M extends Record<string, any>>({ builder }: AsyncPreviewComponentProps) => React.JSX.Element)>;

package/dist/preview/components/EmptyValue.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 /**
  * @group Preview components
  */
-export declare function EmptyValue(): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyValue(): React.JSX.Element;

package/dist/preview/components/EnumValuesChip.d.ts

@@ -10,4 +10,4 @@ export interface EnumValuesChipProps {
 /**
  * @group Preview components
  */
-export declare function EnumValuesChip({ enumValues, enumKey, size, className, children }: EnumValuesChipProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnumValuesChip({ enumValues, enumKey, size, className, children }: EnumValuesChipProps): React.JSX.Element | null;

package/dist/preview/components/ImagePreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { PreviewSize } from "../PropertyPreviewProps";
 /**
  * @group Preview components
@@ -13,4 +14,4 @@ export interface ImagePreviewProps {
 /**
  * @group Preview components
  */
-export declare function ImagePreview({ size, url, fill }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagePreview({ size, url, fill }: ImagePreviewProps): React.JSX.Element;

package/dist/preview/components/ReferencePreview.d.ts

@@ -14,4 +14,4 @@ export type ReferencePreviewProps = {
 /**
  * @group Preview components
  */
-export declare const ReferencePreview: (props: ReferencePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReferencePreview: (props: ReferencePreviewProps) => React.JSX.Element;

package/dist/preview/components/StorageThumbnail.d.ts

@@ -11,5 +11,5 @@ type StorageThumbnailProps = {
  * @group Preview components
  */
 export declare const StorageThumbnail: React.FunctionComponent<StorageThumbnailProps>;
-export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size, fill }: StorageThumbnailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size, fill }: StorageThumbnailProps): React.JSX.Element | null;
 export {};

package/dist/preview/components/UserPreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * Preview component for displaying user information.
@@ -5,4 +6,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
  *
  * @group Preview components
  */
-export declare function UserPreview({ value }: PropertyPreviewProps<string>): import("react/jsx-runtime").JSX.Element;
+export declare function UserPreview({ value }: PropertyPreviewProps<string>): React.JSX.Element;

package/dist/preview/property_previews/ArrayOfMapsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayOfReferencesPreview.d.ts

@@ -2,4 +2,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react").JSX.Element;

package/dist/preview/property_previews/ArrayOfStorageComponentsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayOfStringsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../../preview";
 /**
  * @group Preview components
  */
-export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayOneOfPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayPropertyEnumPreview.d.ts

@@ -2,4 +2,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react").JSX.Element | null;

package/dist/preview/property_previews/ArrayPropertyPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

package/dist/preview/property_previews/MapPropertyPreview.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): React.JSX.Element | null;
 export declare function KeyValuePreview({ value }: {
     value: any;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

package/dist/preview/property_previews/SkeletonPropertyComponent.d.ts

@@ -1,4 +1,5 @@
 import { ResolvedProperty } from "../../types";
+import React from "react";
 import { PreviewSize } from "../PropertyPreviewProps";
 export interface SkeletonPropertyComponentProps {
     property: ResolvedProperty;
@@ -8,7 +9,7 @@ export interface SkeletonPropertyComponentProps {
  * @group Preview components
  */
 export declare function SkeletonPropertyComponent({ property, size }: SkeletonPropertyComponentProps): any;
-export declare function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonText(index?: number, width?: number): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonCaptionText(index?: number): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean): React.JSX.Element;
+export declare function renderSkeletonText(index?: number, width?: number): React.JSX.Element;
+export declare function renderSkeletonCaptionText(index?: number): React.JSX.Element;
+export declare function renderSkeletonIcon(): React.JSX.Element;

package/dist/routes/FireCMSRoute.d.ts

@@ -1 +1,2 @@
-export declare function FireCMSRoute(): import("react/jsx-runtime").JSX.Element | null;
+import React from "react";
+export declare function FireCMSRoute(): React.JSX.Element | null;

package/dist/util/property_utils.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { AuthController, EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
 export declare function isReferenceProperty(authController: AuthController, propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
-export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
+export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): React.JSX.Element;
 export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
 export declare function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string;
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.3.0-canary.451aa49",
+  "version": "3.3.0-canary.a5780ce",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -10,7 +10,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/firecmsco/firecms.git",
+    "url": "https://github.com/FireCMSco/firecms.git",
     "directory": "packages/firecms_core"
   },
   "main": "./dist/index.umd.js",
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "^3.3.0-canary.451aa49",
-    "@firecms/ui": "^3.3.0-canary.451aa49",
+    "@firecms/formex": "^3.3.0-canary.a5780ce",
+    "@firecms/ui": "^3.3.0-canary.a5780ce",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -136,7 +136,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "772b4a7f64893038f0cc13669d6bc66ec858fc49",
+  "gitHead": "9ecf37abf793bd2f2daaaed6f517ee5ee19b01ae",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/internal/common.tsx

@@ -23,14 +23,14 @@ export function getTablePropertyColumnWidth(property: ResolvedProperty): number
     if (property.dataType === "string") {
         if (property.url) {
             return 280;
+        } else if (property.markdown) {
+            return 300;
         } else if (property.storage) {
             return 160;
         } else if (property.enumValues) {
             return 200;
         } else if (property.multiline) {
             return 300;
-        } else if (property.markdown) {
-            return 300;
         } else if (property.email) {
             return 200;
         } else {

package/src/editor/editor.tsx

@@ -148,8 +148,26 @@ export const FireCMSEditor = ({
   });
 
   const doc = state?.doc;
+  const mountedRef = useRef(false);
+
+  // Enable flushing after the initial render cycle completes.
+  // ProseMirror initialization (including trailingNodePlugin and
+  // appendTransaction) runs synchronously during mount, so any doc
+  // change after the first effect cycle is from user interaction.
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      mountedRef.current = true;
+    });
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
   useEffect(() => {
     if (!state) return;
+    // Skip flush until after mount — the round-trip through
+    // parse → ProseMirror → serialize is not idempotent and would
+    // produce subtly different markdown on init, making the form
+    // dirty without user interaction.
+    if (!mountedRef.current) return;
     const timeout = setTimeout(() => {
       flushChanges(state);
     }, 250);
@@ -160,6 +178,7 @@ export const FireCMSEditor = ({
     if (!view) return;
     const dom = view.dom;
     const handleBlur = () => {
+      if (!mountedRef.current) return;
       flushChanges(view.state);
     };
     dom.addEventListener("blur", handleBlur);
@@ -236,7 +255,7 @@ export const FireCMSEditor = ({
             onChange={handleMarkdownChange as any}
             onBlur={handleMarkdownBlur as any}
             className={cls(
-              "w-full h-full min-h-[300px] p-12 bg-transparent resize-none font-mono focus:ring-0",
+              "w-full min-h-[300px] p-12 bg-transparent resize-none font-mono focus:ring-0 focus:outline-none outline-none",
               proseClass
             )}
             style={{ 

package/src/editor/markdown.ts

@@ -49,6 +49,66 @@ const md = markdownIt({ html: false })
     .use(markdownItMark)
     .use(markdownItIns);
 
+// Override the escape rule so that `\` before a newline is kept as literal
+// text instead of being silently consumed as a hardbreak. The default
+// markdown-it behaviour strips the backslash and produces a <br>, which
+// causes users to lose visible `\` characters in their content.
+md.inline.ruler.at("escape", function escapeOverride(state: any, silent: boolean): boolean {
+    let pos = state.pos;
+    const max = state.posMax;
+
+    if (state.src.charCodeAt(pos) !== 0x5C /* \ */) return false;
+    pos++;
+
+    if (pos >= max) return false;
+
+    const ch1 = state.src.charCodeAt(pos);
+
+    // KEY CHANGE: when `\` is followed by a newline, output the backslash as
+    // literal text and let the normal softbreak handling deal with the newline.
+    if (ch1 === 0x0A) {
+        if (!silent) {
+            state.pending += "\\";
+        }
+        state.pos = pos; // leave the newline for softbreak to handle
+        return true;
+    }
+
+    // For escaped ASCII punctuation, output the character without the backslash
+    // (standard markdown escape behaviour: `\*` → `*`).
+    let escapedStr = state.src[pos];
+    // Handle surrogate pairs
+    if (ch1 >= 0xD800 && ch1 <= 0xDBFF && pos + 1 < max) {
+        const ch2 = state.src.charCodeAt(pos + 1);
+        if (ch2 >= 0xDC00 && ch2 <= 0xDFFF) {
+            escapedStr += state.src[pos + 1];
+            pos++;
+        }
+    }
+
+    const origStr = "\\" + escapedStr;
+
+    if (!silent) {
+        // Check if the character is an ASCII punctuation that
+        // markdown-it considers escapable (codes < 256 in its lookup table).
+        const isEscapable = ch1 < 256 && /[\\!"#$%&'()*+,./:;<=>?@[\]^_`{|}~-]/.test(String.fromCharCode(ch1));
+        const token = state.push("text_special", "", 0);
+        if (isEscapable) {
+            token.content = escapedStr;
+        } else {
+            token.content = origStr;
+        }
+        token.markup = origStr;
+        token.info = "escape";
+    }
+    state.pos = pos + 1;
+    return true;
+});
+
+// Also disable the newline rule which redundantly converts `\` + newline
+// to hardbreaks via a separate code path.
+md.inline.ruler.disable(["newline"]);
+
 // Unwrap images from paragraphs so they can be parsed as block nodes by ProseMirror
 md.core.ruler.after("inline", "image-to-block", (state: any) => {
     const tokens = state.tokens;
@@ -145,7 +205,35 @@ export const markdownSerializer = new MarkdownSerializer(
         },
         table_row() {},
         table_cell() {},
-        table_header() {}
+        table_header() {},
+        // Custom text serializer: since our parser override keeps `\` as
+        // literal text (instead of consuming it), we must avoid the default
+        // esc() from double-escaping it. We escape all standard markdown
+        // specials *except* the backslash itself.
+        text(state: any, node: any) {
+            const escaped = node.text.replace(/[`*~\[\]_]/g, (m: string, i: number) => {
+                // Don't escape mid-word underscores (same logic as default esc)
+                if (m === "_" && i > 0 && i + 1 < node.text.length
+                    && /\w/.test(node.text[i - 1]) && /\w/.test(node.text[i + 1])) {
+                    return m;
+                }
+                return "\\" + m;
+            });
+            // Handle start-of-line patterns that could be parsed as block syntax
+            const lines = escaped.split("\n");
+            for (let i = 0; i < lines.length; i++) {
+                state.write();
+                let line = lines[i];
+                if (state.atBlockStart || i > 0) {
+                    line = line
+                        .replace(/^(\+[ ]|[-*>])/, "\\$&")
+                        .replace(/^(\s*)(#{1,6})(\s|$)/, '$1\\$2$3')
+                        .replace(/^(\s*\d+)\.\s/, "$1\\. ");
+                }
+                state.out += line;
+                if (i !== lines.length - 1) state.out += "\n";
+            }
+        }
     },
     {
         ...defaultMarkdownSerializer.marks,

package/src/internal/useBuildSideEntityController.tsx

@@ -32,7 +32,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
 
-    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === "__history" || props.selectedTab === "__raw_data" || Boolean(selectedSecondaryForm);
 
     let resolvedWidth: string | undefined;
     if (props.width) {

package/src/preview/PropertyPreview.tsx

@@ -80,7 +80,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;
         if (typeof value === "string") {
-            if (stringProperty.storage) {
+            if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"} />;
+            } else if (stringProperty.storage) {
                 const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
                     interactive={interactive}
@@ -101,8 +103,6 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                             interactive={interactive}
                             fill={fill}
                             previewType={stringProperty.url} />;
-            } else if (stringProperty.markdown) {
-                content = <Markdown source={value} size={"small"} />;
             } else if (stringProperty.userSelect) {
                 content = <UserPreview
                     value={value}