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}