CorentinTh/it-tools
1
1
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2024-09-11 13:37:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(c-input-text): handle paste htm

Browse Source 
Add paste-html prop to allow pasting html directly
This commit is contained in:
sharevb 2024-02-25 12:41:40 +01:00
parent a07806cd15
commit 5641816957
1 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/ui/c-input-text/c-input-text.vue
View File

@ -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 = ''">