testomatio-editor-blocks 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",
@@ -29,7 +29,7 @@
     "build:package": "node scripts/build-package.mjs",
     "lint": "eslint .",
     "test": "vitest",
-    "test:run": "vitest run",
+    "test:run": "vitest run --reporter=verbose",
     "preview": "vite preview"
   },
   "keywords": [
@@ -39,6 +39,10 @@
     "testcases",
     "test-automation"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/testomatio/block-editor"
+  },
   "peerDependencies": {
     "@blocknote/core": "^0.31.3",
     "@blocknote/react": "^0.31.3",
@@ -64,5 +68,8 @@
     "typescript-eslint": "^8.45.0",
     "vite": "^7.1.7",
     "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "overtype": "^2.0.6"
   }
 }

package/src/App.tsx

@@ -664,7 +664,7 @@ function App() {
               <h2>Autocomplete Steps</h2>
             </div>
             <p className="app__panel-text">
-              Start typing in the Step Title field to filter this list instantly.
+              Markdown format supported
             </p>
             <ol className="app__step-list">
               {(DEMO_STEP_FIXTURES.data ?? []).map((step) => (

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 {
@@ -200,10 +208,22 @@ export function htmlToMarkdown(html: string): string {
 }
 
 function cleanupEscapedFormatting(markdown: string): string {
-  return markdown.replace(/\\([*_])([^]*?)\\\1/g, (match, marker, inner) => {
-    if (inner.includes("\\")) {
-      return match;
+  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;
     }
-    return `${marker}${inner}${marker}`;
+    const hasPrintable = slashes.length % 2 === 0;
+    return hasPrintable ? markers : slashes + markers;
   });
 }
+
+export const __markdownStringUtils = {
+  cleanupEscapedFormatting,
+};

package/src/editor/blocks/snippet.tsx

@@ -1,8 +1,105 @@
 import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback } from "react";
-import { StepField } from "./stepField";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ChangeEvent } from "react";
 import { useSnippetAutocomplete, type SnippetSuggestion } from "../snippetAutocomplete";
-import type { StepSuggestion } from "../stepAutocomplete";
+
+type SnippetDropdownProps = {
+  value: string;
+  placeholder: string;
+  suggestions: SnippetSuggestion[];
+  onSelect: (suggestion: SnippetSuggestion) => void;
+};
+
+function SnippetDropdown({ value, placeholder, suggestions, onSelect }: SnippetDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isOpen]);
+
+  const filtered = useMemo(() => {
+    const snippets = suggestions.filter((s) => s.isSnippet === true);
+    if (!search) return snippets;
+    const lower = search.toLowerCase();
+    return snippets.filter((s) => s.title.toLowerCase().includes(lower));
+  }, [suggestions, search]);
+
+  const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  }, []);
+
+  return (
+    <div className="bn-snippet-dropdown" ref={containerRef}>
+      <button
+        type="button"
+        className="bn-snippet-dropdown__trigger"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <span className="bn-snippet-dropdown__text">
+          {value || placeholder}
+        </span>
+        <svg className="bn-snippet-dropdown__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="bn-snippet-dropdown__panel" role="listbox">
+          <div className="bn-snippet-dropdown__search">
+            <svg className="bn-snippet-dropdown__search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"/>
+            </svg>
+            <input
+              ref={searchRef}
+              type="text"
+              className="bn-snippet-dropdown__search-input"
+              placeholder="Search"
+              value={search}
+              onChange={handleSearchChange}
+            />
+          </div>
+          <div className="bn-snippet-dropdown__list">
+            {filtered.map((suggestion) => (
+              <button
+                type="button"
+                key={suggestion.id}
+                role="option"
+                className="bn-snippet-dropdown__item"
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  onSelect(suggestion);
+                  setIsOpen(false);
+                }}
+                tabIndex={-1}
+              >
+                {suggestion.title}
+              </button>
+            ))}
+            {filtered.length === 0 && (
+              <div className="bn-snippet-dropdown__empty">No snippets found</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
 
 export const snippetBlock = createReactBlockSpec(
   {
@@ -27,42 +124,14 @@ 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 handleSnippetChange = useCallback(
-        (nextTitle: string) => {
-          if (nextTitle === snippetTitle) {
-            return;
-          }
-
-          editor.updateBlock(block.id, {
-            props: {
-              snippetTitle: nextTitle,
-            },
-          });
-        },
-        [block.id, editor, snippetTitle],
-      );
-
-      const handleSnippetDataChange = useCallback(
-        (next: string) => {
-          if (next === snippetData) {
-            return;
-          }
-
-          editor.updateBlock(block.id, {
-            props: {
-              snippetData: next,
-            },
-          });
-        },
-        [editor, block.id, snippetData],
-      );
+      const isSnippetSelected = snippetId.length > 0;
 
       const handleSnippetSelect = useCallback(
-        (suggestion: SnippetSuggestion | StepSuggestion) => {
-          const rawBody = (suggestion as SnippetSuggestion).body ?? "";
+        (suggestion: SnippetSuggestion) => {
+          const rawBody = suggestion.body ?? "";
           const sanitizedBody = rawBody
             .split(/\r?\n/)
             .filter((line) => !/^<!--\s*(begin|end)\s+snippet/i.test(line.trim()))
@@ -91,32 +160,19 @@ 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}
-          />
+        <div className="bn-teststep bn-snippet" data-block-id={block.id} onFocus={handleFieldFocus}>
+          <div className="bn-snippet__header">
+            <span className="bn-snippet__label">Snippet</span>
+            <SnippetDropdown
+              value={snippetTitle}
+              placeholder="Select Snippet"
+              suggestions={snippetSuggestions}
+              onSelect={handleSnippetSelect}
+            />
+          </div>
+          {isSnippetSelected && (
+            <div className="bn-snippet__content">{snippetData}</div>
+          )}
         </div>
       );
     },