ui: read-only and literal

src/client/components/types/bool.type-renderer.jsx

@@ -6,7 +6,7 @@ import propertyPropTypes from './property-prop-types';
 const Bool = ({
   value,
 }) => (
-  <select value={value}>
+  <select readOnly value={value}>
     <option>false</option>
     <option>true</option>
   </select>

src/client/components/types/condition.type-renderer.jsx

@@ -44,7 +44,7 @@ const Condition = ({
               (r, operand) => (
                 <>
                   {r}
-                  <select className="operator" value={value.operator}>
+                  <select className="operator" readOnly value={value.operator}>
                     {binaryOps.map(([k, v]) => <option value={k}>{v}</option>)}
                   </select>
                   {renderOperand(context, operand, type)}

src/client/components/types/number.type-renderer.jsx

@@ -17,7 +17,7 @@ const Number = ({
     {
       options
         ? (
-          <select value={value}>
+          <select readOnly value={value}>
             {Object.entries(options).map(([optionValue, optionLabel]) => (
               <option value={optionValue}>{optionLabel}</option>
             ))}
@@ -27,6 +27,7 @@ const Number = ({
           <>
             <input
               onWheel={(e) => (e.preventDefault(), false)}
+              readOnly
               type="text"
               value={value}
             />

src/client/components/types/object.type-renderer.jsx

@@ -19,7 +19,7 @@ const ObjectRenderer = ({
   return (
     <div className="object">
       <span className="bracket open">{brackets.slice(0, 1)}</span>
-      <pre contentEditable>
+      <pre>
         <code>
           {'  '}
           {(value ? json.slice(1).slice(0, -1) : '').trim('\n')}

src/client/components/types/steps.jsx

@@ -38,15 +38,11 @@ const Steps = (props) => {
               return {...r, [optionSteps[i].key]: true};
             }, {}));
             if (0 === i) {
-              const index = tierOptions.indexOf('context');
-              if (-1 !== index) {
-                tierOptions.splice(index, 1);
-              }
-              tierOptions.push('Literal');
+              tierOptions.push('<literal>');
             }
             return (
               <span className="key">
-                <select value={steps[i].key}>
+                <select readOnly value={steps[i].key}>
                   {
                     tierOptions
                       .sort((l, r) => l.toLowerCase() < r.toLowerCase() ? -1 : 1)

src/client/components/types/string.type-renderer.jsx

@@ -11,13 +11,13 @@ const String = ({
     {
       options
         ? (
-          <select value={value}>
+          <select readOnly value={value}>
             {Object.entries(options).map(([optionValue, optionLabel]) => (
               <option value={optionValue}>{optionLabel}</option>
             ))}
           </select>
         )
-        : <input type="text" value={value} />
+        : <input readOnly type="text" value={value} />
     }
   </span>
 );

src/client/components/types/value.type-renderer.jsx

@@ -43,10 +43,10 @@ const renderValue = (context, type, value) => {
         return {...r, [optionSteps[0].key]: true};
       }, {}));
       tierOptions.splice(tierOptions.indexOf('context'), 1);
-      tierOptions.push('Literal');
+      tierOptions.push('<literal>');
       return (
         <div className="literal">
-          <select value="Literal">
+          <select readOnly value="<literal>">
             {
               tierOptions
                 .sort((l, r) => l.toLowerCase() < r.toLowerCase() ? -1 : 1)