Add storyblok v2 bridge support

Media-Lounge · Aug 5, 2022 · d338c7d · d338c7d
1 parent a5619ea
commit d338c7d
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 40 deletions.
diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js
@@ -1,6 +1,6 @@
 var config = {
     paths: {
-        storyblok: 'https://app.storyblok.com/f/storyblok-latest'
+        storyblok: 'https://app.storyblok.com/f/storyblok-v2-latest'
     },
     shim: {
         storyblok: {

diff --git a/view/frontend/templates/hyva/script.phtml b/view/frontend/templates/hyva/script.phtml
@@ -1,7 +1,7 @@
 <?php /** @var MediaLounge\Storyblok\Block\Script $block */ ?>
 
 <script
-    src="https://app.storyblok.com/f/storyblok-latest.js?t=<?= $block->escapeHtmlAttr($block->getApiKey()) ?>"
+    src="https://app.storyblok.com/f/storyblok-v2-latest.js"
     defer
 ></script>
 <script

diff --git a/view/frontend/templates/script.phtml b/view/frontend/templates/script.phtml
@@ -3,9 +3,7 @@
 <script type="text/x-magento-init">
 {
     "*": {
-        "MediaLounge_Storyblok/js/config": {
-            "apiKey": "<?= $block->escapeJs($block->getApiKey()) ?>"
-        }
+        "MediaLounge_Storyblok/js/config": {}
     }
 }
 </script>
diff --git a/view/frontend/templates/story/debug.phtml b/view/frontend/templates/story/debug.phtml
@@ -2,5 +2,4 @@
 
 <div>
     <?= $block->escapeHtml(__('Missing template <strong>%1</strong>', $block->getOriginalTemplate()), ['strong']) ?>
-    <pre><?= $block->escapeHtml(var_export($block->getData())) ?></pre>
 </div>
diff --git a/view/frontend/web/js/config.js b/view/frontend/web/js/config.js
@@ -1,14 +1,12 @@
 define(['jquery', 'storyblok'], ($, storyblok) => {
     'use strict';
 
-    return ({ apiKey }) => {
+    return () => {
         let request = { abort: () => {} };
-
-        function enterEditMode() {
-            if (storyblok.inEditor) {
-                storyblok.enterEditmode();
-            }
-        }
+        const { StoryblokBridge } = window;
+        const storyblokInstance = new StoryblokBridge({
+            preventClicks: true
+        });
 
         function isStoryblokComment(node) {
             if (node.textContent.includes('#storyblok#')) {
@@ -38,17 +36,9 @@ define(['jquery', 'storyblok'], ($, storyblok) => {
             return comments;
         }
 
-        storyblok.init({
-            accessToken: apiKey
-        });
-
-        storyblok.on(['published', 'change'], () => window.location.reload());
-
-        storyblok.on(['input'], ({ story }) => {
-            const storyContentWithComments = storyblok.addComments(story.content, story.id);
-
-            story.content = storyContentWithComments;
+        storyblokInstance.on(['published', 'change'], () => window.location.reload());
 
+        storyblokInstance.on(['input'], ({ story }) => {
             request.abort();
 
             request = $.post({
@@ -70,10 +60,8 @@ define(['jquery', 'storyblok'], ($, storyblok) => {
 
                 $('body').trigger('contentUpdated');
 
-                enterEditMode();
+                storyblokInstance.enterEditmode();
             });
         });
-
-        storyblok.pingEditor(() => enterEditMode());
     };
 });
diff --git a/view/frontend/web/js/hyva/config.js b/view/frontend/web/js/hyva/config.js
@@ -1,11 +1,9 @@
 (function () {
     let controller = { abort: () => {} };
-
-    function enterEditMode() {
-        if (storyblok.inEditor) {
-            storyblok.enterEditmode();
-        }
-    }
+    const { StoryblokBridge } = window;
+    const storyblokInstance = new StoryblokBridge({
+        preventClicks: true
+    });
 
     function isStoryblokComment(node) {
         if (node.textContent.includes('#storyblok#')) {
@@ -35,16 +33,13 @@
         return comments;
     }
 
-    storyblok.on(['published', 'change'], () => window.location.reload());
+    storyblokInstance.on(['published', 'change'], () => window.location.reload());
 
-    storyblok.on(['input'], async ({ story }) => {
+    storyblokInstance.on(['input'], async ({ story }) => {
         controller.abort();
 
         controller = new AbortController();
         const { signal } = controller;
-        const storyContentWithComments = storyblok.addComments(story.content, story.id);
-
-        story.content = storyContentWithComments;
 
         try {
             const request = await fetch('/storyblok/index/ajax', {
@@ -65,11 +60,9 @@
             comments[blockId].comment.remove();
             comments[blockId].element.outerHTML = response[blockId];
 
-            enterEditMode();
+            storyblokInstance.enterEditmode();
         } catch (err) {
             return;
         }
     });
-
-    storyblok.pingEditor(() => enterEditMode());
 })();