feat: watch href

Signed-off-by: Ryan Wang <[email protected]>
halo-sigs · Jun 7, 2024 · 1251e2d · 1251e2d
1 parent 8456373
commit 1251e2d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/ui/src/components/HyperlinkInlineView.vue b/ui/src/components/HyperlinkInlineView.vue
@@ -1,7 +1,21 @@
 <script lang="ts" setup>
+import type { HyperlinkInlineCard } from '@halo-dev/hyperlink-card';
 import { nodeViewProps, NodeViewWrapper } from '@halo-dev/richtext-editor';
+import { ref, watch } from 'vue';
 
-defineProps(nodeViewProps);
+const props = defineProps(nodeViewProps);
+
+const cardRef = ref<InstanceType<typeof HyperlinkInlineCard> | null>();
+
+watch(
+  () => props.node.attrs.href,
+  (value) => {
+    if (value && cardRef.value) {
+      cardRef.value.href = value;
+      cardRef.value.fetchSiteData();
+    }
+  }
+);
 </script>
 
 <template>
@@ -11,6 +25,7 @@ defineProps(nodeViewProps);
     :class="{ 'hyperlink-ring-1': selected }"
   >
     <hyperlink-inline-card
+      ref="cardRef"
       class="hyperlink-pointer-events-none hyperlink-select-none"
       :href="node.attrs.href"
       :theme="node.attrs.theme"

diff --git a/ui/src/components/HyperlinkView.vue b/ui/src/components/HyperlinkView.vue
@@ -1,7 +1,21 @@
 <script lang="ts" setup>
+import type { HyperlinkCard } from '@halo-dev/hyperlink-card';
 import { nodeViewProps, NodeViewWrapper } from '@halo-dev/richtext-editor';
+import { ref, watch } from 'vue';
 
-defineProps(nodeViewProps);
+const props = defineProps(nodeViewProps);
+
+const cardRef = ref<InstanceType<typeof HyperlinkCard> | null>();
+
+watch(
+  () => props.node.attrs.href,
+  (value) => {
+    if (value && cardRef.value) {
+      cardRef.value.href = value;
+      cardRef.value.fetchSiteData();
+    }
+  }
+);
 </script>
 
 <template>
@@ -11,6 +25,7 @@ defineProps(nodeViewProps);
     :class="{ 'hyperlink-rounded-xl hyperlink-ring-1': selected }"
   >
     <hyperlink-card
+      ref="cardRef"
       class="hyperlink-pointer-events-none hyperlink-select-none"
       :href="node.attrs.href"
       :theme="node.attrs.theme"