Add support for shortcodes with if/else results

packages/mg-shortcodes/README.md

@@ -25,6 +25,11 @@ shortcodes.add('link', ({attrs, content}) => {
     return `<a href="${attrs.url}">${content}</a>`;
 });
 
+// [abc color="red"]<p>Full post</p>[def]<p>Free excerpt</p>[/abc]
+shortcodes.addWitSplit('abc', 'def', 0, ({content}) => {
+    return content; // <p>Full post</p>
+});
+
 // Unwrap [block] shortcodes
 shortcodes.unwrap('block');
 

packages/mg-shortcodes/lib/Shortcodes.js

@@ -8,6 +8,10 @@ export default class Shortcodes {
         this.shortcodes.push({name, callback});
     }
 
+    addWitSplit(name, split, target, callback) {
+        this.shortcodes.push({name, split, target, callback});
+    }
+
     unwrap(name) {
         this.shortcodes.push({name, callback: ({content}) => {
             return `${content} `;
@@ -142,14 +146,24 @@ export default class Shortcodes {
         return (result) ? result : false;
     }
 
+    getShortcode(name) {
+        if (!name) {
+            return false;
+        }
+
+        let foundShortcode = this.shortcodes.filter(n => n.name === name);
+
+        return foundShortcode[0];
+    }
+
     getCallback(name) {
         if (!name) {
             return false;
         }
 
-        let thisThing = this.shortcodes.filter(n => n.name === name);
+        let foundShortcode = this.shortcodes.filter(n => n.name === name);
 
-        return thisThing[0].callback;
+        return foundShortcode[0].callback;
     }
 
     process() {
@@ -158,10 +172,18 @@ export default class Shortcodes {
         let knownShortcode = this.hasKnownShortcode(text);
 
         if (knownShortcode) {
-            // console.log({knownShortcode});
-            const theCall = this.getCallback(knownShortcode.name);
+            const thisShortcode = this.getShortcode(knownShortcode.name);
+            const theCall = thisShortcode.callback;
             const attrs = this.parseAttributes(knownShortcode.match.groups.attrs);
-            const content = knownShortcode.match.groups.content;
+            let content = knownShortcode.match.groups.content;
+
+            // If the shortcode has a `split` param & is present in the `content`, split the content and return the target
+            if (thisShortcode.split && content.includes(`[${thisShortcode.split}]`)) {
+                const splitContent = content.split(`[${thisShortcode.split}]`);
+                content = splitContent[thisShortcode.target];
+            }
+
+            // content = content?.trim();
 
             if (theCall) {
                 text = text.replace(knownShortcode.match[0], theCall({attrs, content}));

packages/mg-shortcodes/test/shortcode.test.js

@@ -515,4 +515,62 @@ describe('Shortcode processing', function () {
 
         expect(parsed).toEqual('Hello  world  ');
     });
+
+    test('Can handle shortcodes with splits', function () {
+        const shortcodes = new Shortcodes();
+
+        shortcodes.addWitSplit('premium_content', 'premelse', 0, ({attrs, content}) => {
+            return `<div data-color="${attrs?.color ?? 'blue'}">${content}</div>`;
+        });
+
+        shortcodes.add('plan_setup', () => {
+            return '';
+        });
+
+        const html = `[premium_content color="red"]
+        <p>Full post</p>
+        [premelse]
+        <p>Free excerpt</p>
+        [/premium_content]
+        [premium_content plan="unregistered," type="show"]
+            [plan_setup id="2" hide_title="true"]
+        [/premium_content]`;
+
+        let parsed = shortcodes.parse(html).trim();
+
+        expect(parsed).toInclude('<div data-color="red">');
+        expect(parsed).toInclude('<p>Full post</p>');
+        expect(parsed).not.toInclude('<p>Free excerpt</p>');
+        expect(parsed).not.toInclude('premium_content');
+        expect(parsed).not.toInclude('plan_setup');
+    });
+
+    test('Can handle shortcodes with splits and return other part', function () {
+        const shortcodes = new Shortcodes();
+
+        shortcodes.addWitSplit('premium_content', 'premelse', 1, ({attrs, content}) => {
+            return `<div data-color="${attrs?.color ?? 'blue'}">${content}</div>`;
+        });
+
+        shortcodes.add('plan_setup', () => {
+            return '';
+        });
+
+        const html = `[premium_content color="red"]
+        <p>Full post</p>
+        [premelse]
+        <p>Free excerpt</p>
+        [/premium_content]
+        [premium_content plan="unregistered," type="show"]
+            [plan_setup id="2" hide_title="true"]
+        [/premium_content]`;
+
+        let parsed = shortcodes.parse(html).trim();
+
+        expect(parsed).toInclude('<div data-color="blue">');
+        expect(parsed).toInclude('<p>Free excerpt</p>');
+        expect(parsed).not.toInclude('<p>Full post</p>');
+        expect(parsed).not.toInclude('premium_content');
+        expect(parsed).not.toInclude('plan_setup');
+    });
 });