testomatio-editor-blocks 0.2.3 → 0.4.0

package/src/editor/blocks/markdown.ts

@@ -1,5 +1,7 @@
 const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
 const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
+const INLINE_SEGMENT_REGEX =
+  /(\*\*\*[^*]+\*\*\*|___[^_]+___|\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/;
 
 export function escapeHtml(text: string): string {
   return text
@@ -29,13 +31,19 @@ function parseInlineMarkdown(text: string): InlineSegment[] {
   }
 
   const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
-  const rawSegments = normalized
-    .split(/(\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/)
-    .filter(Boolean);
+  const rawSegments = normalized.split(INLINE_SEGMENT_REGEX).filter(Boolean);
 
   return rawSegments.map((segment) => {
     const baseStyles = { bold: false, italic: false, underline: false };
 
+    if (/^\*\*\*(.+)\*\*\*$/.test(segment) || /^___(.+)___$/.test(segment)) {
+      const content = segment.slice(3, -3);
+      return {
+        text: restoreEscapes(content),
+        styles: { bold: true, italic: true, underline: false },
+      };
+    }
+
     if (/^\*\*(.+)\*\*$/.test(segment) || /^__(.+)__$/.test(segment)) {
       const content = segment.slice(2, -2);
       return {
@@ -139,12 +147,13 @@ function fallbackHtmlToMarkdown(html: string): string {
 
   result = result.replace(/<\/?[^>]+>/g, "");
 
-  return result
+  const markdown = result
     .split("\n")
     .map((line) => line.trimEnd())
     .join("\n")
     .replace(/\n{3,}/g, "\n\n")
     .trim();
+  return cleanupEscapedFormatting(markdown);
 }
 
 export function htmlToMarkdown(html: string): string {
@@ -195,5 +204,26 @@ export function htmlToMarkdown(html: string): string {
   };
 
   const markdown = Array.from(temp.childNodes).map(traverse).join("");
-  return markdown.replace(/\n{3,}/g, "\n\n").trim();
+  return cleanupEscapedFormatting(markdown).replace(/\n{3,}/g, "\n\n").trim();
+}
+
+function cleanupEscapedFormatting(markdown: string): string {
+  return markdown.replace(/(\\+)([*_]+)/g, (_match, slashes, markers) => {
+    if (markers.length === 0) {
+      return slashes + markers;
+    }
+    const shouldClean =
+      markers.length === 3 ||
+      markers.length === 2 ||
+      markers.length === 1;
+    if (!shouldClean) {
+      return slashes + markers;
+    }
+    const hasPrintable = slashes.length % 2 === 0;
+    return hasPrintable ? markers : slashes + markers;
+  });
 }
+
+export const __markdownStringUtils = {
+  cleanupEscapedFormatting,
+};

package/src/editor/blocks/snippet.tsx

@@ -1,8 +1,180 @@
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback } from "react";
+import OverType, { type OverType as OverTypeInstance } from "overtype";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StepField } from "./stepField";
 import { useSnippetAutocomplete, type SnippetSuggestion } from "../snippetAutocomplete";
 import type { StepSuggestion } from "../stepAutocomplete";
+import { useStepImageUpload } from "../stepImageUpload";
+
+type SnippetDataFieldProps = {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+  onFieldFocus?: () => void;
+  fieldName?: string;
+  enableImageUpload?: boolean;
+};
+
+function SnippetDataField({
+  label,
+  value,
+  placeholder,
+  onChange,
+  onFieldFocus,
+  fieldName,
+  enableImageUpload = false,
+}: SnippetDataFieldProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const instanceRef = useRef<OverTypeInstance | null>(null);
+  const uploadImage = useStepImageUpload();
+  const [isFocused, setIsFocused] = useState(false);
+  const onChangeRef = useRef(onChange);
+  const initialValueRef = useRef(value);
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const insertImageMarkdown = useCallback(
+    (url: string) => {
+      const instance = instanceRef.current;
+      const textarea = instance?.textarea;
+      if (!instance || !textarea) {
+        return;
+      }
+
+      const currentValue = instance.getValue();
+      const selectionStart = textarea.selectionStart ?? currentValue.length;
+      const selectionEnd = textarea.selectionEnd ?? currentValue.length;
+      const before = currentValue.slice(0, selectionStart);
+      const after = currentValue.slice(selectionEnd);
+      const needsNewlineBefore = before.length > 0 && !before.endsWith("\n");
+      const needsNewlineAfter = after.length > 0 && !after.startsWith("\n");
+      const markdown = `${needsNewlineBefore ? "\n" : ""}![](${url})${needsNewlineAfter ? "\n" : ""}`;
+      const nextValue = `${before}${markdown}${after}`;
+
+      instance.setValue(nextValue);
+      onChangeRef.current?.(nextValue);
+
+      requestAnimationFrame(() => {
+        const cursor = selectionStart + markdown.length;
+        textarea.selectionStart = cursor;
+        textarea.selectionEnd = cursor;
+        textarea.focus();
+      });
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const [instance] = OverType.init(container, {
+      value: initialValueRef.current,
+      placeholder,
+      autoResize: true,
+      minHeight: "5rem",
+      toolbar: false,
+      onChange: (nextValue) => {
+        onChangeRef.current?.(nextValue);
+      },
+    });
+
+    instanceRef.current = instance;
+    const textarea = instance.textarea;
+    if (fieldName) {
+      textarea.dataset.stepField = fieldName;
+    }
+
+    const handleFocus = () => {
+      setIsFocused(true);
+      onFieldFocus?.();
+    };
+    const handleBlur = () => setIsFocused(false);
+
+    textarea.addEventListener("focus", handleFocus);
+    textarea.addEventListener("blur", handleBlur);
+
+    return () => {
+      textarea.removeEventListener("focus", handleFocus);
+      textarea.removeEventListener("blur", handleBlur);
+      instance.destroy();
+      instanceRef.current = null;
+    };
+  }, [fieldName, onFieldFocus, placeholder]);
+
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (!instance) {
+      return;
+    }
+
+    if (instance.getValue() !== value) {
+      instance.setValue(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (!enableImageUpload || !uploadImage) {
+      return;
+    }
+
+    const textarea = instanceRef.current?.textarea;
+    if (!textarea) {
+      return;
+    }
+
+    const handlePaste = async (event: ClipboardEvent) => {
+      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) {
+        return;
+      }
+
+      event.preventDefault();
+
+      try {
+        const response = await uploadImage(file);
+        if (response?.url) {
+          insertImageMarkdown(response.url);
+        }
+      } catch (error) {
+        console.error("Failed to upload pasted image", error);
+      }
+    };
+
+    textarea.addEventListener("paste", handlePaste as unknown as EventListener);
+    return () => {
+      textarea.removeEventListener("paste", handlePaste as unknown as EventListener);
+    };
+  }, [enableImageUpload, insertImageMarkdown, uploadImage]);
+
+  const editorClassName = useMemo(
+    () =>
+      [
+        "bn-step-editor",
+        "bn-step-editor--multiline",
+        isFocused ? "bn-step-editor--focused" : "",
+      ]
+        .filter(Boolean)
+        .join(" "),
+    [isFocused],
+  );
+
+  return (
+    <div className="bn-step-field">
+      <div className="bn-step-field__top">
+        <span className="bn-step-field__label">{label}</span>
+      </div>
+      <div ref={containerRef} className={editorClassName} data-step-field={fieldName} />
+    </div>
+  );
+}
 
 export const snippetBlock = createReactBlockSpec(
   {
@@ -27,8 +199,10 @@ export const snippetBlock = createReactBlockSpec(
     render: ({ block, editor }) => {
       const snippetTitle = (block.props.snippetTitle as string) || "";
       const snippetData = (block.props.snippetData as string) || "";
+      const snippetId = (block.props.snippetId as string) || "";
       const snippetSuggestions = useSnippetAutocomplete();
       const hasSnippets = snippetSuggestions.length > 0;
+      const isSnippetSelected = snippetId.length > 0;
 
       const handleSnippetChange = useCallback(
         (nextTitle: string) => {
@@ -92,31 +266,33 @@ export const snippetBlock = createReactBlockSpec(
 
       return (
         <div className="bn-teststep bn-snippet" data-block-id={block.id}>
-          <StepField
-            label="Snippet Title"
-            value={snippetTitle}
-            placeholder="Describe the reusable action"
-            onChange={handleSnippetChange}
-            autoFocus={snippetTitle.length === 0}
-            enableAutocomplete
-            suggestionFilter={(suggestion) => (suggestion as SnippetSuggestion).isSnippet === true}
-            suggestionsOverride={snippetSuggestions as unknown as StepSuggestion[]}
-            onSuggestionSelect={handleSnippetSelect}
-            fieldName="snippet-title"
-            showSuggestionsOnFocus
-            enableImageUpload={false}
-            onFieldFocus={handleFieldFocus}
-          />
-          <StepField
-            label="Snippet Data"
-            value={snippetData}
-            placeholder="Add optional data or assets for the snippet"
-            onChange={handleSnippetDataChange}
-            multiline
-            fieldName="snippet-data"
-            enableImageUpload
-            onFieldFocus={handleFieldFocus}
-          />
+          {!isSnippetSelected ? (
+            <StepField
+              label="Snippet Title"
+              value={snippetTitle}
+              onChange={handleSnippetChange}
+              autoFocus={snippetTitle.length === 0}
+              enableAutocomplete={true}
+              suggestionFilter={(suggestion) => (suggestion as SnippetSuggestion).isSnippet === true}
+              suggestionsOverride={snippetSuggestions as unknown as StepSuggestion[]}
+              onSuggestionSelect={handleSnippetSelect}
+              fieldName="snippet-title"
+              showSuggestionsOnFocus={true}
+              enableImageUpload={false}
+              onFieldFocus={handleFieldFocus}
+              readOnly={false}
+            />
+          ) : (
+            <SnippetDataField
+              label={`Snippet: ${snippetTitle}`}
+              value={snippetData}
+              onChange={handleSnippetDataChange}
+              fieldName="snippet-data"
+              enableImageUpload
+              onFieldFocus={handleFieldFocus}
+              placeholder="Snippet data will appear here..."
+            />
+          )}
         </div>
       );
     },

package/src/editor/blocks/step.tsx

@@ -1,9 +1,33 @@
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { StepField } from "./stepField";
 import { useStepImageUpload } from "../stepImageUpload";
 import type { StepSuggestion } from "../stepAutocomplete";
 
+const EXPECTED_COLLAPSED_KEY = "bn-expected-collapsed";
+
+const readExpectedCollapsedPreference = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  try {
+    return window.localStorage.getItem(EXPECTED_COLLAPSED_KEY) === "true";
+  } catch {
+    return false;
+  }
+};
+
+const writeExpectedCollapsedPreference = (collapsed: boolean) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(EXPECTED_COLLAPSED_KEY, collapsed ? "true" : "false");
+  } catch {
+    //
+  }
+};
+
 export const stepBlock = createReactBlockSpec(
   {
     type: "testStep",
@@ -25,25 +49,32 @@ export const stepBlock = createReactBlockSpec(
       const stepTitle = (block.props.stepTitle as string) || "";
       const stepData = (block.props.stepData as string) || "";
       const expectedResult = (block.props.expectedResult as string) || "";
-      const showExpectedField =
-        stepTitle.trim().length > 0 || stepData.trim().length > 0 || expectedResult.trim().length > 0;
-      const [isDataVisible, setIsDataVisible] = useState(() => stepData.trim().length > 0);
+      const expectedHasContent = expectedResult.trim().length > 0;
+      const storedExpectedCollapsed = useMemo(
+        () => readExpectedCollapsedPreference(),
+        [],
+      );
+      const dataHasContent = stepData.trim().length > 0;
+      const [isExpectedVisible, setIsExpectedVisible] = useState(
+        expectedHasContent ? true : !storedExpectedCollapsed,
+      );
+      const [isDataVisible, setIsDataVisible] = useState(dataHasContent);
       const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
       const uploadImage = useStepImageUpload();
 
-      useEffect(() => {
-        if (stepData.trim().length > 0 && !isDataVisible) {
-          setIsDataVisible(true);
-        }
-      }, [isDataVisible, stepData]);
+      // Calculate step number based on position in document
+      const stepNumber = useMemo(() => {
+        const allBlocks = editor.document;
+        const stepBlocks = allBlocks.filter((b) => b.type === "testStep");
+        const index = stepBlocks.findIndex((b) => b.id === block.id);
+        return index >= 0 ? index + 1 : 1;
+      }, [editor.document, block.id]);
 
       useEffect(() => {
-        if (shouldFocusDataField && isDataVisible) {
-          const timer = setTimeout(() => setShouldFocusDataField(false), 0);
-          return () => clearTimeout(timer);
+        if (dataHasContent && !isDataVisible) {
+          setIsDataVisible(true);
         }
-        return undefined;
-      }, [isDataVisible, shouldFocusDataField]);
+      }, [dataHasContent, isDataVisible]);
 
       const handleStepTitleChange = useCallback(
         (next: string) => {
@@ -75,11 +106,15 @@ export const stepBlock = createReactBlockSpec(
         [editor, block.id, stepData],
       );
 
-      const handleShowDataField = useCallback(() => {
+      const handleShowData = useCallback(() => {
         setIsDataVisible(true);
         setShouldFocusDataField(true);
       }, []);
 
+      const handleHideData = useCallback(() => {
+        setIsDataVisible(false);
+      }, []);
+
       const handleExpectedChange = useCallback(
         (next: string) => {
           if (next === expectedResult) {
@@ -117,31 +152,40 @@ export const stepBlock = createReactBlockSpec(
         editor.setSelection(block.id, block.id);
       }, [editor, block.id]);
 
+      const [dataFocusSignal] = useState(0);
+      const [expectedFocusSignal, setExpectedFocusSignal] = useState(0);
+
+      const handleShowExpected = useCallback(() => {
+        setIsExpectedVisible(true);
+        setExpectedFocusSignal((value) => value + 1);
+        writeExpectedCollapsedPreference(false);
+      }, []);
+
+      const handleHideExpected = useCallback(() => {
+        setIsExpectedVisible(false);
+        writeExpectedCollapsedPreference(true);
+      }, []);
+
+      useEffect(() => {
+        if (expectedHasContent && !isExpectedVisible) {
+          setIsExpectedVisible(true);
+        }
+      }, [expectedHasContent, isExpectedVisible]);
+
+      const canToggleData = !dataHasContent;
+      const canToggleExpected = !expectedHasContent;
+
       return (
         <div className="bn-teststep" data-block-id={block.id}>
-          <StepField
-            label="Step Title"
-            value={stepTitle}
-            placeholder="Describe the action to perform"
+            <StepField
+              label={`Step ${stepNumber}`}
+              value={stepTitle}
             onChange={handleStepTitleChange}
             autoFocus={stepTitle.length === 0}
             enableAutocomplete
             fieldName="title"
             suggestionFilter={(suggestion) => (suggestion as StepSuggestion).isSnippet !== true}
             onFieldFocus={handleFieldFocus}
-            rightAction={
-              !isDataVisible ? (
-                <button
-                  type="button"
-                  className="bn-teststep__toggle"
-                  onClick={handleShowDataField}
-                  aria-expanded="false"
-                  tabIndex={-1}
-                >
-                  + Step Data
-                </button>
-              ) : null
-            }
             enableImageUpload={false}
             showFormattingButtons
             onImageFile={async (file) => {
@@ -166,32 +210,84 @@ export const stepBlock = createReactBlockSpec(
               }
             }}
           />
-          {isDataVisible && (
+          {isDataVisible ? (
             <StepField
               label="Step Data"
+              labelToggle={
+                canToggleData
+                  ? {
+                      onClick: handleHideData,
+                      expanded: true,
+                    }
+                  : undefined
+              }
               value={stepData}
-              placeholder="Provide additional data about the step"
               onChange={handleStepDataChange}
               autoFocus={shouldFocusDataField}
+              focusSignal={dataFocusSignal}
               multiline
               enableImageUpload
               showFormattingButtons
               showImageButton
               onFieldFocus={handleFieldFocus}
             />
+          ) : (
+            <div className="bn-step-field bn-step-field--collapsed">
+              <span
+                className="bn-step-field__label bn-step-field__label--toggle"
+                role="button"
+                tabIndex={-1}
+                onClick={handleShowData}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    handleShowData();
+                  }
+                }}
+                aria-expanded="false"
+              >
+                Step Data
+              </span>
+            </div>
           )}
-          {showExpectedField && (
+          {isExpectedVisible ? (
             <StepField
               label="Expected Result"
+              labelToggle={
+                canToggleExpected
+                  ? {
+                      onClick: handleHideExpected,
+                      expanded: true,
+                    }
+                  : undefined
+              }
               value={expectedResult}
-              placeholder="What should happen?"
               onChange={handleExpectedChange}
               multiline
+              focusSignal={expectedFocusSignal}
               enableImageUpload
               showFormattingButtons
               showImageButton
               onFieldFocus={handleFieldFocus}
             />
+          ) : (
+            <div className="bn-step-field bn-step-field--collapsed">
+              <span
+                className="bn-step-field__label bn-step-field__label--toggle"
+                role="button"
+                tabIndex={-1}
+                onClick={handleShowExpected}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    handleShowExpected();
+                  }
+                }}
+                aria-expanded="false"
+              >
+                Expected Result
+              </span>
+            </div>
           )}
           <button type="button" className="bn-step-add" onClick={handleInsertNextStep}>
             + Step