leepi 0.0.0 → 0.0.3

package/dist/react/code-block-popover.js

@@ -0,0 +1,223 @@
+import { applyCodeBlock } from "../core/commands.js";
+import { closePopover, popoverField } from "../core/popover.js";
+import { useEditorContext, useStateField, useVirtualAnchor } from "./context.js";
+import { createContext, useCallback, useContext, useId, useMemo, useState } 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 } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/code-block-popover.tsx
+const CodeBlockPopoverCtx = createContext(null);
+function useCodeBlockPopoverCtx() {
+	const ctx = useContext(CodeBlockPopoverCtx);
+	if (!ctx) throw new Error("leepi: CodeBlockPopover sub-components must be used inside CodeBlockPopover.Root");
+	return ctx;
+}
+function LanguageSelect({ autoFocus, render, label, children, ...restProps }) {
+	const { lang, setLang } = useCodeBlockPopoverCtx();
+	const id = useId();
+	const element = useRender({
+		render,
+		defaultTagName: "select",
+		props: mergeProps({
+			id,
+			value: lang,
+			onChange: (e) => setLang(e.target.value),
+			autoFocus,
+			className: "lp-popover-select"
+		}, restProps)
+	});
+	const defaultSelect = !render ? /* @__PURE__ */ jsx("select", {
+		id,
+		value: lang,
+		onChange: (e) => setLang(e.target.value),
+		autoFocus,
+		className: "lp-popover-select",
+		...restProps,
+		children
+	}) : null;
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: "lp-popover-field",
+		children: [/* @__PURE__ */ jsx(Field.Label, {
+			htmlFor: id,
+			className: "lp-popover-label",
+			children: label
+		}), render ? element : defaultSelect]
+	});
+}
+function LanguageInput({ autoFocus, placeholder, render, children, ...restProps }) {
+	const { lang, setLang } = useCodeBlockPopoverCtx();
+	const id = useId();
+	const element = useRender({
+		render,
+		defaultTagName: "input",
+		props: mergeProps({
+			id,
+			type: "text",
+			value: lang,
+			onChange: (e) => setLang(e.target.value),
+			autoFocus,
+			placeholder,
+			className: "lp-popover-input"
+		}, restProps)
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: "lp-popover-field",
+		children: [/* @__PURE__ */ jsx(Field.Label, {
+			htmlFor: id,
+			className: "lp-popover-label",
+			children
+		}), element]
+	});
+}
+function FilenameInput({ placeholder, render, children, ...restProps }) {
+	const { filename, setFilename } = useCodeBlockPopoverCtx();
+	const id = useId();
+	const element = useRender({
+		render,
+		defaultTagName: "input",
+		props: mergeProps({
+			id,
+			type: "text",
+			value: filename,
+			onChange: (e) => setFilename(e.target.value),
+			placeholder,
+			className: "lp-popover-input"
+		}, restProps)
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: "lp-popover-field",
+		children: [/* @__PURE__ */ jsx(Field.Label, {
+			htmlFor: id,
+			className: "lp-popover-label",
+			children
+		}), element]
+	});
+}
+function Actions({ cancelLabel, submitLabel }) {
+	const { onClose } = useCodeBlockPopoverCtx();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lp-popover-actions",
+		children: [/* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+			className: "lp-popover-actions-end",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClose,
+				className: "lp-popover-btn lp-popover-btn--secondary",
+				children: cancelLabel
+			}), /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				className: "lp-popover-btn lp-popover-btn--primary",
+				children: submitLabel
+			})]
+		})]
+	});
+}
+function CodeBlockPopoverContent({ initialLang, initialFilename, onSubmit, onClose, children }) {
+	const [lang, setLang] = useState(initialLang || "");
+	const [filename, setFilename] = useState(initialFilename || "");
+	const handleSubmit = useCallback((e) => {
+		e.preventDefault();
+		onSubmit(lang, filename);
+	}, [
+		lang,
+		filename,
+		onSubmit
+	]);
+	return /* @__PURE__ */ jsx(CodeBlockPopoverCtx, {
+		value: useMemo(() => ({
+			lang,
+			setLang,
+			filename,
+			setFilename,
+			onClose
+		}), [
+			lang,
+			filename,
+			onClose
+		]),
+		children: /* @__PURE__ */ jsx(Form, {
+			onSubmit: handleSubmit,
+			className: "lp-popover-form",
+			children
+		})
+	});
+}
+function CodeBlockPopoverRoot({ x, y, onClose, ...contentProps }) {
+	const virtualAnchor = useMemo(() => ({ getBoundingClientRect: () => ({
+		x,
+		y,
+		width: 0,
+		height: 0,
+		top: y,
+		left: x,
+		right: x,
+		bottom: y,
+		toJSON() {
+			return this;
+		}
+	}) }), [x, y]);
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open: true,
+		onOpenChange: onClose,
+		children: /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			anchor: virtualAnchor,
+			positionMethod: "fixed",
+			side: "bottom",
+			align: "start",
+			sideOffset: 8,
+			className: "lp-popover-positioner",
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				className: "lp-popover",
+				children: /* @__PURE__ */ jsx(CodeBlockPopoverContent, {
+					onClose,
+					...contentProps
+				})
+			})
+		}) })
+	});
+}
+function CodeBlockPopoverConnected({ children }) {
+	const { view } = useEditorContext();
+	const popoverReq = useStateField(popoverField, null);
+	const codeBlockReq = popoverReq?.type === "codeblock" ? popoverReq : null;
+	const handleSubmit = useCallback((lang, filename) => {
+		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 virtualAnchor = useVirtualAnchor(codeBlockReq ? codeBlockReq.data.isNew ? codeBlockReq.data.insertPos ?? 0 : codeBlockReq.data.fenceFrom : null);
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open: !!codeBlockReq,
+		onOpenChange: (open) => {
+			if (!open) handleClose();
+		},
+		children: /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			anchor: virtualAnchor,
+			positionMethod: "fixed",
+			side: "bottom",
+			align: "start",
+			sideOffset: 8,
+			className: "lp-popover-positioner",
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				className: "lp-popover",
+				children: codeBlockReq && /* @__PURE__ */ jsx(CodeBlockPopoverContent, {
+					initialLang: codeBlockReq.data.lang,
+					initialFilename: codeBlockReq.data.filename,
+					onSubmit: handleSubmit,
+					onClose: handleClose,
+					children
+				}, `${codeBlockReq.data.fenceFrom}-${codeBlockReq.data.isNew}`)
+			})
+		}) })
+	});
+}
+//#endregion
+export { Actions, CodeBlockPopoverConnected, CodeBlockPopoverContent as Content, FilenameInput, LanguageInput, LanguageSelect, CodeBlockPopoverRoot as Root };

