CodeCup.svelte

<script lang="ts">
    import { onMount, tick } from 'svelte';
    import { createLowlight, type LanguageFn } from 'lowlight';
    import { Unist } from '@typematter/svelte-unist';
    import { components as hastComponents } from '@typematter/svelte-hast';
    import type { Root } from 'hast';
    import { cssSupports } from './utils/css-supports';

    interface Props {
        language?: string;
        rtl?: boolean;
        tabSize?: number;
        enableAutocorrect?: boolean;
        lineNumbers?: boolean;
        defaultTheme?: 'light' | 'dark' | boolean;
        areaId?: string | null;
        ariaLabelledby?: string | null;
        readonly?: boolean;
        handleTabs?: boolean;
        handleSelfClosingCharacters?: boolean;
        handleNewLineIndentation?: boolean;
        styleParent?: ShadowRoot;
        copyButton?: boolean;
        maxLines?: number;
        minLines?: number;
        code?: string;
        onupdate?: (code: string) => void;
        grammars: Readonly<Record<string, LanguageFn>>;
    }

    let {
        language = $bindable('html'),
        rtl = false,
        tabSize = 2,
        enableAutocorrect = false,
        lineNumbers = $bindable(false),
        defaultTheme = true,
        areaId = null,
        ariaLabelledby = null,
        readonly = $bindable(false),
        handleTabs = true,
        handleSelfClosingCharacters = true,
        handleNewLineIndentation = true,
        styleParent = undefined,
        copyButton = false,
        maxLines = 100,
        minLines = 1,
        code = $bindable(''),
        onupdate,
        grammars,
    }: Props = $props();

    const lowlight = $derived(createLowlight(grammars));

    let elWrapper: HTMLDivElement;
    let elTextarea: HTMLTextAreaElement;
    let elPre: HTMLPreElement;

    let lineNumber = $derived(code.split('\n').length);
    let wrapperHeight = $derived.by(() => {
        let limited = lineNumber;
        if (limited > maxLines) limited = maxLines;
        else if (limited < minLines) limited = minLines;
        return `${limited * 20 + 20}px`;
    });

    let highlightedTree = $state<Root>({ type: 'root', children: [] });
    let copyMessageVisible = $state(false);

    function doHighlight() {
        try {
            if (lowlight.registered(language)) {
                highlightedTree = lowlight.highlight(language, code);
            } else {
                highlightedTree = {
                    type: 'root',
                    children: [{ type: 'text', value: code }],
                };
            }
        } catch {
            highlightedTree = {
                type: 'root',
                children: [{ type: 'text', value: code }],
            };
        }
    }

    $effect(() => {
        // Re-highlight when code or language changes
        language;
        code;
        doHighlight();
        if (elTextarea && elTextarea.value !== code) {
            elTextarea.value = code;
        }
    });

    function fireUpdate() {
        onupdate?.(code);
    }

    function handleInput(e: Event & { currentTarget: HTMLTextAreaElement }) {
        if (readonly) return;
        code = e.currentTarget.value;
        setTimeout(fireUpdate, 1);
    }

    function handleKeydown(e: KeyboardEvent) {
        if (readonly) return;
        handleTabsKey(e);
        handleSelfClosingChars(e);
        handleNewLineIndent(e);
    }

    function handleScroll(e: Event & { currentTarget: HTMLTextAreaElement }) {
        if (elPre) {
            elPre.style.transform = `translate3d(-${e.currentTarget.scrollLeft}px, -${e.currentTarget.scrollTop}px, 0)`;
        }
    }

    function handleTabsKey(e: KeyboardEvent) {
        if (!handleTabs) return;
        if (e.keyCode !== 9) return;
        e.preventDefault();

        const input = elTextarea;
        const selectionDir = input.selectionDirection;
        let selStartPos = input.selectionStart;
        let selEndPos = input.selectionEnd;
        const inputVal = input.value;

        let beforeSelection = inputVal.substr(0, selStartPos);
        let selectionVal = inputVal.substring(selStartPos, selEndPos);
        const afterSelection = inputVal.substring(selEndPos);
        const indent = ' '.repeat(tabSize);

        if (selStartPos !== selEndPos && selectionVal.length >= indent.length) {
            const currentLineStart = selStartPos - beforeSelection.split('\n').pop()!.length;
            let startIndentLen = indent.length;
            let endIndentLen = indent.length;

            if (e.shiftKey) {
                const currentLineStartStr = inputVal.substr(currentLineStart, indent.length);
                if (currentLineStartStr === indent) {
                    startIndentLen = -startIndentLen;

                    if (currentLineStart > selStartPos) {
                        selectionVal =
                            selectionVal.substring(0, currentLineStart) +
                            selectionVal.substring(currentLineStart + indent.length);
                        endIndentLen = 0;
                    } else if (currentLineStart === selStartPos) {
                        startIndentLen = 0;
                        endIndentLen = 0;
                        selectionVal = selectionVal.substring(indent.length);
                    } else {
                        endIndentLen = -endIndentLen;
                        beforeSelection =
                            beforeSelection.substring(0, currentLineStart) +
                            beforeSelection.substring(currentLineStart + indent.length);
                    }
                } else {
                    startIndentLen = 0;
                    endIndentLen = 0;
                }

                selectionVal = selectionVal.replace(new RegExp(`\n${indent.split('').join('\\')}`, 'g'), '\n');
            } else {
                beforeSelection =
                    beforeSelection.substr(0, currentLineStart) +
                    indent +
                    beforeSelection.substring(currentLineStart, selStartPos);
                selectionVal = selectionVal.replace(/\n/g, `\n${indent}`);
            }

            input.value = beforeSelection + selectionVal + afterSelection;
            input.selectionStart = selStartPos + startIndentLen;
            input.selectionEnd = selStartPos + selectionVal.length + endIndentLen;
            input.selectionDirection = selectionDir;
        } else {
            input.value = beforeSelection + indent + afterSelection;
            input.selectionStart = selStartPos + indent.length;
            input.selectionEnd = selStartPos + indent.length;
        }

        code = input.value;
        doHighlight();
        setTimeout(fireUpdate, 1);
        elTextarea.selectionEnd = selEndPos + tabSize;
    }

    function handleSelfClosingChars(e: KeyboardEvent) {
        if (!handleSelfClosingCharacters) return;
        const openChars = ['(', '[', '{', '<', "'", '"'];
        const closeChars = [')', ']', '}', '>', "'", '"'];
        const key = e.key;

        if (!openChars.includes(key) && !closeChars.includes(key)) return;

        closeCharacter(key);
    }

    function handleNewLineIndent(e: KeyboardEvent) {
        if (!handleNewLineIndentation) return;
        if (e.key !== 'Enter') return;

        e.preventDefault();
        const input = elTextarea;
        const selStartPos = input.selectionStart;
        const selEndPos = input.selectionEnd;
        const inputVal = input.value;

        const beforeSelection = inputVal.substr(0, selStartPos);
        const afterSelection = inputVal.substring(selEndPos);

        const lineStart = inputVal.lastIndexOf('\n', selStartPos - 1);
        const spaceLast = lineStart + inputVal.slice(lineStart + 1).search(/[^ ]|$/);
        const indentSize = spaceLast > lineStart ? spaceLast - lineStart : 0;
        const newCode = `${beforeSelection}\n${' '.repeat(indentSize)}${afterSelection}`;

        input.value = newCode;
        input.selectionStart = selStartPos + indentSize + 1;
        input.selectionEnd = selStartPos + indentSize + 1;

        code = input.value;
        doHighlight();
        setTimeout(fireUpdate, 1);
    }

    function skipCloseChar(char: string): boolean {
        const selectionStart = elTextarea.selectionStart;
        const selectionEnd = elTextarea.selectionEnd;
        const hasSelection = Math.abs(selectionEnd - selectionStart) > 0;
        return [')', '}', ']', '>'].includes(char) || (["'", '"'].includes(char) && !hasSelection);
    }

    function closeCharacter(char: string) {
        const selectionStart = elTextarea.selectionStart;
        const selectionEnd = elTextarea.selectionEnd;

        if (!skipCloseChar(char)) {
            let closeChar = char;
            switch (char) {
                case '(':
                    closeChar = String.fromCharCode(char.charCodeAt(0) + 1);
                    break;
                case '<':
                case '{':
                case '[':
                    closeChar = String.fromCharCode(char.charCodeAt(0) + 2);
                    break;
            }
            const selectionText = code.substring(selectionStart, selectionEnd);
            const newCode = `${code.substring(0, selectionStart)}${selectionText}${closeChar}${code.substring(selectionEnd)}`;
            code = newCode;
            elTextarea.value = newCode;
        } else {
            const skipChar = code.substr(selectionEnd, 1) === char;
            const newSelectionEnd = skipChar ? selectionEnd + 1 : selectionEnd;
            const closeChar = !skipChar && ["'", '"'].includes(char) ? char : '';
            const newCode = `${code.substring(0, selectionStart)}${closeChar}${code.substring(newSelectionEnd)}`;
            code = newCode;
            elTextarea.value = newCode;
            elTextarea.selectionEnd = ++elTextarea.selectionStart;
        }

        elTextarea.selectionEnd = selectionStart;
        doHighlight();
        setTimeout(fireUpdate, 1);
    }

    function copyCode() {
        navigator.clipboard.writeText(code).then(() => {
            copyMessageVisible = true;
            setTimeout(() => {
                copyMessageVisible = false;
            }, 1000);
        });
    }

    export function updateCode(newCode: string) {
        code = newCode;
        if (elTextarea) elTextarea.value = newCode;
        doHighlight();
        setTimeout(fireUpdate, 1);
    }

    export function updateLanguage(newLanguage: string) {
        language = newLanguage;
    }

    export function getCode(): string {
        return code;
    }

    export function enableReadonlyMode() {
        readonly = true;
    }

    export function disableReadonlyMode() {
        readonly = false;
    }

    export function toggleReadonlyMode() {
        readonly = !readonly;
    }

    export function enableLineNumbers() {
        lineNumbers = true;
    }

    export function disableLineNumbers() {
        lineNumbers = false;
    }

    export function toggleLineNumbers() {
        lineNumbers = !lineNumbers;
    }

    onMount(() => {
        if (elTextarea) {
            elTextarea.value = code;
        }
        doHighlight();
    });
