@mikezimm/fps-core-v7
Version:
Library of reusable core interfaces, types and constants migrated from fps-library-v2
208 lines • 10.6 kB
JavaScript
import { replaceHTMLEntitiesv1 } from "../../../../logic/Strings/html";
export const imgSrcRegex = /<iframe[\s\S]*>/gi;
/**
*
Need to do special parsing on custom webparts:
*/
const specialWebPartIDs = [
'37b649bc-f846-4718-863d-9487d8fffb23',
'92b4cb98-3aa1-4ece-9149-a591a572aced',
'2762fd19-106f-4fcc-9949-0c58c512be4e',
'44f426eb-86a2-41d0-bf5d-3db469b93ab6', // FPS Easy Contents Webpart
];
/**
* 2024-12-31: Migrated from fps-library-v2:
*
* import { reverseStylesStringQuotesm, getModernHumanReadable, getCanvaseWebPartsFromContent } from "@mikezimm/fps-core-v7/lib/components/molecules/ModernPages/functions/processModernContent";
*
* reverseStylesStringQuotes will take the WebPart Styles css and fix all the double quotes so it can actually be parsed.
* Without this, you can not parse the html.
*
* Looks for strings like this:
* "pageInfoStyle":""paddingBottom":"20px","backgroundColor":"#dcdcdc";"borderLeft":"solid 3px #c4c4c4"","bannerStyleChoice":
*
* and converts to strings like this:
* "pageInfoStyle":"'paddingBottom':'20px','backgroundColor':'#dcdcdc';'borderLeft':'solid 3px #c4c4c4'","bannerStyleChoice":
* @param str
* @returns
*/
export function reverseStylesStringQuotes(str) {
let newString = '';
// part = part.replace(/:\"\"(?!,)/g, ':\"\''); //Replace instances of :"" that do not have a comma after it
// part = part.replace(/(?<!:)\"\",/g, '\'\",'); //Replace instances of "", that do not have a colon in front it
str = str.replace(/:"{"/g, ':{"');
str = str.replace(/"}"/g, '"}');
// str = str.replace(/:\"{\"/g, ':{\"');
// str = str.replace(/\"}\"/g, '\"}');
const styleColons = str.split(/:""(?!,)/g); // Split by :"" strings
const newParts = [];
console.log('reversStyle: styleColons', styleColons);
styleColons.map((part, idx1) => {
if (idx1 === 0) {
newParts.push(part); //The first one never has to be fixed.
}
else { //All other items need to be fixed
//Step 1: Find where to stop .... 250px"", --- basically where you find /(?<!:)\"\",/g
const portions = part.split(/(?<!:)"",/g); // Split by "", strings
console.log(`reversStyle: portions1 /(?<!:)"",/g`, portions);
if (portions.length > 2)
alert('Whoa, wasnt expecting this.ToggleJSONCmd.key.toLocaleString.~ 342');
if (portions.length > 1)
portions[0] = portions[0].replace(/"/g, "'"); //Replace all double quotes with single quotes only if there is a second half
if (portions.length > 1)
portions[1] = reverseStylesStringQuotes(portions[1]); //Replace all double quotes with single quotes only if there is a second half
console.log('reversStyle: portions2', portions);
newParts.push(portions.join(`'",`));
console.log('reversStyle: newParts1', newParts);
//Step 2: From start to stop, replace double quotes " with single quotes '
//Step 3: Push to newParts
}
});
console.log('reversStyle: newPartsz', newParts);
newString = newParts.join(':"\'');
// let typeDivs = newString.split('{"type":"div"');
// let result = typeDivs[0];
// if ( typeDivs.length > 0 ) {
// newString = result + '""';
// }
return newString;
}
//String constants used to parse W
const errCanvasWebParts = 'Unable to parse HumanJSON_ContentWebparts';
const CanvasWebPartsTag = '<div data-sp-canvascontrol="" data-sp-canvasdataversion="1.0" data-sp-controldata="';
const WebPartDataTag = 'data-sp-webpartdata="';
/**
* This will take Modern Page and convert CanvasContent1 into more human readable version.
* The goal is to make it easier to debug and see what is in the HTML replacing all special characters and entites with actual characters.
*
* Example of CanvaseCotnent1: Contents","tocExpanded":true,"minHeadingToShow":"h3","pageInfoStyle":"
* \"paddingBottom\":\"20px\",\"backgroundColor\":\"#dcdcdc\";\"borderLeft\":\"solid 3px #c4c4c4\"",&qu
*
* TO:
* "tocExpanded":true,"minHeadingToShow":"h3","pageInfoStyle":""paddingBottom":"20px","backgroundColor":"#dcdcdc";"borderLeft":"solid 3px #c4c4c4"","bannerStyleChoice":"corpDark1","bannerStyle":"{"color":"white","backgroundColor":"#005495",
*
* @param result
* @returns
*/
export function getModernHumanReadable(result) {
const startParsing = new Date();
//Added this for debug option to be able to read CanvasContent1 better
if (!result.HumanReadable_Canvas1)
result.HumanReadable_Canvas1 = result.CanvasContent1 ? replaceHTMLEntitiesv1(result.CanvasContent1) : '';
if (result.HumanReadable_Canvas1) { //Look for any web part properties and add to JSON object
const webparts = result.HumanReadable_Canvas1.split(CanvasWebPartsTag);
if (webparts.length > 0) {
webparts.map((part, idx1) => {
if (idx1 > 0) {
if (idx1 === 1)
result.HumanJSON_ContentWebparts = [];
result.HumanJSON_ContentWebparts.push(getCanvaseWebPartsFromContent(part));
}
});
}
}
/**
* Convert LayoutWebpartsContent portion from html entities to more human readable
*/
if (!result.HumanReadable_LayoutWebpartsContent)
result.HumanReadable_LayoutWebpartsContent = result.LayoutWebpartsContent ? replaceHTMLEntitiesv1(result.LayoutWebpartsContent) : ''; // eslint-disable-line dot-notation
const LayoutWebpartsTag = '<div><div data-sp-canvascontrol="" data-sp-canvasdataversion="1.4" data-sp-controldata="';
if (result.HumanReadable_LayoutWebpartsContent.indexOf(LayoutWebpartsTag) === 0) {
try {
result.HumanJSON_LayoutWebpartsContent = JSON.parse(result.HumanReadable_LayoutWebpartsContent.replace(LayoutWebpartsTag, '').replace('"></div></div>', ''));
}
catch (e) {
result.HumanJSON_LayoutWebpartsContent = 'Unable to parse LayoutWebpartsContent' + JSON.stringify(e);
}
}
//Gets page HTML for Author and Editor
if (!result.HumanReadableOData_Author)
result.HumanReadableOData_Author = result.Author ? replaceHTMLEntitiesv1(result.Author) : ''; // eslint-disable-line dot-notation
if (!result.HumanReadableOData_Editor)
result.HumanReadableOData_Editor = result.Editor ? replaceHTMLEntitiesv1(result.Editor) : ''; // eslint-disable-line dot-notation
const endParsing = new Date();
result.parsingTime = (endParsing.getTime() - startParsing.getTime());
console.log('parse time: ', result.parsingTime);
return result;
}
export function getCanvaseWebPartsFromContent(part) {
let HumanJSON_ContentWebpart = {};
const startWebPartData = part.indexOf(WebPartDataTag);
const parseThisPart = startWebPartData < 0 ? part : part.substring(startWebPartData).replace(WebPartDataTag, '');
let parseMe = parseThisPart.substring(0, parseThisPart.indexOf('"><'));
try {
const doubleQuotes = parseMe.split(/(?<!:)""(?!,)/g);
if (doubleQuotes.length > 0) {
let cleanParseMe = '';
const newDoubleQuotes = [];
doubleQuotes.map((doubleQt, idx2) => {
if (doubleQuotes.length === 0) {
//Do nothing, there are no elements with double quotes
}
else if (idx2 === 0) {
//Do nothing, this is the first element that does not have quotes
// console.log(' doubleQuotes1:' , doubleQt );
}
else if (idx2 !== doubleQuotes.length - 1) { //This is the last item so this should not need to change quotes
doubleQt = `"'${doubleQt.replace(/"/g, "'")}'"`;
// console.log(' doubleQuotes2:' , doubleQt );
}
newDoubleQuotes.push(doubleQt);
});
cleanParseMe = newDoubleQuotes.join('');
// console.log('cleanParseMe', cleanParseMe );
parseMe = cleanParseMe;
let isSpecial = false;
specialWebPartIDs.map(id => {
if (parseMe.indexOf(id) > -1) {
isSpecial = true;
}
});
if (isSpecial === true) { //This is a web part with known complex props that need special code
parseMe = reverseStylesStringQuotes(parseMe);
const typeDivs = parseMe.split('{"type":"div"');
parseMe = typeDivs[0];
if (typeDivs.length > 1) {
parseMe += '""}}';
}
}
}
/**
* You Tube Web Part
*/
let parseThisObject = null;
if (parseMe.indexOf('544dd15b-cf3c-441b-96da-004d5a8cea1d') > -1) {
const iframes = parseMe.match(imgSrcRegex);
//This is the youtube video... add some things manually
if (iframes && iframes.length > 0) {
parseMe = parseMe.replace(iframes[0], '');
}
parseThisObject = JSON.parse(parseMe);
parseThisObject.properties.cachedEmbedCode = iframes ? iframes[0] : '';
}
else {
parseThisObject = JSON.parse(parseMe);
}
/**
* OOTB Text Web Part
*/
const startContent = part.indexOf('"><') + 2;
const endContent = part.lastIndexOf('</div>');
let thisContent = part.substring(startContent, endContent);
if (thisContent.indexOf('<div data-sp-rte="">') > -1) {
//This is common Text WebPart
parseThisObject.title = 'OOTB Text Web Part';
}
else {
//This is not OOTB Text Web Part so trim props from beginning of string
thisContent = thisContent.substring(thisContent.indexOf('"><') + 2);
}
parseThisObject.content = thisContent;
HumanJSON_ContentWebpart = parseThisObject;
}
catch (e) {
HumanJSON_ContentWebpart = { part: part, errorText: errCanvasWebParts, parseMe: parseMe, error: e };
}
return HumanJSON_ContentWebpart;
}
//# sourceMappingURL=processModernContent.js.map