liz/wikijs-fork
liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: editor md + source translations

Browse Source
This commit is contained in:
Nick 2019-06-15 21:45:53 -04:00
parent a3be2a772a
commit e4fc2b7b12
2 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
client/components/editor/editor-markdown.vue
View File

@ -5,20 +5,20 @@
v-spacer v-spacer
v-btn.animated.fadeInRight(flat, @click='closeAllModal') v-btn.animated.fadeInRight(flat, @click='closeAllModal')
v-icon(left) remove_circle_outline v-icon(left) remove_circle_outline
span Back to Editor span {{$t('editor:backToEditor')}}
template(v-else) template(v-else)
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0 v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
v-icon format_bold v-icon format_bold
span Bold span {{$t('editor:markup.bold')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0 v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
v-icon format_italic v-icon format_italic
span Italic span {{$t('editor:markup.italic')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0 v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
v-icon format_strikethrough v-icon format_strikethrough
span Strikethrough span {{$t('editor:markup.strikethrough')}}
v-menu(offset-y, open-on-hover) v-menu(offset-y, open-on-hover)
v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0 v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0
v-icon text_fields v-icon text_fields
@ -27,16 +27,16 @@
v-list-tile(@click='setHeaderLine(n)', :key='idx') v-list-tile(@click='setHeaderLine(n)', :key='idx')
v-list-tile-action v-list-tile-action
v-icon(:size='24 - (idx - 1) * 2') title v-icon(:size='24 - (idx - 1) * 2') title
v-list-tile-title Heading {{n}} v-list-tile-title {{$t('editor:markup.heading', { level: n })}}
v-divider(v-if='idx < 5') v-divider(v-if='idx < 5')
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0 v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0
v-icon vertical_align_bottom v-icon vertical_align_bottom
span Subscript span {{$t('editor:markup.subscript')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0 v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0
v-icon vertical_align_top v-icon vertical_align_top
span Superscript span {{$t('editor:markup.superscript')}}
v-menu(offset-y, open-on-hover) v-menu(offset-y, open-on-hover)
v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0 v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0
v-icon format_quote v-icon format_quote
@ -44,98 +44,98 @@
v-list-tile(@click='insertBeforeEachLine({ content: `> `})') v-list-tile(@click='insertBeforeEachLine({ content: `> `})')
v-list-tile-action v-list-tile-action
v-icon format_quote v-icon format_quote
v-list-tile-title Blockquote v-list-tile-title {{$t('editor:markup.blockquote')}}
v-divider v-divider
v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})') v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
v-list-tile-action v-list-tile-action
v-icon(color='blue') format_quote v-icon(color='blue') format_quote
v-list-tile-title Info Blockquote v-list-tile-title {{$t('editor:markup.blockquoteInfo')}}
v-divider v-divider
v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})') v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
v-list-tile-action v-list-tile-action
v-icon(color='success') format_quote v-icon(color='success') format_quote
v-list-tile-title Success Blockquote v-list-tile-title {{$t('editor:markup.blockquoteSuccess')}}
v-divider v-divider
v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})') v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
v-list-tile-action v-list-tile-action
v-icon(color='warning') format_quote v-icon(color='warning') format_quote
v-list-tile-title Warning Blockquote v-list-tile-title {{$t('editor:markup.blockquoteWarning')}}
v-divider v-divider
v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})') v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})')
v-list-tile-action v-list-tile-action
v-icon(color='error') format_quote v-icon(color='error') format_quote
v-list-tile-title Error Blockquote v-list-tile-title {{$t('editor:markup.blockquoteError')}}
v-divider v-divider
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0 v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
v-icon format_list_bulleted v-icon format_list_bulleted
span Unordered List span {{$t('editor:markup.unorderedList')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0 v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0
v-icon format_list_numbered v-icon format_list_numbered
span Ordered List span {{$t('editor:markup.orderedList')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0 v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
v-icon space_bar v-icon space_bar
span Inline Code span {{$t('editor:markup.inlineCode')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0 v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
v-icon font_download v-icon font_download
span Keyboard Key span {{$t('editor:markup.keyboardKey')}}
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0 v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
v-icon remove v-icon remove
span Horizontal Bar span {{$t('editor:markup.horizontalBar')}}
template(v-if='$vuetify.breakpoint.mdAndUp') template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer v-spacer
v-tooltip(bottom, color='primary') v-tooltip(bottom, color='primary')
v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='previewShown = !previewShown').mx-0 v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='previewShown = !previewShown').mx-0
v-icon flip v-icon flip
span Hide / Show Preview Pane span {{$t('editor:markup.togglePreviewPane')}}
.editor-markdown-main .editor-markdown-main
.editor-markdown-sidebar .editor-markdown-sidebar
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0 v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0
v-icon link v-icon link
span Insert Link span {{$t('editor:markup.insertLink')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0 v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode
span Insert Assets span {{$t('editor:markup.insertAssets')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0 v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard
span Insert Block span {{$t('editor:markup.insertBlock')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0 v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
v-icon code v-icon code
span Insert Code Block span {{$t('editor:markup.insertCodeBlock')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0 v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
v-icon play_circle_outline v-icon play_circle_outline
span Insert Video / Audio span {{$t('editor:markup.insertVideoAudio')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0 v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
v-icon multiline_chart v-icon multiline_chart
span Insert Diagram span {{$t('editor:markup.insertDiagram')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0 v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
v-icon functions v-icon functions
span Insert Math Expression span {{$t('editor:markup.insertMathExpression')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0 v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
v-icon border_outer v-icon border_outer
span Table Helper span {{$t('editor:markup.tableHelper')}}
template(v-if='$vuetify.breakpoint.mdAndUp') template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer v-spacer
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0 v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
v-icon crop_free v-icon crop_free
span Distraction Free Mode span {{$t('editor:markup.distractionFreeMode')}}
v-tooltip(right, color='teal') v-tooltip(right, color='teal')
v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0 v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0
v-icon(:color='helpShown ? `teal` : ``') help v-icon(:color='helpShown ? `teal` : ``') help
span Markdown Formatting Help span {{$t('editor:markup.markdownFormattingHelp')}}
.editor-markdown-editor .editor-markdown-editor
codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput') codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
transition(name='editor-markdown-preview') transition(name='editor-markdown-preview')
@ -249,7 +249,8 @@ export default {
}, },
props: { props: {
save: { save: {
type: Function type: Function,
default: () => {}
} }
}, },
data() { data() {
@ -387,7 +388,7 @@ export default {
if (!end) { end = start } if (!end) { end = start }
if (!this.cm.doc.somethingSelected()) { if (!this.cm.doc.somethingSelected()) {
return this.$store.commit('showNotification', { return this.$store.commit('showNotification', {
message: 'You must select something first!', message: this.$t('editor:markup.noSelectionError'),
style: 'warning', style: 'warning',
icon: 'warning' icon: 'warning'
}) })

7
client/components/source.vue
View File

@ -3,11 +3,12 @@
nav-header nav-header
v-content v-content
v-toolbar(color='primary', dark) v-toolbar(color='primary', dark)
.subheading Viewing source of page #[strong /{{path}}] i18next.subheading(path='common:page.viewingSource', tag='div')
strong(place='path') /{{path}}]
template(v-if='$vuetify.breakpoint.mdAndUp') template(v-if='$vuetify.breakpoint.mdAndUp')
v-spacer v-spacer
.caption.blue--text.text--lighten-3 ID {{pageId}} .caption.blue--text.text--lighten-3 {{$t('common:page.id', { id: pageId })}}
v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') {{$t('common:page.returnNormalView')}}
v-card(tile) v-card(tile)
v-card-text v-card-text
v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`') v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')