REAL SHOWCASE SOURCEplain-text-editor
1 个文件 · 36 行 · TypeScript
// ===== showcase/src/examples/components/plain_text_editor.ts ===== import { PlainTextEditorController, RenderPageHeader, RenderPlainTextEditor, RenderStackPanel, RenderText,} from 'ds-ui' const sample = `{ "name": "ds-ui", "runtime": "Canvas 2D", "features": [ "retained render tree", "incremental repaint", "virtualized data controls" ], "showcase": true}` export function createPlainTextEditorExample(): RenderStackPanel { const status = new RenderText('JSON · 可编辑 · 支持折叠、行号、选择与撤销') const controller = new PlainTextEditorController({ value: sample, language: 'json', onDocumentChange: change => { status.text = `JSON · revision ${change.revision} · 内容已更新` }, }) const editor = new RenderPlainTextEditor({ controller, fontSize: 14, lineHeight: 22, folding: true }) const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'PlainTextEditor 文本编辑器', description: '面向日志、配置和大文本场景的 Canvas 原生编辑器。' })) panel.addChild(editor, 1) panel.addChild(status) panel.padding = 18 return panel}