Setup (#2)

* improve setup

* fix lint

* main setup

* placeholders

* playwright setup

* document blocks

* fix ci

* add docs

Author: YousefED

.github/workflows/build.yml

@@ -30,11 +30,21 @@ jobs:
       - name: Bootstrap packages
         run: npm run bootstrap
 
+      - name: Lint packages
+        run: npm run lint
+        env:
+          CI: true
+
       - name: Build packages
         run: npm run build
         env:
           CI: true
 
+      - name: Run server
+        run: npm run start:built & npx wait-on http://localhost:3000
+        env:
+          CI: true
+
       - name: Install Playwright
         run: npx playwright install --with-deps
 

.github/workflows/cla.yml

@@ -0,0 +1,36 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened, closed, synchronize]
+
+jobs:
+  CLAssistant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        # Beta Release
+        uses: cla-assistant/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # the below token should have repo scope and must be manually added by you in the repository's secret
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+        with:
+          path-to-signatures: ".signatures/v1/cla.json"
+          path-to-document: "https://github.com/YousefED/blocknote/blob/main/CLA.md" # e.g. a CLA or a DCO document
+          # branch should not be protected
+          branch: "main"
+          # allowlist: user1,bot*
+
+          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
+          #remote-organization-name: enter the remote organization name where the signatures should be stored (Default is storing the signatures in the same repository)
+          #remote-repository-name:  enter the  remote repository name where the signatures should be stored (Default is storing the signatures in the same repository)
+          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
+          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
+          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
+          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
+          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
+          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
+          #use-dco-flag: true - If you are using DCO instead of CLA

.signatures/v1/cla.json

@@ -0,0 +1,3 @@
+{
+  "signedContributors": []
+}

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "orta.vscode-jest"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "search.exclude": {
+    "packages/editor/public/types": true
+  }
+}

CLA.md

@@ -0,0 +1,55 @@
+### TypeCell Individual Contributor License Agreement
+
+Thank you for your interest in contributing to open source software projects (“Projects”) made available by Yousef El-Dardiry, Soft Parade B.V. or its affiliates (“TypeCell“). This Individual Contributor License Agreement (“Agreement”) sets out the terms governing any source code, object code, bug fixes, configuration changes, tools, specifications, documentation, data, materials, feedback, information or other works of authorship that you submit or have submitted, in any form and in any manner, to TypeCell in respect of any of the Projects (collectively “Contributions”). If you have any questions respecting this Agreement, please contact [email protected].
+
+You agree that the following terms apply to all of your past, present and future Contributions. Except for the licenses granted in this Agreement, you retain all of your right, title and interest in and to your Contributions.
+
+**Copyright License.** You hereby grant, and agree to grant, to TypeCell a non-exclusive, perpetual, irrevocable, worldwide, fully-paid, royalty-free, transferable copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute your Contributions and such derivative works, with the right to sublicense the foregoing rights through multiple tiers of sublicensees.
+
+**Patent License.** You hereby grant, and agree to grant, to TypeCell a non-exclusive, perpetual, irrevocable,
+worldwide, fully-paid, royalty-free, transferable patent license to make, have made, use, offer to sell, sell,
+import, and otherwise transfer your Contributions, where such license applies only to those patent claims
+licensable by you that are necessarily infringed by your Contributions alone or by combination of your
+Contributions with the Project to which such Contributions were submitted, with the right to sublicense the
+foregoing rights through multiple tiers of sublicensees.
+
+**Moral Rights.** To the fullest extent permitted under applicable law, you hereby waive, and agree not to
+assert, all of your “moral rights” in or relating to your Contributions for the benefit of TypeCell, its assigns, and
+their respective direct and indirect sublicensees.
+
+**Third Party Content/Rights.** If your Contribution includes or is based on any source code, object code, bug
+fixes, configuration changes, tools, specifications, documentation, data, materials, feedback, information or
+other works of authorship that were not authored by you (“Third Party Content”) or if you are aware of any
+third party intellectual property or proprietary rights associated with your Contribution (“Third Party Rights”),
+then you agree to include with the submission of your Contribution full details respecting such Third Party
+Content and Third Party Rights, including, without limitation, identification of which aspects of your
+Contribution contain Third Party Content or are associated with Third Party Rights, the owner/author of the
+Third Party Content and Third Party Rights, where you obtained the Third Party Content, and any applicable
+third party license terms or restrictions respecting the Third Party Content and Third Party Rights. For greater
+certainty, the foregoing obligations respecting the identification of Third Party Content and Third Party Rights
+do not apply to any portion of a Project that is incorporated into your Contribution to that same Project.
+
+**Representations.** You represent that, other than the Third Party Content and Third Party Rights identified by
+you in accordance with this Agreement, you are the sole author of your Contributions and are legally entitled
+to grant the foregoing licenses and waivers in respect of your Contributions. If your Contributions were
+created in the course of your employment with your past or present employer(s), you represent that such
+employer(s) has authorized you to make your Contributions on behalf of such employer(s) or such employer
+(s) has waived all of their right, title or interest in or to your Contributions.
+
+**Disclaimer.** To the fullest extent permitted under applicable law, your Contributions are provided on an "asis"
+basis, without any warranties or conditions, express or implied, including, without limitation, any implied
+warranties or conditions of non-infringement, merchantability or fitness for a particular purpose. You are not
+required to provide support for your Contributions, except to the extent you desire to provide support.
+
+**No Obligation.** You acknowledge that TypeCell is under no obligation to use or incorporate your Contributions
+into any of the Projects. The decision to use or incorporate your Contributions into any of the Projects will be
+made at the sole discretion of TypeCell or its authorized delegates ..
+
+**Disputes.** This Agreement shall be governed by and construed in accordance with the laws of the The Netherlands, without giving effect to its principles or rules regarding conflicts of laws,
+other than such principles directing application of The Netherlands law. The parties hereby submit to venue in, and
+jurisdiction of the courts located in The Netherlands for purposes relating to this Agreement. In the event
+that any of the provisions of this Agreement shall be held by a court or other tribunal of competent jurisdiction
+to be unenforceable, the remaining portions hereof shall remain in full force and effect.
+
+**Assignment.** You agree that TypeCell may assign this Agreement, and all of its rights, obligations and licenses
+hereunder.

