testomatio-editor-blocks 0.2.0 → 0.2.2

package/package/editor/blocks/snippet.js

@@ -25,6 +25,7 @@ export const snippetBlock = createReactBlockSpec({
         const snippetTitle = block.props.snippetTitle || "";
         const snippetData = block.props.snippetData || "";
         const snippetSuggestions = useSnippetAutocomplete();
+        const hasSnippets = snippetSuggestions.length > 0;
         const handleSnippetChange = useCallback((nextTitle) => {
             if (nextTitle === snippetTitle) {
                 return;
@@ -60,6 +61,12 @@ export const snippetBlock = createReactBlockSpec({
                 },
             });
         }, [block.id, editor]);
-        return (_jsxs("div", { className: "bn-teststep bn-snippet", "data-block-id": block.id, children: [_jsx(StepField, { label: "Snippet Title", value: snippetTitle, placeholder: "Describe the reusable action", onChange: handleSnippetChange, autoFocus: snippetTitle.length === 0, enableAutocomplete: true, suggestionFilter: (suggestion) => suggestion.isSnippet === true, suggestionsOverride: snippetSuggestions, onSuggestionSelect: handleSnippetSelect, fieldName: "snippet-title", showSuggestionsOnFocus: true, enableImageUpload: false }), _jsx(StepField, { label: "Snippet Data", value: snippetData, placeholder: "Add optional data or assets for the snippet", onChange: handleSnippetDataChange, multiline: true, fieldName: "snippet-data", enableImageUpload: true })] }));
+        const handleFieldFocus = useCallback(() => {
+            editor.setSelection(block.id, block.id);
+        }, [editor, block.id]);
+        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, children: [_jsx(StepField, { label: "Snippet Title", value: snippetTitle, placeholder: "Describe the reusable action", onChange: handleSnippetChange, autoFocus: snippetTitle.length === 0, enableAutocomplete: true, suggestionFilter: (suggestion) => suggestion.isSnippet === true, suggestionsOverride: snippetSuggestions, onSuggestionSelect: handleSnippetSelect, fieldName: "snippet-title", showSuggestionsOnFocus: true, enableImageUpload: false, onFieldFocus: handleFieldFocus }), _jsx(StepField, { label: "Snippet Data", value: snippetData, placeholder: "Add optional data or assets for the snippet", onChange: handleSnippetDataChange, multiline: true, fieldName: "snippet-data", enableImageUpload: true, onFieldFocus: handleFieldFocus })] }));
     },
 });

package/package/editor/blocks/step.js

@@ -72,7 +72,23 @@ export const stepBlock = createReactBlockSpec({
                 },
             });
         }, [editor, block.id, expectedResult]);
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsx(StepField, { label: "Step Title", value: stepTitle, placeholder: "Describe the action to perform", onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, rightAction: !isDataVisible ? (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })) : null, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+        const handleInsertNextStep = useCallback(() => {
+            editor.insertBlocks([
+                {
+                    type: "testStep",
+                    props: {
+                        stepTitle: "",
+                        stepData: "",
+                        expectedResult: "",
+                    },
+                    children: [],
+                },
+            ], block.id, "after");
+        }, [editor, block.id]);
+        const handleFieldFocus = useCallback(() => {
+            editor.setSelection(block.id, block.id);
+        }, [editor, block.id]);
+        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsx(StepField, { label: "Step Title", value: stepTitle, placeholder: "Describe the action to perform", onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, rightAction: !isDataVisible ? (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })) : null, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
                         if (!uploadImage) {
                             return;
                         }
@@ -92,6 +108,6 @@ export const stepBlock = createReactBlockSpec({
                         catch (error) {
                             console.error("Failed to upload image to Step Data", error);
                         }
-                    } }), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true }))] }));
+                    } }), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })), _jsx("button", { type: "button", className: "bn-step-add", onClick: handleInsertNextStep, children: "+ Step" })] }));
     },
 });

package/package/editor/blocks/stepField.d.ts

