testomatio-editor-blocks 0.1.0 → 0.1.2

package/src/editor/customMarkdownConverter.ts

@@ -351,7 +351,7 @@ function serializeBlock(
       const normalizedExpected = stripExpectedPrefix(expectedResult).trim();
       if (normalizedExpected.length > 0) {
         const expectedLines = normalizedExpected.split(/\r?\n/);
-        const label = "*Expected Result*";
+        const label = "*Expected*";
         expectedLines.forEach((expectedLine: string, index: number) => {
           const trimmedLine = expectedLine.trim();
           if (trimmedLine.length === 0) {
@@ -750,7 +750,17 @@ function parseTestStep(lines: string[], index: number): { block: CustomPartialBl
     return null;
   }
 
-  const stepTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+  const rawTitle = unescapeMarkdown(trimmed.slice(2)).trim();
+  const titleImages: string[] = [];
+  const titleWithPlaceholders = rawTitle
+    .replace(/!\[[^\]]*\]\(([^)]+)\)/g, (match) => {
+      titleImages.push(match);
+      return "!";
+    })
+    .replace(/\s{2,}/g, " ")
+    .trim();
+
+  const isLikelyStep = /^step\b/i.test(titleWithPlaceholders) || titleImages.length > 0;
   const stepDataLines: string[] = [];
   let expectedResult = "";
   let next = index + 1;
@@ -831,23 +841,26 @@ function parseTestStep(lines: string[], index: number): { block: CustomPartialBl
     .join("\n")
     .trim();
 
-  // Only parse as test step if there's expected result or data content
-  if (expectedResult || stepData) {
-    return {
-      block: {
-        type: "testStep",
-        props: {
-          stepTitle,
-          stepData,
-          expectedResult,
-        },
-        children: [],
-      },
-      nextIndex: next,
-    };
+  if (!isLikelyStep && !expectedResult && stepDataLines.length === 0) {
+    return null;
   }
 
-  return null;
+  const stepDataWithImages = [stepData, titleImages.join("\n")]
+    .filter(Boolean)
+    .join(stepData ? "\n" : "");
+
+  return {
+    block: {
+      type: "testStep",
+      props: {
+        stepTitle: titleWithPlaceholders,
+        stepData: stepDataWithImages,
+        expectedResult,
+      },
+      children: [],
+    },
+    nextIndex: next,
+  };
 }
 
 function parseTestCase(lines: string[], index: number): { block: CustomPartialBlock; nextIndex: number } | null {

package/src/editor/customSchema.test.ts

@@ -36,4 +36,12 @@ describe("customSchema markdown helpers", () => {
     expect(html).toContain('<img src="/login.png" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
     expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
   });
+
+  it("keeps inline images when mixed inside a single line of markdown text", () => {
+    const markdown = "* asdsadsad aaaaa  asd ![](https://placehold.co/600x400?text=Uploaded+1763329962213)";
+    const html = __markdownTestUtils.markdownToHtml(markdown);
+
+    expect(html).toContain('<img src="https://placehold.co/600x400?text=Uploaded+1763329962213" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />');
+    expect(__markdownTestUtils.htmlToMarkdown(html)).toBe(markdown);
+  });
 });

package/src/editor/customSchema.tsx

@@ -1,8 +1,10 @@
 import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ChangeEvent, ClipboardEvent, CSSProperties } from "react";
+import { useStepAutocomplete, type StepSuggestion } from "./stepAutocomplete";
+import { useStepImageUpload } from "./stepImageUpload";
 
 type InlineSegment = {
   text: string;
@@ -200,6 +202,10 @@ function escapeMarkdownText(text: string): string {
   return text.replace(MARKDOWN_ESCAPE_REGEX, "\\$1");
 }
 
+function normalizePlainText(text: string): string {
+  return text.replace(/\s+/g, " ").trim().toLowerCase();
+}
+
 type StepFieldProps = {
   label: string;
   value: string;
@@ -207,12 +213,64 @@ type StepFieldProps = {
   onChange: (nextValue: string) => void;
   autoFocus?: boolean;
   multiline?: boolean;
+  enableAutocomplete?: boolean;
+  fieldName?: string;
+  enableImageUpload?: boolean;
+  onImageFile?: (file: File) => Promise<void> | void;
 };
 
-function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false }: StepFieldProps) {
+function StepField({
+  label,
+  value,
+  placeholder,
+  onChange,
+  autoFocus,
+  multiline = false,
+  enableAutocomplete = false,
+  fieldName,
+  enableImageUpload = false,
+  onImageFile,
+}: StepFieldProps) {
   const editorRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
   const autoFocusRef = useRef(false);
+  const [plainTextValue, setPlainTextValue] = useState("");
+  const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(0);
+  const [showAllSuggestions, setShowAllSuggestions] = useState(false);
+  const suggestions = useStepAutocomplete();
+  const uploadImage = useStepImageUpload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const normalizedQuery = normalizePlainText(plainTextValue);
+  const filteredSuggestions = useMemo(() => {
+    if (!enableAutocomplete) {
+      return [];
+    }
+
+    const pool = showAllSuggestions || !normalizedQuery
+      ? suggestions
+      : suggestions.filter((item) => normalizePlainText(item.title).startsWith(normalizedQuery));
+
+    return pool.slice(0, 8);
+  }, [enableAutocomplete, normalizedQuery, showAllSuggestions, suggestions]);
+  const hasExactMatch = filteredSuggestions.some(
+    (item) => normalizePlainText(item.title) === normalizedQuery,
+  );
+  const shouldShowAutocomplete =
+    enableAutocomplete &&
+    isFocused &&
+    filteredSuggestions.length > 0 &&
+    (!hasExactMatch || showAllSuggestions) &&
+    (showAllSuggestions || normalizedQuery.length >= 1);
+  useEffect(() => {
+    setActiveSuggestionIndex(0);
+  }, [normalizedQuery, filteredSuggestions.length, showAllSuggestions]);
+
+  useEffect(() => {
+    if (normalizedQuery.length > 0) {
+      setShowAllSuggestions(false);
+    }
+  }, [normalizedQuery]);
 
   useEffect(() => {
     const element = editorRef.current;
@@ -222,8 +280,10 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
 
     if (value.trim().length === 0) {
       element.innerHTML = "";
+      setPlainTextValue("");
     } else {
       element.innerHTML = markdownToHtml(value);
+      setPlainTextValue(element.textContent ?? "");
     }
   }, [value, isFocused]);
 
@@ -237,17 +297,36 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
     if (markdown !== value) {
       onChange(markdown);
     }
+    setPlainTextValue(element.innerText ?? "");
     if (!markdown && element.innerHTML !== "") {
       element.innerHTML = "";
     }
   }, [onChange, value]);
 
   useEffect(() => {
-    if (autoFocus && !autoFocusRef.current && editorRef.current) {
-      editorRef.current.focus();
+    if (!autoFocus || autoFocusRef.current || !editorRef.current) {
+      return;
+    }
+
+    autoFocusRef.current = true;
+    const element = editorRef.current;
+    const focusElement = () => {
+      element.focus();
       setIsFocused(true);
-      autoFocusRef.current = true;
+      const selection = typeof window !== "undefined" ? window.getSelection?.() : null;
+      if (selection) {
+        selection.selectAllChildren(element);
+        selection.collapseToEnd();
+      }
+    };
+
+    if (typeof requestAnimationFrame === "function") {
+      const frame = requestAnimationFrame(focusElement);
+      return () => cancelAnimationFrame(frame);
     }
+
+    const timeout = setTimeout(focusElement, 0);
+    return () => clearTimeout(timeout);
   }, [autoFocus]);
 
   const applyFormat = useCallback(
@@ -258,20 +337,168 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
     [syncValue],
   );
 
+  const ensureCaretInEditor = useCallback(() => {
+    const element = editorRef.current;
+    if (!element) {
+      return false;
+    }
+
+    const selection = window.getSelection?.();
+    if (!selection) {
+      return false;
+    }
+
+    if (selection.rangeCount === 0 || !element.contains(selection.anchorNode)) {
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    element.focus();
+    return true;
+  }, []);
+
+  const insertImageAtCursor = useCallback(
+    (url: string) => {
+      const element = editorRef.current;
+      if (!element) {
+        return;
+      }
+
+      const escapedUrl = escapeHtml(url);
+      const imgHtml = `<img src="${escapedUrl}" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />`;
+      element.focus();
+      ensureCaretInEditor();
+      document.execCommand("insertHTML", false, imgHtml);
+      syncValue();
+    },
+    [ensureCaretInEditor, syncValue],
+  );
+
+  const handleImagePick = useCallback(async () => {
+    if (!enableImageUpload || !uploadImage) {
+      return;
+    }
+
+    const fileInput = fileInputRef.current;
+    if (fileInput) {
+      fileInput.click();
+    }
+  }, [enableImageUpload, uploadImage]);
+
+  const handleFileChange = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file || !uploadImage) {
+        return;
+      }
+
+      try {
+        setIsUploading(true);
+        const response = await uploadImage(file);
+        if (response?.url) {
+          insertImageAtCursor(response.url);
+        }
+      } catch (error) {
+        console.error("Failed to upload image", error);
+      } finally {
+        setIsUploading(false);
+        event.target.value = "";
+      }
+    },
+    [insertImageAtCursor, uploadImage],
+  );
+
   const handlePaste = useCallback(
-    (event: ClipboardEvent<HTMLDivElement>) => {
+    async (event: ClipboardEvent<HTMLDivElement>) => {
+      if ((enableImageUpload && uploadImage) || onImageFile) {
+        const items = Array.from(event.clipboardData.items ?? []);
+        const imageItem = items.find((item) => item.kind === "file" && item.type.startsWith("image/"));
+        const file = imageItem?.getAsFile();
+        if (file) {
+          event.preventDefault();
+          if (onImageFile) {
+            await onImageFile(file);
+            return;
+          }
+          if (enableImageUpload && uploadImage) {
+            try {
+              setIsUploading(true);
+              const result = await uploadImage(file);
+              if (result?.url) {
+                ensureCaretInEditor();
+                document.execCommand(
+                  "insertHTML",
+                  false,
+                  `<img src="${escapeHtml(result.url)}" alt="" class="bn-inline-image" contenteditable="false" draggable="false" />`,
+                );
+                syncValue();
+              }
+            } catch (error) {
+              console.error("Failed to upload image from paste", error);
+            } finally {
+              setIsUploading(false);
+            }
+            return;
+          }
+        }
+      }
+
       event.preventDefault();
       const text = event.clipboardData?.getData("text/plain") ?? "";
-      document.execCommand("insertText", false, text);
+      const html = markdownToHtml(text);
+      ensureCaretInEditor();
+      document.execCommand("insertHTML", false, html);
       syncValue();
     },
-    [syncValue],
+    [enableImageUpload, ensureCaretInEditor, syncValue, uploadImage],
+  );
+
+  const applySuggestion = useCallback(
+    (suggestion: StepSuggestion) => {
+      const escaped = escapeMarkdownText(suggestion.title);
+      onChange(escaped);
+      setPlainTextValue(suggestion.title);
+      setActiveSuggestionIndex(0);
+      setShowAllSuggestions(false);
+      if (editorRef.current) {
+        editorRef.current.innerHTML = markdownToHtml(escaped);
+        editorRef.current.focus();
+        const selection = typeof window !== "undefined" ? window.getSelection?.() : null;
+        if (selection && editorRef.current.firstChild) {
+          const range = document.createRange();
+          range.selectNodeContents(editorRef.current);
+          range.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+    },
+    [onChange],
   );
 
   return (
     <div className="bn-step-field">
       <div className="bn-step-field__top">
-        <span className="bn-step-field__label">{label}</span>
+        <span className="bn-step-field__label">
+          {label}
+          {enableAutocomplete && (
+            <button
+              type="button"
+              className="bn-step-toolbar__button"
+              onMouseDown={(event) => {
+                event.preventDefault();
+                setShowAllSuggestions(true);
+                editorRef.current?.focus();
+              }}
+              aria-label="Show step suggestions"
+              tabIndex={-1}
+            >
+              ⌄
+            </button>
+          )}
+        </span>
         <div className="bn-step-toolbar" aria-label={`${label} formatting`}>
           <button
             type="button"
@@ -282,6 +509,7 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
               applyFormat("bold");
             }}
             aria-label="Bold"
+            tabIndex={-1}
           >
             B
           </button>
@@ -294,6 +522,7 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
               applyFormat("italic");
             }}
             aria-label="Italic"
+            tabIndex={-1}
           >
             I
           </button>
@@ -306,11 +535,36 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
               applyFormat("underline");
             }}
             aria-label="Underline"