README.md

@@ -0,0 +1,35 @@
+# BlockNote
+
+Welcome to the BlockNote editor. Let's build a block based WYSIWYG editor with killer UX!
+
+```
+blocknote
+├── packages/core       - The editor that can be used in other applications
+├── examples/editor     - The main example application that just embeds the editor
+└── tests               - Playwright end to end tests
+```
+
+# Development
+
+We use [Lerna](https://lerna.js.org/) to manage the monorepo with separate packages.
+
+## Running
+
+To run the project, open the command line in the project's root directory and enter the following commands:
+
+    # Install all required npm modules for lerna, and bootstrap lerna packages
+    npm run install-lerna
+    npm run bootstrap
+
+    # Start the editor project
+    npm start
+
+## Updating packages
+
+If you've pulled changes from git that add new or update existing dependencies, use `npm run bootstrap` instead of `npm install` to install updated dependencies!
+
+## Adding packages
+
+- Add the dependency to the relevant `package.json` file (packages/xxx/package.json)
+- run `npm run install-new-packages`
+- Double check `package-lock.json` to make sure only the relevant packages have been affected

examples/editor/README.md

@@ -0,0 +1,3 @@
+# Editor example
+
+This is an example client application that consumes @blocknote/core.

examples/editor/package.json

@@ -5,19 +5,29 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint src --max-warnings 0"
   },
   "dependencies": {
     "@blocknote/core": "*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
-    "@types/react-dom": "^17.0.10",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.12",
     "@vitejs/plugin-react": "^1.0.7",
     "typescript": "^4.5.4",
-    "vite": "^2.8.0"
+    "vite": "^2.8.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint": "^8.10.0",
+    "vite-plugin-eslint": "^1.3.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "workspaces": {
     "nohoist": [

examples/editor/src/App.module.css

@@ -0,0 +1,4 @@
+.editor {
+  padding: 0 calc((100% - 731px) / 2);
+  height: 100%;
+}

examples/editor/src/App.tsx

@@ -1,40 +1,23 @@
-import { useState } from 'react'
-
 // import logo from './logo.svg'
-// import './App.css'
-import { useEditor, EditorContent } from "@blocknote/core";
-
+import styles from "./App.module.css";
+import { EditorContent, useEditor } from "@blocknote/core";
+import React from "react";
 // import "@blocknote/core/style.css";
 
 function App() {
-
-
   const editor = useEditor({
     onUpdate: ({ editor }) => {
       console.log(editor.getJSON());
     },
-    // editorProps: {
-    //   attributes: {
-    //     class: "editor",
-    //   },
-    // },
+    editorProps: {
+      attributes: {
+        class: styles.editor,
+        "data-test": "editor",
+      },
+    },
   });
 
-  return (
-    <div>
-      {/* {editor != null ? (
-        <InlineMenu editor={editor} commentStore={commentStore} />
-      ) : null}
-      {editor != null ? <TableMenu editor={editor} /> : null}
-      {editor != null ? (
-        <CommentWrapper editor={editor} commentStore={commentStore} />
-      ) : null} */}
-      {/* <EngineContext.Provider */}
-      {/* value={{ compiler, executionHost, document: props.document }}> */}
-      <EditorContent editor={editor} />
-      {/* </EngineContext.Provider> */}
-    </div>
-  );
+  return <EditorContent editor={editor} />;
 }
 
-export default App
+export default App;

examples/editor/src/index.css

@@ -0,0 +1,5 @@
+html,
+body,
+#root {
+  height: 100%;
+}

examples/editor/src/main.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-// import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById("root")
+);

examples/editor/tsconfig.json

@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "paths": {
       "@blocknote/core": ["../../packages/core/src"]
     }

examples/editor/vite.config.ts

@@ -1,10 +1,16 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import * as path from "path";
+import eslintPlugin from "vite-plugin-eslint";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      jsxRuntime: "classic", // TODO: would prefer to move to new jsxRuntime
+    }),
+    eslintPlugin(),
+  ],
   optimizeDeps: {
     // link: ['vite-react-ts-components'],
   },