feat: MonacoEditor

app.py

@@ -181,6 +181,9 @@ pro_menu_items = [{
     "children": [{
         "label": get_text("WebSandbox", "WebSandbox 网页沙盒"),
         "key": "web_sandbox"
+    }, {
+        "label": get_text("MonacoEditor", "MonacoEditor 代码编辑器"),
+        "key": "monaco_editor"
     }]
 }]
 

components/antd/statistic/README-zh_CN.md

@@ -5,4 +5,4 @@ Display statistic number. See [Ant Design](https://ant.design/components/statist
 ## Examples
 
 <demo name="basic"></demo>
-<demo name="countdown" title="Countdown"></demo>
+<demo name="timer" title="Timer"></demo>

components/antd/statistic/README.md

@@ -5,4 +5,4 @@ Display statistic number. See [Ant Design](https://ant.design/components/statist
 ## Examples
 
 <demo name="basic"></demo>
-<demo name="countdown" title="Countdown"></demo>
+<demo name="timer" title="Timer"></demo>

components/antd/statistic/demos/{countdown.py → timer.py}

@@ -9,16 +9,24 @@ with gr.Blocks() as demo:
         with antd.ConfigProvider():
             with antd.Row(gutter=20):
                 with antd.Col(span=12):
-                    antd.Statistic.Countdown(
+                    antd.Statistic.Timer(
+                        type="countup",
+                        value=lambda: time.time() - 60 * 60 * 24 * 2,
+                        title="Countup")
+                with antd.Col(span=12):
+                    antd.Statistic.Timer(
+                        type="countdown",
                         value=lambda: time.time() + 60 * 60 * 24 * 2,
                         title="Countdown")
                 with antd.Col(span=12):
-                    antd.Statistic.Countdown(
+                    antd.Statistic.Timer(
+                        type="countdown",
                         value=lambda: time.time() + 60 * 60 * 24 * 2,
                         title="Million Seconds",
                         format="HH:mm:ss:SSS")
                 with antd.Col(span=12):
-                    antd.Statistic.Countdown(
+                    antd.Statistic.Timer(
+                        type="countdown",
                         value=lambda: time.time() + 60 * 60 * 24 * 2,
                         title="Day Level",
                         format="D-H-m-s")

components/antd/tag/demos/basic.py

@@ -12,7 +12,7 @@ with gr.Blocks() as demo:
                         "Link",
                         href=
                         "https://github.com/ant-design/ant-design/issues/1862")
-                antd.Tag('Closeable', close_icon=True)
+                antd.Tag('Closable', close_icon=True)
                 with antd.Tag():
                     with ms.Slot("closeIcon"):
                         antd.Icon("CloseCircleOutlined",

components/antdx/x_provider/README-zh_CN.md

@@ -1,6 +1,6 @@
 # XProvider
 
-Provide a uniform configuration support for x components.. See [Ant Design X](https://x.ant.design/components/x-provider/) for more information.
+Provide a uniform configuration support for x components. See [Ant Design X](https://x.ant.design/components/x-provider/) for more information.
 
 The `XProvider` extends the `ConfigProvider` from antd and provides global configuration for components in `@ant-design/x`.
 

components/antdx/x_provider/README.md

@@ -1,6 +1,6 @@
 # XProvider
 
-Provide a uniform configuration support for x components.. See [Ant Design X](https://x.ant.design/components/x-provider/) for more information.
+Provide a uniform configuration support for x components. See [Ant Design X](https://x.ant.design/components/x-provider/) for more information.
 
 The `XProvider` extends the `ConfigProvider` from antd and provides global configuration for components in `@ant-design/x`.
 

components/pro/monaco_editor/README-zh_CN.md

@@ -0,0 +1,88 @@
+# MonacoEditor
+
+代码编辑器，[Monaco Editor](https://microsoft.github.io/monaco-editor/) 的 Gradio 实现，基于 [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react) 集成。
+
+## 示例
+
+### 基本使用
+
+<demo name="basic"></demo>
+
+### Diff 编辑器
+
+<demo name="diff_editor"></demo>
+
+### Monaco Editor 配置项
+
+可以直接传入 Monaco Editor 的配置项 [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html)。
+
+在这个示例中，我们关闭了编辑器的`minimap`与 `lineNumbers`。
+
+<demo name="monaco_editor_options"></demo>
+
+### 通过 JavaScript 定制化配置
+
+如果你还需要更进一步地操作 Monaco Editor，你可以通过传入 JavaScript 函数字符串来进一步定制化配置。
+
+<demo name="javascript_customize"></demo>
+
+## API 
+
+### 属性
+
+#### MonacoEditor
+
+| 属性             | 类型                  | 默认值                 | 描述                                                                                                                                                  |
+| ---------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value            | `str\| None`          | None                   | 编辑器的值。                                                                                                                                          |
+| language         | `str\| None`          | None                   | 编辑器的语言（monaco-editor [支持](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)的所有语言）。                            |
+| line             | `number\| None`       | None                   | 垂直滚动编辑器到指定行。                                                                                                                              |
+| read_only        | `bool\| None`         | None                   | 编辑器是否只读。                                                                                                                                      |
+| loading          | `str\| None`          | 'Editor is loading...' | 编辑器初始化加载时的加载文案。                                                                                                                        |
+| options          | `dict \| None`        | None                   | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
+| overrideServices | `dict \| None`        | None                   | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html)                           |
+| height           | `str \| float \| int` | 400                    | 组件的高度，如果值为数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                                                 |
+| before_mount     | `str \| None`         | None                   | 传入 JavaScript 函数字符串，在编辑器加载前执行，可以获取到 `monaco` 对象。                                                                            |
+| after_mount      | `str \| None`         | None                   | 传入 JavaScript 函数字符串，在编辑器加载后执行，可以获取到`editor`对象与`monaco` 对象。                                                               |
+
+#### MonacoEditor.DiffEditor
+
+| 属性              | 类型                  | 默认值                 | 描述                                                                                                                                                  |
+| ----------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value             | `str\| None`          | None                   | 修改后的源的值（右侧）。                                                                                                                              |
+| original          | `str\| None`          | None                   | 原始源的值（左侧）。                                                                                                                                  |
+| language          | `str\| None`          | None                   | 编辑器的语言（monaco-editor [支持](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages)的所有语言）。                            |
+| original_language | `str\| None`          | None                   | 单独指定原始源的语言。��则，它将获取 language 属性的值。                                                                                              |
+| modified_language | `str\| None`          | None                   | 单独指定修改后的源的语言。否则，它将获取 language 属性的值。                                                                                          |
+| line              | `number\| None`       | None                   | 垂直滚动编辑器到指定行。                                                                                                                              |
+| read_only         | `bool\| None`         | None                   | 编辑器是否只读。                                                                                                                                      |
+| loading           | `str\| None`          | 'Editor is loading...' | 编辑器初始化加载时的加载文案。                                                                                                                        |
+| options           | `dict \| None`        | None                   | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
+| overrideServices  | `dict \| None`        | None                   | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html)                           |
+| height            | `str \| float \| int` | 400                    | 组件的高度，如果值为数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                                                 |
+| before_mount      | `str \| None`         | None                   | 传入 JavaScript 函数字符串，在编辑器加载前执行，可以获取到 `monaco` 对象。                                                                            |
+| after_mount       | `str \| None`         | None                   | 传入 JavaScript 函数字符串，在编辑器加载后执行，可以获取到`editor`对象与`monaco` 对象。                                                               |
+
+### 事件
+
+| 事件                                                              | 描述                                     |
+| ----------------------------------------------------------------- | ---------------------------------------- |
+| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).mount(fn, ···)`    | 当编辑器加载完成时触发。                 |
+| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).change(fn, ···)`   | 当编辑器值改变时触发。                   |
+| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).validate(fn, ···)` | 当编辑器触发校验并且校错误记存在时触发。 |
+
+**注：** 根据 [monaco-editor](https://microsoft.github.io/monaco-editor/)，只有具备丰富智能感知的语言才会触发 validate 事件。
+
+- TypeScript
+- JavaScript
+- CSS
+- LESS
+- SCSS
+- JSON
+- HTML
+
+### 插槽
+
+```python
+SLOTS=['loading']
+```

components/pro/monaco_editor/README.md

@@ -0,0 +1,88 @@
+# MonacoEditor
+
+Code editor, Gradio implementation of [Monaco Editor](https://microsoft.github.io/monaco-editor/), integrated based on [@monaco-editor/react](https://github.com/suren-atoyan/monaco-react).
+
+## Examples
+
+### Basic Usage
+
+<demo name="basic"></demo>
+
+### Diff Editor
+
+<demo name="diff_editor"></demo>
+
+### Monaco Editor Options
+
+You can directly pass in Monaco Editor configuration options [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html).
+
+In this example, we disable the `minimap` and `lineNumbers` of the editor.
+
+<demo name="monaco_editor_options"></demo>
+
+### Customization via JavaScript
+
+If you need further customization of Monaco Editor, you can pass in JavaScript function strings for more advanced configuration.
+
+<demo name="javascript_customize"></demo>
+
+## API
+
+### Props
+
+#### MonacoEditor
+
+| Attribute        | Type                  | Default                | Description                                                                                                                                           |
+| ---------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value            | `str\| None`          | None                   | The value of the editor.                                                                                                                              |
+| language         | `str\| None`          | None                   | The language of the editor (all languages [supported](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) by monaco-editor).    |
+| line             | `number\| None`       | None                   | Vertically scroll the editor to the specified line.                                                                                                   |
+| read_only        | `bool\| None`         | None                   | Whether the editor is read-only.                                                                                                                      |
+| loading          | `str\| None`          | 'Editor is loading...' | The loading text when the editor is initializing.                                                                                                     |
+| options          | `dict \| None`        | None                   | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
+| overrideServices | `dict \| None`        | None                   | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html)                           |
+| height           | `str \| float \| int` | 400                    | The height of the component. If the value is a number, it is specified in pixels. If a string is passed, it is specified in CSS units.                |
+| before_mount     | `str \| None`         | None                   | Pass in a JavaScript function string to execute before the editor loads, which can access the `monaco` object.                                        |
+| after_mount      | `str \| None`         | None                   | Pass in a JavaScript function string to execute after the editor loads, which can access the `editor` object and `monaco` object.                     |
+
+#### MonacoEditor.DiffEditor
+
+| Property          | Type                  | Default                | Description                                                                                                                                           |
+| ----------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value             | `str\| None`          | None                   | The modified source (right one) value.                                                                                                                |
+| original          | `str\| None`          | None                   | The original source (left one) value.                                                                                                                 |
+| language          | `str\| None`          | None                   | The language of the editor (all languages [supported](https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages) by monaco-editor).    |
+| original_language | `str\| None`          | None                   | Specifies the language of the original source separately. Otherwise, it will take the value of the language property.                                 |
+| modified_language | `str\| None`          | None                   | Specifies the language of the modified source separately. Otherwise, it will take the value of the language property.                                 |
+| line              | `number\| None`       | None                   | Vertically scroll the editor to the specified line.                                                                                                   |
+| read_only         | `bool\| None`         | None                   | Whether the editor is read-only.                                                                                                                      |
+| loading           | `str\| None`          | 'Editor is loading...' | The loading text when the editor is initializing.                                                                                                     |
+| options           | `dict \| None`        | None                   | [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html) |
+| overrideServices  | `dict \| None`        | None                   | [IEditorOverrideServices](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOverrideServices.html)                           |
+| height            | `str \| float \| int` | 400                    | The height of the component. If the value is a number, it is specified in pixels. If a string is passed, it is specified in CSS units.                |
+| before_mount      | `str \| None`         | None                   | Pass in a JavaScript function string to execute before the editor loads, which can access the `monaco` object.                                        |
+| after_mount       | `str \| None`         | None                   | Pass in a JavaScript function string to execute after the editor loads, which can access the `editor` object and `monaco` object.                     |
+
+### Events
+
+| Event                                                             | Description                                                            |
+| ----------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).mount(fn, ···)`    | Triggered when the editor is mounted.                                  |
+| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).change(fn, ···)`   | Triggered when the editor value changes.                               |
+| `pro.(MonacoEditor \| MonacoEditor.DiffEditor).validate(fn, ···)` | Triggered when the editor triggers validation and error markers exist. |
+
+**Note:** According to [monaco-editor](https://microsoft.github.io/monaco-editor/), only languages with rich IntelliSense will trigger the validate event.
+
+- TypeScript
+- JavaScript
+- CSS
+- LESS
+- SCSS
+- JSON
+- HTML
+
+### Slots
+
+```python
+SLOTS=['loading']
+```

components/pro/monaco_editor/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

components/pro/monaco_editor/demos/basic.py

@@ -0,0 +1,33 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+
+def change(editor_value):
+    print(editor_value)
+
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    editor = pro.MonacoEditor(
+        value="""import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.MonacoEditor(
+        value="Hello World",
+        height=400,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()
+""",
+        language="python",
+        height=400,
+    )
+    editor.change(fn=change, inputs=[editor])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/monaco_editor/demos/diff_editor.py

@@ -0,0 +1,43 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+
+def change(editor_value):
+    print(editor_value)
+
+
+def readonly_change(switch_value):
+    return gr.update(read_only=switch_value)
+
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider(
+), ms.AutoLoading():
+    with antd.Flex(gap="small", elem_style=dict(marginBottom=10)):
+        ms.Text("Readonly")
+        switch = antd.Switch(value=False)
+    editor = pro.MonacoEditor.DiffEditor(
+        original="import gradio as gr",
+        value="""import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.MonacoEditor(
+        value="Hello World",
+        height=400,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()
+""",
+        language="python",
+        height=400,
+    )
+    editor.change(fn=change, inputs=[editor])
+    switch.change(fn=readonly_change, inputs=[switch], outputs=[editor])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/monaco_editor/demos/javascript_customize.py

@@ -0,0 +1,35 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.MonacoEditor(
+        value="""import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.MonacoEditor(
+        value="Hello World",
+        height=400,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()
+""",
+        language="python",
+        height=400,
+        # pass a javascript function string to the after_mount prop
+        after_mount="""(editor) => {
+        editor.updateOptions({
+            readOnly: true,
+            minimap: {
+                enabled: false,
+            },
+        })
+}""")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/monaco_editor/demos/monaco_editor_options.py

@@ -0,0 +1,33 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.MonacoEditor(
+        value="""import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.MonacoEditor(
+        value="Hello World",
+        height=400,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()
+""",
+        language="python",
+        height=400,
+        options={
+            "minimap": {
+                "enabled": False
+            },
+            "lineNumbers": False
+        },
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

requirements.txt

@@ -1,2 +1,2 @@
-modelscope_studio==1.5.0
+modelscope_studio==1.6.0
 openai

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "1.5.0"
+version = "1.6.0"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"