mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 07:11:03 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Keeping the markdown editor and viewer the same height

Browse source
This commit is contained in:
Isaiah 2023-12-02 21:27:47 -05:00
parent cf577bb7c9
commit e43e6fbe1e
1 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/tools/markdown-viewer/markdown-viewer.vue
View file

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { useStorage } from '@vueuse/core'; import { useElementSize, useStorage } from '@vueuse/core';
import { renderMarkdown } from './markdown-viewer.service'; import { renderMarkdown } from './markdown-viewer.service';
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World'); const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const inputElement = ref<HTMLElement>(); const inputElement = ref<HTMLElement>();
const { height } = useElementSize(inputElement);
</script> </script>
<template> <template>
@ -24,6 +27,6 @@ const inputElement = ref<HTMLElement>();
/> />
</n-form-item> </n-form-item>
<n-form-item label="Prettified version of your markdown"> <n-form-item label="Prettified version of your markdown">
<c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)" /> <c-card :style="`width: 100%; overflow: scroll; max-height: ${`${height.valueOf()}px`}`" v-html="renderMarkdown(rawMd)" />
</n-form-item> </n-form-item>
</template> </template>