package/dist/react/context.d.ts

@@ -0,0 +1,42 @@
+import { ActiveMarks } from "../core/active-marks.js";
+import { ShortcutEntry } from "../core/types.js";
+import { EditorView } from "@codemirror/view";
+import { StateField } from "@codemirror/state";
+import { JSX, ReactNode } from "react";
+
+//#region src/react/context.d.ts
+interface EditorContextValue {
+  view: EditorView | null;
+  setView: (view: EditorView | null) => void;
+}
+declare function useEditorContext(): EditorContextValue;
+interface EditorProviderProps {
+  children: ReactNode;
+}
+declare function EditorProvider({
+  children
+}: EditorProviderProps): JSX.Element;
+/**
+* Returns the currently active formatting marks at the cursor position.
+* Updates reactively when the cursor moves or the document changes.
+*/
+declare function useActiveMarks(): ActiveMarks;
+/**
+* Subscribe to a CM6 StateField and re-render when its value changes.
+*/
+declare function useStateField<T>(field: StateField<T>, defaultValue: T): T;
+/**
+* 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.
+*/
+interface VirtualAnchor {
+  getBoundingClientRect: () => DOMRect;
+}
+declare function useVirtualAnchor(pos: number | null): VirtualAnchor | undefined;
+/**
+* Returns all shortcuts registered by plugins via the shortcutRegistry Facet.
+*/
+declare function useShortcuts(): ShortcutEntry[];
+//#endregion
+export { EditorContextValue, EditorProvider, EditorProviderProps, VirtualAnchor, useActiveMarks, useEditorContext, useShortcuts, useStateField, useVirtualAnchor };

package/dist/react/context.js

