Implement inline and node decorations

demo/main.tsx

@@ -1,9 +1,27 @@
-import { baseKeymap, toggleMark } from "prosemirror-commands";
+import {
+  baseKeymap,
+  chainCommands,
+  createParagraphNear,
+  deleteSelection,
+  joinBackward,
+  liftEmptyBlock,
+  newlineInCode,
+  selectNodeBackward,
+  splitBlock,
+  toggleMark,
+} from "prosemirror-commands";
 import { keymap } from "prosemirror-keymap";
 import { Schema } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
 import "prosemirror-view/style/prosemirror.css";
-import React, { Ref, forwardRef } from "react";
+import React, {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  Ref,
+  forwardRef,
+  useState,
+} from "react";
 import { createRoot } from "react-dom/client";
 
 import {
@@ -49,14 +67,39 @@ const schema = new Schema({
 
 const editorState = EditorState.create({
   schema,
+  doc: schema.nodes.doc.create({}, [
+    schema.nodes.paragraph.create(
+      {},
+      schema.text("This is the first paragraph")
+    ),
+    schema.nodes.paragraph.create(
+      {},
+      schema.text("This is the second paragraph")
+    ),
+    schema.nodes.paragraph.create(
+      {},
+      schema.text("This is the third paragraph")
+    ),
+  ]),
   plugins: [keymap(baseKeymap)],
 });
 
 const Paragraph = forwardRef(function Paragraph(
-  { children }: NodeViewComponentProps,
+  {
+    children,
+    className,
+  }: NodeViewComponentProps &
+    DetailedHTMLProps<
+      HTMLAttributes<HTMLParagraphElement>,
+      HTMLParagraphElement
+    >,
   ref: Ref<HTMLParagraphElement>
 ) {
-  return <p ref={ref}>{children}</p>;
+  return (
+    <p ref={ref} className={className}>
+      {children}
+    </p>
+  );
 });
 
 function DemoEditor() {
@@ -65,8 +108,24 @@ function DemoEditor() {
       <h1>React ProseMirror Demo</h1>
       <EditorView
         defaultState={editorState}
+        decorations={DecorationSet.create(editorState.doc, [
+          Decoration.inline(5, 15, { class: "inline-deco" }),
+          Decoration.node(29, 59, { class: "node-deco" }),
+          Decoration.widget(40, () => document.createElement("div")),
+        ])}
         keymap={{
           "Mod-i": toggleMark(schema.marks.em),
+          Backspace: chainCommands(
+            deleteSelection,
+            joinBackward,
+            selectNodeBackward
+          ),
+          Enter: chainCommands(
+            newlineInCode,
+            createParagraphNear,
+            liftEmptyBlock,
+            splitBlock
+          ),
         }}
         nodeViews={{ paragraph: Paragraph }}
       ></EditorView>
@@ -77,9 +136,105 @@ function DemoEditor() {
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(document.getElementById("root")!);
 
+root.render(<DemoEditor />);
+
+// import { baseKeymap } from "prosemirror-commands";
+// import { keymap } from "prosemirror-keymap";
+// import { Schema } from "prosemirror-model";
+// import { EditorState } from "prosemirror-state";
+// import { Decoration, DecorationSet } from "prosemirror-view";
+// import "prosemirror-view/style/prosemirror.css";
+// import React, { useState } from "react";
+// import { createRoot } from "react-dom/client";
+
+// import {
+//   NodeViewComponentProps,
+//   ProseMirror,
+//   useEditorEffect,
+//   useEditorState,
+//   useNodeViews,
+// } from "../src/index.js";
+// import { ReactNodeViewConstructor } from "../src/nodeViews/createReactNodeViewConstructor.js";
+
+// import "./main.css";
+
+// const schema = new Schema({
+//   nodes: {
+//     doc: { content: "block+" },
+//     paragraph: { group: "block", content: "inline*" },
+//     text: { group: "inline" },
+//   },
+//   marks: {
+//     em: {
+//       toDOM() {
+//         return ["em", 0];
+//       },
+//     },
+//   },
+// });
+
+// const editorState = EditorState.create({
+//   schema,
+//   doc: schema.nodes.doc.create({}, [
+//     schema.nodes.paragraph.create({}, [
+//       schema.text("This is "),
+//       schema.text("the", [schema.marks.em.create()]),
+//       schema.text(" first paragraph"),
+//     ]),
+//     schema.nodes.paragraph.create(
+//       {},
+//       schema.text("This is the second paragraph")
+//     ),
+//     schema.nodes.paragraph.create(
+//       {},
+//       schema.text("This is the third paragraph")
+//     ),
+//   ]),
+//   plugins: [keymap(baseKeymap)],
+// });
+
+// function Paragraph({ children }: NodeViewComponentProps) {
+//   return <p>{children}</p>;
+// }
+
+// const reactNodeViews: Record<string, ReactNodeViewConstructor> = {
+//   paragraph: () => ({
+//     component: Paragraph,
+//     dom: document.createElement("div"),
+//     contentDOM: document.createElement("span"),
+//   }),
+// };
+
+// function DemoEditor() {
+//   const { nodeViews, renderNodeViews } = useNodeViews(reactNodeViews);
+//   const [mount, setMount] = useState<HTMLDivElement | null>(null);
+
+//   return (
+//     <main>
+//       <h1>React ProseMirror Demo</h1>
+//       <ProseMirror
+//         mount={mount}
+//         defaultState={editorState}
+//         nodeViews={nodeViews}
+//         decorations={(state) =>
+//           DecorationSet.create(state.doc, [
+//             Decoration.inline(5, 15, { class: "inline-deco" }),
+//             Decoration.node(35, 55, { class: "node-deco" }),
+//           ])
+//         }
+//       >
+//         <div ref={setMount} />
+//         {renderNodeViews()}
+//       </ProseMirror>
+//     </main>
+//   );
+// }
+
+// // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+// const root = createRoot(document.getElementById("root")!);
+
 // root.render(
 //   <React.StrictMode>
 //     <DemoEditor />
 //   </React.StrictMode>
 // );
-root.render(<DemoEditor />);

package.json

@@ -86,5 +86,8 @@
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=16.9"
+  },
+  "dependencies": {
+    "w3c-keyname": "^2.2.8"
   }
 }