diff --git a/README.md b/README.md index 92d410f..c315f26 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,18 @@

A markdown text editor compatible almost all markdown syntax, like Mathematical formula、flowchart、upload images... -### Get smartmd +## Screenshots +editor demo: [Demo](https://xiaoqingxin.site/editor/write) +js render page [Demo](https://xiaoqingxin.site/editor/js-show) +php render page [Demo](https://xiaoqingxin.site/editor/php-show) + + ![](./docs/screenshot.png) + --- + ![](./docs/screenshot_02.gif) + --- + ![](./docs/screenshot_03.gif) + +## Get smartmd ```node npm install smartmd ``` @@ -20,14 +31,14 @@ npm install smartmd ``` -### Quickstart +## Quickstart ```javascript var editor = new Smartmd({ el: "#editor", height: "400px" }); ``` -### Build Setup +## Build Setup ```node # install reference npm install smartmd @@ -39,7 +50,7 @@ npm run dev npm run build ``` -### Features +## Features - Markdown syntax parse by Markdown-It and it's plugins - LaTeX mathematical expressions using KaTeX - Diagrams and flowcharts using Mermaid @@ -47,7 +58,7 @@ npm run build - Emoji - Images upload (need server) -### Issue +## Issue welcome repo bug reports, feature requests or optimization method. ### Reference: diff --git a/dist/smartmd.common.js b/dist/smartmd.common.js index d480302..11788e9 100644 --- a/dist/smartmd.common.js +++ b/dist/smartmd.common.js @@ -36178,10 +36178,11 @@ function mermaidChart(code) { } function MermaidPlugin(markdownIt) { - if (mermaid) { + if (window.mermaid) { markdownIt.mermaid = mermaid; + var temp = markdownIt.renderer.rules.fence.bind(markdownIt.renderer.rules); - markdownIt.renderer.rules.fence = function (tokens, idx) { + markdownIt.renderer.rules.fence = function (tokens, idx, options, env, slf) { var token = tokens[idx]; var code = token.content.trim(); @@ -36190,11 +36191,15 @@ function MermaidPlugin(markdownIt) { } var firstLine = code.split(/\n/)[0].trim(); - if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) return mermaidChart(code); - return tokens; + + if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) { + return mermaidChart(code); + } + + return temp(tokens, idx, options, env, slf); }; } else { - console.warn('Smartmd: mermaid is used but not import'); + throw new ReferenceError('Smartmd: mermaid is used but not import'); } } @@ -36433,7 +36438,7 @@ function MarkdownItKatex (md, options) { md.renderer.rules.math_inline = inlineRenderer; md.renderer.rules.math_block = blockRenderer; } else { - console.warn("Smartmd: katex is used but not import"); + throw new ReferenceError("Smartmd: katex is used but not import"); } } @@ -36462,7 +36467,7 @@ function MarkdownIt$1 (editor) { return "
".concat(window.hljs.highlightAuto(str).value, "
"); }; } else { - console.warn("Smartmd: highlight used but not import"); + throw new ReferenceError("Smartmd: highlight used but not import"); } } @@ -36778,6 +36783,8 @@ function checkImage(file) { return true; } function uploadImages (file) { + var _this = this; + var options = this.options; var cm = this.codemirror; var url = options.uploads.url; // image validator @@ -36794,25 +36801,30 @@ function uploadImages (file) { var xhr = new XMLHttpRequest(); xhr.open('post', url); - xhr.onreadystatechange = function (response) { - if (this.readyState === 4) { - bookmark.clear(); // write to parse your response data + xhr.onreadystatechange = function () { + bookmark.clear(); + if (xhr.readyState === 4) { + // write to parse your xhr.responseText data try { - var data = JSON.parse(response); + var data = JSON.parse(xhr.responseText); if (xhr.status === 200) { cm.setSelection(from); cm.replaceSelection("![](".concat(data.path, ")")); + + _this.alert(data.message); } else { var error = options.uploads.serverError.replace('{msg}', data.msg); - this.alert(error, 'error'); + + _this.alert(error, 'error'); } } catch (e) { - console.warn('Smartmd: Json data cannot be parse check your request return'); + console.log(xhr.responseText); + throw new SyntaxError('Smartmd: Json data cannot be parse check your request return'); } } - }.bind(this); + }; xhr.upload.onprogress = function (ev) { if (ev.lengthComputable) { @@ -37278,11 +37290,9 @@ function () { if (opt.el) { opt.el = getElement(opt.el); - console.log(opt.el); } else { // no element found - console.error("Smartmd: Error. No element was found."); - return; + throw new ReferenceError("Smartmd: Error. No element was found."); } new Observer$1(opt); diff --git a/dist/smartmd.esm.js b/dist/smartmd.esm.js index d9cdf93..cc72b56 100644 --- a/dist/smartmd.esm.js +++ b/dist/smartmd.esm.js @@ -36163,10 +36163,11 @@ function mermaidChart(code) { } function MermaidPlugin(markdownIt) { - if (mermaid) { + if (window.mermaid) { markdownIt.mermaid = mermaid; + var temp = markdownIt.renderer.rules.fence.bind(markdownIt.renderer.rules); - markdownIt.renderer.rules.fence = function (tokens, idx) { + markdownIt.renderer.rules.fence = function (tokens, idx, options, env, slf) { var token = tokens[idx]; var code = token.content.trim(); @@ -36175,11 +36176,15 @@ function MermaidPlugin(markdownIt) { } var firstLine = code.split(/\n/)[0].trim(); - if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) return mermaidChart(code); - return tokens; + + if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) { + return mermaidChart(code); + } + + return temp(tokens, idx, options, env, slf); }; } else { - console.warn('Smartmd: mermaid is used but not import'); + throw new ReferenceError('Smartmd: mermaid is used but not import'); } } @@ -36418,7 +36423,7 @@ function MarkdownItKatex (md, options) { md.renderer.rules.math_inline = inlineRenderer; md.renderer.rules.math_block = blockRenderer; } else { - console.warn("Smartmd: katex is used but not import"); + throw new ReferenceError("Smartmd: katex is used but not import"); } } @@ -36447,7 +36452,7 @@ function MarkdownIt$1 (editor) { return "
".concat(window.hljs.highlightAuto(str).value, "
"); }; } else { - console.warn("Smartmd: highlight used but not import"); + throw new ReferenceError("Smartmd: highlight used but not import"); } } @@ -36763,6 +36768,8 @@ function checkImage(file) { return true; } function uploadImages (file) { + var _this = this; + var options = this.options; var cm = this.codemirror; var url = options.uploads.url; // image validator @@ -36779,25 +36786,30 @@ function uploadImages (file) { var xhr = new XMLHttpRequest(); xhr.open('post', url); - xhr.onreadystatechange = function (response) { - if (this.readyState === 4) { - bookmark.clear(); // write to parse your response data + xhr.onreadystatechange = function () { + bookmark.clear(); + if (xhr.readyState === 4) { + // write to parse your xhr.responseText data try { - var data = JSON.parse(response); + var data = JSON.parse(xhr.responseText); if (xhr.status === 200) { cm.setSelection(from); cm.replaceSelection("![](".concat(data.path, ")")); + + _this.alert(data.message); } else { var error = options.uploads.serverError.replace('{msg}', data.msg); - this.alert(error, 'error'); + + _this.alert(error, 'error'); } } catch (e) { - console.warn('Smartmd: Json data cannot be parse check your request return'); + console.log(xhr.responseText); + throw new SyntaxError('Smartmd: Json data cannot be parse check your request return'); } } - }.bind(this); + }; xhr.upload.onprogress = function (ev) { if (ev.lengthComputable) { @@ -37263,11 +37275,9 @@ function () { if (opt.el) { opt.el = getElement(opt.el); - console.log(opt.el); } else { // no element found - console.error("Smartmd: Error. No element was found."); - return; + throw new ReferenceError("Smartmd: Error. No element was found."); } new Observer$1(opt); diff --git a/dist/smartmd.js b/dist/smartmd.js index 2831c5e..c6d64cf 100644 --- a/dist/smartmd.js +++ b/dist/smartmd.js @@ -36182,10 +36182,11 @@ } function MermaidPlugin(markdownIt) { - if (mermaid) { + if (window.mermaid) { markdownIt.mermaid = mermaid; + var temp = markdownIt.renderer.rules.fence.bind(markdownIt.renderer.rules); - markdownIt.renderer.rules.fence = function (tokens, idx) { + markdownIt.renderer.rules.fence = function (tokens, idx, options, env, slf) { var token = tokens[idx]; var code = token.content.trim(); @@ -36194,11 +36195,15 @@ } var firstLine = code.split(/\n/)[0].trim(); - if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) return mermaidChart(code); - return tokens; + + if (firstLine === 'gantt' || firstLine === 'sequenceDiagram' || firstLine.match(/^graph (?:TB|BT|RL|LR|TD);?$/)) { + return mermaidChart(code); + } + + return temp(tokens, idx, options, env, slf); }; } else { - console.warn('Smartmd: mermaid is used but not import'); + throw new ReferenceError('Smartmd: mermaid is used but not import'); } } @@ -36437,7 +36442,7 @@ md.renderer.rules.math_inline = inlineRenderer; md.renderer.rules.math_block = blockRenderer; } else { - console.warn("Smartmd: katex is used but not import"); + throw new ReferenceError("Smartmd: katex is used but not import"); } } @@ -36466,7 +36471,7 @@ return "
".concat(window.hljs.highlightAuto(str).value, "
"); }; } else { - console.warn("Smartmd: highlight used but not import"); + throw new ReferenceError("Smartmd: highlight used but not import"); } } @@ -36782,6 +36787,8 @@ return true; } function uploadImages (file) { + var _this = this; + var options = this.options; var cm = this.codemirror; var url = options.uploads.url; // image validator @@ -36798,25 +36805,30 @@ var xhr = new XMLHttpRequest(); xhr.open('post', url); - xhr.onreadystatechange = function (response) { - if (this.readyState === 4) { - bookmark.clear(); // write to parse your response data + xhr.onreadystatechange = function () { + bookmark.clear(); + if (xhr.readyState === 4) { + // write to parse your xhr.responseText data try { - var data = JSON.parse(response); + var data = JSON.parse(xhr.responseText); if (xhr.status === 200) { cm.setSelection(from); cm.replaceSelection("![](".concat(data.path, ")")); + + _this.alert(data.message); } else { var error = options.uploads.serverError.replace('{msg}', data.msg); - this.alert(error, 'error'); + + _this.alert(error, 'error'); } } catch (e) { - console.warn('Smartmd: Json data cannot be parse check your request return'); + console.log(xhr.responseText); + throw new SyntaxError('Smartmd: Json data cannot be parse check your request return'); } } - }.bind(this); + }; xhr.upload.onprogress = function (ev) { if (ev.lengthComputable) { @@ -37282,11 +37294,9 @@ if (opt.el) { opt.el = getElement(opt.el); - console.log(opt.el); } else { // no element found - console.error("Smartmd: Error. No element was found."); - return; + throw new ReferenceError("Smartmd: Error. No element was found."); } new Observer$1(opt); diff --git a/dist/smartmd.min.js b/dist/smartmd.min.js index 3eac160..0bcc3f5 100644 --- a/dist/smartmd.min.js +++ b/dist/smartmd.min.js @@ -3,4 +3,4 @@ * (c) 2018-2019 NoisyWinds * Released under the MIT License. */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Smartmd=t()}(this,function(){"use strict";var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function t(e,t){return e(t={exports:{}},t.exports),t.exports}function r(e){return e&&e.default||e}var n=t(function(e){var t=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=t)}),i={}.hasOwnProperty,o=function(e,t){return i.call(e,t)},a=function(e){try{return!!e()}catch(e){return!0}},s=!a(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}),l=t(function(e){var t=e.exports={version:"2.6.2"};"number"==typeof __e&&(__e=t)}),c=(l.version,function(e){return"object"==typeof e?null!==e:"function"==typeof e}),u=function(e){if(!c(e))throw TypeError(e+" is not an object!");return e},f=n.document,h=c(f)&&c(f.createElement),p=function(e){return h?f.createElement(e):{}},d=!s&&!a(function(){return 7!=Object.defineProperty(p("div"),"a",{get:function(){return 7}}).a}),m=function(e,t){if(!c(e))return e;var r,n;if(t&&"function"==typeof(r=e.toString)&&!c(n=r.call(e)))return n;if("function"==typeof(r=e.valueOf)&&!c(n=r.call(e)))return n;if(!t&&"function"==typeof(r=e.toString)&&!c(n=r.call(e)))return n;throw TypeError("Can't convert object to primitive value")},g=Object.defineProperty,v={f:s?Object.defineProperty:function(e,t,r){if(u(e),t=m(t,!0),u(r),d)try{return g(e,t,r)}catch(e){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(e[t]=r.value),e}},y=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}},b=s?function(e,t,r){return v.f(e,t,y(1,r))}:function(e,t,r){return e[t]=r,e},_=0,w=Math.random(),x=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++_+w).toString(36))},k=t(function(e){var t=x("src"),r=Function.toString,i=(""+r).split("toString");l.inspectSource=function(e){return r.call(e)},(e.exports=function(e,r,a,s){var l="function"==typeof a;l&&(o(a,"name")||b(a,"name",r)),e[r]!==a&&(l&&(o(a,t)||b(a,t,e[r]?""+e[r]:i.join(String(r)))),e===n?e[r]=a:s?e[r]?e[r]=a:b(e,r,a):(delete e[r],b(e,r,a)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[t]||r.call(this)})}),C=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e},S=function(e,t,r){if(C(e),void 0===t)return e;switch(r){case 1:return function(r){return e.call(t,r)};case 2:return function(r,n){return e.call(t,r,n)};case 3:return function(r,n,i){return e.call(t,r,n,i)}}return function(){return e.apply(t,arguments)}},A=function(e,t,r){var i,o,a,s,c=e&A.F,u=e&A.G,f=e&A.S,h=e&A.P,p=e&A.B,d=u?n:f?n[t]||(n[t]={}):(n[t]||{}).prototype,m=u?l:l[t]||(l[t]={}),g=m.prototype||(m.prototype={});for(i in u&&(r=t),r)a=((o=!c&&d&&void 0!==d[i])?d:r)[i],s=p&&o?S(a,n):h&&"function"==typeof a?S(Function.call,a):a,d&&k(d,i,a,e&A.U),m[i]!=a&&b(m,i,s),h&&g[i]!=a&&(g[i]=a)};n.core=l,A.F=1,A.G=2,A.S=4,A.P=8,A.B=16,A.W=32,A.U=64,A.R=128;var L=A,E=t(function(e){var t=x("meta"),r=v.f,n=0,i=Object.isExtensible||function(){return!0},s=!a(function(){return i(Object.preventExtensions({}))}),l=function(e){r(e,t,{value:{i:"O"+ ++n,w:{}}})},u=e.exports={KEY:t,NEED:!1,fastKey:function(e,r){if(!c(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!o(e,t)){if(!i(e))return"F";if(!r)return"E";l(e)}return e[t].i},getWeak:function(e,r){if(!o(e,t)){if(!i(e))return!0;if(!r)return!1;l(e)}return e[t].w},onFreeze:function(e){return s&&u.NEED&&i(e)&&!o(e,t)&&l(e),e}}}),T=(E.KEY,E.NEED,E.fastKey,E.getWeak,E.onFreeze,t(function(e){var t=n["__core-js_shared__"]||(n["__core-js_shared__"]={});(e.exports=function(e,r){return t[e]||(t[e]=void 0!==r?r:{})})("versions",[]).push({version:l.version,mode:"global",copyright:"\xa9 2019 Denis Pushkarev (zloirock.ru)"})})),D=t(function(e){var t=T("wks"),r=n.Symbol,i="function"==typeof r;(e.exports=function(e){return t[e]||(t[e]=i&&r[e]||(i?r:x)("Symbol."+e))}).store=t}),M=v.f,F=D("toStringTag"),N=function(e,t,r){e&&!o(e=r?e:e.prototype,F)&&M(e,F,{configurable:!0,value:t})},q={f:D},O=v.f,I=function(e){var t=l.Symbol||(l.Symbol=n.Symbol||{});"_"==e.charAt(0)||e in t||O(t,e,{value:q.f(e)})},P={}.toString,R=function(e){return P.call(e).slice(8,-1)},z=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==R(e)?e.split(""):Object(e)},j=function(e){if(null==e)throw TypeError("Can't call method on "+e);return e},B=function(e){return z(j(e))},H=Math.ceil,W=Math.floor,U=function(e){return isNaN(e=+e)?0:(e>0?W:H)(e)},V=Math.min,G=function(e){return e>0?V(U(e),9007199254740991):0},$=Math.max,Z=Math.min,K=function(e,t){return(e=U(e))<0?$(e+t,0):Z(e,t)},Y=function(e){return function(t,r,n){var i,o=B(t),a=G(o.length),s=K(n,a);if(e&&r!=r){for(;a>s;)if((i=o[s++])!=i)return!0}else for(;a>s;s++)if((e||s in o)&&o[s]===r)return e||s||0;return!e&&-1}},X=T("keys"),J=function(e){return X[e]||(X[e]=x(e))},Q=Y(!1),ee=J("IE_PROTO"),te=function(e,t){var r,n=B(e),i=0,a=[];for(r in n)r!=ee&&o(n,r)&&a.push(r);for(;t.length>i;)o(n,r=t[i++])&&(~Q(a,r)||a.push(r));return a},re="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(","),ne=Object.keys||function(e){return te(e,re)},ie={f:Object.getOwnPropertySymbols},oe={f:{}.propertyIsEnumerable},ae=Array.isArray||function(e){return"Array"==R(e)},se=s?Object.defineProperties:function(e,t){u(e);for(var r,n=ne(t),i=n.length,o=0;i>o;)v.f(e,r=n[o++],t[r]);return e},le=n.document,ce=le&&le.documentElement,ue=J("IE_PROTO"),fe=function(){},he=function(){var e,t=p("iframe"),r=re.length;for(t.style.display="none",ce.appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("