Commit the new version

Author: hubgit

.babelrc

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+.cache/
+.eslintrc.js
+packages/**/*.js
+packages/**/*.map
+packages/**/*.d.ts

.eslintignore

@@ -0,0 +1,43 @@
+module.exports = {
+  root: true,
+  env: {
+    es2020: true,
+    browser: true,
+  },
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    project: './tsconfig.eslint.json',
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  settings: {
+    react: {
+      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+    },
+  },
+  extends: [
+    'eslint:recommended', // Uses the recommended rules from eslint
+    'plugin:import/errors', // Uses the error rules from eslint-plugin-import
+    'plugin:import/warnings', // Uses the warning rules from eslint-plugin-import
+    'plugin:import/typescript', // Uses the typescript rules from eslint-plugin-import
+    'plugin:react/recommended', // Uses the recommended rules from eslint-plugin-react
+    'plugin:react-hooks/recommended', // Uses the recommended rules from eslint-plugin-react-hooks
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    'plugin:@typescript-eslint/recommended-requiring-type-checking', // Uses the recommended rules from @typescript-eslint/eslint-plugin that require type checking (slower)
+    'prettier', // Uses eslint-config-prettier to disable ESLint rules from eslint-plugin-react that would conflict with prettier
+  ],
+  plugins: [
+    'simple-import-sort', // sorts imports and exports
+  ],
+  rules: {
+    'react/prop-types': 'off', // allow no prop-types
+    'simple-import-sort/imports': 'error', // sort imports
+    'simple-import-sort/exports': 'error', // sort exports
+    '@typescript-eslint/no-explicit-any': 'off', // allow explicit any
+    '@typescript-eslint/ban-ts-comment': 'off', // allow ts-ignore
+  },
+}

.eslintrc

@@ -0,0 +1,22 @@
+# Contributing
+
+## Setup
+
+```shell
+yarn global add lerna
+yarn
+yarn bootstrap
+```
+
+## Demo
+
+```shell
+yarn demo:build:development
+yarn demo:serve
+```
+
+## Build
+
+```shell
+yarn build
+```

.eslintrc.js

@@ -1,4 +1,10 @@
 node_modules/
-*.log
 build/
 dist/
+.cache/
+*.log
+*.tsbuildinfo
+packages/**/*.js
+packages/**/*.jsx
+packages/**/*.map
+packages/**/*.d.ts

.github/CONTRIBUTING.md

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}

.gitignore

@@ -1,4 +1,4 @@
-Copyright 2017 Alf Eaton <[email protected]>
+Copyright 2021 Alf Eaton <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

.prettierrc

