leepi 0.0.0 → 0.0.3

package/dist/react/link-popover.js

@@ -0,0 +1,222 @@
+import { insertLink } from "../core/commands.js";
+import { closePopover, popoverField } from "../core/popover.js";
+import { useEditorContext, useStateField, useVirtualAnchor } from "./context.js";
+import { EditorSelection } from "@codemirror/state";
+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/link-popover.tsx
+const LinkPopoverCtx = createContext(null);
+function useLinkPopoverCtx() {
+	const ctx = useContext(LinkPopoverCtx);
+	if (!ctx) throw new Error("leepi: LinkPopover sub-components must be used inside LinkPopover.Root");
+	return ctx;
+}
+function LabelInput({ autoFocus, placeholder, render, children, ...restProps }) {
+	const { label, setLabel } = useLinkPopoverCtx();
+	const id = useId();
+	const element = useRender({
+		render,
+		defaultTagName: "input",
+		props: mergeProps({
+			id,
+			value: label,
+			onChange: (e) => setLabel(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 UrlInput({ autoFocus, placeholder, render, children, ...restProps }) {
+	const { url, setUrl } = useLinkPopoverCtx();
+	const id = useId();
+	const element = useRender({
+		render,
+		defaultTagName: "input",
+		props: mergeProps({
+			id,
+			type: "url",
+			value: url,
+			onChange: (e) => setUrl(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 Actions({ cancelLabel, submitLabel, removeLabel }) {
+	const { isEditing, url, onRemove, onClose } = useLinkPopoverCtx();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lp-popover-actions",
+		children: [isEditing ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onRemove,
+			className: "lp-popover-btn lp-popover-btn--danger",
+			children: removeLabel
+		}) : /* @__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",
+				disabled: !url.trim(),
+				className: "lp-popover-btn lp-popover-btn--primary",
+				children: submitLabel
+			})]
+		})]
+	});
+}
+function LinkPopoverContent({ initialLabel, initialUrl, onSubmit, onRemove, onClose, children }) {
+	const [label, setLabel] = useState(initialLabel || "");
+	const [url, setUrl] = useState(initialUrl || "");
+	const isEditing = initialUrl !== "";
+	const handleSubmit = useCallback((e) => {
+		e.preventDefault();
+		if (!url.trim()) return;
+		onSubmit(label || url, url);
+	}, [
+		label,
+		url,
+		onSubmit
+	]);
+	return /* @__PURE__ */ jsx(LinkPopoverCtx, {
+		value: useMemo(() => ({
+			label,
+			setLabel,
+			url,
+			setUrl,
+			isEditing,
+			onRemove,
+			onClose
+		}), [
+			label,
+			url,
+			isEditing,
+			onRemove,
+			onClose
+		]),
+		children: /* @__PURE__ */ jsx(Form, {
+			onSubmit: handleSubmit,
+			className: "lp-popover-form",
+			children
+		})
+	});
+}
+function LinkPopoverRoot({ 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: (open) => {
+			if (!open) 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(LinkPopoverContent, {
+					onClose,
+					...contentProps
+				})
+			})
+		}) })
+	});
+}
+function LinkPopoverConnected({ children }) {
+	const { view } = useEditorContext();
+	const popoverReq = useStateField(popoverField, null);
+	const linkReq = popoverReq?.type === "link" ? popoverReq : null;
+	const handleSubmit = useCallback((label, url) => {
+		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 /* @__PURE__ */ jsx(Popover.Root, {
+		open: !!linkReq,
+		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: linkReq && /* @__PURE__ */ jsx(LinkPopoverContent, {
+					initialLabel: linkReq.data.text,
+					initialUrl: linkReq.data.url,
+					onSubmit: handleSubmit,
+					onRemove: handleRemove,
+					onClose: handleClose,
+					children
+				}, `${linkReq.data.from}-${linkReq.data.to}`)
+			})
+		}) })
+	});
+}
+//#endregion
+export { Actions, LinkPopoverContent as Content, LabelInput, LinkPopoverConnected, LinkPopoverRoot as Root, UrlInput };

package/dist/react/preview.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from "react";
+
+//#region src/react/preview.d.ts
+interface PreviewProps {
+  value: string;
+  className?: string;
+}
+declare function Preview({
+  value,
+  className
+}: PreviewProps): JSX.Element;
+//#endregion
+export { Preview, PreviewProps };

package/dist/react/preview.js

@@ -0,0 +1,56 @@
+import { highlightCode } from "../core/highlight.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+//#region src/react/preview.tsx
+function parseFenceInfo(info) {
+	const parts = info.trim().split(/\s+/);
+	let lang = "";
+	let filename = "";
+	for (const part of parts) if (part.startsWith("filename=")) filename = part.slice(9);
+	else if (!lang) lang = part;
+	return {
+		lang,
+		filename
+	};
+}
+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: { code({ text, lang: rawLang }) {
+	const { lang, filename } = parseFenceInfo(rawLang || "");
+	let header = "";
+	if (filename || lang) header = `<div class="lp-code-header"><span>${filename || lang}</span>${filename && lang ? `<span class="lp-code-header-lang">${lang}</span>` : ""}</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>`;
+} } });
+function Preview({ value, className }) {
+	const [html, setHtml] = useState("");
+	useEffect(() => {
+		if (!value) {
+			setHtml("");
+			return;
+		}
+		let cancelled = false;
+		marked.parse(value).then((result) => {
+			if (!cancelled) setHtml(result);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [value]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `lp-preview ${className || ""}`,
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}
+//#endregion
+export { Preview };

package/dist/react/toolbar.d.ts

@@ -0,0 +1,51 @@
+import { ComponentProps, JSX, ReactNode } from "react";
+import { Toolbar } from "@base-ui/react/toolbar";
+
+//#region src/react/toolbar.d.ts
+type InlineAction = "bold" | "italic" | "strikethrough" | "code" | "link";
+type BlockAction = "heading1" | "heading2" | "heading3" | "orderedList" | "unorderedList" | "taskList" | "blockquote" | "codeblock";
+interface ToolbarInlineButtonProps extends Omit<ComponentProps<typeof Toolbar.Button>, "children"> {
+  action: InlineAction;
+  children?: ReactNode;
+}
+declare function ToolbarInlineButton({
+  action,
+  children,
+  className,
+  ...props
+}: ToolbarInlineButtonProps): JSX.Element;
+interface ToolbarBlockButtonProps extends Omit<ComponentProps<typeof Toolbar.Button>, "children"> {
+  action: BlockAction;
+  children?: ReactNode;
+}
+declare function ToolbarBlockButton({
+  action,
+  children,
+  className,
+  ...props
+}: ToolbarBlockButtonProps): JSX.Element;
+type ToolbarButtonProps = ComponentProps<typeof Toolbar.Button>;
+declare function ToolbarButton({
+  className,
+  ...props
+}: ToolbarButtonProps): JSX.Element;
+type ToolbarSeparatorProps = ComponentProps<typeof Toolbar.Separator>;
+declare function ToolbarSeparator({
+  className,
+  ...props
+}: ToolbarSeparatorProps): JSX.Element;
+type ToolbarGroupProps = ComponentProps<typeof Toolbar.Group>;
+declare function ToolbarGroup({
+  className,
+  ...props
+}: ToolbarGroupProps): JSX.Element;
+interface ToolbarProps extends Omit<ComponentProps<typeof Toolbar.Root>, "children"> {
+  children?: ReactNode;
+}
+declare function ToolbarRoot({
+  children,
+  className,
+  ...props
+}: ToolbarProps): JSX.Element;
+//#endregion
+export { BlockAction, ToolbarBlockButton as BlockButton, ToolbarButton as Button, ToolbarGroup as Group, InlineAction, ToolbarInlineButton as InlineButton, ToolbarRoot as Root, ToolbarSeparator as Separator, ToolbarBlockButtonProps, ToolbarInlineButtonProps, ToolbarProps };

package/dist/react/toolbar.js

@@ -0,0 +1,161 @@
+import { findCodeFenceAtCursor, findLinkAtCursor, toggleBlockquote, toggleHeading, toggleListKind, toggleMarker } from "../core/commands.js";
+import { openPopover } from "../core/popover.js";
+import { useActiveMarks, useEditorContext } from "./context.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/react/toolbar.tsx
+const inlineCommands = {
+	bold: toggleMarker("**"),
+	italic: toggleMarker("_"),
+	strikethrough: toggleMarker("~~"),
+	code: toggleMarker("`")
+};
+const blockCommands = {
+	heading1: toggleHeading(1),
+	heading2: toggleHeading(2),
+	heading3: toggleHeading(3),
+	orderedList: toggleListKind("ul"),
+	unorderedList: toggleListKind("ol"),
+	taskList: toggleListKind("task"),
+	blockquote: toggleBlockquote
+};
+function preventFocusLoss(e) {
+	e.preventDefault();
+}
+function ToolbarInlineButton({ action, children, className, ...props }) {
+	const { view } = useEditorContext();
+	const marks = useActiveMarks();
+	const active = marks[action] ?? false;
+	const disabled = marks.codeblock ?? false;
+	const handleClick = useCallback(() => {
+		if (!view || disabled) return;
+		if (action === "link") {
+			const { state } = view;
+			const range = state.selection.main;
+			const existing = findLinkAtCursor(state, range.from);
+			const coords = view.coordsAtPos(range.from);
+			if (!coords) return;
+			const req = existing ? {
+				type: "link",
+				x: coords.left,
+				y: coords.bottom,
+				data: {
+					text: existing.label,
+					url: existing.url,
+					from: existing.from,
+					to: existing.to
+				}
+			} : {
+				type: "link",
+				x: coords.left,
+				y: coords.bottom,
+				data: {
+					text: state.sliceDoc(range.from, range.to),
+					url: "",
+					from: range.from,
+					to: range.to
+				}
+			};
+			view.dispatch({ effects: openPopover.of(req) });
+		} else {
+			inlineCommands[action](view);
+			view.focus();
+		}
+	}, [
+		view,
+		disabled,
+		action
+	]);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		disabled,
+		className: `lp-toolbar-btn${active ? " lp-toolbar-btn--active" : ""} ${className || ""}`,
+		onMouseDown: preventFocusLoss,
+		onClick: handleClick,
+		...props,
+		children
+	});
+}
+function ToolbarBlockButton({ action, children, className, ...props }) {
+	const { view } = useEditorContext();
+	const marks = useActiveMarks();
+	const active = marks[action] ?? false;
+	const disabled = (marks.codeblock ?? false) && action !== "codeblock";
+	const handleClick = useCallback(() => {
+		if (!view || disabled) return;
+		if (action === "codeblock") {
+			const { state } = view;
+			const range = state.selection.main;
+			const coords = view.coordsAtPos(range.from);
+			if (!coords) return;
+			const existing = findCodeFenceAtCursor(view);
+			const req = existing ? {
+				type: "codeblock",
+				x: coords.left,
+				y: coords.bottom,
+				data: {
+					lang: existing.lang,
+					filename: existing.filename,
+					fenceFrom: existing.fenceLine.from,
+					fenceTo: existing.fenceLine.to,
+					isNew: false
+				}
+			} : {
+				type: "codeblock",
+				x: coords.left,
+				y: coords.bottom,
+				data: {
+					lang: "",
+					filename: "",
+					fenceFrom: 0,
+					fenceTo: 0,
+					isNew: true,
+					insertPos: range.from
+				}
+			};
+			view.dispatch({ effects: openPopover.of(req) });
+			return;
+		}
+		blockCommands[action](view);
+		view.focus();
+	}, [
+		view,
+		disabled,
+		action
+	]);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		disabled,
+		className: `lp-toolbar-btn${active ? " lp-toolbar-btn--active" : ""} ${className || ""}`,
+		onMouseDown: preventFocusLoss,
+		onClick: handleClick,
+		...props,
+		children
+	});
+}
+function ToolbarButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		className: `lp-toolbar-btn ${className || ""}`,
+		...props
+	});
+}
+function ToolbarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Separator, {
+		className: `lp-toolbar-separator ${className || ""}`,
+		...props
+	});
+}
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		className: `lp-toolbar-group ${className || ""}`,
+		...props
+	});
+}
+function ToolbarRoot({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(Toolbar.Root, {
+		className: `lp-toolbar ${className || ""}`,
+		...props,
+		children
+	});
+}
+//#endregion
+export { ToolbarBlockButton as BlockButton, ToolbarButton as Button, ToolbarGroup as Group, ToolbarInlineButton as InlineButton, ToolbarRoot as Root, ToolbarSeparator as Separator };

package/package.json

@@ -1 +1,90 @@
-{"name":"leepi","version":"0.0.0","description":"Lipi - A composable React markdown editor","license":"MIT"}
+{
+  "name": "leepi",
+  "version": "0.0.3",
+  "description": "A composable React markdown editor with inline styling",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brijbyte/leepi.git",
+    "directory": "packages/leepi"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/test-helpers.ts"
+  ],
+  "type": "module",
+  "exports": {
+    "./core/active-marks": "./dist/core/active-marks.js",
+    "./core/commands": "./dist/core/commands.js",
+    "./core/editor": "./dist/core/editor.js",
+    "./core/field-notifier": "./dist/core/field-notifier.js",
+    "./core/highlight": "./dist/core/highlight.js",
+    "./core/plugins": "./dist/core/plugins.js",
+    "./core/popover": "./dist/core/popover.js",
+    "./core/registry": "./dist/core/registry.js",
+    "./core/types": "./dist/core/types.js",
+    "./core/utils": "./dist/core/utils.js",
+    "./react/code-block-popover": "./dist/react/code-block-popover.js",
+    "./react/context": "./dist/react/context.js",
+    "./react/editor": "./dist/react/editor.js",
+    "./react/floating-toolbar": "./dist/react/floating-toolbar.js",
+    "./react/link-popover": "./dist/react/link-popover.js",
+    "./react/preview": "./dist/react/preview.js",
+    "./react/toolbar": "./dist/react/toolbar.js",
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/leepi.css",
+    "./styles/*.css": "./src/styles/*.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/language-data": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@lezer/highlight": "^1.0.0",
+    "marked": ">=15.0.0",
+    "marked-highlight": "^2.0.0"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.41.0",
+    "@lezer/highlight": "^1.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "marked": ">=18.0.0",
+    "marked-highlight": "^2.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@base-ui/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/core/active-marks.ts

@@ -0,0 +1,89 @@
+import { type Extension } from "@codemirror/state";
+import { type EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { markRegistry } from "./registry";
+
+/**
+ * Active marks as a dynamic record. Keys are mark names registered via `markRegistry`.
+ */
+export type ActiveMarks = Record<string, boolean>;
+
+export const emptyMarks: ActiveMarks = {};
+
+export function detectMarks(view: EditorView): ActiveMarks {
+  const { state } = view;
+  const pos = state.selection.main.from;
+  const tree = syntaxTree(state);
+  const detectors = state.facet(markRegistry);
+
+  const marks: ActiveMarks = {};
+
+  // Tree walk: call all detectors with each node name
+  let node = tree.resolveInner(pos, -1);
+  while (node) {
+    for (const det of detectors) {
+      if (!marks[det.mark] && det.detect(node.name, state, pos)) {
+        marks[det.mark] = true;
+      }
+    }
+    if (!node.parent) break;
+    node = node.parent;
+  }
+
+  // Line pass: call detectors with "__line__" sentinel for line-level checks
+  for (const det of detectors) {
+    if (!marks[det.mark] && det.detect("__line__", state, pos)) {
+      marks[det.mark] = true;
+    }
+  }
+
+  return marks;
+}
+
+// Notification system: views notify React subscribers when marks change
+const viewListeners = new WeakMap<EditorView, Set<() => void>>();
+const viewSnapshots = new WeakMap<EditorView, ActiveMarks>();
+
+export function subscribeToMarks(view: EditorView, callback: () => void): () => void {
+  let listeners = viewListeners.get(view);
+  if (!listeners) {
+    listeners = new Set();
+    viewListeners.set(view, listeners);
+  }
+  listeners.add(callback);
+  return () => {
+    listeners!.delete(callback);
+  };
+}
+
+export function getMarksSnapshot(view: EditorView): ActiveMarks {
+  return viewSnapshots.get(view) ?? emptyMarks;
+}
+
+function marksEqual(a: ActiveMarks, b: ActiveMarks): boolean {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
+export const activeMarksPlugin: Extension = ViewPlugin.fromClass(
+  class {
+    update(update: ViewUpdate): void {
+      if (update.selectionSet || update.docChanged) {
+        const marks = detectMarks(update.view);
+        const prev = viewSnapshots.get(update.view) ?? emptyMarks;
+        if (!marksEqual(prev, marks)) {
+          viewSnapshots.set(update.view, marks);
+          const listeners = viewListeners.get(update.view);
+          if (listeners) {
+            for (const cb of listeners) cb();
+          }
+        }
+      }
+    }
+  },
+);