Fixed messed up layout because of over transforming text node that don't match search pattern.
This commit is contained in:
parent
4dc41ad032
commit
6a144536e6
@ -1,105 +1,94 @@
|
||||
import { visit } from "unist-util-visit";
|
||||
import {visit} from "unist-util-visit";
|
||||
|
||||
const regex = /\!\[\[(([a-z\-_0-9\\/\:]+\s*)+\.(jpg|jpeg|png|gif|svg|webp))]]/gi;
|
||||
|
||||
function convertTextNode(node) {
|
||||
const searchText = node.value;
|
||||
const searchText = node.value;
|
||||
|
||||
/*
|
||||
This regex MATCH following type of image link
|
||||
![[youtube.png]] ==> Image with no folder path, no space in between
|
||||
![[a .png]] ==> with space
|
||||
![[tuancao/a.png]] ==> file path WITHOUT space
|
||||
![[tuancao/a .png]] ==> file path WITH space
|
||||
/*
|
||||
This regex MATCH following type of image link
|
||||
![[youtube.png]] ==> Image with no folder path, no space in between
|
||||
![[a .png]] ==> with space
|
||||
![[tuancao/a.png]] ==> file path WITHOUT space
|
||||
![[tuancao/a .png]] ==> file path WITH space
|
||||
|
||||
Image with extension: jpg, jpeg, gif, svg, webp, png
|
||||
![[/tuancao/a.jpg]]
|
||||
![[/tuancao/a.webp]]
|
||||
![[/tuancao/a.png]]
|
||||
![[/tuancao/a.jpeg]]
|
||||
...
|
||||
Image with extension: jpg, jpeg, gif, svg, webp, png
|
||||
![[/tuancao/a.jpg]]
|
||||
![[/tuancao/a.webp]]
|
||||
![[/tuancao/a.png]]
|
||||
![[/tuancao/a.jpeg]]
|
||||
...
|
||||
|
||||
---
|
||||
Will NOT match following case
|
||||
---
|
||||
Will NOT match following case
|
||||
|
||||
[[picture.jpg]] ==> Link without "!" at the begining won't match
|
||||
![[abc]] ==> without the extension
|
||||
![[/tuancao/a.md]] ==> Unsupported format
|
||||
![[/tuancao/a.mp4]]==> Unsupported format
|
||||
*/
|
||||
[[picture.jpg]] ==> Link without "!" at the begining won't match
|
||||
![[abc]] ==> without the extension
|
||||
![[/tuancao/a.md]] ==> Unsupported format
|
||||
![[/tuancao/a.mp4]]==> Unsupported format
|
||||
*/
|
||||
const matches = searchText.matchAll(
|
||||
regex
|
||||
);
|
||||
|
||||
// if (typeof searchText !== "string") {
|
||||
// console.log("The fuck???")
|
||||
// return node
|
||||
// }
|
||||
let startIndex = 0;
|
||||
let endIndex = searchText.length;
|
||||
|
||||
// if (!regex.test(node.value)) return node
|
||||
let children = [];
|
||||
for (const match of matches) {
|
||||
endIndex = match.index;
|
||||
|
||||
const matches = searchText.matchAll(
|
||||
regex
|
||||
);
|
||||
// Constructing text node from un-matched string
|
||||
const textNode = {
|
||||
// change type child node, so that visit() function won't recursively visit this node with "text" type
|
||||
type: "text-temp",
|
||||
value: searchText.substring(startIndex, endIndex),
|
||||
};
|
||||
|
||||
const imageNode = {
|
||||
type: "myImage",
|
||||
url: encodeURI(match[1]), //encode white space from file name
|
||||
alt: match[1],
|
||||
};
|
||||
|
||||
let startIndex = 0;
|
||||
let endIndex = searchText.length;
|
||||
children.push(imageNode);
|
||||
|
||||
let children = [];
|
||||
for (const match of matches) {
|
||||
endIndex = match.index;
|
||||
|
||||
// Constructing text node from un-matched string
|
||||
const textNode = {
|
||||
// change type child node, so that visit() function won't recursively visit this node with "text" type
|
||||
type: "text-temp",
|
||||
value: searchText.substring(startIndex, endIndex),
|
||||
};
|
||||
|
||||
// if (typeof textNode.value ==='string' && textNode.value.length > 0) {
|
||||
// children.push(textNode);
|
||||
// } else {
|
||||
// console.log("THE FUCK")
|
||||
// }
|
||||
|
||||
const imageNode = {
|
||||
type: "myImage",
|
||||
url: encodeURI(match[1]), //encode white space from file name
|
||||
alt: match[1],
|
||||
};
|
||||
|
||||
children.push(imageNode);
|
||||
|
||||
if (typeof match[0] !== "string") {
|
||||
console.log("THE FUCK again")
|
||||
if (typeof match[0] !== "string") {
|
||||
console.log("THE FUCK again")
|
||||
}
|
||||
let matchEndIndex = match.index + match[0].length;
|
||||
startIndex = matchEndIndex;
|
||||
}
|
||||
let matchEndIndex = match.index + match[0].length;
|
||||
startIndex = matchEndIndex;
|
||||
}
|
||||
|
||||
if (startIndex < searchText.length) {
|
||||
const textNode = {
|
||||
type: "text-temp",
|
||||
value: searchText.substring(startIndex, searchText.length),
|
||||
if (startIndex < searchText.length) {
|
||||
const textNode = {
|
||||
type: "text-temp",
|
||||
value: searchText.substring(startIndex, searchText.length),
|
||||
};
|
||||
children.push(textNode);
|
||||
}
|
||||
|
||||
return {
|
||||
type: "paragraph",
|
||||
children: children,
|
||||
};
|
||||
children.push(textNode);
|
||||
}
|
||||
|
||||
return {
|
||||
type: "paragraph",
|
||||
children: children,
|
||||
};
|
||||
}
|
||||
|
||||
export default function attacher(options) {
|
||||
return function transformer(tree, vfile) {
|
||||
visit(tree, "text", (node) => {
|
||||
const newNode = convertTextNode(node);
|
||||
node.type = "paragraph";
|
||||
node.children = newNode.children;
|
||||
});
|
||||
return function transformer(tree, vfile) {
|
||||
visit(tree, "text", (node) => {
|
||||
if (regex.test(node.value)) {
|
||||
const newNode = convertTextNode(node);
|
||||
node.type = "paragraph";
|
||||
node.children = newNode.children;
|
||||
}
|
||||
});
|
||||
|
||||
// Change back "text-temp" node ==> "text" to clean up
|
||||
visit(tree, "text-temp", (node) => {
|
||||
node.type = "text";
|
||||
});
|
||||
// Change back "text-temp" node ==> "text" to clean up
|
||||
visit(tree, "text-temp", (node) => {
|
||||
node.type = "text";
|
||||
});
|
||||
|
||||
return tree;
|
||||
};
|
||||
return tree;
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user