+            tabIndex={-1}
           >
             U
           </button>
+          {enableImageUpload && uploadImage && (
+            <button
+              type="button"
+              className="bn-step-toolbar__button"
+              onMouseDown={(event) => {
+                event.preventDefault();
+                handleImagePick();
+              }}
+              aria-label="Insert image"
+              tabIndex={-1}
+              disabled={isUploading}
+            >
+              Img
+            </button>
+          )}
         </div>
       </div>
+      {enableImageUpload && (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
+      )}
       <div
         ref={editorRef}
         className="bn-step-editor"
@@ -318,7 +572,11 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
         suppressContentEditableWarning
         data-placeholder={placeholder}
         data-multiline={multiline ? "true" : "false"}
-        onFocus={() => setIsFocused(true)}
+        data-step-field={fieldName}
+        onFocus={() => {
+          setIsFocused(true);
+          setPlainTextValue(editorRef.current?.innerText ?? "");
+        }}
         onBlur={() => {
           setIsFocused(false);
           syncValue();
@@ -326,6 +584,50 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
         onInput={syncValue}
         onPaste={handlePaste}
         onKeyDown={(event) => {
+          if ((event.key === "a" || event.key === "A") && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            const selection = window.getSelection?.();
+            const node = editorRef.current;
+            if (selection && node) {
+              const range = document.createRange();
+              range.selectNodeContents(node);
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+            return;
+          }
+
+          if (enableAutocomplete && shouldShowAutocomplete) {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setActiveSuggestionIndex((prev) =>
+                prev + 1 >= filteredSuggestions.length ? 0 : prev + 1,
+              );
+              return;
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setActiveSuggestionIndex((prev) =>
+                prev - 1 < 0 ? filteredSuggestions.length - 1 : prev - 1,
+              );
+              return;
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+              event.preventDefault();
+              const suggestion = filteredSuggestions[activeSuggestionIndex] ?? filteredSuggestions[0];
+              if (suggestion) {
+                applySuggestion(suggestion);
+              }
+              return;
+            }
+          }
+
+          if (enableAutocomplete && (event.metaKey || event.ctrlKey) && (event.code === "Space" || event.key === "" || event.key === " ")) {
+            event.preventDefault();
+            setShowAllSuggestions(true);
+            return;
+          }
+
           if (event.key === "Enter") {
             event.preventDefault();
             if (multiline && event.shiftKey) {
@@ -338,6 +640,33 @@ function StepField({ label, value, placeholder, onChange, autoFocus, multiline =
           }
         }}
       />
+      {shouldShowAutocomplete && (
+        <div className="bn-step-suggestions" role="listbox" aria-label={`${label} suggestions`}>
+          {filteredSuggestions.map((suggestion, index) => (
+            <button
+              type="button"
+              key={suggestion.id}
+              role="option"
+              aria-selected={index === activeSuggestionIndex}
+              className={
+                index === activeSuggestionIndex
+                  ? "bn-step-suggestion bn-step-suggestion--active"
+                  : "bn-step-suggestion"
+              }
+              onMouseDown={(event) => {
+                event.preventDefault();
+                applySuggestion(suggestion);
+              }}
+              tabIndex={-1}
+            >
+              <span className="bn-step-suggestion__title">{suggestion.title}</span>
+              {typeof suggestion.usageCount === "number" && suggestion.usageCount > 0 && (
+                <span className="bn-step-suggestion__meta">{suggestion.usageCount} uses</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
@@ -383,6 +712,7 @@ const testStepBlock = createReactBlockSpec(
         stepTitle.trim().length > 0 || stepData.trim().length > 0 || expectedResult.trim().length > 0;
       const [isDataVisible, setIsDataVisible] = useState(() => stepData.trim().length > 0);
       const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
+      const uploadImage = useStepImageUpload();
 
       useEffect(() => {
         if (stepData.trim().length > 0 && !isDataVisible) {
@@ -449,13 +779,37 @@ const testStepBlock = createReactBlockSpec(
       );
 
       return (
-        <div className="bn-teststep">
+        <div className="bn-teststep" data-block-id={block.id}>
           <StepField
             label="Step Title"
             value={stepTitle}
             placeholder="Describe the action to perform"
             onChange={handleStepTitleChange}
             autoFocus={stepTitle.length === 0}
+            enableAutocomplete
+            fieldName="title"
+            enableImageUpload={false}
+            onImageFile={async (file) => {
+              if (!uploadImage) {
+                return;
+              }
+
+              setIsDataVisible(true);
+              setShouldFocusDataField(true);
+              try {
+                const result = await uploadImage(file);
+                if (result?.url) {
+                  const nextValue = stepData.trim().length > 0 ? `${stepData}\n![](${result.url})` : `![](${result.url})`;
+                  editor.updateBlock(block.id, {
+                    props: {
+                      stepData: nextValue,
+                    },
+                  });
+                }
+              } catch (error) {
+                console.error("Failed to upload image to Step Data", error);
+              }
+            }}
           />
           {!isDataVisible && (
             <button
@@ -463,8 +817,9 @@ const testStepBlock = createReactBlockSpec(
               className="bn-teststep__toggle"
               onClick={handleShowDataField}
               aria-expanded="false"
+              tabIndex={-1}
             >
-              [+ Data]
+              + Step Data
             </button>
           )}
           {isDataVisible && (
@@ -475,6 +830,7 @@ const testStepBlock = createReactBlockSpec(
               onChange={handleStepDataChange}
               autoFocus={shouldFocusDataField}
               multiline
+              enableImageUpload
             />
           )}
           {showExpectedField && (
@@ -484,6 +840,7 @@ const testStepBlock = createReactBlockSpec(
               placeholder="What should happen?"
               onChange={handleExpectedChange}
               multiline
+              enableImageUpload
             />
           )}
         </div>