@meowdown/react 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,68 @@
+# @meowdown/react
+
+React components for Meowdown, a hybrid (live-preview) Markdown editor.
+
+## Usage
+
+```tsx
+import { Editor, type EditorHandle } from '@meowdown/react'
+import '@meowdown/react/style.css'
+import { useRef, useCallback } from 'react'
+
+export function App() {
+  const ref = useRef<EditorHandle>(null)
+  const handleDocChange = useCallback(() => {
+    console.log(ref.current?.getMarkdown())
+  }, [])
+
+  return <Editor ref={ref} mode="focus" initialMarkdown="# Hello" onDocChange={handleDocChange} />
+}
+```
+
+## API
+
+### `<Editor>`
+
+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.
+
+- `mode?: 'focus' | 'show' | 'hide' | 'source'`: defaults to `'focus'`.
+  - `'focus'`: Markdown syntax is hidden, revealed around the cursor.
+  - `'show'`: Markdown syntax is always visible.
+  - `'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.
+- `onTagSearch?: (query: string) => string[] | Promise<string[]>`: enables the tag menu, which opens when typing `#` followed by text in a rich mode; returns the tags to show for a query (lowercased, punctuation stripped). Omit to disable.
+- `onWikilinkSearch?: (query: string) => string[] | Promise<string[]>`: enables the wikilink menu, which opens as soon as `[[` is typed in a rich mode; returns the note names to show for a query (lowercased, punctuation stripped, may be empty). Selecting a note inserts `[[Note Name]]`. Omit to disable.
+- `ref?: Ref<EditorHandle>`
+
+### `EditorHandle`
+
+Imperative handle for the editor, attached via `ref`.
+
+- `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.
+
+## 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). Colors follow the page's `color-scheme`; customize via the `--meowdown-*` CSS variables documented there. The editor reserves a horizontal gutter (`--meowdown-gutter`) so the block handle has room to the left of the hovered block.
+
+Selection colors are standalone variables (independent from `--meowdown-accent`):
+
+- `--meowdown-node-outline`: outline of a selected node (e.g. a block grabbed by its handle).
+- `--meowdown-node-selection`: background wash of a selected node.
+- `--meowdown-selection`: text `::selection` background.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,7 +1,71 @@
-//#region src/comp.d.ts
-declare function MyReactComponent(): import("react").JSX.Element;
+import { Ref } from "react";
+import { MarkMode, MarkMode as MarkMode$1, TypedEditor } from "@meowdown/core";
+
+//#region src/components/types.d.ts
+interface EditorHandle {
+  /**
+   * Serializes the current document to Markdown. Can be expensive on large
+   * documents; call it on demand (e.g. throttled) instead of on every change.
+   */
+  getMarkdown: () => string;
+}
+/**
+ * Searches tags for the tag menu. Receives the query typed after `#`
+ * (lowercased, punctuation stripped) and returns the tags to show, either
+ * synchronously or as a promise.
+ */
+type TagSearchHandler = (query: string) => string[] | Promise<string[]>;
+/**
+ * Searches notes for the wikilink menu. Receives the query typed after
+ * `[[` (lowercased, punctuation stripped, may be empty or contain spaces)
+ * and returns the note names to show, either synchronously or as a promise.
+ */
+type WikilinkSearchHandler = (query: string) => string[] | Promise<string[]>;
 //#endregion
