testomatio-editor-blocks 0.1.2 → 0.2.1

package/README.md

@@ -107,8 +107,8 @@ return (
 
 4. **Blocks Available**
 
-   - `testCase`: rich-text wrapper with status and reference metadata.
-   - `testStep`: inline WYSIWYG inputs for Step Title, Data, and Expected Result with bold/italic/underline formatting.
+   - `testStep`: inline WYSIWYG inputs for Step Title, Data, and Expected Result with bold/italic/underline formatting/images.
+   - `snippet`: dropdown to pick a reusable snippet and editable body (no formatting buttons).
 
 ## Step Autocomplete & Image Upload Hooks
 
@@ -117,20 +117,27 @@ Configure everything via JS—no React providers required:
 ```ts
 import {
   customSchema,
-  setGlobalStepSuggestionsFetcher,
-  setGlobalStepImageUploadHandler,
+  setStepsFetcher,
 } from "testomatio-editor-blocks";
+import { setSnippetFetcher } from "testomatio-editor-blocks/snippets";
 
 // Step suggestions (fetch or return an array of { id, title, ... })
-setGlobalStepSuggestionsFetcher(async () => {
+setStepsFetcher(async () => {
   const res = await fetch("https://api.testomatio.com/v1/steps");
   return res.json();
 });
 
+setSnippetFetcher(async () => {
+  const res = await fetch("https://api.testomatio.com/v1/snippets");
+  return res.json();
+});
+
 // Image upload uses BlockNote's `uploadFile` handler you pass to `useCreateBlockNote`.
-// No extra setup is required for step fields.
+// No extra setup is required for step/snippet fields.
 ```
 
+For snippets, provide a suggestions fetcher that returns `{ id, title, body, ... }` or a JSON:API document and map it with `setSnippetFetcher`. Selecting a snippet fills its body; Markdown is wrapped with `<!-- begin snippet #id --> ... <!-- end snippet #id -->`.
+
 Step suggestions accept either an array of `{ id, title, ... }` or the JSON:API shape:
 
 ```json

package/package/editor/blocks/markdown.d.ts

@@ -0,0 +1,5 @@
+export declare function escapeHtml(text: string): string;
+export declare function markdownToHtml(markdown: string): string;
+export declare function escapeMarkdownText(text: string): string;
+export declare function normalizePlainText(text: string): string;
+export declare function htmlToMarkdown(html: string): string;

package/package/editor/blocks/markdown.js

@@ -0,0 +1,160 @@
+const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function restoreEscapes(text) {
+    return text.replace(/\uE000/g, "\\");
+}
+function parseInlineMarkdown(text) {
+    if (!text) {
+        return [];
+    }
+    const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
+    const rawSegments = normalized
+        .split(/(\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/)
+        .filter(Boolean);
+    return rawSegments.map((segment) => {
+        const baseStyles = { bold: false, italic: false, underline: false };
+        if (/^\*\*(.+)\*\*$/.test(segment) || /^__(.+)__$/.test(segment)) {
+            const content = segment.slice(2, -2);
+            return {
+                text: restoreEscapes(content),
+                styles: { ...baseStyles, bold: true },
+            };
+        }
+        if (/^\*(.+)\*$/.test(segment) || /^_(.+)_$/.test(segment)) {
+            const content = segment.slice(1, -1);
+            return {
+                text: restoreEscapes(content),
+                styles: { ...baseStyles, italic: true },
+            };
+        }
+        if (/^<u>(.+)<\/u>$/.test(segment)) {
+            const content = segment.slice(3, -4);
+            return {
+                text: restoreEscapes(content),
+                styles: { ...baseStyles, underline: true },
+            };
+        }
+        return {
+            text: restoreEscapes(segment),
+            styles: { ...baseStyles },
+        };
+    });
+}
+function inlineToHtml(inline) {
+    return inline
+        .map(({ text, styles }) => {
+        let html = escapeHtml(text);
+        if (styles.bold) {
+            html = `<strong>${html}</strong>`;
+        }
+        if (styles.italic) {
+            html = `<em>${html}</em>`;
+        }
+        if (styles.underline) {
+            html = `<u>${html}</u>`;
+        }
+        return html;
+    })
+        .join("");
+}
+export function markdownToHtml(markdown) {
+    if (!markdown) {
+        return "";
+    }
+    const lines = markdown.split(/\n/);
+    const htmlLines = lines.map((line) => {
+        const inline = parseInlineMarkdown(line);
+        const html = inlineToHtml(inline);
+        if (!html) {
+            return html;
+        }
+        return html.replace(IMAGE_MARKDOWN_REGEX, (_match, alt = "", src = "") => `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="bn-inline-image" contenteditable="false" draggable="false" />`);
+    });
+    return htmlLines.join("<br />");
+}
+export function escapeMarkdownText(text) {
+    return text.replace(MARKDOWN_ESCAPE_REGEX, "\\$1");
+}
+export function normalizePlainText(text) {
+    return text.replace(/\s+/g, " ").trim().toLowerCase();
+}
+function fallbackHtmlToMarkdown(html) {
+    if (!html) {
+        return "";
+    }
+    let result = html;
+    result = result.replace(/<img[^>]*>/gi, (match) => {
+        var _a, _b, _c, _d;
+        const src = (_b = (_a = match.match(/src="([^"]*)"/i)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "";
+        const alt = (_d = (_c = match.match(/alt="([^"]*)"/i)) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : "";
+        return `![${alt}](${src})`;
+    });
+    result = result
+        .replace(/<br\s*\/?>/gi, "\n")
+        .replace(/<\/?(div|p)>/gi, "\n")
+        .replace(/<strong>(.*?)<\/strong>/gis, (_m, content) => `**${content}**`)
+        .replace(/<(em|i)>(.*?)<\/(em|i)>/gis, (_m, _tag, content) => `*${content}*`)
+        .replace(/<span[^>]*>/gi, "")
+        .replace(/<\/span>/gi, "")
+        .replace(/<u>(.*?)<\/u>/gis, (_m, content) => `<u>${content}</u>`);
+    result = result.replace(/<\/?[^>]+>/g, "");
+    return result
+        .split("\n")
+        .map((line) => line.trimEnd())
+        .join("\n")
+        .replace(/\n{3,}/g, "\n\n")
+        .trim();
+}
+export function htmlToMarkdown(html) {
+    if (typeof document === "undefined") {
+        return fallbackHtmlToMarkdown(html);
+    }
+    const temp = document.createElement("div");
+    temp.innerHTML = html;
+    const traverse = (node) => {
+        var _a, _b, _c;
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = (_a = node.textContent) !== null && _a !== void 0 ? _a : "";
+            return escapeMarkdownText(text);
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return "";
+        }
+        const element = node;
+        const children = Array.from(element.childNodes)
+            .map(traverse)
+            .join("");
+        switch (element.tagName.toLowerCase()) {
+            case "strong":
+            case "b":
+                return children ? `**${children}**` : children;
+            case "em":
+            case "i":
+                return children ? `*${children}*` : children;
+            case "u":
+                return children ? `<u>${children}</u>` : children;
+            case "br":
+                return "\n";
+            case "div":
+            case "p":
+                return children + "\n";
+            case "img": {
+                const src = (_b = element.getAttribute("src")) !== null && _b !== void 0 ? _b : "";
+                const alt = (_c = element.getAttribute("alt")) !== null && _c !== void 0 ? _c : "";
+                return `![${alt}](${src})`;
+            }
+            default:
+                return children;
+        }
+    };
+    const markdown = Array.from(temp.childNodes).map(traverse).join("");
+    return markdown.replace(/\n{3,}/g, "\n\n").trim();
+}

package/package/editor/blocks/snippet.d.ts

@@ -0,0 +1,38 @@
+export declare const snippetBlock: {
+    config: {
+        readonly type: "snippet";
+        readonly content: "none";
+        readonly propSchema: {
+            readonly snippetId: {
+                readonly default: "";
+            };
+            readonly snippetTitle: {
+                readonly default: "";
+            };
+            readonly snippetData: {
+                readonly default: "";
+            };
+            readonly snippetExpectedResult: {
+                readonly default: "";
+            };
+        };
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        readonly type: "snippet";
+        readonly content: "none";
+        readonly propSchema: {
+            readonly snippetId: {
+                readonly default: "";
+            };
+            readonly snippetTitle: {
+                readonly default: "";
+            };
+            readonly snippetData: {
+                readonly default: "";
+            };
+            readonly snippetExpectedResult: {
+                readonly default: "";
+            };
+        };
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/package/editor/blocks/snippet.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback } from "react";
+import { StepField } from "./stepField";
+import { useSnippetAutocomplete } from "../snippetAutocomplete";
+export const snippetBlock = createReactBlockSpec({
+    type: "snippet",
+    content: "none",
+    propSchema: {
+        snippetId: {
+            default: "",
+        },
+        snippetTitle: {
+            default: "",
+        },
+        snippetData: {
+            default: "",
+        },
+        snippetExpectedResult: {
+            default: "",
+        },
+    },
+}, {
+    render: ({ block, editor }) => {
+        const snippetTitle = block.props.snippetTitle || "";
+        const snippetData = block.props.snippetData || "";
+        const snippetSuggestions = useSnippetAutocomplete();
+        const handleSnippetChange = useCallback((nextTitle) => {
+            if (nextTitle === snippetTitle) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    snippetTitle: nextTitle,
+                },
+            });
+        }, [block.id, editor, snippetTitle]);
+        const handleSnippetDataChange = useCallback((next) => {
+            if (next === snippetData) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    snippetData: next,
+                },
+            });
+        }, [editor, block.id, snippetData]);
+        const handleSnippetSelect = useCallback((suggestion) => {
+            var _a;
+            const rawBody = (_a = suggestion.body) !== null && _a !== void 0 ? _a : "";
+            const sanitizedBody = rawBody
+                .split(/\r?\n/)
+                .filter((line) => !/^<!--\s*(begin|end)\s+snippet/i.test(line.trim()))
+                .join("\n");
+            editor.updateBlock(block.id, {
+                props: {
+                    snippetId: suggestion.id,
+                    snippetData: sanitizedBody,
+                    snippetTitle: suggestion.title,
+                },
+            });
+        }, [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 })] }));
+    },
+});

package/package/editor/blocks/step.d.ts

@@ -0,0 +1,32 @@
+export declare const stepBlock: {
+    config: {
+        readonly type: "testStep";
+        readonly content: "none";
+        readonly propSchema: {
+            readonly stepTitle: {
+                readonly default: "";
+            };
+            readonly stepData: {
+                readonly default: "";
+            };
+            readonly expectedResult: {
+                readonly default: "";
+            };
+        };
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        readonly type: "testStep";
+        readonly content: "none";
+        readonly propSchema: {
+            readonly stepTitle: {
+                readonly default: "";
+            };
+            readonly stepData: {
+                readonly default: "";
+            };
+            readonly expectedResult: {
+                readonly default: "";
+            };
+        };
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/package/editor/blocks/step.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback, useEffect, useState } from "react";
+import { StepField } from "./stepField";
+import { useStepImageUpload } from "../stepImageUpload";
+export const stepBlock = createReactBlockSpec({
+    type: "testStep",
+    content: "none",
+    propSchema: {
+        stepTitle: {
+            default: "",
+        },
+        stepData: {
+            default: "",
+        },
+        expectedResult: {
+            default: "",
+        },
+    },
+}, {
+    render: ({ block, editor }) => {
+        const stepTitle = block.props.stepTitle || "";
+        const stepData = block.props.stepData || "";
+        const expectedResult = block.props.expectedResult || "";
+        const showExpectedField = 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) {
+                setIsDataVisible(true);
+            }
+        }, [isDataVisible, stepData]);
+        useEffect(() => {
+            if (shouldFocusDataField && isDataVisible) {
+                const timer = setTimeout(() => setShouldFocusDataField(false), 0);
+                return () => clearTimeout(timer);
+            }
+            return undefined;
+        }, [isDataVisible, shouldFocusDataField]);
+        const handleStepTitleChange = useCallback((next) => {
+            if (next === stepTitle) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    stepTitle: next,
+                },
+            });
+        }, [editor, block.id, stepTitle]);
+        const handleStepDataChange = useCallback((next) => {
+            if (next === stepData) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    stepData: next,
+                },
+            });
+        }, [editor, block.id, stepData]);
+        const handleShowDataField = useCallback(() => {
+            setIsDataVisible(true);
+            setShouldFocusDataField(true);
+        }, []);
+        const handleExpectedChange = useCallback((next) => {
+            if (next === expectedResult) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    expectedResult: next,
+                },
+            });
+        }, [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) => {
+                        if (!uploadImage) {
+                            return;
+                        }
+                        setIsDataVisible(true);
+                        setShouldFocusDataField(true);
+                        try {
+                            const result = await uploadImage(file);
+                            if (result === null || result === void 0 ? void 0 : 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 && (_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 }))] }));
+    },
+});

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

@@ -0,0 +1,26 @@
+import { type StepSuggestion } from "../stepAutocomplete";
+import { type SnippetSuggestion } from "../snippetAutocomplete";
+import type { ReactNode } from "react";
+type Suggestion = StepSuggestion | SnippetSuggestion;
+type StepFieldProps = {
+    label: string;
+    value: string;
+    placeholder: string;
+    onChange: (nextValue: string) => void;
+    autoFocus?: boolean;
+    multiline?: boolean;
+    enableAutocomplete?: boolean;
+    fieldName?: string;
+    suggestionFilter?: (suggestion: Suggestion) => boolean;
+    suggestionsOverride?: Suggestion[];
+    onSuggestionSelect?: (suggestion: Suggestion) => void;
+    readOnly?: boolean;
+    showSuggestionsOnFocus?: boolean;
+    enableImageUpload?: boolean;
+    onImageFile?: (file: File) => Promise<void> | void;
+    rightAction?: ReactNode;
+    showFormattingButtons?: boolean;
+    showImageButton?: boolean;
+};
+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 {};