@meowdown/react 0.5.0 → 0.7.0

package/README.md

@@ -5,8 +5,10 @@ React components for Meowdown, a hybrid (live-preview) Markdown editor.
 ## Usage
 
 ```tsx
-import { Editor, type EditorHandle } from '@meowdown/react'
+import '@meowdown/core/style.css'
 import '@meowdown/react/style.css'
+
+import { MeowdownEditor, type EditorHandle } from '@meowdown/react'
 import { useRef, useCallback } from 'react'
 
 export function App() {
@@ -15,13 +17,20 @@ export function App() {
     console.log(ref.current?.getMarkdown())
   }, [])
 
-  return <Editor ref={ref} mode="focus" initialMarkdown="# Hello" onDocChange={handleDocChange} />
+  return (
+    <MeowdownEditor
+      handleRef={ref}
+      mode="focus"
+      initialMarkdown="# Hello"
+      onDocChange={handleDocChange}
+    />
+  )
 }
 ```
 
 ## API
 
-### `<Editor>`
+### `<MeowdownEditor>`
 
 The Markdown editor component. Renders inside a `div.meowdown` wrapper that fills a flex parent. In rich modes, typing `/` opens a slash menu for inserting blocks (headings, blockquote, lists, code block, table). Hovering a block shows a handle to its left: the plus button inserts an empty paragraph below the block, and the grip selects the block and can be dragged to move it, with a drop indicator line marking the target.
 
@@ -31,35 +40,31 @@ The Markdown editor component. Renders inside a `div.meowdown` wrapper that fill
   - `'hide'`: Markdown syntax is always hidden.
   - `'source'`: raw Markdown source with syntax highlighting.
 - `initialMarkdown?: string`: first render only.
