feat:横屏移动

Author: 375ro

src/utils/helper.js

@@ -10,6 +10,7 @@ import markdownItRuby from "markdown-it-ruby";
 import markdownItSpan from "./markdown-it-span";
 import markdownItRemovepre from "./markdown-it-removepre";
 import markdownItLinkfoot from "./markdown-it-linkfoot";
+import markdownItImageFlow from "./markdown-it-imageflow";
 import highlightjs from "./langHighlight";
 import markdownLiReplacer from "./markdown-it-li";
 import {LAYOUT_ID} from "./constant";
@@ -93,7 +94,8 @@ markdownParserWechat
   .use(markdownItRuby) // 注音符号
   .use(markdownItImplicitFigures, {figcaption: true}) // 图示
   .use(markdownItDeflist) // 定义列表
-  .use(markdownLiReplacer); // li 标签中加入 p 标签
+  .use(markdownLiReplacer) // li 标签中加入 p 标签
+  .use(markdownItImageFlow); // 横屏移动插件
 
 // 普通解析器，代码高亮用highlight
 export const markdownParser = new MarkdownIt({
@@ -126,7 +128,8 @@ markdownParser
   .use(markdownItRuby) // 注音符号
   .use(markdownItImplicitFigures, {figcaption: true}) // 图示
   .use(markdownItDeflist) // 定义列表
-  .use(markdownLiReplacer); // li 标签中加入 p 标签
+  .use(markdownLiReplacer) // li 标签中加入 p 标签
+  .use(markdownItImageFlow); // 横屏移动插件
 
 export const replaceStyle = (id, css) => {
   const style = document.getElementById(id);

src/utils/markdown-it-imageflow.js

@@ -0,0 +1,79 @@
+const defaultOption = {
+  limitless: false, // 限制图片数量
+  limit: 10, // 图片数量上限,
+  height: 300, // 组件高度
+};
+
+const imageFlowPlugin = (md, opt) => {
+  const options = opt || defaultOption;
+  const style = {
+    IF_layer1: `margin:1em;white-space:normal;border:none;padding:0px;overflow:hidden;height:${options.height}px;line-height:${options.height}px`,
+    IF_layer2: `white-space:nowrap;width:100%;overflow-x:scroll;`,
+    IF_layer3: `display:inline-block;word-wrap:break-word;white-space:normal;vertical-align:middle;width:100%;`,
+    IF_image: `display:inline-block;`,
+  };
+
+  const tokenize = (state, silent) => {
+    let result = false;
+    let token;
+    const matchReg = /^<((!\[([^\]])*\]\(([^)])*\)(,?)(\s)*)*)>/;
+
+    if (silent) {
+      return result;
+    }
+    if (state.src.charCodeAt(state.pos) !== 0x3c /* < */) {
+      return result;
+    }
+
+    const match = matchReg.exec(state.src.substr(state.pos));
+
+    if (match) {
+      if (options.limitless) {
+        result = true;
+      } else if (match[1].split(/,|\s/).filter((val) => val).length < options.limit) {
+        result = true;
+      } else {
+        return result;
+      }
+
+      token = state.push("imageFlow_start", "imageFlow", 1);
+      token = state.push("imageFlow_content", "imageFlow", 0);
+      [, token.content] = match;
+      token = state.push("imageFlow_end", "imageFlow", -1);
+
+      // update position
+      var newline = state.src.indexOf("\n", state.pos);
+      if (newline !== -1) {
+        state.pos = newline;
+      } else {
+        state.pos = state.pos + state.posMax + 1;
+      }
+    }
+
+    return result;
+  };
+
+  md.renderer.rules.imageFlow_start = () => {
+    return `<section style=${style.IF_layer1}><section style=${style.IF_layer2}>`;
+  };
+  md.renderer.rules.imageFlow_end = () => {
+    return `</section></section>`;
+  };
+  md.renderer.rules.imageFlow_content = (tokens, idx) => {
+    const contents = tokens[idx].content.split(/,|\s/).filter((val) => val);
+    let wrapperContent = "";
+    let image;
+    contents.forEach((content) => {
+      image = content.split(/\[|\]|\(|\)|!/).filter((val) => val);
+      wrapperContent += `<section style=${style.IF_layer3}><img alt=${image[0]} src=${image[1]} style=${
+        style.IF_image
+      } /></section>`;
+    });
+
+    return wrapperContent;
+  };
+
+  md.inline.ruler.before("image", "imageFlow", tokenize);
+};
+
+export default imageFlowPlugin;