@imjp/writenex-astro 0.1.0

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

@@ -0,0 +1,326 @@
+/**
+ * @fileoverview Styles for Custom Link Dialog
+ *
+ * Styles for the custom link dialog component that replaces
+ * MDXEditor's default link dialog. Includes both preview popover
+ * and edit modal styles.
+ */
+
+/* ============================================================================
+   LINK PREVIEW POPOVER
+   ============================================================================ */
+
+.wn-link-preview {
+  position: fixed;
+  z-index: var(--wn-z-dialog);
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-1);
+  padding: var(--wn-space-2);
+  background-color: var(--wn-zinc-900);
+  border: 1px solid var(--wn-zinc-700);
+  border-radius: var(--wn-radius-lg);
+  box-shadow:
+    0 10px 15px -3px var(--wn-backdrop-light),
+    0 4px 6px -4px var(--wn-overlay-light-10);
+  animation: wn-fade-in 0.1s ease-out;
+}
+
+@keyframes wn-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.wn-link-preview-url {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 var(--wn-space-3);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-brand-400);
+  text-decoration: none;
+}
+
+.wn-link-preview-url:hover {
+  text-decoration: underline;
+}
+
+.wn-link-preview-divider {
+  width: 1px;
+  height: var(--wn-space-5);
+  margin: 0 var(--wn-space-1);
+  background-color: var(--wn-zinc-700);
+}
+
+.wn-link-preview-btn {
+  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-link-preview-btn:hover {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-100);
+}
+
+.wn-link-preview-btn--danger:hover {
+  background-color: var(--wn-error-alpha-15);
+  color: var(--wn-error-400);
+}
+
+/* ============================================================================
+   LINK DIALOG MODAL
+   ============================================================================ */
+
+.wn-link-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-link-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-link-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-link-dialog-title {
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-100);
+  margin: 0;
+}
+
+.wn-link-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-link-dialog-close:hover {
+  background-color: var(--wn-zinc-800);
+  color: var(--wn-zinc-100);
+}
+
+/* ============================================================================
+   DIALOG CONTENT
+   ============================================================================ */
+
+.wn-link-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-5);
+  padding: var(--wn-space-5);
+}
+
+/* ============================================================================
+   FORM FIELDS
+   ============================================================================ */
+
+.wn-link-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-2);
+}
+
+.wn-link-dialog-label {
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-300);
+}
+
+.wn-link-dialog-input-wrapper {
+  position: relative;
+}
+
+.wn-link-dialog-input-icon {
+  position: absolute;
+  top: 50%;
+  left: var(--wn-space-4);
+  transform: translateY(-50%);
+  color: var(--wn-zinc-500);
+  pointer-events: none;
+}
+
+.wn-link-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-link-dialog-input--with-icon {
+  padding-left: 2.25rem;
+}
+
+.wn-link-dialog-input::placeholder {
+  color: var(--wn-zinc-500);
+}
+
+.wn-link-dialog-input:focus {
+  outline: none;
+  border-color: var(--wn-brand-500);
+  box-shadow: 0 0 0 2px var(--wn-brand-alpha-20);
+}
+
+.wn-link-dialog-input--error {
+  border-color: var(--wn-error-500);
+}
+
+.wn-link-dialog-input--error:focus {
+  border-color: var(--wn-error-500);
+  box-shadow: 0 0 0 2px var(--wn-error-alpha-20);
+}
+
+.wn-link-dialog-error {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-error-500);
+  margin: 0;
+}
+
+/* ============================================================================
+   DIALOG FOOTER
+   ============================================================================ */
+
+.wn-link-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-link-preview {
+  background-color: white;
+  border-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-link-preview-url {
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-link-preview-divider {
+  background-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-link-preview-btn {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-link-preview-btn:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-link-preview-btn--danger:hover {
+  background-color: var(--wn-error-alpha-10);
+  color: var(--wn-error-600);
+}
+
+.wn-light .wn-link-dialog {
+  background-color: white;
+  border-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-link-dialog-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-link-dialog-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-link-dialog-close {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-link-dialog-close:hover {
+  background-color: var(--wn-zinc-100);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-link-dialog-label {
+  color: var(--wn-zinc-700);
+}
+
+.wn-light .wn-link-dialog-input-icon {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-link-dialog-input {
+  background-color: white;
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-link-dialog-input::placeholder {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-link-dialog-footer {
+  border-top-color: var(--wn-zinc-200);
+}

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

@@ -0,0 +1,332 @@
+/**
+ * @fileoverview Custom Link Dialog Component for @writenex/astro
+ *
+ * This component provides a custom dialog for inserting and editing links
+ * in the MDXEditor. It has two modes:
+ * 1. Preview mode: A floating popover showing the link URL with quick actions
+ * 2. Edit mode: A modal dialog for inserting new links or editing existing ones
+ *
+ * ## Features:
+ * - Floating preview popover for existing links (click to see URL)
+ * - Copy, edit, and remove actions in preview mode
+ * - Modal dialog for new/edit with URL validation
+ * - Optional title field for hover text
+ * - Works with MDXEditor's link plugin system
+ * - Focus trap for keyboard accessibility
+ *
+ * @module @writenex/astro/client/components/Editor/LinkDialog
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { usePublisher, useCellValue } from "@mdxeditor/editor";
+import {
+  linkDialogState$,
+  cancelLinkEdit$,
+  updateLink$,
+  switchFromPreviewToLinkEdit$,
+  removeLink$,
+} from "@mdxeditor/editor";
+import { Link as LinkIcon, Trash2, Edit2, Copy, X } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import "./LinkDialog.css";
+
+/**
+ * Link dialog state when showing a preview of an existing link.
+ */
+interface LinkDialogStatePreview {
+  type: "preview";
+  url: string;
+  title: string;
+  rectangle: DOMRect;
+}
+
+/**
+ * Link dialog state when editing or inserting a link.
+ */
+interface LinkDialogStateEdit {
+  type: "edit";
+  url: string;
+  title: string;
+  rectangle: DOMRect;
+}
+
+/**
+ * Link dialog state when the dialog is closed.
+ */
+interface LinkDialogStateInactive {
+  type: "inactive";
+}
+
+/**
+ * Union type for all possible link dialog states.
+ */
+type LinkDialogState =
+  | LinkDialogStatePreview
+  | LinkDialogStateEdit
+  | LinkDialogStateInactive;
+
+/**
+ * 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 Link Dialog component for MDXEditor.
+ *
+ * This component is passed to MDXEditor's linkDialogPlugin as a custom dialog.
+ * It renders differently based on state:
+ *
+ * - Preview: Floating popover positioned near the link with URL preview,
+ *   copy button, edit button, and remove button
+ * - Edit: Modal dialog with URL input, title input, and save/cancel buttons
+ * - Inactive: Returns null (nothing rendered)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Used in MDXEditor plugin configuration
+ * linkDialogPlugin({
+ *   LinkDialog: LinkDialog,
+ * })
+ * ```
+ */
+export function LinkDialog(): React.ReactElement {
+  const state = useCellValue(linkDialogState$) as LinkDialogState;
+  const cancelLinkEdit = usePublisher(cancelLinkEdit$);
+  const updateLink = usePublisher(updateLink$);
+  const switchFromPreviewToLinkEdit = usePublisher(
+    switchFromPreviewToLinkEdit$
+  );
+  const removeLink = usePublisher(removeLink$);
+
+  const [url, setUrl] = useState("");
+  const [title, setTitle] = useState("");
+  const [prevType, setPrevType] = useState(state.type);
+  const [isUrlValid, setIsUrlValid] = useState(true);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  // Store the trigger element when dialog opens in edit mode
+  useEffect(() => {
+    if (state.type === "edit") {
+      triggerRef.current = document.activeElement as HTMLElement;
+    }
+  }, [state.type]);
+
+  // Focus trap for accessibility (only for edit mode, not preview)
+  const { containerRef } = useFocusTrap({
+    enabled: state.type === "edit",
+    onEscape: cancelLinkEdit,
+    returnFocusTo: triggerRef.current,
+  });
+
+  // Reset or populate form when state changes
+  if (state.type !== prevType) {
+    setPrevType(state.type);
+    if (state.type === "edit") {
+      setUrl(state.url);
+      setTitle(state.title);
+      setIsUrlValid(true);
+      setIsEditMode(!!state.url);
+    }
+  }
+
+  // Focus first input when edit dialog opens (useFocusTrap handles escape key)
+  useEffect(() => {
+    if (state.type === "edit" && containerRef.current) {
+      const firstInput = containerRef.current.querySelector("input");
+      if (firstInput) {
+        setTimeout(() => firstInput.focus(), 50);
+      }
+    }
+  }, [state.type, containerRef]);
+
+  const handleUrlChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newUrl = e.target.value;
+      setUrl(newUrl);
+      setIsUrlValid(newUrl === "" || isValidUrl(newUrl));
+    },
+    []
+  );
+
+  const handleSave = useCallback(() => {
+    if (!isValidUrl(url)) {
+      setIsUrlValid(false);
+      return;
+    }
+    updateLink({ url, title, text: undefined });
+  }, [updateLink, url, title]);
+
+  const handleCopy = useCallback(() => {
+    if (state.type === "preview") {
+      navigator.clipboard.writeText(state.url).then(() => {
+        setCopySuccess(true);
+        setTimeout(() => setCopySuccess(false), 1500);
+      });
+    }
+  }, [state]);
+
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        cancelLinkEdit();
+      }
+    },
+    [cancelLinkEdit]
+  );
+
+  if (state.type === "inactive") {
+    return <></>;
+  }
+
+  // PREVIEW MODE: Render as a floating popover
+  if (state.type === "preview") {
+    return (
+      <div
+        className="wn-link-preview"
+        style={{
+          top: (state.rectangle?.top ?? 0) + (state.rectangle?.height ?? 0) + 8,
+          left: state.rectangle?.left ?? 0,
+        }}
+      >
+        <a
+          href={state.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="wn-link-preview-url"
+          title={state.url}
+        >
+          {state.url}
+        </a>
+
+        <div className="wn-link-preview-divider" />
+
+        <button
+          onClick={handleCopy}
+          className="wn-link-preview-btn"
+          title={copySuccess ? "Copied!" : "Copy URL"}
+        >
+          <Copy size={16} />
+        </button>
+
+        <button
+          onClick={() => switchFromPreviewToLinkEdit()}
+          className="wn-link-preview-btn"
+          title="Edit Link"
+        >
+          <Edit2 size={16} />
+        </button>
+
+        <button
+          onClick={() => removeLink()}
+          className="wn-link-preview-btn wn-link-preview-btn--danger"
+          title="Remove Link"
+        >
+          <Trash2 size={16} />
+        </button>
+      </div>
+    );
+  }
+
+  // EDIT MODE: Render as a Modal Dialog
+  return (
+    <div
+      className="wn-link-dialog-backdrop"
+      onClick={handleBackdropClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="link-dialog-title"
+    >
+      <div className="wn-link-dialog" ref={containerRef}>
+        {/* Header */}
+        <div className="wn-link-dialog-header">
+          <h2 id="link-dialog-title" className="wn-link-dialog-title">
+            {isEditMode ? "Edit Link" : "Insert Link"}
+          </h2>
+          <button
+            className="wn-link-dialog-close"
+            onClick={() => cancelLinkEdit()}
+            aria-label="Close dialog"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="wn-link-dialog-content">
+          <div className="wn-link-dialog-field">
+            <label className="wn-link-dialog-label" htmlFor="link-url-input">
+              URL
+            </label>
+            <div className="wn-link-dialog-input-wrapper">
+              <LinkIcon size={16} className="wn-link-dialog-input-icon" />
+              <input
+                id="link-url-input"
+                type="text"
+                className={`wn-link-dialog-input wn-link-dialog-input--with-icon ${!isUrlValid ? "wn-link-dialog-input--error" : ""}`}
+                value={url}
+                onChange={handleUrlChange}
+                placeholder="https://example.com"
+                aria-invalid={!isUrlValid}
+                aria-describedby={!isUrlValid ? "link-url-error" : undefined}
+              />
+            </div>
+            {!isUrlValid && (
+              <p
+                id="link-url-error"
+                className="wn-link-dialog-error"
+                role="alert"
+              >
+                Please enter a valid URL (e.g. https://example.com)
+              </p>
+            )}
+          </div>
+
+          <div className="wn-link-dialog-field">
+            <label className="wn-link-dialog-label" htmlFor="link-title-input">
+              Title (Optional)
+            </label>
+            <input
+              id="link-title-input"
+              type="text"
+              className="wn-link-dialog-input"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="Hover text"
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="wn-link-dialog-footer">
+          <button
+            className="wn-btn-secondary"
+            onClick={() => cancelLinkEdit()}
+            type="button"
+          >
+            Cancel
+          </button>
+          <button
+            className="wn-btn-primary"
+            onClick={handleSave}
+            disabled={!url || !isUrlValid}
+            type="button"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/Editor/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @fileoverview Editor component exports
+ * @module @writenex/astro/client/components/Editor
+ */
+
+export { Editor, EditorLoading, EditorEmpty } from "./Editor";