fix: paste-html
This commit is contained in:
		
							parent
							
								
									ba84e82a8e
								
							
						
					
					
						commit
						07e53f0e2f
					
				
							
								
								
									
										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 = ''"> | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user