-- `onDocChange?: VoidFunction`: called on every document change.
+- `onDocChange?: VoidFunction`: called on every user-driven document change. Programmatic `setMarkdown` / `setState` on the handle do not fire it.
 - `onTagSearch?: (query: string) => TagItem[] | Promise<TagItem[]>`: enables the tag menu, which opens when typing `#` followed by text in a rich mode. Returns ranked rows `{ tag, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `#tag ` then runs its `onSelect`. Omit to disable.
 - `onWikilinkSearch?: (query: string) => WikilinkItem[] | Promise<WikilinkItem[]>`: enables the wikilink menu, which opens as soon as `[[` is typed in a rich mode. Returns ranked rows `{ target, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `[[target]]` then runs its `onSelect`. Omit to disable.
 - `onWikilinkClick?: (payload: { target: string; event: MouseEvent }) => void`: called when a rendered wiki link is clicked. A plain click inside a link the caret already sits in just places the caret; `Mod`-click always fires. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
 - `resolveImageUrl?: (src: string) => string | undefined`: maps an image `src` to a displayable URL (or `undefined` to skip). Enables inline image rendering: `![alt](src)` stays literal text and the image renders beneath its line. Pass a stable function. Ignored in source mode.
 - `onImagePaste?: (file: File) => Promise<string | undefined>`: persists a pasted or dropped image file and returns its markdown `src` (or `undefined` to decline). Pass a stable function. Ignored in source mode.
-- `onImageSaveError?: (error: Error, file: File) => void`: called when `onImagePaste` throws. Defaults to `console.error`. Ignored in source mode.
-- `placeholder?: string | ((state) => string)`: placeholder text shown in an empty block. Pass a stable function. Ignored in source mode.
+- `onImageSaveError?: (error: unknown, file: File) => void`: called when `onImagePaste` throws. Defaults to `console.error`. Ignored in source mode.
+- `placeholder?: string | ((state) => string)`: placeholder text shown when the whole document is empty. Pass a stable function. Ignored in source mode.
 - `readOnly?: boolean`: makes the editor read-only, in both the rich and source modes.
 - `spellCheck?: boolean`: toggles the browser's native spell checking in the rich modes. Defaults to the browser's behavior. Ignored in source mode.
 - `editorClassName?: string`: class on the editable root (the contenteditable). Rich modes only.
 - `wrapperClassName?: string`: class on the outer `div.meowdown` wrapper.
-- `ref?: Ref<EditorHandle>`
+- `handleRef?: Ref<EditorHandle>`
 - `children?: ReactNode`: rendered inside the editor's ProseKit context, so children can call `useEditor()`. Only rendered in the rich modes; source mode ignores them.
 
 ### `useEditor`
 
 Re-exported from `@prosekit/react`. Call it from a component passed as `children` to read the live editor instance.
 
-### `checkRoundTrip`
-
-Re-exported from `@meowdown/core`. `checkRoundTrip(markdown)` returns `'exact' | 'normalizing' | 'lossy'`, for hosts that gate saving markdown files on whether the editor reproduces them faithfully.
-
 ### `EditorHandle`
 
-Imperative handle for the editor, attached via `ref`.
+Imperative handle for the editor, attached via `handleRef`.
 
 - `getMarkdown(): string`: serializes the current document to Markdown. Can be expensive on large documents; call it on demand (e.g. throttled) instead of on every change.
-- `setMarkdown(markdown: string): void`: replaces the whole document as a single undoable edit.
+- `setMarkdown(markdown: string): void`: replaces the whole document as a single undoable edit. Does not fire `onDocChange`.
 - `getState(): EditorStateSnapshot`: returns `[markdown, selection]`, where `selection` is a `SelectionJSON` (`{ anchor: number, head: number, type: string }`).
 - `setState(markdown?: string, selection?: SelectionJSON | 'start' | 'end'): void`: replaces the document (if `markdown` is given) and restores `selection`: exactly when valid, otherwise clamped to the nearest text selection; out-of-range positions never throw. `'start'` and `'end'` jump to the document edges. Without a selection, the current one is mapped through the change. Restore a snapshot with `handle.setState(...handle.getState())`.
 - `getSelection(): SelectionJSON`: returns the current selection.
@@ -70,20 +75,9 @@ Imperative handle for the editor, attached via `ref`.
 
 Selection positions are in the mounted editor's coordinate space: ProseMirror document positions in the rich modes, character offsets in source mode. They round-trip within one mode but are not portable across a mode switch.
 
-## Keyboard shortcuts
-
-In the rich modes (`focus` / `show` / `hide`), these toggle inline formatting on the selection (`Mod` = Cmd on macOS, Ctrl elsewhere):
-
-| Key           | Action               |
-| ------------- | -------------------- |
-| `Mod-B`       | toggle bold          |
-| `Mod-I`       | toggle italic        |
-| `Mod-E`       | toggle inline code   |
-| `Mod-Shift-X` | toggle strikethrough |
-
 ## Styling
 
-`@meowdown/react/style.css` includes the default theme from [`@meowdown/core`](https://www.npmjs.com/package/@meowdown/core).
+Import both stylesheets: `@meowdown/core/style.css` (the editor theme and variables) and `@meowdown/react/style.css` (the component layout). The core theme is documented in [`@meowdown/core`](https://www.npmjs.com/package/@meowdown/core).
 
 ## License
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, Ref } from "react";
-import { ImageOptions, MarkMode, MarkMode as MarkMode$1, PlaceholderOptions, RoundTripFidelity, TypedEditor, TypedEditor as TypedEditor$1, WikilinkClickHandler, checkRoundTrip } from "@meowdown/core";
+import { ImageOptions, MarkMode, PlaceholderOptions, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor } from "@prosekit/react";
 
@@ -38,7 +38,7 @@ interface EditorHandle {
   /** Scrolls the selection into view. */
   scrollIntoView: () => void;
   /** Escape hatch: the underlying ProseKit editor, or `undefined` in source mode. */
-  readonly editor: TypedEditor$1 | undefined;
+  readonly editor: TypedEditor | undefined;
 }
 /**
 /** One row in the tag menu. The host ranks the rows; the menu does not re-sort. */
@@ -77,7 +77,7 @@ interface WikilinkItem {
 type WikilinkSearchHandler = (query: string) => WikilinkItem[] | Promise<WikilinkItem[]>;
 //#endregion
 //#region src/components/editor.d.ts
-type EditorMode = MarkMode$1 | 'source';
+type EditorMode = MarkMode | 'source';
 interface EditorProps {
   /**
    * The editor mode. The three rich modes ('focus', 'show', 'hide') render a ProseKit
@@ -91,7 +91,10 @@ interface EditorProps {
    * first render is used; later changes are ignored.
    */
   initialMarkdown?: string;
-  /** Called on every document change. */
+  /**
+   * Called on every user-driven document change. Programmatic `setMarkdown` and
+   * `setState` on the handle do not fire it.
+   */
   onDocChange?: VoidFunction;
   /**
    * Searches tags for the tag menu, which opens when typing `#` followed by
