From dbeb94d62c104b9b74f89c912fe12f002f861e23 Mon Sep 17 00:00:00 2001
From: Philippe Vollenweider <pvollenweider@jahia.com>
Date: Wed, 27 May 2026 13:56:54 +0200
Subject: [PATCH] fix(view): improve edit-mode empty state and accessibility

- Escape node name via <c:out> to prevent XSS in edit mode
- Show notice when html is empty, even if css/js are populated,
  so CSS/JS-only blocks remain selectable in the editor
- Use cached ${html} var instead of re-reading JCR property
- Collapse nested c:if into single compound condition
- Short-circuit removeHtmlTags when html is already empty
- Add styled placeholder visible only in edit mode (WCAG AA contrast)
- Clarify css field tooltip (EN + FR)
---
 .claude/settings.local.json                   |  7 +++++
 .../html/customCodeBlock.jsp                  | 30 +++++++++++++++----
 .../resources/CustomCodeBlock.properties      |  2 +-
 .../resources/CustomCodeBlock_fr.properties   |  2 +-
 4 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 .claude/settings.local.json

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..f6df9ac
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(rtk gh *)"
+    ]
+  }
+}
diff --git a/src/main/resources/jnt_customCodeBlock/html/customCodeBlock.jsp b/src/main/resources/jnt_customCodeBlock/html/customCodeBlock.jsp
index a1b8225..4520dd4 100644
--- a/src/main/resources/jnt_customCodeBlock/html/customCodeBlock.jsp
+++ b/src/main/resources/jnt_customCodeBlock/html/customCodeBlock.jsp
@@ -14,7 +14,7 @@ ${css}
 </style>
 </template:addResources>
 </c:if>
-${currentNode.properties.html.string}
+${html}
 <c:if test="${! empty js}">
 <template:addResources targetTag="body">
 <script>
@@ -22,8 +22,28 @@ ${js}
 </script>
 </template:addResources>
 </c:if>
-<c:if test="${renderContext.editMode}">
-    <c:if test="${empty functions:removeHtmlTags(html)}">
-        ${currentNode.name}
-    </c:if>
+<c:if test="${renderContext.editMode && (empty html || empty functions:removeHtmlTags(html))}">
+<template:addResources>
+<style>
+.jnt-custom-code-block__empty-notice {
+    border: 2px dashed #f90;
+    padding: 1rem;
+    color: #595959;
+    font-style: italic;
+    background: #fff8e1;
+}
+</style>
+</template:addResources>
+    <c:choose>
+        <c:when test="${empty css && empty js}">
+            <p class="jnt-custom-code-block__empty-notice">
+                [Empty custom code block: <c:out value="${currentNode.name}"/>]
+            </p>
+        </c:when>
+        <c:otherwise>
+            <p class="jnt-custom-code-block__empty-notice">
+                [Custom code block — CSS/JS only: <c:out value="${currentNode.name}"/>]
+            </p>
+        </c:otherwise>
+    </c:choose>
 </c:if>
diff --git a/src/main/resources/resources/CustomCodeBlock.properties b/src/main/resources/resources/CustomCodeBlock.properties
index a96a20b..c333a1f 100644
--- a/src/main/resources/resources/CustomCodeBlock.properties
+++ b/src/main/resources/resources/CustomCodeBlock.properties
@@ -7,7 +7,7 @@ jnt_customCodeBlock=Custom Code Block
 jnt_customCodeBlock.html=HTML
 jnt_customCodeBlock.html.ui.tooltip=This content will be directly injected on the page (HTML, script tags, embeds...)
 jnt_customCodeBlock.css=CSS
-jnt_customCodeBlock.css.ui.tooltip=Will be added in the HEAD via a style tag
+jnt_customCodeBlock.css.ui.tooltip=CSS injected globally in HEAD. Scope all rules to a specific class — unscoped selectors affect the entire page.
 jnt_customCodeBlock.js=Inline JavaScript
 jnt_customCodeBlock.js.ui.tooltip=Write JS code only (no script tags) \u2014 it will automatically be wrapped in script tags and added before the end of body
 
diff --git a/src/main/resources/resources/CustomCodeBlock_fr.properties b/src/main/resources/resources/CustomCodeBlock_fr.properties
index aa4a3e7..153d742 100644
--- a/src/main/resources/resources/CustomCodeBlock_fr.properties
+++ b/src/main/resources/resources/CustomCodeBlock_fr.properties
@@ -7,7 +7,7 @@ jnt_customCodeBlock=Bloc de code personnalis\u00E9
 jnt_customCodeBlock.html=HTML
 jnt_customCodeBlock.html.ui.tooltip=Ce contenu sera inject\u00E9 directement dans la page (HTML, balises script, embeds...)
 jnt_customCodeBlock.css=CSS
-jnt_customCodeBlock.css.ui.tooltip=Sera ajout\u00E9 dans le HEAD via une balise style
+jnt_customCodeBlock.css.ui.tooltip=CSS inject\u00E9 globalement dans le HEAD. Restreignez toutes les r\u00E8gles \u00E0 une classe sp\u00E9cifique \u2014 les s\u00E9lecteurs non restreints s\u2019appliquent \u00E0 toute la page.
 jnt_customCodeBlock.js=JavaScript inline
 jnt_customCodeBlock.js.ui.tooltip=\u00C9crivez uniquement du code JS (sans balises script) \u2014 il sera automatiquement encadr\u00E9 de balises script et ajout\u00E9 avant la fin du body