testomatio-editor-blocks 0.1.1 → 0.2.0

package/src/editor/blocks/markdown.ts

@@ -0,0 +1,199 @@
+const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
+
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+type InlineSegment = {
+  text: string;
+  styles: {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+  };
+};
+
+function restoreEscapes(text: string): string {
+  return text.replace(/\uE000/g, "\\");
+}
+
+function parseInlineMarkdown(text: string): InlineSegment[] {
+  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: InlineSegment[]): string {
+  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: string): string {
+  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: string): string {
+  return text.replace(MARKDOWN_ESCAPE_REGEX, "\\$1");
+}
+
+export function normalizePlainText(text: string): string {
+  return text.replace(/\s+/g, " ").trim().toLowerCase();
+}
+
+function fallbackHtmlToMarkdown(html: string): string {
+  if (!html) {
+    return "";
+  }
+
+  let result = html;
+
+  result = result.replace(/<img[^>]*>/gi, (match) => {
+    const src = match.match(/src="([^"]*)"/i)?.[1] ?? "";
+    const alt = match.match(/alt="([^"]*)"/i)?.[1] ?? "";
+    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: string): string {
+  if (typeof document === "undefined") {
+    return fallbackHtmlToMarkdown(html);
+  }
+
+  const temp = document.createElement("div");
+  temp.innerHTML = html;
+
+  const traverse = (node: Node): string => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent ?? "";
+      return escapeMarkdownText(text);
+    }
+
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return "";
+    }
+
+    const element = node as HTMLElement;
+    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 = element.getAttribute("src") ?? "";
+        const alt = element.getAttribute("alt") ?? "";
+        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/src/editor/blocks/snippet.tsx

@@ -0,0 +1,109 @@
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback } from "react";
+import { StepField } from "./stepField";
+import { useSnippetAutocomplete, type SnippetSuggestion } from "../snippetAutocomplete";
+import type { StepSuggestion } from "../stepAutocomplete";
+
+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 as string) || "";
+      const snippetData = (block.props.snippetData as string) || "";
+      const snippetSuggestions = useSnippetAutocomplete();
+
+      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 handleSnippetSelect = useCallback(
+        (suggestion: SnippetSuggestion | StepSuggestion) => {
+          const rawBody = (suggestion as SnippetSuggestion).body ?? "";
+          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 (
+        <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}
+          />
+          <StepField
+            label="Snippet Data"
+            value={snippetData}
+            placeholder="Add optional data or assets for the snippet"
+            onChange={handleSnippetDataChange}
+            multiline
+            fieldName="snippet-data"
+            enableImageUpload
+          />
+        </div>
+      );
+    },
+  },
+);

package/src/editor/blocks/step.tsx

@@ -0,0 +1,175 @@
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback, useEffect, useState } from "react";
+import { StepField } from "./stepField";
+import { useStepImageUpload } from "../stepImageUpload";
+import type { StepSuggestion } from "../stepAutocomplete";
+
+export const stepBlock = createReactBlockSpec(
+  {
+    type: "testStep",
+    content: "none",
+    propSchema: {
+      stepTitle: {
+        default: "",
+      },
+      stepData: {
+        default: "",
+      },
+      expectedResult: {
+        default: "",
+      },
+    },
+  },
+  {
+    render: ({ block, editor }) => {
+      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 [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: string) => {
+          if (next === stepTitle) {
+            return;
+          }
+
+          editor.updateBlock(block.id, {
+            props: {
+              stepTitle: next,
+            },
+          });
+        },
+        [editor, block.id, stepTitle],
+      );
+
+      const handleStepDataChange = useCallback(
+        (next: string) => {
+          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: string) => {
+          if (next === expectedResult) {
+            return;
+          }
+
+          editor.updateBlock(block.id, {
+            props: {
+              expectedResult: next,
+            },
+          });
+        },
+        [editor, block.id, expectedResult],
+      );
+
+      return (
+        <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"
+            suggestionFilter={(suggestion) => (suggestion as StepSuggestion).isSnippet !== true}
+            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) => {
+              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 && (
+            <StepField
+              label="Step Data"
+              value={stepData}
+              placeholder="Provide additional data about the step"
+              onChange={handleStepDataChange}
+              autoFocus={shouldFocusDataField}
+              multiline
+              enableImageUpload
+              showFormattingButtons
+              showImageButton
+            />
+          )}
+          {showExpectedField && (
+            <StepField
+              label="Expected Result"
+              value={expectedResult}
+              placeholder="What should happen?"
+              onChange={handleExpectedChange}
+              multiline
+              enableImageUpload
+              showFormattingButtons
+              showImageButton
+            />
+          )}
+        </div>
+      );
+    },
+  },
+);