@aglyn/shared-ui-json-编辑器
一个全屏材料UI对话框,用于手工编辑JSON文件,由摩纳哥编辑支持. Beigner把它用于它的"Raw JSON"取景地为一棵节点树. 它主要是一个基石 @aglyn/besigner-ui,并在任何Next.js应用中工作,可以服务摩纳哥的资产.
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/shared-ui-json-editor
同伴依赖性 : react, (中文(简体) ), next 财务报告和审定财务报表 @mui/material。 。 。 . next 由于编辑器装入 next/dynamic 并且只向客户提供.
摩纳哥的资产来自您自己的来源. 包中配置了摩纳哥加载器以读取 /monaco/vs (以 MONACO_VS_PATH并且刻意没有CDN倒置. 复制 monaco-editor/min/vs 进入你的应用程序 public/monaco/vs 目录作为构建的一部分,否则编辑器不会加载.
里面有什么东西
JsonEditor财务报告和审定财务报表JsonEditorProps从根入.JsonEditorProps扩展材料UIDialogProps(这样)open并补充:defaultValue——要编辑的文档,作为值而不是字符串;通过JSON.stringify当对话框打开时进入缓冲器。 道具所申报的类型由CodeMirror道具继承而来,因此一个对象目前需要一个铸件.onSave(event, value)——用解析过的JSON在Savy被按下时调用.onClose(event, reason)—— 说reason实值'backdropClick', (中文(简体) ),'escapeKeyDown', (中文(简体) ),'saveClick'或者说'cancelClick'。 。 。 .validate(value)——返回一条信息来屏蔽保存并显示它;返回任何信息都不允许.title(默认"Raw JSON")和description。 。 。 .
- 值得了解的行为:不解析的文本被保存在键入,在警告中报告,并被块保存。 背景点击不会关闭未保存编辑的对话框 。 输入的缓冲器从不被新设置所覆盖
defaultValue。每次组件挂起时,都会覆盖编辑器. - 子路径模块 :
@aglyn/shared-ui-json-editor/components/monaco-editor(单位:千美元)MonacoEditor, (中文(简体) ),MONACO_VS_PATH和@aglyn/shared-ui-json-editor/components/code-mirror-editor(单位:千美元)CodeMirrorEditor,该对话框默认不会使用 CodeMiror 选项。 摩纳哥模块在装入时配置装载器,以及package.json将它列在sideEffects因为这个原因.
使用量
import { JsonEditor } from '@aglyn/shared-ui-json-editor'
import { useState } from 'react'
export function Example(props: { doc: object; onChange: (doc: unknown) => void }) {
const [open, setOpen] = useState(false)
return (
<>
<button onClick={() => setOpen(true)}>Edit JSON</button>
<JsonEditor
open={open}
defaultValue={props.doc as any}
onClose={() => setOpen(false)}
onSave={(event, value) => props.onChange(value)}
validate={(value) =>
Array.isArray(value) ? 'The document must be an object.' : null
}
/>
</>
)
}
怎样才合适
A 类 shared UI软件包. 这取决于 @aglyn/shared-ui-jsx 财务报告和审定财务报表 @aglyn/shared-data-enums,以及 @aglyn/besigner-ui 取决于它。 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/json-editor 互联网档案馆的存檔,存档日期2014-12-22