@djsp/core - npm Package Compare versions

Comparing version 0.1.2 to 0.1.4

dist/index.es.js

@@ -198,5 +198,5 @@ import React, { Component, createContext, createRef } from 'react';
 var withEditorContext = function withEditorContext(Comp) {
-  return function WithConsumer(props) {
+  return function WithConsumer() {
     return React.createElement(Context.Consumer, null, function (contextProps) {
-      return React.createElement(Comp, _extends({}, props, contextProps.editorProps));
+      return React.createElement(Comp, contextProps.editorProps);
     });
@@ -598,2 +598,4 @@ };
           setEditorState = _this$props2.setEditorState,
+          editorProps = _this$props2.editorProps,
+          editorRef = _this$props2.editorRef,
           editorState = _this$props2.editorState,
@@ -605,2 +607,4 @@ setEditorProps = _this$props2.setEditorProps;
           setEditorState: setEditorState,
+          editorProps: editorProps,
+          editorRef: editorRef,
           editorState: editorState,
@@ -622,2 +626,2 @@ setEditorProps: setEditorProps
 
-export { EditorContainer, withEditorContext, withPluginContext, Editor$1 as Editor, Plugin$1 as Plugin, constants };
+export { EditorContainer, Editor$1 as Editor, Plugin$1 as Plugin, withPluginContext, constants };

dist/index.js

@@ -205,5 +205,5 @@ 'use strict';
 var withEditorContext = function withEditorContext(Comp) {
-  return function WithConsumer(props) {
+  return function WithConsumer() {
     return React__default.createElement(Context.Consumer, null, function (contextProps) {
-      return React__default.createElement(Comp, _extends({}, props, contextProps.editorProps));
+      return React__default.createElement(Comp, contextProps.editorProps);
     });
@@ -605,2 +605,4 @@ };
           setEditorState = _this$props2.setEditorState,
+          editorProps = _this$props2.editorProps,
+          editorRef = _this$props2.editorRef,
           editorState = _this$props2.editorState,
@@ -612,2 +614,4 @@ setEditorProps = _this$props2.setEditorProps;
           setEditorState: setEditorState,
+          editorProps: editorProps,
+          editorRef: editorRef,
           editorState: editorState,
@@ -630,6 +634,5 @@ setEditorProps: setEditorProps
 exports.EditorContainer = EditorContainer;
-exports.withEditorContext = withEditorContext;
-exports.withPluginContext = withPluginContext;
 exports.Editor = Editor$1;
 exports.Plugin = Plugin$1;
+exports.withPluginContext = withPluginContext;
 exports.constants = constants;

package.json

 {
   "name": "@djsp/core",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "djsp Core Components",
@@ -5,0 +5,0 @@ "author": "juliankrispel",

README.md

@@ -8,64 +8,147 @@ # @djsp/core
 
-## License
+`@djsp/core` is the heart of `@djsp`. It contains these exports:
 
-MIT © [juliankrispel](https://github.com/juliankrispel)
+```js
+import {
+  EditorContainer,
+  Editor,
+  Plugin,
+  withPluginContext,
+} from '@djsp/core'
+```
 
+# The `<EditorContainer />` component
 
-## API
+### Usage
 
-### <Plugin />
+`EditorContainer` contains all props for the draft js Editor which it passes down to plugins and the `Editor` via the React context api.
 
-```jsx
-import { Plugin } from '@djsp/core' }
+```js
+import { EditorContainer } from '@djsp/core'
+
+<EditorContainer onChange={this.onChange} editorState={this.state.editorState}>
+  <Editor />
+</EditorContainer>
 ```
 
-#### Props
-A plugin inherits the same props as as the [Draft js Editor](https://draftjs.org/docs/api-reference-editor) including a few exceptions. Here's the full list of props:
-```jsx
-export type PluginProps = {
-  blockRendererFn: (block: BlockNodeRecord) => ?Object,
-  blockStyleFn: (block: BlockNodeRecord) => string,
-  keyBindingFn: (e: SyntheticKeyboardEvent<>) => ?string,
-  handleReturn?: (
-    e: SyntheticKeyboardEvent<>,
-    editorState: EditorState,
-  ) => DraftHandleValue,
-  handleKeyCommand?: (
-    command: DraftEditorCommand | string,
-    editorState: EditorState,
-    eventTimeStamp: number,
-  ) => DraftHandleValue,
-  handleBeforeInput?: (
-    chars: string,
-    editorState: EditorState,
-    eventTimeStamp: number,
-  ) => DraftHandleValue,
-  handlePastedText?: (
-    text: string,
-    html?: string,
-    editorState: EditorState,
-  ) => DraftHandleValue,
-  handlePastedFiles?: (files: Array<Blob>) => DraftHandleValue,
-  handleDroppedFiles?: (
-    selection: SelectionState,
-    files: Array<Blob>,
-  ) => DraftHandleValue,
-  handleDrop?: (
-    selection: SelectionState,
-    dataTransfer: Object,
-    isInternal: DraftDragType,
-  ) => DraftHandleValue,
-  onEscape?: (e: SyntheticKeyboardEvent<>) => void,
-  onTab?: (e: SyntheticKeyboardEvent<>) => void,
-  onUpArrow?: (e: SyntheticKeyboardEvent<>) => void,
-  onRightArrow?: (e: SyntheticKeyboardEvent<>) => void,
-  onDownArrow?: (e: SyntheticKeyboardEvent<>) => void,
-  onLeftArrow?: (e: SyntheticKeyboardEvent<>) => void,
-  onBlur?: (e: SyntheticEvent<>) => void,
-  onFocus?: (e: SyntheticEvent<>) => void,
-  customStyleMap?: Object,
-  customStyleFn?: (style: DraftInlineStyle, block: BlockNodeRecord) => ?Object,
-  blockRenderMap: DraftBlockRenderMap,
-};
+Here are the props that `EditorContainer` accepts, all of the below props are inherted from the [draft js editor component](https://draftjs.org/docs/api-reference-editor#props)
+
+### Props
+
+| Property | Type | required? | Description |
+| - | - | - | - |
+| `editorState` | `EditorState` | required | The state of the editor. Identical to the [draft js editorState prop](https://draftjs.org/docs/api-reference-editor#editorstate) |
+| `onChange` | `(EditorState) => void` | required | Fired when content changes. Identical to the [draft js onChange prop](https://draftjs.org/docs/api-reference-editor#onchange) |
+| `textAlignment` | `"left" or "center" or "right"` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `textDirectionality` | `"LTR" or "RTL"` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `placeholder` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `readOnly` | `boolean` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `spellCheck` | `boolean` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `stripPastedStyles` | `boolean` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `tabIndex` | `number` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `autoCapitalize` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `autoComplete` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `autoCorrect` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaActiveDescendantID` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaAutoComplete` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaControls` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaDescribedBy` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaExpanded` | `boolean` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaLabel` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaLabelledBy` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `ariaMultiline` | `boolean` | optional | Overrides [props set via plugin](#setEditorProps) |
+| `webDriverTestID` | `string` | optional | Overrides [props set via plugin](#setEditorProps) |
+
+# The `<Editor>` Component
+
+The `Editor` component does not accept any props, since it inherits all of it's props from `EditorContainer`. It must be rendered inside `EditorContainer`
+
+To configure editor props, use `EditorContainer` and `Plugin`
+
+### Usage
+
+```js
+<EditorContainer
+  onChange={editorState => this.setState({ editorState })}
+  editorState={this.state.editorState}
+>
+  <Editor />
+</EditorContainer>
 ```
 
+# The `<Plugin>` Component
+
+
+The `Plugin` can only be renderered inside `EditorContainer`. It's props will be plugged in to the editorState. This way you can compose and isolate editor functionality like `decorators`, `blockRendererFn` or any of the props listed below:
+
+### Props
+
+| Property | Type | required? | Description |
+| - | - | - | - |
+| `children` | `({ setEditorState, editorState, setEditorProps, editorRef, editorProps }) => React.Node` | optional | Render Prop, [for usage see here](#plugin-render-prop) |
+| `customStyleMap` | `Object` | optional | Identical to the [draft js `customStyleMap` prop](https://draftjs.org/docs/api-reference-editor#customstylemap) |
+| `blockRenderMap` | `Immutable.Map<{\nelement: string, wrapper?: React.Node, aliasedElements?: Array<string> }>` | optional | Identical to the [draft js `blockRenderMap` prop](https://draftjs.org/docs/api-reference-editor#blockrenderermap) |
+| `blockRendererFn` | `(block: BlockNodeRecord) => { component: Component, props: Object, editable: boolean }` | optional | Identical to the [draft js `blockRendererFn` prop](https://draftjs.org/docs/api-reference-editor#blockrendererfn) |
+| `blockStyleFn` | `(block: BlockNodeRecord) => cssClassName: string` | optional | Identical to the [draft js `blockStyleFn` prop](https://draftjs.org/docs/api-reference-editor#blockstylefn) |
+| `customStyleFn` | `(style: Immutable.OrderedSet<string>, block: BlockNodeRecord) => ?Object` | optional | Identical to the [draft js `customStyleFn` prop](https://draftjs.org/docs/api-reference-editor#customstylefn) |
+| `keyBindingFn` | `(e: SyntheticKeyboardEvent<>) => ?string` | optional | Identical to the [draft js `keyBindingFn` prop](https://draftjs.org/docs/api-reference-editor#keybindingfn) |
+| `handleKeyCommand` | `(command: string, editorState: EditorState) => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handleKeyCommand` prop](https://draftjs.org/docs/api-reference-editor#handlekeycommand) |
+| `handleBeforeInput` | `(chars: string, editorState: EditorState) => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handleBeforeInput` prop](https://draftjs.org/docs/api-reference-editor#handlebeforeinput) |
+| `handlePastedText` | `(text: string, html?: string, editorState: EditorState) => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handlePastedText` prop](https://draftjs.org/docs/api-reference-editor#handlepastedtext) |
+| `handlePastedFiles` | `(files:  Array<Blob>) => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handlePastedFiles` prop](https://draftjs.org/docs/api-reference-editor#handlepastedfiles) |
+| `handleDroppedFiles` | `(selection: SelectionState, files:  Array<Blob>) => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handleDroppedFiles` prop](https://draftjs.org/docs/api-reference-editor#handledroppedfiles) |
+| `handleDrop` | `(selection: SelectionState, dataTransfer:  Object, isInternal: 'internal' or 'external') => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handleDrop` prop](https://draftjs.org/docs/api-reference-editor#handledrop) |
+| `handleReturn` | `(e: SyntheticKeyboardEvent<>, editorState: EditorState) => 'handled' or 'not-handled'` | optional | Identical to the [draft js `handleReturn` prop](https://draftjs.org/docs/api-reference-editor#handlereturn) |
+| `onDownArrow` | `(e: SyntheticKeyboardEvent<>) => void` | optional | Identical to the [draft js `onDownArrow` prop](https://draftjs.org/docs/api-reference-editor#ondownarrow) |
+| `onUpArrow` | `(e: SyntheticKeyboardEvent<>) => void` | optional | Identical to the [draft js `onUpArrow` prop](https://draftjs.org/docs/api-reference-editor#onuparrow) |
+| `onLeftArrow` | `(e: SyntheticKeyboardEvent<>) => void` | optional | Identical to the [draft js `onLeftArrow` prop](https://draftjs.org/docs/api-reference-editor#onleftarrow) |
+| `onRightArrow` | `(e: SyntheticKeyboardEvent<>) => void` | optional | Identical to the [draft js `onRightArrow` prop](https://draftjs.org/docs/api-reference-editor#onrightarrow) |
+| `onTab` | `(e: SyntheticKeyboardEvent<>) => void` | optional | Identical to the [draft js `onTab` prop](https://draftjs.org/docs/api-reference-editor#ontab) |
+| `onEscape` | `(e: SyntheticKeyboardEvent<>) => void` | optional | Identical to the [draft js `onEscape` prop](https://draftjs.org/docs/api-reference-editor#onescape) |
+| `onFocus` | `(e: SyntheticEvent<>) => void` | optional | Identical to the [draft js `onFocus` prop](https://draftjs.org/docs/api-reference-editor#onfocus) |
+| `onBlur` | `(e: SyntheticEvent<>) => void` | optional | Identical to the [draft js `onBlur` prop](https://draftjs.org/docs/api-reference-editor#onblur) |
+
+### Plugin render prop
+
+The `Plugin` also accepts an optional render prop which exposes the plugin context.
+```js
+<Plugin>
+  {({
+    setEditorState,
+    editorProps,
+    editorRef,
+    editorState,
+    setEditorProps
+  }) => (
+    <button
+      onClick={() => (
+        setEditorState(
+          RichUtils.toggleBlockType(editorState, 'header-one')
+        )
+      )}
+    >H1</button>
+  )}
+</Plugin>
+```
+
+
+
+
+### `<Plugin>(RenderProps)</Plugin>`
+
+| Property | Type | Description |
+| - | - | - |
+| `editorState` | `EditorState` | The `EditorState` object |
+| `setEditorState` | `(editorState: EditorState) => void` | Lets you update the editorState |
+| `editorProps` | `Object` | Contains props that can be set via `setEditorProps`, these are `editorKey` `placeholder` `textAlignment` `textDirectionality` `readOnly` `spellCheck` `stripPastedStyles` `tabIndex` `autoCapitalize` `autoComplete` `autoCorrect` `ariaActiveDescendantID` `ariaAutoComplete` `ariaControls` `ariaDescribedBy` `ariaExpanded` `ariaLabel` `ariaLabelledBy` `ariaMultiline` `webDriverTestID` |
+| `setEditorProps` | `(editorProps: Object) => void` | lets you set the above editorProps. Be aware that editor props set via Plugins are overridden by `EditorContainer` props |
+| `editorRef` | `Ref<DraftEditor>` | A React reference to the draft js editor |
+
+# `withPluginContext`
+
+Another way to create a plugin is with the `withPluginContext` HOC. This has the advantage of letting you handle plugin subscription.
+
+## License
+
+MIT © [juliankrispel](https://github.com/juliankrispel)
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65264

increased by14.09%

Lines of code

1058

increased by0.67%

Number of lines in readme file

154

increased by116.9%

No dependency changes