@meowdown/react 0.0.2 → 0.2.0

package/dist/index.d.ts

@@ -1,7 +1,26 @@
-//#region src/comp.d.ts
-declare function MyReactComponent(): import("react").JSX.Element;
+import { MarkMode, MarkMode as MarkMode$1, TypedEditor, TypedEditor as TypedEditor$1 } from "@meowdown/core";
+
+//#region src/editor.d.ts
+interface ChangeHandlerOptions {
+  editor: TypedEditor$1;
+  getMarkdown: () => string;
+}
+interface EditorProps {
+  markMode?: MarkMode$1;
+  /**
+   * The initial content of the editor, as a Markdown string. Only the value provided on
+   * the first render is used; later changes are ignored.
+   */
+  initialContent?: string;
+  /**
+   * A callback function that is called whenever the content of the editor changes. This function should be memoized.
+   */
+  onChange?: (options: ChangeHandlerOptions) => void;
+}
+declare function Editor({
+  markMode,
+  initialContent,
+  onChange
+}: EditorProps): import("react").JSX.Element;
 //#endregion
-//#region src/index.d.ts
-declare const b: number;
-//#endregion
-export { MyReactComponent, b };
+export { type ChangeHandlerOptions, Editor, type EditorProps, type MarkMode, type TypedEditor };

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=1+e;export{i as MyReactComponent,a as b};
+import{defineEditorExtension as e,defineMarkMode as t,docToMarkdown as n,markdownToDoc as r}from"@meowdown/core";import{createEditor as i,defineDocChangeHandler as a}from"@prosekit/core";import{ProseKit as o,useExtension as s}from"@prosekit/react";import{useMemo as c,useState as l}from"react";import{jsx as u}from"react/jsx-runtime";function d({markMode:d=`focus`,initialContent:f,onChange:p}){let[m]=l(()=>{let t=i({extension:e()});return f&&t.setContent(r(t,f)),t});s(c(()=>t(d),[d]),{editor:m});let h=c(()=>({editor:m,getMarkdown:()=>n(m.state.doc)}),[m]);return s(c(()=>p?a(()=>{p(h)}):null,[p,h]),{editor:m}),u(o,{editor:m,children:u(`div`,{ref:m.mount})})}export{d as Editor};

package/dist/style.css

@@ -0,0 +1,194 @@
+.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%);
+}

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",
     "url": "https://github.com/prosekit/meowdown"
   },
   "exports": {
-    ".": {
-      "@meowdown/source": "./src/index.ts",
-      "default": "./dist/index.js"
-    }
+    ".": "./dist/index.js",
+    "./style.css": "./dist/style.css"
   },
   "files": [
     "./dist/**/*.js",
-    "./dist/**/*.d.ts"
+    "./dist/**/*.d.ts",
+    "./dist/**/*.css"
   ],
   "dependencies": {
-    "@meowdown/core": "0.0.2"
+    "@prosekit/core": "^0.12.3",
+    "@prosekit/react": "^0.7.6",
+    "@meowdown/core": "0.2.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -33,14 +34,16 @@
     }
   },
   "devDependencies": {
-    "@ocavue/tsconfig": "^0.7.0",
+    "@ocavue/tsconfig": "^0.7.1",
+    "@tsdown/css": "^0.22.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser-playwright": "^4.0.0",
+    "@vitest/browser-playwright": "^4.1.8",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.0",
-    "vitest": "^4.0.0"
+    "tsdown": "^0.22.2",
+    "vitest": "^4.1.8",
+    "vitest-browser-react": "^2.2.0"
   },
   "publishConfig": {
     "access": "public"