-//#region src/index.d.ts
-declare const b: any;
+//#region src/components/editor.d.ts
+type EditorMode = MarkMode$1 | 'source';
+interface EditorProps {
+  /**
+   * The editor mode. The three rich modes ('focus', 'show', 'hide') render a ProseKit
+   * editor; 'source' renders a CodeMirror editor showing the raw Markdown text.
+   * Content carries over when switching between the two editor families, but undo
+   * history and selection do not. Defaults to 'focus'.
+   */
+  mode?: EditorMode;
+  /**
+   * The initial Markdown text of the editor. Only the value provided on the
+   * first render is used; later changes are ignored.
+   */
+  initialMarkdown?: string;
+  /** Called on every document change. */
+  onDocChange?: VoidFunction;
+  /**
+   * Searches tags for the tag menu, which opens when typing `#` followed by
+   * text in a rich mode. Receives the query (lowercased, punctuation
+   * stripped) and returns the tags to show, synchronously or as a promise.
+   * Pass a stable function (e.g. from `useCallback`). Omit to disable the
+   * tag menu. Ignored in source mode.
+   */
+  onTagSearch?: TagSearchHandler;
+  /**
+   * Searches notes for the wikilink menu, which opens as soon as `[[` is
+   * typed in a rich mode. Receives the query (lowercased, punctuation
+   * stripped, may be empty) and returns the note names to show,
+   * synchronously or as a promise. Pass a stable function (e.g. from
+   * `useCallback`). Omit to disable the wikilink menu. Ignored in source
+   * mode.
+   */
+  onWikilinkSearch?: WikilinkSearchHandler;
+  /** Imperative handle for the editor. */
+  ref?: Ref<EditorHandle>;
+}
+declare function Editor({
+  mode,
+  initialMarkdown,
+  onDocChange,
+  onTagSearch,
+  onWikilinkSearch,
+  ref
+}: EditorProps): import("react").JSX.Element;
 //#endregion
-export { MyReactComponent, b };
+export { Editor, type EditorHandle, type EditorMode, type EditorProps, type MarkMode, type TagSearchHandler, type TypedEditor, type WikilinkSearchHandler };

package/dist/index.js

