editor-code.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. <template lang='pug'>
  2. .editor-code
  3. v-toolbar.editor-code-toolbar(dense, color='primary', dark)
  4. v-btn(icon).mx-0
  5. svg.icons.is-18(role='img')
  6. title Bold
  7. use(xlink:href='#fa-bold')
  8. v-btn(icon).mx-0
  9. svg.icons.is-18(role='img')
  10. title Italic
  11. use(xlink:href='#fa-italic')
  12. v-btn(icon).mx-0
  13. svg.icons.is-18(role='img')
  14. title Strikethrough
  15. use(xlink:href='#fa-strikethrough')
  16. v-menu(offset-y, open-on-hover)
  17. v-btn(icon, slot='activator').mx-0
  18. svg.icons.is-18(role='img')
  19. title Heading
  20. use(xlink:href='#fa-heading')
  21. v-list
  22. v-list-tile(v-for='(n, idx) in 6', @click='', :key='idx')
  23. v-list-tile-action
  24. svg.icons.is-18(role='img')
  25. title Heading {{n}}
  26. use(xlink:href='#fa-heading')
  27. v-list-tile-title Heading {{n}}
  28. v-btn(icon).mx-0
  29. svg.icons.is-18(role='img')
  30. title Blockquote
  31. use(xlink:href='#fa-quote-left')
  32. v-btn(icon).mx-0
  33. svg.icons.is-18(role='img')
  34. title Unordered List
  35. use(xlink:href='#fa-list-ul')
  36. v-btn(icon).mx-0
  37. svg.icons.is-18(role='img')
  38. title Ordered List
  39. use(xlink:href='#fa-list-ol')
  40. v-btn(icon).mx-0
  41. svg.icons.is-18(role='img')
  42. title Link
  43. use(xlink:href='#fa-link')
  44. v-btn(icon).mx-0
  45. svg.icons.is-18(role='img')
  46. title Inline Code
  47. use(xlink:href='#fa-terminal')
  48. v-btn(icon).mx-0
  49. svg.icons.is-18(role='img')
  50. title Code Block
  51. use(xlink:href='#fa-code')
  52. v-btn(icon).mx-0
  53. svg.icons.is-18(role='img')
  54. title Horizontal Bar
  55. use(xlink:href='#fa-minus')
  56. .editor-code-main
  57. .editor-code-editor
  58. .editor-code-editor-title(v-if='previewShown', @click='previewShown = false') Editor
  59. .editor-code-editor-title(v-else='previewShown', @click='previewShown = true'): v-icon(dark) drag_indicator
  60. codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
  61. transition(name='editor-code-preview')
  62. .editor-code-preview(v-if='previewShown')
  63. .editor-code-preview-title(@click='previewShown = false') Preview
  64. .editor-code-preview-content.markdown-content(ref='editorPreview', v-html='previewHTML')
  65. v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', fixed, left, bottom)
  66. v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
  67. v-icon add_circle
  68. v-icon close
  69. v-btn(color='teal', fab, dark): v-icon image
  70. v-btn(color='pink', fab, dark): v-icon insert_drive_file
  71. v-btn(color='red', fab, dark): v-icon play_circle_outline
  72. v-btn(color='purple', fab, dark): v-icon multiline_chart
  73. v-btn(color='indigo', fab, dark): v-icon functions
  74. </template>
  75. <script>
  76. import _ from 'lodash'
  77. // ========================================
  78. // IMPORTS
  79. // ========================================
  80. // Code Mirror
  81. import { codemirror } from 'vue-codemirror'
  82. import 'codemirror/lib/codemirror.css'
  83. // Language
  84. import 'codemirror/mode/markdown/markdown.js'
  85. // Addons
  86. import 'codemirror/addon/selection/active-line.js'
  87. import 'codemirror/addon/display/fullscreen.js'
  88. import 'codemirror/addon/display/fullscreen.css'
  89. import 'codemirror/addon/selection/mark-selection.js'
  90. import 'codemirror/addon/scroll/annotatescrollbar.js'
  91. import 'codemirror/addon/search/matchesonscrollbar.js'
  92. import 'codemirror/addon/search/searchcursor.js'
  93. import 'codemirror/addon/search/match-highlighter.js'
  94. // Markdown-it
  95. import MarkdownIt from 'markdown-it'
  96. import mdEmoji from 'markdown-it-emoji'
  97. import mdTaskLists from 'markdown-it-task-lists'
  98. import mdExpandTabs from 'markdown-it-expand-tabs'
  99. import mdAbbr from 'markdown-it-abbr'
  100. import mdSup from 'markdown-it-sup'
  101. import mdSub from 'markdown-it-sub'
  102. import mdMark from 'markdown-it-mark'
  103. import mdImsize from 'markdown-it-imsize'
  104. // Prism (Syntax Highlighting)
  105. import Prism from '@/libs/prism/prism.js'
  106. // ========================================
  107. // INIT
  108. // ========================================
  109. // Platform detection
  110. const CtrlKey = /Mac/.test(navigator.platform) ? 'Cmd' : 'Ctrl'
  111. // Markdown Instance
  112. const md = new MarkdownIt({
  113. html: true,
  114. breaks: true,
  115. linkify: true,
  116. typography: true,
  117. highlight(str, lang) {
  118. return `<pre class="line-numbers"><code class="language-${lang}">${str}</code></pre>`
  119. }
  120. })
  121. .use(mdEmoji)
  122. .use(mdTaskLists)
  123. .use(mdExpandTabs)
  124. .use(mdAbbr)
  125. .use(mdSup)
  126. .use(mdSub)
  127. .use(mdMark)
  128. .use(mdImsize)
  129. // ========================================
  130. // HELPER FUNCTIONS
  131. // ========================================
  132. // Inject line numbers for preview scroll sync
  133. let linesMap = []
  134. function injectLineNumbers (tokens, idx, options, env, slf) {
  135. let line
  136. if (tokens[idx].map && tokens[idx].level === 0) {
  137. line = tokens[idx].map[0]
  138. tokens[idx].attrJoin('class', 'line')
  139. tokens[idx].attrSet('data-line', String(line))
  140. linesMap.push(line)
  141. }
  142. return slf.renderToken(tokens, idx, options, env, slf)
  143. }
  144. md.renderer.rules.paragraph_open = injectLineNumbers
  145. md.renderer.rules.heading_open = injectLineNumbers
  146. // ========================================
  147. // Vue Component
  148. // ========================================
  149. export default {
  150. components: {
  151. codemirror
  152. },
  153. data() {
  154. return {
  155. fabInsertMenu: false,
  156. code: '# Header 1\n\nSample **Text**\nhttp://wiki.js.org\n:rocket: :) :( :| :P\n\n## Header 2\nSample Text\n\n```javascript\nvar test = require("test");\n\n// some comment\nconst foo = bar(\'param\') + 1.234;\n```\n\n### Header 3\nLorem *ipsum* ~~text~~',
  157. cmOptions: {
  158. tabSize: 2,
  159. mode: 'text/markdown',
  160. theme: 'wikijs-dark',
  161. lineNumbers: true,
  162. lineWrapping: true,
  163. line: true,
  164. styleActiveLine: true,
  165. highlightSelectionMatches: {
  166. annotateScrollbar: true
  167. },
  168. viewportMargin: 50
  169. },
  170. previewShown: true,
  171. previewHTML: ''
  172. }
  173. },
  174. computed: {
  175. cm() {
  176. return this.$refs.cm.codemirror
  177. },
  178. isMobile() {
  179. return this.$vuetify.breakpoint.smAndDown
  180. }
  181. },
  182. methods: {
  183. onCmReady(cm) {
  184. let self = this
  185. const keyBindings = {
  186. 'F11' (cm) {
  187. cm.setOption('fullScreen', !cm.getOption('fullScreen'))
  188. },
  189. 'Esc' (cm) {
  190. if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
  191. }
  192. }
  193. _.set(keyBindings, `${CtrlKey}-S`, cm => {
  194. self.$parent.save()
  195. })
  196. cm.setSize(null, 'calc(100vh - 100px)')
  197. cm.setOption('extraKeys', keyBindings)
  198. cm.on('cursorActivity', cm => {
  199. this.toolbarSync(cm)
  200. this.scrollSync(cm)
  201. })
  202. this.onCmInput(this.code)
  203. },
  204. onCmInput: _.debounce(function (newContent) {
  205. linesMap = []
  206. this.$store.set('editor/content', newContent)
  207. this.previewHTML = md.render(newContent)
  208. this.$nextTick(() => {
  209. Prism.highlightAllUnder(this.$refs.editorPreview)
  210. this.scrollSync(this.cm)
  211. })
  212. }, 500),
  213. /**
  214. * Update toolbar state
  215. */
  216. toolbarSync(cm) {
  217. const pos = cm.getCursor('start')
  218. const token = cm.getTokenAt(pos)
  219. if (!token.type) { return }
  220. console.info(token)
  221. },
  222. /**
  223. * Update scroll sync
  224. */
  225. scrollSync: _.debounce(function (cm) {
  226. if (!this.previewShown || cm.somethingSelected()) { return }
  227. let currentLine = cm.getCursor().line
  228. if (currentLine < 3) {
  229. this.Velocity(this.$refs.editorPreview, 'stop', true)
  230. this.Velocity(this.$refs.editorPreview.firstChild, 'scroll', { offset: '-50', duration: 1000, container: this.$refs.editorPreview })
  231. } else {
  232. let closestLine = _.findLast(linesMap, n => n <= currentLine)
  233. let destElm = this.$refs.editorPreview.querySelector(`[data-line='${closestLine}']`)
  234. if (destElm) {
  235. this.Velocity(this.$refs.editorPreview, 'stop', true)
  236. this.Velocity(destElm, 'scroll', { offset: '-100', duration: 1000, container: this.$refs.editorPreview })
  237. }
  238. }
  239. }, 500),
  240. toggleAround (before, after) {
  241. }
  242. }
  243. }
  244. </script>
  245. <style lang='scss'>
  246. .editor-code {
  247. &-main {
  248. display: flex;
  249. width: 100%;
  250. }
  251. &-editor {
  252. background-color: darken(mc('grey', '900'), 4.5%);
  253. flex: 1 1 50%;
  254. display: block;
  255. height: calc(100vh - 96px);
  256. position: relative;
  257. &-title {
  258. background-color: mc('grey', '800');
  259. border-bottom-left-radius: 5px;
  260. display: inline-flex;
  261. height: 30px;
  262. justify-content: center;
  263. align-items: center;
  264. padding: 0 1rem;
  265. color: mc('grey', '500');
  266. position: absolute;
  267. top: 0;
  268. right: 0;
  269. z-index: 7;
  270. text-transform: uppercase;
  271. font-size: .7rem;
  272. cursor: pointer;
  273. @include until($tablet) {
  274. display: none;
  275. }
  276. }
  277. }
  278. &-preview {
  279. flex: 1 1 50%;
  280. background-color: mc('grey', '100');
  281. position: relative;
  282. height: calc(100vh - 100px);
  283. overflow: hidden;
  284. @include until($tablet) {
  285. display: none;
  286. }
  287. &-enter-active, &-leave-active {
  288. transition: max-width .5s ease;
  289. max-width: 50vw;
  290. .editor-code-preview-content {
  291. width: 50vw;
  292. overflow:hidden;
  293. }
  294. }
  295. &-enter, &-leave-to {
  296. max-width: 0;
  297. }
  298. &-content {
  299. height: calc(100vh - 100px);
  300. overflow-y: scroll;
  301. padding: 30px 1rem 1rem 1rem;
  302. width: calc(100% + 1rem + 17px)
  303. // -ms-overflow-style: none;
  304. // &::-webkit-scrollbar {
  305. // width: 0px;
  306. // background: transparent;
  307. // }
  308. }
  309. &-title {
  310. background-color: rgba(mc('blue', '100'), .75);
  311. border-bottom-right-radius: 5px;
  312. display: inline-flex;
  313. height: 30px;
  314. justify-content: center;
  315. align-items: center;
  316. padding: 0 1rem;
  317. color: mc('blue', '800');
  318. position: absolute;
  319. top: 0;
  320. left: 0;
  321. z-index: 2;
  322. text-transform: uppercase;
  323. font-size: .7rem;
  324. cursor: pointer;
  325. }
  326. }
  327. &-toolbar {
  328. background-color: mc('blue', '700');
  329. background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue','800') 100%);
  330. color: #FFF;
  331. @include until($tablet) {
  332. justify-content: center;
  333. }
  334. svg {
  335. use {
  336. color: #FFF;
  337. }
  338. }
  339. }
  340. // ==========================================
  341. // Fix FAB revealing under codemirror
  342. // ==========================================
  343. .speed-dial--fixed {
  344. z-index: 8;
  345. }
  346. // ==========================================
  347. // CODE MIRROR
  348. // ==========================================
  349. .CodeMirror {
  350. height: auto;
  351. .cm-header-1 {
  352. font-size: 1.5rem;
  353. }
  354. .cm-header-2 {
  355. font-size: 1.25rem;
  356. }
  357. .cm-header-3 {
  358. font-size: 1.15rem;
  359. }
  360. .cm-header-4 {
  361. font-size: 1.1rem;
  362. }
  363. .cm-header-5 {
  364. font-size: 1.05rem;
  365. }
  366. .cm-header-6 {
  367. font-size: 1.025rem;
  368. }
  369. }
  370. .CodeMirror-focused .cm-matchhighlight {
  371. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
  372. background-position: bottom;
  373. background-repeat: repeat-x;
  374. }
  375. .cm-matchhighlight {
  376. background-color: mc('grey', '800');
  377. }
  378. .CodeMirror-selection-highlight-scrollbar {
  379. background-color: mc('green', '600');
  380. }
  381. .cm-s-wikijs-dark.CodeMirror {
  382. background: darken(mc('grey','900'), 3%);
  383. color: #e0e0e0;
  384. }
  385. .cm-s-wikijs-dark div.CodeMirror-selected {
  386. background: mc('blue','800');
  387. }
  388. .cm-s-wikijs-dark .cm-matchhighlight {
  389. background: mc('blue','800');
  390. }
  391. .cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
  392. background: mc('red', '500');
  393. }
  394. .cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
  395. background: mc('red', '500');
  396. }
  397. .cm-s-wikijs-dark .CodeMirror-gutters {
  398. background: darken(mc('grey','900'), 6%);
  399. border-right: 1px solid mc('grey','900');
  400. }
  401. .cm-s-wikijs-dark .CodeMirror-guttermarker {
  402. color: #ac4142;
  403. }
  404. .cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
  405. color: #505050;
  406. }
  407. .cm-s-wikijs-dark .CodeMirror-linenumber {
  408. color: mc('grey','800');
  409. }
  410. .cm-s-wikijs-dark .CodeMirror-cursor {
  411. border-left: 1px solid #b0b0b0;
  412. }
  413. .cm-s-wikijs-dark span.cm-comment {
  414. color: mc('orange','800');
  415. }
  416. .cm-s-wikijs-dark span.cm-atom {
  417. color: #aa759f;
  418. }
  419. .cm-s-wikijs-dark span.cm-number {
  420. color: #aa759f;
  421. }
  422. .cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
  423. color: #90a959;
  424. }
  425. .cm-s-wikijs-dark span.cm-keyword {
  426. color: #ac4142;
  427. }
  428. .cm-s-wikijs-dark span.cm-string {
  429. color: #f4bf75;
  430. }
  431. .cm-s-wikijs-dark span.cm-variable {
  432. color: #90a959;
  433. }
  434. .cm-s-wikijs-dark span.cm-variable-2 {
  435. color: #6a9fb5;
  436. }
  437. .cm-s-wikijs-dark span.cm-def {
  438. color: #d28445;
  439. }
  440. .cm-s-wikijs-dark span.cm-bracket {
  441. color: #e0e0e0;
  442. }
  443. .cm-s-wikijs-dark span.cm-tag {
  444. color: #ac4142;
  445. }
  446. .cm-s-wikijs-dark span.cm-link {
  447. color: #aa759f;
  448. }
  449. .cm-s-wikijs-dark span.cm-error {
  450. background: #ac4142;
  451. color: #b0b0b0;
  452. }
  453. .cm-s-wikijs-dark .CodeMirror-activeline-background {
  454. background: mc('grey','900');
  455. }
  456. .cm-s-wikijs-dark .CodeMirror-matchingbracket {
  457. text-decoration: underline;
  458. color: white !important;
  459. }
  460. }
  461. </style>