Merge branch '10.0-release' into tbiethman/fix-electron

Author: tgriesser

packages/app/src/runner/selector-playground/SelectorPlayground.vue

@@ -44,33 +44,35 @@
           </MenuItem>
         </MenuItems>
       </Menu>
-      <code class="h-full flex-1 relative">
+      <code
+        class="flex-1 py-2px pr-2px pl-0 relative overflow-hidden"
+        :style="{height: 'calc(100% + 4px)'}"
+      >
         <span
-          ref="ghostLeft"
           class="flex pl-12px inset-y-0 text-gray-600 absolute items-center pointer-events-none"
           data-cy="selected-playground-method"
         >
           <span class="text-gray-800">cy</span>.<span class="text-purple-500">{{ selectorPlaygroundStore.method }}</span>(‘
         </span>
-        <span
-          ref="ghostRight"
-          class="font-medium left-[-9999px] absolute inline-block"
-        >{{ selector.replace(/\s/g, '&nbsp;') }}</span>
-        <span
-          class="flex inset-y-0 text-gray-600 absolute items-center pointer-events-none"
-          :style="{left: inputRightOffset + 'px'}"
-        >‘)</span>
         <input
-          ref="copyText"
           v-model="selector"
+          autocapitalize="none"
+          autocorrect="off"
+          spellcheck="false"
           data-cy="playground-selector"
-          :style="{paddingLeft: inputLeftOffset + 'px', paddingRight: matcherWidth + 32 + 24 + 'px'}"
+          :style="{paddingLeft: leftOfInputText + 'ch', paddingRight: widthOfMatchesHelperText + 'px'}"
           class="border rounded-r-md font-medium h-full outline-none border-gray-200 w-full text-indigo-500 hocus-default overflow-ellipsis"
           :class="{'hocus-default': selectorPlaygroundStore.isValid, 'hocus-error': !selectorPlaygroundStore.isValid}"
         >
+        <span
+          class="flex inset-y-0 text-gray-600 absolute items-center pointer-events-none"
+          :style="{
+            left: `${leftOffsetForClosingParens}ch`,
+          }"
+        >’)</span>
         <div
           ref="match"
-          class="border-l flex font-sans border-l-gray-200 my-6px px-16px inset-y-0 right-0 text-gray-600 absolute items-center"
+          class="bg-white border-l flex font-sans border-l-gray-200 my-6px px-16px inset-y-0 right-3px text-gray-600 absolute items-center"
           data-cy="playground-num-elements"
         >
           <template v-if="!selectorPlaygroundStore.isValid">
@@ -174,7 +176,19 @@ const selectorPlaygroundStore = useSelectorPlaygroundStore()
 const match = ref<HTMLDivElement>()
 const { width: matcherWidth } = useElementSize(match)
 
-const copyText = ref<HTMLInputElement>()
+// Text that is printed to the LEFT of the input
+const leftOfInputText = computed(() => {
+  return (selectorPlaygroundStore.method === 'get' ? 'cy.get(‘' : 'cy.contains(’').length + 1
+})
+
+const widthOfMatchesHelperText = computed(() => {
+  // Arbitrary padding
+  return matcherWidth.value + 32 + 24
+})
+
+const leftOffsetForClosingParens = computed(() => {
+  return leftOfInputText.value + selector.value.length
+})
 
 watch(() => selectorPlaygroundStore.method, () => {
   props.getAutIframe().toggleSelectorHighlight(true)
@@ -199,23 +213,6 @@ const selector = computed({
   },
 })
 
-const inputSize = useElementSize(copyText)
-
-// spooky
-const ghostLeft = ref<HTMLSpanElement>()
-const { width: ghostLeftWidth } = useElementSize(ghostLeft)
-const inputLeftOffset = computed(() => ghostLeftWidth.value + 12)
-
-const ghostRight = ref<HTMLSpanElement>()
-const { width: ghostRightWidth } = useElementSize(ghostRight)
-const inputRightOffset = computed(() => {
-  const leftOffset = inputLeftOffset.value
-  const combined = leftOffset + ghostRightWidth.value
-  const max = inputSize.width.value + leftOffset
-
-  return combined <= max ? combined : max
-})
-
 function setShowingHighlight () {
   selectorPlaygroundStore.setShowingHighlight(true)
   props.getAutIframe().toggleSelectorHighlight(true)