@meowdown/react 0.7.0 → 0.8.0

package/README.md

@@ -45,7 +45,7 @@ The Markdown editor component. Renders inside a `div.meowdown` wrapper that fill
 - `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.
+- `onImagePaste?: (file: File) => string | undefined | Promise<string | undefined>`: persists a pasted or dropped image file and returns its markdown `src` (or `undefined` to decline), synchronously or as a promise. 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.

package/dist/index.js

@@ -10,11 +10,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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";
+import { ProseKit, defineReactNodeView, useEditor, useEditor as useEditor$1, useEditorDerivedValue, useExtension } from "@prosekit/react";
 import { Combobox } from "@base-ui/react/combobox";
 import { BlockHandleAdd, BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
 import { DropIndicator } from "@prosekit/react/drop-indicator";
 import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from "@prosekit/react/autocomplete";
+import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
+import { TableHandleColumnMenuRoot, TableHandleColumnMenuTrigger, TableHandleColumnPopup, TableHandleColumnPositioner, TableHandleDragPreview, TableHandleDropIndicator, TableHandleRoot, TableHandleRowMenuRoot, TableHandleRowMenuTrigger, TableHandleRowPopup, TableHandleRowPositioner } from "@prosekit/react/table-handle";
 
 //#region src/components/codemirror-editor.tsx
 function resolveSelection$1(selection, docLength) {
@@ -545,7 +547,8 @@ function SlashMenu() {
 						label: "Table",
 						onSelect: () => editor.commands.insertTable({
 							row: 3,
-							col: 3
+							col: 3,
+							header: true
 						})
 					}),
 					/* @__PURE__ */ jsx(AutocompleteEmpty, {
@@ -558,6 +561,212 @@ function SlashMenu() {
 	});
 }
 
+//#endregion
+//#region src/components/icons/grip-horizontal-icon.tsx
+function GripHorizontalIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "9",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "19",
+				cy: "9",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "5",
+				cy: "9",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "15",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "19",
+				cy: "15",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "5",
+				cy: "15",
+				r: "1"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/table-handle.module.css
+var table_handle_module_default = {
+	"ColumnPopup": "meow_ColumnPopup_hpZLgq",
+	"MenuItem": "meow_MenuItem_hpZLgq",
+	"MenuPopup": "meow_MenuPopup_hpZLgq",
+	"MenuPositioner": "meow_MenuPositioner_hpZLgq",
+	"Positioner": "meow_Positioner_hpZLgq",
+	"RowPopup": "meow_RowPopup_hpZLgq",
+	"Trigger": "meow_Trigger_hpZLgq"
+};
+
+//#endregion
+//#region src/components/table-handle.tsx
+function getTableHandleState(editor) {
+	const commands = editor.commands;
+	return {
+		addTableColumnBefore: {
+			canExec: commands.addTableColumnBefore.canExec(),
+			command: () => commands.addTableColumnBefore()
+		},
+		addTableColumnAfter: {
+			canExec: commands.addTableColumnAfter.canExec(),
+			command: () => commands.addTableColumnAfter()
+		},
+		addTableRowAbove: {
+			canExec: commands.addTableRowAbove.canExec(),
+			command: () => commands.addTableRowAbove()
+		},
+		addTableRowBelow: {
+			canExec: commands.addTableRowBelow.canExec(),
+			command: () => commands.addTableRowBelow()
+		},
+		deleteCellSelection: {
+			canExec: commands.deleteCellSelection.canExec(),
+			command: () => commands.deleteCellSelection()
+		},
+		deleteTableColumn: {
+			canExec: commands.deleteTableColumn.canExec(),
+			command: () => commands.deleteTableColumn()
+		},
+		deleteTableRow: {
+			canExec: commands.deleteTableRow.canExec(),
+			command: () => commands.deleteTableRow()
+		},
+		deleteTable: {
+			canExec: commands.deleteTable.canExec(),
+			command: () => commands.deleteTable()
+		}
+	};
+}
+function TableHandle() {
+	const state = useEditorDerivedValue(getTableHandleState);
+	return /* @__PURE__ */ jsxs(TableHandleRoot, { children: [
+		/* @__PURE__ */ jsx(TableHandleDragPreview, {}),
+		/* @__PURE__ */ jsx(TableHandleDropIndicator, {}),
+		/* @__PURE__ */ jsx(TableHandleColumnPositioner, {
+			className: table_handle_module_default.Positioner,
+			children: /* @__PURE__ */ jsx(TableHandleColumnPopup, {
+				className: table_handle_module_default.ColumnPopup,
+				children: /* @__PURE__ */ jsxs(TableHandleColumnMenuRoot, { children: [/* @__PURE__ */ jsx(TableHandleColumnMenuTrigger, {
+					className: table_handle_module_default.Trigger,
+					"data-testid": "table-handle-column",
+					children: /* @__PURE__ */ jsx(GripHorizontalIcon, {})
+				}), /* @__PURE__ */ jsx(MenuPositioner, {
+					className: table_handle_module_default.MenuPositioner,
+					children: /* @__PURE__ */ jsxs(MenuPopup, {
+						className: table_handle_module_default.MenuPopup,
+						"data-testid": "table-handle-column-menu",
+						children: [
+							state.addTableColumnBefore.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-insert-left",
+								onSelect: state.addTableColumnBefore.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Insert Left" })
+							}),
+							state.addTableColumnAfter.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-insert-right",
+								onSelect: state.addTableColumnAfter.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Insert Right" })
+							}),
+							state.deleteCellSelection.canExec && /* @__PURE__ */ jsxs(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-clear-column",
+								onSelect: state.deleteCellSelection.command,
+								children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
+							}),
+							state.deleteTableColumn.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-delete-column",
+								onSelect: state.deleteTableColumn.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Delete Column" })
+							}),
+							state.deleteTable.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-danger": "",
+								"data-testid": "table-delete-table-column",
+								onSelect: state.deleteTable.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+							})
+						]
+					})
+				})] })
+			})
+		}),
+		/* @__PURE__ */ jsx(TableHandleRowPositioner, {
+			placement: "left",
+			className: table_handle_module_default.Positioner,
+			children: /* @__PURE__ */ jsx(TableHandleRowPopup, {
+				className: table_handle_module_default.RowPopup,
+				children: /* @__PURE__ */ jsxs(TableHandleRowMenuRoot, { children: [/* @__PURE__ */ jsx(TableHandleRowMenuTrigger, {
+					className: table_handle_module_default.Trigger,
+					"data-testid": "table-handle-row",
+					children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
+				}), /* @__PURE__ */ jsx(MenuPositioner, {
+					className: table_handle_module_default.MenuPositioner,
+					children: /* @__PURE__ */ jsxs(MenuPopup, {
+						className: table_handle_module_default.MenuPopup,
+						"data-testid": "table-handle-row-menu",
+						children: [
+							state.addTableRowAbove.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-insert-above",
+								onSelect: state.addTableRowAbove.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Insert Above" })
+							}),
+							state.addTableRowBelow.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-insert-below",
+								onSelect: state.addTableRowBelow.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Insert Below" })
+							}),
+							state.deleteCellSelection.canExec && /* @__PURE__ */ jsxs(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-clear-row",
+								onSelect: state.deleteCellSelection.command,
+								children: [/* @__PURE__ */ jsx("span", { children: "Clear Contents" }), /* @__PURE__ */ jsx("kbd", { children: "Del" })]
+							}),
+							state.deleteTableRow.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-testid": "table-delete-row",
+								onSelect: state.deleteTableRow.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Delete Row" })
+							}),
+							state.deleteTable.canExec && /* @__PURE__ */ jsx(MenuItem, {
+								className: table_handle_module_default.MenuItem,
+								"data-danger": "",
+								"data-testid": "table-delete-table-row",
+								onSelect: state.deleteTable.command,
+								children: /* @__PURE__ */ jsx("span", { children: "Delete Table" })
+							})
+						]
+					})
+				})] })
+			})
+		})
+	] });
+}
+
 //#endregion
 //#region src/utils/returns-true.ts
 function returnsTrue() {
@@ -780,6 +989,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 				readOnly
 			}),
 			/* @__PURE__ */ jsx(BlockHandle, {}),
+			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
 			/* @__PURE__ */ jsx(DropIndicator$1, {}),
 			/* @__PURE__ */ jsx(SlashMenu, {}),
 			onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),

package/dist/style.css

@@ -323,6 +323,146 @@
   flex-shrink: 0;
   font-size: .8125rem;
 }
+.meow_Positioner_hpZLgq, .meow_MenuPositioner_hpZLgq {
+  z-index: 50;
+  width: min-content;
+  height: min-content;
+  transition: transform .1s ease-out;
+  display: block;
+  overflow: visible;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.meow_ColumnPopup_hpZLgq {
+  transform: translateY(50%);
+}
+
+.meow_RowPopup_hpZLgq {
+  transform: translateX(50%);
+}
+
+.meow_ColumnPopup_hpZLgq, .meow_RowPopup_hpZLgq {
+  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;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.meow_Trigger_hpZLgq {
+  box-sizing: border-box;
+  border: 1px solid var(--meowdown-border);
+  color: color-mix(in oklab, var(--meowdown-muted) 50%, transparent);
+  cursor: grab;
+  background: light-dark(#fff, #18181b);
+  border-radius: .25rem;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  transition: background-color .1s;
+  display: flex;
+  overflow: clip;
+
+  &:hover {
+    background: light-dark(#f4f4f5, #27272a);
+  }
+
+  & svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: block;
+  }
+}
+
+.meow_MenuPopup_hpZLgq {
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+  white-space: nowrap;
+  user-select: none;
+  border: 1px solid var(--meowdown-border);
+  min-width: 8rem;
+  max-height: 25rem;
+  transform-origin: var(--transform-origin);
+  background: light-dark(#fff, #18181b);
+  border-radius: .75rem;
+  outline: none;
+  flex-direction: column;
+  padding: .25rem;
+  transition: opacity .1s, scale .1s;
+  display: flex;
+  overflow: auto;
+  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+
+  &[data-state="closed"] {
+    opacity: 0;
+    transition-duration: .15s;
+    scale: .95;
+  }
+
+  @starting-style {
+    opacity: 0;
+    scale: .95;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.meow_MenuItem_hpZLgq {
+  box-sizing: border-box;
+  color: var(--meowdown-text);
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+  border-radius: .5rem;
+  outline: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  padding: .375rem .75rem;
+  scroll-margin: .25rem;
+  font-size: .875rem;
+  display: flex;
+
+  &[data-highlighted] {
+    background: light-dark(#f4f4f5, #27272a);
+  }
+
+  &[data-danger] {
+    color: light-dark(#ef4444, #f87171);
+  }
+
+  &[data-disabled="true"] {
+    pointer-events: none;
+    opacity: .5;
+  }
+
+  & kbd {
+    font-family: var(--meowdown-font-mono);
+    color: var(--meowdown-muted);
+    opacity: .8;
+    font-size: .75rem;
+  }
+}
 .meowdown {
   flex-direction: column;
   flex: 1 0 auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.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.7.0"
+    "@meowdown/core": "0.8.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",