</script>

<div
    class="codecup"
    class:codecup--has-line-numbers={lineNumbers}
    class:has-caret-color={cssSupports('caret-color', '#000')}
    class:default-theme={defaultTheme}
    class:dark={defaultTheme === true ? window.matchMedia('(prefers-color-scheme: dark)').matches : defaultTheme === 'dark'}
    bind:this={elWrapper}
    style:height={wrapperHeight}
>
    {#if lineNumbers}
        <div class="codecup__lines">
            {#each { length: lineNumber } as _, i}
                <span class="codecup__lines__line">{i + 1}</span>
            {/each}
        </div>
    {/if}

    <textarea
        bind:this={elTextarea}
        class="codecup__textarea codecup__flatten"
        dir={rtl ? 'rtl' : undefined}
        spellcheck={enableAutocorrect ? undefined : 'false'}
        autocapitalize={enableAutocorrect ? undefined : 'off'}
        autocomplete={enableAutocorrect ? undefined : 'off'}
        id={areaId}
        aria-labelledby={ariaLabelledby}
        readonly={readonly || undefined}
        oninput={handleInput}
        onkeydown={handleKeydown}
        onscroll={handleScroll}
    ></textarea>

    <pre bind:this={elPre} class="codecup__pre codecup__flatten" dir={rtl ? 'rtl' : undefined}><code
            class="codecup__code hljs language-{language}"
            ><Unist ast={highlightedTree} components={hastComponents} /></code
        ></pre>

    {#if copyButton}
        <div class="codecup__copyMessage" style:display={copyMessageVisible ? 'block' : 'none'}>Copied!</div>
        <!-- svelte-ignore a11y_click_events_have_key_events -->
        <!-- svelte-ignore a11y_no_static_element_interactions -->
        <div class="codecup__copyButton" onclick={copyCode}>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
                ><rect width="256" height="256" fill="none" /><polygon
                    points="88 40 88 88 168 88 168 168 216 168 216 40 88 40"
                    opacity="0.2"
                /><polyline
                    points="168 168 216 168 216 40 88 40 88 88"
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="16"
                /><rect
                    x="40"
                    y="88"
                    width="128"
                    height="128"
                    fill="none"
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="16"
                /></svg
            >
        </div>
    {/if}
</div>

<style lang="scss">
    $background-color: #fff;
    $line-height: 20px;
    $font-size: 13px;

    $font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    $color: #ccc;
    $line-number-width: 40px;

    .codecup {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid #eaeefb;
        border-radius: 4px;
        position: relative;
    }

    .codecup,
    .codecup * {
        box-sizing: border-box;
    }

    .codecup__pre {
        pointer-events: none;
        z-index: 3;
        overflow: hidden;
    }

    .codecup__textarea {
        background: none;
        border: none;
        color: $color;

        .codecup.has-caret-color & {
            color: $background-color;
        }

        z-index: 1;
        resize: none;
        font-family: $font-family;
        -webkit-appearance: pre;
        caret-color: #111;
        z-index: 2;
        width: 100%;
        height: 100%;
    }

    .codecup--has-line-numbers .codecup__textarea {
        width: calc(100% - $line-number-width);
    }

    .codecup__code {
        display: block;
        font-family: $font-family;
        overflow: hidden;
    }

    .codecup__flatten {
        padding: 10px;
        font-size: $font-size;
        line-height: $line-height;
        white-space: pre;
        position: absolute;
        top: 0;
        left: 0;
        overflow: auto;
        margin: 0 !important;
        outline: none;
        text-align: left;
    }

    .codecup--has-line-numbers .codecup__flatten {
        width: calc(100% - $line-number-width);
        left: $line-number-width;
    }

    .codecup__line-highlight {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: $line-height;
        background: rgba(0, 0, 0, 0.1);
        z-index: 1;
    }

    .codecup__lines {
        padding: 10px 4px;
        font-size: 12px;
        line-height: $line-height;
        font-family: 'Cousine', monospace;
        position: absolute;
        left: 0;
        top: 0;
        width: $line-number-width;
        height: 100%;
        text-align: right;
        color: #999;
        z-index: 2;
    }

    .codecup__lines__line {
        display: block;
    }

    .codecup.codecup--has-line-numbers {
        padding-left: $line-number-width;
    }

    .codecup.codecup--has-line-numbers:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: $line-number-width;
        height: 100%;
        // background: #eee;
        background: #dcdfe6;
        z-index: 1;
    }

    .codecup__copyButton {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 3;
        background: #eaeefb;
        border: none;
        color: #999;
        cursor: pointer;
        outline: none;
        width: 22px;
        height: 22px;
        border-radius: 4px;
    }

    .codecup__copyMessage {
        position: absolute;
        right: 32px;
        top: 5px;
        z-index: 3;
        background: #eaeefb;
        border: none;
        color: #999;
        cursor: pointer;
        outline: none;
        width: 55px;
        height: 22px;
        line-height: 22px;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        font-family: 'Cousine', monospace;
    }

    .codecup.default-theme {
        background: $background-color;
        color: #4f559c;
    }

    .codecup.default-theme.dark {
        background: #1e1e1e;
        color: #eee;
    }
</style>