Editor
Introduction
Editor widget in Supervisely allows users to input and edit code with syntax highlighting. It provides a customizable text input area with options such as language selection, input height, and some styles. Editor widget is used for editing code snippets, as the syntax highlighting makes it easier to read and edit code for languages such as python, json, html, and yaml.
Function signature
Editor(
initial_text='{ "value": 10 }',
height_px=100,
height_lines=None, # overwrites height_px if specified.
language_mode='json',
readonly=False,
show_line_numbers=True,
highlight_active_line=True,
restore_default_button=True,
widget_id=None,
)
Parameters
initial_text
Optional[str]
Editor default value
height_px
Optional[int]
Specifies widget height in pixels
height_lines
Optional[int]
Specifies the visible number of lines in widget
language_mode
Optional[int]
Specifies language mode of editor
readonly
Optional[bool]
Specifies that a editor area should be read-only
show_line_numbers
Optional[bool]
Specifies displaying numbers of lines in editor
highlight_active_line
Optional[bool]
Specifies if visible highlighting active line in editor
restore_default_button
Optional[bool]
Display button for settting editor default value
widget_id
Optional[str]
ID of the widget
initial_text
Editor default value
type: Optional[str]
default value: ""
editor = Editor('{ "value": 10 }')height_px
Specifies widgets height in pixels.
type: Optional[int]
default value: 100
editor = Editor('{ "value": 10 }', height_px=200)
height_lines
Specifies the visible number of lines in widget. If specified it overwrites height_px. If >= 1000, all lines will be displayed
type: Optional[int]
default value: None
editor = Editor(
"""{
"person1": {"first": "Nicole", "last": "Adelstein"},
"person2": {"first": "Pleuni", "last": "Pennings"},
"person3": {"first": "Rori", "last": "Rohlfs"}
}""",
height_lines=10,
)
language_mode
Specifies language mode of editor.
type: Optional[Literal['json', 'html', 'plain_text', 'yaml', 'python']]
default value: json
editor_json = Editor('{ "value": 10 }', language_mode="json")
editor_html = Editor("<div> </div>", language_mode="html")
editor_plain_text = Editor("plain_text example", language_mode="plain_text")
editor_yaml = Editor('ray: "a drop of golden sun"', language_mode="yaml")
editor_python = Editor("import supervisely as sly", language_mode="python")
readonly
Specifies that a editor area should be read-only.
type: Optional[bool]
default value: False
editor = Editor('{ "value": 10 }', readonly=True)
show_line_numbers
Specifies displaying numbers of lines in editor.
type: Optional[bool]
default value: True
editor = Editor('{ "value": 10 }', show_line_numbers=False)
highlight_active_line
Specifies if visible highlighting active line in editor.
type: Optional[bool]
default value: True
editor = Editor('{ "value": 10 }', highlight_active_line=False)
restore_default_button
Display button for settting editor default value.
type: Optional[bool]
default value: True
editor = Editor('{ "value": 10 }', restore_default_button=False)
widget_id
ID of the widget.
type: Optional[str]
default value: None
Methods and attributes
readonly
Get or set readonly property.
show_line_numbers()
Display line numbers or code snippet.
hide_line_numbers()
Hide line numbers or code snippet.
get_text()
Returns input value data.
set_text(text: Optional[str] = "", language_mode: Optional[Literal['json', 'html', 'plain_text', 'yaml', 'python']] = None)
Set input value data.
Mini App Example
You can find this example in our Github repository:
ui-widgets-demos/blob/master/text elements/003_editor/src/main.py
Import libraries
import os
from dotenv import load_dotenv
import supervisely as sly
from supervisely.app.widgets import Container, Editor, Text, Card, ButtonInit API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()Initialize Editor widget
Editor widgeteditor = Editor('{ "value": 10 }', height_px=100)Initialize widgets we will use in this demo
show_lines_button = Button("Show line numbers", button_type="success")
hide_lines_button = Button("Hide line numbers", button_type="danger")
readonly_true_button = Button("Set readonly=True", button_type="success")
readonly_false_button = Button("Set readonly=False", button_type="danger")
get_text_button = Button("Get Text")
label = Text("")
label.hide()Create app layout
Prepare a layout for app using Card widget with the content parameter and place widgets that we've just created in the Container widget.
btns_container = Container(
[
show_lines_button,
hide_lines_button,
readonly_true_button,
readonly_false_button,
],
direction="horizontal",
)
card_container = Container(
[editor, btns_container, get_text_button, label],
gap=5,
)
card = Card(title="Editor", content=card_container)Create app using layout
Create an app object with layout parameter.
app = sly.Application(layout=card)Add functions to control widgets from python code
@show_lines_button.click
def show_lines():
editor.show_line_numbers()
@hide_lines_button.click
def hide_lines():
editor.hide_line_numbers()
@readonly_true_button.click
def readonly_true():
editor.readonly = True
@readonly_false_button.click
def readonly_false():
editor.readonly = False
@get_text_button.click
def get_text():
label.show()
label.text = editor.get_text()
Last updated
Was this helpful?