Make editor expandable when editable

RISDEV-2950

frontend/src/components/DocumentUnitTexts.vue

@@ -17,7 +17,6 @@ const data = computed(() =>
       name: item.name,
       label: item.label,
       aria: item.label,
-      fieldSize: item.fieldSize,
       value: props.texts[item.name as keyof Texts],
     }
   }),
@@ -39,7 +38,6 @@ const data = computed(() =>
           :aria-label="item.aria"
           class="outline outline-2 outline-blue-900"
           editable
-          :field-size="item.fieldSize"
           :value="item.value"
           @update-value="emit('updateValue', [item.id, $event])"
         />

frontend/src/components/FileViewer.vue

@@ -91,7 +91,7 @@ onMounted(async () => {
       />
     </div>
 
-    <TextEditor class="grow bg-white" field-size="max" :value="fileAsHtml" />
+    <TextEditor class="grow bg-white" :value="fileAsHtml" />
 
     <PopupModal
       v-if="showModal"

frontend/src/components/OriginalFileSidePanel.vue

@@ -66,7 +66,7 @@ const uploadFileRoute = computed(() =>
         v-else
         class="h-[65vh] overflow-scroll border-1 border-solid border-gray-400"
       >
-        <TextEditor element-id="odoc" field-size="max" :value="file" />
+        <TextEditor element-id="odoc" :value="file" />
       </div>
     </div>
   </div>

frontend/src/fields/caselaw/textFields.ts

@@ -1,15 +1,13 @@
-import { FieldSize } from "../../shared/components/input/FieldSize"
-
-function defineTextEntry(name: string, label: string, fieldSize: FieldSize) {
-  return { name, label, fieldSize }
+function defineTextEntry(name: string, label: string) {
+  return { name, label }
 }
 export const texts = [
-  defineTextEntry("decisionName", "Entscheidungsname", "small"),
-  defineTextEntry("headline", "Titelzeile", "small"),
-  defineTextEntry("guidingPrinciple", "Leitsatz", "medium"),
-  defineTextEntry("headnote", "Orientierungssatz", "small"),
-  defineTextEntry("tenor", "Tenor", "medium"),
-  defineTextEntry("reasons", "Gründe", "large"),
-  defineTextEntry("caseFacts", "Tatbestand", "large"),
-  defineTextEntry("decisionReasons", "Entscheidungsgründe", "large"),
+  defineTextEntry("decisionName", "Entscheidungsname"),
+  defineTextEntry("headline", "Titelzeile"),
+  defineTextEntry("guidingPrinciple", "Leitsatz"),
+  defineTextEntry("headnote", "Orientierungssatz"),
+  defineTextEntry("tenor", "Tenor"),
+  defineTextEntry("reasons", "Gründe"),
+  defineTextEntry("caseFacts", "Tatbestand"),
+  defineTextEntry("decisionReasons", "Entscheidungsgründe"),
 ]

frontend/src/routes/kitchensink/index/textEditor.vue

@@ -10,47 +10,16 @@ import TextEditor from "@/shared/components/input/TextEditor.vue"
       Resize the window to see different views of text editor.
     </p>
 
-    <KitchensinkStory name="Maximum size">
+    <KitchensinkStory name="Editable">
       <TextEditor
         aria-label="text editor"
         class="overflow-y-auto outline outline-2 outline-blue-900"
         editable
-        field-size="max"
         value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia quibusdam totam inventore quaerat consectetur, facere iure fugit dolorem quia pariatur."
       />
     </KitchensinkStory>
 
-    <KitchensinkStory name="Large size">
-      <TextEditor
-        aria-label="text editor"
-        class="overflow-y-auto outline outline-2 outline-blue-900"
-        editable
-        field-size="large"
-        value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia quibusdam totam inventore quaerat consectetur, facere iure fugit dolorem quia pariatur."
-      />
-    </KitchensinkStory>
-
-    <KitchensinkStory name="Medium size">
-      <TextEditor
-        aria-label="text editor"
-        class="overflow-y-auto outline outline-2 outline-blue-900"
-        editable
-        field-size="medium"
-        value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia quibusdam totam inventore quaerat consectetur, facere iure fugit dolorem quia pariatur."
-      />
-    </KitchensinkStory>
-
-    <KitchensinkStory name="Small size">
-      <TextEditor
-        aria-label="text editor"
-        class="overflow-y-auto outline outline-2 outline-blue-900"
-        editable
-        field-size="small"
-        value="This texteditor is editable: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus accusamus temporibus omnis, odio harum necessitatibus voluptate sunt sapiente officia quibusdam totam inventore quaerat consectetur, facere iure fugit dolorem quia pariatur."
-      />
-    </KitchensinkStory>
-
-    <KitchensinkStory name="Disabled">
+    <KitchensinkStory name="Not editable">
       <TextEditor
         aria-label="text editor"
         class="outline outline-2 outline-blue-900"

frontend/src/shared/components/input/TextEditor.vue

@@ -28,11 +28,11 @@ import { CustomOrderedList } from "../../editor/orderedList"
 import { CustomParagraph } from "../../editor/paragraph"
 import { CustomSuperscript, CustomSubscript } from "../../editor/scriptText"
 import { TableStyle } from "../../editor/tableStyle"
-import { FieldSize } from "@/shared/components/input/FieldSize"
 import TextEditorButton, {
   EditorButton,
 } from "@/shared/components/input/TextEditorButton.vue"
 import { useCollapsingMenuBar } from "@/shared/composables/useCollapsingMenuBar"
+import IconExpand from "~icons/ic/baseline-expand"
 import IconAlignJustify from "~icons/ic/baseline-format-align-justify"
 import IconAlignRight from "~icons/ic/baseline-format-align-right"
 import IconBold from "~icons/ic/baseline-format-bold"
@@ -48,14 +48,12 @@ import IconAlignLeft from "~icons/ic/outline-format-align-left"
 
 interface Props {
   value?: string
-  fieldSize?: FieldSize
   editable?: boolean
   ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   value: undefined,
-  fieldSize: "small",
   editable: false,
   ariaLabel: "Editor Feld",
 })
@@ -223,6 +221,15 @@ const buttons = computed(() => [
   },
 ])
 
+const fixButtons = [
+  {
+    type: "",
+    icon: IconExpand,
+    ariaLabel: "fullview",
+    callback: () => (editorExpanded.value = !editorExpanded.value),
+  },
+]
+
 const editorButtons = computed(() =>
   buttons.value.map((button) => ({
     ...button,
@@ -237,6 +244,12 @@ const containerWidth = ref()
 const maxButtonEntries = computed(() =>
   Math.floor((containerWidth.value - 100) / buttonSize),
 )
+
+const editorExpanded = ref(false)
+const editorSize = computed(() => {
+  if (props.editable) return editorExpanded.value ? "h-640" : "h-320"
+  else return ""
+})
 const { collapsedButtons } = useCollapsingMenuBar(
   editorButtons,
   maxButtonEntries,
@@ -291,16 +304,20 @@ const resizeObserver = new ResizeObserver((entries) => {
             @toggle="handleButtonClick"
           />
         </div>
+        <div class="flex flex-row">
+          <TextEditorButton
+            v-for="(button, index) in fixButtons"
+            :key="index"
+            v-bind="button"
+            @toggle="handleButtonClick"
+          />
+        </div>
       </div>
       <hr />
     </div>
     <div>
       <EditorContent
-        :class="{
-          'h-64': fieldSize === 'small',
-          'h-128': fieldSize === 'medium',
-          'h-320': fieldSize === 'large',
-        }"
+        :class="editorSize"
         :data-testid="ariaLabel"
         :editor="editor"
       />

frontend/tailwind.config.js

@@ -64,6 +64,7 @@ module.exports = {
       },
       spacing: {
         unset: "unset",
+        640: "40rem",
       },
     },
   },