@aqua-ds/web-components/components-build/aq-code-editor.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const prismCss = "code[class*=language-],pre[class*=language-]{color:#ccc;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}";

const aqCodeEditorCss = ":host{display:block}.aq-code-editor{width:100%;min-height:40px;overflow:auto;}.aq-code-editor *{font-family:var(--font-family-code) !important}.aq-code-editor .editor-container{position:relative;text-align:left;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;width:100%;min-height:40px;overflow:hidden}.aq-code-editor textarea{position:absolute;top:0;left:0;width:100%;height:100%;padding:0.625rem;font-size:var(--font-size-s);line-height:1.5;border:none;outline:none;color:transparent;background:transparent;caret-color:var(--color-paper-base);resize:none;white-space:pre-wrap;word-wrap:break-word;overflow:hidden}.aq-code-editor pre{width:100%;min-height:100%;margin:0;padding:0.625rem;font-size:var(--font-size-s);line-height:1.5;white-space:pre-wrap;word-wrap:break-word;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.aq-code-editor pre.line-numbers{padding-left:2.5em;position:unset}.aq-code-editor pre code[class*=language-]{white-space:pre-wrap}";

const AqCodeEditor$1 = /*@__PURE__*/ proxyCustomElement(class AqCodeEditor extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.value = '';
        this.height = 200;
        this.language = 'javascript';
        this.showLineNumbers = false;
        this.readonly = false;
        this.highlightedCode = '';
        this.handleKeyDown = (event) => {
            const textarea = event.target;
            if (event.key === 'Enter' || event.key === 'NumpadEnter') {
                event.preventDefault();
                const { selectionStart, selectionEnd, value } = textarea;
                const beforeCursor = value.substring(0, selectionStart);
                const afterCursor = value.substring(selectionEnd);
                const linesBeforeCursor = beforeCursor.split('\n');
                const currentLine = linesBeforeCursor[linesBeforeCursor.length - 1];
                const indent = currentLine.match(/^\s*/)?.[0] || '';
                const newValue = beforeCursor + '\n' + indent + afterCursor;
                const newCursorPos = selectionStart + indent.length + 1;
                this.value = newValue;
                requestAnimationFrame(() => {
                    textarea.setSelectionRange(newCursorPos, newCursorPos);
                });
            }
        };
        this.handleInput = (event) => {
            const target = event.target;
            this.value = target.value;
        };
    }
    updateCode(newVal) {
        this.value = newVal;
        this.highlightCode();
    }
    async componentDidLoad() {
        if (!globalThis.Prism) {
            await import('./prism.js');
        }
        this.highlightCode();
    }
    componentWillUpdate() {
        this.highlightCode();
    }
    highlightCode() {
        this.highlightedCode = this.value ? globalThis.Prism.highlight(this.value, globalThis.Prism.languages.javascript, this.language) + '<br>' : '&nbsp;';
        requestAnimationFrame(() => {
            if (this.codeBlockElement) {
                globalThis.Prism.highlightElement(this.codeBlockElement);
            }
        });
    }
    render() {
        return (h(Host, { key: 'ed14ef270222d9f81bf79529f65eec56ee755ee3', class: "aq-code-editor", style: { 'height': `${this.height}px` } }, h("div", { key: '7208c49c96ddb4fb17fc39f2e5db8b665d39607c', class: "editor-container", style: { 'min-height': `${this.height}px` } }, h("textarea", { key: 'b17e7f72c4a70718521c29067e19c7d11a7ccee4', style: { paddingLeft: this.showLineNumbers ? '2.5em' : '10px' }, value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, spellcheck: false, readOnly: this.readonly }), h("pre", { key: '0bb7ae7eb48b2c00975369970f54a748efda6453', class: {
                'line-numbers': this.showLineNumbers,
                [`language-${this.language}`]: true,
            }, style: { 'min-height': `${this.height}px` } }, h("code", { key: 'c36d22ff4fddd485323dcc1f20e53399e067302d', ref: (el) => (this.codeBlockElement = el), innerHTML: this.highlightedCode })))));
    }
    static get watchers() { return {
        "value": ["updateCode"]
    }; }
    static get style() { return prismCss + aqCodeEditorCss; }
}, [256, "aq-code-editor", {
        "value": [1025],
        "height": [2],
        "language": [1],
        "showLineNumbers": [4, "show-line-numbers"],
        "readonly": [4],
        "highlightedCode": [32]
    }, undefined, {
        "value": ["updateCode"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-code-editor"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-code-editor":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqCodeEditor$1);
            }
            break;
    } });
}

const AqCodeEditor = AqCodeEditor$1;
const defineCustomElement = defineCustomElement$1;

export { AqCodeEditor, defineCustomElement };