All files / src/plugins CodeMirrorEditor.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template lang="pug">
mixin IconTool(tooltip)
  a.b-btn-toolbar.btn.btn-sm(data-toggle="tooltip" data-placement="top"
    title=tooltip type='button')&attributes(attributes)
    block
 
mixin Divider
  button.btn.btn-secondary.btn-light.mr-0.ml-0.pr-0.pl-0(type="button" disabled)
 
.b-codemirror
  .btn-toolbar.justify-content-between(v-if='showMarkdownTools' ref='toolbar' role='toolbar', aria-label='Toolbar with button groups')
    .btn-toolbar
      +IconTool("Heading")(@click='heading') #[i.fas.fa-heading]
      +Divider.mx-1
      +IconTool("Bold (Ctrl+B)")(@click='bold') #[i.fas.fa-bold]
      +IconTool("Italic (Ctrl+I)")(@click='italic') #[i.fas.fa-italic]
      +IconTool("Strikethrough")(@click='strikethrough') #[i.fas.fa-strikethrough]
      +Divider.mx-1
      +IconTool("Unordered List  (Ctrl+L)")(@click='list') #[i.fas.fa-list]
      +IconTool("Numbered List")(@click='numberedList') #[i.fas.fa-list-ol]
      +IconTool("Task List")(@click='taskList') #[i.fas.fa-tasks]
      +Divider.mx-1
      +IconTool("Table")(@click='table') #[i.fas.fa-table]
      +IconTool("Indent")(@click='indent') #[i.fas.fa-indent]
      +IconTool("Outdent")(@click='outdent') #[i.fas.fa-outdent]
      +Divider.mx-1
      +IconTool("Quote")(@click='quote') #[i.fas.fa-quote-right]
      +IconTool("Code")(@click='code') #[i.fas.fa-code]
      +IconTool("Link (Ctrl+K)")(@click='link') #[i.fas.fa-link]
      +Divider.mx-1
      +IconTool("Undo (Ctrl+Z)")(@click='undo') #[i.fas.fa-undo]
      +IconTool("Redo (Ctrl+Shift+Z)")(@click='redo') #[i.fas.fa-redo]
      +Divider.mx-1
      a(href="https://guides.github.com/features/mastering-markdown/"
        target="_blank"  rel="noopener")
        +IconTool("Markdown Info") #[i.fas.fa-info-circle]
      +Divider.mx-1
      slot(name='toolbar-extra' v-bind='{ cminstance, valueLength, maxLength }')
        +IconTool()(style='pointer-events: none;')
          div(:class='{"text-danger": valueLength == maxLength}')
            span Characters: {{valueLength}}
            span(v-if='maxLength > 0') /{{maxLength}}
  .border-top
    textarea(ref="textarea" :name="name")
</template>
 
<script>
 
export { default } from "./CodeMirrorEditor.vue.js";
 
</script>
 
<style>
 
.b-codemirror {
  width: 100%;
}
 
.b-codemirror .cm-s-default .cm-quote-1 {
  color: #8bbdd8 !important;
}
.b-codemirror .cm-s-default .cm-quote-2 {
  color: #83a3bd !important;
}
.b-codemirror .cm-s-default .cm-quote-3 {
  color: #7c789c !important;
}
.b-codemirror .cm-s-default .cm-quote-4 {
  color: #876089 !important;
}
.b-codemirror .cm-s-default .cm-quote-5 {
  color: #6d4672 !important;
}
 
.b-codemirror .b-btn-toolbar:hover {
  color: #fff;
  background-color: #6c757d;
}
</style>