Add native geopoint property support

packages/editor/package.json

@@ -46,6 +46,7 @@
     "@tiptap/extension-image": "3.11.0",
     "@tiptap/extension-italic": "3.11.0",
     "@tiptap/extension-link": "3.11.0",
+    "@tiptap/extension-list": "3.11.0",
     "@tiptap/extension-list-item": "3.11.0",
     "@tiptap/extension-ordered-list": "3.11.0",
     "@tiptap/extension-placeholder": "3.11.0",
@@ -54,6 +55,7 @@
     "@tiptap/extension-task-list": "3.11.0",
     "@tiptap/extension-text-style": "3.11.0",
     "@tiptap/extension-underline": "3.11.0",
+    "@tiptap/extensions": "3.11.0",
     "@tiptap/pm": "3.11.0",
     "@tiptap/react": "3.11.0",
     "@tiptap/starter-kit": "3.11.0",

packages/editor/src/extensions/index.ts

@@ -13,7 +13,7 @@ const PlaceholderExtension = Placeholder.configure({
     placeholder: ({
                       node,
                       editor
-                  }) => {
+                  }: { node: any; editor: Editor }) => {
         const {
             from,
             to

packages/editor/src/extensions/slashCommand.tsx

@@ -639,7 +639,8 @@ const suggestionItems: SuggestionItem[] = [
             editor,
             range
         }) => {
-            editor.chain().focus().deleteRange(range).toggleTaskList().run();
+            const chain = editor.chain() as any;
+            chain.focus().deleteRange(range).toggleTaskList().run();
         }
     },
     {
@@ -702,7 +703,8 @@ const suggestionItems: SuggestionItem[] = [
             editor,
             range
         }) => {
-            editor.chain().focus().deleteRange(range).toggleBulletList().run();
+            const chain = editor.chain() as any;
+            chain.focus().deleteRange(range).toggleBulletList().run();
         }
     },
     {
@@ -714,7 +716,8 @@ const suggestionItems: SuggestionItem[] = [
             editor,
             range
         }) => {
-            editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+            const chain = editor.chain() as any;
+            chain.focus().deleteRange(range).toggleOrderedList().run();
         }
     },
     {

packages/editor/src/selectors/node-selector.tsx

@@ -60,19 +60,19 @@ const items: SelectorItem[] = [
     {
         name: "To-do List",
         icon: CheckBoxIcon,
-        command: (editor) => editor?.chain().focus().toggleTaskList().run(),
+        command: (editor) => editor ? (editor.chain() as any).focus().toggleTaskList().run() : undefined,
         isActive: (editor) => editor?.isActive("taskItem") ?? false,
     },
     {
         name: "Bullet List",
         icon: FormatListBulletedIcon,
-        command: (editor) => editor?.chain().focus().toggleBulletList().run(),
+        command: (editor) => editor ? (editor.chain() as any).focus().toggleBulletList().run() : undefined,
         isActive: (editor) => editor?.isActive("bulletList") ?? false,
     },
     {
         name: "Numbered List",
         icon: FormatListNumberedIcon,
-        command: (editor) => editor?.chain().focus().toggleOrderedList().run(),
+        command: (editor) => editor ? (editor.chain() as any).focus().toggleOrderedList().run() : undefined,
         isActive: (editor) => editor?.isActive("orderedList") ?? false,
     },
     {

packages/firecms_core/src/core/field_configs.tsx

@@ -6,6 +6,7 @@ import {
     ArrayOfReferencesFieldBinding,
     BlockFieldBinding,
     DateTimeFieldBinding,
+    GeopointFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
     MarkdownEditorFieldBinding,
@@ -32,6 +33,7 @@ import {
     ListAltIcon,
     ListIcon,
     MailIcon,
+    LocationOnIcon,
     NumbersIcon, PersonIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -271,6 +273,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: DateTimeFieldBinding
         }
     },
+    geopoint: {
+        key: "geopoint",
+        name: "Geopoint",
+        description: "Latitude and longitude pair",
+        Icon: LocationOnIcon,
+        color: "#0ea5e9",
+        property: {
+            dataType: "geopoint",
+            Field: GeopointFieldBinding
+        }
+    },
     group: {
         key: "group",
         name: "Group",
@@ -412,6 +425,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
         return "switch";
     } else if (property.dataType === "date") {
         return "date_time";
+    } else if (property.dataType === "geopoint") {
+        return "geopoint";
     } else if (property.dataType === "reference") {
         return "reference";
     }

packages/firecms_core/src/form/field_bindings/GeopointFieldBinding.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { CloseIcon, IconButton, TextField } from "@firecms/ui";
+import { FieldProps, GeoPoint } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { PropertyIdCopyTooltip } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { getIconForProperty } from "../../util";
+import { formatGeoPoint, getGeoPointCoordinates, parseGeoPoint } from "../../util/geopoint";
+
+interface GeopointFieldBindingProps extends FieldProps<GeoPoint> {
+}
+
+export function GeopointFieldBinding({
+                                          propertyKey,
+                                          value,
+                                          setValue,
+                                          error,
+                                          showError,
+                                          disabled,
+                                          autoFocus,
+                                          property,
+                                          includeDescription,
+                                          size = "large"
+                                      }: GeopointFieldBindingProps) {
+
+    const coordinates = getGeoPointCoordinates(value);
+    const canClear = Boolean((property as any).clearable);
+    const [latitude, setLatitude] = useState<string>(coordinates ? coordinates.latitude.toString() : "");
+    const [longitude, setLongitude] = useState<string>(coordinates ? coordinates.longitude.toString() : "");
+    const [localError, setLocalError] = useState<string | undefined>();
+    const skipSyncRef = useRef(false);
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    useEffect(() => {
+        if (skipSyncRef.current) {
+            skipSyncRef.current = false;
+            return;
+        }
+        const nextCoordinates = getGeoPointCoordinates(value);
+        setLatitude(nextCoordinates ? nextCoordinates.latitude.toString() : "");
+        setLongitude(nextCoordinates ? nextCoordinates.longitude.toString() : "");
+    }, [value]);
+
+    const updateGeoPoint = (nextLatitude: string, nextLongitude: string) => {
+        skipSyncRef.current = true;
+        setLatitude(nextLatitude);
+        setLongitude(nextLongitude);
+
+        const trimmedLatitude = nextLatitude.trim();
+        const trimmedLongitude = nextLongitude.trim();
+
+        if (!trimmedLatitude && !trimmedLongitude) {
+            setLocalError(undefined);
+            setValue(null);
+            return;
+        }
+
+        const parsed = parseGeoPoint(`${trimmedLatitude}, ${trimmedLongitude}`);
+
+        if (parsed.error) {
+            setLocalError(parsed.error);
+            setValue(null);
+            return;
+        }
+
+        setLocalError(undefined);
+        setValue(parsed.point);
+    };
+
+    const handleClear = (event?: React.MouseEvent) => {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        updateGeoPoint("", "");
+    };
+
+    const resolvedError = localError ?? error;
+    const shouldShowError = Boolean(resolvedError) || Boolean(showError && error);
+
+    return (
+        <>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <div className="flex flex-col gap-2">
+                    <div className="mt-1">
+                        <LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name}
+                            className={shouldShowError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
+                        />
+                    </div>
+                    <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                        <TextField
+                            size={size}
+                            value={latitude}
+                            onChange={(event) => updateGeoPoint(event.target.value, longitude)}
+                            autoFocus={autoFocus}
+                            label={"Latitude"}
+                            type="number"
+                            disabled={disabled}
+                            endAdornment={canClear ? (
+                                <IconButton onClick={handleClear}>
+                                    <CloseIcon />
+                                </IconButton>
+                            ) : undefined}
+                            error={shouldShowError && Boolean(resolvedError)}
+                        />
+                        <TextField
+                            size={size}
+                            value={longitude}
+                            onChange={(event) => updateGeoPoint(latitude, event.target.value)}
+                            label={"Longitude"}
+                            type="number"
+                            disabled={disabled}
+                            error={shouldShowError && Boolean(resolvedError)}
+                        />
+                    </div>
+                    {value && !resolvedError && (
+                        <div className="text-xs text-text-secondary dark:text-text-secondary-dark font-mono">
+                            {formatGeoPoint(value)}
+                        </div>
+                    )}
+                </div>
+            </PropertyIdCopyTooltip>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={shouldShowError}
+                             error={resolvedError}
+                             disabled={disabled}
+                             property={property}/>
+        </>
+    );
+}

packages/firecms_core/src/form/index.tsx

@@ -11,6 +11,7 @@ export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBi
 export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
 export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
 export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { GeopointFieldBinding } from "./field_bindings/GeopointFieldBinding";
 export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
 export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
 export { MapFieldBinding } from "./field_bindings/MapFieldBinding";

packages/firecms_core/src/preview/PropertyPreview.tsx

@@ -4,6 +4,7 @@ import equal from "react-fast-compare"
 import {
     CMSType,
     EntityReference,
+    GeoPoint,
     ResolvedArrayProperty,
     ResolvedMapProperty,
     ResolvedNumberProperty,
@@ -26,12 +27,14 @@ import { ArrayPropertyEnumPreview } from "./property_previews/ArrayPropertyEnumP
 import { ArrayOfStringsPreview } from "./property_previews/ArrayOfStringsPreview";
 import { ArrayOneOfPreview } from "./property_previews/ArrayOneOfPreview";
 import { MapPropertyPreview } from "./property_previews/MapPropertyPreview";
+import { GeopointPropertyPreview } from "./property_previews/GeopointPropertyPreview";
 import { ReferencePreview } from "./components/ReferencePreview";
 import { DatePreview } from "./components/DatePreview";
 import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
 import { ErrorView } from "../components";
 import { UserPreview } from "./components/UserPreview";
+import { getGeoPointCoordinates } from "../util";
 
 /**
  * @group Preview components
@@ -192,6 +195,15 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }
+    } else if (property.dataType === "geopoint") {
+        const coordinates = getGeoPointCoordinates(value as GeoPoint);
+        if (coordinates) {
+            content = <GeopointPropertyPreview {...props}
+                                               property={property}
+                                               value={value as GeoPoint}/>;
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
     } else if (property.dataType === "reference") {
         if (typeof property.path === "string") {
             if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {

packages/firecms_core/src/preview/index.ts

@@ -7,6 +7,7 @@ export * from "./property_previews/ArrayOfStringsPreview";
 export * from "./property_previews/ArrayPropertyEnumPreview";
 export * from "./property_previews/ArrayOfMapsPreview";
 export * from "./property_previews/NumberPropertyPreview";
+export * from "./property_previews/GeopointPropertyPreview";
 export * from "./property_previews/StringPropertyPreview";
 export * from "./property_previews/ArrayOfStorageComponentsPreview";
 export * from "./property_previews/ArrayOfReferencesPreview";

packages/firecms_core/src/preview/property_previews/GeopointPropertyPreview.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { GeoPoint } from "../../types";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { formatGeoPoint, getGeoPointCoordinates } from "../../util";
+
+export function GeopointPropertyPreview({
+                                             value,
+                                             size
+                                         }: PropertyPreviewProps<GeoPoint>): React.ReactElement {
+
+    const coordinates = getGeoPointCoordinates(value);
+
+    if (!coordinates) {
+        return <span className={size === "small" ? "text-sm text-text-secondary dark:text-text-secondary-dark" : "text-text-secondary dark:text-text-secondary-dark"}>—</span>;
+    }
+
+    return (
+        <span className={size === "small" ? "text-sm font-mono" : "font-mono"}>
+            {formatGeoPoint(coordinates)}
+        </span>
+    );
+}

packages/firecms_core/src/util/entities.ts

@@ -74,6 +74,8 @@ export function getDefaultValueForDataType(dataType: DataType) {
         return [];
     } else if (dataType === "map") {
         return {};
+    } else if (dataType === "geopoint") {
+        return null;
     } else {
         return null;
     }