Monaco 编辑器

基本使用

TIP

内置了 light-plus 和 dark-plus 主题

import { Monaco } from "@yl_lowcode/editor";

export default () => {
  return (
    <Monaco
      value={`import { ProButton } from "@yl_lowcode/pro-shineout";

const sleep = () => new Promise((res) => setTimeout(res, 1000));

export default () => {
  return (
    <ProButton type="primary" onClick={sleep}>
      提交
    </ProButton>
  );
};`}
    />
  );
};

Diff 对比

import { MonacoDiff } from "@yl_lowcode/editor";

export default () => {
  return (
    <MonacoDiff
      originalCode={JSON.stringify(
        {
          name: 12,
          age: 10,
        },
        null,
        2
      )}
      modifiedCode={JSON.stringify(
        {
          name1: 120,
          age1: 100,
        },
        null,
        2
      )}
    />
  );
};