Options
All
  • Public
  • Public/Protected
  • All
Menu

External module Editor

This module contains two helper functions that you can use to create standard user interface for your custom language plugins. Those functions are used by the built-in language plugins for JavaScript, Python and R. The typical way of using those functions is to call them from the render operation of your implementation of the Editor interface.

Index

Functions

Functions

createMonacoEditor

  • The function creates a Monaco code editor. If the language is one of the languages understood by Monaco, it will automatically use correct syntax highlighting. You will typically call this function from the render operation of your Editor implementation. This happens each time any event is triggered, but createMonacoEditor uses Maquette in a way that does not re-create the editor each time rendering occurs.

    Parameters

    • language: string

      The name of a programming language that Monaco should use for syntax highlighting.

    • source: string

      Current source code. This is only used when the editor is created for the first time, so you do not need to worry about updating current source code after each keystroke (only after each rebinding).

    • block: BlockState

      Code block that owns the editor. This is mainly used to get unique ID of the block and avoid re-creating editor on each render.

    • context: EditorContext<any>

      Context passed to the render operation. The editor uses this to trigger rebinding and evaluation when user hits Shift+Enter in the editor.

    Returns VNode

createOutputPreview

  • createOutputPreview(block: BlockState, triggerSelect: function, selectedTab: number, exportedValues: ExportsValue): VNode

  • The function creates a preview displaying the outputs of a given code block. It supports all of the KnownValue objects, i.e. data frames, figures, JavaScript components and console printouts. When using this function, you need to keep the index of selected tab as part of your editor state and you also need to define an event to modify the selected tab index.

    Parameters

    • block: BlockState

      Specifies the code block for which we ware generating preview

    • triggerSelect: function

      This function is called whenever the user clicks on a different tab. It should trigger an event that updates the selected tab in your editor state.

        • (selectedTab: number): void

        • Parameters

          • selectedTab: number

          Returns void

    • selectedTab: number

      Index of a currently selected tab. The first tab has index 0, so if you only ever export a single tab, you can set this to 0.

    • exportedValues: ExportsValue

      The value to display. You can typically obtain it by accessing <Values.ExportsValue>block.code.value, but make sure this is not null.

    Returns VNode

Generated using TypeDoc