@looker/code-editor v0.1.30

@looker/code-editor

This package contains code display and editor components that are used in Looker extensions such as the API Explorer and LookML Diagram.

Installation

Add dependency to your project using yarn or npm

yarn add @looker/code-editor

or

npm install @looker/code-editor

<CodeDisplay />

This component is a specialized <code /> or <pre /> that has various search, syntax highlighting and other display options. Use this component for read-only code display use cases. This component is used by this package's CodeEditor and Markdown component for inline and block code sections.

<CodeCopy />

This component wraps the <CodeDisplay /> component and adds a "copy to Clipboard" button

<CodeEditor />

This component wraps the <CodeDisplay /> component and adds a hidden <textarea /> that allows for code editing.

Example

const CodeBlockEditor: React.FC = () => {
  const [codeString, setCodeString] = useState(`
# GET /lookml_models -> Sequence[models.LookmlModel]
def all_lookml_models(
    self,
    # Requested fields.
    fields: Optional[str] = None,
    transport_options: Optional[transport.TransportOptions] = None,
) -> Sequence[models.LookmlModel]:
    """Get All LookML Models"""
    response = self.get(
                    f"/lookml_models",
            Sequence[models.LookmlModel],
            query_params={"fields": fields},
            transport_options=transport_options
    )
    assert isinstance(response, list)
    return responsebind
`)
  return (
    <CodeEditor
      code={codeString}
      onChange={setCodeString}
      language="python"
      lineNumbers={true}
    />
  )
}

<Markdown />

This component is a wrapper around a <ReactMarkdown /> component. It uses @looker/component renderers for text and <CodeDisplay /> for inline and block code. It has options for link handling and renderer overrides.

Using <CodeDisplay /> inside Markdown

This component checks for decorated code blocks. The following source would create a Ruby syntax highlighted code block.

When using the Ruby SDK this would be passed as a Ruby hash like:
```ruby
{
 :model=>"thelook",
 :view=>"inventory_items",
 :fields=>
  ["category.name",
   "inventory_items.days_in_inventory_tier",
   "products.count"],
 :filters=>{:"category.name"=>"socks"},
 :sorts=>["products.count desc 0"],
 :limit=>"500",
 :query_timezone=>"America/Los_Angeles",
}
```