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

Parameters	Type	Description
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

Attributes and Methods	Description
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, Button

Init 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 = 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()