Petrel NPM | npm.io

Petrel Code Editor

npm.io

Installation

NPM

npm install petrel

import { CodeEditor } from 'petrel'

Module

import { CodeEditor } from 'https://js.intera.dev/petrel/1.0.7/index.js'

JS

<script src='https://js.intera.dev/petrel/1.0.7.js'></script>

Styles

NPM & Webpack

require('petrel/css/dark.css')

Web

<link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/dark.css">

Example

<head>
    <link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/dark.css">
    <!-- For the following example I'm using highlightjs so I import the styles for it as well. Theme: Pastefy -->
    <link rel="stylesheet" href="https://js.intera.dev/petrel/1.0.7/css/highlight/pastefy.css">
</head>

<div id="editor"></div>
<script type="module">
    import { CodeEditor } from 'https://js.intera.dev/petrel/1.0.7/index.js'

    import JavaScriptAutoComplete from 'https://js.intera.dev/petrel/1.0.7/src/languages/JavaScriptAutoComplete.js'

    import {JavaScriptAutoComplete} from 'https://js.intera.dev/petrel/1.0.7/autocompletions.js'

    const codeEditor = new CodeEditor(element)

    // Using highlightjs for this example
    codeEditor.setHighlighter(code => hljs.highlight("javascript", code).value)

    // Sets the content of the editor
    codeEditor.setValue(`console.log("Welcome to Petrel!")`)

    // Using JS autocompletion
    codeEditor.setAutoCompleteHandler(new JavaScriptAutoComplete())

    // Creates the editor
    codeEditor.create()
</script>

Options

new CodeEditor(..., {
    closeKeys: {
        '<', '>' // If < is being typed into the editor, the editor will autocomplete it with >
    },
    placeholder: 'Enter code in here',
    value: "Hello World",
    readonly: false,
    tabShortcutsEnabled: true,
    tabSize: 4
})