=> {
- const pinyinSpanStyle: PinyinSpanStyle = settings.alwaysDisplayPinyin
- ? 'alwaysDisplay'
- : 'displayOnHover';
-
- const container = new Container(element);
-
- const segments = splitSentenceIntoSegments(source.trim());
-
- for (const segment of segments) {
- if (segment.type === 'nonZh') {
- container.appendNonZhSegment(segment);
- continue;
- }
-
- const zhCharBlocks = layoutMemo.get(segment.zhChars);
-
- if (zhCharBlocks === undefined) {
- await container.appendAndMemorizeZhSegment({
- zhSegment: segment,
- pinyinSpanStyle,
- layoutMemo,
- });
- continue;
- }
-
- container.appendMemorizedZhSegment({ zhCharBlocks, pinyinSpanStyle });
- }
-};
diff --git a/src/code-block-processor/style.css.ts b/src/code-block-processor/style.css.ts
deleted file mode 100644
index 570fc3a..0000000
--- a/src/code-block-processor/style.css.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const container = style({
- position: 'relative',
- selectors: {
- [`.cm-preview-code-block &`]: {
- marginTop: '0.5rem',
- },
- },
-});
-
-export const pinyinLine = style({
- position: 'absolute',
- top: '0',
- left: '0',
- lineHeight: '2.7rem',
- zIndex: '0',
-});
-
-export const hiddenZhBlock = style({
- display: 'inline-block',
- position: 'relative',
-});
-
-export const hiddenZhChar = style({
- opacity: '0',
-});
-
-export const hiddenNonZh = style({
- opacity: '0',
- whiteSpace: 'pre',
-});
-
-export const pinyin = {
- base: style({
- position: 'absolute',
- top: '-1.3rem',
- left: '0',
- userSelect: 'none',
- whiteSpace: 'nowrap',
- fontSize: '0.8rem',
- }),
-
- displayOnHover: style({
- transition: 'opacity .3s ease',
- opacity: '0',
- selectors: {
- [`${container}:has(*:hover) &`]: {
- opacity: '1',
- },
- },
- }),
-};
-
-export const zhCharLine = style({
- position: 'relative',
- lineHeight: '2.7rem',
- zIndex: '1',
-});
-
-export const visibleZhBlock = style({
- display: 'inline-block',
-});
-
-export const visibleNonZhBlock = style({
- whiteSpace: 'pre',
-});
diff --git a/src/code-block-processor/zh-char-line.ts b/src/code-block-processor/zh-char-line.ts
deleted file mode 100644
index 548704d..0000000
--- a/src/code-block-processor/zh-char-line.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as styles from './style.css';
-
-export class ZhCharLine {
- #el: HTMLDivElement;
-
- constructor(container: HTMLDivElement) {
- this.#el = container.createDiv({ cls: styles.zhCharLine });
- }
-
- appendZhBlock({
- zhChar,
- zhCharPadding,
- }: {
- zhChar: string;
- zhCharPadding: number;
- }): void {
- const zhBlock = this.#el.createDiv({
- cls: styles.visibleZhBlock,
- text: zhChar,
- });
-
- zhBlock.style.paddingLeft =
- zhBlock.style.paddingRight = `${zhCharPadding}px`;
- }
-
- appendNonZhSegment({ nonZhChars }: { nonZhChars: string }): void {
- this.#el.createSpan({
- cls: styles.visibleNonZhBlock,
- text: nonZhChars,
- });
- }
-}
diff --git a/src/code-block.svelte b/src/code-block.svelte
new file mode 100644
index 0000000..bc4997e
--- /dev/null
+++ b/src/code-block.svelte
@@ -0,0 +1,57 @@
+
+
+
+
+ {#each segments as segment}
+ {#if segment.type === 'zh'}
+ {#await getPinyin(segment.zhChars) then pinyinData}
+ {#each pinyinData as { pinyin, origin: zhChar }}{zhChar}{/each}{/await}
+ {:else}
+ {segment.nonZhChars}
+ {/if}
+ {/each}
+
+
+
+
diff --git a/src/getPinyin.ts b/src/getPinyin.ts
new file mode 100644
index 0000000..17a11c9
--- /dev/null
+++ b/src/getPinyin.ts
@@ -0,0 +1,27 @@
+import * as PinyinPro from 'pinyin-pro';
+
+/** 非同期関数をメモ化する */
+const once = (fn: (arg: T) => Promise): ((arg: T) => Promise) => {
+ const memo = new Map>();
+
+ return async (arg: T): Promise => {
+ const memorizedPromise = memo.get(arg);
+
+ if (memorizedPromise === undefined) {
+ const promise = fn(arg);
+ memo.set(arg, promise);
+ return promise;
+ }
+
+ return memorizedPromise;
+ };
+};
+
+export type PinyinData = ReturnType;
+
+export const getPinyin = once(
+ (sentence: string) =>
+ new Promise((resolve) => {
+ resolve(PinyinPro.pinyin(sentence, { type: 'all' }));
+ }),
+);
diff --git a/src/global.css b/src/global.css
new file mode 100644
index 0000000..0e32366
--- /dev/null
+++ b/src/global.css
@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');
diff --git a/src/main.ts b/src/main.ts
index 4219e29..ec42c19 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,3 +1,5 @@
+import './global.css';
+
import { PluginImpl } from './plugin-impl';
export default PluginImpl;
diff --git a/src/playground.ts b/src/playground.ts
new file mode 100644
index 0000000..a18d55b
--- /dev/null
+++ b/src/playground.ts
@@ -0,0 +1,13 @@
+import './global.css';
+
+import CodeBlock from './code-block.svelte';
+
+const app = document.createElement('div');
+document.body.appendChild(app);
+
+new CodeBlock({
+ target: app,
+ props: {
+ source: '你好！初次见面',
+ },
+});
diff --git a/src/plugin-impl.ts b/src/plugin-impl.ts
index 0040338..e6d5f98 100644
--- a/src/plugin-impl.ts
+++ b/src/plugin-impl.ts
@@ -1,21 +1,10 @@
import * as Obsidian from 'obsidian';
-import { codeBlockProcessor, type LayoutMemo } from './code-block-processor';
+import CodeBlock from './code-block.svelte';
import type { Plugin } from './plugin';
import { type Settings, defaultSettings } from './settings';
import { SettingTabImpl } from './setting-tab-impl';
-const domReady = (): Promise =>
- new Promise((resolve) => {
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', () => {
- resolve();
- });
- } else {
- resolve();
- }
- });
-
export class PluginImpl extends Obsidian.Plugin implements Plugin {
settings!: Settings;
@@ -28,19 +17,13 @@ export class PluginImpl extends Obsidian.Plugin implements Plugin {
this.addSettingTab(new SettingTabImpl(this.app, this));
- const layoutMemo: LayoutMemo = new Map();
-
this.registerMarkdownCodeBlockProcessor(
'zh-cn',
async (source, element) => {
- await domReady();
-
- await codeBlockProcessor(
- source,
- element,
- this.settings,
- layoutMemo,
- );
+ new CodeBlock({
+ target: element,
+ props: { source },
+ });
},
);
}
diff --git a/src/code-block-processor/split-sentence.ts b/src/split-sentence.ts
similarity index 100%
rename from src/code-block-processor/split-sentence.ts
rename to src/split-sentence.ts
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..62b0ef3
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/vite-plugin-svelte').Options} */
+const config = {
+ preprocess: vitePreprocess(),
+};
+
+export default config;
diff --git a/vite.config.ts b/vite.config.ts
index 70764ee..6e9b2e7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,4 @@
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';
export default defineConfig({
@@ -19,9 +19,5 @@ export default defineConfig({
external: ['obsidian'],
},
},
- plugins: [
- vanillaExtractPlugin({
- identifiers: ({ hash }) => `zhongwenBlock_${hash}`,
- }),
- ],
+ plugins: [svelte()],
});