testomatio-editor-blocks 0.4.15 → 0.4.16

package/package/editor/blocks/snippet.js

@@ -68,6 +68,14 @@ export const snippetBlock = createReactBlockSpec({
         const snippetSuggestions = useSnippetAutocomplete();
         const hasSnippets = snippetSuggestions.length > 0;
         const isSnippetSelected = snippetId.length > 0;
+        const resolvedTitle = useMemo(() => {
+            var _a, _b;
+            if (snippetTitle)
+                return snippetTitle;
+            if (!snippetId || snippetSuggestions.length === 0)
+                return "";
+            return (_b = (_a = snippetSuggestions.find((s) => s.id === snippetId)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : "";
+        }, [snippetTitle, snippetId, snippetSuggestions]);
         const handleSnippetSelect = useCallback((suggestion) => {
             var _a;
             const rawBody = (_a = suggestion.body) !== null && _a !== void 0 ? _a : "";
@@ -102,6 +110,11 @@ export const snippetBlock = createReactBlockSpec({
         if (!hasSnippets) {
             return (_jsx("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: _jsx("p", { className: "bn-snippet__empty", children: "No snippets in this project." }) }));
         }
-        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, onFocus: handleFieldFocus, children: [_jsxs("div", { className: "bn-snippet__header", children: [_jsx("span", { className: "bn-snippet__label", children: "Snippet" }), _jsx(SnippetDropdown, { value: snippetTitle, placeholder: "Select Snippet", suggestions: snippetSuggestions, selectedId: snippetId, onSelect: handleSnippetSelect })] }), isSnippetSelected && snippetData && (_jsx("div", { className: "bn-snippet__content", dangerouslySetInnerHTML: { __html: snippetData } }))] }));
+        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, onFocus: handleFieldFocus, children: [_jsxs("div", { className: "bn-snippet__header", children: [_jsx("span", { className: "bn-snippet__label", children: "Snippet" }), _jsx(SnippetDropdown, { value: resolvedTitle, placeholder: "Select Snippet", suggestions: snippetSuggestions, selectedId: snippetId, onSelect: handleSnippetSelect })] }), isSnippetSelected && snippetData && (_jsx("div", { className: "bn-snippet__content", dangerouslySetInnerHTML: {
+                        __html: snippetData
+                            .replace(/&/g, "&")
+                            .replace(/</g, "&lt;")
+                            .replace(/>/g, "&gt;"),
+                    } }))] }));
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",

package/src/editor/blocks/snippet.tsx

@@ -141,6 +141,12 @@ export const snippetBlock = createReactBlockSpec(
       const hasSnippets = snippetSuggestions.length > 0;
       const isSnippetSelected = snippetId.length > 0;
 
+      const resolvedTitle = useMemo(() => {
+        if (snippetTitle) return snippetTitle;
+        if (!snippetId || snippetSuggestions.length === 0) return "";
+        return snippetSuggestions.find((s) => s.id === snippetId)?.title ?? "";
+      }, [snippetTitle, snippetId, snippetSuggestions]);
+
       const handleSnippetSelect = useCallback(
         (suggestion: SnippetSuggestion) => {
           const rawBody = suggestion.body ?? "";
@@ -187,7 +193,7 @@ export const snippetBlock = createReactBlockSpec(
           <div className="bn-snippet__header">
             <span className="bn-snippet__label">Snippet</span>
             <SnippetDropdown
-              value={snippetTitle}
+              value={resolvedTitle}
               placeholder="Select Snippet"
               suggestions={snippetSuggestions}
               selectedId={snippetId}
@@ -195,7 +201,15 @@ export const snippetBlock = createReactBlockSpec(
             />
           </div>
           {isSnippetSelected && snippetData && (
-            <div className="bn-snippet__content" dangerouslySetInnerHTML={{ __html: snippetData }} />
+            <div
+              className="bn-snippet__content"
+              dangerouslySetInnerHTML={{
+                __html: snippetData
+                  .replace(/&/g, "&amp;")
+                  .replace(/</g, "&lt;")
+                  .replace(/>/g, "&gt;"),
+              }}
+            />
           )}
         </div>
       );