@@ -0,0 +1,88 @@
+import { shortcutRegistry } from "../core/registry.js";
+import { emptyMarks, getMarksSnapshot, subscribeToMarks } from "../core/active-marks.js";
+import { getFieldSnapshot, subscribeToField } from "../core/field-notifier.js";
+import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/context.tsx
+const EditorContext = createContext(null);
+function useEditorContext() {
+	const ctx = useContext(EditorContext);
+	if (!ctx) throw new Error("leepi: <Toolbar />, <FloatingToolbar /> must be rendered inside <EditorProvider>");
+	return ctx;
+}
+function EditorProvider({ children }) {
+	const [view, setView] = useState(null);
+	const editorCtx = useMemo(() => ({
+		view,
+		setView
+	}), [view]);
+	return /* @__PURE__ */ jsx(EditorContext.Provider, {
+		value: editorCtx,
+		children
+	});
+}
+/**
+* Returns the currently active formatting marks at the cursor position.
+* Updates reactively when the cursor moves or the document changes.
+*/
+function useActiveMarks() {
+	const { view } = useEditorContext();
+	return useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!view) return () => {};
+		return subscribeToMarks(view, onStoreChange);
+	}, [view]), useCallback(() => {
+		if (!view) return emptyMarks;
+		return getMarksSnapshot(view);
+	}, [view]));
+}
+/**
+* Subscribe to a CM6 StateField and re-render when its value changes.
+*/
+function useStateField(field, defaultValue) {
+	const { view } = useEditorContext();
+	return useSyncExternalStore(useCallback((onStoreChange) => {
+		if (!view) return () => {};
+		return subscribeToField(view, field, onStoreChange);
+	}, [view, field]), useCallback(() => {
+		if (!view) return defaultValue;
+		return getFieldSnapshot(view, field) ?? defaultValue;
+	}, [
+		view,
+		field,
+		defaultValue
+	]));
+}
+function useVirtualAnchor(pos) {
+	const { view } = useEditorContext();
+	return useMemo(() => {
+		if (pos == null || !view) return void 0;
+		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.
+*/
+function useShortcuts() {
+	const { view } = useEditorContext();
+	if (!view) return [];
+	return view.state.facet(shortcutRegistry);
+}
+//#endregion
+export { EditorProvider, useActiveMarks, useEditorContext, useShortcuts, useStateField, useVirtualAnchor };

package/dist/react/editor.d.ts

@@ -0,0 +1,30 @@
+import { Extension } from "@codemirror/state";
+import { ComponentProps, JSX, ReactNode } from "react";
+
+//#region src/react/editor.d.ts
+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;
+});
+declare function EditorRoot({
+  value,
+  defaultValue,
+  onChange,
+  placeholder,
+  plugins,
+  readOnly,
+  autoFocus,
+  children,
+  className,
+  style
+}: EditorProps): JSX.Element;
+//#endregion
+export { EditorRoot as Editor, EditorProps };

package/dist/react/editor.js

@@ -0,0 +1,60 @@
+import { createEditorState, editableCompartment, loadLanguageSupport } from "../core/editor.js";
+import { useEditorContext } from "./context.js";
+import { EditorView } from "@codemirror/view";
+import { useEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/editor.tsx
+function EditorRoot({ value, defaultValue, onChange, placeholder = "", plugins, readOnly = false, autoFocus = false, children, className, style }) {
+	const isControlled = value !== void 0;
+	const containerRef = useRef(null);
+	const viewRef = useRef(null);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const { setView } = useEditorContext();
+	useEffect(() => {
+		if (!containerRef.current) return;
+		containerRef.current.style.display = "contents";
+		const view = new EditorView({
+			state: createEditorState({
+				doc: value ?? defaultValue ?? "",
+				onUpdate: (doc) => onChangeRef.current?.(doc),
+				plugins,
+				placeholder,
+				readOnly
+			}),
+			parent: containerRef.current
+		});
+		viewRef.current = view;
+		setView(view);
+		if (autoFocus) view.focus();
+		loadLanguageSupport(view);
+		return () => {
+			view.destroy();
+			viewRef.current = null;
+			setView(null);
+		};
+	}, [setView]);
+	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]);
+	useEffect(() => {
+		const view = viewRef.current;
+		if (!view) return;
+		view.dispatch({ effects: editableCompartment.reconfigure(EditorView.editable.of(!readOnly)) });
+	}, [readOnly]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className,
+		style
+	}), children] });
+}
+//#endregion
+export { EditorRoot as Editor };

package/dist/react/floating-toolbar.d.ts

@@ -0,0 +1,30 @@
+import { ComponentProps, JSX, ReactNode } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+
+//#region src/react/floating-toolbar.d.ts
+type FloatingToolbarButtonProps = ComponentProps<typeof Toolbar.Button>;
+declare function FloatingToolbarButton({
+  className,
+  ...props
+}: FloatingToolbarButtonProps): JSX.Element;
+type FloatingToolbarSeparatorProps = ComponentProps<typeof Toolbar.Separator>;
+declare function FloatingToolbarSeparator({
+  className,
+  ...props
+}: FloatingToolbarSeparatorProps): JSX.Element;
+type FloatingToolbarGroupProps = ComponentProps<typeof Toolbar.Group>;
+declare function FloatingToolbarGroup({
+  className,
+  ...props
+}: FloatingToolbarGroupProps): JSX.Element;
+type FloatingToolbarProps = {
+  className?: string;
+  children?: ReactNode;
+} & Omit<ComponentProps<typeof Toolbar.Root>, "children">;
+declare function FloatingToolbarRoot({
+  className,
+  children,
+  style: propStyle
+}: FloatingToolbarProps): JSX.Element | null;
+//#endregion
+export { FloatingToolbarButton as Button, FloatingToolbarProps, FloatingToolbarGroup as Group, FloatingToolbarRoot as Root, FloatingToolbarSeparator as Separator };

