VUE - QUASAR - TIPTAP - Как установить CSS Высота на внутреннем элементе редактора

Question

Как мне получить внутреннюю часть редактора (которая выделена тонкой синей линией) до go полной высоты. Это внутренний элемент, который создается редактором всплывающей подсказки:

<div contenteditable="true" tabindex="0" class="ProseMirror" spellcheck="false"> Editable content goes here./div>

ОБНОВЛЕНИЕ:

Я вручную добавил классы ('col' и 'column') в отображаемом выводе, и теперь он работает так, как я хочу. Есть ли способ сделать это без необходимости доступа к свойству класса элемента?

<div contenteditable="true" tabindex="0" class="ProseMirror col column" spellcheck="false"> Content Here </div>

Вот код компонента, который я использую в моем примере приложения квазар. Я пробовал множество различных вариантов классов в div'ах вокруг редактора. Ничто из того, что я делаю, похоже, не влияет на полученный выше «contenteditable» контейнер div.

<template>
  <q-page class="column justify-start">
      <div class="column col absolute-full bg-secondary">
        <div class="col column editor">
          <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
            <div class="menubar">

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.bold() }"
                @click="commands.bold"
              >
                <icon name="bold" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.italic() }"
                @click="commands.italic"
              >
                <icon name="italic" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.strike() }"
                @click="commands.strike"
              >
                <icon name="strike" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.underline() }"
                @click="commands.underline"
              >
                <icon name="underline" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.code() }"
                @click="commands.code"
              >
                <icon name="code" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.paragraph() }"
                @click="commands.paragraph"
              >
                <icon name="paragraph" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 1 }) }"
                @click="commands.heading({ level: 1 })"
              >
                H1
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 2 }) }"
                @click="commands.heading({ level: 2 })"
              >
                H2
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 3 }) }"
                @click="commands.heading({ level: 3 })"
              >
                H3
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.bullet_list() }"
                @click="commands.bullet_list"
              >
                <icon name="ul" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.ordered_list() }"
                @click="commands.ordered_list"
              >
                <icon name="ol" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.blockquote() }"
                @click="commands.blockquote"
              >
                <icon name="quote" />
              </button>

              <button
                class="menubar__button"
                :class="{ 'is-active': isActive.code_block() }"
                @click="commands.code_block"
              >
                <icon name="code" />
              </button>

              <button
                class="menubar__button"
                @click="commands.horizontal_rule"
              >
                <icon name="hr" />
              </button>

              <button
                class="menubar__button"
                @click="commands.undo"
              >
                <icon name="undo" />
              </button>

              <button
                class="menubar__button"
                @click="commands.redo"
              >
                <icon name="redo" />
              </button>

            </div>
          </editor-menu-bar>
          <editor-content class="col column editor__content" :editor="editor" />
        </div>
      </div>
  </q-page>
</template>

<script>
import Icon from 'components/Icon'
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
  Blockquote,
  CodeBlock,
  HardBreak,
  Heading,
  HorizontalRule,
  OrderedList,
  BulletList,
  ListItem,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Link,
  Strike,
  Underline,
  History
} from 'tiptap-extensions'

export default {
  components: {
    EditorContent,
    EditorMenuBar,
    Icon
  },
  data () {
    return {
      editor: new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new HorizontalRule(),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Link(),
          new Bold(),
          new Code(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History()
        ],
        content: `
          <h2>
            Hi there,
          </h2>
          <p>
            this is a very <em>basic</em> example of tiptap.
          </p>
          <pre><code>body { display: none; }

• Обычный список
• С обычными элементами

Это удивительно ? - мама

`})}}, beforeDestroy () {this.editor.destroy ()}}

Я узнал о Vue . js & Набор инструментов Quasar UI. Я хочу использовать компонент редактора TIPTAP WYSIWYG (доступно здесь: https://github.com/scrumpy/tiptap). Я в порядке с их примерами, я могу заставить компонент загружаться и работать нормально. Но я не могу понять, как с самого начала получить внутреннюю часть редактирования (которая выделяется синим цветом при нажатии на нее) до go «Полная высота».

Я перепробовал все, что мог придумать, искал и искал какой-то пример. Редактор прекрасно расширяется (растет), когда вы добавляете контент, но по какой-то причине я не могу запустить его в полную высоту - что я отмечу, что пример также не иллюстрирует.

Что я не делаю?