Never Punch Manticores

    @patternslib/pat-code-editor

    3.0.0 • Public • Published

    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("&lt;", "<")
        .replaceAll("&gt;", ">")
        .replaceAll("&quot;", '"');
    

    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

    import Pattern from "./code-editor"; Pattern.init(document.querySelector(".pat-code-editor"));
    <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>
    <textarea class="pat-code-editor" data-pat-code-editor="language: css">
    body {
      background-color: black;
      color: blue;
    }
    </textarea>

    Keywords

    Install

    npm i @patternslib/pat-code-editor

    DownloadsWeekly Downloads

    68

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    25.8 kB

    Total Files

    25

    Last publish

    Collaborators

    • goibhniu
    • askesemann
    • pilz
    • jcbrand
    • fulv
    • thet
    • alessandro.pisa