Fixed messed up layout because of over transforming text node that don't match search pattern.

This commit is contained in:
Tuan Cao 2022-04-28 16:51:00 +07:00
parent 4dc41ad032
commit 6a144536e6

View File

@ -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;
};
}