testomatio-editor-blocks 0.4.14 → 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/editor/customMarkdownConverter.js

@@ -1028,7 +1028,7 @@ function parseParagraph(lines, index) {
 }
 function parseSnippetWrapper(lines, index) {
     const trimmed = lines[index].trim();
-    const startMatch = trimmed.match(/^<!--\s*begin snippet\s*#?([^\s>]+)\s*-->/i);
+    const startMatch = trimmed.match(/^<!--\s*begin snippet\s*#?\s*([^\s>]+)\s*-->/i);
     if (!startMatch) {
         return null;
     }
@@ -1037,7 +1037,7 @@ function parseSnippetWrapper(lines, index) {
     let next = index + 1;
     while (next < lines.length) {
         const maybeEnd = lines[next].trim();
-        const endMatch = maybeEnd.match(/^<!--\s*end snippet\s*#?([^\s>]+)?\s*-->/i);
+        const endMatch = maybeEnd.match(/^<!--\s*end snippet\s*#?\s*([^\s>]+)?\s*-->/i);
         if (endMatch) {
             const endId = endMatch[1];
             if (!endId || endId === snippetId) {
@@ -1048,7 +1048,7 @@ function parseSnippetWrapper(lines, index) {
             next += 1;
             continue;
         }
-        const otherStart = maybeEnd.match(/^<!--\s*begin snippet\s*#?([^\s>]+)\s*-->/i);
+        const otherStart = maybeEnd.match(/^<!--\s*begin snippet\s*#?\s*([^\s>]+)\s*-->/i);
         if (otherStart) {
             // Skip nested snippet wrappers from the body entirely.
             next += 1;

package/package/styles.css

@@ -498,11 +498,11 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-teststep__view-toggle--horizontal[data-tooltip]::after {
-  right: auto;
-  top: auto;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
 }
 
 .bn-teststep__horizontal-fields {
@@ -656,9 +656,9 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-snippet-dropdown__search-input {
-  border: none;
-  outline: none;
-  background: transparent;
+  border: none !important;
+  outline: none !important;
+  background: transparent !important;
   font-family: inherit;
   font-size: 14px !important;
   font-weight: 500;
@@ -667,7 +667,11 @@ html.dark .bn-step-image-preview__content {
   width: 100%;
   height: auto;
   display: inline !important;
-  padding: 0;
+  padding: 0 !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
 }
 
 .bn-snippet-dropdown__search-input::placeholder {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.14",
+  "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>
       );

package/src/editor/customMarkdownConverter.test.ts

@@ -385,6 +385,28 @@ describe("markdownToBlocks", () => {
     ]);
   });
 
+  it("parses snippet markdown with space between # and ID", () => {
+    const markdown = [
+      "<!-- begin snippet # 22289 -->",
+      "* Fill `<Email>` with correct registered email",
+      "* Verify that the update to the target is successful",
+      "<!-- end snippet # 22289 -->",
+    ].join("\n");
+
+    expect(markdownToBlocks(markdown)).toEqual([
+      {
+        type: "snippet",
+        props: {
+          snippetId: "22289",
+          snippetTitle: "",
+          snippetData: "* Fill `<Email>` with correct registered email\n* Verify that the update to the target is successful",
+          snippetExpectedResult: "",
+        },
+        children: [],
+      },
+    ]);
+  });
+
   it("parses snippet bodies and ignores nested snippet markers", () => {
     const markdown = [
       "<!-- begin snippet #888 -->",

package/src/editor/customMarkdownConverter.ts

@@ -1238,7 +1238,7 @@ function parseSnippetWrapper(
   index: number,
 ): { block: CustomPartialBlock; nextIndex: number } | null {
   const trimmed = lines[index].trim();
-  const startMatch = trimmed.match(/^<!--\s*begin snippet\s*#?([^\s>]+)\s*-->/i);
+  const startMatch = trimmed.match(/^<!--\s*begin snippet\s*#?\s*([^\s>]+)\s*-->/i);
   if (!startMatch) {
     return null;
   }
@@ -1249,7 +1249,7 @@ function parseSnippetWrapper(
 
   while (next < lines.length) {
     const maybeEnd = lines[next].trim();
-    const endMatch = maybeEnd.match(/^<!--\s*end snippet\s*#?([^\s>]+)?\s*-->/i);
+    const endMatch = maybeEnd.match(/^<!--\s*end snippet\s*#?\s*([^\s>]+)?\s*-->/i);
     if (endMatch) {
       const endId = endMatch[1];
       if (!endId || endId === snippetId) {
@@ -1260,7 +1260,7 @@ function parseSnippetWrapper(
       next += 1;
       continue;
     }
-    const otherStart = maybeEnd.match(/^<!--\s*begin snippet\s*#?([^\s>]+)\s*-->/i);
+    const otherStart = maybeEnd.match(/^<!--\s*begin snippet\s*#?\s*([^\s>]+)\s*-->/i);
     if (otherStart) {
       // Skip nested snippet wrappers from the body entirely.
       next += 1;

package/src/editor/styles.css

@@ -498,11 +498,11 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-teststep__view-toggle--horizontal[data-tooltip]::after {
-  right: auto;
-  top: auto;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
 }
 
 .bn-teststep__horizontal-fields {
@@ -656,9 +656,9 @@ html.dark .bn-step-image-preview__content {
 }
 
 .bn-snippet-dropdown__search-input {
-  border: none;
-  outline: none;
-  background: transparent;
+  border: none !important;
+  outline: none !important;
+  background: transparent !important;
   font-family: inherit;
   font-size: 14px !important;
   font-weight: 500;
@@ -667,7 +667,11 @@ html.dark .bn-step-image-preview__content {
   width: 100%;
   height: auto;
   display: inline !important;
-  padding: 0;
+  padding: 0 !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
 }
 
 .bn-snippet-dropdown__search-input::placeholder {