Light Dark System

Code Editor

<ol-code-editor> | OlCodeEditor
Since 1.2 experimental

Code editor for language markup.

<ol-code-editor
  language="javascript"
  data="console.log('Hello world!');"
  style="height: 100px;"
>
</ol-code-editor>

import OlCodeEditor from '@onlive.site/ui/dist/react/code-editor';

const App = () => (
  <OlCodeEditor
    language="javascript"
    data="console.log('Hello world!');"
    style="height: 100px;"
  >
  </OlCodeEditor>
);

Examples

Code Block

Use inline code block code as data editor content.

<ol-code-editor style="height: 100px;">
  <script type="text/javascript">
    console.log('Hello world!');
  </script>
</ol-code-editor>

Label and Help text.

Customize label and help text.

<ol-code-editor
  label="Code editor"
  help-text="Sample javascript function."
  language="javascript"
  data="console.log('Hello world!');"
  style="height: 150px;"
>
</ol-code-editor>

Themes

Available themes: vs-light, vs-dark and system.

<ol-code-editor
  theme="vs-dark"
  language="javascript"
  data="console.log('Hello world!');"
  style="height: 100px;"
>
</ol-code-editor>

Listen on data change

Listen for the ol-data-change event to get the form data each time the form changes.



              

              

                
              

            


            

              

                
<ol-code-editor
  id="code-editor"
  language="html"
  data="<div>Hello world!</div>"
  style="height: 100px;"
>
</ol-code-editor>

<pre id="data-object"></pre>

<script>
  const schemaEditor = document.querySelector('#code-editor');
  schemaEditor.addEventListener('ol-data-change', (e) => {
    document.querySelector('#data-object').innerText = e.detail.data;
  });
</script>


              


              

                
import OlCodeEditor from '@onlive.site/ui/dist/react/code-editor';

const App = () => (
  const [data, setData] = useState('');
  <OlCodeEditor
    language="html"
    data="<div>Hello world!</div>"
    style="height: 100px;"
    @OlDataChange={(e) => setData(e.detail.data)}
  >
  </OlCodeEditor>
  <pre>{data}</pre>
);


              

            


            

              

              

              

              
            

          


          

            Importing
          

          

            If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free
            to use any of the following snippets to
            cherry pick this component.
          


          
            Script
            Import
            Bundler
            React

            
              

                To import this component from
                the CDN
                using a script tag:
              

              
<script type="module" src="https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/code-editor/code-editor.js"></script>

            

            
              

                To import this component from
                the CDN
                using a JavaScript import:
              

              
import 'https://cdn.onlive.site/@onlive.site/ui@1.8.20/cdn/components/code-editor/code-editor.js';

            

            
              
To import this component using a bundler:

              
import '@onlive.site/ui/dist/components/code-editor/code-editor.js';

            

            
              
To import this component as a React component:

              
import OlCodeEditor from '@onlive.site/ui/dist/react/code-editor';

            
          

          
Slots


          

            

              
                

                  Name
                  Description
                

              
              
                

                  (default)
                  The default slot.
                

              
            

          


          

            Learn more about using slots.
          


          

            Properties
          


          

            

              
                

                  Name
                  Description
                  Reflects
                  Type
                  Default
                

              
              
                

                  
                    label
                  
                  The textarea’s label. If you need to display HTML, use the label slot instead.
                  
                  
                    string
                  
                  
                    ''
                  
                


                

                  
                    theme
                  
                  Editor theme.
                  
                  
                    'vs-light' | 'vs-dark' | 'system'
                  
                  
                    'system'
                  
                


                

                  
                    language
                  
                  Editor language.
                  
                  
                    'json' | 'html' | 'css' | 'javascript'
                  
                  
                    'javascript'
                  
                


                

                  
                    data
                  
                  Initial code data.
                  
                  
                    string
                  
                  -
                


                

                  
                    helpText

                    

                    
                      
                         help-text 
                      
                    
                  		
                  
                    The textarea’s help text. If you need to display HTML, use the help-text slot instead.
                  
                  
                  
                    string
                  
                  
                    ''
                  
                


                

                  updateComplete
                  
                    A read-only promise that resolves when the component has
                    finished updating.
                  
                  
                  
                  
                

              
            

          


          

            Learn more about
              attributes and properties.
          


          
Events


          

            

              
                

                  Name
                  React Event
                  Description
                  Event Detail
                

              
              
                

                  ol-data-change
                  onOlDataChange
                  Emitted when code chance.
                  -
                

              
            

          


          

            Learn more about events.
          


          
Parts


          

            

              
                

                  Name
                  Description
                

              
              
                

                  base
                  The component’s base wrapper.
                

              
            

          


          

            Learn more about customizing CSS parts.