@@ -21,6 +21,7 @@ type StepFieldProps = {
     rightAction?: ReactNode;
     showFormattingButtons?: boolean;
     showImageButton?: boolean;
+    onFieldFocus?: () => void;
 };
-export declare function StepField({ label, value, placeholder, onChange, autoFocus, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepField({ label, value, placeholder, onChange, autoFocus, multiline, enableAutocomplete, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly, showSuggestionsOnFocus, enableImageUpload, onImageFile, rightAction, showFormattingButtons, showImageButton, onFieldFocus, }: StepFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/package/editor/blocks/stepField.js

@@ -3,7 +3,7 @@ import { useStepAutocomplete } from "../stepAutocomplete";
 import { useStepImageUpload } from "../stepImageUpload";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { escapeHtml, escapeMarkdownText, htmlToMarkdown, markdownToHtml, normalizePlainText, } from "./markdown";
-export function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, }) {
+export function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, suggestionFilter, suggestionsOverride, onSuggestionSelect, readOnly = false, showSuggestionsOnFocus = false, enableImageUpload = false, onImageFile, rightAction, showFormattingButtons = false, showImageButton = false, onFieldFocus, }) {
     const editorRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const autoFocusRef = useRef(false);
@@ -240,6 +240,7 @@ export function StepField({ label, value, placeholder, onChange, autoFocus, mult
                     if (showSuggestionsOnFocus && enableAutocomplete) {
                         setShowAllSuggestions(true);
                     }
+                    onFieldFocus === null || onFieldFocus === void 0 ? void 0 : onFieldFocus();
                     setPlainTextValue((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : "");
                 }, onBlur: () => {
                     setIsFocused(false);

package/package/index.d.ts

@@ -1,4 +1,7 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
+export { stepBlock } from "./editor/blocks/step";
+export { snippetBlock } from "./editor/blocks/snippet";
+export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, type StepImageUploadHandler, } from "./editor/stepImageUpload";

package/package/index.js

@@ -1,4 +1,7 @@
 export { customSchema, } from "./editor/customSchema";
+export { stepBlock } from "./editor/blocks/step";
+export { snippetBlock } from "./editor/blocks/snippet";
+export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";
 export { useStepImageUpload, setImageUploadHandler, } from "./editor/stepImageUpload";

package/package/styles.css

@@ -169,6 +169,33 @@
   color: rgba(15, 118, 110, 0.65);
 }
 
+.bn-snippet__empty {
+  margin: 0;
+  font-size: 0.9rem;
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.bn-step-add {
+  align-self: flex-start;
+  margin-top: 0.25rem;
+  border: none;
+  background: rgba(37, 99, 235, 0.12);
+  color: #1d4ed8;
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 0.35rem 0.65rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.bn-step-add:hover {
+  background: rgba(37, 99, 235, 0.2);
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
+}
+
 .bn-teststep__toggle {
   align-self: flex-start;
   padding: 0.35rem 0.6rem;

package/package.json

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

@@ -28,6 +28,7 @@ export const snippetBlock = createReactBlockSpec(
       const snippetTitle = (block.props.snippetTitle as string) || "";
       const snippetData = (block.props.snippetData as string) || "";
       const snippetSuggestions = useSnippetAutocomplete();
+      const hasSnippets = snippetSuggestions.length > 0;
 
       const handleSnippetChange = useCallback(
         (nextTitle: string) => {
@@ -77,6 +78,18 @@ export const snippetBlock = createReactBlockSpec(
         [block.id, editor],
       );
 
+      const handleFieldFocus = useCallback(() => {
+        editor.setSelection(block.id, block.id);
+      }, [editor, block.id]);
+
+      if (!hasSnippets) {
+        return (
+          <div className="bn-teststep bn-snippet" data-block-id={block.id}>
+            <p className="bn-snippet__empty">No snippets in this project.</p>
+          </div>
+        );
+      }
+
       return (
         <div className="bn-teststep bn-snippet" data-block-id={block.id}>
           <StepField
@@ -92,6 +105,7 @@ export const snippetBlock = createReactBlockSpec(
             fieldName="snippet-title"
             showSuggestionsOnFocus
             enableImageUpload={false}
+            onFieldFocus={handleFieldFocus}
           />
           <StepField
             label="Snippet Data"
@@ -101,6 +115,7 @@ export const snippetBlock = createReactBlockSpec(
             multiline
             fieldName="snippet-data"
             enableImageUpload
+            onFieldFocus={handleFieldFocus}
           />
         </div>
       );

package/src/editor/blocks/step.tsx

@@ -95,6 +95,28 @@ export const stepBlock = createReactBlockSpec(
         [editor, block.id, expectedResult],
       );
 
+      const handleInsertNextStep = useCallback(() => {
+        editor.insertBlocks(
+          [
+            {
+              type: "testStep",
+              props: {
+                stepTitle: "",
+                stepData: "",
+                expectedResult: "",
+              },
+              children: [],
+            },
+          ],
+          block.id,
+          "after",
+        );
+      }, [editor, block.id]);
+
+      const handleFieldFocus = useCallback(() => {
+        editor.setSelection(block.id, block.id);
+      }, [editor, block.id]);
+
       return (
         <div className="bn-teststep" data-block-id={block.id}>
           <StepField
@@ -106,6 +128,7 @@ export const stepBlock = createReactBlockSpec(
             enableAutocomplete
             fieldName="title"
             suggestionFilter={(suggestion) => (suggestion as StepSuggestion).isSnippet !== true}
+            onFieldFocus={handleFieldFocus}
             rightAction={
               !isDataVisible ? (
                 <button
@@ -154,6 +177,7 @@ export const stepBlock = createReactBlockSpec(
               enableImageUpload
               showFormattingButtons
               showImageButton
+              onFieldFocus={handleFieldFocus}
             />
           )}
           {showExpectedField && (
@@ -166,8 +190,12 @@ export const stepBlock = createReactBlockSpec(
               enableImageUpload
               showFormattingButtons
               showImageButton
+              onFieldFocus={handleFieldFocus}
             />
           )}
+          <button type="button" className="bn-step-add" onClick={handleInsertNextStep}>
+            + Step
+          </button>
         </div>
       );
     },

package/src/editor/blocks/stepField.tsx

@@ -32,6 +32,7 @@ type StepFieldProps = {
   rightAction?: ReactNode;
   showFormattingButtons?: boolean;
   showImageButton?: boolean;
+  onFieldFocus?: () => void;
 };
 
 export function StepField({
@@ -53,6 +54,7 @@ export function StepField({
   rightAction,
   showFormattingButtons = false,
   showImageButton = false,
+  onFieldFocus,
 }: StepFieldProps) {
   const editorRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -376,6 +378,7 @@ export function StepField({
           if (showSuggestionsOnFocus && enableAutocomplete) {
             setShowAllSuggestions(true);
           }
+          onFieldFocus?.();
           setPlainTextValue(editorRef.current?.innerText ?? "");
         }}
         onBlur={() => {

package/src/editor/styles.css

@@ -169,6 +169,33 @@
   color: rgba(15, 118, 110, 0.65);
 }
 
+.bn-snippet__empty {
+  margin: 0;
+  font-size: 0.9rem;
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.bn-step-add {
+  align-self: flex-start;
+  margin-top: 0.25rem;
+  border: none;
+  background: rgba(37, 99, 235, 0.12);
+  color: #1d4ed8;
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 0.35rem 0.65rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.bn-step-add:hover {
+  background: rgba(37, 99, 235, 0.2);
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
+}
+
 .bn-teststep__toggle {
   align-self: flex-start;
   padding: 0.35rem 0.6rem;

package/src/index.ts

@@ -4,6 +4,9 @@ export {
   type CustomBlock,
   type CustomEditor,
 } from "./editor/customSchema";
+export { stepBlock } from "./editor/blocks/step";
+export { snippetBlock } from "./editor/blocks/snippet";
+export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 
 export {
   blocksToMarkdown,