use innerHTML property

src/masto/toot.ts

@@ -20,17 +20,6 @@ export function resolveCustomEmoji(
   });
 }
 
-export function appliedCustomEmoji(
-  target: { innerHTML: string },
-  content: string,
-  emojis?: mastodon.v1.CustomEmoji[],
-) {
-  createRenderEffect(() => {
-    const result = emojis ? resolveCustomEmoji(content, emojis) : content;
-    target.innerHTML = result;
-  });
-}
-
 export function hasCustomEmoji(s: string) {
   return CUSTOM_EMOJI_REGEX.test(s);
 }

src/profiles/Profile.tsx

@@ -171,10 +171,6 @@ const Profile: Component = () => {
     ),
   );
 
-  const useSessionDisplayName = (e: HTMLElement) => {
-    createRenderEffect(() => (e.innerHTML = sessionDisplayName()));
-  };
-
   const toggleSubscribeHome = async (event: Event) => {
     const client = session().client;
     if (!session().account) return;
@@ -218,9 +214,7 @@ const Profile: Component = () => {
               style={{
                 visibility: scrolledPastBanner() ? undefined : "hidden",
               }}
-              ref={(e: HTMLElement) =>
-                createRenderEffect(() => (e.innerHTML = displayName()))
-              }
+              innerHTML={displayName()}
             ></Title>
 
             <IconButton
@@ -253,7 +247,7 @@ const Profile: Component = () => {
                 <Avatar src={session().account?.inf?.avatar} />
               </ListItemAvatar>
               <ListItemText secondary={"Default account"}>
-                <span ref={useSessionDisplayName}></span>
+                <span innerHTML={sessionDisplayName()}></span>
               </ListItemText>
               {/* <ArrowRight /> // for future */}
             </MenuItem>
@@ -384,7 +378,7 @@ const Profile: Component = () => {
                     : undefined
               }
             >
-              <span ref={useSessionDisplayName}></span>
+              <span innerHTML={sessionDisplayName()}></span>
               <span>'s Home</span>
             </ListItemText>
 
@@ -419,9 +413,7 @@ const Profile: Component = () => {
                 </Show>
                 <Body2
                   component="span"
-                  ref={(e: HTMLElement) =>
-                    createRenderEffect(() => (e.innerHTML = displayName()))
-                  }
+                  innerHTML={displayName()}
                   aria-label="Display name"
                 ></Body2>
               </div>
@@ -464,9 +456,7 @@ const Profile: Component = () => {
           <section
             class="description"
             aria-label={`${profile()?.displayName || "the user"}'s description`}
-            ref={(e) =>
-              createRenderEffect(() => (e.innerHTML = description() || ""))
-            }
+            innerHTML={description() || ""}
           ></section>
 
           <table
@@ -484,11 +474,7 @@ const Profile: Component = () => {
                           <Verified />
                         </Show>
                       </td>
-                      <td
-                        ref={(e) => {
-                          createRenderEffect(() => (e.innerHTML = item.value));
-                        }}
-                      ></td>
+                      <td innerHTML={item.value}></td>
                     </tr>
                   );
                 }}

src/timelines/RegularToot.tsx

@@ -66,9 +66,7 @@ export function findRootToot(element: HTMLElement) {
     current = current.parentElement;
   }
   if (!current) {
-    throw Error(
-      `the element must be placed under a element with .RegularToot`,
-    );
+    throw Error(`the element must be placed under a element with .RegularToot`);
   }
   return current;
 }
@@ -145,8 +143,8 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
     <>
       <article
         classList={{
-          "RegularToot": true,
-          "expanded": props.evaluated,
+          RegularToot: true,
+          expanded: props.evaluated,
           "thread-top": props.thread === "top",
           "thread-mid": props.thread === "middle",
           "thread-btm": props.thread === "bottom",
@@ -160,14 +158,10 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
           <div class="retoot-grp">
             <BoostIcon />
             <Body2
-              ref={(e: { innerHTML: string }) => {
-                createRenderEffect(() => {
-                  e.innerHTML = resolveCustomEmoji(
+              innerHTML={resolveCustomEmoji(
                 status().account.displayName,
                 toot().emojis,
-                  );
-                });
-              }}
+              )}
             ></Body2>
             <span>boosts</span>
           </div>

src/timelines/TootBottomSheet.tsx

@@ -261,13 +261,7 @@ const TootBottomSheet: Component = (props) => {
           >
             <BackButton color="inherit" />
             <Title component="div" class="name" use:solid-styled>
-              <span
-                ref={(e: HTMLElement) =>
-                  createRenderEffect(
-                    () => (e.innerHTML = tootDisplayName() ?? "Someone"),
-                  )
-                }
-              ></span>
+              <span innerHTML={tootDisplayName() ?? "Someone"}></span>
               <span>'s toot</span>
             </Title>
           </Toolbar>

src/timelines/TootComposer.tsx

@@ -349,15 +349,10 @@ const TootComposer: Component<{
               </ListItemAvatar>
               <ListItemText secondary={"Default account"}>
                 <span
-                  ref={(e) => {
-                    createRenderEffect(() => {
-                      const inf = session()?.account.inf;
-                      return (e.innerHTML = resolveCustomEmoji(
-                        inf?.displayName || "",
-                        inf?.emojis ?? [],
-                      ));
-                    });
-                  }}
+                  innerHTML={resolveCustomEmoji(
+                    session()?.account.inf?.displayName || "",
+                    session()?.account.inf?.emojis ?? [],
+                  )}
                 ></span>
               </ListItemText>
             </MenuItem>

src/timelines/toots/TootAuthorGroup.tsx

@@ -31,14 +31,10 @@ function TootAuthorGroup(
           </Show>
           <Body2
             component="span"
-            ref={(e: { innerHTML: string }) => {
-              createRenderEffect(() => {
-                e.innerHTML = resolveCustomEmoji(
+            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
+            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
+          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(
+                      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(
+                      innerHTML={resolveCustomEmoji(
                         option().title,
                         option().emojis,
-                            )),
-                        )
-                      }
+                      )}
                     ></span>
                   </ListItemText>