🐛 Fix no parent node for css

Reviewed-on: #12

demo/index.html

@@ -23,6 +23,7 @@
         #preview {
             min-height: 200px;
             flex: 1 1;
+            width: 50%;
         }
 
         #preview {

demo/index.js

@@ -58,6 +58,18 @@ drive:baidu
 name: 网站资源集合
 link: https://www.baidu.com/
 password: abcde
+
+---
+
+gallery:grid
+[Image 1](/imgs/img1.png)
+[Image 2](/imgs/img2.png)
+
+---
+
+gallery:linear
+[Image 1](/imgs/img1.png)
+[Image 2](/imgs/img2.png)
 `
     render()
 })

src/less/gallery.less

@@ -0,0 +1,81 @@
+@import "constant";
+
+.halo-render.gallery {
+  border: 1px solid @secondary-light;
+  border-radius: @border-radius;
+  padding: 10px 15px;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    margin-bottom: 10px;
+
+    .iconfont {
+      font-size: 30px;
+      margin-right: 5px;
+    }
+  }
+
+
+  .image-list {
+    display: flex;
+    width: 100%;
+
+    .vditor--gallery-container {
+      .img {
+        border-radius: @border-radius!important;
+      }
+    }
+  }
+
+  &&.grid {
+
+    .image-list {
+      flex-wrap: wrap;
+      column-gap: 2%;
+      row-gap: 10px;
+
+      .vditor--gallery-container {
+        width: 32%;
+        height: 0;
+        position: relative;
+        padding-bottom: 32%;
+
+        .img {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      @media screen and (min-width: 1400px) {
+        .container {
+          width: 23%;
+          padding-bottom: 23%;
+        }
+      }
+    }
+  }
+
+  &&.linear {
+    .image-list {
+      display: flex;
+      overflow-y: hidden;
+      overflow-x: auto;
+      width: 100%;
+      gap: 10px;
+
+      .vditor--gallery-container {
+        height: 300px;
+
+        .img {
+          height: 99%;
+          width: auto!important;
+          max-width: unset!important;
+        }
+      }
+    }
+  }
+}

src/provider/gallery-provider.ts

@@ -0,0 +1,26 @@
+import {IOptions, Provider} from "./provider";
+import {RENDER_CLASS} from "../constant";
+import "../less/gallery.less"
+
+export class GalleryProvider implements Provider {
+    check(type: string): boolean {
+        return type.startsWith("gallery");
+    }
+    process(type: string, content: string, options: IOptions): string {
+        const imgInfoList = content.split("\n")
+        const [, subtype, title=""] = type.match(/gallery:([a-zA-Z]+)(?:\[(.*?))?$/)
+        console.log(subtype)
+        let html = `<div class="${RENDER_CLASS} gallery ${subtype}">`
+        html += `<div class="title"><span class="iconfont">&#xe61a;</span>${title.replace("]", "") || "图集"}</div>`
+        // Start Image List
+        html += `<div class="image-list">`
+        imgInfoList.forEach(info => {
+            if (!info) return;
+            const [, alt, url] = info.match(/\[(.*)]\((.*)\)/)
+            html+= `<div class="vditor--gallery-container"><img class="img" src="${url}" alt="${alt}" /></div>`
+        })
+        html += `</div>`
+        // RETURN
+        return html + "</div>"
+    }
+}

src/provider/provider-list.ts

@@ -2,9 +2,11 @@ import {TipsProvider} from "./tips-provider";
 import {Provider} from "./provider";
 import {GitProvider} from "./git-provider";
 import {DriveProvider} from "./drive-provider";
+import {GalleryProvider} from "./gallery-provider";
 
 export const ProviderList:Array<Provider> = [
     new TipsProvider(),
     new GitProvider(),
-    new DriveProvider()
+    new DriveProvider(),
+    new GalleryProvider()
 ]

src/provider/provider.ts

@@ -3,8 +3,8 @@ import {ProviderList} from "./provider-list";
 import {RENDER_CLASS} from "../constant";
 
 export declare interface Provider {
-    check: (type: string) => boolean
-    process: (type:string,content: string, options: IOptions) => string
+    check(type: string): boolean
+    process(type:string,content: string, options: IOptions): string
 }
 
 export class ProviderFactory {

webpack.dev.js

@@ -61,6 +61,9 @@ module.exports = {
         })
     ],
     devServer: {
+        static: {
+            directory: path.join(__dirname , 'assets'),
+        },
         port: 9000,
         host: "0.0.0.0"
     }