mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-09-11 13:37:53 +03:00
feat(c-input-text): handle paste htm
Add paste-html prop to allow pasting html directly
This commit is contained in:
parent
a07806cd15
commit
5641816957
@ -31,6 +31,7 @@ const props = withDefaults(
|
||||
autosize?: boolean
|
||||
autofocus?: boolean
|
||||
monospace?: boolean
|
||||
pasteHtml?: boolean
|
||||
}>(),
|
||||
{
|
||||
value: '',
|
||||
@ -58,13 +59,14 @@ const props = withDefaults(
|
||||
autosize: false,
|
||||
autofocus: false,
|
||||
monospace: false,
|
||||
pasteHtml: false,
|
||||
},
|
||||
);
|
||||
const emit = defineEmits(['update:value']);
|
||||
const value = useVModel(props, 'value', emit);
|
||||
const showPassword = ref(false);
|
||||
|
||||
const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus, monospace } = toRefs(props);
|
||||
const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize, readonly, disabled, clearable, type, multiline, rows, rawText, autofocus, monospace, pasteHtml } = toRefs(props);
|
||||
|
||||
const validation
|
||||
= props.validation
|
||||
@ -81,6 +83,28 @@ const textareaRef = ref<HTMLTextAreaElement>();
|
||||
const inputRef = ref<HTMLInputElement>();
|
||||
const inputWrapperRef = ref<HTMLElement>();
|
||||
|
||||
interface HTMLElementWithValue {
|
||||
value?: string
|
||||
}
|
||||
|
||||
function onPasteInputHtml(evt: ClipboardEvent) {
|
||||
if (!pasteHtml.value) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const target = (evt.target as HTMLElementWithValue);
|
||||
if (!target) {
|
||||
return false;
|
||||
}
|
||||
evt.preventDefault();
|
||||
const textHtmlData = evt.clipboardData?.getData('text/html');
|
||||
if (textHtmlData && textHtmlData !== '') {
|
||||
value.value = textHtmlData;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
watch(
|
||||
[value, autosize, multiline, inputWrapperRef, textareaRef],
|
||||
() => nextTick(() => {
|
||||
@ -171,6 +195,7 @@ defineExpose({
|
||||
:autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
|
||||
:spellcheck="spellcheck ?? (rawText ? false : undefined)"
|
||||
:rows="rows"
|
||||
@paste="onPasteInputHtml"
|
||||
/>
|
||||
|
||||
<input
|
||||
@ -192,6 +217,7 @@ defineExpose({
|
||||
:autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
|
||||
:autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
|
||||
:spellcheck="spellcheck ?? (rawText ? false : undefined)"
|
||||
@paste="onPasteInputHtml"
|
||||
>
|
||||
|
||||
<c-button v-if="clearable && value" variant="text" circle size="small" @click="value = ''">
|
||||
|
Loading…
Reference in New Issue
Block a user