@@ -1 +1 @@
-import{a as e}from"@meowdown/core";import{useState as t}from"react";import{jsx as n,jsxs as r}from"react/jsx-runtime";function i(){let[e,i]=t(0);return r(`div`,{children:[n(`h1`,{children:`Hello, React!`}),r(`p`,{children:[`Count: `,e]}),n(`p`,{onClick:()=>i(e+1),children:`This is a simple React component.`})]})}const a=2+e;export{i as MyReactComponent,a as b};
+import{useCallback as e,useEffect as t,useImperativeHandle as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{defaultKeymap as s,history as c,historyKeymap as l}from"@codemirror/commands";import{markdown as u,markdownLanguage as d}from"@codemirror/lang-markdown";import{defaultHighlightStyle as f,syntaxHighlighting as p}from"@codemirror/language";import{EditorState as m}from"@codemirror/state";import{EditorView as h,keymap as g}from"@codemirror/view";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{defineEditorExtension as y,defineMarkMode as b,docToMarkdown as x,markdownToDoc as S}from"@meowdown/core";import{canUseRegexLookbehind as C,createEditor as w,defineDocChangeHandler as T}from"@prosekit/core";import{ProseKit as E,useEditor as D,useExtension as O}from"@prosekit/react";import{BlockHandleAdd as k,BlockHandleDraggable as A,BlockHandlePopup as j,BlockHandlePositioner as M,BlockHandleRoot as N}from"@prosekit/react/block-handle";import{DropIndicator as P}from"@prosekit/react/drop-indicator";import{AutocompleteEmpty as F,AutocompleteItem as I,AutocompletePopup as L,AutocompletePositioner as R,AutocompleteRoot as z}from"@prosekit/react/autocomplete";function B({initialMarkdown:e,onDocChange:t,ref:i}){let o=a(null),v=a(null),y=a(t);r(()=>{y.current=t},[t]);let b=a(e??``);return n(i,()=>({getMarkdown:()=>v.current?.state.doc.toString()??b.current}),[]),r(()=>{let e=o.current;if(!e)return;let t=new h({parent:e,state:m.create({doc:b.current,extensions:[c(),g.of([...s,...l]),u({base:d}),p(f,{fallback:!0}),h.lineWrapping,h.updateListener.of(e=>{e.docChanged&&y.current?.()})]})});return v.current=t,()=>{t.destroy(),v.current=null}},[]),_(`div`,{ref:o,"data-editor":`codemirror`})}function V(){return v(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[_(`circle`,{cx:`9`,cy:`5`,r:`1`}),_(`circle`,{cx:`9`,cy:`12`,r:`1`}),_(`circle`,{cx:`9`,cy:`19`,r:`1`}),_(`circle`,{cx:`15`,cy:`5`,r:`1`}),_(`circle`,{cx:`15`,cy:`12`,r:`1`}),_(`circle`,{cx:`15`,cy:`19`,r:`1`})]})}function H(){return v(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[_(`path`,{d:`M5 12h14`}),_(`path`,{d:`M12 5v14`})]})}function U(){return _(N,{children:_(M,{className:`meowdown-block-handle-positioner`,children:v(j,{className:`meowdown-block-handle`,"data-testid":`block-handle`,children:[_(k,{className:`meowdown-block-handle-add`,"data-testid":`block-handle-add`,children:_(H,{})}),_(A,{className:`meowdown-block-handle-drag`,"data-testid":`block-handle-drag`,children:_(V,{})})]})})})}function W(){return _(P,{className:`meowdown-drop-indicator`,"data-testid":`drop-indicator`})}const G=C()?/(?<!\S)\/(\S.*)?$/u:/\/(\S.*)?$/u;function K({label:e,kbd:t,onSelect:n}){return v(I,{className:`meowdown-autocomplete-menu-item`,onSelect:n,children:[_(`span`,{children:e}),t&&_(`kbd`,{children:t})]})}function q(){let e=D();return _(z,{regex:G,children:_(R,{className:`meowdown-autocomplete-menu-positioner`,children:v(L,{className:`meowdown-autocomplete-menu`,"data-testid":`slash-menu`,children:[_(K,{label:`Heading 1`,kbd:`#`,onSelect:()=>e.commands.setHeading({level:1})}),_(K,{label:`Heading 2`,kbd:`##`,onSelect:()=>e.commands.setHeading({level:2})}),_(K,{label:`Heading 3`,kbd:`###`,onSelect:()=>e.commands.setHeading({level:3})}),_(K,{label:`Heading 4`,kbd:`####`,onSelect:()=>e.commands.setHeading({level:4})}),_(K,{label:`Blockquote`,kbd:`>`,onSelect:()=>e.commands.setBlockquote()}),_(K,{label:`Bullet list`,kbd:`-`,onSelect:()=>e.commands.wrapInList({kind:`bullet`})}),_(K,{label:`Ordered list`,kbd:`1.`,onSelect:()=>e.commands.wrapInList({kind:`ordered`})}),_(K,{label:`Task list`,kbd:`[]`,onSelect:()=>e.commands.wrapInList({kind:`task`})}),_(K,{label:`Code block`,kbd:"```",onSelect:()=>e.commands.setCodeBlock()}),_(K,{label:`Table`,onSelect:()=>e.commands.insertTable({row:3,col:3})}),_(F,{className:`meowdown-autocomplete-menu-item`,children:`No results`})]})})})}function J(){return!0}const Y=C()?/(?<!\S)#[\da-z]+$/iu:/#[\da-z]+$/iu;function X({onTagSearch:n}){let r=D(),[i,a]=o(!1),[s,c]=o(``),[l,u]=o([]),[d,f]=o(!1),p=e(async(e,t)=>{if(t.aborted)return;f(!0);let r=await n(e);t.aborted||(u(r),f(!1))},[n]);return t(()=>{if(!i)return;let e=new AbortController;return queueMicrotask(()=>{p(s,e.signal)}),()=>{e.abort()}},[i,s,p]),_(z,{regex:Y,filter:J,onOpenChange:e=>a(e.detail),onQueryChange:e=>c(e.detail),children:_(R,{className:`meowdown-autocomplete-menu-positioner`,children:v(L,{className:`meowdown-autocomplete-menu`,"data-testid":`tag-menu`,children:[l.map(e=>v(I,{className:`meowdown-autocomplete-menu-item`,onSelect:()=>r.commands.insertText({text:`#${e} `}),children:[`#`,e]},e)),_(F,{className:`meowdown-autocomplete-menu-item`,children:d?`Loading...`:`No tags found`})]})})})}const Z=/\[\[[^[\]]*$/u;function Q({onWikilinkSearch:n}){let r=D(),[i,a]=o(!1),[s,c]=o(``),[l,u]=o([]),[d,f]=o(!1),p=e(async(e,t)=>{if(t.aborted)return;f(!0);let r=await n(e);t.aborted||(u(r),f(!1))},[n]);return t(()=>{if(!i)return;let e=new AbortController;return queueMicrotask(()=>{p(s,e.signal)}),()=>{e.abort()}},[i,s,p]),_(z,{regex:Z,filter:J,onOpenChange:e=>a(e.detail),onQueryChange:e=>c(e.detail),children:_(R,{className:`meowdown-autocomplete-menu-positioner`,children:v(L,{className:`meowdown-autocomplete-menu`,"data-testid":`wikilink-menu`,children:[l.map(e=>_(I,{className:`meowdown-autocomplete-menu-item`,onSelect:()=>r.commands.insertText({text:`[[${e}]]`}),children:e},e)),_(F,{className:`meowdown-autocomplete-menu-item`,children:d?`Loading...`:`No notes found`})]})})})}function $({markMode:e=`focus`,initialMarkdown:t,onDocChange:r,onTagSearch:a,onWikilinkSearch:s,ref:c}){let[l]=o(()=>{let e=w({extension:y()});return t&&e.setContent(S(e,t)),e});return n(c,()=>({getMarkdown:()=>x(l.state.doc)}),[l]),O(i(()=>b(e),[e]),{editor:l}),O(i(()=>r?T(()=>{r()}):null,[r]),{editor:l}),v(E,{editor:l,children:[_(`div`,{ref:l.mount}),_(U,{}),_(W,{}),_(q,{}),a&&_(X,{onTagSearch:a}),s&&_(Q,{onWikilinkSearch:s})]})}function ee({mode:e=`focus`,initialMarkdown:t,onDocChange:r,onTagSearch:i,onWikilinkSearch:o,ref:s}){let c=a(null);n(s,()=>({getMarkdown:()=>c.current?.getMarkdown()??``}),[]);let l=c.current?.getMarkdown()??t??``;return _(`div`,{className:`meowdown`,children:e===`source`?_(B,{ref:c,initialMarkdown:l,onDocChange:r}):_($,{ref:c,markMode:e,initialMarkdown:l,onDocChange:r,onTagSearch:i,onWikilinkSearch:o})})}export{ee as Editor};

