tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

MOD-349 Contextual Uploads for MD Editor (#119)

Browse Source 
* Migrate DropArea to composition

* remove hardcoded button styling

* let markdown editor call for image upload

* allow for local testing in the docs

* validate url on set

* add chips to modal with correct defaults

* update docs to show example url doesn't load

* Bump version 0.6.4
This commit is contained in:
Carter
2023-10-26 14:34:15 -07:00
committed by GitHub
parent c056c4e79e
commit 79bdea0441
9 changed files with 192 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/drop-area.md
View File

@@ -1,8 +1,14 @@
# Drop Area
<script setup>
import { ref } from "vue";
const files = ref([])
</script>
<DemoContainer>
<InfoIcon /> Click to choose a file or drag one onto this page
<DropArea accept="*" />
<DropArea accept="*" @change="files">
<InfoIcon /> Click to choose a file or drag one onto this page
</DropArea>
</DemoContainer>
```vue

33
docs/components/markdown-editor.md
View File

@@ -1,8 +1,14 @@
# Markdown Editor
<script setup>
import { ref } from "vue";
const description = ref(null)
const description2 = ref(null)
const description = ref(null);
const description2 = ref(null);
const description3 = ref(null);
const onImageUpload = (file) => {
return URL.createObjectURL(file).replace("blob:", "");
};
</script>
The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as `CTRL+B` for bold, `CTRL+I` for italic, and more.
@@ -21,9 +27,30 @@ const description = ref(null)
<MarkdownEditor v-model="description" />
```
## With image upload
<DemoContainer>
<MarkdownEditor v-model="description2" :on-image-upload="onImageUpload" />
</DemoContainer>
```vue
<script setup lang="ts">
import { ref } from "vue";
const description = ref(null)
// Return a URL to the image for the editor to consume
const onImageUpload = (file: File): string => {
// Upload the file to your server and return a URL
// This example url will not work bc of proxy
return URL.createObjectURL(file).replace("blob:", "");
};
</script>
<MarkdownEditor v-model="description" :on-image-upload="onImageUpload" />
```
## Without heading buttons
<DemoContainer>
<MarkdownEditor v-model="description2" :heading-buttons="false" />
<MarkdownEditor v-model="description3" :heading-buttons="false" />
</DemoContainer>
```vue

6
docs/components/text-inputs.md
View File

@@ -26,7 +26,7 @@ const inputText = ref(null)
type="text"
placeholder="Text input"
/>
<Button @click="() => inputText = ''">
<Button class="r-btn" @click="() => inputText = ''">
<XIcon/>
</Button>
</div>
@@ -65,7 +65,7 @@ const inputText = ref(null)
type="text"
placeholder="Text input"
/>
<Button @click="() => inputText = ''">
<Button class="r-btn" @click="() => inputText = ''">
<XIcon/>
</Button>
</div>
@@ -92,7 +92,7 @@ const value = ref(null)
type="text"
placeholder="Text input"
/>
<Button @click="() => inputText = ''">
<Button class="r-btn" @click="() => inputText = ''">
<XIcon/>
</Button>
</div>