Merge pull request #6 from 0918nobita/refactor-using-obsidian-api

Do refactor using Obsidian API
0918nobita · Nov 12, 2023 · 63e2f0a · 63e2f0a
2 parents 9276a91 + 29e1cca
commit 63e2f0a
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -15,22 +15,25 @@ const codeBlockProcessor = async (
         setTimeout(resolve, 0);
     });
 
-    const container = element.createDiv();
-    container.className = styles.container;
+    const container = element.createDiv({
+        cls: styles.container,
+    });
 
-    const pinyinLine = container.createDiv();
-    pinyinLine.className = styles.pinyinLine;
+    const pinyinLine = container.createDiv({
+        cls: styles.pinyinLine,
+    });
 
-    const chineseCharLine = container.createDiv();
-    chineseCharLine.className = styles.chineseCharLine;
+    const chineseCharLine = container.createDiv({
+        cls: styles.chineseCharLine,
+    });
 
     for (const pinyinDatum of pinyinData) {
-        const pinyinSpan = pinyinLine.createSpan();
-        pinyinSpan.textContent = pinyinDatum.pinyin;
+        const pinyinSpan = pinyinLine.createSpan({ text: pinyinDatum.pinyin });
         const pinyinWidth = pinyinSpan.getBoundingClientRect().width;
 
-        const chineseCharSpan = chineseCharLine.createSpan();
-        chineseCharSpan.textContent = pinyinDatum.origin;
+        const chineseCharSpan = chineseCharLine.createSpan({
+            text: pinyinDatum.origin,
+        });
         const chineseCharWidth = chineseCharSpan.getBoundingClientRect().width;
 
         const { pinyinPadding, chineseCharPadding } =