feat(UI): resizable textarea in new/edito note, closes #747

src/renderer/components/BaseConfirmModal.vue

@@ -56,8 +56,8 @@ const { t } = useI18n();
 
 const props = defineProps({
    size: {
-      type: String as PropType<'small' | 'medium' | '400' | 'large'>,
+      type: String as PropType<'small' | 'medium' | '400' | 'large' | 'resize'>,
-      validator: (prop: string) => ['small', 'medium', '400', 'large'].includes(prop),
+      validator: (prop: string) => ['small', 'medium', '400', 'large', 'resize'].includes(prop),
       default: 'small'
    },
    hideFooter: {
@@ -88,6 +88,8 @@ const modalSizeClass = computed(() => {
       return 'modal-sm';
    if (props.size === '400')
       return 'modal-400';
+   if (props.size === 'resize')
+      return 'modal-resize';
    else if (props.size === 'large')
       return 'modal-lg';
    else return '';
@@ -120,6 +122,12 @@ onBeforeUnmount(() => {
   max-width: 400px;
 }
 
+.modal-resize .modal-container {
+  max-width: 95vw;
+  max-height: 95vh;
+  width: auto;
+}
+
 .modal.modal-sm .modal-container {
   padding: 0;
 }

src/renderer/components/BaseTextEditor.vue

@@ -4,7 +4,11 @@
          :id="`editor-${id}`"
          class="editor"
          :class="editorClass"
-         :style="{height: `${height}px`}"
+         :style="{
+            height: `${height}px`,
+            width: width ? `${width}px` : null,
+            resize: resizable ? 'both' : 'none'
+         }"
       />
    </div>
 </template>
@@ -17,7 +21,7 @@ import 'ace-builds/webpack-resolver';
 
 import { uidGen } from 'common/libs/uidGen';
 import { storeToRefs } from 'pinia';
-import { onMounted, watch } from 'vue';
+import { PropType, onMounted, watch } from 'vue';
 
 import { useSettingsStore } from '@/stores/settings';
 
@@ -25,10 +29,12 @@ const props = defineProps({
    modelValue: String,
    mode: { type: String, default: 'text' },
    editorClass: { type: String, default: '' },
+   resizable: { type: Boolean, default: false },
    autoFocus: { type: Boolean, default: false },
    readOnly: { type: Boolean, default: false },
    showLineNumbers: { type: Boolean, default: true },
-   height: { type: Number, default: 200 }
+   height: { type: Number, default: 200 },
+   width: { type: [Number, Boolean] as PropType<number|false>, default: false }
 });
 const emit = defineEmits(['update:modelValue']);
 const settingsStore = useSettingsStore();
@@ -132,8 +138,10 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .editor-wrapper {
-  .editor {
+   .editor {
-    width: 100%;
+      width: 100%;
-  }
+      height: 100%;
+      max-width: 90vw;
+   }
 }
 </style>

src/renderer/components/ModalNoteEdit.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      size="medium"
+      size="resize"
       :disable-autofocus="true"
       :close-on-confirm="!!localNote.note.length"
       :confirm-text="t('general.save')"
@@ -52,6 +52,10 @@
                   v-model="localNote.note"
                   :mode="editorMode"
                   :show-line-numbers="false"
+                  :auto-focus="true"
+                  :height="400"
+                  :width="640"
+                  :resizable="true"
                />
             </div>
          </form>

src/renderer/components/ModalNoteNew.vue

@@ -1,6 +1,6 @@
 <template>
    <ConfirmModal
-      size="medium"
+      size="resize"
       :disable-autofocus="true"
       :close-on-confirm="!!newNote.note.length"
       :confirm-text="t('general.save')"
@@ -52,6 +52,10 @@
                   v-model="newNote.note"
                   :mode="editorMode"
                   :show-line-numbers="false"
+                  :auto-focus="true"
+                  :height="400"
+                  :width="640"
+                  :resizable="true"
                />
             </div>
          </form>