KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Markdown editor support (#1657)

Browse source 
Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Nithin David Thomas 2021-01-18 11:20:19 +05:30 • committed by GitHub
parent 58fad2561d
commit 54f15b73d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 378 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

52
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View file

@ -1,12 +1,17 @@
<template>
<div class="bottom-box" :class="wrapClass">
<div class="left-wrap">
<button class="button clear button--emoji" @click="toggleEmojiPicker">
<button
class="button clear button--emoji"
:title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
@click="toggleEmojiPicker"
>
<emoji-or-icon icon="ion-happy-outline" emoji="😊" />
</button>
<button
v-if="showAttachButton"
class="button clear button--emoji button--upload"
:title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
>
<file-upload
:size="4096 * 4096"
@ -16,6 +21,14 @@
<emoji-or-icon icon="ion-android-attach" emoji="📎" />
</file-upload>
</button>
<button
v-if="enableRichEditor"
class="button clear button--emoji"
:title="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
@click="toggleFormatMode"
>
<emoji-or-icon icon="ion-quote" emoji="🖊️" />
</button>
</div>
<div class="right-wrap">
<button
@ -70,6 +83,18 @@ export default {
type: Boolean,
default: false,
},
setFormatMode: {
type: Function,
default: () => {},
},
isFormatMode: {
type: Boolean,
default: false,
},
enableRichEditor: {
type: Boolean,
default: false,
},
},
computed: {
isNote() {
@ -90,6 +115,11 @@ export default {
return this.showFileUpload || this.isNote;
},
},
methods: {
toggleFormatMode() {
this.setFormatMode(!this.isFormatMode);
},
},
};
</script>
@ -108,34 +138,14 @@ export default {
}
.button {
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
padding: var(--space-one) var(--space-slab);
display: flex;
align-items: center;
justify-content: space-between;
&:hover {
background: var(--w-300);
}
&.is-active {
background: white;
}
&.button--emoji {
font-size: var(--font-size-small);
padding: var(--space-small);
border-radius: 9px;
background: var(--b-50);
border: 1px solid var(--color-border-light);
margin-right: var(--space-small);
&:hover {
background: var(--b-200);
}
}
&.button--note {
background: var(--y-800);
color: white;