Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Draft Js Plugins Core components
@djsp/core
is the heart of @djsp
. It contains these exports:
import {
EditorContainer,
Editor,
Plugin,
withPluginContext,
} from '@djsp/core'
<EditorContainer />
componentEditorContainer
contains all props for the draft js Editor which it passes down to plugins and the Editor
via the React context api.
import { EditorContainer } from '@djsp/core'
<EditorContainer onChange={this.onChange} editorState={this.state.editorState}>
<Editor />
</EditorContainer>
Here are the props that EditorContainer
accepts, all of the below props are inherted from the draft js editor component
Property | Type | required? | Description |
---|---|---|---|
editorState | EditorState | required | The state of the editor. Identical to the draft js editorState prop |
onChange | (EditorState) => void | required | Fired when content changes. Identical to the draft js onChange prop |
editorKey | string | optional | Overrides props set via plugin |
textAlignment | "left" or "center" or "right" | optional | Overrides props set via plugin |
textDirectionality | "LTR" or "RTL" | optional | Overrides props set via plugin |
placeholder | string | optional | Overrides props set via plugin |
readOnly | boolean | optional | Overrides props set via plugin |
spellCheck | boolean | optional | Overrides props set via plugin |
stripPastedStyles | boolean | optional | Overrides props set via plugin |
tabIndex | number | optional | Overrides props set via plugin |
autoCapitalize | string | optional | Overrides props set via plugin |
autoComplete | string | optional | Overrides props set via plugin |
autoCorrect | string | optional | Overrides props set via plugin |
ariaActiveDescendantID | string | optional | Overrides props set via plugin |
ariaAutoComplete | string | optional | Overrides props set via plugin |
ariaControls | string | optional | Overrides props set via plugin |
ariaDescribedBy | string | optional | Overrides props set via plugin |
ariaExpanded | boolean | optional | Overrides props set via plugin |
ariaLabel | string | optional | Overrides props set via plugin |
ariaLabelledBy | string | optional | Overrides props set via plugin |
ariaMultiline | boolean | optional | Overrides props set via plugin |
webDriverTestID | string | optional | Overrides props set via plugin |
<Editor>
ComponentThe 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
<EditorContainer
onChange={editorState => this.setState({ editorState })}
editorState={this.state.editorState}
>
<Editor />
</EditorContainer>
<Plugin>
ComponentThe 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:
Property | Type | required? | Description |
---|---|---|---|
children | ({ setEditorState, editorState, setEditorProps, editorRef, editorProps }) => React.Node | optional | Render Prop, for usage see here |
customStyleMap | Object | optional | Identical to the draft js customStyleMap prop |
blockRenderMap | Immutable.Map<{\nelement: string, wrapper?: React.Node, aliasedElements?: Array<string> }> | optional | Identical to the draft js blockRenderMap prop |
blockRendererFn | (block: BlockNodeRecord) => { component: Component, props: Object, editable: boolean } | optional | Identical to the draft js blockRendererFn prop |
blockStyleFn | (block: BlockNodeRecord) => cssClassName: string | optional | Identical to the draft js blockStyleFn prop |
customStyleFn | (style: Immutable.OrderedSet<string>, block: BlockNodeRecord) => ?Object | optional | Identical to the draft js customStyleFn prop |
keyBindingFn | (e: SyntheticKeyboardEvent<>) => ?string | optional | Identical to the draft js keyBindingFn prop |
handleKeyCommand | (command: string, editorState: EditorState) => 'handled' or 'not-handled' | optional | Identical to the draft js handleKeyCommand prop |
handleBeforeInput | (chars: string, editorState: EditorState) => 'handled' or 'not-handled' | optional | Identical to the draft js handleBeforeInput prop |
handlePastedText | (text: string, html?: string, editorState: EditorState) => 'handled' or 'not-handled' | optional | Identical to the draft js handlePastedText prop |
handlePastedFiles | (files: Array<Blob>) => 'handled' or 'not-handled' | optional | Identical to the draft js handlePastedFiles prop |
handleDroppedFiles | (selection: SelectionState, files: Array<Blob>) => 'handled' or 'not-handled' | optional | Identical to the draft js handleDroppedFiles prop |
handleDrop | (selection: SelectionState, dataTransfer: Object, isInternal: 'internal' or 'external') => 'handled' or 'not-handled' | optional | Identical to the draft js handleDrop prop |
handleReturn | (e: SyntheticKeyboardEvent<>, editorState: EditorState) => 'handled' or 'not-handled' | optional | Identical to the draft js handleReturn prop |
onDownArrow | (e: SyntheticKeyboardEvent<>) => void | optional | Identical to the draft js onDownArrow prop |
onUpArrow | (e: SyntheticKeyboardEvent<>) => void | optional | Identical to the draft js onUpArrow prop |
onLeftArrow | (e: SyntheticKeyboardEvent<>) => void | optional | Identical to the draft js onLeftArrow prop |
onRightArrow | (e: SyntheticKeyboardEvent<>) => void | optional | Identical to the draft js onRightArrow prop |
onTab | (e: SyntheticKeyboardEvent<>) => void | optional | Identical to the draft js onTab prop |
onEscape | (e: SyntheticKeyboardEvent<>) => void | optional | Identical to the draft js onEscape prop |
onFocus | (e: SyntheticEvent<>) => void | optional | Identical to the draft js onFocus prop |
onBlur | (e: SyntheticEvent<>) => void | optional | Identical to the draft js onBlur prop |
The Plugin
also accepts an optional render prop which exposes the plugin context.
<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 the props for EditorContainer except editorState and onChange |
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.
MIT © juliankrispel
FAQs
djsp Core Components
The npm package @djsp/core receives a total of 16 weekly downloads. As such, @djsp/core popularity was classified as not popular.
We found that @djsp/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.