diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss index fff4d8a77f..e19972d887 100644 --- a/packages/theme/styles/editors.scss +++ b/packages/theme/styles/editors.scss @@ -19,7 +19,7 @@ .underline { font-weight: 500; - input { + .antiEditBoxInput { padding: 0.25rem 0.5rem; background-color: var(--theme-editbox-focus-color); border-radius: 0.25rem; @@ -43,7 +43,7 @@ &:focus-within::after { content: ''; } } - input { + .antiEditBoxInput { margin: 0; padding: 0; min-width: 0; @@ -86,7 +86,7 @@ border-radius: .375rem; border: 1px solid transparent; - input { + .antiEditBoxInput { color: inherit; &::placeholder { color: var(--theme-darker-color); } @@ -109,7 +109,7 @@ font-weight: 500; font-size: 1.5rem; - input { + .antiEditBoxInput { font: inherit; &::placeholder { @@ -119,17 +119,17 @@ &:hover input:not(:focus)::placeholder { color: var(--input-hover-PlaceholderColor); } - input:focus::placeholder { + .antiEditBoxInput:focus::placeholder { color: var(--input-focus-PlaceholderColor); } &.disabled { box-shadow: inset 0 0 0 1px var(--input-BorderColor); &, - input { + .antiEditBoxInput { cursor: not-allowed; } - input::placeholder { + .antiEditBoxInput::placeholder { color: var(--input-PlaceholderColor); } } @@ -139,4 +139,27 @@ content: ' *'; color: var(--theme-error-color); } + + .antiEditBoxGridWrapper { + display: grid; + &::after { + content: attr(data-value) " "; + white-space: pre-wrap; + visibility: hidden; + z-index: -1; + } + + textarea { + resize: none; + } + + &::after, textarea { + font: inherit; + outline: none; + background-color: transparent; + overflow: hidden; + grid-area: 1 / 1 / 2 / 2; + min-height: 1.25rem; + } + } } diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte index 7799919890..2f5690f735 100644 --- a/packages/ui/src/components/EditBox.svelte +++ b/packages/ui/src/components/EditBox.svelte @@ -29,7 +29,7 @@ export let value: string | number | undefined = undefined export let placeholder: IntlString = plugin.string.EditBoxPlaceholder export let placeholderParam: any | undefined = undefined - export let format: 'text' | 'password' | 'number' = 'text' + export let format: 'text' | 'password' | 'number' | 'text-multiline' = 'text' export let maxDigitsAfterPoint: number | undefined = undefined export let kind: EditStyle = 'editbox' export let autoFocus: boolean = false @@ -43,7 +43,7 @@ const dispatch = createEventDispatcher() - let input: HTMLInputElement + let input: HTMLInputElement | HTMLTextAreaElement let phTranslate: string = '' $: { @@ -135,8 +135,28 @@ class:w-full={fullSize} style:width={maxWidth} > - {#if format === 'password'} + {#if format === 'text-multiline'} +