@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/JsonEditorDialog.tsx

@@ -0,0 +1,1392 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import Button from '../../lib/button/Button';
+import {
+	DataTypeState,
+	PrimitiveTypes,
+	LiteralValueState,
+	toCamelCase,
+	DefinitionEntityState,
+	ChangeSet,
+	ProjectState,
+	resolveDataTypeLabel,
+	EntityType,
+	resolveEntityDataTypeLabel,
+	resolveEntityName,
+	getParentCanvasEntity,
+	CANVAS_CARD_WIDTH,
+	calculateCardSize,
+	CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS,
+	createDefinitionEntityFromJSONObject,
+	findEntityFromKeys,
+	EntityWithValueState,
+	READABLE_ENTITY_TYPES,
+	TERMINATION_TYPES,
+	lowercaseFirstLetter,
+	resolveEntityCodeName,
+	isObject,
+	StateMutationAction,
+	flattenDataTypeAndGroup,
+	flattenDataTypesInOrGroup,
+} from '@elyx-code/project-logic-tree';
+import FormatIconBlack from '../../assets/code-formatting/format-black.svg';
+import FormatIconWhite from '../../assets/code-formatting/format-white.svg';
+import InlineIconBlack from '../../assets/code-formatting/inline-black.svg';
+import InlineIconWhite from '../../assets/code-formatting/inline-white.svg';
+import './json-editor-dialog.css';
+import { DraggableObject } from '../../lib/canvas';
+import { getCanvasEntityDraggableContainerDOMId } from '../../services/editor/ui';
+import {
+	DynamicValueTypes,
+	IValueStoreClient,
+} from '../../services/editor/value-store';
+import { EditorService } from '../../services/editor';
+import { popupNotification } from '../../popup-notification';
+import RawJsonEditor from '../../lib/json-editor/RawJsonEditor';
+import {
+	Checkbox,
+	FormControl,
+	FormControlLabel,
+	IconButton,
+	InputLabel,
+	MenuItem,
+	OutlinedInput,
+	Select,
+} from '@mui/material';
+import {
+	castHTMLInputValueToType,
+	resolveInputTypeFromDataType,
+} from '../../services/editor/utils';
+import DropdownMenuPopup from '../../lib/dropdown/DropdownMenuPopup';
+import JSONEditor, {
+	ExpandOptions,
+	ParseError,
+	SchemaValidationError,
+} from 'jsoneditor';
+import { JSONSchema7 } from 'json-schema';
+import { handleLiteralValueChange } from '../../services/execution/value-resolution';
+import { entitiesToUniqueCanvasEntities } from '../../services/editor/utils';
+import { Logger } from '@elyx-code/common-ts-utils';
+import DataTypeIcon, {
+	ExplicitDataTypeIcon,
+} from '../draggable-entity-card/DataTypeIcon';
+import DefinitionEntityIcon from '../draggable-entity-card/definition-entity/DefinitionEntityIcon';
+import { resolveCardSubheader } from '../../services/editor/ui';
+import {
+	fromLiteralValueTypeToFontColor,
+	fromLiteralValueTypeToExplicitIconName,
+	fromLiteralValueTypeToReadableLabel,
+	resolveLiteralValueSubheader,
+} from '../data-type/DataTypeBuilder';
+
+interface IJsonEditorDialogProps {
+	onClose: (event: React.MouseEvent) => void;
+	valueOwner: EntityWithValueState;
+	value?: LiteralValueState;
+	valueType?: DynamicValueTypes;
+	draggableObject: DraggableObject;
+	project: EditorService;
+	onlyDefault?: boolean;
+}
+
+function toJSONSchema(dataType: DataTypeState, title?: string): JSONSchema7 {
+	let jsonSchema: JSONSchema7 = {
+		// "$schema": "https://json-schema.org/draft-07/schema#",
+		title: title || resolveDataTypeLabel(dataType) || 'Unspecified data type',
+	};
+
+	if (!dataType) {
+		return jsonSchema;
+	}
+
+	let nestedSchemaUnderList = false;
+
+	if (dataType.isList) {
+		jsonSchema.type = 'array';
+		nestedSchemaUnderList = true;
+	}
+
+	if (
+		!dataType.entity &&
+		!dataType.andChildrenGroup?.length &&
+		!dataType.orChildrenGroup?.length
+	) {
+		return jsonSchema;
+	}
+
+	let remainingSchema: JSONSchema7 = {};
+
+	if (dataType.entity) {
+		if (dataType.entity.type === EntityType.PrimitiveEntity) {
+			switch (dataType.entity.name) {
+				case PrimitiveTypes.Boolean:
+					remainingSchema.type = 'boolean';
+					break;
+				case PrimitiveTypes.Number:
+					remainingSchema.type = 'number';
+					break;
+				case PrimitiveTypes.String:
+					remainingSchema.type = 'string';
+					break;
+				case PrimitiveTypes.KeyValue:
+					remainingSchema.type = 'object';
+					break;
+				case PrimitiveTypes.Untyped:
+					delete remainingSchema.type;
+					break;
+				case PrimitiveTypes.Null:
+					remainingSchema.type = 'null';
+					break;
+				case PrimitiveTypes.Date:
+					remainingSchema.type = 'string';
+					remainingSchema.format = 'date-time';
+					break;
+				case PrimitiveTypes.Enum:
+					remainingSchema.type = 'string';
+					remainingSchema.enum = dataType.options;
+					break;
+				case PrimitiveTypes.UUID:
+					remainingSchema.type = 'string';
+					remainingSchema.format = 'uuid';
+					break;
+				case PrimitiveTypes.File:
+					remainingSchema.type = 'string';
+					remainingSchema.format = 'file';
+					break;
+			}
+		} else if (dataType.entity.type === EntityType.DefinitionEntity) {
+			if (dataType.asType) {
+				remainingSchema.type = 'object';
+				// Allow any other properties for now
+				remainingSchema.properties = {
+					id: { type: 'string' },
+					name: { type: 'string' },
+					// Literal string value
+					type: {
+						type: 'string',
+						enum: [EntityType.DefinitionEntity],
+					},
+				};
+				remainingSchema.additionalProperties = true;
+				remainingSchema.required = ['id', 'name', 'type'];
+			} else {
+				remainingSchema.type = 'object';
+				remainingSchema.properties = {};
+				remainingSchema.additionalProperties = false;
+				dataType.entity.properties.forEach((property) => {
+					const propertyDataType = property.getDataType(null);
+					const entityName = resolveEntityName(property, dataType.project);
+
+					const resolveCodeName =
+						property.codeName ||
+						(resolveEntityCodeName(property, dataType.project) as string) ||
+						lowercaseFirstLetter(toCamelCase(entityName));
+
+					remainingSchema.properties[resolveCodeName] =
+						toJSONSchema(propertyDataType);
+
+					// Because of how the sytem works, if the property is not required, we allow null values
+					if (!property.required) {
+						const existingPropertySchema = remainingSchema.properties[
+							resolveCodeName
+						] as JSONSchema7;
+
+						if (existingPropertySchema) {
+							if (Array.isArray(existingPropertySchema.type)) {
+								// If it is already an array, we add null if not present
+								if (!existingPropertySchema.type.includes('null')) {
+									existingPropertySchema.type.push('null');
+								}
+							} else if (typeof existingPropertySchema.type === 'string') {
+								// If it is a string, we convert to array
+								if (existingPropertySchema.type !== 'null') {
+									existingPropertySchema.type = [
+										existingPropertySchema.type,
+										'null',
+									];
+								}
+							}
+						}
+					}
+				});
+
+				// Add required properties
+				remainingSchema.required = [];
+				dataType.entity.properties.forEach((property) => {
+					if (property.required) {
+						const entityName = resolveEntityName(property, dataType.project);
+
+						const resolveCodeName =
+							property.codeName ||
+							(resolveEntityCodeName(property, dataType.project) as string) ||
+							lowercaseFirstLetter(toCamelCase(entityName));
+
+						remainingSchema.required.push(resolveCodeName);
+					}
+				});
+			}
+		} else if (dataType.entity.type === EntityType.ActionDescriptor) {
+			remainingSchema.type = 'object';
+			// Allow any other properties for now
+			remainingSchema.properties = {
+				id: { type: 'string' },
+				name: { type: 'string' },
+				// Literal string value
+				type: {
+					type: 'string',
+					enum: [EntityType.ActionDescriptor],
+				},
+			};
+			remainingSchema.additionalProperties = true;
+			remainingSchema.required = ['id', 'name', 'type'];
+		}
+	} else if (!!dataType.andChildrenGroup?.length) {
+		remainingSchema.allOf = dataType.andChildrenGroup.map((child) =>
+			toJSONSchema(child),
+		);
+	} else if (!!dataType.orChildrenGroup?.length) {
+		remainingSchema.anyOf = dataType.orChildrenGroup.map((child) =>
+			toJSONSchema(child),
+		);
+	}
+
+	if (nestedSchemaUnderList) {
+		jsonSchema.items = remainingSchema;
+	} else {
+		jsonSchema = {
+			...jsonSchema,
+			...remainingSchema,
+		};
+	}
+
+	return jsonSchema;
+}
+
+const deducePrimitiveType = (literalValue?: LiteralValueState): PrimitiveTypes | null => {
+	if (!literalValue) return null;
+
+	const name = literalValue.name;
+	if (name && Object.values(PrimitiveTypes).includes(name)) {
+		if (name === PrimitiveTypes.KeyValue) {
+			return null;
+		}
+		return name;
+	}
+
+	const val = literalValue.value;
+	if (typeof val === 'string') {
+		return PrimitiveTypes.String;
+	}
+	if (typeof val === 'number') {
+		return PrimitiveTypes.Number;
+	}
+	if (typeof val === 'boolean') {
+		return PrimitiveTypes.Boolean;
+	}
+	if (val === null) {
+		return PrimitiveTypes.Null;
+	}
+	return null;
+};
+
+const getPrimitiveNameOfDataType = (dt: DataTypeState): PrimitiveTypes | null => {
+	let effective = dt;
+	if (dt.foreignKeyRef && !dt.entity) {
+		const refDataType = dt.foreignKeyRef.getDataType?.(null);
+		if (refDataType) {
+			const refResolved = flattenDataTypesInOrGroup(
+				flattenDataTypeAndGroup(refDataType),
+				{ removeDuplicates: true, removeNulls: true },
+			).filter((d) => !!d.isResolved);
+
+			if (refResolved.length === 1) {
+				effective = refResolved[0];
+			}
+		}
+	}
+	if (effective.entity?.type === EntityType.PrimitiveEntity) {
+		return effective.entity.name as PrimitiveTypes;
+	}
+	return null;
+};
+
+const JsonEditorDialog: React.FC<IJsonEditorDialogProps> = (props) => {
+	const onlyDefault = props.onlyDefault || false;
+	Logger.log(
+		'Selected on mount before: ',
+		props.project.canvas?.selectedObjects,
+	);
+	props.project.canvas?.unselectAll();
+	Logger.log(
+		'Selected on mount after: ',
+		props.project.canvas?.selectedObjects,
+	);
+
+	const valueOwnerCanvasParentEntity = getParentCanvasEntity(props.valueOwner);
+
+	const resolveSubHeaderText = () => {
+		let entityTypeDescription = '';
+
+		const parentEntityName = resolveEntityName(
+			valueOwnerCanvasParentEntity,
+			props.valueOwner.project,
+		);
+
+		const parentEntityDescriptor =
+			props.valueOwner.id !== valueOwnerCanvasParentEntity.id
+				? ' of ' +
+					parentEntityName +
+					' ' +
+					lowercaseFirstLetter(
+						READABLE_ENTITY_TYPES[valueOwnerCanvasParentEntity.type].singular,
+					)
+				: '';
+
+		switch (props.valueOwner.type) {
+			case EntityType.VariableDeclaration:
+				entityTypeDescription = 'Variable';
+				break;
+			case EntityType.ArgumentDeclaration:
+				entityTypeDescription = 'Input';
+				break;
+			case EntityType.InputMap: {
+				entityTypeDescription = 'Input';
+
+				if (TERMINATION_TYPES.includes(valueOwnerCanvasParentEntity.type)) {
+					entityTypeDescription = 'Output';
+				}
+				break;
+			}
+			case EntityType.OutputMap:
+				entityTypeDescription = 'Output';
+				break;
+		}
+
+		return entityTypeDescription + parentEntityDescriptor;
+	};
+
+	const valueOwnerDataType = props.valueOwner.getDataType(null);
+	const schema = toJSONSchema(valueOwnerDataType, resolveSubHeaderText());
+
+	const initialValue = JSON.stringify(props.value?.value || null, null, 2);
+
+	const [rawValue, setRawValue] = useState<string>(initialValue);
+	// ref of the editor
+	const editorRef = useRef<JSONEditor>(null);
+	const [editorErrors, setEditorErrors] = useState<
+		ReadonlyArray<SchemaValidationError | ParseError>
+	>([]);
+
+	// === Cast-to dropdown ====================================================
+	// For owners whose data-type is an `or`-group (e.g. `text | number`), we
+	// surface a small dropdown that lets the user pick a concrete subtype to
+	// edit as. The pick is local-only — it doesn't mutate the entity's
+	// data-type — it just swaps the JSON editor for the matching primitive
+	// input (like `DynamicValueEntry` does inline).
+	const castOptions = useMemo<DataTypeState[]>(() => {
+		const flat = flattenDataTypesInOrGroup(
+			flattenDataTypeAndGroup(valueOwnerDataType),
+			{ removeDuplicates: true, removeNulls: false },
+		).filter((dt) => !!dt.isResolved);
+
+		// Drop the trivial wrapping case where the owner is already a single
+		// resolved type (the cast dropdown would offer that same type only).
+		if (flat.length < 2) return [];
+
+		return flat;
+	}, [valueOwnerDataType]);
+
+	const initialCastDataType = useMemo<DataTypeState | null>(() => {
+		if (!props.value) return null;
+		
+		const deducedType = deducePrimitiveType(props.value);
+		if (!deducedType) return null;
+
+		return castOptions.find((opt) => {
+			return getPrimitiveNameOfDataType(opt) === deducedType;
+		}) || null;
+	}, [props.value, castOptions]);
+
+	const [castDataType, setCastDataType] = useState<DataTypeState | null>(initialCastDataType);
+	const [castedValue, setCastedValue] = useState<
+		string | number | boolean | null
+	>(null);
+
+	const renderCastOption = (option: DataTypeState) => {
+		if (option.isList) {
+			return (
+				<span style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '4px 0' }}>
+					<span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '14px', fontWeight: 500 }}>
+						<ExplicitDataTypeIcon icon="list" size="small" id={option.id} />
+						{resolveCastOptionLabel(option)}
+					</span>
+					<p style={{ margin: 0, marginLeft: 24, fontSize: '11px', color: 'rgba(0,0,0,0.54)' }}>
+						List of values
+					</p>
+				</span>
+			);
+		}
+
+		if (option.foreignKeyRef) {
+			const foreignEntityName = resolveEntityName(option.foreignKeyRef, props.project.logic);
+			const foreignKeyParentName = resolveEntityName(option.foreignKeyRef.parent, props.project.logic);
+			const subLabel = `Reference to ${foreignEntityName} from ${foreignKeyParentName}`;
+
+			return (
+				<span style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '4px 0' }}>
+					<span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '14px', fontWeight: 500 }}>
+						<DataTypeIcon entity={option.foreignKeyRef} size="small" project={props.project} />
+						{resolveEntityName(option.foreignKeyRef, props.project.logic) || '-'}
+					</span>
+					<p style={{ margin: 0, marginLeft: 24, fontSize: '11px', color: 'rgba(0,0,0,0.54)' }}>
+						{subLabel}
+					</p>
+				</span>
+			);
+		}
+
+		if (option.entity) {
+			if (option.entity.type === EntityType.PrimitiveEntity) {
+				const primName = option.entity.name as PrimitiveTypes;
+				return (
+					<span style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '4px 0' }}>
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: 8,
+								color: fromLiteralValueTypeToFontColor(primName),
+								fontSize: '14px',
+								fontWeight: 500,
+							}}
+						>
+							<ExplicitDataTypeIcon
+								icon={fromLiteralValueTypeToExplicitIconName(primName)}
+								size="small"
+								id={option.entity.id}
+							/>
+							{fromLiteralValueTypeToReadableLabel(primName)}
+						</span>
+						<p style={{ margin: 0, marginLeft: 24, fontSize: '11px', color: 'rgba(0,0,0,0.54)' }}>
+							{resolveLiteralValueSubheader(primName)}
+						</p>
+					</span>
+				);
+			}
+
+			if (
+				[
+					EntityType.ActionDescriptor,
+					EntityType.DefinitionEntity,
+					EntityType.BuiltInBaseEntity,
+				].includes(option.entity.type as EntityType)
+			) {
+				return (
+					<span style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '4px 0' }}>
+						<span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '14px', fontWeight: 500 }}>
+							<DefinitionEntityIcon
+								entity={option.entity as DefinitionEntityState}
+								size="small"
+							/>
+							{resolveEntityName(option.entity, props.project.logic) || '-'}
+						</span>
+						<p style={{ margin: 0, marginLeft: 24, fontSize: '11px', color: 'rgba(0,0,0,0.54)' }}>
+							{resolveCardSubheader(option.entity as DefinitionEntityState) || 'Definition entity'}
+						</p>
+					</span>
+				);
+			}
+		}
+
+		return <span style={{ fontSize: '14px', fontWeight: 500 }}>{resolveCastOptionLabel(option)}</span>;
+	};
+
+	const renderSelectedCastOption = (option: DataTypeState) => {
+		if (option.isList) {
+			return (
+				<span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '14px', fontWeight: 500 }}>
+					<ExplicitDataTypeIcon icon="list" size="small" id={option.id} />
+					{resolveCastOptionLabel(option)}
+				</span>
+			);
+		}
+
+		if (option.foreignKeyRef) {
+			return (
+				<span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '14px', fontWeight: 500 }}>
+					<DataTypeIcon entity={option.foreignKeyRef} size="small" project={props.project} />
+					{resolveEntityName(option.foreignKeyRef, props.project.logic) || '-'}
+				</span>
+			);
+		}
+
+		if (option.entity) {
+			if (option.entity.type === EntityType.PrimitiveEntity) {
+				const primName = option.entity.name as PrimitiveTypes;
+				return (
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							gap: 8,
+							color: fromLiteralValueTypeToFontColor(primName),
+							fontSize: '14px',
+							fontWeight: 500,
+						}}
+					>
+						<ExplicitDataTypeIcon
+							icon={fromLiteralValueTypeToExplicitIconName(primName)}
+							size="small"
+							id={option.entity.id}
+						/>
+						{fromLiteralValueTypeToReadableLabel(primName)}
+					</span>
+				);
+			}
+
+			if (
+				[
+					EntityType.ActionDescriptor,
+					EntityType.DefinitionEntity,
+					EntityType.BuiltInBaseEntity,
+				].includes(option.entity.type as EntityType)
+			) {
+				return (
+					<span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '14px', fontWeight: 500 }}>
+						<DefinitionEntityIcon
+							entity={option.entity as DefinitionEntityState}
+							size="small"
+						/>
+						{resolveEntityName(option.entity, props.project.logic) || '-'}
+					</span>
+				);
+			}
+		}
+
+		return <span style={{ fontSize: '14px', fontWeight: 500 }}>{resolveCastOptionLabel(option)}</span>;
+	};
+
+	// When the cast type changes, seed the local edited value from the current
+	// raw JSON, falling back to a sensible default (false / '' / null) when
+	// the existing value can't be coerced into the chosen primitive.
+	useEffect(() => {
+		if (!castDataType) return;
+
+		let parsed: unknown = null;
+		try {
+			parsed = JSON.parse(rawValue);
+		} catch (_) {
+			parsed = null;
+		}
+
+		const primitiveName =
+			castDataType.entity?.type === EntityType.PrimitiveEntity
+				? (castDataType.entity.name as PrimitiveTypes)
+				: null;
+
+		const isCompatibleType = (() => {
+			switch (primitiveName) {
+				case PrimitiveTypes.Boolean:
+					return typeof parsed === 'boolean';
+				case PrimitiveTypes.Number:
+					return typeof parsed === 'number';
+				case PrimitiveTypes.Null:
+					return parsed === null;
+				case PrimitiveTypes.String:
+				case PrimitiveTypes.UUID:
+				case PrimitiveTypes.Date:
+				case PrimitiveTypes.Enum:
+					return typeof parsed === 'string';
+				default:
+					return false;
+			}
+		})();
+
+		if (isCompatibleType) {
+			setCastedValue(parsed as string | number | boolean | null);
+		} else {
+			switch (primitiveName) {
+				case PrimitiveTypes.Boolean:
+					setCastedValue(false);
+					break;
+				case PrimitiveTypes.Number:
+					setCastedValue(0);
+					break;
+				case PrimitiveTypes.Null:
+					setCastedValue(null);
+					break;
+				default:
+					setCastedValue('');
+			}
+		}
+	}, [castDataType]);
+
+	const resolveCastOptionLabel = (dt: DataTypeState): string => {
+		const label = resolveDataTypeLabel(dt);
+		return label || 'Unspecified data type';
+	};
+
+	const renderCastInput = () => {
+		if (!castDataType) return null;
+
+		// Same trick as `DynamicValueEntry`: if the cast target is a foreign-key
+		// reference, render the input that matches the referenced property's
+		// primitive entity (a UUID input, a number input, …).
+		let effectiveDataType: DataTypeState = castDataType;
+		if (castDataType.foreignKeyRef && !castDataType.entity) {
+			const refDataType = castDataType.foreignKeyRef.getDataType?.(null);
+			if (refDataType) {
+				const refResolved = flattenDataTypesInOrGroup(
+					flattenDataTypeAndGroup(refDataType),
+					{ removeDuplicates: true, removeNulls: true },
+				).filter((dt) => !!dt.isResolved);
+
+				if (refResolved.length === 1) {
+					effectiveDataType = refResolved[0];
+				}
+			}
+		}
+
+		const primitiveName =
+			effectiveDataType.entity?.type === EntityType.PrimitiveEntity
+				? (effectiveDataType.entity.name as PrimitiveTypes)
+				: null;
+
+		if (primitiveName === PrimitiveTypes.Boolean) {
+			return (
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={castedValue === true}
+							onChange={(e) => setCastedValue(e.target.checked)}
+						/>
+					}
+					label={castedValue ? 'true' : 'false'}
+				/>
+			);
+		}
+
+		if (primitiveName === PrimitiveTypes.Null) {
+			return (
+				<p style={{ margin: 0, color: 'rgba(0,0,0,0.54)' }}>
+					This value will be saved as <code>null</code>.
+				</p>
+			);
+		}
+
+		if (
+			primitiveName === PrimitiveTypes.Enum &&
+			Array.isArray(effectiveDataType.options) &&
+			effectiveDataType.options.length
+		) {
+			return (
+				<FormControl fullWidth>
+					<InputLabel id='cast-enum-label'>Value</InputLabel>
+					<Select
+						size='small'
+						labelId='cast-enum-label'
+						label='Value'
+						value={(castedValue as string) || ''}
+						onChange={(e) => setCastedValue(e.target.value as string)}
+					>
+						{effectiveDataType.options.map((option) => (
+							<MenuItem key={option} value={option}>
+								{option}
+							</MenuItem>
+						))}
+					</Select>
+				</FormControl>
+			);
+		}
+
+		return (
+			<FormControl fullWidth>
+				<InputLabel htmlFor='cast-input'>Value</InputLabel>
+				<OutlinedInput
+					id='cast-input'
+					fullWidth
+					autoFocus
+					size='small'
+					label='Value'
+					type={resolveInputTypeFromDataType(effectiveDataType)}
+					value={castedValue ?? ''}
+					onChange={(e) => {
+						const sanitized = castHTMLInputValueToType(
+							e.target.value,
+							effectiveDataType,
+						);
+						setCastedValue(sanitized as string | number | boolean | null);
+					}}
+				/>
+			</FormControl>
+		);
+	};
+
+	const handleOnNodeName = useCallback(
+		(nodeNameParams: any) => {
+			Logger.log('onNodeName', nodeNameParams);
+			const valueAsKnownValueAsType: any = nodeNameParams.value;
+
+			if (
+				!!valueAsKnownValueAsType &&
+				!!valueAsKnownValueAsType.type &&
+				[
+					EntityType.DefinitionEntity,
+					EntityType.FunctionDeclaration,
+					EntityType.Operation,
+					EntityType.FunctionCall,
+					EntityType.ActionDescriptor,
+					EntityType.BuiltInBaseEntity,
+				].includes(valueAsKnownValueAsType.type)
+			) {
+				// Note: We need to be careful with dependencies here.
+				// If props.project.logic changes, this function updates.
+				// The "Ref Proxy" in RawJsonEditor handles the update gracefully.
+				const resolvedEntityName = resolveEntityName(
+					valueAsKnownValueAsType,
+					props.project.logic,
+				);
+				if (!!resolvedEntityName) {
+					return 'Template of ' + resolvedEntityName;
+				} else {
+					return 'Template';
+				}
+			}
+			return undefined;
+		},
+		[props.project.logic],
+	); // Dependency ensures it updates if logic changes
+
+	const handleOnChangeText = useCallback((value: string) => {
+		Logger.log('onChangeText', value);
+		setRawValue(value);
+	}, []);
+
+	// Based on the entity type, we resolve the header text
+	const resolveHeaderText = () => {
+		return resolveEntityName(props.valueOwner, props.valueOwner.project);
+	};
+
+	const isStrictObjectStructure =
+		valueOwnerDataType?.hasStrictObjectStructure();
+	const defaultValue = isStrictObjectStructure
+		? (valueOwnerDataType.entity as DefinitionEntityState).getRawDefaultValue()
+		: null;
+
+	const isObjectStructure = valueOwnerDataType?.isObject();
+
+	const isUntyped =
+		!valueOwnerDataType ||
+		!valueOwnerDataType?.entity ||
+		valueOwnerDataType?.entity.name === PrimitiveTypes.Untyped;
+
+	const hasStrictObjectStructure =
+		valueOwnerDataType?.hasStrictObjectStructure();
+
+	const hasInlineDeclaredObjectDataTypeEntity =
+		!!valueOwnerDataType?.entity &&
+		valueOwnerDataType?.entity.type === EntityType.DefinitionEntity &&
+		valueOwnerDataType?.entity.parent?.id === valueOwnerDataType?.id;
+
+	const canInlineDeclaredObjectDataTypeEntityBeExplicit =
+		hasInlineDeclaredObjectDataTypeEntity &&
+		![EntityType.Search, EntityType.Loop].includes(
+			props.valueOwner.parent?.type,
+		);
+
+	const keys =
+		!!props.value?.value &&
+		isObject(props.value?.value) &&
+		Object.keys(props.value?.value);
+
+	const existingGloballyDeclaredDefinitionEntity =
+		!!props.value?.value &&
+		isObject(props.value?.value) &&
+		findEntityFromKeys(keys, props.project.logic);
+
+	const showGoToDefinitionButton = !!existingGloballyDeclaredDefinitionEntity;
+
+	const showMakeDefinitionExplicitButton =
+		!existingGloballyDeclaredDefinitionEntity &&
+		canInlineDeclaredObjectDataTypeEntityBeExplicit &&
+		hasInlineDeclaredObjectDataTypeEntity;
+
+	const showCreateDefinitionEntityButton =
+		!showMakeDefinitionExplicitButton &&
+		(!valueOwnerDataType ||
+			(isObjectStructure && !hasStrictObjectStructure) ||
+			(isUntyped && isObject(props.value?.value)));
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			{/* Header */}
+			<span>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+					<button
+						className='dialog_back_button'
+						onClick={(e) => {
+							props.onClose?.(e);
+						}}
+					>
+						<i className='fa-solid fa-arrow-left'></i>
+					</button>
+					<h1 style={{ margin: '0px', fontWeight: 500, fontSize: '28px' }}>
+						{resolveHeaderText()}
+					</h1>
+				</div>
+				<span style={{ display: 'flex', gap: '6px', marginLeft: '42px' }}>
+					<p style={{ margin: '0px', color: 'rgba(0,0,0,0.7)' }}>
+						{resolveSubHeaderText()}
+					</p>
+				</span>
+			</span>
+
+			<div
+				style={{
+					flex: 1,
+					margin: '16px 0',
+					// margin: '16px 42px',
+					overflow: 'scroll',
+				}}
+			>
+				<section
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						height: '100%',
+					}}
+				>
+					<div
+						style={{
+							margin: '0 42px',
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'flex-end',
+						}}
+					>
+						<span
+							style={{
+								display: 'flex',
+								paddingTop: 6,
+								gap: 12,
+							}}
+						>
+							<span>
+								<span
+									style={{ display: 'flex', gap: '10px', alignItems: 'center' }}
+								>
+									<h3
+										style={{
+											display: 'flex',
+											gap: '6px',
+											fontWeight: 'normal',
+											margin: '0px',
+										}}
+									>
+										Value
+									</h3>
+								</span>
+								<p
+									style={{
+										margin: '0px',
+										fontSize: '14px',
+										marginTop: '6px',
+										color: 'rgba(0,0,0,0.54)',
+										marginBottom: '16px',
+									}}
+								>
+									{resolveEntityDataTypeLabel(props.valueOwner)}
+								</p>
+							</span>
+
+							{castOptions.length > 0 && (
+								<FormControl
+									size='small'
+									sx={{ minWidth: 180, marginRight: 1 }}
+								>
+									<InputLabel id='cast-data-type-label'>Edit as</InputLabel>
+									<Select
+										size='small'
+										labelId='cast-data-type-label'
+										label='Edit as'
+										value={castDataType?.id || ''}
+										renderValue={(value) => {
+											if (!value) {
+												return <em>Raw JSON</em>;
+											}
+											const picked = castOptions.find((opt) => opt.id === value);
+											if (!picked) return <em>Raw JSON</em>;
+											return renderSelectedCastOption(picked);
+										}}
+										onChange={(e) => {
+											const id = e.target.value as string;
+											if (!id) {
+												setCastDataType(null);
+												return;
+											}
+											const picked = castOptions.find((opt) => opt.id === id);
+											setCastDataType(picked || null);
+										}}
+									>
+										<MenuItem value=''>
+											<em>Raw JSON</em>
+										</MenuItem>
+										{castOptions.map((option) => (
+											<MenuItem key={option.id} value={option.id}>
+												{renderCastOption(option)}
+											</MenuItem>
+										))}
+									</Select>
+								</FormControl>
+							)}
+						</span>
+
+						<IconButton
+							style={{ width: 30, height: 30 }}
+							onClick={() => {
+								Logger.log('clicked');
+							}}
+							size='small'
+							id='json-editor-options-menu'
+						>
+							<i className='fa-solid fa-bars'></i>
+						</IconButton>
+
+						{/* Menu dropdown */}
+						<DropdownMenuPopup
+							popupOptions={{
+								anchorQuerySelector: '#json-editor-options-menu',
+								placement: 'bottom-end',
+							}}
+							// Options for formatting the json and one of making it a single line
+							options={[
+								...(isStrictObjectStructure
+									? [
+											{
+												label: 'Regenerate initial value',
+												iconStartSrc: FormatIconBlack,
+												iconStartSrcHover: FormatIconWhite,
+												iconStartClasses:
+													'json-editor-dialog-format-code-icons',
+												onClick: () => {
+													try {
+														const parsedExistingValue = JSON.parse(rawValue);
+
+														const objectExistingValue = isObject(
+															parsedExistingValue,
+														)
+															? parsedExistingValue
+															: {};
+
+														// On the existing object, delete any keys that are not in the default value
+														Object.keys(objectExistingValue).forEach((key) => {
+															if (
+																!(
+																	key in
+																	(defaultValue as {
+																		[key: string]: any;
+																	})
+																)
+															) {
+																delete objectExistingValue[key];
+															}
+														});
+
+														setRawValue(
+															JSON.stringify(
+																{
+																	...defaultValue,
+																	// Preserve existing values
+																	...objectExistingValue,
+																},
+																null,
+																2,
+															),
+														);
+													} catch (e) {
+														Logger.log('Invalid JSON');
+														popupNotification({
+															text: 'Invalid JSON',
+															color: 'error',
+														});
+													}
+												},
+											},
+										]
+									: []),
+								{
+									label: 'Format',
+									iconStartSrc: FormatIconBlack,
+									iconStartSrcHover: FormatIconWhite,
+									iconStartClasses: 'json-editor-dialog-format-code-icons',
+									onClick: () => {
+										try {
+											const parsed = JSON.parse(rawValue);
+											setRawValue(JSON.stringify(parsed, null, 2));
+										} catch (e) {
+											Logger.log('Invalid JSON');
+											popupNotification({
+												text: 'Invalid JSON',
+												color: 'error',
+											});
+										}
+									},
+								},
+								{
+									label: 'Single line',
+									iconStartSrc: InlineIconBlack,
+									iconStartSrcHover: InlineIconWhite,
+									iconStartClasses: 'json-editor-dialog-format-code-icons',
+									onClick: () => {
+										try {
+											const parsed = JSON.parse(rawValue);
+											setRawValue(JSON.stringify(parsed));
+										} catch (e) {
+											Logger.log('Invalid JSON');
+											popupNotification({
+												text: 'Invalid JSON',
+												color: 'error',
+											});
+										}
+									},
+								},
+								{
+									label: 'Copy',
+									iconStart: 'fa-solid fa-clipboard',
+									onClick: () => {
+										navigator.clipboard.writeText(rawValue);
+										popupNotification({
+											text: 'Copied to clipboard',
+											// color: 'success',
+										});
+									},
+								},
+								{
+									label: 'Paste',
+									iconStart: 'fa-solid fa-paste',
+									onClick: () => {
+										navigator.clipboard
+											.readText()
+											.then((text) => {
+												Logger.log('Pasted text', text);
+												setRawValue(text);
+											})
+											.catch((err) => {
+												Logger.error('Failed to read clipboard', err);
+												popupNotification({
+													text: 'Failed to read clipboard',
+													color: 'error',
+												});
+											});
+									},
+								},
+							]}
+						/>
+					</div>
+
+					{castDataType ? (
+						<div
+							style={{
+								margin: '0 42px',
+								marginTop: 6,
+								display: 'flex',
+								flexDirection: 'column',
+								gap: 12,
+							}}
+						>
+							{renderCastInput()}
+						</div>
+					) : (
+						<RawJsonEditor
+							schema={schema}
+							text={rawValue}
+							onExpand={(expandParams: ExpandOptions) => {
+								Logger.log('onExpand', expandParams);
+							}}
+							onNodeName={handleOnNodeName}
+							onReady={(editor: JSONEditor) => {
+								editorRef.current = editor;
+							}}
+							onChangeText={handleOnChangeText}
+							onValidationError={(
+								errors: ReadonlyArray<SchemaValidationError | ParseError>,
+							) => {
+								Logger.log(errors);
+								setEditorErrors(errors);
+							}}
+						/>
+					)}
+				</section>
+			</div>
+
+			<section
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button
+					onClick={(e: any) => {
+						props.onClose?.(e);
+					}}
+					variant='text'
+				>
+					Back
+				</Button>
+				{showCreateDefinitionEntityButton && (
+					<Button
+						variant='outlined'
+						onClick={async () => {
+							const changeSet = props.project.logic.addChangeSet(
+								new ChangeSet(
+									props.project.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									props.project.logic,
+									false,
+									StateMutationAction.CreateDefFromValue,
+								),
+							);
+
+							const result = createDefinitionEntityFromJSONObject(
+								props.value?.value as {
+									[key: string]: any;
+								},
+								props.project.logic,
+								{
+									name:
+										resolveEntityName(props.valueOwner, props.project.logic) +
+										' definition',
+								},
+								changeSet,
+							);
+
+							const resolvedDefinitionEntity = result.changeSet.self;
+
+							if (result.hasCreated) {
+								let newX = valueOwnerCanvasParentEntity.x;
+								const newY =
+									valueOwnerCanvasParentEntity.y -
+									calculateCardSize(resolvedDefinitionEntity).height -
+									CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS;
+
+								const newCanvasEntities = entitiesToUniqueCanvasEntities(
+									result.changeSet.added,
+								);
+
+								// Give them a valid x and y coordinates
+								newCanvasEntities.forEach((entity) => {
+									newX += CANVAS_CARD_WIDTH * 2;
+
+									// @ts-ignore
+									entity.metaSync(
+										{
+											x: newX,
+											y: newY,
+										},
+										changeSet,
+									);
+								});
+
+								const objectId = getCanvasEntityDraggableContainerDOMId(
+									resolvedDefinitionEntity,
+								);
+
+								props.project.canvas?.scrollToObjectById(objectId, () => {
+									props.onClose?.(null);
+								});
+							} else {
+								// Create notification that the entity already exists
+								// Then scroll to the entity
+								popupNotification({
+									text: 'Compatible entity already exists',
+									color: 'warning',
+								});
+
+								const canvasEntity = getParentCanvasEntity(
+									resolvedDefinitionEntity,
+								);
+
+								const objectId =
+									getCanvasEntityDraggableContainerDOMId(canvasEntity);
+
+								props.project.canvas?.scrollToObjectById(objectId, () => {
+									props.onClose?.(null);
+								});
+							}
+
+							props.project.renderAndCloseChangeSet(changeSet);
+						}}
+					>
+						Create entity definition
+					</Button>
+				)}
+				{showMakeDefinitionExplicitButton && (
+					<Button
+						variant='outlined'
+						onClick={async () => {
+							const changeSet = props.project.logic.addChangeSet(
+								new ChangeSet(
+									props.project.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									props.project.logic,
+									false,
+									StateMutationAction.MoveInlineDefToCanvas,
+								),
+							);
+
+							const existingInlineEntity =
+								valueOwnerDataType?.entity as DefinitionEntityState;
+
+							existingInlineEntity.setParent(props.project.logic, changeSet);
+							valueOwnerDataType.metaSync(
+								{
+									inferred: false,
+								},
+								changeSet,
+							);
+
+							// if (result.hasCreated) {
+							let newX = valueOwnerCanvasParentEntity.x;
+							const newY =
+								valueOwnerCanvasParentEntity.y -
+								calculateCardSize(existingInlineEntity).height -
+								CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS;
+
+							const newCanvasEntities = entitiesToUniqueCanvasEntities([
+								existingInlineEntity,
+							]);
+
+							// Give them a valid x and y coordinates
+							newCanvasEntities.forEach((entity) => {
+								newX += CANVAS_CARD_WIDTH * 2;
+
+								// @ts-ignore
+								entity.metaSync(
+									{
+										x: newX,
+										y: newY,
+									},
+									changeSet,
+								);
+							});
+
+							const objectId =
+								getCanvasEntityDraggableContainerDOMId(existingInlineEntity);
+
+							props.project.canvas?.scrollToObjectById(objectId, () => {
+								props.onClose?.(null);
+							});
+
+							props.project.renderAndCloseChangeSet(changeSet);
+						}}
+					>
+						Create entity definition
+					</Button>
+				)}
+				{showGoToDefinitionButton && (
+					<Button
+						variant='outlined'
+						onClick={(e: any) => {
+							const canvasEntity = getParentCanvasEntity(
+								valueOwnerDataType.entity,
+							);
+
+							const objectId =
+								getCanvasEntityDraggableContainerDOMId(canvasEntity);
+
+							props.project.canvas?.scrollToObjectById(objectId, () => {
+								props.onClose?.(e);
+							});
+						}}
+					>
+						Go to definition
+					</Button>
+				)}
+				<Button
+					// Disabled if there are errors (the cast-input path produces
+					// values pre-typed by the matching input field so it can't
+					// have JSON validation errors).
+					disabled={!castDataType && !!editorErrors.length}
+					onClick={(e: any) => {
+						let valueToSave: unknown;
+
+						if (castDataType) {
+							valueToSave = castedValue;
+						} else {
+							Logger.log('Save value', rawValue);
+							try {
+								valueToSave = JSON.parse(rawValue);
+							} catch (_) {
+								valueToSave = null;
+							}
+						}
+
+						let storage: ChangeSet | IValueStoreClient =
+							props.project.localTestValues;
+
+						if (onlyDefault) {
+							storage = props.project.logic.addChangeSet(
+								new ChangeSet(
+									props.project.logic,
+									ProjectState.sessionAuthor,
+									new Date().toISOString(),
+									props.valueOwner,
+									false,
+									StateMutationAction.SetPrimitiveDefaultValue,
+								),
+							);
+						}
+
+						const asCastedType = castDataType ? (getPrimitiveNameOfDataType(castDataType) || undefined) : undefined;
+
+						const changeSet = handleLiteralValueChange(
+							valueToSave as any,
+							props.valueOwner,
+							props.project.logic,
+							storage,
+							asCastedType,
+						);
+
+						if (!!changeSet) {
+							props.project.renderAndCloseChangeSet(changeSet);
+						}
+
+						// Update the owner of the value in the canvas
+						props.project.emit(valueOwnerCanvasParentEntity.id, {});
+
+						// If there is a test ongoing, notify the test
+						props.project.test?.validate();
+
+						// Close the dialog
+						props.onClose?.(e);
+					}}
+					variant='contained'
+					color='primary'
+				>
+					Save value
+				</Button>
+			</section>
+		</div>
+	);
+};
+
+export default JsonEditorDialog;