diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js
index effe5563d..273b8a206 100644
--- a/src/editor/components/Main.js
+++ b/src/editor/components/Main.js
@@ -24,8 +24,6 @@ import useStore from '@/store';
 import { AIChatProvider } from '../contexts/AIChatContext';
 import AIChatPanel from './scenegraph/AIChatPanel';
 
-THREE.ImageUtils.crossOrigin = '';
-
 // Define the libraries array as a constant outside of the component
 const GOOGLE_MAPS_LIBRARIES = ['places'];
 
diff --git a/src/editor/components/elements/AddGeneratorComponent.js b/src/editor/components/elements/AddGeneratorComponent.js
index f321600a5..f7d1a1ddf 100644
--- a/src/editor/components/elements/AddGeneratorComponent.js
+++ b/src/editor/components/elements/AddGeneratorComponent.js
@@ -31,7 +31,7 @@ export default class AddGeneratorComponent extends React.Component {
         id = id
           .trim()
           .toLowerCase()
-          .replace(/[^a-z0-9]/g, '');
+          .replace(/[^a-z0-9-]/g, '');
         // With the transform, id could be empty string, so we need to check again.
       }
       if (id) {
diff --git a/src/editor/components/elements/PropertyRow.js b/src/editor/components/elements/PropertyRow.js
index 82e7902c1..8a16770c4 100644
--- a/src/editor/components/elements/PropertyRow.js
+++ b/src/editor/components/elements/PropertyRow.js
@@ -44,10 +44,13 @@ export default class PropertyRow extends React.Component {
 
   getWidget() {
     const props = this.props;
-    const isMap =
-      props.componentname === 'material' &&
-      (props.name === 'envMap' || props.name === 'src');
     let type = props.schema.type;
+
+    if (props.componentname === 'material' && props.name === 'envMap') {
+      // material envMap has the wrong type string, force it to map
+      type = 'map';
+    }
+
     if (
       (props.componentname === 'animation' ||
         props.componentname.startsWith('animation__')) &&
@@ -60,15 +63,17 @@ export default class PropertyRow extends React.Component {
       type = 'boolean';
     }
 
-    const value =
-      props.schema.type === 'selector'
+    let value =
+      type === 'selector'
         ? props.entity.getDOMAttribute(props.componentname)?.[props.name]
         : props.data;
 
+    if (type === 'string' && value && typeof value !== 'string') {
+      // Allow editing a custom type like event-set component schema
+      value = props.schema.stringify(value);
+    }
+
     const widgetProps = {
-      componentname: props.componentname,
-      entity: props.entity,
-      isSingle: props.isSingle,
       name: props.name,
       onChange: function (name, value) {
         // Auto-switch to custom variant for building segments when modifying certain properties
@@ -106,7 +111,8 @@ export default class PropertyRow extends React.Component {
           onEntityUpdate: props.onEntityUpdate
         });
       },
-      value: value
+      value: value,
+      id: this.id
     };
     const numberWidgetProps = {
       min: props.schema.hasOwnProperty('min') ? props.schema.min : -Infinity,
@@ -122,7 +128,7 @@ export default class PropertyRow extends React.Component {
         />
       );
     }
-    if (type === 'map' || isMap) {
+    if (type === 'map') {
       return <TextureWidget {...widgetProps} />;
     }
 
@@ -151,14 +157,6 @@ export default class PropertyRow extends React.Component {
         return <BooleanWidget {...widgetProps} />;
       }
       default: {
-        if (
-          props.schema.type === 'string' &&
-          widgetProps.value &&
-          typeof widgetProps.value !== 'string'
-        ) {
-          // Allow editing a custom type like event-set component schema
-          widgetProps.value = props.schema.stringify(widgetProps.value);
-        }
         return <InputWidget {...widgetProps} schema={props.schema} />;
       }
     }
diff --git a/src/editor/components/modals/ModalTextures.js b/src/editor/components/modals/ModalTextures.js
index 7d978a1a3..773757fe1 100644
--- a/src/editor/components/modals/ModalTextures.js
+++ b/src/editor/components/modals/ModalTextures.js
@@ -2,32 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Events from '../../lib/Events';
 import Modal from '@shared/components/Modal/Modal.jsx';
-import { insertNewAsset } from '../../lib/assetsUtils';
-
-function getFilename(url, converted = false) {
-  var filename = url.split('/').pop();
-  if (converted) {
-    filename = getValidId(filename);
-  }
-  return filename;
-}
-
-function isValidId(id) {
-  // The correct re should include : and . but A-frame seems to fail while accessing them
-  var re = /^[A-Za-z]+[\w-]*$/;
-  return re.test(id);
-}
-
-function getValidId(name) {
-  // info.name.replace(/\.[^/.]+$/, '').replace(/\s+/g, '')
-  return name
-    .split('.')
-    .shift()
-    .replace(/\s/, '-')
-    .replace(/^\d+\s*/, '')
-    .replace(/[\W]/, '')
-    .toLowerCase();
-}
+import {
+  getFilename,
+  getIdFromUrl,
+  insertNewAsset,
+  isValidId
+} from '../../lib/assetsUtils';
 
 export default class ModalTextures extends React.Component {
   static propTypes = {
@@ -157,15 +137,20 @@ export default class ModalTextures extends React.Component {
     var self = this;
     function onImageLoaded(img) {
       var src = self.preview.current.src;
+      var name = getFilename(src, true);
+      var existingAssetId = getIdFromUrl(src);
+      if (existingAssetId) {
+        name = existingAssetId;
+      }
       self.setState({
         preview: {
           width: self.preview.current.naturalWidth,
           height: self.preview.current.naturalHeight,
           src: src,
           id: '',
-          name: getFilename(src, true),
+          name: name,
           filename: getFilename(src),
-          type: 'new',
+          type: existingAssetId ? 'asset' : 'new',
           loaded: true,
           value: 'url(' + src + ')'
         }
@@ -178,12 +163,6 @@ export default class ModalTextures extends React.Component {
     this.imageName.current.focus();
   };
 
-  onNameKeyUp = (event) => {
-    if (event.keyCode === 13 && this.isValidAsset()) {
-      this.addNewAsset();
-    }
-  };
-
   onNameChanged = (event) => {
     var state = this.state.preview;
     state.name = event.target.value;
@@ -192,6 +171,7 @@ export default class ModalTextures extends React.Component {
 
   toggleNewDialog = () => {
     this.setState({ addNewDialogOpened: !this.state.addNewDialogOpened });
+    this.clear();
   };
 
   clear() {
@@ -215,23 +195,19 @@ export default class ModalTextures extends React.Component {
     this.setState({ newUrl: e.target.value });
   };
 
-  isValidAsset() {
-    let validUrl = isValidId(this.state.preview.name);
-    let validAsset = this.state.preview.loaded && validUrl;
-    return validAsset;
-  }
-
   addNewAsset = () => {
-    var self = this;
+    if (this.state.preview.type === 'asset') {
+      return;
+    }
+
     insertNewAsset(
       'img',
       this.state.preview.name,
       this.state.preview.src,
-      true,
-      function () {
-        self.generateFromAssets();
-        self.setState({ addNewDialogOpened: false });
-        self.clear();
+      () => {
+        this.generateFromAssets();
+        this.setState({ addNewDialogOpened: false });
+        this.clear();
       }
     );
   };
@@ -243,15 +219,20 @@ export default class ModalTextures extends React.Component {
   renderRegistryImages() {
     var self = this;
     let selectSample = function (image) {
+      let name = getFilename(image.name, true);
+      const existingAssetId = getIdFromUrl(image.src);
+      if (existingAssetId) {
+        name = existingAssetId;
+      }
       self.setState({
         preview: {
           width: image.width,
           height: image.height,
           src: image.src,
           id: '',
-          name: getFilename(image.name, true),
+          name: name,
           filename: getFilename(image.src),
-          type: 'registry',
+          type: existingAssetId ? 'asset' : 'registry',
           loaded: true,
           value: 'url(' + image.src + ')'
         }
@@ -291,8 +272,14 @@ export default class ModalTextures extends React.Component {
     let loadedTextures = this.state.loadedTextures;
     let preview = this.state.preview;
 
-    let validUrl = isValidId(this.state.preview.name);
-    let validAsset = this.isValidAsset();
+    let validId = isValidId(this.state.preview.name);
+    let assetIdTaken =
+      validId && !!document.getElementById(this.state.preview.name);
+    let validAsset =
+      this.state.preview.loaded &&
+      validId &&
+      !assetIdTaken &&
+      this.state.preview.type !== 'asset';
 
     let addNewAssetButton = this.state.addNewDialogOpened
       ? 'BACK'
@@ -320,6 +307,7 @@ export default class ModalTextures extends React.Component {
                     value={this.state.newUrl}
                     onChange={this.onUrlChange}
                     onKeyUp={this.onNewUrl}
+                    spellCheck="false"
                   />
                 </li>
                 <li>
@@ -343,13 +331,33 @@ export default class ModalTextures extends React.Component {
               <input
                 ref={this.imageName}
                 className={
-                  this.state.preview.name.length > 0 && !validUrl ? 'error' : ''
+                  this.state.preview.name.length > 0 &&
+                  (!validId || assetIdTaken)
+                    ? 'error'
+                    : ''
                 }
+                readOnly={preview.type === 'asset'}
                 type="text"
                 value={this.state.preview.name}
                 onChange={this.onNameChanged}
-                onKeyUp={this.onNameKeyUp}
+                onKeyUp={(event) => {
+                  if (event.keyCode === 13 && validAsset) {
+                    this.addNewAsset();
+                  }
+                }}
+                spellCheck="false"
               />
+              {preview.type !== 'asset' && assetIdTaken && (
+                <div className="iderror">
+                  Name already taken by another asset or entity
+                </div>
+              )}
+              {this.state.preview.name.length > 0 && !validId && (
+                <div className="iderror">Name is not valid</div>
+              )}
+              {preview.type === 'asset' && (
+                <div className="iderror">Texture already loaded</div>
+              )}
               <img
                 ref={this.preview}
                 width="155px"
diff --git a/src/editor/components/widgets/BooleanWidget.js b/src/editor/components/widgets/BooleanWidget.js
index 7f4c9cbd5..32db2b8fa 100644
--- a/src/editor/components/widgets/BooleanWidget.js
+++ b/src/editor/components/widgets/BooleanWidget.js
@@ -4,8 +4,7 @@ import classNames from 'classnames';
 
 export default class BooleanWidget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string.isRequired,
-    entity: PropTypes.object,
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     value: PropTypes.bool
@@ -36,8 +35,6 @@ export default class BooleanWidget extends React.Component {
   };
 
   render() {
-    const id = this.props.componentname + '.' + this.props.name;
-
     const checkboxClasses = classNames({
       checkboxAnim: true,
       checked: this.state.value
@@ -46,13 +43,13 @@ export default class BooleanWidget extends React.Component {
     return (
       <div className={checkboxClasses} onClick={this.onChange}>
         <input
-          id={id}
+          id={this.props.id}
           type="checkbox"
           checked={this.state.value}
           value={this.state.value}
           onChange={() => null}
         />
-        <label htmlFor={id} onClick={(e) => e.stopPropagation()} />
+        <label htmlFor={this.props.id} onClick={(e) => e.stopPropagation()} />
       </div>
     );
   }
diff --git a/src/editor/components/widgets/ColorWidget.js b/src/editor/components/widgets/ColorWidget.js
index 994e7055d..58d0dbf83 100644
--- a/src/editor/components/widgets/ColorWidget.js
+++ b/src/editor/components/widgets/ColorWidget.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 
 export default class ColorWidget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string.isRequired,
-    entity: PropTypes.object,
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     value: PropTypes.string
@@ -77,6 +76,7 @@ export default class ColorWidget extends React.Component {
           onChange={this.onChange}
         />
         <input
+          id={this.props.id}
           type="text"
           className="color_value"
           value={this.state.value}
diff --git a/src/editor/components/widgets/InputWidget.js b/src/editor/components/widgets/InputWidget.js
index 0deb2522a..6cec96a2b 100644
--- a/src/editor/components/widgets/InputWidget.js
+++ b/src/editor/components/widgets/InputWidget.js
@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 
 export default class InputWidget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string,
-    entity: PropTypes.object,
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     value: PropTypes.any,
@@ -37,10 +36,12 @@ export default class InputWidget extends React.Component {
   render() {
     return (
       <input
+        id={this.props.id}
         type="text"
         className="string"
         value={this.state.value || ''}
         onChange={this.onChange}
+        spellCheck="false"
       />
     );
   }
diff --git a/src/editor/components/widgets/NumberWidget.js b/src/editor/components/widgets/NumberWidget.js
index 77dbbbd3f..5ad250aba 100644
--- a/src/editor/components/widgets/NumberWidget.js
+++ b/src/editor/components/widgets/NumberWidget.js
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 
 export default class NumberWidget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string,
-    entity: PropTypes.object,
+    id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
-    name: PropTypes.string,
+    name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     precision: PropTypes.number,
     step: PropTypes.number,
@@ -164,6 +163,7 @@ export default class NumberWidget extends React.Component {
       <div className="inputBlock">
         {helpString}
         <input
+          id={this.props.id}
           ref={this.input}
           className="number"
           type="text"
diff --git a/src/editor/components/widgets/SelectWidget.js b/src/editor/components/widgets/SelectWidget.js
index f33f8a4fc..f2420c345 100644
--- a/src/editor/components/widgets/SelectWidget.js
+++ b/src/editor/components/widgets/SelectWidget.js
@@ -4,6 +4,7 @@ import Select from 'react-select';
 
 export default class SelectWidget extends React.Component {
   static propTypes = {
+    id: PropTypes.string,
     isMulti: PropTypes.bool,
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
@@ -65,6 +66,7 @@ export default class SelectWidget extends React.Component {
 
     return (
       <Select
+        id={this.props.id}
         className="select-widget"
         classNamePrefix="select"
         options={options}
diff --git a/src/editor/components/widgets/TextureWidget.js b/src/editor/components/widgets/TextureWidget.js
index f8cc3ecbe..935ae6704 100644
--- a/src/editor/components/widgets/TextureWidget.js
+++ b/src/editor/components/widgets/TextureWidget.js
@@ -1,79 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Events from '../../lib/Events';
-
-function getUrlFromId(assetId) {
-  return (
-    assetId.length > 1 &&
-    document.querySelector(assetId) &&
-    document.querySelector(assetId).getAttribute('src')
-  );
-}
-
-function GetFilename(url) {
-  if (url) {
-    var m = url.toString().match(/.*\/(.+?)\./);
-    if (m && m.length > 1) {
-      return m[1];
-    }
-  }
-  return '';
-}
-
-function insertNewAsset(type, id, src) {
-  var element = null;
-  switch (type) {
-    case 'img':
-      element = document.createElement('img');
-      element.id = id;
-      element.src = src;
-      break;
-  }
-  if (element) {
-    document.getElementsByTagName('a-assets')[0].appendChild(element);
-  }
-}
-
-function insertOrGetImageAsset(src) {
-  var id = GetFilename(src);
-  // Search for already loaded asset by src
-  var element = document.querySelector("a-assets > img[src='" + src + "']");
-
-  if (element) {
-    id = element.id;
-  } else {
-    // Check if first char of the ID is a number (Non a valid ID)
-    // In that case a 'i' preffix will be added
-    if (!isNaN(parseInt(id[0], 10))) {
-      id = 'i' + id;
-    }
-    if (document.getElementById(id)) {
-      var i = 1;
-      while (document.getElementById(id + '_' + i)) {
-        i++;
-      }
-      id += '_' + i;
-    }
-    insertNewAsset('img', id, src);
-  }
-
-  return id;
-}
+import { getUrlFromId } from '../../lib/assetsUtils';
 
 export default class TextureWidget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string,
-    entity: PropTypes.object,
-    mapName: PropTypes.string,
+    id: PropTypes.string,
     name: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     value: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
   };
 
   static defaultProps = {
-    value: '',
-    mapName: 'nomap',
-    dataURL: ''
+    value: ''
   };
 
   constructor(props) {
@@ -201,10 +140,6 @@ export default class TextureWidget extends React.Component {
         return;
       }
       var value = image.value;
-      if (image.type !== 'asset') {
-        var assetId = insertOrGetImageAsset(image.src);
-        value = '#' + assetId;
-      }
 
       if (this.props.onChange) {
         this.props.onChange(this.props.name, value);
@@ -230,6 +165,7 @@ export default class TextureWidget extends React.Component {
     return (
       <span className="texture">
         <input
+          id={this.props.id}
           className="map_value string"
           type="text"
           title={hint}
diff --git a/src/editor/components/widgets/Vec2Widget.js b/src/editor/components/widgets/Vec2Widget.js
index 4ca8243c0..fe9a0623c 100644
--- a/src/editor/components/widgets/Vec2Widget.js
+++ b/src/editor/components/widgets/Vec2Widget.js
@@ -5,8 +5,6 @@ import { areVectorsEqual } from '../../lib/utils.js';
 
 export default class Vec2Widget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string,
-    entity: PropTypes.object,
     onChange: PropTypes.func,
     value: PropTypes.object.isRequired
   };
@@ -38,16 +36,10 @@ export default class Vec2Widget extends React.Component {
   }
 
   render() {
-    const widgetProps = {
-      componentname: this.props.componentname,
-      entity: this.props.entity,
-      onChange: this.onChange
-    };
-
     return (
       <div className="vec2">
-        <NumberWidget name="x" value={this.state.x} {...widgetProps} />
-        <NumberWidget name="y" value={this.state.y} {...widgetProps} />
+        <NumberWidget name="x" value={this.state.x} onChange={this.onChange} />
+        <NumberWidget name="y" value={this.state.y} onChange={this.onChange} />
       </div>
     );
   }
diff --git a/src/editor/components/widgets/Vec3Widget.js b/src/editor/components/widgets/Vec3Widget.js
index 4171be891..54fa8927b 100644
--- a/src/editor/components/widgets/Vec3Widget.js
+++ b/src/editor/components/widgets/Vec3Widget.js
@@ -4,8 +4,6 @@ import React from 'react';
 import { areVectorsEqual } from '../../lib/utils.js';
 export default class Vec3Widget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string,
-    entity: PropTypes.object,
     onChange: PropTypes.func,
     value: PropTypes.object.isRequired
   };
@@ -39,17 +37,11 @@ export default class Vec3Widget extends React.Component {
   }
 
   render() {
-    const widgetProps = {
-      componentname: this.props.componentname,
-      entity: this.props.entity,
-      onChange: this.onChange
-    };
-
     return (
       <div className="vec3">
-        <NumberWidget name="x" value={this.state.x} {...widgetProps} />
-        <NumberWidget name="y" value={this.state.y} {...widgetProps} />
-        <NumberWidget name="z" value={this.state.z} {...widgetProps} />
+        <NumberWidget name="x" value={this.state.x} onChange={this.onChange} />
+        <NumberWidget name="y" value={this.state.y} onChange={this.onChange} />
+        <NumberWidget name="z" value={this.state.z} onChange={this.onChange} />
       </div>
     );
   }
diff --git a/src/editor/components/widgets/Vec4Widget.js b/src/editor/components/widgets/Vec4Widget.js
index 485d4b187..6292e733c 100644
--- a/src/editor/components/widgets/Vec4Widget.js
+++ b/src/editor/components/widgets/Vec4Widget.js
@@ -6,8 +6,6 @@ import NumberWidget from './NumberWidget';
 
 export default class Vec4Widget extends React.Component {
   static propTypes = {
-    componentname: PropTypes.string,
-    entity: PropTypes.object,
     onChange: PropTypes.func,
     value: PropTypes.object.isRequired
   };
@@ -43,18 +41,12 @@ export default class Vec4Widget extends React.Component {
   }
 
   render() {
-    const widgetProps = {
-      componentname: this.props.componentname,
-      entity: this.props.entity,
-      onChange: this.onChange
-    };
-
     return (
       <div className="vec4">
-        <NumberWidget name="x" value={this.state.x} {...widgetProps} />
-        <NumberWidget name="y" value={this.state.y} {...widgetProps} />
-        <NumberWidget name="z" value={this.state.z} {...widgetProps} />
-        <NumberWidget name="w" value={this.state.w} {...widgetProps} />
+        <NumberWidget name="x" value={this.state.x} onChange={this.onChange} />
+        <NumberWidget name="y" value={this.state.y} onChange={this.onChange} />
+        <NumberWidget name="z" value={this.state.z} onChange={this.onChange} />
+        <NumberWidget name="w" value={this.state.w} onChange={this.onChange} />
       </div>
     );
   }
diff --git a/src/editor/lib/assetsUtils.js b/src/editor/lib/assetsUtils.js
index db8ce5dd2..fd97da0b3 100644
--- a/src/editor/lib/assetsUtils.js
+++ b/src/editor/lib/assetsUtils.js
@@ -1,19 +1,48 @@
-export function insertNewAsset(
-  type,
-  id,
-  src,
-  anonymousCrossOrigin,
-  onLoadedCallback
-) {
-  var element = null;
+export function getUrlFromId(assetId) {
+  return (
+    assetId.length > 1 &&
+    document.querySelector(assetId) &&
+    document.querySelector(assetId).getAttribute('src')
+  );
+}
+
+export function getIdFromUrl(url) {
+  return document.querySelector("a-assets > [src='" + url + "']")?.id;
+}
+
+export function getFilename(url, converted = false) {
+  var filename = url.split('/').pop();
+  if (converted) {
+    filename = getValidId(filename);
+  }
+  return filename;
+}
+
+export function isValidId(id) {
+  // The correct re should include : and . but A-frame seems to fail while accessing them
+  var re = /^[A-Za-z]+[\w-]*$/;
+  return re.test(id);
+}
+
+export function getValidId(name) {
+  // info.name.replace(/\.[^/.]+$/, '').replace(/\s+/g, '')
+  return name
+    .split('.')
+    .shift()
+    .replace(/\s/, '-')
+    .replace(/^\d+\s*/, '')
+    .replace(/[\W]/, '')
+    .toLowerCase();
+}
+
+export function insertNewAsset(type, id, src, onLoadedCallback = undefined) {
+  let element;
   switch (type) {
     case 'img':
       element = document.createElement('img');
       element.id = id;
       element.src = src;
-      if (anonymousCrossOrigin) {
-        element.crossOrigin = 'anonymous';
-      }
+      element.crossOrigin = 'anonymous';
       break;
   }
 
@@ -23,6 +52,17 @@ export function insertNewAsset(
         onLoadedCallback();
       }
     };
-    document.getElementsByTagName('a-assets')[0].appendChild(element);
+
+    let assetsEl = document.querySelector('a-assets');
+    if (!assetsEl) {
+      assetsEl = document.createElement('a-assets');
+      var sceneEl = document.querySelector('a-scene');
+      if (!sceneEl) {
+        throw new Error('No a-scene element found to append a-assets to');
+      }
+      sceneEl.appendChild(assetsEl);
+    }
+
+    assetsEl.appendChild(element);
   }
 }
diff --git a/src/editor/lib/commands/EntityReparentCommand.js b/src/editor/lib/commands/EntityReparentCommand.js
index 00fc2316e..0f8b0bb42 100644
--- a/src/editor/lib/commands/EntityReparentCommand.js
+++ b/src/editor/lib/commands/EntityReparentCommand.js
@@ -32,11 +32,13 @@ export class EntityReparentCommand extends Command {
       // losslessly, including correct component dependency resolution.
       this.entityData = STREET.utils.getElementData(entity);
 
-      // Store world position and quaternion before reparenting
+      // Store world position, quaternion, and scale before reparenting
       this.worldPosition = new THREE.Vector3();
       this.worldQuaternion = new THREE.Quaternion();
+      this.worldScale = new THREE.Vector3();
       entity.object3D.getWorldPosition(this.worldPosition);
       entity.object3D.getWorldQuaternion(this.worldQuaternion);
+      entity.object3D.getWorldScale(this.worldScale);
     }
   }
 
@@ -55,9 +57,19 @@ export class EntityReparentCommand extends Command {
       .invert()
       .multiply(this.worldQuaternion);
 
+    // Calculate the new local scale
+    const parentWorldScale = new THREE.Vector3();
+    newParent.object3D.getWorldScale(parentWorldScale);
+    const newLocalScale = new THREE.Vector3(
+      this.worldScale.x / parentWorldScale.x,
+      this.worldScale.y / parentWorldScale.y,
+      this.worldScale.z / parentWorldScale.z
+    );
+
     // Apply the new local transform to the entity
     entity.object3D.position.copy(newLocalPosition);
     entity.object3D.quaternion.copy(newLocalQuaternion);
+    entity.object3D.scale.copy(newLocalScale);
 
     // Update A-Frame attributes to reflect the changes
     entity.setAttribute('position', {
@@ -70,11 +82,28 @@ export class EntityReparentCommand extends Command {
       newLocalQuaternion,
       'YXZ'
     );
-    entity.setAttribute('rotation', {
-      x: THREE.MathUtils.radToDeg(euler.x),
-      y: THREE.MathUtils.radToDeg(euler.y),
-      z: THREE.MathUtils.radToDeg(euler.z)
-    });
+    const rotX = THREE.MathUtils.radToDeg(euler.x);
+    const rotY = THREE.MathUtils.radToDeg(euler.y);
+    const rotZ = THREE.MathUtils.radToDeg(euler.z);
+    if (rotX === 0 && rotY === 0 && rotZ === 0) {
+      entity.removeAttribute('rotation');
+    } else {
+      entity.setAttribute('rotation', { x: rotX, y: rotY, z: rotZ });
+    }
+
+    if (
+      newLocalScale.x === 1 &&
+      newLocalScale.y === 1 &&
+      newLocalScale.z === 1
+    ) {
+      entity.removeAttribute('scale');
+    } else {
+      entity.setAttribute('scale', {
+        x: newLocalScale.x,
+        y: newLocalScale.y,
+        z: newLocalScale.z
+      });
+    }
   }
 
   execute(nextCommandCallback) {
diff --git a/src/editor/style/index.scss b/src/editor/style/index.scss
index c63ade597..f9e98f18e 100644
--- a/src/editor/style/index.scss
+++ b/src/editor/style/index.scss
@@ -394,19 +394,19 @@ body.aframe-inspector-opened {
   }
 
   /* Note these vendor-prefixed selectors cannot be grouped! */
-  input[type='color']-webkit-color-swatch {
+  input[type='color']::-webkit-color-swatch {
     border: 0; /* To remove the gray border. */
   }
 
-  input[type='color']-webkit-color-swatch-wrapper {
+  input[type='color']::-webkit-color-swatch-wrapper {
     padding: 0; /* To remove the inner padding. */
   }
 
-  input[type='color']-moz-color-swatch {
+  input[type='color']::-moz-color-swatch {
     border: 0;
   }
 
-  input[type='color']-moz-focus-inner {
+  input[type='color']::-moz-focus-inner {
     border: 0; /* To remove the inner border (specific to Firefox). */
     padding: 0;
   }
diff --git a/src/editor/style/textureModal.scss b/src/editor/style/textureModal.scss
index 05b204289..b587b711f 100644
--- a/src/editor/style/textureModal.scss
+++ b/src/editor/style/textureModal.scss
@@ -28,9 +28,6 @@
   display: flex;
   flex-direction: column;
   row-gap: 32px;
-  animation: animatetop 0.2s ease-out;
-  animation-duration: 0.2s;
-  animation-name: animatetop;
   background-color: rgb(34, 34, 34);
   box-shadow:
     0 4px 8px 0 rgba(0, 0, 0, 0.5),
@@ -179,6 +176,13 @@
   margin: 8px 0;
   width: 144px;
 }
+.preview .iderror {
+  background: #fff;
+  color: #a00;
+  margin-bottom: 8px;
+  padding: 3px 5px;
+  width: 148px;
+}
 .preview button {
   width: 155px;
 }