@nordmanai/nif 0.2.3 → 0.2.4

package/registry/ui/components/nm-textarea/nm-textarea.tsx

@@ -1,6 +1,420 @@
-import type { ComponentProps } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
 import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmProse } from '../nm-prose/nm-prose.tsx';
+import { NmSegmented } from '../nm-segmented/nm-segmented.tsx';
+import { createLogger } from '../../kit-logger.ts';
 
-export function NmTextarea({ className, ...props }: ComponentProps<'textarea'>) {
-  return <textarea data-slot="textarea" className={nmClass('nm-textarea', className)} {...props} />;
+const logger = createLogger('interface-nm-textarea');
+
+export type NmTextareaVariant = 'default' | 'panel';
+
+export type NmTextareaProps = ComponentProps<'textarea'> & {
+  variant?: NmTextareaVariant;
+  openInPanel?: boolean;
+  panelTitle?: string;
+  panelButtonLabel?: string;
+  panelDefaultTab?: 'code' | 'preview';
+  renderMarkdown?: (markdown: string) => ReactNode;
+};
+
+function renderInline(text: string): ReactNode[] {
+  const parts: ReactNode[] = [];
+  const regex = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    if (token.startsWith('**') && token.endsWith('**')) {
+      parts.push(<strong key={match.index}>{token.slice(2, -2)}</strong>);
+    } else if (token.startsWith('*') && token.endsWith('*')) {
+      parts.push(<em key={match.index}>{token.slice(1, -1)}</em>);
+    } else if (token.startsWith('`') && token.endsWith('`')) {
+      parts.push(<code key={match.index}>{token.slice(1, -1)}</code>);
+    } else if (token.startsWith('[') && token.includes('](')) {
+      const closeBracket = token.indexOf('](');
+      const label = token.slice(1, closeBracket);
+      const url = token.slice(closeBracket + 2, -1);
+      parts.push(
+        <a key={match.index} href={url} target="_blank" rel="noreferrer">
+          {label}
+        </a>,
+      );
+    }
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+  return parts.length > 0 ? parts : [text];
+}
+
+function parseMarkdown(md: string): ReactNode {
+  if (!md.trim()) {
+    return <p className="nm-textarea-panel__empty">Nothing to preview</p>;
+  }
+
+  const lines = md.split('\n');
+  const nodes: ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (line.startsWith('```')) {
+      const codeLines: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+      nodes.push(
+        <pre key={`code-${i}`}>
+          <code>{codeLines.join('\n')}</code>
+        </pre>,
+      );
+      continue;
+    }
+
+    if (line.startsWith('#### ')) {
+      nodes.push(<h4 key={`h4-${i}`}>{renderInline(line.slice(5))}</h4>);
+      i++;
+      continue;
+    }
+    if (line.startsWith('### ')) {
+      nodes.push(<h3 key={`h3-${i}`}>{renderInline(line.slice(4))}</h3>);
+      i++;
+      continue;
+    }
+    if (line.startsWith('## ')) {
+      nodes.push(<h2 key={`h2-${i}`}>{renderInline(line.slice(3))}</h2>);
+      i++;
+      continue;
+    }
+    if (line.startsWith('# ')) {
+      nodes.push(<h1 key={`h1-${i}`}>{renderInline(line.slice(2))}</h1>);
+      i++;
+      continue;
+    }
+
+    if (/^(\*\*\*|---|___)$/.test(line.trim())) {
+      nodes.push(<hr key={`hr-${i}`} />);
+      i++;
+      continue;
+    }
+
+    if (line.startsWith('> ')) {
+      const quoteLines: string[] = [line.slice(2)];
+      i++;
+      while (i < lines.length && lines[i].startsWith('> ')) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      nodes.push(
+        <blockquote key={`quote-${i}`}>
+          {quoteLines.map((ql, idx) => (
+            <p key={idx}>{renderInline(ql)}</p>
+          ))}
+        </blockquote>,
+      );
+      continue;
+    }
+
+    if (/^[-*]\s+/.test(line)) {
+      const items: string[] = [line.replace(/^[-*]\s+/, '')];
+      i++;
+      while (i < lines.length && /^[-*]\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*]\s+/, ''));
+        i++;
+      }
+      nodes.push(
+        <ul key={`ul-${i}`}>
+          {items.map((item, idx) => (
+            <li key={idx}>{renderInline(item)}</li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+
+    if (/^\d+\.\s+/.test(line)) {
+      const items: string[] = [line.replace(/^\d+\.\s+/, '')];
+      i++;
+      while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+\.\s+/, ''));
+        i++;
+      }
+      nodes.push(
+        <ol key={`ol-${i}`}>
+          {items.map((item, idx) => (
+            <li key={idx}>{renderInline(item)}</li>
+          ))}
+        </ol>,
+      );
+      continue;
+    }
+
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+
+    const paraLines: string[] = [line];
+    i++;
+    while (
+      i < lines.length &&
+      lines[i].trim() &&
+      !lines[i].startsWith('#') &&
+      !lines[i].startsWith('```') &&
+      !lines[i].startsWith('> ') &&
+      !/^[-*]\s+/.test(lines[i]) &&
+      !/^\d+\.\s+/.test(lines[i]) &&
+      !/^(\*\*\*|---|___)$/.test(lines[i].trim())
+    ) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    nodes.push(<p key={`p-${i}`}>{renderInline(paraLines.join(' '))}</p>);
+  }
+
+  return nodes;
+}
+
+const PANEL_TABS = [
+  { id: 'code', label: 'Code', icon: 'code' as const },
+  { id: 'preview', label: 'Preview', icon: 'presentation' as const },
+] as const;
+
+export const NmTextarea = forwardRef<HTMLTextAreaElement, NmTextareaProps>(
+  function NmTextarea(
+    {
+      className,
+      variant = 'default',
+      openInPanel = false,
+      panelTitle,
+      panelButtonLabel = 'Open in panel',
+      panelDefaultTab = 'code',
+      renderMarkdown,
+      value,
+      defaultValue,
+      onChange,
+      ...props
+    },
+    forwardedRef,
+  ) {
+    const isPanelEnabled = variant === 'panel' || openInPanel;
+    const [panelOpen, setPanelOpen] = useState(false);
+    const [tab, setTab] = useState<'code' | 'preview'>(panelDefaultTab);
+    const [copied, setCopied] = useState(false);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const internalTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => String(defaultValue ?? ''));
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value) : uncontrolledValue;
+
+    const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      if (!isControlled) {
+        setUncontrolledValue(event.target.value);
+      }
+      onChange?.(event);
+    };
+
+    const handlePanelTextChange = (nextText: string) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextText);
+      }
+      if (internalTextareaRef.current) {
+        internalTextareaRef.current.value = nextText;
+      }
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: nextText, name: props.name },
+          currentTarget: { value: nextText, name: props.name },
+        } as ChangeEvent<HTMLTextAreaElement>;
+        onChange(syntheticEvent);
+      }
+    };
+
+    const handleCopy = () => {
+      if (typeof navigator !== 'undefined' && navigator.clipboard) {
+        void navigator.clipboard.writeText(currentValue);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }
+    };
+
+    const handleClose = useCallback(() => {
+      setPanelOpen(false);
+      triggerRef.current?.focus();
+    }, []);
+
+    useEffect(() => {
+      if (!panelOpen) return;
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          handleClose();
+        }
+      };
+      window.addEventListener('keydown', onKeyDown);
+      return () => window.removeEventListener('keydown', onKeyDown);
+    }, [panelOpen, handleClose]);
+
+    const titleId = useId();
+    const lineCount = currentValue ? currentValue.split('\n').length : 0;
+    const charCount = currentValue.length;
+
+    const textareaElement = (
+      <textarea
+        className={nmClass('nm-textarea', className)}
+        ref={(node) => {
+          internalTextareaRef.current = node;
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+          } else if (forwardedRef) {
+            forwardedRef.current = node;
+          }
+        }}
+        data-slot="textarea"
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleTextareaChange}
+        {...props}
+      />
+    );
+
+    if (!isPanelEnabled) {
+      return textareaElement;
+    }
+
+    const panelContent = panelOpen && typeof document !== 'undefined' ? (
+      createPortal(
+        <>
+          <div
+            className="nm-textarea-panel__backdrop"
+            onClick={handleClose}
+            aria-hidden="true"
+          />
+          <aside
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={panelTitle ? titleId : undefined}
+            aria-label={panelTitle ? undefined : 'Markdown Editor'}
+            className="nm-textarea-panel"
+          >
+            <header className="nm-textarea-panel__header">
+              <div className="nm-textarea-panel__title-group">
+                {panelTitle ? (
+                  <h3 id={titleId} className="nm-textarea-panel__title">
+                    {panelTitle}
+                  </h3>
+                ) : null}
+                <NmSegmented
+                  label="Editor view"
+                  tone="pills"
+                  items={PANEL_TABS}
+                  active={tab}
+                  onSelect={(next) => setTab(next as 'code' | 'preview')}
+                />
+              </div>
+              <div className="nm-textarea-panel__actions">
+                <button
+                  type="button"
+                  className="nm-textarea-panel__action-btn"
+                  aria-label={copied ? 'Copied' : 'Copy markdown'}
+                  title={copied ? 'Copied' : 'Copy markdown'}
+                  onClick={handleCopy}
+                >
+                  <NmIcon id={copied ? 'check' : 'copy'} />
+                </button>
+                <button
+                  type="button"
+                  className="nm-textarea-panel__action-btn"
+                  aria-label="Close panel"
+                  title="Close panel"
+                  onClick={handleClose}
+                >
+                  <NmIcon id="x" />
+                </button>
+              </div>
+            </header>
+
+            <div className="nm-textarea-panel__body">
+              {tab === 'code' ? (
+                <textarea
+                  className="nm-textarea-panel__editor"
+                  value={currentValue}
+                  placeholder={props.placeholder ?? 'Enter markdown content...'}
+                  aria-label="Markdown source"
+                  autoFocus
+                  onChange={(e) => handlePanelTextChange(e.target.value)}
+                />
+              ) : (
+                <div className="nm-textarea-panel__preview">
+                  <NmProse>
+                    {renderMarkdown ? renderMarkdown(currentValue) : parseMarkdown(currentValue)}
+                  </NmProse>
+                </div>
+              )}
+            </div>
+
+            <footer className="nm-textarea-panel__footer">
+              <span>
+                {lineCount} {lineCount === 1 ? 'line' : 'lines'} · {charCount} characters
+              </span>
+              <button
+                type="button"
+                className="nm-textarea-panel__done"
+                onClick={handleClose}
+              >
+                Done
+              </button>
+            </footer>
+          </aside>
+        </>,
+        document.body,
+      )
+    ) : null;
+
+    logger.debug('render', variant, { panelOpen });
+
+    return (
+      <div className="nm-textarea-wrap">
+        {textareaElement}
+        <button
+          ref={triggerRef}
+          type="button"
+          className="nm-textarea__panel-trigger"
+          aria-label={panelButtonLabel}
+          aria-expanded={panelOpen}
+          title={panelButtonLabel}
+          onClick={() => setPanelOpen(true)}
+        >
+          <NmIcon id="panel" />
+        </button>
+        {panelContent}
+      </div>
+    );
+  },
+);
+
+export function NmTextareaPanel(props: NmTextareaProps) {
+  return <NmTextarea variant="panel" {...props} />;
 }