fix styles and words wrap

This commit is contained in:
Pavel Laptev 2024-10-30 13:27:36 +01:00 committed by Nico Domino
parent de50077ebb
commit fb0fa7eb9a
2 changed files with 9 additions and 4 deletions

View File

@ -45,7 +45,7 @@
display: flex;
flex-direction: column;
color: var(--clr-text-2);
padding: 2px;
padding: 0 2px;
border: 1px solid transparent;
border-radius: var(--radius-s);
width: calc(100% + 4px);

View File

@ -84,17 +84,19 @@
$effect(() => {
if (textBoxEl) {
if (!disabled) {
textBoxEl.setAttribute('contenteditable', 'true');
textBoxEl.setAttribute('contenteditable', 'plaintext-only');
} else {
textBoxEl.removeAttribute('contenteditable');
}
}
});
console.log('placeholder', placeholder);
</script>
<div
class="textarea-container"
style:--placeholder-text={`"${placeholder || placeholder !== '' ? placeholder : ' '}"`}
style:--placeholder-text={`"${placeholder && placeholder !== '' ? placeholder : 'Type here...'}"`}
style:--font-size={pxToRem(fontSize)}
style:--min-rows={minRows}
style:--max-rows={maxRows}
@ -112,7 +114,7 @@
role="textbox"
aria-multiline="true"
tabindex={disabled ? -1 : 0}
contenteditable
contenteditable="plaintext-only"
bind:innerText={value}
onfocus={(e: Event) => {
if (e.currentTarget) {
@ -179,6 +181,7 @@
display: flex;
flex-direction: column;
gap: 6px;
overflow-x: hidden;
}
.textarea {
@ -194,6 +197,8 @@
min-height: calc(var(--font-size) * 1.5 * var(--min-rows));
max-height: calc(var(--font-size) * 1.5 * var(--max-rows));
overflow-y: auto; /* Enable scrolling when max height is reached */
overflow-x: hidden;
word-wrap: break-word;
border-color: transparent;
transition:
border-color var(--transition-fast),