/* * https://github.com/morethanwords/tweb * Copyright (C) 2019-2021 Eduard Kuzmenko * https://github.com/morethanwords/tweb/blob/master/LICENSE */ import cancelEvent from "../helpers/dom/cancelEvent"; import simulateEvent from "../helpers/dom/dispatchEvent"; import documentFragmentToHTML from "../helpers/dom/documentFragmentToHTML"; import findUpAttribute from "../helpers/dom/findUpAttribute"; import getRichValue from "../helpers/dom/getRichValue"; import isInputEmpty from "../helpers/dom/isInputEmpty"; import selectElementContents from "../helpers/dom/selectElementContents"; import setInnerHTML from "../helpers/dom/setInnerHTML"; import { MessageEntity } from "../layer"; import { i18n, LangPackKey, _i18n } from "../lib/langPack"; import mergeEntities from "../lib/richTextProcessor/mergeEntities"; import parseEntities from "../lib/richTextProcessor/parseEntities"; import wrapDraftText from "../lib/richTextProcessor/wrapDraftText"; let init = () => { document.addEventListener('paste', (e) => { const input = findUpAttribute(e.target, 'contenteditable="true"'); if(!input) { return; } const noLinebreaks = !!input.dataset.noLinebreaks; e.preventDefault(); let text: string, entities: MessageEntity[]; // @ts-ignore let plainText: string = (e.originalEvent || e).clipboardData.getData('text/plain'); let usePlainText = true; // @ts-ignore let html: string = (e.originalEvent || e).clipboardData.getData('text/html'); const filterEntity = (e: MessageEntity) => e._ === 'messageEntityEmoji' || (e._ === 'messageEntityLinebreak' && !noLinebreaks); if(noLinebreaks) { const regExp = /[\r\n]/g; plainText = plainText.replace(regExp, ''); html = html.replace(regExp, ''); } if(html.trim()) { html = html.replace(//, ''); html = html.replace(//, ''); const match = html.match(/([\s\S]*)<\/body>/); if(match) { html = match[1].trim(); } let span: HTMLElement = document.createElement('span'); span.innerHTML = html; let curChild = span.firstChild; while(curChild) { // * fix whitespace between elements like

asd

zxc

`; input = this.container.firstElementChild as HTMLElement; // const observer = new MutationObserver(() => { // //checkAndSetRTL(input); // if(processInput) { // processInput(); // } // }); onInputCallbacks.push(() => { // * because if delete all characters there will br left if(isInputEmpty(input)) { input.textContent = ''; } }); // ! childList for paste first symbol // observer.observe(input, {characterData: true, childList: true, subtree: true}); } else { this.container.innerHTML = ` `; input = this.container.firstElementChild as HTMLElement; //input.addEventListener('input', () => checkAndSetRTL(input)); } input.setAttribute('dir', 'auto'); if(options.inputMode) { input.inputMode = options.inputMode; } if(placeholder) { _i18n(input, placeholder, undefined, 'placeholder'); } if(label || placeholder) { const border = document.createElement('div'); border.classList.add('input-field-border'); this.container.append(border); } if(label) { this.label = document.createElement('label'); this.setLabel(); this.container.append(this.label); } if(maxLength) { const labelEl = this.container.lastElementChild as HTMLLabelElement; let showingLength = false; const onInput = () => { const wasError = input.classList.contains('error'); // * https://stackoverflow.com/a/54369605 #2 to count emoji as 1 symbol const inputLength = plainText ? (input as HTMLInputElement).value.length : [...getRichValue(input, false).value].length; const diff = maxLength - inputLength; const isError = diff < 0; input.classList.toggle('error', isError); //this.onLengthChange && this.onLengthChange(inputLength, isError); if(isError || diff <= showLengthOn) { this.setLabel(); labelEl.append(` (${maxLength - inputLength})`); if(!showingLength) showingLength = true; } else if((wasError && !isError) || showingLength) { this.setLabel(); showingLength = false; } }; onInputCallbacks.push(onInput); } const noLinebreaks = !options.withLinebreaks; if(noLinebreaks && !plainText) { input.dataset.noLinebreaks = '1'; input.addEventListener('keypress', (e) => { if(e.key === 'Enter') { e.preventDefault(); return false; } }); } if(onInputCallbacks.length) { input.addEventListener('input', () => { onInputCallbacks.forEach((callback) => callback()); }); } this.input = input; } public select() { if(!this.value) { // * avoid selecting whole empty field on iOS devices return; } if(this.options.plainText) { (this.input as HTMLInputElement).select(); // * select text } else { selectElementContents(this.input); } } public setLabel() { this.label.textContent = ''; if(this.options.labelText) { setInnerHTML(this.label, this.options.labelText); } else { this.label.append(i18n(this.options.label, this.options.labelOptions)); } } get value() { return this.options.plainText ? (this.input as HTMLInputElement).value : getRichValue(this.input, false).value; //return getRichValue(this.input); } set value(value: string) { this.setValueSilently(value, true); simulateEvent(this.input, 'input'); } public setValueSilently(value: string, fromSet?: boolean) { if(this.options.plainText) { (this.input as HTMLInputElement).value = value; } else { this.input.innerHTML = value; } } public isChanged() { return this.value !== this.originalValue; } public isValid() { return !this.input.classList.contains('error') && (!this.validate || this.validate()) && (!this.required || !isInputEmpty(this.input)); } public isValidToChange() { return this.isValid() && this.isChanged(); } public setDraftValue(value = '', silent?: boolean) { if(!this.options.plainText) { value = documentFragmentToHTML(wrapDraftText(value)); } if(silent) { this.setValueSilently(value, false); } else { this.value = value; } } public setOriginalValue(value: InputField['originalValue'] = '', silent?: boolean) { this.originalValue = value; this.setDraftValue(value, silent); } public setState(state: InputState, label?: LangPackKey) { if(label) { this.label.textContent = ''; this.label.append(i18n(label, this.options.labelOptions)); } else { this.setLabel(); } this.input.classList.toggle('error', !!(state & InputState.Error)); this.input.classList.toggle('valid', !!(state & InputState.Valid)); } public setError(label?: LangPackKey) { this.setState(InputState.Error, label); } }