<div>
    <input
        v-if="control.type == 'string'"
        class="inspector-control"
        type="text"
        ref="input"
        v-bind:value="valueWithPreset"
        v-bind:id="controlId"
        v-bind:placeholder="control.placeholder"
        v-bind:readonly="inspectorPreferences.readOnly"
        @input="updateValue"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
    />

    <textarea
        v-if="control.type == 'text'"
        class="component-backend-inspector-textinput inspector-control"
        :class="cssClass"
        ref="input"
        v-bind:value="valueWithPreset"
        v-bind:id="controlId"
        v-bind:placeholder="control.placeholder"
        v-bind:readonly="inspectorPreferences.readOnly"
        @keydown.enter.stop
        @input="updateValue"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
    ></textarea>

    <div
        v-if="control.type == 'text'"
        class="inspector-textarea-shadow inspector-control component-backend-inspector-textinput"
        ref="textareaShadow"
        v-text="valueWithPreset"
    ></div>
</div>