diff --git a/index.html b/index.html
deleted file mode 100644
index af300bf..0000000
--- a/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
- playground
-
-
-
-
-
-
diff --git a/package-lock.json b/package-lock.json
index 2f15929..cc3d39f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@vanilla-extract/css": "1.13.0",
- "pinyin-pro": "3.17.0",
- "preact": "10.18.2",
- "preact-render-to-string": "6.2.2"
+ "pinyin-pro": "3.17.0"
},
"devDependencies": {
"@types/node": "20.8.10",
@@ -3127,26 +3125,6 @@
}
}
},
- "node_modules/preact": {
- "version": "10.18.2",
- "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
- "integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/preact"
- }
- },
- "node_modules/preact-render-to-string": {
- "version": "6.2.2",
- "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.2.2.tgz",
- "integrity": "sha512-YDfXQiVeYZutFR8/DpxLSbW3W6b7GgjBExRBxOOqcjrGq5rA9cziitQdNPMZe4RVMSdfBnf4hYqyeLs/KvtIuA==",
- "dependencies": {
- "pretty-format": "^3.8.0"
- },
- "peerDependencies": {
- "preact": ">=10"
- }
- },
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3171,11 +3149,6 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
- "node_modules/pretty-format": {
- "version": "3.8.0",
- "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
- "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="
- },
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5741,19 +5714,6 @@
"yaml": "^1.10.2"
}
},
- "preact": {
- "version": "10.18.2",
- "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
- "integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA=="
- },
- "preact-render-to-string": {
- "version": "6.2.2",
- "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.2.2.tgz",
- "integrity": "sha512-YDfXQiVeYZutFR8/DpxLSbW3W6b7GgjBExRBxOOqcjrGq5rA9cziitQdNPMZe4RVMSdfBnf4hYqyeLs/KvtIuA==",
- "requires": {
- "pretty-format": "^3.8.0"
- }
- },
"prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5766,11 +5726,6 @@
"integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
"dev": true
},
- "pretty-format": {
- "version": "3.8.0",
- "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
- "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="
- },
"punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index 7e8eee9..d136002 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,9 @@
"version": "0.1.0",
"description": "An Obsidian plugin which provides code blocks with features for Chinese learners",
"scripts": {
- "dev": "vite",
"build": "vite build",
"lint": "eslint --ext .ts .",
- "format": "prettier --write \"**/*.ts\""
+ "format": "prettier --write ."
},
"devDependencies": {
"@types/node": "20.8.10",
@@ -22,8 +21,6 @@
},
"dependencies": {
"@vanilla-extract/css": "1.13.0",
- "pinyin-pro": "3.17.0",
- "preact": "10.18.2",
- "preact-render-to-string": "6.2.2"
+ "pinyin-pro": "3.17.0"
}
}
diff --git a/src/main.tsx b/src/main.tsx
index 120af50..d98a566 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,18 +2,6 @@ import { Plugin } from 'obsidian';
import { pinyin } from 'pinyin-pro';
import * as styles from './style.css';
-import { render } from 'preact-render-to-string';
-
-type CharBlock = Readonly<{
- chineseChar: Readonly<{
- text: string;
- horizontalPadding: number;
- }>;
- pinyin: Readonly<{
- text: string;
- horizontalPadding: number;
- }>;
-}>;
const gap = 2;
@@ -21,98 +9,51 @@ const codeBlockProcessor = async (
source: string,
element: HTMLElement,
): Promise => {
- const allData = pinyin(source, { type: 'all' });
-
- const charBlocks: CharBlock[] = [];
+ const pinyinData = pinyin(source, { type: 'all' });
await new Promise((resolve) => {
setTimeout(resolve, 0);
});
- const measureChineseCharWidth = document.createElement('span');
- measureChineseCharWidth.className = styles.measureChineseCharWidth;
- element.appendChild(measureChineseCharWidth);
+ const container = element.createDiv();
+ container.className = styles.container;
- const measurePinyinWidth = document.createElement('span');
- measurePinyinWidth.className = styles.measurePinyinWidth;
- element.appendChild(measurePinyinWidth);
+ const pinyinLine = container.createDiv();
+ pinyinLine.className = styles.pinyinLine;
- for (const data of allData) {
- measureChineseCharWidth.textContent = data.origin;
- const chineseCharWidth =
- measureChineseCharWidth.getBoundingClientRect().width;
+ const chineseCharLine = container.createDiv();
+ chineseCharLine.className = styles.chineseCharLine;
- measurePinyinWidth.textContent = data.pinyin;
- const pinyinWidth = measurePinyinWidth.getBoundingClientRect().width;
+ for (const pinyinDatum of pinyinData) {
+ const pinyinSpan = pinyinLine.createSpan();
+ pinyinSpan.textContent = pinyinDatum.pinyin;
+ const pinyinWidth = pinyinSpan.getBoundingClientRect().width;
- const charBlock: CharBlock =
+ const chineseCharSpan = chineseCharLine.createSpan();
+ chineseCharSpan.textContent = pinyinDatum.origin;
+ const chineseCharWidth = chineseCharSpan.getBoundingClientRect().width;
+
+ const { pinyinPadding, chineseCharPadding } =
pinyinWidth >= chineseCharWidth
? ({
- chineseChar: {
- text: data.origin,
- horizontalPadding:
- (pinyinWidth - chineseCharWidth) / 2 + gap,
- },
- pinyin: {
- text: data.pinyin,
- horizontalPadding: gap,
- },
+ pinyinPadding: `${gap}px`,
+ chineseCharPadding: `${
+ (pinyinWidth - chineseCharWidth) / 2 + gap
+ }px`,
} as const)
: ({
- chineseChar: {
- text: data.origin,
- horizontalPadding: gap,
- },
- pinyin: {
- text: data.pinyin,
- horizontalPadding:
- (chineseCharWidth - pinyinWidth) / 2 + gap,
- },
+ pinyinPadding: `${
+ (chineseCharWidth - pinyinWidth) / 2 + gap
+ }px`,
+ chineseCharPadding: `${gap}px`,
} as const);
- charBlocks.push(charBlock);
- }
-
- const pinyinLine = (
-
- {charBlocks.map(({ pinyin }) => (
-
- {pinyin.text}
-
- ))}
-
- );
-
- const chineseCharLine = (
-
- {charBlocks.map(({ chineseChar }) => (
-
- {chineseChar.text}
-
- ))}
-
- );
+ pinyinSpan.style.paddingLeft = pinyinPadding;
+ pinyinSpan.style.paddingRight = pinyinPadding;
- const el = (
-
- {pinyinLine}
- {chineseCharLine}
-
- );
-
- element.innerHTML = render(el);
+ chineseCharSpan.style.paddingLeft = chineseCharPadding;
+ chineseCharSpan.style.paddingRight = chineseCharPadding;
+ }
};
export default class MyPlugin extends Plugin {
diff --git a/src/playground.tsx b/src/playground.tsx
deleted file mode 100644
index ec9789e..0000000
--- a/src/playground.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { render } from 'preact-render-to-string';
-import { pinyin } from 'pinyin-pro';
-
-const input = '你先来学校,(然后)我们再一起去找老师。';
-const allData = pinyin(input, { type: 'all' });
-
-const app = document.getElementById('app')!;
-
-type CharBlock = Readonly<{
- pinyin: readonly [string, number];
- chineseChar: readonly [string, number];
-}>;
-
-const charBlocks: CharBlock[] = [];
-
-const gap = 2;
-
-for (const data of allData) {
- const charBlock = document.createElement('span');
- charBlock.style.position = 'absolute';
- charBlock.style.visibility = 'hidden';
- charBlock.textContent = data.origin;
- app.appendChild(charBlock);
-
- const chineseCharWidth = charBlock.getBoundingClientRect().width;
-
- charBlock.textContent = data.pinyin;
- const pinyinWidth = charBlock.getBoundingClientRect().width;
-
- charBlocks.push(
- pinyinWidth >= chineseCharWidth
- ? ({
- pinyin: [data.pinyin, gap],
- chineseChar: [
- data.origin,
- (pinyinWidth - chineseCharWidth) / 2 + gap,
- ],
- } as const)
- : ({
- pinyin: [
- data.pinyin,
- (chineseCharWidth - pinyinWidth) / 2 + gap,
- ],
- chineseChar: [data.origin, gap],
- } as const),
- );
-
- app.removeChild(charBlock);
-}
-
-const output = document.createElement('div');
-output.style.position = 'relative';
-
-output.innerHTML = render(
- <>
-
- {charBlocks.map(({ pinyin }) => (
-
- {pinyin[0]}
-
- ))}
-
-
- {charBlocks.map(({ chineseChar }) => (
-
- {chineseChar[0]}
-
- ))}
-
- >,
-);
-
-app.appendChild(output);
diff --git a/src/style.css.ts b/src/style.css.ts
index 3d88d66..4b16897 100644
--- a/src/style.css.ts
+++ b/src/style.css.ts
@@ -1,16 +1,5 @@
import { style } from '@vanilla-extract/css';
-export const measureChineseCharWidth = style({
- position: 'absolute',
- visibility: 'hidden',
-});
-
-export const measurePinyinWidth = style({
- position: 'absolute',
- visibility: 'hidden',
- fontSize: '0.8rem',
-});
-
export const container = style({
position: 'relative',
});