x-mavon-editor 0.0.1

package/src/lib/core/markdown.js

@@ -0,0 +1,90 @@
+/**
+ * @Author: HuaChao Chen <CHC>
+ * @Date:   2017-05-03T00:31:20+08:00
+ * @Email:  chenhuachaoxyz@gmail.com
+ * @Filename: markdown.js
+ * @Last modified by:   chc
+ * @Last modified time: 2017-11-26T16:40:54+08:00
+ * @License: MIT
+ * @Copyright: 2017
+ */
+
+import hljsLangs from './hljs/lang.hljs.js'
+
+/**
+ * Created by zhy on 2017/3/30.
+ */
+// default mode
+var markdown_config = {
+    html: true,        // Enable HTML tags in source
+    xhtmlOut: true,        // Use '/' to close single tags (<br />).
+    breaks: true,        // Convert '\n' in paragraphs into <br>
+    langPrefix: 'language-',  // CSS language prefix for fenced blocks. Can be
+    linkify: false,        // 自动识别url
+    typographer: true,
+    quotes: '“”‘’',
+    highlight: function (str, lang) {
+        if (lang && hljsLangs[lang]) {
+            return '<pre><div class="hljs"><code class="' + lang + '">' + markdown.utils.escapeHtml(str) + '</code></div></pre>';
+        }
+        return '<pre><code class="' + lang + '">' + markdown.utils.escapeHtml(str) + '</code></pre>';
+    }
+}
+var markdown = require('markdown-it')(markdown_config);
+// 表情
+var emoji = require('markdown-it-emoji');
+// 下标
+var sub = require('markdown-it-sub')
+// 上标
+var sup = require('markdown-it-sup')
+// <dl/>
+var deflist = require('markdown-it-deflist')
+// <abbr/>
+var abbr = require('markdown-it-abbr')
+// footnote
+var footnote = require('markdown-it-footnote')
+// insert 带有下划线 样式 ++ ++
+var insert = require('markdown-it-ins')
+// mark
+var mark = require('markdown-it-mark')
+// taskLists
+var taskLists = require('markdown-it-task-lists')
+//
+var container = require('markdown-it-container')
+// add target="_blank" to all link
+var defaultRender = markdown.renderer.rules.link_open || function(tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+};
+markdown.renderer.rules.link_open = function (tokens, idx, options, env, self) {
+    // If you are sure other plugins can't add `target` - drop check below
+    var aIndex = tokens[idx].attrIndex('target');
+
+    if (aIndex < 0) {
+        tokens[idx].attrPush(['target', '_blank']); // add new attribute
+    } else {
+        tokens[idx].attrs[aIndex][1] = '_blank';    // replace value of existing attr
+    }
+
+    // pass token to default renderer.
+    return defaultRender(tokens, idx, options, env, self);
+};
+// math katex
+var katex = require('markdown-it-katex-external');
+var miip = require('markdown-it-images-preview');
+markdown.use(emoji)
+    .use(taskLists)
+    .use(sup)
+    .use(sub)
+    .use(container)
+    .use(container, 'hljs-left') /* align left */
+    .use(container, 'hljs-center')/* align center */
+    .use(container, 'hljs-right')/* align right */
+    .use(deflist)
+    .use(abbr)
+    .use(footnote)
+    .use(insert)
+    .use(mark)
+    .use(container)
+    .use(miip)
+    .use(katex)
+export default markdown

package/src/lib/core/onecolumn-event.js

