testomatio-editor-blocks 0.1.0 → 0.1.1

package/src/editor/stepAutocomplete.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useState } from "react";
+
+export type StepSuggestion = {
+  id: string;
+  title: string;
+  description?: string | null;
+  kind?: string | null;
+  usageCount?: number | null;
+  commentsCount?: number | null;
+  isSnippet?: boolean | null;
+  labels?: string[];
+  keywords?: string[];
+};
+
+export type StepJsonApiAttributes = {
+  title?: string | null;
+  description?: string | null;
+  kind?: string | null;
+  keywords?: string[] | null;
+  labels?: string[] | null;
+  "usage-count"?: number | string | null;
+  "comments-count"?: number | string | null;
+  "is-snippet"?: boolean | null;
+};
+
+export type StepJsonApiResource = {
+  id?: string | number | null;
+  type?: string | null;
+  attributes?: StepJsonApiAttributes | null;
+};
+
+export type StepJsonApiDocument = {
+  data?: StepJsonApiResource[] | null;
+};
+
+export type StepSuggestionsFetcher = () => Promise<StepInput> | StepInput;
+
+type StepInput = StepSuggestion[] | StepJsonApiDocument | StepJsonApiResource[] | null | undefined;
+
+let globalFetcher: StepSuggestionsFetcher | null = null;
+let cachedSuggestions: StepSuggestion[] = [];
+
+export function setGlobalStepSuggestionsFetcher(fetcher: StepSuggestionsFetcher | null) {
+  globalFetcher = fetcher;
+  cachedSuggestions = [];
+}
+
+export function useStepAutocomplete(): StepSuggestion[] {
+  const [suggestions, setSuggestions] = useState<StepSuggestion[]>(cachedSuggestions);
+
+  useEffect(() => {
+    if (suggestions.length > 0) {
+      return;
+    }
+    if (!globalFetcher) {
+      return;
+    }
+
+    let cancelled = false;
+    Promise.resolve(globalFetcher())
+      .then((result) => normalizeStepSuggestions(result))
+      .then((items) => {
+        if (cancelled) return;
+        cachedSuggestions = items;
+        setSuggestions(items);
+      })
+      .catch((error) => console.error("Failed to fetch step suggestions", error));
+
+    return () => {
+      cancelled = true;
+    };
+  }, [suggestions.length]);
+
+  return suggestions;
+}
+
+export function parseStepsFromJsonApi(
+  document: StepJsonApiDocument | StepJsonApiResource[] | null | undefined,
+): StepSuggestion[] {
+  const resources = Array.isArray(document) ? document : document?.data;
+  if (!Array.isArray(resources) || resources.length === 0) {
+    return [];
+  }
+
+  return resources
+    .map((resource) => normalizeJsonApiResource(resource))
+    .filter((value): value is StepSuggestion => Boolean(value));
+}
+
+function normalizeStepSuggestions(steps?: StepInput): StepSuggestion[] {
+  if (!steps) return [];
+
+  if (Array.isArray(steps)) {
+    if (steps.length === 0) return [];
+    if (isStepSuggestionArray(steps)) return steps;
+    return parseStepsFromJsonApi(steps);
+  }
+
+  return parseStepsFromJsonApi(steps);
+}
+
+function normalizeJsonApiResource(resource: StepJsonApiResource | null | undefined): StepSuggestion | null {
+  if (!resource) return null;
+  const attrs = resource.attributes;
+  const id = resource.id;
+  const title = attrs?.title ?? "";
+  if (!id || !title) return null;
+
+  return {
+    id: String(id),
+    title: String(title),
+    description: attrs?.description ?? null,
+    kind: attrs?.kind ?? null,
+    usageCount: coerceNumber(attrs?.["usage-count"]),
+    commentsCount: coerceNumber(attrs?.["comments-count"]),
+    isSnippet: attrs?.["is-snippet"] ?? null,
+    labels: attrs?.labels ?? [],
+    keywords: attrs?.keywords ?? [],
+  };
+}
+
+function isStepSuggestionArray(value: StepInput): value is StepSuggestion[] {
+  return Array.isArray(value) && value.length > 0 && typeof (value[0] as StepSuggestion | any)?.title === "string";
+}
+
+function coerceNumber(value: string | number | null | undefined): number | null {
+  if (value === null || value === undefined) return null;
+  const num = Number(value);
+  return Number.isFinite(num) ? num : null;
+}

package/src/editor/stepImageUpload.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export type StepImageUploadHandler = (image: Blob) => Promise<{ url: string }>;
+
+let globalUploadHandler: StepImageUploadHandler | null = null;
+
+export function setGlobalStepImageUploadHandler(handler: StepImageUploadHandler | null) {
+  globalUploadHandler = handler;
+}
+
+export function useStepImageUpload(): StepImageUploadHandler | null {
+  const [handler, setHandler] = useState<StepImageUploadHandler | null>(globalUploadHandler);
+
+  useEffect(() => {
+    setHandler(globalUploadHandler);
+  }, []);
+
+  return handler;
+}

package/src/editor/styles.css

@@ -140,6 +140,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  position: relative;
 }
 
 .bn-step-field__top {
@@ -150,6 +151,9 @@
 }
 
 .bn-step-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -216,6 +220,54 @@
   pointer-events: none;
 }
 
+.bn-step-suggestions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  background: rgba(255, 255, 255, 0.98);
+  border-radius: 0.65rem;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.16);
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  z-index: 5;
+  max-height: 12rem;
+  overflow-y: auto;
+}
+
+.bn-step-suggestion {
+  border: none;
+  background: transparent;
+  border-radius: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.bn-step-suggestion:hover,
+.bn-step-suggestion--active {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.bn-step-suggestion__title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.bn-step-suggestion__meta {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(15, 23, 42, 0.65);
+}
+
 .bn-inline-image {
   display: block;
   max-width: 100%;

package/src/index.ts

@@ -12,4 +12,19 @@ export {
   type CustomPartialBlock,
 } from "./editor/customMarkdownConverter";
 
+export {
+  useStepAutocomplete,
+  parseStepsFromJsonApi,
+  setGlobalStepSuggestionsFetcher,
+  type StepSuggestion,
+  type StepJsonApiDocument,
+  type StepJsonApiResource,
+} from "./editor/stepAutocomplete";
+
+export {
+  useStepImageUpload,
+  setGlobalStepImageUploadHandler,
+  type StepImageUploadHandler,
+} from "./editor/stepImageUpload";
+
 export const testomatioEditorClassName = "markdown testomatio-editor";