package/dist/react/floating-toolbar.js

@@ -0,0 +1,87 @@
+import { isInsideCodeBlock } from "../core/utils.js";
+import { popoverField } from "../core/popover.js";
+import { useEditorContext, useStateField } from "./context.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/react/floating-toolbar.tsx
+function useFloatingPosition() {
+	const { view } = useEditorContext();
+	const popoverOpen = useStateField(popoverField, null) != null;
+	const [position, setPosition] = useState(null);
+	useEffect(() => {
+		if (!view) return;
+		const updatePosition = () => {
+			const { state } = view;
+			const { from, to } = state.selection.main;
+			if (from === to || isInsideCodeBlock(view)) {
+				setPosition(null);
+				return;
+			}
+			if (state.doc.lineAt(from).number !== state.doc.lineAt(to).number) {
+				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;
+			setPosition({
+				top: Math.min(fromCoords.top, toCoords.top) - 8,
+				left
+			});
+		};
+		const handler = () => requestAnimationFrame(updatePosition);
+		view.contentDOM.addEventListener("mouseup", handler);
+		view.contentDOM.addEventListener("keyup", handler);
+		if (!popoverOpen) updatePosition();
+		return () => {
+			view.contentDOM.removeEventListener("mouseup", handler);
+			view.contentDOM.removeEventListener("keyup", handler);
+		};
+	}, [view, popoverOpen]);
+	if (popoverOpen) return null;
+	return position;
+}
+function FloatingToolbarButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		className: `lp-floating-toolbar-btn ${className || ""}`,
+		...props
+	});
+}
+function FloatingToolbarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		className: `lp-floating-toolbar-separator ${className || ""}`,
+		...props
+	});
+}
+function FloatingToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		className: `lp-floating-toolbar-group ${className || ""}`,
+		...props
+	});
+}
+function FloatingToolbarRoot({ className, children, style: propStyle }) {
+	const position = useFloatingPosition();
+	const style = useMemo(() => {
+		if (!position) return propStyle;
+		return {
+			...propStyle,
+			position: "fixed",
+			top: position.top,
+			left: position.left,
+			transform: "translate(-50%, -100%)"
+		};
+	}, [position, propStyle]);
+	if (!position) return null;
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		className: `lp-floating-toolbar ${className || ""}`,
+		style,
+		children
+	});
+}
+//#endregion
+export { FloatingToolbarButton as Button, FloatingToolbarGroup as Group, FloatingToolbarRoot as Root, FloatingToolbarSeparator as Separator };

package/dist/react/link-popover.d.ts

@@ -0,0 +1,70 @@
+import { JSX, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/react/link-popover.d.ts
+interface LabelInputProps extends useRender.ComponentProps<"input"> {
+  autoFocus?: boolean;
+  placeholder?: string;
+  children?: ReactNode;
+}
+declare function LabelInput({
+  autoFocus,
+  placeholder,
+  render,
+  children,
+  ...restProps
+}: LabelInputProps): JSX.Element;
+interface UrlInputProps extends useRender.ComponentProps<"input"> {
+  autoFocus?: boolean;
+  placeholder?: string;
+  children?: ReactNode;
+}
+declare function UrlInput({
+  autoFocus,
+  placeholder,
+  render,
+  children,
+  ...restProps
+}: UrlInputProps): JSX.Element;
+declare function Actions({
+  cancelLabel,
+  submitLabel,
+  removeLabel
+}: {
+  cancelLabel?: ReactNode;
+  submitLabel?: ReactNode;
+  removeLabel?: ReactNode;
+}): JSX.Element;
+interface LinkPopoverContentProps {
+  initialLabel?: string;
+  initialUrl?: string;
+  onSubmit: (label: string, url: string) => void;
+  onRemove: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}
+declare function LinkPopoverContent({
+  initialLabel,
+  initialUrl,
+  onSubmit,
+  onRemove,
+  onClose,
+  children
+}: LinkPopoverContentProps): JSX.Element;
+interface LinkPopoverProps extends LinkPopoverContentProps {
+  x: number;
+  y: number;
+}
+declare function LinkPopoverRoot({
+  x,
+  y,
+  onClose,
+  ...contentProps
+}: LinkPopoverProps): JSX.Element;
+declare function LinkPopoverConnected({
+  children
+}: {
+  children: ReactNode;
+}): JSX.Element;
+//#endregion
+export { Actions, LinkPopoverContent as Content, LabelInput, LinkPopoverConnected, LinkPopoverContentProps, LinkPopoverProps, LinkPopoverRoot as Root, UrlInput };