use innerHTML property

src/timelines/toots/TootAuthorGroup.tsx

@@ -31,14 +31,10 @@ function TootAuthorGroup(
           </Show>
           <Body2
             component="span"
-            ref={(e: { innerHTML: string }) => {
-              createRenderEffect(() => {
-                e.innerHTML = resolveCustomEmoji(
-                  toot().account.displayName,
-                  toot().account.emojis,
-                );
-              });
-            }}
+            innerHTML={resolveCustomEmoji(
+              toot().account.displayName,
+              toot().account.emojis,
+            )}
           />
         </div>
         <time datetime={toot().createdAt}>

src/timelines/toots/TootContent.tsx

@@ -81,15 +81,13 @@ const TootContent: Component<TootContentProps> = (oprops) => {
       <Show when={props.sensitive}>
         <div>
           <span
-            ref={(ref) => {
-              createRenderEffect(() => {
-                ref.innerHTML = props.spoilerText
-                  ? props.emojis
-                    ? resolveCustomEmoji(props.spoilerText, props.emojis)
-                    : props.spoilerText
-                  : "";
-              });
-            }}
+            innerHTML={
+              props.spoilerText
+                ? props.emojis
+                  ? resolveCustomEmoji(props.spoilerText, props.emojis)
+                  : props.spoilerText
+                : ""
+            }
           ></span>
           <Button onClick={props.onToggleReveal}>{t("cw")}</Button>
         </div>
@@ -97,14 +95,12 @@ const TootContent: Component<TootContentProps> = (oprops) => {
       <Show when={shouldRevealContent()}>
         <div
           class="content"
-          ref={(ref) =>
-            createRenderEffect(() => {
-              ref.innerHTML = props.source
-                ? props.emojis
-                  ? resolveCustomEmoji(props.source, props.emojis)
-                  : props.source
-                : "";
-            })
+          innerHTML={
+            props.source
+              ? props.emojis
+                ? resolveCustomEmoji(props.source, props.emojis)
+                : props.source
+              : ""
           }
         ></div>
       </Show>

src/timelines/toots/TootPoll.tsx

@@ -20,10 +20,7 @@ import {
   ListItemText,
   Radio,
 } from "@suid/material";
-import {
-  formatDistance,
-  isBefore,
-} from "date-fns";
+import { formatDistance, isBefore } from "date-fns";
 import { useTimeSource } from "~platform/timesrc";
 import { useDateFnLocale } from "~platform/i18n";
 import TootPollDialog from "./TootPollDialog";
@@ -31,13 +28,13 @@ import { ANIM_CURVE_STD } from "~material/theme";
 import { useTootEnv } from "../RegularToot";
 
 type TootPollProps = {
-  value: mastodon.v1.Poll
-  status: mastodon.v1.Status
+  value: mastodon.v1.Poll;
+  status: mastodon.v1.Status;
 };
 
 const TootPoll: Component<TootPollProps> = (props) => {
   let list: HTMLUListElement;
-  const {vote}= useTootEnv()
+  const { vote } = useTootEnv();
 
   const now = useTimeSource();
   const dateFnLocale = useDateFnLocale();
@@ -46,7 +43,7 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
   const [initialVote, setInitialVote] = createSignal(0);
 
-  const poll = () => props.value
+  const poll = () => props.value;
 
   const isShowResult = () => {
     const n = mustShowResult();
@@ -118,14 +115,10 @@ const TootPoll: Component<TootPollProps> = (props) => {
                 >
                   <ListItemText>
                     <span
-                      ref={(e) =>
-                        createRenderEffect(() => {
-                          e.innerHTML = resolveCustomEmoji(
-                            option().title,
-                            option().emojis,
-                          );
-                        })
-                      }
+                      innerHTML={resolveCustomEmoji(
+                        option().title,
+                        option().emojis,
+                      )}
                     ></span>
                   </ListItemText>
 

src/timelines/toots/TootPollDialog.tsx

@@ -96,15 +96,10 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
                 >
                   <ListItemText>
                     <span
-                      ref={(e) =>
-                        createRenderEffect(
-                          () =>
-                            (e.innerHTML = resolveCustomEmoji(
-                              option().title,
-                              option().emojis,
-                            )),
-                        )
-                      }
+                      innerHTML={resolveCustomEmoji(
+                        option().title,
+                        option().emojis,
+                      )}
                     ></span>
                   </ListItemText>