@xfe-team/json-monaco-editor NPM

@xfe-team/json-monaco-editor

json 在线编辑工具, 通过 iframe 进行外部通信, 当前工具主要解决内部系统对 monaco-editor 打包缓慢的问题, 目前仅支持作为 iframe 使用

Iframe 地址

其中 {VERSION} 请参考 README.md ChangeLog 版本, 并替换, 如: 0.0.1, 0.1.0 等

// react iframe
<iframe src="//zhcdn01.xoyo.com/xassets/iframe/json-monaco-editor/{VERSION}/index.html" frameBorder={0} allowFullScreen />

API

// 组件方法签名
const JsonMonacoEditor = ({ onChange, code, reloadInitialCode, options, ...restProps }) => React.Node;

参数	说明	类型	默认值	必填
onChange	当代码变更时回调	(code: string) => void	-	是
code	代码	string	-	是
reloadInitialCode	重置代码, 当触发快捷键 (重置初始化代码) 时回调	() => void	-	否
height	高度	number \| string	700	否
theme	主题	'vs'\|'vs-dark'	'vs'	否
language	语言	'json'	'vs'	否

其中, restProps 将代理给 react-monaco-editor 组件.

需注意以下固定值, 如字段 value, options, onChange, editorDidMount 将不提供修改, 这是因为内部以使用该字段并进行一些内部逻辑处理:

<ReactMonacoEditor
  height="100vh"
  width="10vw"
  theme="vs"
  language="json"
  {...restProps}
  {...stateProps}
  onChange={handleChange}
  editorDidMount={editorDidMount}
/>

支持语言

const languages = [
  'json',
  'xml',
  'yaml',
  'abap',
  'apex',
  'azcli',
  'bat',
  'cameligo',
  'clojure',
  'coffee',
  'cpp',
  'csharp',
  'csp',
  'css',
  'dockerfile',
  'fsharp',
  'go',
  'graphql',
  'handlebars',
  'html',
  'ini',
  'java',
  'javascript',
  'json',
  'kotlin',
  'less',
  'lua',
  'markdown',
  'mips',
  'msdax',
  'mysql',
  'objective-c',
  'pascal',
  'pascaligo',
  'perl',
  'pgsql',
  'php',
  'postiats',
  'powerquery',
  'powershell',
  'pug',
  'python',
  'r',
  'razor',
  'redis',
  'redshift',
  'restructuredtext',
  'ruby',
  'rust',
  'sb',
  'scheme',
  'scss',
  'shell',
  'solidity',
  'sophia',
  'sql',
  'st',
  'swift',
  'tcl',
  'twig',
];

Iframe

当组件作为 iframe 页面时将发起 postMessage 通知父页面, 目前 postMessage 分别为 onChange, onValidJsonChange, onLoad, 其中 onLoad 在 iframe 加载完后直接触发一次

{
  "namespace": "@xfe-team/json-monaco-editor",
  "event": "onChange",
  "code": "{ \"name\": \"test\" }",
  "uid": "a941816c-7f89-443c-a178-5be32e6835c3"
}

{
  "namespace": "@xfe-team/json-monaco-editor",
  "event": "onValidJsonChange",
  "code": "{ \"name\": \"test\" }",
  "uid": "a941816c-7f89-443c-a178-5be32e6835c3"
}

{
  "namespace": "@xfe-team/json-monaco-editor",
  "event": "onLoad",
  "code": "",
  "uid": "a941816c-7f89-443c-a178-5be32e6835c3"
}

其中: namespace: 命名空间 event: 事件名称 data: 事件数据 uid: 事件 id, 用于区分多个 Iframe 同一类型事件

事件: onChange: 当任意输入时回调 onValidChange: 当输入时候且输入的为合法 JSON 时回调 onLoad: 当作为 Iframe 页面时页面所有资源加载完毕后回调

接受 window.addEventListener('message'), 其中 onLoad 中 data 为当前 editor 所需更新的 props, 如 { value: 'some code' }, 换句话说, 首次传入代码到 editor 是通过 iframe postMessage 进行的, 所以项管限制请查阅 postMessage API

{
  "namespace": "@xfe-team/json-monaco-editor",
  "event": "onLoad",
  "data": {...},
  "uid": "a941816c-7f89-443c-a178-5be32e6835c3"
}

父页面基本用法

  window.addEventListener('message', (e) => {
      const { data } = e;
      if (data && data.namespace === '@xfe-team/json-monaco-editor' && data.event === 'onChange' && data.uid === 'a941816c-7f89-443c-a178-5be32e6835c3') {
          const { code } = data;
          console.log({ code });
      }
  });

快捷键

Description	Windows / Linux	Mac
重置初始化代码	Ctrl + Shift + R	Command + Shift + R
搜索	Ctrl + F	Command + F
增大间距	Tab	Tab
缩小间距	Shift + Tab	Shift + Tab
注释	Ctrl + /	Command + /
反注释	Ctrl + /	Command + /
撤销	Ctrl + Z	Command + Z
反撤销	Ctrl + Y	Shift + Command + Z or Command + Y
增大文字大小	Ctrl + .	Command + .
缩小文字大小	Ctrl + ,	Command + ,
减少间距	Ctrl + [	Command + [
增大间距	Ctrl + ]	Command + ]
向下移动将当前行	Alt + Down	Option + Down
向上移动将当前行	Alt + Up	Option + Up
替换	Ctrl + F	Command + Alt + F
全选	Ctrl + A	Command + A
向下选中	Shift + Down	Shift + Down
向右选中	Shift + Right	Shift + Right
向左选中	Shift + Left	Shift + Left
向上选中	Shift + Up	Shift + Up
选中至末尾	Alt + Shift + Right	Command + Shift + Right
选中至起始	Alt + Shift + Left	Command + Shift + Left
向右对齐	Ctrl + Shift + Right	Option + Right
向左对齐	Ctrl + Shift + Left	Option + Left
向上多选光标	Ctrl + Alt + Up	Command + Alt + Up
向下多选光标	Ctrl + Alt + Down	Command + Alt + Down