leepi 0.0.0 → 0.0.2

package/src/react/code-block-popover.tsx

@@ -0,0 +1,387 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+  type ReactNode,
+  type JSX,
+} from "react";
+import { Popover } from "@base-ui/react/popover";
+import { Form } from "@base-ui/react/form";
+import { Field } from "@base-ui/react/field";
+import { useRender, type useRender as UseRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useEditorContext, useStateField, useVirtualAnchor } from "./context";
+import { popoverField, closePopover } from "../core/popover";
+import type { CodeBlockRequest } from "../core/plugins/code-block";
+import { applyCodeBlock } from "../core/commands";
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface CodeBlockPopoverContextValue {
+  lang: string;
+  setLang: (lang: string) => void;
+  filename: string;
+  setFilename: (filename: string) => void;
+  onClose: () => void;
+}
+
+const CodeBlockPopoverCtx = createContext<CodeBlockPopoverContextValue | null>(null);
+
+function useCodeBlockPopoverCtx() {
+  const ctx = useContext(CodeBlockPopoverCtx);
+  if (!ctx) {
+    throw new Error(
+      "leepi: CodeBlockPopover sub-components must be used inside CodeBlockPopover.Root",
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+interface LanguageSelectProps extends UseRender.ComponentProps<"select"> {
+  autoFocus?: boolean;
+  label?: ReactNode;
+  children?: ReactNode;
+}
+
+function LanguageSelect({
+  autoFocus,
+  render,
+  label,
+  children,
+  ...restProps
+}: LanguageSelectProps): JSX.Element {
+  const { lang, setLang } = useCodeBlockPopoverCtx();
+  const id = useId();
+
+  const element = useRender({
+    render,
+    defaultTagName: "select",
+    props: mergeProps<"select">(
+      {
+        id,
+        value: lang,
+        onChange: (e: React.ChangeEvent<HTMLSelectElement>) => setLang(e.target.value),
+        autoFocus,
+        className: "lp-popover-select",
+      },
+      restProps,
+    ),
+  });
+
+  const defaultSelect = !render ? (
+    <select
+      id={id}
+      value={lang}
+      onChange={(e) => setLang(e.target.value)}
+      autoFocus={autoFocus}
+      className="lp-popover-select"
+      {...restProps}
+    >
+      {children}
+    </select>
+  ) : null;
+
+  return (
+    <Field.Root className="lp-popover-field">
+      <Field.Label htmlFor={id} className="lp-popover-label">
+        {label}
+      </Field.Label>
+      {render ? element : defaultSelect}
+    </Field.Root>
+  );
+}
+
+interface LanguageInputProps extends UseRender.ComponentProps<"input"> {
+  autoFocus?: boolean;
+  placeholder?: string;
+  children?: ReactNode;
+}
+
+function LanguageInput({
+  autoFocus,
+  placeholder,
+  render,
+  children,
+  ...restProps
+}: LanguageInputProps): JSX.Element {
+  const { lang, setLang } = useCodeBlockPopoverCtx();
+  const id = useId();
+
+  const element = useRender({
+    render,
+    defaultTagName: "input",
+    props: mergeProps<"input">(
+      {
+        id,
+        type: "text",
+        value: lang,
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => setLang(e.target.value),
+        autoFocus,
+        placeholder,
+        className: "lp-popover-input",
+      },
+      restProps,
+    ),
+  });
+
+  return (
+    <Field.Root className="lp-popover-field">
+      <Field.Label htmlFor={id} className="lp-popover-label">
+        {children}
+      </Field.Label>
+      {element}
+    </Field.Root>
+  );
+}
+
+interface FilenameInputProps extends UseRender.ComponentProps<"input"> {
+  placeholder?: string;
+  children?: ReactNode;
+}
+
+function FilenameInput({
+  placeholder,
+  render,
+  children,
+  ...restProps
+}: FilenameInputProps): JSX.Element {
+  const { filename, setFilename } = useCodeBlockPopoverCtx();
+  const id = useId();
+
+  const element = useRender({
+    render,
+    defaultTagName: "input",
+    props: mergeProps<"input">(
+      {
+        id,
+        type: "text",
+        value: filename,
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => setFilename(e.target.value),
+        placeholder,
+        className: "lp-popover-input",
+      },
+      restProps,
+    ),
+  });
+
+  return (
+    <Field.Root className="lp-popover-field">
+      <Field.Label htmlFor={id} className="lp-popover-label">
+        {children}
+      </Field.Label>
+      {element}
+    </Field.Root>
+  );
+}
+
+function Actions({
+  cancelLabel,
+  submitLabel,
+}: {
+  cancelLabel?: ReactNode;
+  submitLabel?: ReactNode;
+}): JSX.Element {
+  const { onClose } = useCodeBlockPopoverCtx();
+  return (
+    <div className="lp-popover-actions">
+      <span />
+      <div className="lp-popover-actions-end">
+        <button
+          type="button"
+          onClick={onClose}
+          className="lp-popover-btn lp-popover-btn--secondary"
+        >
+          {cancelLabel}
+        </button>
+        <button type="submit" className="lp-popover-btn lp-popover-btn--primary">
+          {submitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Content — form content without Popover wrapper
+// ---------------------------------------------------------------------------
+
+export interface CodeBlockPopoverContentProps {
+  initialLang?: string;
+  initialFilename?: string;
+  onSubmit: (lang: string, filename: string) => void;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+function CodeBlockPopoverContent({
+  initialLang,
+  initialFilename,
+  onSubmit,
+  onClose,
+  children,
+}: CodeBlockPopoverContentProps): JSX.Element {
+  const [lang, setLang] = useState(initialLang || "");
+  const [filename, setFilename] = useState(initialFilename || "");
+
+  const handleSubmit = useCallback(
+    (e: React.SubmitEvent) => {
+      e.preventDefault();
+      onSubmit(lang, filename);
+    },
+    [lang, filename, onSubmit],
+  );
+
+  const ctxValue = useMemo(
+    () => ({ lang, setLang, filename, setFilename, onClose }),
+    [lang, filename, onClose],
+  );
+
+  return (
+    <CodeBlockPopoverCtx value={ctxValue}>
+      <Form onSubmit={handleSubmit} className="lp-popover-form">
+        {children}
+      </Form>
+    </CodeBlockPopoverCtx>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Root — standalone with its own Popover wrapper
+// ---------------------------------------------------------------------------
+
+export interface CodeBlockPopoverProps extends CodeBlockPopoverContentProps {
+  x: number;
+  y: number;
+}
+
+function CodeBlockPopoverRoot({
+  x,
+  y,
+  onClose,
+  ...contentProps
+}: CodeBlockPopoverProps): JSX.Element {
+  const virtualAnchor = useMemo(
+    () => ({
+      getBoundingClientRect: () => ({
+        x,
+        y,
+        width: 0,
+        height: 0,
+        top: y,
+        left: x,
+        right: x,
+        bottom: y,
+        toJSON() {
+          return this;
+        },
+      }),
+    }),
+    [x, y],
+  );
+
+  return (
+    <Popover.Root open onOpenChange={onClose}>
+      <Popover.Portal>
+        <Popover.Positioner
+          anchor={virtualAnchor}
+          positionMethod="fixed"
+          side="bottom"
+          align="start"
+          sideOffset={8}
+          className="lp-popover-positioner"
+        >
+          <Popover.Popup className="lp-popover">
+            <CodeBlockPopoverContent onClose={onClose} {...contentProps} />
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Connected — subscribes to StateField, owns its own Popover.Root
+// ---------------------------------------------------------------------------
+
+export function CodeBlockPopoverConnected({ children }: { children: ReactNode }): JSX.Element {
+  const { view } = useEditorContext();
+  const popoverReq = useStateField(popoverField, null);
+  const codeBlockReq = popoverReq?.type === "codeblock" ? (popoverReq as CodeBlockRequest) : null;
+
+  const handleSubmit = useCallback(
+    (lang: string, filename: string) => {
+      if (!view || !codeBlockReq) return;
+      applyCodeBlock(view, codeBlockReq.data, lang, filename);
+      view.dispatch({ effects: closePopover.of() });
+    },
+    [view, codeBlockReq],
+  );
+
+  const handleClose = useCallback(() => {
+    if (!view) return;
+    view.dispatch({ effects: closePopover.of() });
+    view.focus();
+  }, [view]);
+
+  const anchorPos = codeBlockReq
+    ? codeBlockReq.data.isNew
+      ? (codeBlockReq.data.insertPos ?? 0)
+      : codeBlockReq.data.fenceFrom
+    : null;
+  const virtualAnchor = useVirtualAnchor(anchorPos);
+  return (
+    <Popover.Root
+      open={!!codeBlockReq}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <Popover.Portal>
+        <Popover.Positioner
+          anchor={virtualAnchor}
+          positionMethod="fixed"
+          side="bottom"
+          align="start"
+          sideOffset={8}
+          className="lp-popover-positioner"
+        >
+          <Popover.Popup className="lp-popover">
+            {codeBlockReq && (
+              <CodeBlockPopoverContent
+                key={`${codeBlockReq.data.fenceFrom}-${codeBlockReq.data.isNew}`}
+                initialLang={codeBlockReq.data.lang}
+                initialFilename={codeBlockReq.data.filename}
+                onSubmit={handleSubmit}
+                onClose={handleClose}
+              >
+                {children}
+              </CodeBlockPopoverContent>
+            )}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Namespace exports
+// ---------------------------------------------------------------------------
+
+export {
+  CodeBlockPopoverRoot as Root,
+  CodeBlockPopoverContent as Content,
+  LanguageSelect,
+  LanguageInput,
+  FilenameInput,
+  Actions,
+};

package/src/react/context.tsx

@@ -0,0 +1,153 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  useSyncExternalStore,
+  type ReactNode,
+  type JSX,
+  useMemo,
+} from "react";
+import type { EditorView } from "@codemirror/view";
+import type { StateField } from "@codemirror/state";
+import {
+  emptyMarks,
+  subscribeToMarks,
+  getMarksSnapshot,
+  type ActiveMarks,
+} from "../core/active-marks";
+import { subscribeToField, getFieldSnapshot } from "../core/field-notifier";
+import { shortcutRegistry } from "../core/registry";
+import type { ShortcutEntry } from "../core/types";
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+export interface EditorContextValue {
+  view: EditorView | null;
+  setView: (view: EditorView | null) => void;
+}
+
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+export function useEditorContext(): EditorContextValue {
+  const ctx = useContext(EditorContext);
+  if (!ctx) {
+    throw new Error(
+      "leepi: <Toolbar />, <FloatingToolbar /> must be rendered inside <EditorProvider>",
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// EditorProvider
+// ---------------------------------------------------------------------------
+
+export interface EditorProviderProps {
+  children: ReactNode;
+}
+
+export function EditorProvider({ children }: EditorProviderProps): JSX.Element {
+  const [view, setView] = useState<EditorView | null>(null);
+
+  const editorCtx = useMemo(() => ({ view, setView }), [view]);
+
+  return <EditorContext.Provider value={editorCtx}>{children}</EditorContext.Provider>;
+}
+
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the currently active formatting marks at the cursor position.
+ * Updates reactively when the cursor moves or the document changes.
+ */
+export function useActiveMarks(): ActiveMarks {
+  const { view } = useEditorContext();
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (!view) return () => {};
+      return subscribeToMarks(view, onStoreChange);
+    },
+    [view],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (!view) return emptyMarks;
+    return getMarksSnapshot(view);
+  }, [view]);
+
+  return useSyncExternalStore(subscribe, getSnapshot);
+}
+
+/**
+ * Subscribe to a CM6 StateField and re-render when its value changes.
+ */
+export function useStateField<T>(field: StateField<T>, defaultValue: T): T {
+  const { view } = useEditorContext();
+
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (!view) return () => {};
+      return subscribeToField(view, field, onStoreChange);
+    },
+    [view, field],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (!view) return defaultValue;
+    return getFieldSnapshot(view, field) ?? defaultValue;
+  }, [view, field, defaultValue]);
+
+  return useSyncExternalStore(subscribe, getSnapshot);
+}
+
+/**
+ * Returns a virtual anchor element that dynamically resolves its position
+ * from a CodeMirror document position. Useful for anchoring popovers to
+ * editor content that may scroll after the popover opens.
+ */
+export interface VirtualAnchor {
+  getBoundingClientRect: () => DOMRect;
+}
+
+export function useVirtualAnchor(pos: number | null): VirtualAnchor | undefined {
+  const { view } = useEditorContext();
+
+  return useMemo(() => {
+    if (pos == null || !view) return undefined;
+    return {
+      getBoundingClientRect: () => {
+        const coords = view.coordsAtPos(pos);
+        const x = coords?.left ?? 0;
+        const y = coords?.bottom ?? 0;
+        return {
+          x,
+          y,
+          width: 0,
+          height: 0,
+          top: y,
+          left: x,
+          right: x,
+          bottom: y,
+          toJSON() {
+            return this;
+          },
+        };
+      },
+    };
+  }, [pos, view]);
+}
+
+/**
+ * Returns all shortcuts registered by plugins via the shortcutRegistry Facet.
+ */
+export function useShortcuts(): ShortcutEntry[] {
+  const { view } = useEditorContext();
+  if (!view) return [];
+  return view.state.facet(shortcutRegistry);
+}

package/src/react/editor.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useRef, type ReactNode, type JSX, type ComponentProps } from "react";
+import { EditorView } from "@codemirror/view";
+import type { Extension } from "@codemirror/state";
+import { createEditorState, loadLanguageSupport, editableCompartment } from "../core/editor";
+import { useEditorContext } from "./context";
+
+// ---------------------------------------------------------------------------
+// Editor
+// ---------------------------------------------------------------------------
+
+export type EditorProps = {
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Additional CM6 extensions / plugins */
+  plugins?: Extension[];
+  children?: ReactNode;
+} & Pick<ComponentProps<"textarea">, "className" | "style" | "readOnly" | "autoFocus"> &
+  ({ value: string; defaultValue?: never } | { value?: never; defaultValue: string });
+
+function EditorRoot({
+  value,
+  defaultValue,
+  onChange,
+  placeholder = "",
+  plugins,
+  readOnly = false,
+  autoFocus = false,
+  children,
+  className,
+  style,
+}: EditorProps): JSX.Element {
+  const isControlled = value !== undefined;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const { setView } = useEditorContext();
+
+  // Initialize CodeMirror
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    containerRef.current.style.display = "contents";
+
+    const state = createEditorState({
+      doc: value ?? defaultValue ?? "",
+      onUpdate: (doc) => onChangeRef.current?.(doc),
+      plugins,
+      placeholder,
+      readOnly,
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+    setView(view);
+
+    if (autoFocus) {
+      view.focus();
+    }
+
+    loadLanguageSupport(view);
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+      setView(null);
+    };
+  }, [setView]);
+
+  // Sync external value changes (controlled mode only)
+  useEffect(() => {
+    if (!isControlled) return;
+    const view = viewRef.current;
+    if (!view) return;
+
+    const currentDoc = view.state.doc.toString();
+    if (currentDoc !== value) {
+      view.dispatch({
+        changes: { from: 0, to: currentDoc.length, insert: value ?? "" },
+      });
+    }
+  }, [isControlled, value]);
+
+  // Sync readOnly
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: editableCompartment.reconfigure(EditorView.editable.of(!readOnly)),
+    });
+  }, [readOnly]);
+
+  return (
+    <>
+      <div ref={containerRef} className={className} style={style} />
+      {children}
+    </>
+  );
+}
+
+export { EditorRoot as Editor };