fix: ignore auto focus on circular-reference fields

sxzz · Dec 7, 2024 · 33f1296 · 33f1296
1 parent fb285ff
commit 33f1296
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/components/ast/Property.vue b/components/ast/Property.vue
@@ -32,7 +32,11 @@ function isArrayLike(n: unknown) {
   return typeof n == 'object' && n && (Array.isArray(n) || Symbol.iterator in n)
 }
 
-const isHovering = computed(() => {
+const isFocusing = computed(() => {
+  if (currentParser.value.ignoreFocusFields?.includes(props.id as any)) {
+    return false
+  }
+
   // children of csstree is iterable but not array
   if (isArrayLike(props.value)) {
     return Array.from(props.value).some((v) => checkRange(getRange(v)))
@@ -48,7 +52,7 @@ const openManual = ref<boolean>()
 const open = computed(
   () =>
     openable.value &&
-    (openManual.value ?? (props.open || (autoFocus.value && isHovering.value))),
+    (openManual.value ?? (props.open || (autoFocus.value && isFocusing.value))),
 )
 
 const valueCreated = ref(false)
@@ -59,7 +63,7 @@ function toggleOpen() {
 
   if (
     openManual.value !== undefined &&
-    openManual.value !== (props.open || isHovering.value)
+    openManual.value !== (props.open || isFocusing.value)
   ) {
     openManual.value = undefined
   } else {
@@ -93,31 +97,31 @@ function handleMouseLeave() {
 }
 
 const container = ref<HTMLDivElement>()
-const exactHover = ref(false)
+const exactFocusing = ref(false)
 
-function handleSubHoverChange(subHovering: boolean) {
-  exactHover.value = isHovering.value && !subHovering
+function handleSubFocusingChange(subFocusing: boolean) {
+  exactFocusing.value = isFocusing.value && !subFocusing
 }
 
 watch(
-  [autoFocus, exactHover, isHovering, container],
-  ([autoFocus, exactHover, isHovering, container]) => {
-    if (autoFocus && exactHover && isHovering && container) {
+  [autoFocus, exactFocusing, isFocusing, container],
+  ([autoFocus, exactFocusing, isFocusing, container]) => {
+    if (autoFocus && exactFocusing && isFocusing && container) {
       requestAnimationFrame(() => container.scrollIntoView({ block: 'center' }))
     }
   },
   { immediate: true },
 )
 
-defineExpose({ isHovering })
+defineExpose({ isFocusing })
 </script>
 
 <template>
   <div
     v-if="show"
     ref="container"
     relative
-    :class="isHovering && exactHover && 'ast-highlight'"
+    :class="isFocusing && exactFocusing && 'ast-highlight'"
     @mouseover="handleMouseOver"
     @mouseleave="handleMouseLeave"
   >
@@ -149,7 +153,7 @@ defineExpose({ isHovering })
       />&nbsp;</span
     >
     <span v-if="!openable || valueCreated" v-show="!openable || open">
-      <AstValue :data="value" @update:hover="handleSubHoverChange" />
+      <AstValue :data="value" @update:focus="handleSubFocusingChange" />
     </span>
     <AstSummaryValue
       v-if="openable && !open"

diff --git a/components/ast/Value.vue b/components/ast/Value.vue
@@ -2,7 +2,7 @@
 import type { AstProperty } from '#components'
 const props = defineProps<{ data: any }>()
 const emit = defineEmits<{
-  'update:hover': [value: boolean]
+  'update:focus': [value: boolean]
 }>()
 
 const hasChildren = computed(
@@ -21,8 +21,8 @@ const valueColor = useHighlightColor(value)
 
 const properties = useTemplateRefsList<InstanceType<typeof AstProperty>>()
 watchEffect(() => {
-  const hovering = properties.value.some((p) => p.isHovering)
-  emit('update:hover', hovering)
+  const focusing = properties.value.some((p) => p.isFocusing)
+  emit('update:focus', focusing)
 })
 </script>
 

diff --git a/composables/parser/html.ts b/composables/parser/html.ts
@@ -22,6 +22,7 @@ const htmlparser2: Parser<typeof Htmlparser2, Htmlparser2.Options> = {
     return this.parseDocument(code, options)
   },
   getAstLocation: genGetAstLocation('htmlparser2'),
+  ignoreFocusFields: ['parent', 'prev', 'next'],
 }
 
 const rehypeAst: Parser<typeof Rehype> = {

diff --git a/composables/parser/index.ts b/composables/parser/index.ts
@@ -59,6 +59,7 @@ export interface Parser<C = unknown, O = unknown> {
   }
   astTitleField?: string
   getAstTitle?: (this: C, value: any) => string | undefined
+  ignoreFocusFields?: (string | number)[]
   gui?: AsyncComponentLoader
 }
 export interface LanguageOption {