@@ -128,8 +131,8 @@ interface EditorProps {
   /** Called when persisting a pasted/dropped image throws. Ignored in source mode. */
   onImageSaveError?: ImageOptions['onImageSaveError'];
   /**
-   * Placeholder text shown in an empty block. A function receives the editor
-   * state. Pass a stable function. Ignored in source mode.
+   * Placeholder text shown when the whole document is empty. A function
+   * receives the editor state. Pass a stable function. Ignored in source mode.
    */
   placeholder?: PlaceholderOptions['placeholder'];
   /** Makes the editor read-only, in both the rich and source modes. */
@@ -144,11 +147,11 @@ interface EditorProps {
   /** Class on the outer `.meowdown` wrapper div. */
   wrapperClassName?: string;
   /** Imperative handle for the editor. */
-  ref?: Ref<EditorHandle>;
+  handleRef?: Ref<EditorHandle>;
   /** Nodes rendered inside the editor's ProseKit context (rich modes only). */
   children?: ReactNode;
 }
-declare function Editor({
+declare function MeowdownEditor({
   mode,
   initialMarkdown,
   onDocChange,
@@ -163,8 +166,8 @@ declare function Editor({
   spellCheck,
   editorClassName,
   wrapperClassName,
-  ref,
+  handleRef,
   children
 }: EditorProps): import("react").JSX.Element;
 //#endregion
-export { Editor, type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type MarkMode, type RoundTripFidelity, type SelectionHint, type SelectionJSON, type TagItem, type TagSearchHandler, type TypedEditor, type WikilinkItem, type WikilinkSearchHandler, checkRoundTrip, useEditor };
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, MeowdownEditor, type SelectionHint, type SelectionJSON, type TagItem, type TagSearchHandler, type WikilinkItem, type WikilinkSearchHandler, useEditor };

package/dist/index.js

@@ -7,7 +7,7 @@ import { Compartment, EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { clamp } from "@ocavue/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { checkRoundTrip, codeBlockLanguages, defineEditorExtension, defineImages, defineMarkMode, definePlaceholder, defineReadonly, defineWikilinkClickHandler, docToMarkdown, markdownToDoc } from "@meowdown/core";
+import { codeBlockLanguages, defineEditorExtension, defineImages, defineMarkMode, definePlaceholder, defineReadonly, defineWikilinkClickHandler, docToMarkdown, markdownToDoc } from "@meowdown/core";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
 import { ProseKit, defineReactNodeView, useEditor, useEditor as useEditor$1, useExtension } from "@prosekit/react";
@@ -26,6 +26,7 @@ function CodeMirrorEditor({ initialMarkdown, onDocChange, readOnly, ref }) {
 	const containerRef = useRef(null);
 	const viewRef = useRef(null);
 	const readOnlyCompartmentRef = useRef(new Compartment());
+	const suppressDocChangeRef = useRef(false);
 	const onDocChangeRef = useRef(onDocChange);
 	useLayoutEffect(() => {
 		onDocChangeRef.current = onDocChange;
@@ -55,15 +56,20 @@ function CodeMirrorEditor({ initialMarkdown, onDocChange, readOnly, ref }) {
 			}
 			if (markdown == null && !selection) return;
 			const docLength = markdown == null ? view.state.doc.length : markdown.length;
-			view.dispatch({
-				changes: markdown == null ? void 0 : {
-					from: 0,
-					to: view.state.doc.length,
-					insert: markdown
-				},
-				selection: selection ? resolveSelection$1(selection, docLength) : void 0,
-				scrollIntoView: true
-			});
+			suppressDocChangeRef.current = true;
+			try {
+				view.dispatch({
+					changes: markdown == null ? void 0 : {
+						from: 0,
+						to: view.state.doc.length,
+						insert: markdown
+					},
+					selection: selection ? resolveSelection$1(selection, docLength) : void 0,
+					scrollIntoView: true
+				});
+			} finally {
+				suppressDocChangeRef.current = false;
+			}
 		}
 		function setMarkdown(markdown) {
 			setState(markdown);
@@ -104,7 +110,7 @@ function CodeMirrorEditor({ initialMarkdown, onDocChange, readOnly, ref }) {
 					EditorView.lineWrapping,
 					readOnlyCompartmentRef.current.of(EditorState.readOnly.of(initialReadOnlyRef.current)),
 					EditorView.updateListener.of((update) => {
-						if (!update.docChanged) return;
+						if (!update.docChanged || suppressDocChangeRef.current) return;
 						onDocChangeRef.current?.();
 					})
 				]
@@ -429,22 +435,34 @@ function DropIndicator$1() {
 //#endregion
 //#region src/components/editor-extensions.tsx
 function EditorExtensions({ markMode, onDocChange, onWikilinkClick, resolveImageUrl, onImagePaste, onImageSaveError, placeholder, readOnly }) {
-	useExtension(useMemo(() => defineMarkMode(markMode), [markMode]));
-	useExtension(useMemo(() => readOnly ? defineReadonly() : null, [readOnly]));
-	useExtension(useMemo(() => onDocChange ? defineDocChangeHandler(onDocChange) : null, [onDocChange]));
-	useExtension(useMemo(() => onWikilinkClick ? defineWikilinkClickHandler(onWikilinkClick) : null, [onWikilinkClick]));
-	useExtension(useMemo(() => resolveImageUrl ? defineImages({
-		resolveImageUrl,
-		onImagePaste,
-		onImageSaveError
-	}) : null, [
+	useExtension(useMemo(() => {
+		return defineMarkMode(markMode);
+	}, [markMode]));
+	useExtension(useMemo(() => {
+		return readOnly ? defineReadonly() : null;
+	}, [readOnly]));
+	useExtension(useMemo(() => {
+		return onDocChange ? defineDocChangeHandler(onDocChange) : null;
+	}, [onDocChange]));
+	useExtension(useMemo(() => {
+		return onWikilinkClick ? defineWikilinkClickHandler(onWikilinkClick) : null;
+	}, [onWikilinkClick]));
+	useExtension(useMemo(() => {
+		return resolveImageUrl ? defineImages({
+			resolveImageUrl,
+			onImagePaste,
+			onImageSaveError
+		}) : null;
+	}, [
 		resolveImageUrl,
 		onImagePaste,
 		onImageSaveError
 	]));
 	useExtension(useMemo(() => {
-		if (!placeholder) return null;
-		return definePlaceholder({ placeholder });
+		return placeholder ? definePlaceholder({
+			placeholder,
+			strategy: "doc"
+		}) : null;
 	}, [placeholder]));
 	return null;
 }
@@ -686,6 +704,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 		if (initialMarkdown) editor.setContent(markdownToDoc(editor, initialMarkdown));
 		return editor;
 	});
+	const suppressDocChangeRef = useRef(false);
 	useImperativeHandle(ref, () => {
 		function getMarkdown() {
 			return docToMarkdown(editor.state.doc);
@@ -704,7 +723,12 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 				transaction.replaceWith(0, transaction.doc.content.size, doc.content);
 			}
 			if (selection) transaction.setSelection(resolveSelection(transaction.doc, selection)).scrollIntoView();
-			editor.view.dispatch(transaction);
+			suppressDocChangeRef.current = true;
+			try {
+				editor.view.dispatch(transaction);
+			} finally {
+				suppressDocChangeRef.current = false;
+			}
 		}
 		function setMarkdown(markdown) {
 			setState(markdown);
@@ -730,6 +754,13 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 			editor
 		};
 	}, [editor]);
+	const handleDocChange = useMemo(() => {
+		if (!onDocChange) return void 0;
+		return () => {
+			if (suppressDocChangeRef.current) return;
+			onDocChange();
+		};
+	}, [onDocChange]);
 	return /* @__PURE__ */ jsxs(ProseKit, {
 		editor,
 		children: [
@@ -740,7 +771,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 			}),
 			/* @__PURE__ */ jsx(EditorExtensions, {
 				markMode,
-				onDocChange,
+				onDocChange: handleDocChange,
 				onWikilinkClick,
 				resolveImageUrl,
 				onImagePaste,
@@ -760,9 +791,9 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 
 //#endregion
 //#region src/components/editor.tsx
-function Editor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, resolveImageUrl, onImagePaste, onImageSaveError, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, ref, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, resolveImageUrl, onImagePaste, onImageSaveError, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
-	useImperativeHandle(ref, () => {
+	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
 			return childRef.current?.getMarkdown() ?? "";
 		}
@@ -838,4 +869,4 @@ function Editor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onW
 }
 
 //#endregion
-export { Editor, checkRoundTrip, useEditor };
+export { MeowdownEditor, useEditor };

package/dist/style.css

@@ -323,424 +323,6 @@
   flex-shrink: 0;
   font-size: .8125rem;
 }
-.ProseMirror {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  white-space: break-spaces;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
-  font-feature-settings: "liga" 0;
-  position: relative;
-}
-
-.ProseMirror pre {
-  white-space: pre-wrap;
-}
-
-.ProseMirror li {
-  position: relative;
-}
-
-.ProseMirror-hideselection ::selection {
-  background: none;
-}
-
-.ProseMirror-hideselection {
-  caret-color: #0000;
-}
-
-.ProseMirror [draggable][contenteditable="false"] {
-  user-select: text;
-}
-
-.ProseMirror-selectednode {
-  outline: 2px solid #8cf;
-}
-
-li.ProseMirror-selectednode {
-  outline: none;
-}
-
-li.ProseMirror-selectednode:after {
-  content: "";
-  pointer-events: none;
-  border: 2px solid #8cf;
-  position: absolute;
-  inset: -2px -2px -2px -32px;
-}
-
-img.ProseMirror-separator {
-  border: none !important;
-  margin: 0 !important;
-  display: inline !important;
-}
-
-:root {
-  --prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
-  --prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
-  --prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
-}
-
-.prosemirror-flat-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: relative;
-}
-
-.prosemirror-flat-list > .list-marker {
-  text-align: center;
-  width: 1lh;
-  height: 1lh;
-  position: absolute;
-  inset-inline-start: 0;
-}
-
-.prosemirror-flat-list > .list-content {
-  margin-inline-start: 1lh;
-}
-
-.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
-  background-color: currentColor;
-  mask-position: center;
-  mask-size: contain;
-  mask-repeat: no-repeat;
-}
-
-.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
-  mask-image: var(--prosekit-list-bullet-icon);
-}
-
-.prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
-  mask-image: var(--prosekit-list-toggle-open-icon);
-}
-
-.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
-  mask-image: var(--prosekit-list-toggle-closed-icon);
-}
-
-.prosemirror-flat-list[data-list-kind="ordered"] > * {
-  contain: style;
-}
-
-.prosemirror-flat-list[data-list-kind="ordered"]:before {
-  content: counter(prosemirror-flat-list-counter, decimal) ". ";
-  font-variant-numeric: tabular-nums;
-  position: absolute;
-  inset-inline-end: calc(100% - 1lh);
-}
-
-.prosemirror-flat-list[data-list-kind="ordered"] {
-  counter-increment: prosemirror-flat-list-counter;
-}
-
-.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
-  counter-reset: prosemirror-flat-list-counter;
-}
-
-@supports (counter-set: prosemirror-flat-list-counter 1) {
-  :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
-    counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
-  }
-}
-
-@supports not (counter-set: prosemirror-flat-list-counter 1) {
-  :is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
-    counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
-  }
-}
-
-.prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
-  cursor: pointer;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  display: flex;
-}
-
-.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
-  cursor: pointer;
-}
-
-.prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
-  opacity: .4;
-  pointer-events: none;
-}
-
-.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
-  display: none;
-}
-
-:root {
-  --meowdown-text: light-dark(#3f3f46, #d4d4d8);
-  --meowdown-heading: light-dark(#18181b, #fafafa);
-  --meowdown-muted: light-dark(#52525b, #a1a1aa);
-  --meowdown-accent: light-dark(#7c3aed, #c084fc);
-  --meowdown-mark: light-dark(#a78bfa, #8b5cf6);
-  --meowdown-border: light-dark(#e4e4e7, #3f3f46);
-  --meowdown-code-bg: light-dark(#f4f4f5, #18181b);
-  --meowdown-table-header-bg: light-dark(#fafafa, #27272a);
-  --meowdown-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-  --meowdown-node-outline: light-dark(#53f, #8870ff);
-  --meowdown-node-selection: light-dark(#5533ff1a, #8870ff1f);
-  --meowdown-selection: light-dark(#5533ff38, #8870ff4d);
-  --meowdown-gutter: 3.5rem;
-}
-
-.ProseMirror {
-  box-sizing: border-box;
-  padding: 1.25rem var(--meowdown-gutter) 1.75rem;
-  color: var(--meowdown-text);
-  caret-color: var(--meowdown-accent);
-  -webkit-font-smoothing: antialiased;
-  outline: none;
-  font-size: 1.0625rem;
-  line-height: 1.7;
-}
-
-.ProseMirror > * + * {
-  margin-top: .85em;
-}
-
-.ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
-  letter-spacing: -.01em;
-  color: var(--meowdown-heading);
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-.ProseMirror h1 {
-  font-size: 1.75rem;
-}
-
-.ProseMirror h2 {
-  font-size: 1.4rem;
-}
-
-.ProseMirror h3 {
-  font-size: 1.2rem;
-}
-
-.ProseMirror h4 {
-  font-size: 1.1rem;
-}
-
-.ProseMirror h5 {
-  font-size: 1rem;
-}
-
-.ProseMirror h6 {
-  font-size: .95rem;
-}
-
-.ProseMirror a {
-  color: var(--meowdown-accent);
-  text-underline-offset: 2px;
-  text-decoration: underline 1px;
-}
-
-.ProseMirror code {
-  font-family: var(--meowdown-font-mono);
-  background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
-  color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
-  border-radius: .35rem;
-  padding: .1em .35em;
-  font-size: .9em;
-}
-
-.ProseMirror blockquote {
-  border-left: 3px solid color-mix(in oklab, var(--meowdown-accent) 35%, transparent);
-  color: var(--meowdown-muted);
-  margin-left: 0;
-  padding-left: 1rem;
-  font-style: italic;
-}
-
-.ProseMirror ul, .ProseMirror ol {
-  padding-left: 1.5rem;
-}
-
-.ProseMirror ul {
-  list-style: outside;
-}
-
-.ProseMirror ol {
-  list-style: decimal;
-}
-
-.ProseMirror li {
-  margin-top: .25em;
-}
-
-.ProseMirror pre {
-  background: var(--meowdown-code-bg);
-  font-family: var(--meowdown-font-mono);
-  border-radius: .6rem;
-  padding: .9rem 1rem;
-  font-size: .9em;
-  line-height: 1.5;
-  overflow-x: auto;
-}
-
-.ProseMirror pre code {
-  color: inherit;
-  background: none;
-  padding: 0;
-}
-
-.ProseMirror pre code .tok-keyword {
-  color: light-dark(#cf222e, #ff7b72);
-}
-
-.ProseMirror pre code .tok-comment {
-  color: light-dark(#6e7781, #8b949e);
-  font-style: italic;
-}
-
-.ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
-  color: light-dark(#0a3069, #a5d6ff);
-}
-
-.ProseMirror pre code .tok-number, .ProseMirror pre code .tok-bool, .ProseMirror pre code .tok-atom, .ProseMirror pre code .tok-literal {
-  color: light-dark(#0550ae, #79c0ff);
-}
-
-.ProseMirror pre code .tok-className, .ProseMirror pre code .tok-typeName, .ProseMirror pre code .tok-namespace {
-  color: light-dark(#953800, #ffa657);
-}
-
-.ProseMirror pre code .tok-definition {
-  color: light-dark(#8250df, #d2a8ff);
-}
-
-.ProseMirror pre code .tok-macroName, .ProseMirror pre code .tok-meta, .ProseMirror pre code .tok-inserted {
-  color: light-dark(#116329, #7ee787);
-}
-
-.ProseMirror pre code .tok-invalid, .ProseMirror pre code .tok-deleted {
-  color: light-dark(#82071e, #ffa198);
-}
-
-.ProseMirror pre code .tok-heading {
-  color: light-dark(#0550ae, #79c0ff);
-  font-weight: 600;
-}
-
-.ProseMirror pre code .tok-strong {
-  font-weight: 600;
-}
-
-.ProseMirror pre code .tok-emphasis {
-  font-style: italic;
-}
-
-.ProseMirror pre code .tok-link {
-  text-decoration: underline;
-}
-
-.ProseMirror hr {
-  border: none;
-  border-top: 1px solid var(--meowdown-border);
-  margin: 1.5em 0;
-}
-
-.ProseMirror table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  overflow: hidden;
-}
-
-.ProseMirror td, .ProseMirror th {
-  box-sizing: border-box;
-  border: 1px solid var(--meowdown-border);
-  vertical-align: top;
-  text-align: left;
-  padding: .4rem .75rem;
-}
-
-.ProseMirror th {
-  color: var(--meowdown-heading);
-  background: var(--meowdown-table-header-bg);
-  font-weight: 600;
-}
-
-.ProseMirror table.ProseMirror-selectednode td, .ProseMirror table.ProseMirror-selectednode th {
-  border-color: var(--meowdown-node-outline);
-}
-
-.ProseMirror .selectedCell {
-  border: 1px double var(--meowdown-node-outline);
-  background: var(--meowdown-node-selection);
-  --meowdown-selection: transparent;
-  caret-color: #0000;
-}
-
-.ProseMirror ::selection {
-  background: var(--meowdown-selection);
-}
-
-.ProseMirror .ProseMirror-selectednode {
-  --meowdown-selection: transparent;
-  outline: 1px solid var(--meowdown-node-outline);
-  background: var(--meowdown-node-selection);
-  border-radius: 2px;
-}
-
-.ProseMirror pre.ProseMirror-selectednode {
-  border-radius: .6rem;
-}
-
-.ProseMirror.prosekit-dragging {
-  --meowdown-node-selection: transparent;
-}
-
-.ProseMirror .md-tag {
-  background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
-  color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
-  border-radius: .35rem;
-  padding: .1em .35em;
-}
-
-.ProseMirror .md-wikilink {
-  color: var(--meowdown-accent);
-  text-underline-offset: 2px;
-  cursor: pointer;
-  text-decoration: underline 1px dashed;
-}
-
-.ProseMirror .md-image {
-  display: block;
-}
-
-.ProseMirror .md-image img {
-  max-height: var(--meowdown-image-max-height, 24rem);
-  border-radius: var(--meowdown-image-radius, .5rem);
-  max-width: 100%;
-}
-
-.ProseMirror .prosekit-placeholder:before {
-  content: attr(data-placeholder);
-  float: left;
-  pointer-events: none;
-  height: 0;
-  color: var(--meowdown-placeholder, var(--meowdown-muted));
-}
-
-.ProseMirror .md-mark, .ProseMirror .md-link-uri {
-  color: var(--meowdown-mark);
-  opacity: .7;
-}
-
-.ProseMirror[data-mark-mode="hide"] .md-mark, .ProseMirror[data-mark-mode="hide"] .md-link-uri, .ProseMirror[data-mark-mode="focus"] .md-mark, .ProseMirror[data-mark-mode="focus"] .md-link-uri {
-  display: none;
-}
-
-.ProseMirror[data-mark-mode="focus"] .md-mark:has(.show), .ProseMirror[data-mark-mode="focus"] .md-link-uri:has(.show) {
-  display: inline;
-}
-
 .meowdown {
   flex-direction: column;
   flex: 1 0 auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@prosekit/pm": "^0.1.18",
     "@prosekit/react": "^0.8.0-beta.0",
     "clsx": "^2.1.1",
-    "@meowdown/core": "0.4.0"
+    "@meowdown/core": "0.7.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -43,7 +43,7 @@
     }
   },
   "devDependencies": {
-    "@css-modules-kit/codegen": "^1.2.0",
+    "@css-modules-kit/codegen": "^1.3.0",
     "@ocavue/tsconfig": "^0.7.1",
     "@tsdown/css": "^0.22.2",
     "@types/react": "^19.2.17",