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
Copy 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
Editor default value
type: Optional[str]
default value: ""
Copy editor = Editor ( '{ "value": 10 }' )
height_px
Specifies widgets height in pixels.
type: Optional[int]
default value: 100
Copy 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
Copy 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
Copy 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
Copy editor = Editor ( '{ "value": 10 }' , readonly = True )
show_line_numbers
Specifies displaying numbers of lines in editor.
type: Optional[bool]
default value: True
Copy 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
Copy editor = Editor ( '{ "value": 10 }' , highlight_active_line = False )
restore_default_button
Display button for settting editor default value.
type: Optional[bool]
default value: True
Copy editor = Editor ( '{ "value": 10 }' , restore_default_button = False )
widget_id
ID of the widget.
type: Optional[str]
default value: None
Methods and attributes
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
Copy import os
from dotenv import load_dotenv
import supervisely as sly
from supervisely . app . widgets import Container , Editor , Text , Card , Button
Init API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
Copy load_dotenv ( "local.env" )
load_dotenv (os.path. expanduser ( "~/supervisely.env" ))
api = sly . Api ()
Initialize Editor
widget
Copy editor = Editor ( '{ "value": 10 }' , height_px = 100 )
Initialize widgets we will use in this demo
Copy 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.
Copy 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.
Copy app = sly . Application (layout = card)
Add functions to control widgets from python code
Copy @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 ()