Escape shortcodes with opt in

KevinBatdorf · Sep 29, 2024 · 536825b · 536825b
1 parent 43b59d2
commit 536825b
Show file tree

Hide file tree

Showing 20 changed files with 170 additions and 100 deletions.
diff --git a/code-block-pro.php b/code-block-pro.php
@@ -34,3 +34,8 @@
 include_once(__DIR__ . '/php/compatibility.php');
 include_once(__DIR__ . '/php/router.php');
 include_once(__DIR__ . '/php/routes.php');
+
+// register dummy shortcode to test
+add_shortcode('foo', function ($attr, $content) {
+    return 'bar';
+});
diff --git a/cypress/e2e/buttons.cy.js b/cypress/e2e/buttons.cy.js
@@ -4,10 +4,10 @@ beforeEach(() => {
     cy.loginUser();
     cy.visitNewPageEditor();
     cy.addBlock('kevinbatdorf/code-block-pro');
-    cy.getPostContent('.wp-block[class$="code-block-pro"]').should('exist');
+    cy.getPostContent('.wp-block[class*="code-block-pro"]').should('exist');
 
     cy.focusBlock('code-block-pro', 'textarea');
-    cy.get('.wp-block[class$="code-block-pro"] textarea').should('have.focus');
+    cy.get('.wp-block[class*="code-block-pro"] textarea').should('have.focus');
 });
 afterEach(() => {
     cy.saveDraft(); // so we can leave without an alert
@@ -18,14 +18,14 @@ context('Copy button', () => {
         cy.openSideBarPanel('Buttons');
 
         cy.get('[data-cy="copy-button"]').should('exist').should('be.checked');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'Copy');
 
         cy.get('[data-cy="copy-button"]').uncheck();
         cy.get('[data-cy="copy-button"]').should('not.be.checked');
 
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('not.contain', 'Copy');
     });
@@ -34,7 +34,7 @@ context('Copy button', () => {
         cy.openSideBarPanel('Buttons');
 
         cy.get('[data-cy="copy-button"]').should('exist').should('be.checked');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'M9 5H7a2 2 0 00-2 2v12a2') // Clipboard.tsx
             .should('not.contain', 'M16.5 8.25V6a2.25 2.25'); // TwoSquares.tsx
@@ -46,7 +46,7 @@ context('Copy button', () => {
         cy.get('#code-block-pro-copy-button-twoSquares').should('exist');
         cy.get('#code-block-pro-copy-button-twoSquares').click();
 
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'M16.5 8.25V6a2.25 2.25') // TwoSquares.tsx
             .should('not.contain', 'M9 5H7a2 2 0 00-2 2v12a2'); // Clipboard.tsx
@@ -101,7 +101,7 @@ context('Copy button', () => {
         cy.openSideBarPanel('Buttons');
 
         cy.get('[data-cy="copy-button"]').should('exist').should('be.checked');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'M9 5H7a2 2 0 00-2 2v12a2') // Clipboard.tsx
             .should('not.contain', '<span class="cbp-btn-text">Copy'); // TextSimple.tsx
@@ -114,7 +114,7 @@ context('Copy button', () => {
         cy.get('#code-block-pro-copy-button-textSimple').click();
 
         // Button changed - expected default text is shown
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', '<span class="cbp-btn-text">Copy') // TextSimple.tsx
             .should('not.contain', 'M9 5H7a2 2 0 00-2 2v12a2'); // Clipboard.tsx
@@ -125,7 +125,7 @@ context('Copy button', () => {
             .should('have.value', 'Copy')
             .clear();
         cy.get('#code-block-pro-copy-button-text').type('foo-bar-baz-lets-go');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', '<span class="cbp-btn-text">foo-bar-baz-lets-go')
             .should('not.contain', '<span class="cbp-btn-text">Copy');

diff --git a/cypress/e2e/extra-settings.cy.js b/cypress/e2e/extra-settings.cy.js
@@ -4,10 +4,10 @@ beforeEach(() => {
     cy.loginUser();
     cy.visitNewPageEditor();
     cy.addBlock('kevinbatdorf/code-block-pro');
-    cy.getPostContent('.wp-block[class$="code-block-pro"]').should('exist');
+    cy.getPostContent('.wp-block[class*="code-block-pro"]').should('exist');
 
     cy.focusBlock('code-block-pro', 'textarea');
-    cy.get('.wp-block[class$="code-block-pro"] textarea').should('have.focus');
+    cy.get('.wp-block[class*="code-block-pro"] textarea').should('have.focus');
 });
 afterEach(() => {
     cy.saveDraft(); // so we can leave without an alert
@@ -25,7 +25,7 @@ context('Extra Settings', () => {
             codeOutput: '<script><</script>',
         });
 
-        cy.getPostContent('.wp-block[class$="code-block-pro"] pre')
+        cy.getPostContent('.wp-block[class*="code-block-pro"] pre')
             .invoke('html')
             .should('not.contain', encodeURI('<'));
 
@@ -43,7 +43,7 @@ context('Extra Settings', () => {
 
         cy.addCode('<script>&lt;</script>');
 
-        cy.getPostContent('.wp-block[class$="code-block-pro"] pre')
+        cy.getPostContent('.wp-block[class*="code-block-pro"] pre')
             .invoke('html')
             .should('contain', '>lt</span>'); // formatted with highlighter
 
@@ -53,4 +53,37 @@ context('Extra Settings', () => {
             .should('exist')
             .should('contain', '<script>&lt;</script>');
     });
+
+    it.only('Escapes WordPress shortcodes', () => {
+        cy.openSideBarPanel('Extra Settings');
+        cy.get('[data-cy="use-escape-shortcodes"]')
+            .should('exist')
+            .should('not.be.checked');
+
+        cy.setLanguage('plaintext');
+        cy.addCode('[embed]foo[/embed]');
+        cy.getPostContent('.wp-block[class*="code-block-pro"] pre')
+            .invoke('html')
+            .should('contain', '[embed]foo[/embed]'); // Doesn't render
+
+        cy.previewCurrentPage();
+        cy.get('.wp-block-kevinbatdorf-code-block-pro pre')
+            .should('exist')
+            .invoke('html')
+            .should('contain', '<a href="http://foo">foo</a>'); // Renders
+
+        cy.go('back');
+        cy.focusBlock('code-block-pro');
+        cy.openSideBarPanel('Extra Settings');
+        cy.get('[data-cy="use-escape-shortcodes"]').check();
+        cy.getPostContent('.wp-block[class*="code-block-pro"] pre')
+            .invoke('html')
+            .should('contain', '[embed]foo[/embed]'); // Doesn't render
+
+        cy.previewCurrentPage();
+        cy.get('.wp-block-kevinbatdorf-code-block-pro pre')
+            .should('exist')
+            .invoke('html')
+            .should('contain', '[embed]foo[/embed]'); // Doesn't render
+    });
 });
diff --git a/cypress/e2e/footers.cy.js b/cypress/e2e/footers.cy.js
@@ -3,30 +3,30 @@ beforeEach(() => {
     cy.loginUser();
     cy.visitNewPageEditor();
     cy.addBlock('kevinbatdorf/code-block-pro');
-    cy.getPostContent('.wp-block[class$="code-block-pro"]').should('exist');
+    cy.getPostContent('.wp-block[class*="code-block-pro"]').should('exist');
 
     cy.focusBlock('code-block-pro', 'textarea');
-    cy.get('.wp-block[class$="code-block-pro"] textarea').should('have.focus');
+    cy.get('.wp-block[class*="code-block-pro"] textarea').should('have.focus');
 });
 afterEach(() => {
     cy.saveDraft(); // so we can leave without an alert
     cy.logoutUser();
 });
 context('Footers', () => {
     it('Renders no footer on insert and can swap', () => {
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .find('div')
             .first()
             .siblings()
             .should('have.length', 2);
         cy.setFooter('simpleStringEnd');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .find('div')
             .first()
             .siblings()
             .should('have.length', 3);
         cy.setFooter('none');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .find('div')
             .first()
             .siblings()
@@ -37,23 +37,23 @@ context('Footers', () => {
         // Remove the header/footer if there
         cy.setHeader('none');
         cy.setFooter('none');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('not.contain', 'JavaScript');
         cy.setFooter('simpleStringEnd');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'JavaScript');
         cy.setLanguage('ruby');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'Ruby');
         cy.openSideBarPanel('Settings');
         cy.get('#code-block-pro-footer-text')
             .should('exist')
             .should('have.value', '')
             .type('foo-bar-baz-lets-go');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'foo-bar-baz-lets-go')
             .should('not.contain', 'Ruby')

diff --git a/cypress/e2e/headers.cy.js b/cypress/e2e/headers.cy.js
@@ -3,41 +3,41 @@ beforeEach(() => {
     cy.loginUser();
     cy.visitNewPageEditor();
     cy.addBlock('kevinbatdorf/code-block-pro');
-    cy.getPostContent('.wp-block[class$="code-block-pro"]').should('exist');
+    cy.getPostContent('.wp-block[class*="code-block-pro"]').should('exist');
 
     cy.focusBlock('code-block-pro', 'textarea');
-    cy.get('.wp-block[class$="code-block-pro"] textarea').should('have.focus');
+    cy.get('.wp-block[class*="code-block-pro"] textarea').should('have.focus');
 });
 afterEach(() => {
     cy.saveDraft(); // so we can leave without an alert
     cy.logoutUser();
 });
 context('Headers', () => {
     it('Renders default header and can switch', () => {
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'fill="#FF5F56" stroke="#E0443E"');
         cy.setHeader('headlightsMuted');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('not.contain', 'fill="#FF5F56" stroke="#E0443E"')
             .should('contain', 'fill="#d8dee933" stroke="#d8dee94d"');
     });
     it('Can accept text inputs on some headers', () => {
         cy.setHeader('simpleString');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'JavaScript');
         cy.setLanguage('ruby');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'Ruby');
         cy.openSideBarPanel('Settings');
         cy.get('#code-block-pro-header-text')
             .should('exist')
             .should('have.value', '')
             .type('Hello WordPress');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'Hello WordPress')
             .should('not.contain', 'Ruby')

diff --git a/cypress/e2e/height.cy.js b/cypress/e2e/height.cy.js
@@ -3,10 +3,10 @@ beforeEach(() => {
     cy.loginUser();
     cy.visitNewPageEditor();
     cy.addBlock('kevinbatdorf/code-block-pro');
-    cy.getPostContent('.wp-block[class$="code-block-pro"]').should('exist');
+    cy.getPostContent('.wp-block[class*="code-block-pro"]').should('exist');
 
     cy.focusBlock('code-block-pro', 'textarea');
-    cy.get('.wp-block[class$="code-block-pro"] textarea').should('have.focus');
+    cy.get('.wp-block[class*="code-block-pro"] textarea').should('have.focus');
 });
 afterEach(() => {
     cy.saveDraft(); // so we can leave without an alert
@@ -16,12 +16,12 @@ context('Max Height', () => {
     it('Some footers can expand height', () => {
         cy.setHeader('none');
         cy.setFooter('none');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('not.contain', 'Expand');
         cy.enableMaxHeight();
         cy.setHeightDesign('roundCenter');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'Expand');
 
@@ -31,7 +31,7 @@ context('Max Height', () => {
             .should('have.value', '')
             .type('foo-bar-baz-lets-go');
 
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', 'foo-bar-baz-lets-go')
             .should('not.contain', 'Expand');
@@ -50,7 +50,7 @@ context('Max Height', () => {
         cy.go('back');
 
         cy.focusBlock('code-block-pro', 'textarea');
-        cy.get('.wp-block[class$="code-block-pro"] textarea').should(
+        cy.get('.wp-block[class*="code-block-pro"] textarea').should(
             'have.focus',
         );
         cy.openSideBarPanel('Max Height');
@@ -90,7 +90,7 @@ context('Max Height', () => {
 
         cy.go('back');
         cy.focusBlock('code-block-pro', 'textarea');
-        cy.get('.wp-block[class$="code-block-pro"] textarea').should(
+        cy.get('.wp-block[class*="code-block-pro"] textarea').should(
             'have.focus',
         );
 
@@ -109,7 +109,7 @@ context('Max Height', () => {
 
         cy.go('back');
         cy.focusBlock('code-block-pro', 'textarea');
-        cy.get('.wp-block[class$="code-block-pro"] textarea').should(
+        cy.get('.wp-block[class*="code-block-pro"] textarea').should(
             'have.focus',
         );
         cy.openSideBarPanel('Max Height');
@@ -127,12 +127,12 @@ context('Max Height', () => {
             'const foo = "1";\nconst foo = "2";\nconst foo = "3";\nconst foo = "4";\nconst foo = "5";',
         );
         // pre height should be over 80px
-        cy.get('.wp-block[class$="code-block-pro"] > div')
+        cy.get('.wp-block[class*="code-block-pro"] > div')
             .invoke('height')
             .should('be.gt', 80);
         cy.openSideBarPanel('Max Height');
         cy.get('[data-cy-cbp="editor-height"]').should('exist').type('70');
-        cy.get('.wp-block[class$="code-block-pro"] > div')
+        cy.get('.wp-block[class*="code-block-pro"] > div')
             .invoke('height')
             .should('be.lt', 80);
     });

diff --git a/cypress/e2e/language.cy.js b/cypress/e2e/language.cy.js
@@ -3,10 +3,10 @@ beforeEach(() => {
     cy.loginUser();
     cy.visitNewPageEditor();
     cy.addBlock('kevinbatdorf/code-block-pro');
-    cy.getPostContent('.wp-block[class$="code-block-pro"]').should('exist');
+    cy.getPostContent('.wp-block[class*="code-block-pro"]').should('exist');
 
     cy.focusBlock('code-block-pro', 'textarea');
-    cy.get('.wp-block[class$="code-block-pro"] textarea').should('have.focus');
+    cy.get('.wp-block[class*="code-block-pro"] textarea').should('have.focus');
 });
 afterEach(() => {
     cy.saveDraft(); // so we can leave without an alert
@@ -16,15 +16,15 @@ context('Language checks', () => {
     it('Renders properly when switching languages', () => {
         cy.addCode('const foo = "bar";');
         cy.setTheme('nord');
-        cy.getPostContent('.wp-block[class$="code-block-pro"]')
+        cy.getPostContent('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should('contain', '<span style="color: #81A1C1">const</span>');
 
         // TODO - pro only
         // const lorem = 'Ut laboris anim culpa fugiat sit anim dolor cillum';
         // cy.addCode(lorem);
         cy.setLanguage('plaintext');
-        cy.get('.wp-block[class$="code-block-pro"]')
+        cy.get('.wp-block[class*="code-block-pro"]')
             .invoke('html')
             .should(
                 'contain',