wip

src/code-block-processor/code-block.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+ import { onMount } from 'svelte';
+
+ import { type Segment, splitSentenceIntoSegments } from './split-sentence';
+
+ import * as styles from './style.css';
+
+ export let source: string;
+
+ let segments: Segment[] = [];
+
+ onMount(() => {
+ segments = splitSentenceIntoSegments(source.trim());
+ });
+</script>
+
+<div lang="zh-CN" class={styles.container}>
+ <div aria-hidden="true" class={styles.pinyinLine}>
+ <!-- hidden blocks -->
+ </div>
+ <div class={styles.zhCharLine}>
+ {#each segments as segment}
+ {#if segment.type === 'zh'}
+ <!-- zh blocks -->
+ {segment.zhChars}
+ {:else}
+ <span class={styles.visibleNonZhBlock}>{segment.nonZhChars}</span>
+ {/if}
+ {/each}
+ </div>
+</div>

src/playground.ts

@@ -1,5 +1,7 @@
 import { type HanziWriterOptions, default as HW } from 'hanzi-writer';
 
+import CodeBlock from './code-block-processor/code-block.svelte';
+
 const hwOptions: Partial<HanziWriterOptions> = {
  width: 100,
  height: 100,
@@ -31,3 +33,13 @@ btn.addEventListener('click', async () => {
 
  await c2Writer.animateCharacter();
 });
+
+const app = document.createElement('div');
+document.body.appendChild(app);
+
+new CodeBlock({
+ target: app,
+ props: {
+ source: '你好！初次见面',
+ },
+});

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;

vite.config.ts

@@ -1,3 +1,4 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import { defineConfig } from 'vite';
 
@@ -20,6 +21,8 @@ export default defineConfig({
  },
  },
  plugins: [
+ svelte(),
+
  vanillaExtractPlugin({
  identifiers: ({ hash }) => `zhongwenBlock_${hash}`,
  }),