diff --git a/frontend/src/components/DocumentUnitTexts.vue b/frontend/src/components/DocumentUnitTexts.vue
index bd496185d8..3c40f99818 100644
--- a/frontend/src/components/DocumentUnitTexts.vue
+++ b/frontend/src/components/DocumentUnitTexts.vue
@@ -21,6 +21,7 @@ const data = computed(() =>
aria: item.label,
value: props.texts[item.name as keyof Texts],
fieldType: item.fieldType,
+ fieldSize: item.fieldSize,
}
}),
)
@@ -42,6 +43,7 @@ const data = computed(() =>
:aria-label="item.aria"
class="ml-2 pl-2 outline outline-2 outline-blue-900"
editable
+ :field-size="item.fieldSize"
:value="item.value"
@update-value="emit('updateValue', [item.id, $event])"
/>
diff --git a/frontend/src/fields/caselaw/textFields.ts b/frontend/src/fields/caselaw/textFields.ts
index 075834f6ba..d0c239106b 100644
--- a/frontend/src/fields/caselaw/textFields.ts
+++ b/frontend/src/fields/caselaw/textFields.ts
@@ -1,16 +1,23 @@
import TextAreaInput from "@/shared/components/input/TextAreaInput.vue"
import TextInput from "@/shared/components/input/TextInput.vue"
+import { TextAreaInputAttributes } from "@/shared/components/input/types"
function defineTextEntry(
name: string,
label: string,
fieldType: typeof TextInput | typeof TextAreaInput,
+ fieldSize: TextAreaInputAttributes["fieldSize"] = "big",
) {
- return { name, label, fieldType }
+ return {
+ name,
+ label,
+ fieldType,
+ ...(fieldType == TextAreaInput && { fieldSize }),
+ }
}
export const texts = [
defineTextEntry("decisionName", "Entscheidungsname", TextInput),
- defineTextEntry("headline", "Titelzeile", TextAreaInput),
+ defineTextEntry("headline", "Titelzeile", TextAreaInput, "small"),
defineTextEntry("guidingPrinciple", "Leitsatz", TextAreaInput),
defineTextEntry("headnote", "Orientierungssatz", TextAreaInput),
defineTextEntry("tenor", "Tenor", TextAreaInput),
diff --git a/frontend/src/routes/kitchensink/index/textEditor.vue b/frontend/src/routes/kitchensink/index/textEditor.vue
index 551e2e7960..32c6bad49e 100644
--- a/frontend/src/routes/kitchensink/index/textEditor.vue
+++ b/frontend/src/routes/kitchensink/index/textEditor.vue
@@ -10,20 +10,40 @@ import TextEditor from "@/shared/components/input/TextEditor.vue"
Resize the window to see different views of text editor.
-
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/shared/components/input/FieldSize.ts b/frontend/src/shared/components/input/FieldSize.ts
deleted file mode 100644
index d7ced7ffb5..0000000000
--- a/frontend/src/shared/components/input/FieldSize.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type FieldSize = "small" | "medium" | "large" | "max" | "100percent"
diff --git a/frontend/src/shared/components/input/TextEditor.vue b/frontend/src/shared/components/input/TextEditor.vue
index 87bdf4f429..acd78ba2ef 100644
--- a/frontend/src/shared/components/input/TextEditor.vue
+++ b/frontend/src/shared/components/input/TextEditor.vue
@@ -31,6 +31,7 @@ import { TableStyle } from "../../editor/tableStyle"
import TextEditorButton, {
EditorButton,
} from "@/shared/components/input/TextEditorButton.vue"
+import { TextAreaInputAttributes } from "@/shared/components/input/types"
import { useCollapsingMenuBar } from "@/shared/composables/useCollapsingMenuBar"
import IconExpand from "~icons/ic/baseline-expand"
import IconAlignJustify from "~icons/ic/baseline-format-align-justify"
@@ -50,12 +51,14 @@ interface Props {
value?: string
editable?: boolean
ariaLabel?: string
+ fieldSize?: TextAreaInputAttributes["fieldSize"]
}
const props = withDefaults(defineProps(), {
value: undefined,
editable: false,
ariaLabel: "Editor Feld",
+ fieldSize: "medium",
})
const emit = defineEmits<{
@@ -247,8 +250,15 @@ const maxButtonEntries = computed(() =>
const editorExpanded = ref(false)
const editorSize = computed(() => {
- if (props.editable) return editorExpanded.value ? "h-640" : "h-320"
- else return ""
+ return editorExpanded.value
+ ? "h-640"
+ : props.fieldSize == "big"
+ ? "h-320"
+ : props.fieldSize == "medium"
+ ? "h-160"
+ : props.fieldSize == "small"
+ ? "h-96"
+ : undefined
})
const { collapsedButtons } = useCollapsingMenuBar(
editorButtons,
diff --git a/frontend/src/shared/components/input/types.ts b/frontend/src/shared/components/input/types.ts
index a3c53d8669..f605a183cd 100644
--- a/frontend/src/shared/components/input/types.ts
+++ b/frontend/src/shared/components/input/types.ts
@@ -168,16 +168,17 @@ export interface CheckboxInputField extends BaseInputField {
//TEXTAREA
export type TextaraInputModelType = string
-export interface TextaraInputAttributes extends BaseInputAttributes {
+export interface TextAreaInputAttributes extends BaseInputAttributes {
placeholder?: string
readOnly?: boolean
autosize?: boolean
rows?: number
+ fieldSize: "big" | "medium" | "small"
}
-export interface TextaraInputField extends BaseInputField {
+export interface TextAreaInputField extends BaseInputField {
type: InputType.TEXTAREA
- inputAttributes: TextaraInputAttributes
+ inputAttributes: TextAreaInputAttributes
}
export type InputField =
@@ -189,7 +190,7 @@ export type InputField =
| DateChipsInputField
| NestedInputField
| ComboboxInputField
- | TextaraInputField
+ | TextAreaInputField
export type InputAttributes =
| TextInputAttributes
@@ -198,7 +199,7 @@ export type InputAttributes =
| NestedInputAttributes
| DateAttributes
| ComboboxAttributes
- | TextaraInputAttributes
+ | TextAreaInputAttributes
export type ModelType =
| TextInputModelType
diff --git a/frontend/test/shared/components/input/textEditor.spec.ts b/frontend/test/shared/components/input/textEditor.spec.ts
index 93fa38b7ea..22b2720e49 100644
--- a/frontend/test/shared/components/input/textEditor.spec.ts
+++ b/frontend/test/shared/components/input/textEditor.spec.ts
@@ -39,7 +39,6 @@ describe("text editor", async () => {
render(TextEditor, {
props: {
value: "Test Value",
- fieldSize: "large",
ariaLabel: "Test Editor Feld",
},
global: { plugins: [router] },
@@ -56,6 +55,20 @@ describe("text editor", async () => {
expect(screen.getByTestId("Test Editor Feld")).toBeInTheDocument()
})
+ test.each([
+ ["big", "h-320"],
+ ["medium", "h-160"],
+ ["small", "h-96"],
+ [undefined, "h-160"],
+ ])("renders %s field with correct class", async (a, expected) => {
+ render(TextEditor, {
+ props: { fieldSize: a },
+ global: { plugins: [router] },
+ })
+
+ expect(await screen.findByTestId("Editor Feld")).toHaveClass(expected)
+ })
+
test("show buttons on focus", async () => {
render(TextEditor, {
props: {