Merge pull request #405 from storyblok/SDK-81-v-editable-refactor

fix(SDK-81): Editable directive - return HTML attributes only when _editable is present ("draft" version)
storyblok · Aug 30, 2023 · b10609e · b10609e
2 parents 3978746 + dcf328a
commit b10609e
Show file tree

Hide file tree

Showing 8 changed files with 889 additions and 832 deletions.
diff --git a/lib/cypress/components/index.cy.js b/lib/cypress/components/index.cy.js
@@ -49,6 +49,18 @@ describe("@storyblok/vue", () => {
     it("Adds 'storyblok__outline' class to the element", () => {
       cy.get("[data-test=editable]").should("have.class", "storyblok__outline");
     });
+
+    it("Don't get data-blok-c and data-blok-uid attributes in production mode", () => {
+      cy.get("[data-test=editable-prod]").should(
+        "not.have.attr",
+        "data-blok-c"
+      );
+
+      cy.get("[data-test=editable-prod]").should(
+        "not.have.attr",
+        "data-blok-uid"
+      );
+    });
   });
 
   describe("Api", () => {

diff --git a/lib/cypress/testing-components/Essential.vue b/lib/cypress/testing-components/Essential.vue
@@ -8,7 +8,13 @@
       <i>data-blok-uid</i>
       attrs.
     </div>
-
+    <div data-test="editable-prod" v-editable="blokProd.content">
+      Open DevTools and inspect this &lt;div&gt;. You shouldn't see any
+      <i>data-blok-c</i>
+      or
+      <i>data-blok-uid</i>
+      attrs.
+    </div>
     <h3>
       <code>storyblokApi.get:</code>
       <span data-test="api">{{ apiExists }}</span>
@@ -26,6 +32,10 @@ const blok = {
   },
 };
 
+const blokProd = {
+  content: {},
+};
+
 const storyblokApi = useStoryblokApi();
 const apiExists = !!(storyblokApi && typeof storyblokApi.get === "function");
 

diff --git a/lib/index.ts b/lib/index.ts
@@ -19,9 +19,11 @@ const vEditableDirective: Directive<HTMLElement> = {
   beforeMount(el, binding) {
     if (binding.value) {
       const options = storyblokEditable(binding.value);
-      el.setAttribute("data-blok-c", options["data-blok-c"]);
-      el.setAttribute("data-blok-uid", options["data-blok-uid"]);
-      el.classList.add("storyblok__outline");
+      if (Object.keys(options).length > 0) {
+        el.setAttribute("data-blok-c", options["data-blok-c"]);
+        el.setAttribute("data-blok-uid", options["data-blok-uid"]);
+        el.classList.add("storyblok__outline");
+      }
     }
   },
 };

diff --git a/lib/package.json b/lib/package.json
@@ -40,7 +40,7 @@
     "cypress": "^13.0.0",
     "eslint-plugin-cypress": "^2.14.0",
     "eslint-plugin-jest": "^27.2.3",
-    "jest": "^29.4.3",
+    "jest": "^29.6.4",
     "typescript": "^4.9.5",
     "vite": "^4.4.9",
     "vue": "^3.3.4",