testomatio-editor-blocks 0.1.2 → 0.2.0

package/package/editor/customSchema.js

@@ -1,623 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
+import { defaultBlockSpecs } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
-import { createReactBlockSpec } from "@blocknote/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useStepAutocomplete } from "./stepAutocomplete";
-import { useStepImageUpload } from "./stepImageUpload";
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/\"/g, "&quot;")
-        .replace(/'/g, "&#39;");
-}
-const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
-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 />");
-}
-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("");
-}
-function restoreEscapes(text) {
-    return text.replace(/\uE000/g, "\\");
-}
-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();
-}
-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();
-}
-const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
-function escapeMarkdownText(text) {
-    return text.replace(MARKDOWN_ESCAPE_REGEX, "\\$1");
-}
-function normalizePlainText(text) {
-    return text.replace(/\s+/g, " ").trim().toLowerCase();
-}
-function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false, enableAutocomplete = false, fieldName, enableImageUpload = false, onImageFile, }) {
-    const editorRef = useRef(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(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(() => {
-        var _a;
-        const element = editorRef.current;
-        if (!element || isFocused) {
-            return;
-        }
-        if (value.trim().length === 0) {
-            element.innerHTML = "";
-            setPlainTextValue("");
-        }
-        else {
-            element.innerHTML = markdownToHtml(value);
-            setPlainTextValue((_a = element.textContent) !== null && _a !== void 0 ? _a : "");
-        }
-    }, [value, isFocused]);
-    const syncValue = useCallback(() => {
-        var _a;
-        const element = editorRef.current;
-        if (!element) {
-            return;
-        }
-        const markdown = htmlToMarkdown(element.innerHTML);
-        if (markdown !== value) {
-            onChange(markdown);
-        }
-        setPlainTextValue((_a = element.innerText) !== null && _a !== void 0 ? _a : "");
-        if (!markdown && element.innerHTML !== "") {
-            element.innerHTML = "";
-        }
-    }, [onChange, value]);
-    useEffect(() => {
-        if (!autoFocus || autoFocusRef.current || !editorRef.current) {
-            return;
-        }
-        autoFocusRef.current = true;
-        const element = editorRef.current;
-        const focusElement = () => {
-            var _a;
-            element.focus();
-            setIsFocused(true);
-            const selection = typeof window !== "undefined" ? (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window) : 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((command) => {
-        document.execCommand(command);
-        syncValue();
-    }, [syncValue]);
-    const ensureCaretInEditor = useCallback(() => {
-        var _a;
-        const element = editorRef.current;
-        if (!element) {
-            return false;
-        }
-        const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
-        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) => {
-        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) => {
-        var _a;
-        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file || !uploadImage) {
-            return;
-        }
-        try {
-            setIsUploading(true);
-            const response = await uploadImage(file);
-            if (response === null || response === void 0 ? void 0 : 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(async (event) => {
-        var _a, _b, _c;
-        if ((enableImageUpload && uploadImage) || onImageFile) {
-            const items = Array.from((_a = event.clipboardData.items) !== null && _a !== void 0 ? _a : []);
-            const imageItem = items.find((item) => item.kind === "file" && item.type.startsWith("image/"));
-            const file = imageItem === null || imageItem === void 0 ? void 0 : 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 === null || result === void 0 ? void 0 : 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 = (_c = (_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.getData("text/plain")) !== null && _c !== void 0 ? _c : "";
-        const html = markdownToHtml(text);
-        ensureCaretInEditor();
-        document.execCommand("insertHTML", false, html);
-        syncValue();
-    }, [enableImageUpload, ensureCaretInEditor, syncValue, uploadImage]);
-    const applySuggestion = useCallback((suggestion) => {
-        var _a;
-        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" ? (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window) : null;
-            if (selection && editorRef.current.firstChild) {
-                const range = document.createRange();
-                range.selectNodeContents(editorRef.current);
-                range.collapse(false);
-                selection.removeAllRanges();
-                selection.addRange(range);
-            }
-        }
-    }, [onChange]);
-    return (_jsxs("div", { className: "bn-step-field", children: [_jsxs("div", { className: "bn-step-field__top", children: [_jsxs("span", { className: "bn-step-field__label", children: [label, enableAutocomplete && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
-                                    var _a;
-                                    event.preventDefault();
-                                    setShowAllSuggestions(true);
-                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                }, "aria-label": "Show step suggestions", tabIndex: -1, children: "\u2304" }))] }), _jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} formatting`, children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
-                                    var _a;
-                                    event.preventDefault();
-                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    applyFormat("bold");
-                                }, "aria-label": "Bold", tabIndex: -1, children: "B" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
-                                    var _a;
-                                    event.preventDefault();
-                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    applyFormat("italic");
-                                }, "aria-label": "Italic", tabIndex: -1, children: "I" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
-                                    var _a;
-                                    event.preventDefault();
-                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    applyFormat("underline");
-                                }, "aria-label": "Underline", tabIndex: -1, children: "U" }), enableImageUpload && uploadImage && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
-                                    event.preventDefault();
-                                    handleImagePick();
-                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: "Img" }))] })] }), enableImageUpload && (_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileChange })), _jsx("div", { ref: editorRef, className: "bn-step-editor", contentEditable: true, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-multiline": multiline ? "true" : "false", "data-step-field": fieldName, onFocus: () => {
-                    var _a, _b;
-                    setIsFocused(true);
-                    setPlainTextValue((_b = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : "");
-                }, onBlur: () => {
-                    setIsFocused(false);
-                    syncValue();
-                }, onInput: syncValue, onPaste: handlePaste, onKeyDown: (event) => {
-                    var _a, _b;
-                    if ((event.key === "a" || event.key === "A") && (event.metaKey || event.ctrlKey)) {
-                        event.preventDefault();
-                        const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
-                        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 = (_b = filteredSuggestions[activeSuggestionIndex]) !== null && _b !== void 0 ? _b : 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) {
-                            document.execCommand("insertLineBreak");
-                            document.execCommand("insertLineBreak");
-                        }
-                        else {
-                            document.execCommand("insertLineBreak");
-                        }
-                        syncValue();
-                    }
-                } }), shouldShowAutocomplete && (_jsx("div", { className: "bn-step-suggestions", role: "listbox", "aria-label": `${label} suggestions`, children: filteredSuggestions.map((suggestion, index) => (_jsxs("button", { type: "button", 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, children: [_jsx("span", { className: "bn-step-suggestion__title", children: suggestion.title }), typeof suggestion.usageCount === "number" && suggestion.usageCount > 0 && (_jsxs("span", { className: "bn-step-suggestion__meta", children: [suggestion.usageCount, " uses"] }))] }, suggestion.id))) }))] }));
-}
-const statusOptions = ["draft", "ready", "blocked"];
-const statusLabels = {
-    draft: "Draft",
-    ready: "Ready",
-    blocked: "Blocked",
-};
-const statusClassNames = {
-    draft: "bn-testcase--draft",
-    ready: "bn-testcase--ready",
-    blocked: "bn-testcase--blocked",
-};
-const testStepBlock = 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", enableImageUpload: false, 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("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", tabIndex: -1, children: "+ Step Data" })), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true, enableImageUpload: true })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true, enableImageUpload: true }))] }));
-    },
-});
-const testCaseBlock = createReactBlockSpec({
-    type: "testCase",
-    content: "inline",
-    propSchema: {
-        textAlignment: defaultProps.textAlignment,
-        textColor: defaultProps.textColor,
-        backgroundColor: defaultProps.backgroundColor,
-        status: {
-            default: "draft",
-            values: Array.from(statusOptions),
-        },
-        reference: {
-            default: "",
-        },
-    },
-}, {
-    render: ({ block, contentRef, editor }) => {
-        const status = block.props.status;
-        const handleStatusChange = (event) => {
-            const nextStatus = event.target.value;
-            editor.updateBlock(block.id, {
-                props: {
-                    status: nextStatus,
-                },
-            });
-        };
-        const handleReferenceChange = (event) => {
-            editor.updateBlock(block.id, {
-                props: {
-                    reference: event.target.value,
-                },
-            });
-        };
-        const style = {
-            textAlign: block.props.textAlignment,
-            color: block.props.textColor === "default"
-                ? undefined
-                : block.props.textColor,
-            backgroundColor: block.props.backgroundColor === "default"
-                ? undefined
-                : block.props.backgroundColor,
-        };
-        return (_jsxs("div", { className: "bn-testcase " + statusClassNames[status], "data-reference": block.props.reference || undefined, style: style, children: [_jsxs("div", { className: "bn-testcase__header", children: [_jsxs("div", { className: "bn-testcase__meta", children: [_jsx("span", { className: "bn-testcase__label", children: "Test Case" }), _jsx("input", { className: "bn-testcase__reference", placeholder: "Reference ID", value: block.props.reference, onChange: handleReferenceChange })] }), _jsxs("label", { className: "bn-testcase__status", children: [_jsx("span", { children: "Status:" }), _jsx("select", { value: status, onChange: handleStatusChange, children: statusOptions.map((option) => (_jsx("option", { value: option, children: statusLabels[option] }, option))) })] })] }), _jsx("div", { className: "bn-testcase__body", ref: contentRef })] }));
-    },
-});
+import { stepBlock } from "./blocks/step";
+import { snippetBlock } from "./blocks/snippet";
+import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 export const customSchema = BlockNoteSchema.create({
     blockSpecs: {
         ...defaultBlockSpecs,
-        testCase: testCaseBlock,
-        testStep: testStepBlock,
+        testStep: stepBlock,
+        snippet: snippetBlock,
     },
 });
 export const __markdownTestUtils = {

package/package/editor/snippetAutocomplete.d.ts

@@ -0,0 +1,28 @@
+export type SnippetSuggestion = {
+    id: string;
+    title: string;
+    body?: string | null;
+    description?: string | null;
+    usageCount?: number | null;
+    isSnippet?: boolean | null;
+};
+export type SnippetJsonApiAttributes = {
+    title?: string | null;
+    body?: string | null;
+    description?: string | null;
+    "usage-count"?: number | string | null;
+};
+export type SnippetJsonApiResource = {
+    id?: string | number | null;
+    type?: string | null;
+    attributes?: SnippetJsonApiAttributes | null;
+};
+export type SnippetJsonApiDocument = {
+    data?: SnippetJsonApiResource[] | null;
+};
+export type SnippetSuggestionsFetcher = () => Promise<SnippetInput> | SnippetInput;
+type SnippetInput = SnippetSuggestion[] | SnippetJsonApiDocument | SnippetJsonApiResource[] | null | undefined;
+export declare function setSnippetFetcher(fetcher: SnippetSuggestionsFetcher | null): void;
+export declare function useSnippetAutocomplete(): SnippetSuggestion[];
+export declare function parseSnippetsFromJsonApi(document: SnippetJsonApiDocument | SnippetJsonApiResource[] | null | undefined): SnippetSuggestion[];
+export {};