From 9fc21c0f03fd61b2859fe80d1d0a3d8441f6313a Mon Sep 17 00:00:00 2001 From: setop Date: Sun, 5 Oct 2025 00:54:47 +0200 Subject: [PATCH] working implementation --- .gitignore | 6 + .tool-versions | 1 + README.md | 13 + css/markitup-skin-simple.css | 118 ++++++ css/mdset.css | 135 +++++++ elm.json | 25 ++ js/custom-element-markitup.js | 58 +++ js/jquery-3.7.1.min.js | 2 + js/jquery.js | 1 + js/jquery.markitup-1.1.5.js | 656 ++++++++++++++++++++++++++++++++++ js/jquery.markitup.js | 1 + miu-demo.html | 18 + src/Miu.elm | 68 ++++ 13 files changed, 1102 insertions(+) create mode 100644 .gitignore create mode 100644 .tool-versions create mode 100644 README.md create mode 100755 css/markitup-skin-simple.css create mode 100644 css/mdset.css create mode 100644 elm.json create mode 100644 js/custom-element-markitup.js create mode 100644 js/jquery-3.7.1.min.js create mode 120000 js/jquery.js create mode 100755 js/jquery.markitup-1.1.5.js create mode 120000 js/jquery.markitup.js create mode 100644 miu-demo.html create mode 100644 src/Miu.elm diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a046eee --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +*.env +venv +*.venv +*.secret +elm-stuff/ +elm.js diff --git a/.tool-versions b/.tool-versions new file mode 100644 index 0000000..b825aa9 --- /dev/null +++ b/.tool-versions @@ -0,0 +1 @@ +elm 0.19.1 diff --git a/README.md b/README.md new file mode 100644 index 0000000..b15820e --- /dev/null +++ b/README.md @@ -0,0 +1,13 @@ +# MarkItUp Custom Element Example + +This is a simple demonstration of using [HTML Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) in Elm. + +Inspired by [Luke Westby](https://github.com/lukewestby)'s [Elm Europe talk](https://youtu.be/tyFe9Pw6TVE). The JavaScript custom element code is almost a verbatim copy. + +To run it: + +* git clone and cd into the local copy +* run `elm make src/Miu.elm --output js/miu-demo.js` +* open "demo.html" in a web browser + + diff --git a/css/markitup-skin-simple.css b/css/markitup-skin-simple.css new file mode 100755 index 0000000..fe3753c --- /dev/null +++ b/css/markitup-skin-simple.css @@ -0,0 +1,118 @@ +/* ------------------------------------------------------------------- +// markItUp! Universal MarkUp Engine, JQuery plugin +// By Jay Salvat - http://markitup.jaysalvat.com/ +// ------------------------------------------------------------------*/ +.markItUp * { + margin:0px; padding:0px; + outline:none; +} +.markItUp a:link, +.markItUp a:visited { + color:#000; + text-decoration:none; +} +.markItUp { + width:700px; + margin:5px 0 5px 0; +} +.markItUpContainer { + font:11px Verdana, Arial, Helvetica, sans-serif; +} +.markItUpEditor { + font:12px 'Courier New', Courier, monospace; + padding:5px; + width:690px; + height:320px; + clear:both; + line-height:18px; + overflow:auto; +} +.markItUpPreviewFrame { + overflow:auto; + background-color:#FFF; + width:99.9%; + height:300px; + margin:5px 0; +} +.markItUpFooter { + width:100%; +} +.markItUpResizeHandle { + overflow:hidden; + width:22px; height:5px; + margin-left:auto; + margin-right:auto; + background-image:url(images/handle.png); + cursor:n-resize; +} +/***************************************************************************************/ +/* first row of buttons */ +.markItUpHeader ul li { + list-style:none; + float:left; + position:relative; +} +.markItUpHeader ul li:hover > ul{ + display:block; +} +.markItUpHeader ul .markItUpDropMenu { + background:transparent url(images/menu.png) no-repeat 115% 50%; + margin-right:5px; +} +.markItUpHeader ul .markItUpDropMenu li { + margin-right:0px; +} +/* next rows of buttons */ +.markItUpHeader ul ul { + display:none; + position:absolute; + top:18px; left:0px; + background:#FFF; + border:1px solid #000; +} +.markItUpHeader ul ul li { + float:none; + border-bottom:1px solid #000; +} +.markItUpHeader ul ul .markItUpDropMenu { + background:#FFF url(images/submenu.png) no-repeat 100% 50%; +} +.markItUpHeader ul .markItUpSeparator { + margin:0 10px; + width:1px; + height:16px; + overflow:hidden; + background-color:#CCC; +} +.markItUpHeader ul ul .markItUpSeparator { + width:auto; height:1px; + margin:0px; +} +/* next rows of buttons */ +.markItUpHeader ul ul ul { + position:absolute; + top:-1px; left:150px; +} +.markItUpHeader ul ul ul li { + float:none; +} +.markItUpHeader ul a { + display:block; + width:16px; height:16px; + text-indent:-10000px; + background-repeat:no-repeat; + padding:3px; + margin:0px; +} +.markItUpHeader ul ul a { + display:block; + padding-left:0px; + text-indent:0; + width:120px; + padding:5px 5px 5px 25px; + background-position:2px 50%; +} +.markItUpHeader ul ul a:hover { + color:#FFF; + background-color:#000; +} diff --git a/css/mdset.css b/css/mdset.css new file mode 100644 index 0000000..1ca031b --- /dev/null +++ b/css/mdset.css @@ -0,0 +1,135 @@ +.markItUp { + width: auto; + margin: 5px 0 5px 0; + border: 5px solid #f5f5f5; + .markItUp a:link, + .markItUp a:visited { + color: black; + text-decoration: none; + } + + .h1 a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABR0lEQVQ4T82TvWqDUBiGzehgB6cQKGZxSnAWF52SEhwEW72OxgsouYHeRxoDmTM5mSzZtIuTBASXTIL/oa+HKi2OLjlw8OA57/N9jz8jauAYDcxTDwIwTXMDlVmjc7/fdxhbVVXNoijeMKk8z/3T6fQhCMJLmqbLIAjeW/VOwTCMqK5rd7/fv7abiqLYCEsIT+bzuYT1GkApDMNJD6DrOgEcDocOIIqiXZaldLlcSIDjOCvLMiuO4z5A07QIh69VVX2hEvXbuoHAs+/7JDAejy3ct263Wx+wWq0ihN3j8dh1gLaJApxJgGVZAkiSpA9YLBYRNl3HcToAz/P2X2eGYSx02Wj0AbIsR6jmns/nDgBnG4el1pmmadIBntV/AMIbhGeNN+bO87ztdDo1ESavEWo+Kn9jvUT4CTZXzM/m+iBf4pAfarDCD4rK0hGjbt/3AAAAAElFTkSuQmCC"); + } + .h2 a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeklEQVQ4T82Sv2rCUBjFo5DFIYWMATGLk5mr3MVMDuIgxCZ736D0AcQn6AO0dLcm4BgyOQUfIOnioggZHBzU+CeJ2nNDvMVVFy985BLu+X3nfPfmuDtX7k499yAAwzB6iFKhcU6n0wCr32q1jCiKXlDc4XDwkyT52e1279gLcRx/TadTm55nEXRdD47Ho2tZVucyF1VVzfV6TfL5fHW73ZoQ2vv9ngBUwdnqcrmcM4CmaSlgOBwyQK1WMxeLBSkUCm+Aup7nzSVJIhSGsx3AXQZot9sBOsypVdjkMus6OhZ935curkRRpE4Unuef4WDFAM1mM4DYdRyHOVAUxQSMTCaTFADxB8TF8/nc3Ww2/tUMGo1GgK7uaDRigHK5bOIfmc1mUib+he1P7AV0fwLgfwb1ej1AN3c8HjNAqVQywzAkuJkOOn8D5iE7B6dFiLsoO40AcQ/iCs2NGmBYfVmWDeRPrxHiFb5CJqaSFer1KsKtT/pBnvKt9qnuD0N29xFsKIUWAAAAAElFTkSuQmCC"); + } + .h3 a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABeElEQVQ4T82SvYrCQBSFkzLNFnYGgoKk0gcI02ijhVgIukm/sE/gE/gAwQfYZXvXBFK62ljFbGFnKhtBCKQJbCQ//rJnwu5AWm0cuBAyc757zp3huTsXf6eeexCApmlDRKnSONfrdYI17nQ62vF4fEZxh8PBPZ/Pn0mSDPD9dDqd3rfb7ZSeZxFUVfUul4ttmmb/fy6NRsOAgCyXS7FWq80Bs9M0JfhX9X1fzAF6vV4GsCyLARRFMdCNrFYrCpDW6/WuWCy+AqAGQdDMAbrdrofDO2oVB7g/6yo6Sq7ripVKRYqiaIQiEOr7/V7PAdrttgexPZvNmAN0zSJsNpvMbqFQkAD+wLkq6gU1ZTNotVoezbhYLBhAlmUjjmOCaE3sEdh+EwRBgtNviKkDnQHq9bqHbrbjOAxQKpWMMAwJz/M69ga4oT5gPxDP6TcAdgaAeEgnS3OjJhjWuFwua8ifXSOKziZEZ4kCIPlC5a/x1if9IE/5VvtU9wuEWf0R3RdGzAAAAABJRU5ErkJggg=="); + } + .h4 a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABbElEQVQ4T82SvY6CQBSFB2O02wcwsYRsIhUNCZWNFDaSoPAC+wCbfQHDE+wbbC0LtBZW2mBB6NbGzpgQKsI2/gFmz0x2Z0OrjZNM5vd899w7I5A7m3CnnjwIwLZtB6n0aDqCIHiz2cwdjUZ2URSTsizJ+XzerFarKT2XZbl7uVxettstW/MULMtKIA5d1x3/1UXXdR9iDeIO3VNV9SnLsgCA791ux+7VAFVVhUEQcEC/32eA9XrNAKIofmDdA2CfpmkdYJpmAsAetj9/bVPrFi534zjuQPyOuYe9N4wETuoAwzASHITz+Zw7UBTFz/Nca7Va4+PxSKN/4Y6MIATdPZ1OU57CcDhMEDlcLBYcgIL5h8NBazQazxhlCAgADnV4vV5fMd9wAArGHCyXSw6AbR97GgrGakBbu932kSoB5D+FwWDgwFKPRsChF0WRK0mSDcsTdBp1g5zZszWbTeYArf6Mt37pB/nKt9qnuh+W4+gRT5uz1AAAAABJRU5ErkJggg=="); + } + .h5 a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABZ0lEQVQ4T81TPY6CQBgdEvtNKEk22FDhAQwNNEuMoTBxF3pvYDyBB9A9wO4FUEwsjdtYAY2dVJZuxo6CEAMiZt8QnGxP4yQvM/B9733fmx+BNBxCQz55EgHHcaawojI79/t9ieFaluVcr9cPgOR5HtWzijVha+D7fD5vuAXbtmlZlv5qtXp/7IthGB4IWhAEUqfTYeuKXM+jOI4TLjAcDiuB9XrNBbrdrlcUhbbf7yVFUX5AXNxutw2l9PQowgUGgwFF8gkJi3+V7CzLXqMokmRZppfLhSBOkOemaTpmIlyg3+9TBP3tdss7qNvWjsejxJJFUVRB7gET7NUYdlwuYJomxQ9/t9txAbTtoaoGa2+I9aDxxXy3Wq1PFPvF94wL6LpO0bofhiEXQNtekiSaIAgzxCYgjTBvQPSAOeBXAiBPEVDr41keDge33W478F8dI3BC28z/C7phGxgATOhZbmKTB9X4Mf0BNtf9EZw071oAAAAASUVORK5CYII="); + } + .h6 a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABgklEQVQ4T82SvYrCQBSFE2IQmy0sA6KNIGivpNFmLYKFEE36fYIFH0B8gOwLLNirCVhKbFIlbmEXOxsRBhTiXyH+s2fC7oCtNg4MueTe891zZ4bnnlz8k3ruRQC6rrcwSpaOc7vdelidSqWin06nOjZ3PB4nnuc1aT6Tycj7/b5+uVy+CCFzNoKmaeR6vbqWZdX+z6VUKpkQyxBL+Xz+bbVatQHciaL4OZ1Od7SOAVRVDQH9fp8BCoWCeT6f5fF4LKXT6SHE29lsxvJ3gGq1SlA8h7UuunJ/1rUgCBLRaPRjs9m0eZ4f4H+C1lEXcLRjDhRFIRC7tm2zDrlczlwul3IsFjMOh0NjsVhI8Xg8gTP4gdsmQN8MUC6XCeiu4zgMANvmer2WI5GIgVwDHSVqWxAEOq6B0GCAYrFIYN0djUYMkEwmTXSTUfyO3BA3VEO8hdMwBsANARC3UJClc2P3fN/vpFIpHbbDa4RggryHrwYAlXSxB3eH+OiTfpGn/Kh9qvsF8uf0EffuWGQAAAAASUVORK5CYII="); + } + .ruler a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAIUlEQVR42mMYKqCB4T9OCAb/oSQGjxQFmIA0BbjhEAlmACV9KVjPWpB2AAAAAElFTkSuQmCC"); + } + .bold a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADCSURBVCjPY/jPgB8yUEtBeUL5+ZL/Be+z61PXJ7yPnB8sgGFCcX3m/6z9IFbE/JD/XucxFOTWp/5PBivwr/f77/gfQ0F6ffz/aKACXwG3+27/LeZjKEioj/wffN+n3vW8y3+z/Vh8EVEf/N8LLGEy3+K/2nl5ATQF/vW+/x3BCrQF1P7r/hcvQFPgVg+0GWq0zH/N/wL1aAps6x3+64M9J12g8p//PZcCigKbBJP1uvvV9sv3S/YL7+ft51SgelzghgBKWvx6E5D1XwAAAABJRU5ErkJggg=="); + } + .italic a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABxSURBVCjPY/jPgB8yUFtBdkPqh4T/kR+CD+A0Ie5B5P/ABJwmxBiE//f/gMeKkAlB/90W4FHg88Dzv20ATgVeBq7/bT7g8YXjBJf/RgvwKLB4YPFfKwCnAjMH0/8a/3EGlEmD7gG1A/IHJDfQOC4wIQALYP87Y6unEgAAAABJRU5ErkJggg=="); + } + .stroke a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAACfSURBVCjPY/jPgB8yUFNBiWDBzOy01PKEmZG7sSrIe5dVDqIjygP/Y1GQm5b2P7kDwvbAZkK6S8L/6P8hM32N/zPYu2C1InJ36P/A/x7/bc+YoSooLy3/D4Px/23+SyC5G8kEf0EIbZSmfdfov9wZDCvc0uzLYWyZ/2J3MRTYppn/14eaIvKOvxxDgUma7ju1M/LlkmnC5bwdNIoL7BAAWzr8P9A5d4gAAAAASUVORK5CYII="); + } + .teletype a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAWklEQVR42mOgGnjP8B8NvkKRBwp0M4QwhADpfDC9G8hCU+AFpTXAdD+mAicUBS3oCg4yKKIoCASKoAO4AhigvwJJhgAg/M+QAyQ9GVgw5Nk7kELxF4MqA/0AAIG/KN52W2aDAAAAAElFTkSuQmCC"); + } + .list-bullet a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADqSURBVDjLY/j//z8DJZiBKgbkzH9cMHXX6wcgmiwDQJq3nv/4H0SD+OXl5dlA/L+kpOR/QUHB/+zs7P+pqan/ExIS/kdGRv4PDg7+T10XDHwgpsx8VNC56eWDkJ675Hmhbf3zB0uPvP1fuvQpOBDj4uKyIyIi/gcGBv738vL67+zs/N/Gxua/iYnJf11d3f9qamqogRjQcaugZPHjB66V14ZqINrmXyqIn3bvgXXeJfK8ANLcv+3lfxAN4hsZGWVra2v/V1FR+S8nJ/dfXFz8v5CQ0H8eHp7/7Ozs/5mZmVEDEWQzRS6gBAMAYBDQP57x26IAAAAASUVORK5CYII="); + } + .list-numeric a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAD3SURBVDjLY/j//z8DJRhM5Mx/rLLo8Lv/ZBsA0kyRATBDYOzy8vJsIP5fUlLyv6Cg4H92dvb/1NTU/wkJCf8jIyP/BwcH/8fqgkUHSXcFA1UCce7+t/9n7Xn9P2LiPRWyXRDae0+ld8tL8rwQ1HVHpXPTc7jmuLi47IiIiP+BgYH/vby8/js7O/+3sbH5b2Ji8l9XV/e/mpoaaiC2rX/+v3HN0/81q54OUCCWL3v8v3Tp4//Fix+T7wKQZuu8S+THAkgzzAVGRkbZ2tra/1VUVP7Lycn9FxcX/y8kJPSfh4fnPzs7+39mZmbUQARpBGG7oisddA9EAPd/1bRtLxctAAAAAElFTkSuQmCC"); + } + .list-task a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAnklEQVR42n3RMY5BURgF4M+NTDfJjB3MdLOASZSisgoqrUKtV6kprUAl0ahETyEUElagdyN5zwL83jntV51D00kZtrDxy9Xd2jLoVmFFaaGuFvTTTqY0F+fDVhmBhrG/9yCZKgzeg47s6OsVJHU0nN21eAUjZ/9mChMpAn0PN9nBNxFIhh6yNjEg6eqpBaBqqOqp9zIXufqspmPF3T9PDKRvg85kdtEAAAAASUVORK5CYII="); + } + .image a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHwSURBVDjLpZM9a1RBFIafM/fevfcmC7uQjWEjUZKAYBHEVEb/gIWFjVVSWEj6gI0/wt8gprPQykIsTP5BQLAIhBVBzRf52Gw22bk7c8YiZslugggZppuZ55z3nfdICIHrrBhg+ePaa1WZPyk0s+6KWwM1khiyhDcvns4uxQAaZOHJo4nRLMtEJPpnxY6Cd10+fNl4DpwBTqymaZrJ8uoBHfZoyTqTYzvkSRMXlP2jnG8bFYbCXWJGePlsEq8iPQmFA2MijEBhtpis7ZCWftC0LZx3xGnK1ESd741hqqUaqgMeAChgjGDDLqXkgMPTJtZ3KJzDhTZpmtK2OSO5IRB6xvQDRAhOsb5Lx1lOu5ZCHV4B6RLUExvh4s+ZntHhDJAxSqs9TCDBqsc6j0iJdqtMuTROFBkIcllCCGcSytFNfm1tU8k2GRo2pOI43h9ie6tOvTJFbORyDsJFQHKD8fw+P9dWqJZ/I96TdEa5Nb1AOavjVfti0dfB+t4iXhWvyh27y9zEbRRobG7z6fgVeqSoKvB5oIMQEODx7FLvIJo55KS9R7b5ldrDReajpC+Z5z7GAHJFXn1exedVbG36ijwOmJgl0kS7lXtjD0DkLyqc70uPnSuIIwk9QCmWd+9XGnOFDzP/M5xxBInhLYBcd5z/AAZv2pOvFcS/AAAAAElFTkSuQmCC"); + } + .link a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA1UlEQVR42mMYLCCMe0Hp2Xff/+97uNh8scS+u9//n323oDSMGyrtxJbX9fA/BBy7t+fQ/x8g1sP/eV1ObGAFjn7rP/x/17Qt58+M/4//7/w/43/On6Zt/x+u/+DoBzGh68T3J+nFXBGf/0NBxOdirifpJ747dYEVWGXOfv+ypGJn9K+U/2VAmPI/+lfFzpcls99bZYIVGGsWXL/1/v/b//9f/1/zfzuQBIK3t94XXDfWBCvQY44wyL4/7cui74t+NsQ1OC/6tOj7tC/Z9yMM9JgZhgYAAE4Ogp9tIcEHAAAAAElFTkSuQmCC"); + } + .quotes a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACyElEQVQ4T22Se0iTURjGn/Nt2kidOpto3sgZoYJaQV5yuIJUksJsLiTxDy0Ji0LQVEgpjAoFF4kJEcQwLVxFCplhZAQ6NZohIhkbKV6KjKltTrfPb6dvK7y0vXDgcM55f+/Dcx4CD1XS1CtZsZNmUKrkr709vSGE9Am8aRnxdFlwu7crNy36ZN5hGYQCxtMTvBqZwuN3Xw1ugLKWfl+T2bbUfjVTYF4DbOsAywEc5ZfDuSicTTIpg2uaIdd+WxXd6YsU+3lNN5dlYH6ZuppcAL5xEwIkhDFo0OrdAVsV/LIAVjtg5ztd0/+pIKA8QIC6tuFNwHWFQrhsm6iNlrJXJmIrfRTHlUKlPAYM+StyZpHCtEIR6k8Q7EfcPaiWS8ojxdYmK3WA7AyCMeocTEGpAGFwbH8EirPiXKAliw0vBozoG50dF+6gpzY8uKsQvQ5LPpItlQZi+OMnzM7MwMIKsDssvM2Yok5Tl8plPbzzb0dn1whDbnVUZdY7gRuA5rwgTW5la5G/iGLKaMCqZRneASFo/+wY23soO+H92NwKpah9WpOl3ur6BkB1QlVRfzaqITIhnYiEBDaOwZheR9VTySYwouonNZkPPQbKeZif3ynQflts0Rb+LE0KmCWc0BdC2DDwI4QWdwS25smkl7VaFf+Z7kUopcRL/ry+4syBGkXBHqZ/UAf7GgG7CiQlpkDfa+AevBy6yeoKb/Dx5T9ye5FUZUNFemJs40FlDkbMBK70WYE1MyCwU8TvAoxvuuikQV892F3f4AaYa4ync1EXoIEKKz7B4KwUdn46ywLrHIH37wXURD9DwPg9yOq+uCWXGO7nDOimJWmd9vOQZsvhzI2Dzz9vAlheyffuHlyK6EBcsOXDvotdGW4KZjrLJZPz5vAq3dHTZk5cIhJ5BcJBBOA4btXOrvpjQdOoGHwUEyqej1CpTf8D/gAqfTVYD/HkgwAAAABJRU5ErkJggg=="); + } + .code a { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADb0lEQVQ4T1WTaUxcVRTH//ctM2/WN2+YoVWI0DE1lBRSMkILLlSN9YutW62QKQ1W29QaFAMal/hJ+4FoiDRBWjRFWqM1GJfEhTTFKCQ0BNqmK5YPUKGtjTDMQkFm3nI986ok3uTk3Nz3P7973jnnMvy7Xvh2psqw8FFEdVYv6RZyplsWlg0rxRlbYBxznHGT5AkGxDmEY86ighO0v712HZ9sKl/tPdhSG/7vyPaLWYKRJZZNZHVgIWPi6twt9E8uzROweQXQ8PnE+w9EtHf2VIcwkzQhMwaJvooSmQg4BPKCAJn2ywbHyNQSPh39c3YFUN976eCja8NNDRvDmJizSEwBHJAoIAcQckrOUaCKeK33D7TFitA+cBUrgGcOnf/Kp4V3MJnhpWgQ3ZfSkHWOxg1+eBUBIklFUkfCIlqPXMCT9xeic3D6hg2obp8Jal5zsqTQoyZTJnZFNRy9nEbIwzCfsBCr8MPvJAhlUnaHjIaOMWRknhYktp2VH5iqK7/H3RN2MyWRMNFYqcJgIlJUtO/HF5DnZfgrbSEacKCm1IdooYSdXSOwFCuv78WaeVb35c3UGk3yT8UzeJWCIctYomYJlPK12Sx+nkqjwCtielbHK5vzUVkko75jEILuCfS9eW+KrWu9Ule23tsTcovKYtrAU5S+6hORXDTRdzqJAAXPpnRU5rvwUIWK0lUMT7edNPrffczBGON2DTa2DpZ7fMFzd0c0JOcM7H98Fbp/i0P1CliI64jVhuBzSdDcDH5HFs+3D1wfOLCtMBdrA7a89XWJz+0dDwbXIZ7haNp2J7pO3oSUBRoeCcPlEO0O5FqYSCXQcviX0V8/2FFlAza3fBEyTavriQcrttc/XIKB8Sw8CqDQ5Cgyh0yDJNFQEAPFmogzV67jvd6hH4Y6YlttwH37jzxngfUUF4RdkeK1uEUZ6CZHRmfI0uMwTAsWDVBQVbFvy2qc+30Sh74b7hnu3L3bBmza0922tbbsjbdjm/73Bohhg7JGbgKBzv4beLYmHydOXcTRn8Y+HPlk7+s2INr48b6aDZGuqtK7qOIuBPwKAh4nVDKf2wEn/YpTEjAdN8gD3d8M48ehi82jn73ccRuw93CI/73cTLcUcc7z6IgMGgPXwJjqlCVZUWT4PTm4G+cnrk2ACbGzx5rGcoB/AP6XQx4dXg87AAAAAElFTkSuQmCC"); + } +} + +.markItUpContainer { + border: 1px solid #3c769d; + background: white; + padding: 5px 5px 2px 5px; + font: 11px Verdana, Arial, Helvetica, sans-serif; +} + +.markItUpEditor { + padding: 5px 5px 5px 5px; + border: 3px solid #3c769d; + width: 99%; + height: 400px; + color: black; + background: white; + /* clear: both */ + display: block; + font-family: monospace; + font-size: 14px; + line-height: 18px; + overflow: auto; + box-sizing: border-box; +} + +.markItUpFooter { + width: 100%; + cursor: n-resize; +} + +.markItUpResizeHandle { + display: none; +} + +.markItUpHeader { + height: 22px; + ul { + li { + list-style: none; + float: left; + position: relative; + ul { + display: none; + } + &:hover > ul { + display: block; + } + } + a { + display: block; + width: 16px; + height: 16px; + text-indent: -10000px; + background-repeat: no-repeat; + padding: 3px; + margin: 0; + } + .markItUpSeparator { + margin: 0 10px; + width: 1px; + height: 16px; + overflow: hidden; + background-color: #cccccc; + } + } +} + +textarea.markItUp:not(.markItUpEditor) { + width: 100%; + height: 10em; +} diff --git a/elm.json b/elm.json new file mode 100644 index 0000000..5512abb --- /dev/null +++ b/elm.json @@ -0,0 +1,25 @@ +{ + "type": "application", + "source-directories": [ + "src" + ], + "elm-version": "0.19.1", + "dependencies": { + "direct": { + "elm/browser": "1.0.2", + "elm/core": "1.0.5", + "elm/html": "1.0.0", + "elm/json": "1.1.4", + "elm-explorations/markdown": "1.0.0" + }, + "indirect": { + "elm/time": "1.0.0", + "elm/url": "1.0.0", + "elm/virtual-dom": "1.0.4" + } + }, + "test-dependencies": { + "direct": {}, + "indirect": {} + } +} diff --git a/js/custom-element-markitup.js b/js/custom-element-markitup.js new file mode 100644 index 0000000..7d4a22f --- /dev/null +++ b/js/custom-element-markitup.js @@ -0,0 +1,58 @@ +const mySettings = { + onTab: { keepDefault: true }, + onShiftEnter: { keepDefault: false, openWith: '\n\n' }, + markupSet: [ + { name:'Heading 1', key:"1", className: 'h1', openWith:'# ', placeHolder:'Your title here...' }, + { name:'Heading 2', key:"2", className: 'h2', openWith:'## ', placeHolder:'Your title here...' }, + { name:'Heading 3', key:"3", className: 'h3', openWith:'### ', placeHolder:'Your title here...' }, + { name:'Heading 4', key:"4", className: 'h4', openWith:'#### ', placeHolder:'Your title here...' }, + { name:'Heading 5', key:"5", className: 'h5', openWith:'##### ', placeHolder:'Your title here...' }, + { name:'Heading 6', key:"6", className: 'h6', openWith:'###### ', placeHolder:'Your title here...' }, + { separator: '---------------' }, + { name: 'Bold', openWith: '**', closeWith: '**', className: 'bold' }, + { name: 'Italic', openWith: '__', closeWith: '__', className: 'italic' }, + { name: 'Stroke', openWith: '~~', closeWith: '~~', className: 'stroke' }, + { name: 'Teletype', openWith: '`', closeWith: '`', className: 'teletype' }, + { separator: '---------------' }, + { name: 'Ruler', openWith: '---\n', closeWith: '', className: 'ruler' }, + { name: 'Bulleted List', openWith: '* ', className: 'list-bullet'}, + { name: 'Numeric List', className: 'list-numeric', openWith: function(m) { return m.line + '. '; } }, + { name: 'Task List', className: 'list-task', openWith: '- [ ] ', placeHolder: "task", closeWith:'\n' }, + { separator: '---------------' }, + { name: 'Picture', openWith: '![', closeWith: ']([![Url:!:http://]!])', placeHolder: "Titre de l'image", className: 'image' }, + { name: 'Link', openWith: '[', closeWith: ']([![Url:!:http://]!])', placeHolder: 'Texte du lien', className: 'link' }, + { separator: '---------------' }, + { name: 'Quotes', openWith: '> ', className: 'quotes' }, + { name: 'Code Block', className: 'code', openWith:'```[![langage:!:mermaid]!]\n', placeHolder: "code", closeWith:'\n```', multiline:false }, + ] +}; + +customElements.define('markitup-textarea', class extends HTMLElement { + constructor() { + super(); + this._editor = document.createElement("textarea"); + } + + get editorValue() { + return this._editor.value; + } + + set editorValue(value) { + if (this._editor.value === value) return; + if (!this._editor) return; + this._editor.value = value; + } + + connectedCallback() { + const on = (e) => { + //console.debug("customElements markitup-textarea event", e); + this.dispatchEvent(new CustomEvent('editorChanged')); + }; + this._editor.onchange = on; + this._editor.oninput = on; + this.appendChild(this._editor) + jQuery(this._editor).markItUp(mySettings); // decorate the textarea with toolbar + } +}); + + diff --git a/js/jquery-3.7.1.min.js b/js/jquery-3.7.1.min.js new file mode 100644 index 0000000..7f37b5d --- /dev/null +++ b/js/jquery-3.7.1.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.7.1 | (c) OpenJS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(ie,e){"use strict";var oe=[],r=Object.getPrototypeOf,ae=oe.slice,g=oe.flat?function(e){return oe.flat.call(e)}:function(e){return oe.concat.apply([],e)},s=oe.push,se=oe.indexOf,n={},i=n.toString,ue=n.hasOwnProperty,o=ue.toString,a=o.call(Object),le={},v=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},y=function(e){return null!=e&&e===e.window},C=ie.document,u={type:!0,src:!0,nonce:!0,noModule:!0};function m(e,t,n){var r,i,o=(n=n||C).createElement("script");if(o.text=e,t)for(r in u)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function x(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[i.call(e)]||"object":typeof e}var t="3.7.1",l=/HTML$/i,ce=function(e,t){return new ce.fn.init(e,t)};function c(e){var t=!!e&&"length"in e&&e.length,n=x(e);return!v(e)&&!y(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+ge+")"+ge+"*"),x=new RegExp(ge+"|>"),j=new RegExp(g),A=new RegExp("^"+t+"$"),D={ID:new RegExp("^#("+t+")"),CLASS:new RegExp("^\\.("+t+")"),TAG:new RegExp("^("+t+"|[*])"),ATTR:new RegExp("^"+p),PSEUDO:new RegExp("^"+g),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+ge+"*(even|odd|(([+-]|)(\\d*)n|)"+ge+"*(?:([+-]|)"+ge+"*(\\d+)|))"+ge+"*\\)|)","i"),bool:new RegExp("^(?:"+f+")$","i"),needsContext:new RegExp("^"+ge+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+ge+"*((?:-\\d)?\\d*)"+ge+"*\\)|)(?=[^-]|$)","i")},N=/^(?:input|select|textarea|button)$/i,q=/^h\d$/i,L=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,H=/[+~]/,O=new RegExp("\\\\[\\da-fA-F]{1,6}"+ge+"?|\\\\([^\\r\\n\\f])","g"),P=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},M=function(){V()},R=J(function(e){return!0===e.disabled&&fe(e,"fieldset")},{dir:"parentNode",next:"legend"});try{k.apply(oe=ae.call(ye.childNodes),ye.childNodes),oe[ye.childNodes.length].nodeType}catch(e){k={apply:function(e,t){me.apply(e,ae.call(t))},call:function(e){me.apply(e,ae.call(arguments,1))}}}function I(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(V(e),e=e||T,C)){if(11!==p&&(u=L.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return k.call(n,a),n}else if(f&&(a=f.getElementById(i))&&I.contains(e,a)&&a.id===i)return k.call(n,a),n}else{if(u[2])return k.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&e.getElementsByClassName)return k.apply(n,e.getElementsByClassName(i)),n}if(!(h[t+" "]||d&&d.test(t))){if(c=t,f=e,1===p&&(x.test(t)||m.test(t))){(f=H.test(t)&&U(e.parentNode)||e)==e&&le.scope||((s=e.getAttribute("id"))?s=ce.escapeSelector(s):e.setAttribute("id",s=S)),o=(l=Y(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+Q(l[o]);c=l.join(",")}try{return k.apply(n,f.querySelectorAll(c)),n}catch(e){h(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return re(t.replace(ve,"$1"),e,n,r)}function W(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function F(e){return e[S]=!0,e}function $(e){var t=T.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function B(t){return function(e){return fe(e,"input")&&e.type===t}}function _(t){return function(e){return(fe(e,"input")||fe(e,"button"))&&e.type===t}}function z(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&R(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function X(a){return F(function(o){return o=+o,F(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function U(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}function V(e){var t,n=e?e.ownerDocument||e:ye;return n!=T&&9===n.nodeType&&n.documentElement&&(r=(T=n).documentElement,C=!ce.isXMLDoc(T),i=r.matches||r.webkitMatchesSelector||r.msMatchesSelector,r.msMatchesSelector&&ye!=T&&(t=T.defaultView)&&t.top!==t&&t.addEventListener("unload",M),le.getById=$(function(e){return r.appendChild(e).id=ce.expando,!T.getElementsByName||!T.getElementsByName(ce.expando).length}),le.disconnectedMatch=$(function(e){return i.call(e,"*")}),le.scope=$(function(){return T.querySelectorAll(":scope")}),le.cssHas=$(function(){try{return T.querySelector(":has(*,:jqfake)"),!1}catch(e){return!0}}),le.getById?(b.filter.ID=function(e){var t=e.replace(O,P);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&C){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(O,P);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&C){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):t.querySelectorAll(e)},b.find.CLASS=function(e,t){if("undefined"!=typeof t.getElementsByClassName&&C)return t.getElementsByClassName(e)},d=[],$(function(e){var t;r.appendChild(e).innerHTML="",e.querySelectorAll("[selected]").length||d.push("\\["+ge+"*(?:value|"+f+")"),e.querySelectorAll("[id~="+S+"-]").length||d.push("~="),e.querySelectorAll("a#"+S+"+*").length||d.push(".#.+[+~]"),e.querySelectorAll(":checked").length||d.push(":checked"),(t=T.createElement("input")).setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),r.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&d.push(":enabled",":disabled"),(t=T.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||d.push("\\["+ge+"*name"+ge+"*="+ge+"*(?:''|\"\")")}),le.cssHas||d.push(":has"),d=d.length&&new RegExp(d.join("|")),l=function(e,t){if(e===t)return a=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!le.sortDetached&&t.compareDocumentPosition(e)===n?e===T||e.ownerDocument==ye&&I.contains(ye,e)?-1:t===T||t.ownerDocument==ye&&I.contains(ye,t)?1:o?se.call(o,e)-se.call(o,t):0:4&n?-1:1)}),T}for(e in I.matches=function(e,t){return I(e,null,null,t)},I.matchesSelector=function(e,t){if(V(e),C&&!h[t+" "]&&(!d||!d.test(t)))try{var n=i.call(e,t);if(n||le.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){h(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(O,P),e[3]=(e[3]||e[4]||e[5]||"").replace(O,P),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||I.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&I.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return D.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&j.test(n)&&(t=Y(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(O,P).toLowerCase();return"*"===e?function(){return!0}:function(e){return fe(e,t)}},CLASS:function(e){var t=s[e+" "];return t||(t=new RegExp("(^|"+ge+")"+e+"("+ge+"|$)"))&&s(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=I.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function T(e,n,r){return v(n)?ce.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?ce.grep(e,function(e){return e===n!==r}):"string"!=typeof n?ce.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(ce.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||k,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:S.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof ce?t[0]:t,ce.merge(this,ce.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:C,!0)),w.test(r[1])&&ce.isPlainObject(t))for(r in t)v(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=C.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):v(e)?void 0!==n.ready?n.ready(e):e(ce):ce.makeArray(e,this)}).prototype=ce.fn,k=ce(C);var E=/^(?:parents|prev(?:Until|All))/,j={children:!0,contents:!0,next:!0,prev:!0};function A(e,t){while((e=e[t])&&1!==e.nodeType);return e}ce.fn.extend({has:function(e){var t=ce(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,Ce=/^$|^module$|\/(?:java|ecma)script/i;xe=C.createDocumentFragment().appendChild(C.createElement("div")),(be=C.createElement("input")).setAttribute("type","radio"),be.setAttribute("checked","checked"),be.setAttribute("name","t"),xe.appendChild(be),le.checkClone=xe.cloneNode(!0).cloneNode(!0).lastChild.checked,xe.innerHTML="",le.noCloneChecked=!!xe.cloneNode(!0).lastChild.defaultValue,xe.innerHTML="",le.option=!!xe.lastChild;var ke={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function Se(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&fe(e,t)?ce.merge([e],n):n}function Ee(e,t){for(var n=0,r=e.length;n",""]);var je=/<|&#?\w+;/;function Ae(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function Re(e,t){return fe(e,"table")&&fe(11!==t.nodeType?t:t.firstChild,"tr")&&ce(e).children("tbody")[0]||e}function Ie(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function We(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Fe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(_.hasData(e)&&(s=_.get(e).events))for(i in _.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),C.head.appendChild(r[0])},abort:function(){i&&i()}}});var Jt,Kt=[],Zt=/(=)\?(?=&|$)|\?\?/;ce.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Kt.pop()||ce.expando+"_"+jt.guid++;return this[e]=!0,e}}),ce.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Zt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Zt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=v(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Zt,"$1"+r):!1!==e.jsonp&&(e.url+=(At.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||ce.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=ie[r],ie[r]=function(){o=arguments},n.always(function(){void 0===i?ce(ie).removeProp(r):ie[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Kt.push(r)),o&&v(i)&&i(o[0]),o=i=void 0}),"script"}),le.createHTMLDocument=((Jt=C.implementation.createHTMLDocument("").body).innerHTML="
",2===Jt.childNodes.length),ce.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(le.createHTMLDocument?((r=(t=C.implementation.createHTMLDocument("")).createElement("base")).href=C.location.href,t.head.appendChild(r)):t=C),o=!n&&[],(i=w.exec(e))?[t.createElement(i[1])]:(i=Ae([e],t,o),o&&o.length&&ce(o).remove(),ce.merge([],i.childNodes)));var r,i,o},ce.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(ce.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},ce.expr.pseudos.animated=function(t){return ce.grep(ce.timers,function(e){return t===e.elem}).length},ce.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=ce.css(e,"position"),c=ce(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=ce.css(e,"top"),u=ce.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),v(t)&&(t=t.call(e,n,ce.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},ce.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){ce.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===ce.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===ce.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=ce(e).offset()).top+=ce.css(e,"borderTopWidth",!0),i.left+=ce.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-ce.css(r,"marginTop",!0),left:t.left-i.left-ce.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===ce.css(e,"position"))e=e.offsetParent;return e||J})}}),ce.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;ce.fn[t]=function(e){return M(this,function(e,t,n){var r;if(y(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),ce.each(["top","left"],function(e,n){ce.cssHooks[n]=Ye(le.pixelPosition,function(e,t){if(t)return t=Ge(e,n),_e.test(t)?ce(e).position()[n]+"px":t})}),ce.each({Height:"height",Width:"width"},function(a,s){ce.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){ce.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return M(this,function(e,t,n){var r;return y(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?ce.css(e,t,i):ce.style(e,t,n,i)},s,n?e:void 0,n)}})}),ce.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){ce.fn[t]=function(e){return this.on(t,e)}}),ce.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.on("mouseenter",e).on("mouseleave",t||e)}}),ce.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){ce.fn[n]=function(e,t){return 0'); + $$.wrap('
'); + $$.wrap('
'); + $$.addClass("markItUpEditor"); + + // add the header before the textarea + header = $('
').insertBefore($$); + $(dropMenus(options.markupSet)).appendTo(header); + + // add the footer after the textarea + footer = $('
').insertAfter($$); + + // add the resize handle after textarea + if (options.resizeHandle === true && browser.safari !== true) { + resizeHandle = $('
') + .insertAfter($$) + .bind("mousedown.markItUp", function(e) { + var h = $$.height(), y = e.clientY, mouseMove, mouseUp; + mouseMove = function(e) { + $$.css("height", Math.max(20, e.clientY+h-y)+"px"); + return false; + }; + mouseUp = function(e) { + $("html").unbind("mousemove.markItUp", mouseMove).unbind("mouseup.markItUp", mouseUp); + return false; + }; + $("html").bind("mousemove.markItUp", mouseMove).bind("mouseup.markItUp", mouseUp); + }); + footer.append(resizeHandle); + } + + // listen key events + $$.bind('keydown.markItUp', keyPressed).bind('keyup', keyPressed); + + // bind an event to catch external calls + $$.bind("insertion.markItUp", function(e, settings) { + if (settings.target !== false) { + get(); + } + if (textarea === $.markItUp.focused) { + markup(settings); + } + }); + + // remember the last focus + $$.bind('focus.markItUp', function() { + $.markItUp.focused = this; + }); + + if (options.previewInElement) { + refreshPreview(); + } + } + + // recursively build header with dropMenus from markupset + function dropMenus(markupSet) { + var ul = $('
    '), i = 0; + $('li:hover > ul', ul).css('display', 'block'); + $.each(markupSet, function() { + var button = this, t = '', title, li, j; + button.title ? title = (button.key) ? (button.title||'')+' [Ctrl+'+button.key+']' : (button.title||'') : title = (button.key) ? (button.name||'')+' [Ctrl+'+button.key+']' : (button.name||''); + key = (button.key) ? 'accesskey="'+button.key+'"' : ''; + if (button.separator) { + li = $('
  • '+(button.separator||'')+'
    • ').appendTo(ul); + } else { + i++; + for (j = levels.length -1; j >= 0; j--) { + t += levels[j]+"-"; + } + li = $('
  • '+(button.name||'')+'
    • ') + .bind("contextmenu.markItUp", function() { // prevent contextmenu on mac and allow ctrl+click + return false; + }).bind('click.markItUp', function(e) { + e.preventDefault(); + }).bind("focusin.markItUp", function(){ + $$.focus(); + }).bind('mouseup', function(e) { + if (button.call) { + eval(button.call)(e); // Pass the mouseup event to custom delegate + } + setTimeout(function() { markup(button) },1); + return false; + }).bind('mouseenter.markItUp', function() { + $('> ul', this).show(); + $(document).one('click', function() { // close dropmenu if click outside + $('ul ul', header).hide(); + } + ); + }).bind('mouseleave.markItUp', function() { + $('> ul', this).hide(); + }).appendTo(ul); + if (button.dropMenu) { + levels.push(i); + $(li).addClass('markItUpDropMenu').append(dropMenus(button.dropMenu)); + } + } + }); + levels.pop(); + return ul; + } + + // markItUp! markups + function magicMarkups(string) { + if (string) { + string = string.toString(); + string = string.replace(/\(\!\(([\s\S]*?)\)\!\)/g, + function(x, a) { + var b = a.split('|!|'); + if (altKey === true) { + return (b[1] !== undefined) ? b[1] : b[0]; + } else { + return (b[1] === undefined) ? "" : b[0]; + } + } + ); + // [![prompt]!], [![prompt:!:value]!] + string = string.replace(/\[\!\[([\s\S]*?)\]\!\]/g, + function(x, a) { + var b = a.split(':!:'); + if (abort === true) { + return false; + } + value = prompt(b[0], (b[1]) ? b[1] : ''); + if (value === null) { + abort = true; + } + return value; + } + ); + return string; + } + return ""; + } + + // prepare action + function prepare(action) { + if ($.isFunction(action)) { + action = action(hash); + } + return magicMarkups(action); + } + + // build block to insert + function build(string) { + var openWith = prepare(clicked.openWith); + var placeHolder = prepare(clicked.placeHolder); + var replaceWith = prepare(clicked.replaceWith); + var closeWith = prepare(clicked.closeWith); + var openBlockWith = prepare(clicked.openBlockWith); + var closeBlockWith = prepare(clicked.closeBlockWith); + var multiline = clicked.multiline; + + if (replaceWith !== "") { + block = openWith + replaceWith + closeWith; + } else if (selection === '' && placeHolder !== '') { + block = openWith + placeHolder + closeWith; + } else { + string = string || selection; + + var lines = [string], blocks = []; + + if (multiline === true) { + lines = string.split(/\r?\n/); + } + + for (var l = 0; l < lines.length; l++) { + line = lines[l]; + var trailingSpaces; + if (trailingSpaces = line.match(/ *$/)) { + blocks.push(openWith + line.replace(/ *$/g, '') + closeWith + trailingSpaces); + } else { + blocks.push(openWith + line + closeWith); + } + } + + block = blocks.join("\n"); + } + + block = openBlockWith + block + closeBlockWith; + + return { block:block, + openBlockWith:openBlockWith, + openWith:openWith, + replaceWith:replaceWith, + placeHolder:placeHolder, + closeWith:closeWith, + closeBlockWith:closeBlockWith + }; + } + + // define markup to insert + function markup(button) { + var len, j, n, i; + hash = clicked = button; + get(); + $.extend(hash, { line:"", + root:options.root, + textarea:textarea, + selection:(selection||''), + caretPosition:caretPosition, + ctrlKey:ctrlKey, + shiftKey:shiftKey, + altKey:altKey + } + ); + // callbacks before insertion + prepare(options.beforeInsert); + prepare(clicked.beforeInsert); + if ((ctrlKey === true && shiftKey === true) || button.multiline === true) { + prepare(clicked.beforeMultiInsert); + } + $.extend(hash, { line:1 }); + + if ((ctrlKey === true && shiftKey === true)) { + lines = selection.split(/\r?\n/); + for (j = 0, n = lines.length, i = 0; i < n; i++) { + if ($.trim(lines[i]) !== '') { + $.extend(hash, { line:++j, selection:lines[i] } ); + lines[i] = build(lines[i]).block; + } else { + lines[i] = ""; + } + } + + string = { block:lines.join('\n')}; + start = caretPosition; + len = string.block.length + ((browser.opera) ? n-1 : 0); + } else if (ctrlKey === true) { + string = build(selection); + start = caretPosition + string.openWith.length; + len = string.block.length - string.openWith.length - string.closeWith.length; + len = len - (string.block.match(/ $/) ? 1 : 0); + len -= fixIeBug(string.block); + } else if (shiftKey === true) { + string = build(selection); + start = caretPosition; + len = string.block.length; + len -= fixIeBug(string.block); + } else { + string = build(selection); + start = caretPosition + string.block.length ; + len = 0; + start -= fixIeBug(string.block); + } + if ((selection === '' && string.replaceWith === '')) { + caretOffset += fixOperaBug(string.block); + + start = caretPosition + string.openBlockWith.length + string.openWith.length; + len = string.block.length - string.openBlockWith.length - string.openWith.length - string.closeWith.length - string.closeBlockWith.length; + + caretOffset = $$.val().substring(caretPosition, $$.val().length).length; + caretOffset -= fixOperaBug($$.val().substring(0, caretPosition)); + } + $.extend(hash, { caretPosition:caretPosition, scrollPosition:scrollPosition } ); + + if (string.block !== selection && abort === false) { + insert(string.block); + set(start, len); + } else { + caretOffset = -1; + } + get(); + + $.extend(hash, { line:'', selection:selection }); + + // callbacks after insertion + if ((ctrlKey === true && shiftKey === true) || button.multiline === true) { + prepare(clicked.afterMultiInsert); + } + prepare(clicked.afterInsert); + prepare(options.afterInsert); + $$.trigger("change"); + + // refresh preview if opened + if (previewWindow && options.previewAutoRefresh) { + refreshPreview(); + } + + // reinit keyevent + shiftKey = altKey = ctrlKey = abort = false; + } + + // Substract linefeed in Opera + function fixOperaBug(string) { + if (browser.opera) { + return string.length - string.replace(/\n*/g, '').length; + } + return 0; + } + // Substract linefeed in IE + function fixIeBug(string) { + if (browser.msie) { + return string.length - string.replace(/\r*/g, '').length; + } + return 0; + } + + // add markup + function insert(block) { + if (document.selection) { + var newSelection = document.selection.createRange(); + newSelection.text = block; + } else { + textarea.value = textarea.value.substring(0, caretPosition) + block + textarea.value.substring(caretPosition + selection.length, textarea.value.length); + } + } + + // set a selection + function set(start, len) { + if (textarea.createTextRange){ + // quick fix to make it work on Opera 9.5 + if (browser.opera && browser.version >= 9.5 && len == 0) { + return false; + } + range = textarea.createTextRange(); + range.collapse(true); + range.moveStart('character', start); + range.moveEnd('character', len); + range.select(); + } else if (textarea.setSelectionRange ){ + textarea.setSelectionRange(start, start + len); + } + textarea.scrollTop = scrollPosition; + textarea.focus(); + } + + // get the selection + function get() { + textarea.focus(); + + scrollPosition = textarea.scrollTop; + if (document.selection) { + selection = document.selection.createRange().text; + if (browser.msie) { // ie + var range = document.selection.createRange(), rangeCopy = range.duplicate(); + rangeCopy.moveToElementText(textarea); + caretPosition = -1; + while(rangeCopy.inRange(range)) { + rangeCopy.moveStart('character'); + caretPosition ++; + } + } else { // opera + caretPosition = textarea.selectionStart; + } + } else { // gecko & webkit + caretPosition = textarea.selectionStart; + + selection = textarea.value.substring(caretPosition, textarea.selectionEnd); + } + return selection; + } + + // open preview window + function preview() { + if (typeof options.previewHandler === 'function') { + previewWindow = true; + } else if (options.previewInElement) { + previewWindow = $(options.previewInElement); + } else if (!previewWindow || previewWindow.closed) { + if (options.previewInWindow) { + previewWindow = window.open('', 'preview', options.previewInWindow); + $(window).unload(function() { + previewWindow.close(); + }); + } else { + iFrame = $(''); + if (options.previewPosition == 'after') { + iFrame.insertAfter(footer); + } else { + iFrame.insertBefore(header); + } + previewWindow = iFrame[iFrame.length - 1].contentWindow || frame[iFrame.length - 1]; + } + } else if (altKey === true) { + if (iFrame) { + iFrame.remove(); + } else { + previewWindow.close(); + } + previewWindow = iFrame = false; + } + if (!options.previewAutoRefresh) { + refreshPreview(); + } + if (options.previewInWindow) { + previewWindow.focus(); + } + } + + // refresh Preview window + function refreshPreview() { + renderPreview(); + } + + function renderPreview() { + var phtml; + var parsedData = $$.val(); + if (options.previewParser && typeof options.previewParser === 'function') { + parsedData = options.previewParser(parsedData); + } + if (options.previewHandler && typeof options.previewHandler === 'function') { + options.previewHandler(parsedData); + } else if (options.previewParserPath !== '') { + $.ajax({ + type: options.previewParserAjaxType, + dataType: 'text', + global: false, + url: options.previewParserPath, + data: options.previewParserVar+'='+encodeURIComponent(parsedData), + success: function(data) { + writeInPreview( localize(data, 1) ); + } + }); + } else { + if (!template) { + $.ajax({ + url: options.previewTemplatePath, + dataType: 'text', + global: false, + success: function(data) { + writeInPreview( localize(data, 1).replace(//g, parsedData) ); + } + }); + } + } + return false; + } + + function writeInPreview(data) { + if (options.previewInElement) { + $(options.previewInElement).html(data); + } else if (previewWindow && previewWindow.document) { + try { + sp = previewWindow.document.documentElement.scrollTop + } catch(e) { + sp = 0; + } + previewWindow.document.open(); + previewWindow.document.write(data); + previewWindow.document.close(); + previewWindow.document.documentElement.scrollTop = sp; + } + } + + // set keys pressed + function keyPressed(e) { + shiftKey = e.shiftKey; + altKey = e.altKey; + ctrlKey = (!(e.altKey && e.ctrlKey)) ? (e.ctrlKey || e.metaKey) : false; + + if (e.type === 'keydown') { + if (ctrlKey === true) { + li = $('a[accesskey="'+((e.keyCode == 13) ? '\\n' : String.fromCharCode(e.keyCode))+'"]', header).parent('li'); + if (li.length !== 0) { + ctrlKey = false; + setTimeout(function() { + li.triggerHandler('mouseup'); + },1); + return false; + } + } + if (e.keyCode === 13 || e.keyCode === 10) { // Enter key + if (ctrlKey === true) { // Enter + Ctrl + ctrlKey = false; + markup(options.onCtrlEnter); + return options.onCtrlEnter.keepDefault; + } else if (shiftKey === true) { // Enter + Shift + shiftKey = false; + markup(options.onShiftEnter); + return options.onShiftEnter.keepDefault; + } else { // only Enter + markup(options.onEnter); + return options.onEnter.keepDefault; + } + } + if (e.keyCode === 9) { // Tab key + if (shiftKey == true || ctrlKey == true || altKey == true) { + return false; + } + if (caretOffset !== -1) { + get(); + caretOffset = $$.val().length - caretOffset; + set(caretOffset, 0); + caretOffset = -1; + return false; + } else { + markup(options.onTab); + return options.onTab.keepDefault; + } + } + } + } + + function remove() { + $$.unbind(".markItUp").removeClass('markItUpEditor'); + $$.parent('div').parent('div.markItUp').parent('div').replaceWith($$); + + var relativeRef = $$.parent('div').parent('div.markItUp').parent('div'); + if (relativeRef.length) { + relativeRef.replaceWith($$); + } + + $$.data('markItUp', null); + } + + init(); + }); + }; + + $.fn.markItUpRemove = function() { + return this.each(function() { + $(this).markItUp('remove'); + } + ); + }; + + $.markItUp = function(settings) { + var options = { target:false }; + $.extend(options, settings); + if (options.target) { + return $(options.target).each(function() { + $(this).focus(); + $(this).trigger('insertion', [options]); + }); + } else { + $('textarea').trigger('insertion', [options]); + } + }; +})(jQuery); diff --git a/js/jquery.markitup.js b/js/jquery.markitup.js new file mode 120000 index 0000000..bdfda51 --- /dev/null +++ b/js/jquery.markitup.js @@ -0,0 +1 @@ +jquery.markitup-1.1.5.js \ No newline at end of file diff --git a/miu-demo.html b/miu-demo.html new file mode 100644 index 0000000..91f901d --- /dev/null +++ b/miu-demo.html @@ -0,0 +1,18 @@ + + + Markitup Custom Element Demo + + + + + + + + + +
    + + + diff --git a/src/Miu.elm b/src/Miu.elm new file mode 100644 index 0000000..7e2c0ec --- /dev/null +++ b/src/Miu.elm @@ -0,0 +1,68 @@ +module Miu exposing (main) + +import Browser +import Html exposing (Attribute, Html, a, br, div, h2, hr, p, text) +import Html.Attributes exposing (href, property) +import Html.Events exposing (on) +import Json.Decode as JD exposing (Decoder) +import Json.Encode as JE exposing (Value) +import Markdown + + +main = + Browser.sandbox + { init = { value = "## Preview" } + , update = update + , view = view + } + + +type alias Model = + { value : String + } + + +type Msg + = CodeChanged String + + +update : Msg -> Model -> Model +update msg model = + case msg of + CodeChanged value -> + { model | value = value } + + +{-| Here's our custom element, defined in js/custom-element-markitup.js +-} +markItUp : List (Attribute msg) -> List (Html msg) -> Html msg +markItUp = + Html.node "markitup-textarea" + + +{-| This is how you set the contents of the editor. +-} +editorValue : String -> Attribute msg +editorValue value = + property "editorValue" <| + JE.string value + + +{-| This is how you receive changes to the contents of the editor. +-} +onEditorChanged : (String -> msg) -> Attribute msg +onEditorChanged tagger = + on "editorChanged" <| + JD.map tagger <| + JD.at [ "target", "editorValue" ] + JD.string + + +view : Model -> Html Msg +view model = + div [] + [ h2 [] [ text "Markitup Custom Element from Elm" ] + , markItUp [ editorValue model.value, onEditorChanged CodeChanged ] [] + , hr [] [] + , Markdown.toHtml [] model.value + ]