Feature-rich Code Editor With Autocomplete – Petrel.js

If you’re into creating your own web applications or custom user interfaces, chances are you’ll come across a situation where you’ll need a code editor.

Code editors usually come with some sort of rich text editor and auto-complete functionality. As front-end developers, we believe that good tools become an integral part of the work process and help save countless hours over time .

That is why we listed here an easy-to-use library called Petrel which allows developers to create feature-rich code editors in a couple of minutes. It’s written entirely in plain JavaScript and supports all modern browsers.

Supported Languages:

• Bash
• Dockerfile
• HTML
• Java
• JavaScript
• JSON
• Markdown
• PHP
• SQL
• XML
• YAML

How to use it:

1. Install and import the Petrel.js.

# NPM
$ npm i petrel

import { CodeEditor } from 'petrel'

<!-- OR -->
<script type="module">
  import { CodeEditor } from '../index.js';
</script>

<!-- Stylesheet -->
<link rel="stylesheet" href="./css/dark.css">

2. Import Auto-Completion data if needed.

// Bash
import { BashAutoComplete } from './autocompletions.js'
// Dockerfile
import { DockerfileAutoComplete } from './autocompletions.js'
// HTML
import { HTMLAutoComplete } from './autocompletions.js'
// Java
import { JavaAutoComplete } from './autocompletions.js'
// JavaScript
import { JavaScriptAutoComplete } from './autocompletions.js'
// JSON
import { JSONAutoComplete } from './autocompletions.js'
// Markdown
import { MarkdownAutoComplete } from './autocompletions.js'
// PHP
import { PHPAutoComplete } from './autocompletions.js'
// SQL
import { SQLAutoComplete } from './autocompletions.js'
// XML
import { XMLAutoComplete } from './autocompletions.js'
// YAML
import { YAMLAutoComplete } from './autocompletions.js'

3. Import a syntax highlighting library (Highlight.js in this example).

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>

4. Create a container to hold the code editor.

<div id="code-editor"></div>

5. Initialize the Petrel.js library and create a JavaScript code editor.

const codeEditor = new CodeEditor(document.getElementById("code-editor"))
  .setHighlighter(code => hljs.highlight(code,{language: 'javascript'}).value)
  .setValue(``) // default code
  .setAutoCompleteHandler(new JavaScriptAutoComplete())
  .create()

Changelog:

v1.1.2 (03/18/2024)

• Improved CSSAutocomplete

v1.1.1 (03/17/2024)

• Fixed mobile bugs

v1.1.0 (03/17/2024)

• Added custom rendering of cursor, highlighting and many more

v1.0.9 (03/13/2024)

• Improved some issues

v1.0.8 (03/12/2024)

• Made autocompletion better and added emmet plugin