fix: paste-html

This commit is contained in:
ShareVB 2024-12-15 19:33:46 +01:00
parent ba84e82a8e
commit 07e53f0e2f
2 changed files with 30 additions and 7 deletions

7
components.d.ts vendored
View file

@ -84,6 +84,7 @@ declare module '@vue/runtime-core' {
HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
'Home.page': typeof import('./src/pages/Home.page.vue')['default']
HtmlCleaner: typeof import('./src/tools/html-cleaner/html-cleaner.vue')['default']
HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
@ -133,18 +134,13 @@ declare module '@vue/runtime-core' {
NDivider: typeof import('naive-ui')['NDivider']
NEllipsis: typeof import('naive-ui')['NEllipsis']
NFormItem: typeof import('naive-ui')['NFormItem']
NGi: typeof import('naive-ui')['NGi']
NGrid: typeof import('naive-ui')['NGrid']
NH1: typeof import('naive-ui')['NH1']
NH3: typeof import('naive-ui')['NH3']
NIcon: typeof import('naive-ui')['NIcon']
NInputNumber: typeof import('naive-ui')['NInputNumber']
NLabel: typeof import('naive-ui')['NLabel']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
NMenu: typeof import('naive-ui')['NMenu']
NScrollbar: typeof import('naive-ui')['NScrollbar']
NSpin: typeof import('naive-ui')['NSpin']
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
@ -159,6 +155,7 @@ declare module '@vue/runtime-core' {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

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;
}
const textHtmlData = evt.clipboardData?.getData('text/html');
if (textHtmlData && textHtmlData !== '') {
evt.preventDefault();
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 = ''">
@ -338,4 +364,4 @@ defineExpose({
}
}
}
</style>
</style>