@@ -0,0 +1,159 @@
+/**
+ * Created by zhy on 2017/4/24.
+ */
+/**
+ * keydown enter
+ */
+export const onecolumnKeyDownEnter = ($event , $vm , tomarkdown) => {
+    let element = $event.srcElement ? $event.srcElement : $event.target
+    let sel = window.getSelection();
+    let range = sel.getRangeAt(0);
+    // code中回车处理
+    if (range.startContainer.tagName === 'CODE' || range.startContainer.tagName === 'PRE') {
+        $event.preventDefault()
+        onecolumnInsert(range.startContainer , '\n')
+    } else if (range.startContainer.parentElement.tagName === 'CODE' || range.startContainer.parentElement.tagName === 'PRE') {
+        $event.preventDefault()
+        onecolumnInsert(range.startContainer.parentElement , '\n')
+    } else if (!blockQuoteDoubleEnter(range.startContainer , $event , range.startContainer)) {
+        $vm.s_table_enter = false
+        judgeRender(range.startContainer , $event , range.startContainer , range.startContainer , $vm)
+        /* if (result) {
+         range = range.cloneRange();
+         // code的渲染
+         if (result.children !== null && result.children.length > 0 && result.children[0].tagName === 'PRE') {
+         result.children[0].children[0].innerHTML = '\n'
+         result.innerHTML += '<div><br/></div>'
+         range.setStartAfter(result.children[0].children[0]);
+         } else if (result.lastChild) {
+         range.setStartAfter(result.lastChild);
+         } else {
+         range.setStartAfter(result);
+         }
+         range.collapse(true);
+         sel.removeAllRanges();
+         sel.addRange(range);
+         } */
+    }
+    $vm.d_value = tomarkdown(element.innerHTML)
+}
+/**
+ * insert
+ */
+export const onecolumnInsert = (dom , html) => {
+    dom.focus()
+    var sel
+    var range
+    if (window.getSelection) {
+        // IE9 and non-IE
+        sel = window.getSelection();
+        if (sel.getRangeAt && sel.rangeCount) {
+            range = sel.getRangeAt(0);
+            range.deleteContents();
+            // Range.createContextualFragment() would be useful here but is
+            // non-standard and not supported in all browsers (IE9, for one)
+            var el = document.createElement('div');
+            el.innerHTML = html;
+            var frag = document.createDocumentFragment()
+            var node
+            var lastNode
+            while ((node = el.firstChild)) {
+                lastNode = frag.appendChild(node);
+            }
+            range.insertNode(frag);
+            // Preserve the selection
+            if (lastNode) {
+                range = range.cloneRange();
+                range.setStartAfter(lastNode);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }
+    } else if (document.selection && document.selection.type !== 'Control') {
+        // IE < 9
+        document.selection.createRange().pasteHTML(html);
+    }
+}
+/**
+ * 连续两次在段落中换行 跳出段落
+ */
+export const blockQuoteDoubleEnter = (dom , $event , self) => {
+    if (dom.tagName) {
+        if (dom.getAttribute('class') === 'content-div content-div-edit') {
+            return false
+        } else if (dom.tagName === 'BLOCKQUOTE') {
+            if (!self.innerText || self.innerText === '\n' || self.innerText === '') {
+                $event.preventDefault()
+                let sel = window.getSelection();
+                let range = sel.getRangeAt(0);
+                let next = dom.nextSibling
+                self.outerHTML = ''
+                dom.outerHTML += '<div><br/></div>'
+                range = range.cloneRange()
+                range.setStartAfter(next.previousSibling.lastChild);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            return true
+        }
+        return blockQuoteDoubleEnter(dom.parentElement, $event , dom)
+    } else {
+        return blockQuoteDoubleEnter(dom.parentElement, $event , dom)
+    }
+}
+/**
+ * 在表格中回车特殊处理(暂时只做表格回车 , 后续可能拓展)
+ */
+export const judgeRender = (dom , $event , self , pre , $vm) => {
+    if (dom.tagName) {
+        if (dom.tagName === 'TABLE') {
+            $vm.s_table_enter = true
+            self = dom
+        }
+        if (dom.getAttribute('class') === 'content-div content-div-edit') {
+            // 在表格中回车 在表格后换行
+            if ($vm.s_table_enter) {
+                let sel = window.getSelection();
+                let range = sel.getRangeAt(0);
+                range = range.cloneRange()
+                $event.preventDefault()
+                let next = self.nextSibling
+                self.outerHTML += '<div><br/></div>'
+                range.setStartAfter(next.previousSibling.lastChild);
+                range.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+            return;
+        }
+        judgeRender(dom.parentElement , $event , self , dom , $vm)
+        /* let obj = document.createElement('div')
+         obj.innerHTML = markdown.render(dom.innerHTML.replace('&gt;' , '>'))
+         var objText = obj.innerText
+         var domText = dom.innerText
+         var objTextNoSpaceEnter = objText.replace(/\s+/g, '').replace(/[\r\n]/g, '')
+         var domTextNoSpaceEnter = domText.replace(/\s+/g, '').replace(/[\r\n]/g, '')
+         if (obj.children.length > 0) {
+         if (obj.children[0].innerText.replace(/\s+/g, '').replace(/[\r\n]/g, '') === domTextNoSpaceEnter || obj.children[0].innerText === domText || objText === domText || domTextNoSpaceEnter === objTextNoSpaceEnter) {
+         return judgeRender(dom.parentElement , $event , self ,dom , $vm)
+         } else {
+         // 有变化
+         $event.preventDefault()
+         dom.innerHTML = markdown.render(tomarkdown(dom.innerHTML))
+         return dom
+         }
+         } else {
+         if (objText === domText || objTextNoSpaceEnter === domTextNoSpaceEnter) {
+         return judgeRender(dom.parentElement , $event , self , dom , $vm)
+         } else {
+         // 有变化
+         dom.innerHTML = markdown.render(tomarkdown(obj.innerHTML))
+         return dom
+         }
+         } */
+    } else {
+        judgeRender(dom.parentElement , $event , self , dom , $vm)
+    }
+}

package/src/lib/core/sanitizer.js

@@ -0,0 +1,31 @@
+import { FilterXSS } from 'xss';
+
+let xssHandler;
+
+function mavoneditor_sanitizer(state) {
+  if (!xssHandler) {
+    return;
+  }
+  sanitizer(state.tokens, ['inline', 'html_block']);
+}
+
+function sanitizer(tokens, types) {
+  let originContent, children;
+  for (let i = 0; i < tokens.length; i++) {
+    if (types.indexOf(tokens[i].type) !== -1) {
+      originContent = tokens[i].content;
+      children = tokens[i].children;
+      tokens[i].content = xssHandler.process(originContent);
+      if (children && children.length && originContent !== tokens[i].content) {
+        sanitizer(children, ['html_inline']);
+      }
+    }
+  }
+}
+
+export default function (md, xssOptions) {
+  if (md.options.html) {
+    xssHandler = new FilterXSS(xssOptions);
+    md.core.ruler.push('mavoneditor_sanitizer', mavoneditor_sanitizer);
+  }
+}

package/src/lib/core/to-markdown.js

@@ -0,0 +1,171 @@
+/**
+ * @Author: HuaChao Chen <chc>
+ * @Date:   2017-05-03T00:31:20+08:00
+ * @Email:  chenhuachaoxyz@gmail.com
+ * @Filename: to-markdown.js
+ * @Last modified by:   chc
+ * @Last modified time: 2017-06-12T20:42:27+08:00
+ * @License: MIT
+ * @Copyright: 2017
+ */
+
+/**
+ * Created by zhy on 2017/4/9.
+ */
+var toMarkdown = require('to-markdown');
+//
+const coverterP = {
+  filter: 'P',
+  replacement: function (content) {
+    return '\n' + content
+  }
+}
+const coverterp = {
+  filter: 'p',
+  replacement: function (content) {
+    return '\n' + content
+  }
+}
+const coverterDiv = {
+  filter: 'DIV',
+  replacement: function (content) {
+    return '\n' + content
+  }
+}
+const coverterdiv = {
+  filter: 'div',
+  replacement: function (content) {
+    return '\n' + content
+  }
+}
+// 解析代码块
+const coverterCode = {
+  filter: 'pre',
+  replacement: function (content) {
+    let objE = document.createElement('div');
+    objE.innerHTML = content;
+    let codes = objE.getElementsByTagName('code')
+    if (codes !== null && codes.length > 0) {
+      let code = codes[0]
+      let codeType = code.getAttribute('class') === null ? '' : code.getAttribute('class')
+      let codeContent = code.innerText
+      return '\n```' + codeType + '\n' + codeContent + '\n```\n';
+    }
+    return '\n```\n' + content + '\n```\n';
+  }
+}
+// 解析表格
+const coverterTable = {
+  filter: 'table',
+  replacement: function (content) {
+    let table = document.createElement('table');
+    table.innerHTML = content;
+    let dom = '\n';
+    let tableMark = '';
+    let thead = table.getElementsByTagName('thead')[0];
+    let thead_tr = thead.getElementsByTagName('tr')[0];
+    let thead_th = thead_tr.getElementsByTagName('th')
+    for (let i = 0; i < thead_th.length; i++) {
+      dom += '| ' + thead_th[i].innerText + ' '
+      let text_align = thead_th[i].style.textAlign
+      if (text_align === 'left') {
+        tableMark += '| :- '
+      } else if (text_align === 'center') {
+        tableMark += '| :-: '
+      } else if (text_align === 'right') {
+        tableMark += '| -: '
+      } else {
+        tableMark += '| - '
+      }
+      if (i === thead_th.length - 1) {
+        dom += '|\n' + tableMark + ' |\n'
+      }
+    }
+    let tbody
+    if (table.getElementsByTagName('tbody')) {
+      tbody = table.getElementsByTagName('tbody')[0];
+      let tbody_tr = tbody.getElementsByTagName('tr')
+      if (tbody_tr.length > 0) {
+        for (let i = 0; i < tbody_tr.length; i++) {
+          let tbody_td = tbody_tr[i].getElementsByTagName('td')
+          for (let j = 0; j < tbody_td.length; j++) {
+            dom += '| ' + tbody_td[j].innerText + ' ';
+            if (j === tbody_td.length - 1) {
+              dom += '|\n';
+            }
+          }
+        }
+      }
+    }
+    return dom
+  }
+}
+// 上角标
+const coverterSup = {
+  filter: 'sup',
+  replacement: function (content) {
+    return '^' + content + '^';
+  }
+}
+// 下角标
+const coverterSub = {
+  filter: 'sub',
+  replacement: function (content) {
+    return '~' + content + '~';
+  }
+}
+// 下划线
+const coverterUnderline = {
+  filter: 'ins',
+  replacement: function (content) {
+    return '++' + content + '++';
+  }
+}
+// 中画线
+const coverterStrikethrough = {
+  filter: 's',
+  replacement: function (content) {
+    return '~~' + content + '~~';
+  }
+}
+// 标记
+const coverterMark = {
+  filter: 'mark',
+  replacement: function (content) {
+    return '==' + content + '==';
+  }
+}
+// 图片
+const converterImg = {
+    filter: 'img',
+    replacement: function(content, tag) {
+        var rel = tag.getAttribute('rel');
+        var alt = tag.getAttribute('alt');
+        if (rel && alt) {
+            return '![' + alt + ']' + '(' + rel + ')'
+        }
+        else {
+            var src = tag.getAttribute('src');
+            return '![' + alt + ']' + '(' + src + ')'
+        }
+    }
+}
+var tomarkdown = function (str) {
+  return toMarkdown(str, {
+    converters: [
+      coverterCode,
+      coverterTable,
+      coverterSup,
+      coverterSub,
+      coverterUnderline,
+      coverterStrikethrough,
+      coverterMark,
+      coverterP,
+      coverterp,
+      coverterDiv,
+      coverterdiv,
+      converterImg
+    ]
+  });
+}
+export default tomarkdown