emoji

composer.json

@@ -11,7 +11,8 @@
     "require": {
         "laravel/framework": "^5.5",
         "erusev/parsedown-extra": "^0.7.1",
-        "symfony/dom-crawler": "^4.2"
+        "symfony/dom-crawler": "^4.2",
+        "overtrue/laravel-emoji": "^1.1"
     },
     "autoload": {
         "psr-4": {

package.json

@@ -11,14 +11,15 @@
   },
   "dependencies": {
     "cross-env": "^5.2.0",
+    "css-loader": "^2.1.0",
     "laravel-mix": "^4.0.14",
     "perfect-scrollbar": "^1.4.0",
-    "sass-loader": "^7.1.0",
-    "tailwindcss": "^0.7.4",
-    "vue": "^2.6.7",
     "prismjs": "^1.15.0",
     "resolve-url-loader": "2.3.1",
     "sass": "^1.17.2",
+    "sass-loader": "^7.1.0",
+    "tailwindcss": "^0.7.4",
+    "vue": "^2.6.7",
     "vue-template-compiler": "^2.6.7"
   }
 }

public/css/app.css

@@ -6357,6 +6357,11 @@ li {
   margin-bottom: 0;
 }
 
+.markdown-body blockquote ul {
+  padding-left: 2em;
+  margin-bottom: 0;
+}
+
 .markdown-body blockquote.info {
   border-left-width: 0;
   background-color: #3490dc;

public/js/app.js

@@ -15552,12 +15552,12 @@ var app = new Vue({
     replaceQuoteIcons: function replaceQuoteIcons() {
       document.querySelectorAll('.markdown-body blockquote').forEach(function (blockquote) {
         var match = blockquote.innerHTML.match(/\{(.*?)\}/);
-        var icon = 'info';
 
-        if (match) {
-          icon = match[1];
+        if (!match) {
+          return;
         }
 
+        var icon = match[1];
         var icons = {
           info: '<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 13.33a7 7 0 1 1 6 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 7 18.5V17zm2-5.1V14h2v-2.1a5 5 0 1 0-2 0z"></path></svg>',
           warning: '<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 5h2v6H9V5zm0 8h2v2H9v-2z"></path></svg>'
@@ -15591,8 +15591,8 @@ var app = new Vue({
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(/*! /Users/artisan/www/wisteria/resources/js/app.js */"./resources/js/app.js");
-module.exports = __webpack_require__(/*! /Users/artisan/www/wisteria/resources/sass/app.scss */"./resources/sass/app.scss");
+__webpack_require__(/*! /Users/overtrue/www/wisteria/resources/js/app.js */"./resources/js/app.js");
+module.exports = __webpack_require__(/*! /Users/overtrue/www/wisteria/resources/sass/app.scss */"./resources/sass/app.scss");
 
 
 /***/ })

resources/js/app.js

@@ -48,10 +48,10 @@ const app = new Vue({
     replaceQuoteIcons () {
       document.querySelectorAll('.markdown-body blockquote').forEach(function (blockquote) {
         let match = blockquote.innerHTML.match(/\{(.*?)\}/)
-        let icon = 'info'
-        if (match) {
-          icon = match[1]
+        if (!match) {
+          return
         }
+        const icon = match[1]
 
         let icons = {
           info: '<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 13.33a7 7 0 1 1 6 0V16H7v-2.67zM7 17h6v1.5c0 .83-.67 1.5-1.5 1.5h-3A1.5 1.5 0 0 1 7 18.5V17zm2-5.1V14h2v-2.1a5 5 0 1 0-2 0z"></path></svg>',

resources/sass/_markdown.scss

@@ -21,6 +21,11 @@
       margin-bottom: 0;
     }
 
+    ul {
+      padding-left: 2em;
+      margin-bottom: 0;
+    }
+
     &.info {
       border-left-width: 0;
       background-color: #3490dc;

src/Renders/Markdown.php

@@ -2,6 +2,7 @@
 
 namespace Overtrue\Wisteria\Renders;
 
+use Overtrue\LaravelEmoji\Emoji;
 use Overtrue\Wisteria\Contracts\Renderer;
 
 /**
@@ -31,6 +32,6 @@ public function __construct(\ParsedownExtra $markdown)
      */
     public function render(string $content): string
     {
-        return $this->markdown->text($content);
+        return $this->markdown->text(Emoji::shortnameToUnicode($content));
     }
 }