package/dist/style.css

@@ -0,0 +1,528 @@
+.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;
+}
+
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+
+.ProseMirror table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ProseMirror td, .ProseMirror th {
+  box-sizing: border-box;
+  vertical-align: top;
+  border-width: 1px;
+  padding-left: .75rem;
+  padding-right: .75rem;
+  position: relative;
+}
+
+prosekit-table-handle-drop-indicator {
+  background-color: highlighttext;
+}
+
+.ProseMirror .column-resize-handle {
+  z-index: 20;
+  pointer-events: none;
+  background-color: highlighttext;
+  width: 4px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -2px;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror .selectedCell {
+  --color: 210, 100%, 56%;
+  border: 1px double hsl(var(--color));
+  background-color: hsla(var(--color), 20%);
+}
+
+: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-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --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 hr {
+  border: none;
+  border-top: 1px solid var(--meowdown-border);
+  margin: 1.5em 0;
+}
+
+.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;
+  text-decoration: underline 1px dashed;
+}
+
+.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-autocomplete-menu-positioner {
+  z-index: 50;
+  width: min-content;
+  height: min-content;
+  display: block;
+  overflow: visible;
+}
+
+.meowdown-autocomplete-menu {
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+  white-space: nowrap;
+  user-select: none;
+  border: 1px solid var(--meowdown-border);
+  background: light-dark(#fff, #18181b);
+  border-radius: .75rem;
+  flex-direction: column;
+  min-width: 15rem;
+  max-height: 25rem;
+  padding: .25rem;
+  display: flex;
+  overflow-y: auto;
+  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+}
+
+.meowdown-autocomplete-menu-item {
+  box-sizing: border-box;
+  color: var(--meowdown-text);
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+  border-radius: .5rem;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  padding: .375rem .75rem;
+  scroll-margin: .25rem;
+  font-size: .875rem;
+  display: flex;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &[data-highlighted] {
+    background: light-dark(#f4f4f5, #27272a);
+  }
+
+  & kbd {
+    font-family: var(--meowdown-font-mono);
+    color: var(--meowdown-muted);
+    opacity: .8;
+    font-size: .75rem;
+  }
+}
+
+.meowdown-block-handle-positioner {
+  z-index: 50;
+  width: min-content;
+  height: min-content;
+  transition: transform .1s ease-out;
+  display: block;
+  overflow: visible;
+}
+
+.meowdown-block-handle {
+  box-sizing: border-box;
+  transform-origin: var(--transform-origin);
+  transition: opacity .1s, scale .1s;
+  display: flex;
+
+  &[data-state="closed"] {
+    opacity: 0;
+    transition-duration: .15s;
+    scale: .95;
+  }
+
+  @starting-style {
+    opacity: 0;
+    scale: .95;
+  }
+}
+
+.meowdown-block-handle-add, .meowdown-block-handle-drag {
+  box-sizing: border-box;
+  height: 1.5rem;
+  color: color-mix(in oklab, var(--meowdown-muted) 50%, transparent);
+  border-radius: .25rem;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  &:hover {
+    background: light-dark(#f4f4f5, #27272a);
+  }
+
+  & svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: block;
+  }
+}
+
+.meowdown-block-handle-add {
+  cursor: pointer;
+  width: 1.5rem;
+}
+
+.meowdown-block-handle-drag {
+  cursor: grab;
+  width: 1.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .meowdown-block-handle-positioner, .meowdown-block-handle {
+    transition: none;
+  }
+}
+
+.meowdown-drop-indicator {
+  z-index: 50;
+  background: var(--meowdown-accent);
+  transition: all .15s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .meowdown-drop-indicator {
+    transition: none;
+  }
+}
+
+:root {
+  --meowdown-node-outline: light-dark(#53f, #8870ff);
+  --meowdown-node-selection: light-dark(#5533ff1a, #8870ff1f);
+  --meowdown-selection: light-dark(#5533ff38, #8870ff4d);
+}
+
+.meowdown {
+  flex-direction: column;
+  flex: 1 0 auto;
+  display: flex;
+
+  & .ProseMirror {
+    flex: 1 0 auto;
+
+    & ::selection {
+      background: var(--meowdown-selection);
+    }
+
+    & .ProseMirror-selectednode {
+      outline: 1px solid var(--meowdown-node-outline);
+      background: var(--meowdown-node-selection);
+      border-radius: 2px;
+    }
+
+    & pre.ProseMirror-selectednode {
+      border-radius: .6rem;
+    }
+
+    & .ProseMirror-selectednode {
+      --meowdown-selection: transparent;
+    }
+
+    &.prosekit-dragging {
+      --meowdown-node-selection: transparent;
+    }
+  }
+
+  & [data-editor="codemirror"] {
+    flex: 1 0 auto;
+    display: flex;
+
+    & .cm-editor {
+      flex: 1;
+      font-size: .95rem;
+
+      &.cm-focused {
+        outline: none;
+      }
+    }
+
+    & .cm-content {
+      padding: 1.25rem var(--meowdown-gutter) 1.75rem;
+      font-family: var(--meowdown-font-mono);
+      caret-color: var(--meowdown-accent);
+    }
+  }
+}