Merge pull request #47 from nytimes/react-editor-view

Move rendering responsibility fully into React

Extends the EditorView class and overrides its NodeView and DOMObserver properties. In their places, we provide custom NodeViews, that act exactly the same as the default implementation, but execute no-ops when their update methods are called, and a custom DOMObserver that only listens for selection changes, and ignores DOM mutations.

We then introduce a beforeinput event handler that produces ProseMirror transactions based on the events it receives, which replaces the DOMObserver functionality that we eschewed in our selection-only implementation.

We also introduce a new React component suite, one for each type of NodeView, to replace the truncated update methods. When state is updated, we render a DocNodeView component with view.state.doc and the document decorations. Each NodeView component is responsible for rendering its children, so this eventually renders the entire ProseMirror document (and all of its decorations) in a single React tree.

.eslintignore

@@ -2,3 +2,5 @@
 .yarn/
 .yarnrc.yml
 .pnp.*
+
+/docs/

.eslintrc.json

@@ -16,41 +16,40 @@
     "node": false
   },
   "rules": {
-    "@typescript-eslint/consistent-type-imports": "error",
     "no-console": ["error", { "allow": ["error"] }],
-    "no-inner-declarations": "off",
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "react/prop-types": "off",
+    "react-hooks/exhaustive-deps": [
+      "warn",
+      {
+        "additionalHooks": "(useEditorEffect|useLayoutGroupEffect$)"
+      }
+    ],
     "import/extensions": ["error", "ignorePackages"],
-    "import/no-duplicates": ["error"],
-    "import/no-unresolved": "off", // Typescript does this better!
     "import/order": [
       "error",
       {
         "alphabetize": {
-          "order": "asc",
-          "orderImportKind": "desc"
+          "order": "asc"
         },
+        "groups": ["builtin", "external", "parent", "sibling", "index"],
         "newlines-between": "always",
         "warnOnUnassignedImports": true
       }
     ],
-    "react-hooks/exhaustive-deps": [
-      "warn",
-      {
-        "additionalHooks": "(useEditorEffect|useLayoutGroupEffect$)"
-      }
-    ],
     "sort-imports": [
       "error",
       {
         "allowSeparatedGroups": true,
         "ignoreDeclarationSort": true
       }
-    ]
+    ],
+    "no-inner-declarations": "off",
+    "import/no-unresolved": "off", // Typescript does this better!
+    "@typescript-eslint/no-unused-vars": "off" // Let the TS compiler do this, too
   },
   "settings": {
     "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
-    "import/external-module-folders": [".yarn"],
+    "import/external-module-folders": ["node_modules"],
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx"]
     },

.husky/pre-commit

@@ -2,3 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn lint-staged
+yarn demo:build
+git add docs

.prettierignore

@@ -2,3 +2,5 @@
 .yarn/
 .yarnrc.yml
 .pnp.*
+
+/docs/

.prettierrc

@@ -1,4 +1,3 @@
 {
-  "proseWrap": "always",
-  "trailingComma": "es5"
+  "proseWrap": "always"
 }

.vscode/settings.json

@@ -3,20 +3,21 @@
     "**/.yarn": true,
     "**/.pnp.*": true
   },
-  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "eslint.nodePath": ".yarn/sdks",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.formatOnSave": true,
+  "[javascript][typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit"
+    }
   },
+  "javascript.preferences.importModuleSpecifierEnding": "js",
+  "typescript.preferences.importModuleSpecifierEnding": "js",
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "prettier.prettierPath": ".yarn/sdks/prettier/index.js"
+  }
 }

.yarn/sdks/prettier/index.js

@@ -17,4 +17,4 @@ if (existsSync(absPnpApiPath)) {
 }
 
 // Defer to the real prettier/index.js your application uses
-module.exports = absRequire(`prettier/index.cjs`);
+module.exports = absRequire(`prettier/index.js`);

.yarn/sdks/prettier/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "3.2.5",
+  "version": "2.8.3-sdk",
   "main": "./index.js",
   "type": "commonjs"
 }

.yarnrc.yml

@@ -7,3 +7,5 @@ plugins:
     spec: "@yarnpkg/plugin-version"
 
 yarnPath: .yarn/releases/yarn-3.4.1.cjs
+
+nodeLinker: node-modules