@imjp/writenex-astro 0.1.0

package/src/client/components/Editor/ImageDialog.css

@@ -0,0 +1,344 @@
+/**
+ * @fileoverview Styles for Custom Image Dialog
+ *
+ * Styles for the custom image dialog component that replaces
+ * MDXEditor's default image dialog.
+ */
+
+/* ============================================================================
+   DIALOG BACKDROP & CONTAINER
+   ============================================================================ */
+
+.wn-image-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wn-z-dialog);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--wn-backdrop);
+  backdrop-filter: blur(2px);
+}
+
+.wn-image-dialog {
+  width: 100%;
+  max-width: 400px;
+  margin: var(--wn-space-5);
+  background-color: var(--wn-zinc-900);
+  border: 1px solid var(--wn-zinc-700);
+  border-radius: var(--wn-radius-lg);
+  box-shadow:
+    0 20px 25px -5px var(--wn-backdrop-light),
+    0 8px 10px -6px var(--wn-overlay-light-10);
+}
+
+/* ============================================================================
+   DIALOG HEADER
+   ============================================================================ */
+
+.wn-image-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-5) var(--wn-space-5) var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-zinc-800);
+}
+
+.wn-image-dialog-title {
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-100);
+  margin: 0;
+}
+
+.wn-image-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--wn-radius-sm);
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-image-dialog-close:hover {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-100);
+}
+
+/* ============================================================================
+   TABS
+   ============================================================================ */
+
+.wn-image-dialog-tabs {
+  display: flex;
+  margin: var(--wn-space-4) var(--wn-space-5) 0;
+  padding: var(--wn-space-1);
+  background-color: var(--wn-zinc-800);
+  border-radius: var(--wn-radius-md);
+}
+
+.wn-image-dialog-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-3) var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  border-radius: var(--wn-radius-sm);
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-image-dialog-tab:hover {
+  color: var(--wn-zinc-200);
+}
+
+.wn-image-dialog-tab--active {
+  background-color: var(--wn-zinc-700);
+  color: var(--wn-zinc-100);
+  box-shadow: var(--wn-shadow-sm);
+}
+
+/* ============================================================================
+   CONTENT
+   ============================================================================ */
+
+.wn-image-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-4);
+  padding: var(--wn-space-5);
+}
+
+/* ============================================================================
+   DROPZONE
+   ============================================================================ */
+
+.wn-image-dialog-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-7);
+  border: 2px dashed var(--wn-zinc-700);
+  border-radius: var(--wn-radius-lg);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    border-color var(--wn-transition-fast);
+}
+
+.wn-image-dialog-dropzone:hover {
+  background-color: var(--wn-overlay-3);
+  border-color: var(--wn-zinc-600);
+}
+
+.wn-image-dialog-dropzone:focus {
+  outline: 2px solid var(--wn-brand-500);
+  outline-offset: 2px;
+}
+
+.wn-image-dialog-file-input {
+  display: none;
+}
+
+.wn-image-dialog-dropzone-icon {
+  color: var(--wn-zinc-500);
+}
+
+.wn-image-dialog-dropzone-text {
+  font-size: var(--wn-font-base);
+  color: var(--wn-zinc-400);
+  margin: 0;
+}
+
+.wn-image-dialog-file-info {
+  text-align: center;
+}
+
+.wn-image-dialog-file-name {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-100);
+  margin: 0;
+}
+
+.wn-image-dialog-file-size {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-400);
+  margin: var(--wn-space-1) 0 0;
+}
+
+/* ============================================================================
+   FORM FIELDS
+   ============================================================================ */
+
+.wn-image-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-2);
+}
+
+.wn-image-dialog-label {
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-300);
+}
+
+.wn-image-dialog-input {
+  width: 100%;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  font-size: var(--wn-font-base);
+  font-family: inherit;
+  background-color: var(--wn-zinc-800);
+  border: 1px solid var(--wn-zinc-700);
+  border-radius: var(--wn-radius-md);
+  color: var(--wn-zinc-100);
+  transition:
+    border-color var(--wn-transition-fast),
+    box-shadow var(--wn-transition-fast);
+}
+
+.wn-image-dialog-input::placeholder {
+  color: var(--wn-zinc-500);
+}
+
+.wn-image-dialog-input:focus {
+  outline: none;
+  border-color: var(--wn-brand-500);
+  box-shadow: 0 0 0 2px var(--wn-brand-alpha-20);
+}
+
+.wn-image-dialog-input--error {
+  border-color: var(--wn-error-500);
+}
+
+.wn-image-dialog-input--error:focus {
+  border-color: var(--wn-error-500);
+  box-shadow: 0 0 0 2px var(--wn-error-alpha-20);
+}
+
+.wn-image-dialog-error {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-error-500);
+  margin: 0;
+}
+
+/* ============================================================================
+   FOOTER
+   ============================================================================ */
+
+.wn-image-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-4) var(--wn-space-5) var(--wn-space-5);
+  border-top: 1px solid var(--wn-zinc-800);
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-image-dialog {
+  background-color: white;
+  border-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-image-dialog-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-image-dialog-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-image-dialog-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-image-dialog-close:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-image-dialog-tabs {
+  background-color: var(--wn-zinc-100);
+}
+
+.wn-light .wn-image-dialog-tab {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-image-dialog-tab:hover {
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-image-dialog-tab--active {
+  background-color: white;
+  color: var(--wn-zinc-900);
+  box-shadow: var(--wn-shadow-sm);
+}
+
+.wn-light .wn-image-dialog-dropzone {
+  border-color: var(--wn-zinc-300);
+}
+
+.wn-light .wn-image-dialog-dropzone:hover {
+  background-color: var(--wn-zinc-50);
+  border-color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-image-dialog-dropzone-icon {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-image-dialog-dropzone-text {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-image-dialog-file-name {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-image-dialog-file-size {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-image-dialog-label {
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-image-dialog-input {
+  background-color: white;
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-image-dialog-input::placeholder {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-image-dialog-footer {
+  border-top-color: var(--wn-zinc-200);
+}

package/src/client/components/Editor/ImageDialog.tsx

@@ -0,0 +1,367 @@
+/**
+ * @fileoverview Custom Image Dialog Component for @writenex/astro
+ *
+ * This component provides a custom dialog for inserting and editing images
+ * in the MDXEditor. It replaces the default MDXEditor image dialog with
+ * a styled version that matches the Writenex design system.
+ * Includes focus trap for accessibility compliance.
+ *
+ * ## Features:
+ * - Tab interface for switching between upload and URL modes
+ * - Drag-and-drop ready file upload zone
+ * - Alt text and title fields for accessibility
+ * - URL validation with error feedback
+ * - Works with MDXEditor's image plugin system
+ * - Focus trap for keyboard accessibility
+ *
+ * @module @writenex/astro/client/components/Editor/ImageDialog
+ */
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { usePublisher, useCellValue } from "@mdxeditor/editor";
+import {
+  insertImage$,
+  closeImageDialog$,
+  imageDialogState$,
+  saveImage$,
+} from "@mdxeditor/editor";
+import { Image as ImageIcon, Link as LinkIcon, Upload, X } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import "./ImageDialog.css";
+
+/**
+ * Validates if a string is a valid URL
+ */
+function isValidUrl(url: string): boolean {
+  if (!url || url.trim() === "") return false;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Custom Image Dialog component for MDXEditor.
+ *
+ * This component is passed to MDXEditor's imagePlugin as a custom dialog.
+ * It handles both inserting new images and editing existing ones.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Used in MDXEditor plugin configuration
+ * imagePlugin({
+ *   imageUploadHandler: handleUpload,
+ *   imagePreviewHandler: handlePreview,
+ *   ImageDialog: ImageDialog,
+ * })
+ * ```
+ */
+export function ImageDialog(): React.ReactElement {
+  const insertImage = usePublisher(insertImage$);
+  const saveImage = usePublisher(saveImage$);
+  const closeImageDialog = usePublisher(closeImageDialog$);
+  const state = useCellValue(imageDialogState$);
+
+  const [mode, setMode] = useState<"upload" | "url">("upload");
+  const [src, setSrc] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [altText, setAltText] = useState("");
+  const [title, setTitle] = useState("");
+  const [prevType, setPrevType] = useState(state.type);
+  const [isUrlValid, setIsUrlValid] = useState(true);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  // Store the trigger element when dialog opens
+  useEffect(() => {
+    if (state.type !== "inactive") {
+      triggerRef.current = document.activeElement as HTMLElement;
+    }
+  }, [state.type]);
+
+  // Focus trap for accessibility
+  const { containerRef } = useFocusTrap({
+    enabled: state.type !== "inactive",
+    onEscape: closeImageDialog,
+    returnFocusTo: triggerRef.current,
+  });
+
+  // Reset or populate form when state changes
+  if (state.type !== prevType) {
+    setPrevType(state.type);
+    if (state.type === "editing") {
+      setMode(state.initialValues.src ? "url" : "upload");
+      setSrc(state.initialValues.src || "");
+      setAltText(state.initialValues.altText || "");
+      setTitle(state.initialValues.title || "");
+      setFile(null);
+      setIsUrlValid(true);
+    } else if (state.type === "new") {
+      setMode("upload");
+      setSrc("");
+      setAltText("");
+      setTitle("");
+      setFile(null);
+      setIsUrlValid(true);
+    }
+  }
+
+  // Focus first input when dialog opens (useFocusTrap handles escape key)
+  useEffect(() => {
+    if (state.type !== "inactive" && containerRef.current) {
+      const firstInput = containerRef.current.querySelector("input, button");
+      if (firstInput instanceof HTMLElement) {
+        setTimeout(() => firstInput.focus(), 50);
+      }
+    }
+  }, [state.type, containerRef]);
+
+  const handleSrcChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newSrc = e.target.value;
+      setSrc(newSrc);
+      setIsUrlValid(newSrc === "" || isValidUrl(newSrc));
+    },
+    []
+  );
+
+  const handleSave = useCallback(() => {
+    if (mode === "url" && !isValidUrl(src)) {
+      setIsUrlValid(false);
+      return;
+    }
+
+    if (state.type === "editing") {
+      const payload: {
+        altText: string;
+        title: string;
+        file?: FileList;
+        src?: string;
+      } = {
+        altText,
+        title,
+      };
+
+      if (mode === "upload" && file) {
+        const dt = new DataTransfer();
+        dt.items.add(file);
+        payload.file = dt.files;
+      } else if (mode === "url" && src) {
+        payload.src = src;
+      }
+
+      saveImage(payload);
+    } else {
+      if (mode === "upload" && file) {
+        insertImage({ file, altText, title });
+      } else if (mode === "url" && src) {
+        insertImage({ src, altText, title });
+      }
+    }
+    closeImageDialog();
+  }, [
+    mode,
+    src,
+    file,
+    altText,
+    title,
+    state.type,
+    insertImage,
+    saveImage,
+    closeImageDialog,
+  ]);
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files?.[0]) {
+        setFile(e.target.files[0]);
+      }
+    },
+    []
+  );
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        closeImageDialog();
+      }
+    },
+    [closeImageDialog]
+  );
+
+  const isOpen = state.type !== "inactive";
+  const canSave = mode === "upload" ? !!file : !!src && isUrlValid;
+
+  if (!isOpen) return <></>;
+
+  return (
+    <div
+      className="wn-image-dialog-backdrop"
+      onClick={handleBackdropClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="image-dialog-title"
+    >
+      <div className="wn-image-dialog" ref={containerRef}>
+        {/* Header */}
+        <div className="wn-image-dialog-header">
+          <h2 id="image-dialog-title" className="wn-image-dialog-title">
+            {state.type === "editing" ? "Edit Image" : "Insert Image"}
+          </h2>
+          <button
+            className="wn-image-dialog-close"
+            onClick={() => closeImageDialog()}
+            aria-label="Close dialog"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="wn-image-dialog-tabs">
+          <button
+            className={`wn-image-dialog-tab ${mode === "upload" ? "wn-image-dialog-tab--active" : ""}`}
+            onClick={() => setMode("upload")}
+            type="button"
+          >
+            <Upload size={16} />
+            Upload
+          </button>
+          <button
+            className={`wn-image-dialog-tab ${mode === "url" ? "wn-image-dialog-tab--active" : ""}`}
+            onClick={() => setMode("url")}
+            type="button"
+          >
+            <LinkIcon size={16} />
+            URL
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="wn-image-dialog-content">
+          {mode === "upload" ? (
+            <div
+              className="wn-image-dialog-dropzone"
+              onClick={() => fileInputRef.current?.click()}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  fileInputRef.current?.click();
+                }
+              }}
+            >
+              <input
+                type="file"
+                ref={fileInputRef}
+                className="wn-image-dialog-file-input"
+                accept="image/*"
+                onChange={handleFileChange}
+              />
+              {file ? (
+                <div className="wn-image-dialog-file-info">
+                  <p className="wn-image-dialog-file-name">{file.name}</p>
+                  <p className="wn-image-dialog-file-size">
+                    {(file.size / 1024).toFixed(1)} KB
+                  </p>
+                </div>
+              ) : (
+                <>
+                  <ImageIcon
+                    size={32}
+                    className="wn-image-dialog-dropzone-icon"
+                  />
+                  <p className="wn-image-dialog-dropzone-text">
+                    Click to select an image
+                  </p>
+                </>
+              )}
+            </div>
+          ) : (
+            <div className="wn-image-dialog-field">
+              <label
+                className="wn-image-dialog-label"
+                htmlFor="image-url-input"
+              >
+                Image URL
+              </label>
+              <input
+                id="image-url-input"
+                type="text"
+                className={`wn-image-dialog-input ${!isUrlValid ? "wn-image-dialog-input--error" : ""}`}
+                value={src}
+                onChange={handleSrcChange}
+                placeholder="https://example.com/image.png"
+                aria-invalid={!isUrlValid}
+                aria-describedby={!isUrlValid ? "image-url-error" : undefined}
+              />
+              {!isUrlValid && (
+                <p
+                  id="image-url-error"
+                  className="wn-image-dialog-error"
+                  role="alert"
+                >
+                  Please enter a valid image URL
+                </p>
+              )}
+            </div>
+          )}
+
+          <div className="wn-image-dialog-field">
+            <label className="wn-image-dialog-label" htmlFor="image-alt-input">
+              Alt Text
+            </label>
+            <input
+              id="image-alt-input"
+              type="text"
+              className="wn-image-dialog-input"
+              value={altText}
+              onChange={(e) => setAltText(e.target.value)}
+              placeholder="Description for accessibility"
+            />
+          </div>
+
+          <div className="wn-image-dialog-field">
+            <label
+              className="wn-image-dialog-label"
+              htmlFor="image-title-input"
+            >
+              Title (Optional)
+            </label>
+            <input
+              id="image-title-input"
+              type="text"
+              className="wn-image-dialog-input"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Hover text"
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="wn-image-dialog-footer">
+          <button
+            className="wn-btn-secondary"
+            onClick={() => closeImageDialog()}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="wn-btn-primary"
+            onClick={handleSave}
+            disabled={!canSave}
+            type="button"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}