@@ -2,20 +2,171 @@
 
 A React component for [ProseMirror](http://prosemirror.net/).
 
-* [Documentation](https://github.com/hubgit/react-prosemirror/blob/master/react-prosemirror/README.md)
-* [Demo](https://react-prosemirror-example.now.sh)
-* [Example](https://github.com/hubgit/react-prosemirror/tree/master/react-prosemirror-example)
-
 ## Packages
 
-* [prosemirror-footnotes](https://github.com/hubgit/react-prosemirror/blob/master/prosemirror-footnotes) — footnotes plugin for ProseMirror
-* [prosemirror-placeholder](https://github.com/hubgit/react-prosemirror/blob/master/prosemirror-placeholder) — placeholder plugin for ProseMirror
-* [react-prosemirror](https://github.com/hubgit/react-prosemirror/blob/master/react-prosemirror) — main package
-* [react-prosemirror-config-default](https://github.com/hubgit/react-prosemirror/blob/master/react-prosemirror-config-default) — ProseMirror configuration adapted from prosemirror-schema-basic and prosemirror-menu
-* [react-prosemirror-example](https://github.com/hubgit/react-prosemirror/blob/master/react-prosemirror) — an example implementation
+* [@aeaton/react-prosemirror](packages/react) - React components
+* [@aeaton/prosemirror-commands](packages/commands) - ProseMirror commands
+* [@aeaton/prosemirror-schema](packages/schema) - ProseMirror schema definitions (marks and nodes)
+* [@aeaton/prosemirror-transformers](packages/transformers) - conversion to/from ProseMirror
+* [@aeaton/react-prosemirror-config-default](packages/config-default) - an example configuration ready for use
+* [@aeaton/prosemirror-placeholder](packages/placeholder) - ProseMirror placeholder plugin (decoration and style)
+* [@aeaton/prosemirror-footnotes](packages/footnotes) - ProseMirror footnotes plugin (schema and node view)
+
+## Demo
+
+* [demo](demo) - a fully-configured editor
+
+## Usage
+
+### Quickstart: HTML Editor
+
+```js
+import { HtmlEditor } from '@aeaton/react-prosemirror'
+import { plugins, schema, toolbar } from '@aeaton/react-prosemirror-config-default'
+
+const initialValue = '<p></p>'
+
+export const RichTextEditor = () => {
+  const [value, setValue] = useState(initialValue)
+  
+  return (
+    <HtmlEditor
+      schema={schema}
+      plugins={plugins}
+      value={initialValue}
+      handleChange={setValue}
+      debounce={250}
+    >
+      <Toolbar toolbar={toolbar} />
+      <Editor autoFocus />
+    </HtmlEditor>
+  )
+}
+```
+
+### Custom Editor
+
+Create a schema:
+
+```js
+import { Schema } from 'prosemirror-model'
+
+const schema = new Schema({
+  nodes: {
+    // a text node
+    text: {},
+    // a top-level doc node, which can contain at least one paragraph
+    doc: { 
+      content: 'paragraph+'
+    },
+    // a paragraph node, which can contain some text nodes, represented in HTML as `<p>`
+    paragraph: { 
+      content: 'text*',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0],
+    },
+  },
+  marks: {
+    // a strong mark, represented in HTML as `<strong>`
+    strong: {
+      parseDOM: [{ tag: 'strong' }],
+      toDOM: () => ['strong', 0],
+    },
+    // an emphasis mark, represented in HTML as `<em>`
+    emphasis: {
+      parseDOM: [{ tag: 'em' }],
+      toDOM: () => ['em', 0],
+    }
+  }
+})
+```
+
+Create some commands:
+
+```js
+const toggleMarkStrong = toggleMark(schema.marks.strong)
+const toggleMarkEmphasis = toggleMark(schema.marks.emphasis)
+```
+
+
+Create plugins for handling history and key presses:
+
+```js
+import { baseKeymap } from 'prosemirror-commands'
+import { keymap } from 'prosemirror-keymap'
+import { history, undo, redo } from 'prosemirror-history'
+
+const plugins = [
+  history(),
+  keymap({
+    'Mod-z': undo,
+    'Shift-Mod-z': redo,
+    'Meta-b': toggleMarkStrong,
+    'Meta-i': toggleMarkEmphasis,
+  }),
+  keymap(baseKeymap),
+]
+```
+
+Create a toolbar definition:
+
+```js
+const toolbar = [
+  {
+    id: 'marks',
+    items: [
+      {
+        id: 'toggle-strong',
+        content: icons.strong,
+        action: toggleMarkStrong,
+        enable: toggleMarkStrong,
+        active: isMarkActive(schema.marks.strong),
+      },
+      {
+        id: 'toggle-emphasis',
+        title: 'Toggle emphasis',
+        content: icons.emphasis,
+        action: toggleMarkEmphasis,
+        enable: toggleMarkEmphasis,
+        active: isMarkActive(schema.marks.emphasis),
+      },
+    ]
+  }
+]
+```
+
+Create a doc by parsing some HTML:
+
+```js
+import { createHTMLTransformer } from '@aeaton/prosemirror-transformers'
+
+const transformer = createHTMLTransformer(schema)
+
+const doc = transformer.parse('<p>Hello World!</p>')
+```
+
+Connect everything together to make your editor:
+
+```jsx
+const CustomEditor = () => {
+  return (
+    <EditorProvider doc={doc} plugins={plugins}>
+      <Toolbar toolbar={toolbar} />
+      <Editor />
+    </EditorProvider>
+  )
+}
+```
+
+The editor state is available in descendants of `EditorProvider` via a `useEditorState` hook:
 
-## Authors and license
+```js
+import { useEditorState } from '@aeaton/react-prosemirror'
 
-[Alf Eaton](https://github.com/hubgit) and [contributors](https://github.com/hubgit/react-prosemirror/graphs/contributors).
+const ExampleComponent = () => {
+  const state = useEditorState()
+  
+  // do something with the current state
+}
+```
 
-MIT License.