leepi 0.0.0 → 0.0.3

package/src/react/floating-toolbar.tsx

@@ -0,0 +1,161 @@
+import React, {
+  useEffect,
+  useState,
+  type ReactNode,
+  type ComponentProps,
+  type JSX,
+  useMemo,
+} from "react";
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { useEditorContext, useStateField } from "./context";
+import { popoverField } from "../core/popover";
+import { isInsideCodeBlock } from "../core/utils";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function useFloatingPosition() {
+  const { view } = useEditorContext();
+  const popoverReq = useStateField(popoverField, null);
+  const popoverOpen = popoverReq != null;
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+
+  useEffect(() => {
+    if (!view) return;
+
+    const updatePosition = () => {
+      const { state } = view;
+      const { from, to } = state.selection.main;
+
+      if (from === to || isInsideCodeBlock(view)) {
+        setPosition(null);
+        return;
+      }
+
+      // Hide for multiline selections
+      const fromLine = state.doc.lineAt(from).number;
+      const toLine = state.doc.lineAt(to).number;
+      if (fromLine !== toLine) {
+        setPosition(null);
+        return;
+      }
+
+      const fromCoords = view.coordsAtPos(from);
+      const toCoords = view.coordsAtPos(to);
+      if (!fromCoords || !toCoords) {
+        setPosition(null);
+        return;
+      }
+
+      const left = (fromCoords.left + toCoords.left) / 2;
+      const top = Math.min(fromCoords.top, toCoords.top) - 8;
+
+      setPosition({ top, left });
+    };
+
+    const handler = () => requestAnimationFrame(updatePosition);
+    view.contentDOM.addEventListener("mouseup", handler);
+    view.contentDOM.addEventListener("keyup", handler);
+
+    // Re-evaluate position when a popover closes while a selection exists
+    if (!popoverOpen) {
+      updatePosition();
+    }
+
+    return () => {
+      view.contentDOM.removeEventListener("mouseup", handler);
+      view.contentDOM.removeEventListener("keyup", handler);
+    };
+  }, [view, popoverOpen]);
+
+  if (popoverOpen) return null;
+
+  return position;
+}
+
+// ---------------------------------------------------------------------------
+// FloatingToolbar.Button — generic passthrough
+// ---------------------------------------------------------------------------
+
+type FloatingToolbarButtonProps = ComponentProps<typeof BaseToolbar.Button>;
+
+function FloatingToolbarButton({ className, ...props }: FloatingToolbarButtonProps): JSX.Element {
+  return <BaseToolbar.Button className={`lp-floating-toolbar-btn ${className || ""}`} {...props} />;
+}
+
+// ---------------------------------------------------------------------------
+// FloatingToolbar.Separator
+// ---------------------------------------------------------------------------
+
+type FloatingToolbarSeparatorProps = ComponentProps<typeof BaseToolbar.Separator>;
+
+function FloatingToolbarSeparator({
+  className,
+  ...props
+}: FloatingToolbarSeparatorProps): JSX.Element {
+  return (
+    <BaseToolbar.Separator
+      className={`lp-floating-toolbar-separator ${className || ""}`}
+      {...props}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FloatingToolbar.Group
+// ---------------------------------------------------------------------------
+
+type FloatingToolbarGroupProps = ComponentProps<typeof BaseToolbar.Group>;
+
+function FloatingToolbarGroup({ className, ...props }: FloatingToolbarGroupProps): JSX.Element {
+  return (
+    <BaseToolbar.Group className={`lp-floating-toolbar-group ${className || ""}`} {...props} />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FloatingToolbar root
+// ---------------------------------------------------------------------------
+
+export type FloatingToolbarProps = {
+  className?: string;
+  children?: ReactNode;
+} & Omit<ComponentProps<typeof BaseToolbar.Root>, "children">;
+
+function FloatingToolbarRoot({
+  className,
+  children,
+  style: propStyle,
+}: FloatingToolbarProps): JSX.Element | null {
+  const position = useFloatingPosition();
+  const style = useMemo(() => {
+    if (!position) return propStyle;
+    return {
+      ...propStyle,
+      position: "fixed",
+      top: position.top,
+      left: position.left,
+      transform: "translate(-50%, -100%)",
+    } satisfies React.CSSProperties;
+  }, [position, propStyle]);
+
+  if (!position) return null;
+
+  return (
+    <BaseToolbar.Root className={`lp-floating-toolbar ${className || ""}`} style={style}>
+      {children}
+    </BaseToolbar.Root>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Namespace exports
+// ---------------------------------------------------------------------------
+
+export {
+  FloatingToolbarRoot as Root,
+  FloatingToolbarButton as Button,
+  FloatingToolbarSeparator as Separator,
+  FloatingToolbarGroup as Group,
+};

package/src/react/link-popover.tsx

@@ -0,0 +1,354 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState,
+  type ReactNode,
+  type JSX,
+} from "react";
+import { EditorSelection } from "@codemirror/state";
+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 { LinkRequest } from "../core/plugins/link";
+import { insertLink } from "../core/commands";
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface LinkPopoverContextValue {
+  label: string;
+  setLabel: (label: string) => void;
+  url: string;
+  setUrl: (url: string) => void;
+  isEditing: boolean;
+  onRemove: () => void;
+  onClose: () => void;
+}
+
+const LinkPopoverCtx = createContext<LinkPopoverContextValue | null>(null);
+
+function useLinkPopoverCtx() {
+  const ctx = useContext(LinkPopoverCtx);
+  if (!ctx) {
+    throw new Error("leepi: LinkPopover sub-components must be used inside LinkPopover.Root");
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+
+interface LabelInputProps extends UseRender.ComponentProps<"input"> {
+  autoFocus?: boolean;
+  placeholder?: string;
+  children?: ReactNode;
+}
+
+function LabelInput({
+  autoFocus,
+  placeholder,
+  render,
+  children,
+  ...restProps
+}: LabelInputProps): JSX.Element {
+  const { label, setLabel } = useLinkPopoverCtx();
+  const id = useId();
+
+  const element = useRender({
+    render,
+    defaultTagName: "input",
+    props: mergeProps<"input">(
+      {
+        id,
+        value: label,
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => setLabel(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 UrlInputProps extends UseRender.ComponentProps<"input"> {
+  autoFocus?: boolean;
+  placeholder?: string;
+  children?: ReactNode;
+}
+
+function UrlInput({
+  autoFocus,
+  placeholder,
+  render,
+  children,
+  ...restProps
+}: UrlInputProps): JSX.Element {
+  const { url, setUrl } = useLinkPopoverCtx();
+  const id = useId();
+
+  const element = useRender({
+    render,
+    defaultTagName: "input",
+    props: mergeProps<"input">(
+      {
+        id,
+        type: "url",
+        value: url,
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => setUrl(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>
+  );
+}
+
+function Actions({
+  cancelLabel,
+  submitLabel,
+  removeLabel,
+}: {
+  cancelLabel?: ReactNode;
+  submitLabel?: ReactNode;
+  removeLabel?: ReactNode;
+}): JSX.Element {
+  const { isEditing, url, onRemove, onClose } = useLinkPopoverCtx();
+  return (
+    <div className="lp-popover-actions">
+      {isEditing ? (
+        <button type="button" onClick={onRemove} className="lp-popover-btn lp-popover-btn--danger">
+          {removeLabel}
+        </button>
+      ) : (
+        <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"
+          disabled={!url.trim()}
+          className="lp-popover-btn lp-popover-btn--primary"
+        >
+          {submitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Content — form content without Popover wrapper
+// ---------------------------------------------------------------------------
+
+export interface LinkPopoverContentProps {
+  initialLabel?: string;
+  initialUrl?: string;
+  onSubmit: (label: string, url: string) => void;
+  onRemove: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+function LinkPopoverContent({
+  initialLabel,
+  initialUrl,
+  onSubmit,
+  onRemove,
+  onClose,
+  children,
+}: LinkPopoverContentProps): JSX.Element {
+  const [label, setLabel] = useState(initialLabel || "");
+  const [url, setUrl] = useState(initialUrl || "");
+  const isEditing = initialUrl !== "";
+
+  const handleSubmit = useCallback(
+    (e: React.SubmitEvent) => {
+      e.preventDefault();
+      if (!url.trim()) return;
+      onSubmit(label || url, url);
+    },
+    [label, url, onSubmit],
+  );
+
+  const ctxValue = useMemo(
+    () => ({ label, setLabel, url, setUrl, isEditing, onRemove, onClose }),
+    [label, url, isEditing, onRemove, onClose],
+  );
+
+  return (
+    <LinkPopoverCtx value={ctxValue}>
+      <Form onSubmit={handleSubmit} className="lp-popover-form">
+        {children}
+      </Form>
+    </LinkPopoverCtx>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Root — standalone with its own Popover wrapper
+// ---------------------------------------------------------------------------
+
+export interface LinkPopoverProps extends LinkPopoverContentProps {
+  x: number;
+  y: number;
+}
+
+function LinkPopoverRoot({ x, y, onClose, ...contentProps }: LinkPopoverProps): 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={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <Popover.Portal>
+        <Popover.Positioner
+          anchor={virtualAnchor}
+          positionMethod="fixed"
+          side="bottom"
+          align="start"
+          sideOffset={8}
+          className="lp-popover-positioner"
+        >
+          <Popover.Popup className="lp-popover">
+            <LinkPopoverContent onClose={onClose} {...contentProps} />
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Connected — subscribes to StateField, owns its own Popover.Root
+// ---------------------------------------------------------------------------
+
+export function LinkPopoverConnected({ children }: { children: ReactNode }): JSX.Element {
+  const { view } = useEditorContext();
+  const popoverReq = useStateField(popoverField, null);
+  const linkReq = popoverReq?.type === "link" ? (popoverReq as LinkRequest) : null;
+
+  const handleSubmit = useCallback(
+    (label: string, url: string) => {
+      if (!view || !linkReq) return;
+      const { from, to } = linkReq.data;
+      insertLink(view, from, to, label, url);
+      view.dispatch({ effects: closePopover.of() });
+    },
+    [view, linkReq],
+  );
+
+  const handleRemove = useCallback(() => {
+    if (!view || !linkReq) return;
+    const { from, to, text } = linkReq.data;
+    view.dispatch({
+      changes: { from, to, insert: text },
+      selection: EditorSelection.cursor(from + text.length),
+    });
+    view.dispatch({ effects: closePopover.of() });
+    view.focus();
+  }, [view, linkReq]);
+
+  const handleClose = useCallback(() => {
+    if (!view) return;
+    view.dispatch({ effects: closePopover.of() });
+    view.focus();
+  }, [view]);
+
+  const virtualAnchor = useVirtualAnchor(linkReq?.data.from ?? null);
+
+  return (
+    <Popover.Root
+      open={!!linkReq}
+      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">
+            {linkReq && (
+              <LinkPopoverContent
+                key={`${linkReq.data.from}-${linkReq.data.to}`}
+                initialLabel={linkReq.data.text}
+                initialUrl={linkReq.data.url}
+                onSubmit={handleSubmit}
+                onRemove={handleRemove}
+                onClose={handleClose}
+              >
+                {children}
+              </LinkPopoverContent>
+            )}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Namespace exports
+// ---------------------------------------------------------------------------
+
+export { LinkPopoverRoot as Root, LinkPopoverContent as Content, LabelInput, UrlInput, Actions };

package/src/react/preview.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState, type JSX } from "react";
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import { highlightCode } from "../core/highlight";
+
+function parseFenceInfo(info: string): { lang: string; filename: string } {
+  const parts = info.trim().split(/\s+/);
+  let lang = "";
+  let filename = "";
+  for (const part of parts) {
+    if (part.startsWith("filename=")) {
+      filename = part.slice("filename=".length);
+    } else if (!lang) {
+      lang = part;
+    }
+  }
+  return { lang, filename };
+}
+
+const renderer = {
+  code({ text, lang: rawLang }: { text: string; lang?: string }) {
+    const { lang, filename } = parseFenceInfo(rawLang || "");
+    let header = "";
+    if (filename || lang) {
+      const left = filename || lang;
+      const right = filename && lang ? `<span class="lp-code-header-lang">${lang}</span>` : "";
+      header = `<div class="lp-code-header"><span>${left}</span>${right}</div>`;
+    }
+    const lines = text.split("\n");
+    if (lines.at(-1) === "") lines.pop();
+    const rows = lines
+      .map(
+        (line, i) =>
+          `<span class="lp-code-row"><span class="lp-code-line-number">${i + 1}</span><span class="lp-code-line">${line || " "}</span></span>`,
+      )
+      .join("");
+    return `<div class="lp-code-block">${header}<pre><code class="language-${lang}">${rows}</code></pre></div>`;
+  },
+};
+
+const marked = new Marked(
+  { gfm: true },
+  markedHighlight({
+    async: true,
+    langPrefix: "language-",
+    async highlight(code, lang) {
+      const actualLang = lang.split(/\s+/)[0];
+      if (!actualLang) return code;
+      return highlightCode(code, actualLang);
+    },
+  }),
+  { renderer },
+);
+
+export interface PreviewProps {
+  value: string;
+  className?: string;
+}
+
+export function Preview({ value, className }: PreviewProps): JSX.Element {
+  const [html, setHtml] = useState("");
+
+  useEffect(() => {
+    if (!value) {
+      setHtml("");
+      return;
+    }
+    let cancelled = false;
+    (marked.parse(value) as Promise<string>).then((result) => {
+      if (!cancelled) setHtml(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [value]);
+
+  return (
+    <div className={`lp-preview ${className || ""}`} dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}