From 265709b45719d9a87027acc20dd7a54afcec94ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=BC=C5=9Fra=20=C5=9Eanl=C4=B1bayrak?=
 <b.sanlibayrak@gmail.com>
Date: 2022年7月28日 22:57:48 +0300
Subject: [PATCH] default embed code added for useEmbed example
---
 example/vue3/src/components/useEmbed.vue &#124; 17 ++++++++++++-----
 example/vue3/src/shared/exampleEmbed.js &#124; 4 ++++
 src/useEmbed.ts &#124; 13 +++++++++----
 3 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 example/vue3/src/shared/exampleEmbed.js
diff --git a/example/vue3/src/components/useEmbed.vue b/example/vue3/src/components/useEmbed.vue
index 3d4647b..0d22852 100644
--- a/example/vue3/src/components/useEmbed.vue
+++ b/example/vue3/src/components/useEmbed.vue
@@ -1,14 +1,21 @@
 
 
 <template>
 <div>
 <div>
- <textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
+ <textarea + rows="5" + cols="50" + placeholder="Place embed code here" + v-model="code" +></textarea>
 <button type="button" @click="clear">Clear</button>
 </div>
 <div v-if="isEmbedBlock" v-html="code"></div>
@@ -52,4 +59,4 @@ $white: #fff;
 margin-bottom: 2em;
 }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/example/vue3/src/shared/exampleEmbed.js b/example/vue3/src/shared/exampleEmbed.js
new file mode 100644
index 0000000..9690ed7
--- /dev/null
+++ b/example/vue3/src/shared/exampleEmbed.js
@@ -0,0 +1,4 @@
+const exampleEmbed =
+ '<blockquote><p lang="en" dir="ltr">Canine friends Goose and Luke frolic in the waters of New York&#39;s Goodyear Lake in this image <a href="https://twitter.com/hashtag/ShotOnSnapdragon?src="hash&amp;ref_src=twsrc%5Etfw"">#ShotOnSnapdragon</a>. Paid content for <a href="https://twitter.com/Snapdragon?ref_src="twsrc%5Etfw"">@Snapdragon</a> <a href="https://t.co/iwOc2ym6IL">pic.twitter.com/iwOc2ym6IL</a> </p>&mdash; National Geographic (@NatGeo) <a href="https://twitter.com/NatGeo/status/1552687605170438145?ref_src="twsrc%5Etfw"">July 28, 2022</a> </blockquote> ';
+
+export default exampleEmbed;
diff --git a/src/useEmbed.ts b/src/useEmbed.ts
index adeb371..4fe3615 100644
--- a/src/useEmbed.ts
+++ b/src/useEmbed.ts
@@ -1,4 +1,4 @@
-import { ref, computed, watch, Ref } from 'vue';
+import { ref, computed, watch, Ref, onMounted } from 'vue';
 
 declare global {
 interface Window {
@@ -78,10 +78,15 @@ const useEmbed = (code: any = null) => {
 injectedScripts.value = [];
 };
 
+ onMounted(() => {
+ if (embedCode.value) {
+ injectScript({ id: 'id', src: getEmbedScriptSrc(embedCode.value) });
+ }
+ })
+
 watch(code, newValue => {
 if (newValue) {
- const src = getEmbedScriptSrc(newValue);
- injectScript({ id: 'id', src });
+ injectScript({ id: 'id', src: getEmbedScriptSrc(newValue) });
 }
 });
 
@@ -91,4 +96,4 @@ const useEmbed = (code: any = null) => {
 };
 };
 
-export default useEmbed;
\ No newline at end of file
+export default useEmbed;
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/jsdeveloperr/vue3-use-hooks/pull/1.patch">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/jsdeveloperr/vue3-use-hooks/pull/1.patch" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>