4.0.1 • Published 1 year ago
@patternslib/pat-code-editor v4.0.1
pat-code-editor
Documentation
This is code editor pattern based on CodeJar and PrismJS.
Note:
When prefilling the textarea, please add HTML escaped content to the template to avoid any XSS security issues or nesting errors with existing HTML.
Example to escape content in Python:
import html
escaped_html = html.escape(unescaped_html)Example to escape content in JavaScript:
const escaped_html = unescaped_html
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll(""", '"');Options reference
| Property | Default Value | Type | Description |
|---|---|---|---|
| language | null | String, null | Programming language to use. |
| linenumbers | false | Boolean | Show line numbers. |
| theme | null | String | Name of PrismJS theme. |
| tab | "' '" | String | Characters to use as tab. Use "\t" for a tab character, spaces in quotes (e.g. "' '") for spaces |
| indent-on | {$ | String | Regex pattern where the next line is indented. |
| spellcheck | false | Boolean | Activate spellchecking. |
| catch-tab | true | Boolean | Catch a tab keystroke and indent. |
| preserve-indent | true | Boolean | Preserve indentation of original source. |
| add-closing | true | Boolean | Automatically add closing brackets. |
| history | true | Boolean | Activate undo history. |
Examples
Invocation on a contenteditable div
<div class="pat-code-editor" data-pat-code-editor="language: javascript" contenteditable>
import Pattern from "./code-editor";
Pattern.init(document.querySelector(".pat-code-editor"));
</div>Invocation on a textarea
This will create a div where the code editor is finally initialized and changes are synchronized back to the text editor.
<textarea class="pat-code-editor" data-pat-code-editor="language: css">
body {
background-color: black;
color: blue;
}
</textarea>