mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-22 07:46:15 -04:00
fix: paste-html
This commit is contained in:
parent
ba84e82a8e
commit
07e53f0e2f
2 changed files with 30 additions and 7 deletions
7
components.d.ts
vendored
7
components.d.ts
vendored
|
@ -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']
|
||||
|
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue