@unipin/angular-applet 18.9.7 → 21.0.1

package/fesm2022/unipin-angular-applet-markdown.mjs

@@ -0,0 +1,703 @@
+import * as i0 from '@angular/core';
+import { signal, effect, Directive, Inject, Injectable, model, input, viewChild, booleanAttribute, computed, forwardRef, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { matChecklistRound, matFormatListBulletedRound, matFormatListNumberedRound, matFormatUnderlinedRound, matFormatItalicRound, matFormatQuoteRound, matFormatBoldRound } from '@ng-icons/material-icons/round';
+import { up, compressImage } from '@unipin/angular-applet/common';
+import { UpButtonDirective } from '@unipin/angular-applet/buttons';
+import { UpFieldControlComponent, UpFieldControl } from '@unipin/angular-applet/forms';
+import { marked } from 'marked';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
+import { UNIPIN_GQL_CONFIG } from '@unipin/angular-gql';
+
+function toggleBold(textarea, selection) {
+    const { word, start, end } = getWordAtCursor(textarea.value, selection.start);
+    let newText;
+    //add with selection
+    if (selection.start < selection.end &&
+        !selection.word.startsWith('**') &&
+        !selection.word.endsWith('**')) {
+        newText = textarea.value.slice(0, selection.start) + `**${selection.word}**` + textarea.value.slice(selection.end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.end + 2, selection.end + 2);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //add without selection
+    if (selection.start === selection.end &&
+        !word.startsWith('**') &&
+        !word.endsWith('**')) {
+        newText = textarea.value.slice(0, start) + `**${word}**` + textarea.value.slice(end);
+        setTimeout(() => {
+            textarea.setSelectionRange(end + 2, end + 2);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //remove without selection
+    if (word.startsWith('**') &&
+        word.endsWith('**')) {
+        newText = textarea.value.slice(0, start) + word.slice(2, -2) + textarea.value.slice(end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.start, selection.end);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //remove with selection
+    if (selection.word.startsWith('**') &&
+        selection.word.endsWith('**')) {
+        newText = textarea.value.slice(0, selection.start) + selection.word.slice(2, -2) + textarea.value.slice(selection.end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.start, selection.start);
+            textarea.focus();
+        });
+        return newText;
+    }
+    return textarea.value;
+}
+function toggleUnderline(textarea, selection) {
+    const { word, start, end } = getWordAtCursor(textarea.value, selection.start);
+    let newText;
+    //add with selection
+    if (selection.start < selection.end &&
+        !selection.word.startsWith('++') &&
+        !selection.word.endsWith('++')) {
+        newText = textarea.value.slice(0, selection.start) + `++${selection.word}++` + textarea.value.slice(selection.end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.end + 2, selection.end + 2);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //add without selection
+    if (selection.start === selection.end &&
+        !word.startsWith('++') &&
+        !word.endsWith('++')) {
+        newText = textarea.value.slice(0, start) + `++${word}++` + textarea.value.slice(end);
+        setTimeout(() => {
+            textarea.setSelectionRange(end + 2, end + 2);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //remove without selection
+    if (word.startsWith('++') && word.endsWith('++')) {
+        newText = textarea.value.slice(0, start) + word.slice(2, -2) + textarea.value.slice(end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.start, selection.end);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //remove with selection
+    if (selection.word.startsWith('++') &&
+        selection.word.endsWith('++')) {
+        newText = textarea.value.slice(0, selection.start) + selection.word.slice(2, -2) + textarea.value.slice(selection.end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.start, selection.start);
+            textarea.focus();
+        });
+        return newText;
+    }
+    return textarea.value;
+}
+function toggleItalic(textarea, selection) {
+    const { word, start, end } = getWordAtCursor(textarea.value, selection.start);
+    let newText;
+    //add with selection
+    if (selection.start < selection.end &&
+        !selection.word.startsWith('_') &&
+        !selection.word.endsWith('_')) {
+        newText = textarea.value.slice(0, selection.start) + `_${selection.word}_` + textarea.value.slice(selection.end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.end + 2, selection.end + 2);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //add without selection
+    if (selection.start === selection.end && !word.startsWith('_') && !word.endsWith('_')) {
+        newText = textarea.value.slice(0, start) + `_${word}_` + textarea.value.slice(end);
+        setTimeout(() => {
+            textarea.setSelectionRange(end + 1, end + 1);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //remove without selection
+    if (word.startsWith('_') && word.endsWith('_')) {
+        newText = textarea.value.slice(0, start) + word.slice(1, -1) + textarea.value.slice(end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.start, selection.end);
+            textarea.focus();
+        });
+        return newText;
+    }
+    //remove with selection
+    if (selection.word.startsWith('_') && selection.word.endsWith('_')) {
+        newText = textarea.value.slice(0, selection.start) + selection.word.slice(1, -1) + textarea.value.slice(selection.end);
+        setTimeout(() => {
+            textarea.setSelectionRange(selection.start, selection.start);
+            textarea.focus();
+        });
+        return newText;
+    }
+    return textarea.value;
+}
+function toggleUnorderedList(text, cursorPos) {
+    const lines = text.split('\n');
+    let currentLineIndex = 0;
+    let charCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+        charCount += lines[i].length + 1;
+        if (charCount > cursorPos) {
+            currentLineIndex = i;
+            break;
+        }
+    }
+    const line = lines[currentLineIndex];
+    if (line.startsWith('- ')) {
+        lines[currentLineIndex] = line.slice(2);
+    }
+    else {
+        lines[currentLineIndex] = `- ${line}`;
+    }
+    return lines.join('\n');
+}
+function toggleOrderedList(text, cursorPos) {
+    const lines = text.split('\n');
+    let currentLineIndex = 0;
+    let charCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+        charCount += lines[i].length + 1;
+        if (charCount > cursorPos) {
+            currentLineIndex = i;
+            break;
+        }
+    }
+    const line = lines[currentLineIndex];
+    const match = line.match(/^(\d+)\.\s(.*)$/);
+    if (match) {
+        lines[currentLineIndex] = match[2];
+    }
+    else {
+        let number = 1;
+        for (let i = 0; i < currentLineIndex; i++) {
+            const prevMatch = lines[i].match(/^(\d+)\.\s/);
+            if (prevMatch) {
+                number = parseInt(prevMatch[1], 10) + 1;
+            }
+        }
+        lines[currentLineIndex] = `${number}. ${line}`;
+    }
+    return lines.join('\n');
+}
+function toggleTaskList(text, cursorPos) {
+    const lines = text.split('\n');
+    let currentLineIndex = 0;
+    let charCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+        charCount += lines[i].length + 1;
+        if (charCount > cursorPos) {
+            currentLineIndex = i;
+            break;
+        }
+    }
+    const line = lines[currentLineIndex];
+    if (/^- \[ \]\s/.test(line)) {
+        lines[currentLineIndex] = line.replace(/^- \[ \]\s/, '- [x] ');
+    }
+    else if (/^- \[x\]\s/.test(line)) {
+        lines[currentLineIndex] = line.replace(/^- \[x\]\s/, '');
+    }
+    else {
+        lines[currentLineIndex] = `- [ ] ${line}`;
+    }
+    return lines.join('\n');
+}
+function toggleHeading(textarea, selection) {
+    const lines = textarea.value.split('\n');
+    let charCount = 0;
+    let lineIndex = 0;
+    for (let i = 0; i < lines.length; i++) {
+        charCount += lines[i].length + 1;
+        if (selection.start < charCount) {
+            lineIndex = i;
+            break;
+        }
+    }
+    let lineContent = lines[lineIndex];
+    if (lineContent.startsWith('### ')) {
+        lines[lineIndex] = lineContent.slice(4);
+        selection.start -= 4;
+        selection.end -= 4;
+    }
+    else {
+        lines[lineIndex] = `### ${lineContent}`;
+        selection.start += 4;
+        selection.end += 4;
+    }
+    const newText = lines.join('\n');
+    setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(selection.start, selection.end);
+    });
+    return newText;
+}
+function toggleBlockQuote(textarea, selection) {
+    const lines = textarea.value.split('\n');
+    let charCount = 0;
+    let lineIndex = 0;
+    for (let i = 0; i < lines.length; i++) {
+        charCount += lines[i].length + 1;
+        if (selection.start < charCount) {
+            lineIndex = i;
+            break;
+        }
+    }
+    let lineContent = lines[lineIndex];
+    if (lineContent.startsWith('> ')) {
+        lines[lineIndex] = lineContent.slice(2);
+        selection.start -= 2;
+        selection.end -= 2;
+    }
+    else {
+        lines[lineIndex] = `> ${lineContent}`;
+        selection.start += 2;
+        selection.end += 2;
+    }
+    const newText = lines.join('\n');
+    setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(selection.start, selection.end);
+    });
+    return newText;
+}
+function getWordAtCursor(text, cursorPosition) {
+    if (!text || cursorPosition < 0 || cursorPosition > text.length) {
+        return {
+            start: cursorPosition,
+            end: cursorPosition,
+            word: ''
+        };
+    }
+    let start = cursorPosition;
+    while (start > 0 && !isWordSeparator(text[start - 1])) {
+        start--;
+    }
+    let end = cursorPosition;
+    while (end < text.length && !isWordSeparator(text[end])) {
+        end++;
+    }
+    return {
+        start,
+        end,
+        word: text.substring(start, end)
+    };
+}
+function isWordSeparator(char) {
+    return /\s|\t|\n|\r|,|\.|!|\?|:|;|\(|\)/.test(char);
+}
+
+class UpMarkdownDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.markdown = signal('', ...(ngDevMode ? [{ debugName: "markdown" }] : []));
+        this.class = `
+    [&_h1]:text-4xl [&_h1]:font-bold [&_h1]:mt-0 [&_h1]:mb-4 [&_h1]:border-b [&_h1]:border-[#eeeeee]
+    [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-0 [&_h2]:mb-4 [&_h2]:border-b [&_h2]:border-[#eeeeee]
+    [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-0 [&_h3]:mb-4 [&_h3]:border-b [&_h3]:border-[#eeeeee]
+    [&_h4]:text-base [&_h4]:font-bold [&_h4]:mt-0 [&_h4]:mb-4 [&_h4]:border-b [&_h4]:border-[#eeeeee]
+    [&_h5]:text-sm [&_h5]:font-bold [&_h5]:mt-0 [&_h5]:mb-4 [&_h5]:border-b [&_h5]:border-[#eeeeee]
+    [&_h6]:text-xs [&_h6]:font-bold [&_h6]:mt-0 [&_h6]:mb-4 [&_h6]:border-b [&_h6]:border-[#eeeeee]
+
+    [&_p]:mt-0 [&_p]:mb-4
+
+    [&_ul]:mt-0 [&_ul]:pl-5 [&_ul]:list-disc [&_ul]:mb-4
+    [&_ol]:mt-0 [&_ol]:pl-5 [&_ol]:list-decimal [&_ol]:mb-4
+
+    [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-primary)] [&_blockquote]:text-gray-700
+
+    [&_a]:text-[var(--color-primary)] [&_a]:underline
+  `;
+        this.observer = new MutationObserver(() => {
+            this.markdown.set(this.el.nativeElement.innerHTML || '');
+        });
+        this.observer.observe(this.el.nativeElement, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+        });
+        effect(() => {
+            const native = (this.el.nativeElement);
+            this.markdown.set(native.innerHTML);
+            this.renderer.setProperty(native, 'innerHTML', marked(this.markdown()
+                .replace(/&gt;/g, '>')
+                .replace(/\+\+(.*?)\+\+/g, '<u>$1</u>')));
+        });
+    }
+    ngOnDestroy() {
+        this.observer.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpMarkdownDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: UpMarkdownDirective, isStandalone: true, selector: "[upMarkdown]", host: { properties: { "class": "class" } }, exportAs: ["upMarkdown"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpMarkdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    exportAs: 'upMarkdown',
+                    selector: '[upMarkdown]',
+                    host: {
+                        '[class]': 'class',
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+class MarkdownService {
+    constructor(config, http) {
+        this.config = config;
+        this.http = http;
+    }
+    uploadImage(file) {
+        const formData = new FormData();
+        formData.append('operations', JSON.stringify({
+            query: `
+          mutation ($attachment: Upload!) {
+            fileMgmtSysMsFileUpload(attachment: $attachment, isPublic: true) {
+              guid
+              fileName
+              publicUrl
+            }
+          }
+        `
+        }));
+        formData.append('file', file);
+        formData.append('map', JSON.stringify({
+            file: ['variables.attachment']
+        }));
+        return this.http.post(this.config.uri, formData, {
+            headers: new HttpHeaders({
+                'x-apollo-operation-name': 'fileUpload'
+            })
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MarkdownService, deps: [{ token: UNIPIN_GQL_CONFIG }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MarkdownService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MarkdownService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [UNIPIN_GQL_CONFIG]
+                }] }, { type: i1.HttpClient }] });
+
+class UpMarkdownInputComponent extends UpFieldControlComponent {
+    constructor(markdownService) {
+        super();
+        this.markdownService = markdownService;
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+        this.mode = model('write', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        this.inlineClass = input('', ...(ngDevMode ? [{ debugName: "inlineClass", alias: 'class' }] : [{ alias: 'class' }]));
+        this.textarea = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textarea" }] : []));
+        this.buttons = [
+            { icon: 'customHeading', action: 'heading' },
+            { icon: 'matFormatBoldRound', action: 'bold' },
+            { icon: 'matFormatItalicRound', action: 'italic' },
+            { icon: 'matFormatUnderlinedRound', action: 'underline' },
+            { icon: 'matFormatQuoteRound', action: 'blockQuote' },
+            { icon: 'matFormatListNumberedRound', action: 'ol' },
+            { icon: 'matFormatListBulletedRound', action: 'ul' },
+            { icon: 'matChecklistRound', action: 'taskList' },
+        ];
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        this.contextGuid = input('', ...(ngDevMode ? [{ debugName: "contextGuid" }] : []));
+        this.contextType = input('', ...(ngDevMode ? [{ debugName: "contextType" }] : []));
+        this.isTouched = false;
+        this._computedClass = computed(() => {
+            return up('peer placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex flex-col min-h-48 size-full min-w-0 rounded-md border bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm overflow-hidden', 'has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-ring/50 has-[textarea:focus-visible]:ring-[3px] has-[textarea:focus-visible]:outline-none', this.error() ? 'ring-destructive/20 dark:ring-destructive/40 border-destructive has-[textarea:focus-visible]:ring-destructive/50' : '', this.inlineClass());
+        }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
+        this.sub = null;
+        /**
+         * Callback function to handle value changes in the markdown input component.
+         * @type {(_val: any) => void}
+         */
+        this._onChange = (_val) => { };
+        /**
+         * Callback function to handle touch events in the markdown input component.
+         * @type {() => void}
+         */
+        this._onTouched = () => { };
+        if (this.ngControl !== null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /**
+     * Handles keyboard events and button actions for the markdown input.
+     *
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    handleStyleWithKeyboard(event) {
+        if (!this.textarea() ||
+            this.textarea().nativeElement.tagName !== 'TEXTAREA') {
+            return;
+        }
+        if (event.ctrlKey ||
+            event.metaKey) {
+            let result = null;
+            if (event.key.toLowerCase() === 'b') {
+                result = this.setStyle('bold', this.textarea().nativeElement);
+            }
+            if (event.key.toLowerCase() === 'i') {
+                result = this.setStyle('italic', this.textarea().nativeElement);
+            }
+            if (event.key.toLowerCase() === 'u') {
+                result = this.setStyle('underline', this.textarea().nativeElement);
+            }
+            if (result !== null) {
+                this.value.set(result);
+                this._onChange(result);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    /**
+     * Registers a callback function to be called when the password input value changes.
+     * @param {(_val: any) => void} fn - Callback function for value changes.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Registers a callback function to be called when the password input is touched.
+     * @param {() => void} fn - Callback function for touch events.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Writes a new value to the markdown input.
+     * @param {*} val - The new value to be set.
+     */
+    writeValue(val) {
+        this.value.set(val ?? '');
+    }
+    /**
+     * Event handler to handle touch status.
+     *
+     * @returns {void}
+     */
+    touch() {
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        this.value.set(this.textarea().nativeElement.value);
+    }
+    change(event) {
+        const value = event.target.value;
+        if (!this.isTouched) {
+            this._onTouched();
+            this.isTouched = true;
+        }
+        this._onChange(value);
+    }
+    /**
+     * Handles button actions for the markdown input.
+     *
+     * @param {string} action - The action to perform.
+     * @returns {void}
+     */
+    applyStyle(action) {
+        const textarea = this.textarea()?.nativeElement;
+        if (!textarea) {
+            return;
+        }
+        const result = this.setStyle(action, textarea);
+        if (result !== null) {
+            this.value.set(result);
+            this._onChange(result);
+        }
+    }
+    changeSelection(event) {
+        const target = event.target;
+        const word = target.value.substring(target.selectionStart, target.selectionEnd);
+        this.selection = {
+            word,
+            end: target.selectionEnd,
+            start: target.selectionStart,
+        };
+    }
+    async pasteImage(event) {
+        const cursor = this.selection?.start;
+        const items = event.clipboardData?.items;
+        const textarea = this.textarea()?.nativeElement;
+        if (!items ||
+            cursor === undefined ||
+            cursor === null ||
+            !textarea) {
+            return;
+        }
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].type.startsWith('image/')) {
+                const file = await compressImage({
+                    quality: 0.8,
+                    file: items[i].getAsFile(),
+                });
+                if (!file) {
+                    return;
+                }
+                const errorImageText = `<!-- Upload image failed -->`;
+                const errorImageSizeText = `<!-- Image size must be less than 5MB -->`;
+                const uploadText = `<!-- Uploading "${file?.name.replace(/ /g, '-')}"... -->`;
+                textarea.value = textarea.value.substring(0, cursor) + uploadText;
+                this.value.set(textarea.value);
+                this._onChange(textarea.value);
+                setTimeout(() => {
+                    textarea.setSelectionRange(cursor + uploadText.length, cursor + uploadText.length);
+                    textarea.focus();
+                });
+                if (file?.size &&
+                    file?.size > 5 * 1024 * 1024) {
+                    this.replaceAndSetCursor(textarea, {
+                        searchValue: uploadText,
+                        replaceValue: errorImageSizeText
+                    }, {
+                        start: cursor + errorImageSizeText.length,
+                        end: cursor + errorImageSizeText.length
+                    });
+                    return;
+                }
+                this.sub?.unsubscribe();
+                this.sub = this.markdownService.uploadImage(file).subscribe({
+                    error: () => {
+                        this.replaceAndSetCursor(textarea, {
+                            searchValue: uploadText,
+                            replaceValue: errorImageText
+                        }, {
+                            start: cursor + errorImageText.length,
+                            end: cursor + errorImageText.length
+                        });
+                    },
+                    next: ({ data: { fileMgmtSysMsFileUpload } }) => {
+                        this.imageData = fileMgmtSysMsFileUpload;
+                        const markdownImageText = `![${this.imageData.fileName}](${this.imageData.publicUrl.replace(/ /g, '%20')})`;
+                        this.replaceAndSetCursor(textarea, {
+                            searchValue: uploadText,
+                            replaceValue: markdownImageText
+                        }, {
+                            start: cursor + markdownImageText.length,
+                            end: cursor + markdownImageText.length
+                        });
+                    },
+                });
+            }
+        }
+    }
+    replaceAndSetCursor(textarea, textReplace, cursorPosition) {
+        this.value.set(textarea.value.replace(textReplace.searchValue, textReplace.replaceValue));
+        this._onChange(textarea.value.replace(textReplace.searchValue, textReplace.replaceValue));
+        setTimeout(() => {
+            textarea.setSelectionRange(cursorPosition.start, cursorPosition.end);
+            textarea.focus();
+        });
+    }
+    setStyle(action, textarea) {
+        if (!textarea ||
+            textarea.tagName !== 'TEXTAREA' ||
+            !this.selection) {
+            return null;
+        }
+        switch (action) {
+            case 'bold':
+                return toggleBold(textarea, this.selection);
+            case 'italic':
+                return toggleItalic(textarea, this.selection);
+            case 'underline':
+                return toggleUnderline(textarea, this.selection);
+            case 'ul':
+                return toggleUnorderedList(textarea.value, this.selection.start);
+            case 'ol':
+                return toggleOrderedList(textarea.value, this.selection.start);
+            case 'heading':
+                return toggleHeading(textarea, this.selection);
+            case 'taskList':
+                return toggleTaskList(textarea.value, this.selection.start);
+            case 'blockQuote':
+                return toggleBlockQuote(textarea, this.selection);
+            default:
+                return null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpMarkdownInputComponent, deps: [{ token: MarkdownService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UpMarkdownInputComponent, isStandalone: true, selector: "up-markdown-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, contextGuid: { classPropertyName: "contextGuid", publicName: "contextGuid", isSignal: true, isRequired: false, transformFunction: null }, contextType: { classPropertyName: "contextType", publicName: "contextType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mode: "modeChange" }, host: { listeners: { "document:keyup": "handleStyleWithKeyboard($event)" }, properties: { "class": "_computedClass()" } }, providers: [
+            {
+                provide: UpFieldControl,
+                useExisting: forwardRef(() => UpMarkdownInputComponent)
+            },
+            provideIcons({
+                matFormatBoldRound,
+                matFormatQuoteRound,
+                matFormatItalicRound,
+                matFormatUnderlinedRound,
+                matFormatListNumberedRound,
+                matFormatListBulletedRound,
+                matChecklistRound,
+                customHeading: `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 4v16h3V13h6v7h3V4h-3v7H9V4H6z" transform="scale(0.8) translate(3,2)"/>
+          </svg>
+        `
+            }),
+        ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"shrink-0 w-full flex flex-col-reverse md:flex-row md:items-center justify-between gap-1 bg-[#f5f7f6]\">\n  <div class=\"flex items-center h-full\">\n    <button\n      upButton\n      variant=\"ghost\"\n      class=\"transition-none rounded-none rounded-t-md\"\n      [class]=\"\n        mode() !== 'write'? '' : 'border-r border-input bg-white'\n      \"\n      (click)=\"mode.set('write')\"\n    >\n      Write\n    </button>\n\n    <button\n      upButton\n      variant=\"ghost\"\n      class=\"transition-none rounded-none rounded-t-md\"\n      [class]=\"\n        mode() !== 'preview'? '' : 'border-x border-input bg-white'\n      \"\n      (click)=\"mode.set('preview')\"\n    >\n      Preview\n    </button>\n  </div>\n\n  @if (mode() === 'write') {\n    <div class=\"flex justify-start md:justify-end items-center gap-0.5\">\n      @for (btn of buttons; track btn.action) {\n        <button\n          upButton\n          size=\"sm\"\n          variant=\"ghost\"\n          class=\"p-0 px-2 py-1\"\n          [disabled]=\"disabled()\"\n          (click)=\"applyStyle(btn.action)\"\n        >\n          <ng-icon\n            size=\"16px\"  \n            [name]=\"btn.icon\"\n          />\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"grow relative\">\n  @if (mode() === 'preview') {\n    <div\n      upMarkdown\n      class=\"size-full absolute top-0 left-0 bg-white p-2 outline-none text-wrap break-words overflow-y-auto\"\n      [innerHTML]=\"(value() || 'Nothing to preview')\"\n    ></div>\n  }\n  @else {\n    <textarea\n      #textarea\n      class=\"size-full absolute top-0 left-0 bg-white p-2 outline-none resize-none\" \n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"placeholder()\"\n      (blur)=\"touch()\"\n      (input)=\"change($event)\"\n      (paste)=\"pasteImage($event)\"\n      (keyup)=\"changeSelection($event)\"\n      (mouseup)=\"changeSelection($event)\"\n    ></textarea>\n  }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpMarkdownDirective, selector: "[upMarkdown]", exportAs: ["upMarkdown"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UpMarkdownInputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-markdown-input', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': '_computedClass()',
+                    }, providers: [
+                        {
+                            provide: UpFieldControl,
+                            useExisting: forwardRef(() => UpMarkdownInputComponent)
+                        },
+                        provideIcons({
+                            matFormatBoldRound,
+                            matFormatQuoteRound,
+                            matFormatItalicRound,
+                            matFormatUnderlinedRound,
+                            matFormatListNumberedRound,
+                            matFormatListBulletedRound,
+                            matChecklistRound,
+                            customHeading: `
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M6 4v16h3V13h6v7h3V4h-3v7H9V4H6z" transform="scale(0.8) translate(3,2)"/>
+          </svg>
+        `
+                        }),
+                    ], imports: [
+                        NgIcon,
+                        UpMarkdownDirective,
+                        UpButtonDirective
+                    ], template: "<div class=\"shrink-0 w-full flex flex-col-reverse md:flex-row md:items-center justify-between gap-1 bg-[#f5f7f6]\">\n  <div class=\"flex items-center h-full\">\n    <button\n      upButton\n      variant=\"ghost\"\n      class=\"transition-none rounded-none rounded-t-md\"\n      [class]=\"\n        mode() !== 'write'? '' : 'border-r border-input bg-white'\n      \"\n      (click)=\"mode.set('write')\"\n    >\n      Write\n    </button>\n\n    <button\n      upButton\n      variant=\"ghost\"\n      class=\"transition-none rounded-none rounded-t-md\"\n      [class]=\"\n        mode() !== 'preview'? '' : 'border-x border-input bg-white'\n      \"\n      (click)=\"mode.set('preview')\"\n    >\n      Preview\n    </button>\n  </div>\n\n  @if (mode() === 'write') {\n    <div class=\"flex justify-start md:justify-end items-center gap-0.5\">\n      @for (btn of buttons; track btn.action) {\n        <button\n          upButton\n          size=\"sm\"\n          variant=\"ghost\"\n          class=\"p-0 px-2 py-1\"\n          [disabled]=\"disabled()\"\n          (click)=\"applyStyle(btn.action)\"\n        >\n          <ng-icon\n            size=\"16px\"  \n            [name]=\"btn.icon\"\n          />\n        </button>\n      }\n    </div>\n  }\n</div>\n\n<div class=\"grow relative\">\n  @if (mode() === 'preview') {\n    <div\n      upMarkdown\n      class=\"size-full absolute top-0 left-0 bg-white p-2 outline-none text-wrap break-words overflow-y-auto\"\n      [innerHTML]=\"(value() || 'Nothing to preview')\"\n    ></div>\n  }\n  @else {\n    <textarea\n      #textarea\n      class=\"size-full absolute top-0 left-0 bg-white p-2 outline-none resize-none\" \n      [value]=\"value()\"\n      [disabled]=\"disabled()\"\n      [placeholder]=\"placeholder()\"\n      (blur)=\"touch()\"\n      (input)=\"change($event)\"\n      (paste)=\"pasteImage($event)\"\n      (keyup)=\"changeSelection($event)\"\n      (mouseup)=\"changeSelection($event)\"\n    ></textarea>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: MarkdownService }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], textarea: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contextGuid: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextGuid", required: false }] }], contextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextType", required: false }] }], handleStyleWithKeyboard: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UpMarkdownDirective, UpMarkdownInputComponent };
+//# sourceMappingURL=unipin-angular-applet-markdown.mjs.map