-
-);
-
-export default MyEditor;
-```
-
-## How can I avoid that a URL hash is converted to a Hash when using the linkify plugin?
-
-The order of the plugins matter. It will ignore the hash if the linkifyPlugin comes first in the plugins array.
-
-```js
-const plugin = [linkifyPlugin, hashtagPlugin];
-```
-
-## The editor throws errors in Internet Explorer 11?
-
-If you see error messages like `Symbol is undefined` or similar, it might probably be caused by lacking polyfills.
-
-To solve this, you can use `babel-polyfill` ([Babel Polyfill Documentation](https://babeljs.io/docs/usage/polyfill/)) to cover everything that babel cannot transpile/polyfill on build-time.
-Keep in mind that `babel-polyfill` is pretty huge and will increase your bundled filesize quite a bit. You can also just import the required polyfills manually using `core-js` directly:
-
-```javascript
-import 'core-js/es6/map';
-import 'core-js/es6/weak-map';
-import 'core-js/fn/object/assign';
-import 'core-js/fn/symbol';
-import 'core-js/fn/array/from';
-import 'core-js/fn/array/fill';
-import 'core-js/fn/string/starts-with';
-import 'core-js/fn/string/ends-with';
-```
-
-Note: Those imports _might_ not cover all possibly needed polyfills; this means, you maybe need to adapt them.
-
-## Keybindings added by a plugin stop working when using custom 'keyBindingFn' function.
-
-You need to return `undefined` if you want plugins to execute the `keyBindingFn` as otherwise the [execution chain ends](draft-js-plugins/packages/editor/src/Editor/PluginHooks.ts).
-
-For example:
-
-```js
-const keyBindingFn = (e) => {
- /**
- * Add condition for keybindings added by a plugin that you want to keep
- * and return 'undefined'.
- * Example below allows mention plugin to handle up and down arrows
- * in a triggered popover.
- */
- if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
- return undefined;
- }
-
- return getDefaultKeyBinding(e);
-};
-```
-
-## draft-js-plugin decorators are removed after creating a new `EditorState`
-
-If you create a new `EditorState` after the initial rendering of the editor, as in this example, the decorators are removed from the plugins:
-
-```js
-useEffect(() => {
- let es = getEditorStateFromRaw(props.content));
- setEditorState(es);
- }, [props.content]);
-};
-```
-
-You should instead use the [push](https://draftjs.org/docs/api-reference-editor-state/#push) method of `EditorState` to update the state without removing the decorators.
\ No newline at end of file
diff --git a/HOW_TO_CREATE_A_PLUGIN.md b/HOW_TO_CREATE_A_PLUGIN.md
deleted file mode 100644
index 50ce8c79fb..0000000000
--- a/HOW_TO_CREATE_A_PLUGIN.md
+++ /dev/null
@@ -1,147 +0,0 @@
------
-
-# Basics
-
-A Plugin is simply a plain JavaScript object containing a couple deeper nested objects or functions e.g.
-
-```js
-const customPlugin = {
- blockStyleFn: (contentBlock) => {
- if (contentBlock.getType() === 'blockquote') {
- return 'superFancyBlockquote';
- }
- },
- customStyleMap: {
- 'STRIKETHROUGH': {
- textDecoration: 'line-through',
- },
- },
-};
-```
-
-As most plugins take some kind of configuration we recommend you to always export a function that creates this object. This is aligned with all the core plugins and leads to a consistent developer experience.
-
-```js
-export default createCustomPlugin = (config) => {
- const blockStyleFn = (contentBlock) => {
- if (contentBlock.getType() === 'blockquote') {
- return 'superFancyBlockquote';
- }
- };
-
- const customStyleMap = {
- 'STRIKETHROUGH': {
- textDecoration: 'line-through',
- },
- };
-
- return {
- blockStyleFn: blockStyleFn,
- customStyleMap: customStyleMap,
- };
-};
-```
-
-# Supported Objects & Hooks
-
-A plugin accepts all standard props the Draft.js Editor Component uses. [See details on Draft.js docs](https://draftjs.org/docs/api-reference-editor.html#content). Commonly used props:
-
-- [blockRendererFn](https://facebook.github.io/draft-js/docs/api-reference-editor#blockrendererfn)
-- [keyBindingFn](https://draftjs.org/docs/advanced-topics-key-bindings)
-- [blockStyleFn](https://facebook.github.io/draft-js/docs/api-reference-editor#blockstylefn)
-- [blockRenderMap](https://draftjs.org/docs/advanced-topics-custom-block-render-map)
-- [customStyleMap](https://facebook.github.io/draft-js/docs/api-reference-editor#customstylemap)
-- [handleReturn](https://facebook.github.io/draft-js/docs/api-reference-editor#handlereturn)
-- [handleKeyCommand](https://facebook.github.io/draft-js/docs/api-reference-editor#handlekeycommand)
-- [handleBeforeInput](https://facebook.github.io/draft-js/docs/api-reference-editor#handlebeforeinput)
-- [handlePastedText](https://facebook.github.io/draft-js/docs/api-reference-editor#handlepastedtext)
-- [handlePastedFiles](https://facebook.github.io/draft-js/docs/api-reference-editor#handlepastedfiles)
-- [handleDroppedFiles](https://facebook.github.io/draft-js/docs/api-reference-editor#handledroppedfiles)
-- [handleDrop](https://facebook.github.io/draft-js/docs/api-reference-editor#handledrop)
-- [onFocus](https://draftjs.org/docs/api-reference-editor#onfocus)
-- [onBlur](https://draftjs.org/docs/api-reference-editor#onblur)
-
-There is one difference compared to the original properties.
-All functions receive an additional argument. This argument is an object containing:
-
-```js
-// PluginFunctions
-{
- getPlugins, // a function returning a list of all the plugins
- getProps, // a function returning a list of all the props pass into the Editor
- setEditorState, // a function to update the EditorState
- getEditorState, // a function to get the current EditorState
- getReadOnly, // a function returning of the Editor is set to readOnly
- setReadOnly, // a function which allows to set the Editor to readOnly
- getEditorRef, // a function to get the editor reference
-}
-```
-
-In addition a plugin accepts
-
-- `initialize: (PluginFunctions) => void`
-- `onChange: (EditorState, PluginFunctions) => EditorState`
-- `willUnmount: (PluginFunctions) => void`
-- `decorators: Array
](https://www.youtube.com/watch?v=gxNuHZXZMgs)
-
-## License
-
-MIT
diff --git a/_next/static/-6XXtPTZgqZlnRd58_Ddg/_buildManifest.js b/_next/static/-6XXtPTZgqZlnRd58_Ddg/_buildManifest.js
new file mode 100644
index 0000000000..e50b19975b
--- /dev/null
+++ b/_next/static/-6XXtPTZgqZlnRd58_Ddg/_buildManifest.js
@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(s,c,a,i,t,n,e,u,g,l,p,d,b,f){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[u,g,l,s,t,e,p,d,c,i,n,b,f,"static/css/e00f5e057637b024.css","static/chunks/pages/index-15d6f1b5bec46fc3.js"],"/_error":["static/chunks/pages/_error-d63cba356b3aa116.js"],"/plugin/alignment":[s,a,e,c,i,n,"static/css/9bf8996e4d52cbd8.css","static/chunks/pages/plugin/alignment-182b474395d6762b.js"],"/plugin/anchor":[s,a,c,i,"static/css/19074a5c964d27ab.css","static/chunks/pages/plugin/anchor-cc26c231e428bec6.js"],"/plugin/counter":[s,a,c,"static/css/54dfdcd6ed2b1d15.css","static/chunks/pages/plugin/counter-f84c3c5198ffa97b.js"],"/plugin/divider":[s,a,t,c,i,"static/css/fc25f1fcf66161e0.css","static/chunks/pages/plugin/divider-f122d1bcec77c387.js"],"/plugin/drag-n-drop":[s,a,c,"static/css/c571fd3d55823bed.css","static/chunks/pages/plugin/drag-n-drop-3664a34ed09fbda3.js"],"/plugin/emoji":[u,g,l,s,a,t,p,c,b,"static/css/299addaeb8a0ba95.css","static/chunks/pages/plugin/emoji-990fbc160786371c.js"],"/plugin/focus":[s,a,c,"static/css/bc01436dddd837be.css","static/chunks/pages/plugin/focus-e35eba035180e64a.js"],"/plugin/hashtag":[s,a,c,"static/css/978e5ee349eeaf00.css","static/chunks/pages/plugin/hashtag-301fe7b87be49187.js"],"/plugin/image":[s,a,c,i,n,"static/css/3fa7cfdd0beb4be2.css","static/chunks/pages/plugin/image-c0bef6a1e0d06a6a.js"],"/plugin/inline-toolbar":[s,a,c,i,"static/css/987d435ff3571481.css","static/chunks/pages/plugin/inline-toolbar-e66ace81b86e1a26.js"],"/plugin/linkify":[s,a,d,c,"static/css/583f288ab85135ea.css","static/chunks/pages/plugin/linkify-e4127dbd42c15fad.js"],"/plugin/mention":[s,a,t,c,f,"static/css/5301e0fb50c5360e.css","static/chunks/pages/plugin/mention-f1575e7abffe45b4.js"],"/plugin/resizeable":[s,a,c,"static/css/7ac4e841a8238f8f.css","static/chunks/pages/plugin/resizeable-dfd8353122d4b0fb.js"],"/plugin/side-toolbar":[s,a,t,c,i,"static/css/d5bb08430f487eb7.css","static/chunks/pages/plugin/side-toolbar-7ec5a661e83dab1f.js"],"/plugin/static-toolbar":[s,a,c,i,"static/css/fab1f1089444c56d.css","static/chunks/pages/plugin/static-toolbar-addde6cce1731da4.js"],"/plugin/sticker":[s,a,e,c,"static/css/513e3ac1986443fd.css","static/chunks/pages/plugin/sticker-e46a6b67c6048be9.js"],"/plugin/text-alignment":[s,a,c,i,"static/css/31c1b8488db8489d.css","static/chunks/pages/plugin/text-alignment-cdea13bc54a0e85c.js"],"/plugin/undo":[s,a,c,"static/css/297731f5c658b7fb.css","static/chunks/pages/plugin/undo-695b362b85bce4aa.js"],"/plugin/video":[s,a,c,i,n,"static/css/bfb03c943cd2fe74.css","static/chunks/pages/plugin/video-b84f4a5ac2937a7b.js"],sortedPages:["/","/_app","/_error","/plugin/alignment","/plugin/anchor","/plugin/counter","/plugin/divider","/plugin/drag-n-drop","/plugin/emoji","/plugin/focus","/plugin/hashtag","/plugin/image","/plugin/inline-toolbar","/plugin/linkify","/plugin/mention","/plugin/resizeable","/plugin/side-toolbar","/plugin/static-toolbar","/plugin/sticker","/plugin/text-alignment","/plugin/undo","/plugin/video"]}}("static/chunks/555-b7e478b7b600d2af.js","static/chunks/939-4cf2274a6c6ccc61.js","static/chunks/476-bd8692ffeba577c0.js","static/chunks/421-166ce65c2a260d12.js","static/chunks/741-ace5b09005d5e4e4.js","static/chunks/138-096d8bd7cf015139.js","static/chunks/369-1bb4b35cbd3dc28b.js","static/chunks/4c744e84-8b893d7def364f63.js","static/chunks/77909d4e-51880379d4d487e0.js","static/chunks/b9a87c41-63947730b0b5daf2.js","static/chunks/979-c7836630a6c96155.js","static/chunks/399-7e31892d1546ac11.js","static/chunks/531-b0e68b6eb7f8331b.js","static/chunks/987-46fc5c96e9113a23.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/-6XXtPTZgqZlnRd58_Ddg/_ssgManifest.js b/_next/static/-6XXtPTZgqZlnRd58_Ddg/_ssgManifest.js
new file mode 100644
index 0000000000..0511aa895e
--- /dev/null
+++ b/_next/static/-6XXtPTZgqZlnRd58_Ddg/_ssgManifest.js
@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set,self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/chunks/138-096d8bd7cf015139.js b/_next/static/chunks/138-096d8bd7cf015139.js
new file mode 100644
index 0000000000..ca08a73deb
--- /dev/null
+++ b/_next/static/chunks/138-096d8bd7cf015139.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[138],{16347:function(e,t,n){n.d(t,{Z:function(){return y}});var r=n(2784),o=n(1503),c=n(52367),a=n(20138);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t{children}
;\n}\n\nconst blockRenderMap = Immutable.Map({\n atomic: {\n element: 'figure',\n wrapper: \n
\n );\n }\n}\n",name:"SimpleAlignmentEditor.js"}),(0,a.jsx)(d.Z,{code:"import React from 'react';\n\nconst ColorBlock = React.forwardRef(\n (\n {\n block, // eslint-disable-line no-unused-vars\n blockProps, // eslint-disable-line no-unused-vars\n customStyleMap, // eslint-disable-line no-unused-vars\n customStyleFn, // eslint-disable-line no-unused-vars\n decorator, // eslint-disable-line no-unused-vars\n forceSelection, // eslint-disable-line no-unused-vars\n offsetKey, // eslint-disable-line no-unused-vars\n selection, // eslint-disable-line no-unused-vars\n tree, // eslint-disable-line no-unused-vars\n contentState, // eslint-disable-line no-unused-vars\n blockStyleFn, // eslint-disable-line no-unused-vars\n preventScroll, // eslint-disable-line no-unused-vars\n style,\n ...elementProps\n },\n ref\n ) => (\n \n {\n this.editor = element;\n }}\n blockRenderMap={extendedBlockRenderMap}\n />\n
\n {children}
;\n}\n\nconst blockRenderMap = Immutable.Map({\n atomic: {\n element: 'figure',\n wrapper: \n
\n );\n }\n}\n",name:"SimpleAlignmentEditor.js"}),(0,a.jsx)(d.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ababab;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n\n.wrapper {\n position: relative;\n z-index: 1;\n}\n",name:"editorStyles.css"}),(0,a.jsx)(d.Z,{code:'.alignmentTool {\n left: 50%;\n transform: translate(-50%) scale(0);\n position: absolute;\n border: 1px solid #111;\n background: #333;\n border-radius: 4px;\n box-shadow: 0px 1px 3px 0px rgba(220, 220, 220, 1);\n z-index: 2;\n box-sizing: border-box;\n}\n\n.alignmentTool:after,\n.alignmentTool:before {\n top: 100%;\n left: 50%;\n border: solid transparent;\n content: " ";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n}\n\n.alignmentTool:after {\n border-color: rgba(255, 255, 255, 0);\n border-top-color: #333;\n border-width: 4px;\n margin-left: -4px;\n}\n\n.alignmentTool:before {\n border-color: rgba(221, 221, 221, 0);\n border-top-color: #111;\n border-width: 6px;\n margin-left: -6px;\n}\n',name:"alignmentToolStyles.css"}),(0,a.jsx)(d.Z,{code:".buttonWrapper {\n display: inline-block;\n}\n\n.button {\n background: #333;\n color: #ddd;\n font-size: 18px;\n border: 0;\n padding-top: 5px;\n vertical-align: bottom;\n height: 34px;\n width: 36px;\n border-radius: 4px;\n}\n\n.button svg {\n fill: #ddd;\n}\n\n.button:hover,\n.button:focus {\n background: #444;\n outline: 0; /* reset for :focus */\n}\n\n.active {\n color: #6a9cc9;\n}\n\n.active svg {\n fill: #6a9cc9;\n}\n",name:"buttonStyles.css"})]})]})}}]),t}(s.Component)},88441:function(n){n.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},23201:function(n){n.exports={editor:"editorStyles_editor__6OqVI",options:"editorStyles_options__52n1U",wrapper:"editorStyles_wrapper__s9_p2"}},3648:function(n){n.exports={alignmentTool:"alignmentToolStyles_alignmentTool__wVh_W"}},26039:function(n){n.exports={buttonWrapper:"buttonStyles_buttonWrapper__Ei1lS",button:"buttonStyles_button__jNoYu",active:"buttonStyles_active__nPIYM"}},80573:function(n){n.exports={editor:"editorStyles_editor__XIj_l",options:"editorStyles_options__5rzDL",wrapper:"editorStyles_wrapper__y4nQW"}},4813:function(n){n.exports={root:"InlineCode_root__8ZQag"}},92836:function(n){n.exports={root:"styles_root__AesYu",param:"styles_param__SfmSr",paramBig:"styles_paramBig__HQysz",paramName:"styles_paramName__acXYX",subParams:"styles_subParams__zxYtG",subParam:"styles_subParam__P_yck",subParamName:"styles_subParamName__0BQve",list:"styles_list__Xg0Cw",listEntry:"styles_listEntry__5bQsP",guideCodeBlock:"styles_guideCodeBlock__K3_Md"}},27805:function(n,e,t){"use strict";function o(n,e){for(var t=0;t\n {\n this.editor = element;\n }}\n blockRenderMap={extendedBlockRenderMap}\n />\n
\n \n
\n);\n\nexport default MyEditor;\n",name:"gettingStarted.js"}),(0,s.jsxs)("p",{children:["The plugin ships with a default styling available at this location: \xa0",(0,s.jsx)(ge.Z,{code:"node_modules/@draft-js-plugins/anchor/lib/plugin.css"}),". If you want to use the default styles, you can include this stylesheet (",(0,s.jsx)(fe.Z,{target:"_blank",href:"https://webpack.js.org/loaders/style-loader/",children:"Webpack usage"}),"). Otherwise you can supply your own styles via the `theme` config option."]})]}),(0,s.jsxs)(p.Z,{children:[(0,s.jsx)(he.Z,{level:2,children:"Configuration Parameters"}),(0,s.jsxs)("div",{className:ye().param,children:[(0,s.jsx)("span",{className:ye().paramName,children:"theme"}),(0,s.jsx)("span",{children:"Object of CSS classes with the following keys:"}),(0,s.jsxs)("div",{className:ye().subParams,children:[(0,s.jsxs)("div",{className:ye().subParam,children:[(0,s.jsx)("span",{className:ye().subParamName,children:"input:"}),"CSS class for the input field in the add link form."]}),(0,s.jsxs)("div",{className:ye().subParam,children:[(0,s.jsx)("span",{className:ye().subParamName,children:"inputInvalid:"}),"CSS class for the input field when the URL is invalid."]}),(0,s.jsxs)("div",{className:ye().subParam,children:[(0,s.jsx)("span",{className:ye().subParamName,children:"link:"}),"CSS class for the link in the editor content."]})]})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:ye().paramName,children:"placeholder"}),(0,s.jsx)("span",{children:"The placeholder that is shown when the input field is empty."})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:ye().paramName,children:"linkTarget"}),(0,s.jsx)("span",{children:"The target attribute of the link."})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:ye().paramName,children:"Link"}),(0,s.jsx)("span",{children:"Specify the link component that will be rendered."})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:ye().paramName,children:"LinkButton"}),(0,s.jsx)("span",{children:"Specify the button component that will be rendered to add and remove links."})]})]}),(0,s.jsxs)(p.Z,{children:[(0,s.jsx)(he.Z,{level:2,children:"Simple Link Plugin Example"}),(0,s.jsx)(pe,{}),(0,s.jsx)(m.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createInlineToolbarPlugin from '@draft-js-plugins/inline-toolbar';\nimport createLinkPlugin from '@draft-js-plugins/anchor';\nimport {\n ItalicButton,\n BoldButton,\n UnderlineButton,\n} from '@draft-js-plugins/buttons';\nimport editorStyles from './editorStyles.module.css';\n\nconst linkPlugin = createLinkPlugin();\nconst inlineToolbarPlugin = createInlineToolbarPlugin();\nconst { InlineToolbar } = inlineToolbarPlugin;\nconst plugins = [inlineToolbarPlugin, linkPlugin];\nconst text =\n 'Try selecting a part of this text and click on the link button in the toolbar that appears \u2026';\n\nexport default class SimpleLinkPluginEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => this.setState({ editorState });\n\n focus = () => this.editor.focus();\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"SimpleLinkPluginEditor.js"})]}),(0,s.jsxs)(p.Z,{children:[(0,s.jsx)(he.Z,{level:2,children:"Custom Link Plugin Example"}),(0,s.jsx)(oe,{}),(0,s.jsx)(m.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createInlineToolbarPlugin from '@draft-js-plugins/inline-toolbar';\nimport createLinkPlugin from '@draft-js-plugins/anchor';\nimport {\n ItalicButton,\n BoldButton,\n UnderlineButton,\n} from '@draft-js-plugins/buttons';\nimport editorStyles from './editorStyles.module.css';\nimport buttonStyles from './buttonStyles.module.css';\nimport toolbarStyles from './toolbarStyles.module.css';\nimport linkStyles from './linkStyles.module.css';\n\nconst linkPlugin = createLinkPlugin({\n theme: linkStyles,\n placeholder: 'http://\u2026',\n});\nconst inlineToolbarPlugin = createInlineToolbarPlugin({\n theme: { buttonStyles, toolbarStyles },\n});\nconst { InlineToolbar } = inlineToolbarPlugin;\nconst plugins = [inlineToolbarPlugin, linkPlugin];\nconst text =\n 'Try selecting a part of this text and click on the link button in the toolbar that appears \u2026';\n\nexport default class ThemedInlineToolbarEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => this.setState({ editorState });\n\n focus = () => this.editor.focus();\n\n render() {\n return (\n \n
\n )\n }\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"CustomLinkPluginEditor.js"}),(0,s.jsx)(m.Z,{code:".input {\n height: 34px;\n width: 220px;\n padding: 0 12px;\n font-size: 15px;\n font-family: inherit;\n background-color: transparent;\n border: none;\n color: #ddd;\n}\n\n.input:focus {\n outline: none;\n}\n\n.input::placeholder {\n color: #aaa;\n}\n\n.inputInvalid {\n color: #e65757;\n}\n\n.link {\n color: #2996da;\n text-decoration: underline;\n}\n",name:"linkStyles.css"})]})]})}}]),n}(u.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},15127:function(e){e.exports={buttonWrapper:"buttonStyles_buttonWrapper__xapXl",button:"buttonStyles_button__msSBA",active:"buttonStyles_active__jKfue"}},94665:function(e){e.exports={editor:"editorStyles_editor__5gbzO"}},66086:function(e){e.exports={input:"linkStyles_input__hgjp9",inputInvalid:"linkStyles_inputInvalid___tonp",link:"linkStyles_link__4Rx0M"}},5636:function(e){e.exports={toolbar:"toolbarStyles_toolbar__VMmQ1"}},18991:function(e){e.exports={editor:"editorStyles_editor__7So_R"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},18843:function(e){e.exports={root:"styles_root__WSr6b",param:"styles_param__OPkaZ",paramName:"styles_paramName__m_XGM",subParams:"styles_subParams__plziI",subParam:"styles_subParam__oyKwW",subParamName:"styles_subParamName__ovnTb",list:"styles_list__fx9eM",listEntry:"styles_listEntry__kQPLn",guideCodeBlock:"styles_guideCodeBlock__T1O_k"}},20310:function(e){"use strict";e.exports=(e,t)=>{if("string"!==typeof e)throw new TypeError(`Expected \`url\` to be of type \`string\`, got \`${typeof e}\``);return e=e.trim(),t={https:!0,...t},/^\.*\/|^(?!localhost)\w+:/.test(e)?e:e.replace(/^(?!(?:\w+:)?\/\/)/,t.https?"https://":"http://")}},77012:function(e,t,n){"use strict";n.d(t,{C:function(){return d},Z:function(){return c}});var i=n(2784),a=n(52367),o=n(1503),r=n(20138);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n
\n )\n }\n \n
\n);\n\nexport default MyEditor;\n",name:"gettingStarted.js"}),(0,a.jsx)(mt.Z,{level:3,children:"Importing the default styles"}),(0,a.jsxs)("p",{children:["The plugin ships with a default styling available at this location in the installed package: \xa0",(0,a.jsx)(pt.Z,{code:"node_modules/@draft-js-plugins/counter/lib/plugin.css"})]}),(0,a.jsx)(mt.Z,{level:4,children:"Webpack Usage"}),(0,a.jsxs)("ul",{className:xt().list,children:[(0,a.jsxs)("li",{className:xt().listEntry,children:["1. Install Webpack loaders: \xa0",(0,a.jsx)(pt.Z,{code:"npm i style-loader css-loader --save-dev"})]}),(0,a.jsxs)("li",{className:xt().listEntry,children:["2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.",(0,a.jsx)(u.Z,{code:"module.exports = {\n module: {\n loaders: [\n {\n test: /plugin\\.css$/,\n loaders: ['style-loader', 'css'],\n },\n ],\n },\n};\n",className:xt().guideCodeBlock})]}),(0,a.jsxs)("li",{className:xt().listEntry,children:["3. Add the below import line to your component to tell Webpack to inject the style to your component.",(0,a.jsx)(u.Z,{code:"import '@draft-js-plugins/counter/lib/plugin.css';",className:xt().guideCodeBlock})]}),(0,a.jsx)("li",{className:xt().listEntry,children:"4. Restart Webpack."})]})]}),(0,a.jsxs)(d.Z,{children:[(0,a.jsx)(mt.Z,{level:2,children:"Configuration Parameters"}),(0,a.jsxs)("div",{className:xt().param,children:[(0,a.jsx)("div",{className:xt().paramName,children:"theme"}),(0,a.jsxs)("div",{children:["Javascript object of CSS classes with the following keys.",(0,a.jsxs)("div",{className:xt().subParams,children:[(0,a.jsxs)("div",{className:xt().subParam,children:[(0,a.jsx)("span",{className:xt().subParamName,children:"counter:"})," CSS class to be applied to the number displayed when not over the specified limit"]}),(0,a.jsxs)("div",{className:xt().subParam,children:[(0,a.jsx)("span",{className:xt().subParamName,children:"counterOverLimit:"})," ","CSS class to be applied to the number displayed when over the specified limit"]})]})]})]}),(0,a.jsx)(mt.Z,{level:2,children:"Component Properties"}),(0,a.jsxs)("div",{className:xt().param,children:[(0,a.jsx)("div",{className:xt().paramName,children:"limit"}),(0,a.jsx)("div",{children:"A limit to indicate to the user that a threshold has passed."})]}),(0,a.jsxs)("div",{className:xt().param,children:[(0,a.jsx)("div",{className:xt().paramName,children:"countFunction"}),(0,a.jsx)("div",{children:"A custom counting function for the Custom Counter. The function will receive plain text from the editor (as a string) as input and should return a numerical value."})]})]}),(0,a.jsxs)(d.Z,{children:[(0,a.jsx)(mt.Z,{level:2,children:"Simple Example"}),(0,a.jsx)(ht,{}),(0,a.jsx)(u.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createCounterPlugin from '@draft-js-plugins/counter';\nimport editorStyles from './editorStyles.module.css';\n\nconst counterPlugin = createCounterPlugin();\nconst { CharCounter, WordCounter, LineCounter, CustomCounter } = counterPlugin;\nconst plugins = [counterPlugin];\nconst text = `This editor has counters below!\nTry typing here and watch the numbers go up. \ud83d\ude4c\n\nNote that the color changes when you pass one of the following limits:\n- 200 characters\n- 30 words\n- 10 lines\n`;\n\nexport default class SimpleCounterEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({ editorState });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n customCountFunction(str) {\n const wordArray = str.match(/\\S+/g); // matches words according to whitespace\n return wordArray ? wordArray.length : 0;\n }\n\n render() {\n return (\n \n
\n
\n
\n );\n }\n}\n",name:"SimpleCounterEditor.js"}),(0,a.jsx)(u.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(d.Z,{children:[(0,a.jsx)(mt.Z,{level:2,children:"Themed Example"}),(0,a.jsx)(et,{}),(0,a.jsx)(u.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createCounterPlugin from '@draft-js-plugins/counter';\nimport editorStyles from './editorStyles.module.css';\nimport counterStyles from './counterStyles.module.css';\n\nconst theme = {\n counter: counterStyles.counter,\n counterOverLimit: counterStyles.counterOverLimit,\n};\nconst counterPlugin = createCounterPlugin({ theme });\nconst { CharCounter, WordCounter, LineCounter, CustomCounter } = counterPlugin;\nconst plugins = [counterPlugin];\nconst text = `This editor has counters below!\nTry typing here and watch the numbers go up. \ud83d\ude4c\n\nNote that the color changes when you pass one of the following limits:\n- 200 characters\n- 30 words\n- 10 lines\n`;\n\nexport default class CustomCounterEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({ editorState });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n // eslint-disable-next-line class-methods-use-this\n customCountFunction(str) {\n const wordArray = str.match(/\\S+/g); // matches words according to whitespace\n return wordArray ? wordArray.length : 0;\n }\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n
\n
\n
\n );\n }\n}\n",name:"CustomCounterEditor.js"}),(0,a.jsx)(u.Z,{code:".counter {\n color: white;\n background-color: #353535;\n display: inline-block;\n min-width: 50px;\n border-radius: 10px;\n padding: 2px;\n text-align: center;\n margin-bottom: 5px;\n}\n\n.counterOverLimit {\n color: tomato;\n background-color: #353535;\n display: inline-block;\n min-width: 50px;\n border-radius: 10px;\n padding: 2px;\n text-align: center;\n margin-bottom: 5px;\n}\n",name:"counterStyles.css"}),(0,a.jsx)(u.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]})]})}}]),e}(c.Component)},88441:function(t){t.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},9226:function(t){t.exports={counter:"counterStyles_counter__iI2dQ",counterOverLimit:"counterStyles_counterOverLimit__RyMB0"}},97627:function(t){t.exports={editor:"editorStyles_editor__843A8"}},16922:function(t){t.exports={editor:"editorStyles_editor__mPFSv"}},4813:function(t){t.exports={root:"InlineCode_root__8ZQag"}},88053:function(t){t.exports={root:"styles_root__dgZtx",center:"styles_center__h0_1N",param:"styles_param__CG7gc",paramName:"styles_paramName__yMnyR",subParams:"styles_subParams__3u_Bv",subParam:"styles_subParam__fa3nX",subParamName:"styles_subParamName___amJY",list:"styles_list__32zAo",listEntry:"styles_listEntry__keTUx",guideCodeBlock:"styles_guideCodeBlock__wU4ip"}},27805:function(t,n,e){"use strict";function r(t,n){for(var e=0;e\n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n {\n this.editor = element;\n }}\n />\n\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"DividerWithSideToolbarEditor.js"}),(0,s.jsx)(d.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]})]})}}]),n}(c.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},3956:function(e){e.exports={editor:"editorStyles_editor__6f7Ao"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},14670:function(e){e.exports={root:"styles_root__jIBJ4",param:"styles_param__laocT",paramBig:"styles_paramBig__Isnak",paramName:"styles_paramName__hxaQk",subParams:"styles_subParams__w4QVu",subParam:"styles_subParam__1Rfl_",subParamName:"styles_subParamName__MUGJh",list:"styles_list__U1Qf0",listEntry:"styles_listEntry__QI_VH",guideCodeBlock:"styles_guideCodeBlock__sZfte"}},95597:function(e,t,n){"use strict";n.d(t,{Z:function(){return S}});var r=n(1503),o=n(46670),i=n(52358),a=n.n(i),s=n(2784),c=n(40489);function l(e){var t=function(e,t,n){var o=t.getStartKey(),i=[];return e.getBlockMap().forEach((function(e,t){i.push(e),t===o&&i.push(n)})),e.merge({blockMap:r.BlockMapBuilder.createFromArray(i),selectionBefore:t,selectionAfter:t.merge({anchorKey:n.getKey(),anchorOffset:n.getLength(),focusKey:n.getKey(),focusOffset:n.getLength(),isBackward:!1})})}(e.getCurrentContent(),e.getSelection(),new r.ContentBlock({key:(0,r.genKey)(),type:"unstyled",text:"",characterList:(0,o.List)()})),n=t.merge({selectionAfter:t.getSelectionAfter().set("hasFocus",!0)});return r.EditorState.push(e,n,"insert-fragment")}var d=function(e,t,n,o){var i=e(),s=i.getSelection().getAnchorKey(),c="up"===n?i.getCurrentContent().getBlockBefore(s):i.getCurrentContent().getBlockAfter(s);if((!c||c.get("key")!==s)&&c){var l=a().encode(c.getKey(),0,0),d=document.querySelectorAll('[data-offset-key="'+l+'"]')[0],u=window.getSelection(),f=document.createRange();f.setStart(d,0),f.setEnd(d,0),u.removeAllRanges(),u.addRange(f);var p="up"===n?c.getLength():0;o.preventDefault(),t(r.EditorState.forceSelection(i,new r.SelectionState({anchorKey:c.getKey(),anchorOffset:p,focusKey:c.getKey(),focusOffset:p,isBackward:!1})))}};function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n
\n )\n }\n \n
\n );\n }\n}\n",name:"Editor.js"}),(0,s.jsx)(d.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]})]})}}]),n}(c.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},14638:function(e){e.exports={editor:"editorStyles_editor__T2Yno",options:"editorStyles_options__VDdMG"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},82046:function(e){e.exports={root:"styles_root__hDql0",param:"styles_param__PmqEZ",paramBig:"styles_paramBig__AFheO",paramName:"styles_paramName__eln_v",subParams:"styles_subParams__oWFRP",subParam:"styles_subParam__We0UR",subParamName:"styles_subParamName__AtMza",list:"styles_list__okXIn",listEntry:"styles_listEntry__GRhaP",guideCodeBlock:"styles_guideCodeBlock__19S_b"}},74782:function(e,t,n){"use strict";n.d(t,{Z:function(){return d}});var r=n(1503),o=n(46670),a=n(2784);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n {\n this.editor = element;\n }}\n />\n
\n \n
\n);\n\nexport default MyEditor;\n",name:"gettingStarted.js"}),(0,r.jsx)(I.Z,{level:3,children:"Importing the default styles"}),(0,r.jsxs)("p",{children:["The plugin ships with a default styling available at this location in the installed package: \xa0",(0,r.jsx)(B.Z,{code:"node_modules/@draft-js-plugins/emoji/lib/plugin.css"})]}),(0,r.jsx)(I.Z,{level:4,children:"Webpack Usage"}),(0,r.jsxs)("ul",{className:L().list,children:[(0,r.jsxs)("li",{className:L().listEntry,children:["1. Install Webpack loaders: \xa0",(0,r.jsx)(B.Z,{code:"npm i style-loader css-loader --save-dev"})]}),(0,r.jsxs)("li",{className:L().listEntry,children:["2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.",(0,r.jsx)(m.Z,{code:"module.exports = {\n module: {\n loaders: [\n {\n test: /plugin\\.css$/,\n loaders: ['style-loader', 'css'],\n },\n ],\n },\n};\n",className:L().guideCodeBlock})]}),(0,r.jsxs)("li",{className:L().listEntry,children:["3. Add the below import line to your component to tell Webpack to inject the style to your component.",(0,r.jsx)(m.Z,{code:"import '@draft-js-plugins/emoji/lib/plugin.css';",className:L().guideCodeBlock})]}),(0,r.jsx)("li",{className:L().listEntry,children:"4. Restart Webpack."})]})]}),(0,r.jsxs)(d.Z,{children:[(0,r.jsx)(I.Z,{level:2,children:"Configuration Parameters"}),(0,r.jsxs)("div",{className:L().param,children:[(0,r.jsx)("span",{className:L().paramName,children:"theme"}),(0,r.jsx)("span",{children:"Object of CSS classes with the following keys."}),(0,r.jsxs)("div",{className:L().subParams,children:[(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emoji:"}),"CSS class for the emoji wrapper."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSuggestions:"}),"CSS class for suggestions component."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSuggestionsEntry:"}),"CSS class for an entry in the suggestions component."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSuggestionsEntryFocused:"}),"CSS class for the focused entry in the suggestions component."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSuggestionsEntryText:"}),"CSS class for an entry\u2019s text in the suggestions component."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSuggestionsEntryIcon:"}),"CSS class for an entry\u2019s emoji image in the suggestions component."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelect:"}),"CSS class for emoji select component."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectButton:"}),"CSS class for button to open emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectButtonPressed:"}),"CSS class for pressed state of button to open emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopover:"}),"CSS class for emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverClosed:"}),"CSS class for closed state of the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverTitle:"}),"CSS class for a title of active group in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverGroups:"}),"CSS class for the emoji groups wrapper in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverGroup:"}),"CSS class for a group of emojis in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverGroupTitle:"}),"CSS class for a title of emoji group in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverGroupList:"}),"CSS class for a group emoji list in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverGroupItem:"}),"CSS class for a group emoji list item in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverToneSelect:"}),"CSS class for tone select in the emoji select popup.",(0,r.jsxs)("div",{children:[(0,r.jsx)("em",{children:"Important. The tone select must overlap the emoji select popup so that disable controls of the popup. By default"}),(0,r.jsx)(m.Z,{code:".emojiSelectPopoverToneSelect {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: 2;\n}"})]})]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverToneSelectList:"}),"CSS class for a tone select emoji list in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverToneSelectItem:"}),"CSS class for a tone select emoji list item in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverEntry:"}),"CSS class for an emoji entry in the emoji select popup (including tone select)."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverEntryFocused:"}),"CSS class for the focused emoji entry in the emoji select popup (including tone select)."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverEntryIcon:"}),"CSS class for an emoji entry\u2019s image in the emoji select popup (including tone select)."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverNav:"}),"CSS class for a group navigation in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverNavItem:"}),"CSS class for a group navigation item in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverNavEntry:"}),"CSS class for an entry of the group navigation in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverNavEntryActive:"}),"CSS class for active state of the group navigation entry in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverScrollbarOuter:"}),"CSS class for the outer scrollbar box in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverScrollbar:"}),"CSS class for scrollbar in the emoji select popup."]}),(0,r.jsxs)("div",{className:L().subParam,children:[(0,r.jsx)("span",{className:L().subParamName,children:"emojiSelectPopoverScrollbarThumb:"}),"CSS class for scrollbar thumb in the emoji select popup."]})]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"positionSuggestions"}),(0,r.jsxs)("span",{children:[(0,r.jsx)("b",{children:"Deprecated, use popperOptions instead"})," The function can be used to manipulate the position of the popover containing the suggestions. It receives one object as arguments containing the visible rectangle surrounding the decorated search string including the colon. In addition the object contains prevProps, prevState, state & props. An object should be returned which can contain all sorts of styles. The defined properties will be applied as inline-styles."]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"popperOptions"}),(0,r.jsxs)("span",{children:["This options will be used to initialize popper.js. Read in detail about it"," ",(0,r.jsx)(A.Z,{href:" https://popper.js.org/docs/v2/",children:"here."})]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"priorityList"}),(0,r.jsxs)("div",{children:["These entries will be show first in the EmojiSuggestions dropdown after typing `:`. Must be an object which must contain Emoji entries used by JoyPixels e.g.",(0,r.jsx)(m.Z,{code:"priorityList: {\n ':see_no_evil:': [\"1f648\"],\n ':raised_hands:': [\"1f64c\"],\n ':100:': [\"1f4af\"],\n}"})]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"selectGroups"}),(0,r.jsxs)("div",{children:["Emoji select groups specification. Must be an array of objects, which declare each group: title, icon (can be a string or React element), array of emoji categories from JoyPixels e.g.",(0,r.jsx)(m.Z,{code:"selectGroups: [{\n title: 'Society',\n icon: '\ud83d\udc65',\n categories: ['people', 'food', 'travel'],\n}, {\n title: 'Objects & symbols',\n icon: '\u2764\ufe0f',\n categories: ['objects', 'symbols'],\n}]"})]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"selectButtonContent"}),(0,r.jsx)("span",{children:"Content of button which opens emoji select popup. (Default content is \u263a)"})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"toneSelectOpenDelay"}),(0,r.jsx)("span",{children:"Time delay before opening tone select. (Default value is 500\xa0ms)"})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"useNativeArt"}),(0,r.jsxs)("span",{children:["If set to ",(0,r.jsx)(B.Z,{code:"true"}),", uses host system art for emojis instead of JoyPixels art. Default value is"," ",(0,r.jsx)(B.Z,{code:"false"}),"."]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"emojiImage"}),(0,r.jsxs)("span",{children:["If provided the passed component is used to render the preview image for the suggestions. If this parameter is set the"," ",(0,r.jsx)(B.Z,{code:"useNativeArt"})," is ignored. You can use this component to implement your own emoji library. It receives the following props: emoji, unicode and theme"]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"emojiInlineText"}),(0,r.jsxs)("span",{children:["If provided the passed component is used to render the emojis in the text. If this parameter is set the"," ",(0,r.jsx)(B.Z,{code:"useNativeArt"})," is ignored. You can use this component to implement your own emoji library. It receives the following props: decoratedText, className, children and theme"]})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"disableInlineEmojis"}),(0,r.jsx)("span",{children:"Disables the suggestion popover for emojis in the editor."})]}),(0,r.jsx)(I.Z,{level:3,children:"EmojiSuggestions"}),(0,r.jsxs)("div",{children:["The EmojiSuggestions component is part of the plugin and should placed somewhere in the JSX after the Editor. It takes the following props:",(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"onSearchChange"}),(0,r.jsx)("span",{children:"A callback which is triggered whenever the search term changes. The first argument is an object which contains the search term in the property value."})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"onOpen"}),(0,r.jsx)("span",{children:"A callback which is triggered whenever the suggestions popover opens."})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"onClose"}),(0,r.jsx)("span",{children:"A callback which is triggered whenever the suggestions popover closes."})]})]}),(0,r.jsx)(I.Z,{level:3,children:"EmojiSelect"}),(0,r.jsxs)("div",{children:["The EmojiSelect is another component of the plugin. It takes the following props:",(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"onOpen"}),(0,r.jsx)("span",{children:"A callback which is triggered whenever the emoji popover opens."})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"onClose"}),(0,r.jsx)("span",{children:"A callback which is triggered whenever the emoji popover closes."})]}),(0,r.jsxs)("div",{className:L().paramBig,children:[(0,r.jsx)("span",{className:L().paramName,children:"closeOnEmojiSelect"}),(0,r.jsx)("span",{children:"If set to true the popup is closed after an emoji is selected, otherwise it will stay open."})]})]})]}),(0,r.jsxs)(d.Z,{children:[(0,r.jsx)(I.Z,{level:2,children:"Simple Emoji Example"}),(0,r.jsx)(T,{}),(0,r.jsx)(m.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createEmojiPlugin from '@draft-js-plugins/emoji';\nimport editorStyles from './editorStyles.module.css';\n\nconst emojiPlugin = createEmojiPlugin();\nconst { EmojiSuggestions, EmojiSelect } = emojiPlugin;\nconst plugins = [emojiPlugin];\nconst text = `Cool, we can have all sorts of Emojis here. \ud83d\ude4c\n\ud83c\udf3f\u2603\ufe0f\ud83c\udf89\ud83d\ude48 aaaand maybe a few more here \ud83d\udc32\u2600\ufe0f\ud83d\uddfb Quite fun!`;\n\nexport default class SimpleEmojiEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n
\n );\n }\n}\n",name:"SimpleEmojiEditor.js"}),(0,r.jsx)(m.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.js"})]}),(0,r.jsxs)(d.Z,{children:[(0,r.jsx)(I.Z,{level:2,children:"Custom Emoji Example with native emojis"}),(0,r.jsx)(y,{}),(0,r.jsx)(m.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createEmojiPlugin from '@draft-js-plugins/emoji';\nimport editorStyles from './editorStyles.module.css';\n\nconst emojiPlugin = createEmojiPlugin({\n useNativeArt: true,\n});\nconst { EmojiSuggestions, EmojiSelect } = emojiPlugin;\nconst plugins = [emojiPlugin];\nconst text = `Cool, we can have all sorts of Emojis here. \ud83d\ude4c\n\ud83c\udf3f\u2603\ufe0f\ud83c\udf89\ud83d\ude48 aaaand maybe a few more here \ud83d\udc32\u2600\ufe0f\ud83d\uddfb Quite fun!`;\n\nexport default class CustomEmojiEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n
\n );\n }\n}\n",name:"SimpleEmojiEditor.js"})]})]})}}]),t}(l.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},18962:function(e){e.exports={editor:"editorStyles_editor__DfhF9",options:"editorStyles_options__w_4Ts"}},71743:function(e){e.exports={editor:"editorStyles_editor__iTRaD",options:"editorStyles_options____y2Q"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},19150:function(e){e.exports={root:"styles_root__g2p_g",center:"styles_center__qeKtQ",param:"styles_param__wmY3k",paramBig:"styles_paramBig__mGgSD",paramName:"styles_paramName__vqiEo",subParams:"styles_subParams__4TQF3",subParam:"styles_subParam__yglrR",subParamName:"styles_subParamName__x7Efk",list:"styles_list___yHct",listEntry:"styles_listEntry__wcJ0w",guideCodeBlock:"styles_guideCodeBlock__uErDN"}},52367:function(e,s,t){"use strict";t.d(s,{$m:function(){return o},MT:function(){return a},ZP:function(){return r}});var n=t(1503);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var s=1;s\n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"SimpleFocusEditor.js"}),(0,a.jsx)(d.Z,{code:"import React from 'react';\n\nconst ColorBlock = React.forwardRef(\n (\n {\n block, // eslint-disable-line no-unused-vars\n blockProps, // eslint-disable-line no-unused-vars\n customStyleMap, // eslint-disable-line no-unused-vars\n customStyleFn, // eslint-disable-line no-unused-vars\n decorator, // eslint-disable-line no-unused-vars\n forceSelection, // eslint-disable-line no-unused-vars\n offsetKey, // eslint-disable-line no-unused-vars\n selection, // eslint-disable-line no-unused-vars\n tree, // eslint-disable-line no-unused-vars\n contentState, // eslint-disable-line no-unused-vars\n blockStyleFn, // eslint-disable-line no-unused-vars\n preventScroll, // eslint-disable-line no-unused-vars\n style,\n ...elementProps\n },\n ref\n ) => (\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"SimpleHashtagEditor.js"}),(0,r.jsx)(l.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,r.jsxs)(d.Z,{children:[(0,r.jsx)(Z.Z,{level:2,children:"Themed Hashtag Example"}),(0,r.jsx)(f,{}),(0,r.jsx)(l.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createHashtagPlugin from '@draft-js-plugins/hashtag';\nimport editorStyles from './editorStyles.module.css';\nimport hashtagStyles from './hashtagStyles.module.css';\n\nconst hashtagPlugin = createHashtagPlugin({ theme: hashtagStyles });\nconst plugins = [hashtagPlugin];\nconst text =\n 'In this editor, we can even apply our own styles \u2026 #design #theme';\n\nexport default class CustomHashtagEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"CustomHashtagEditor.js"}),(0,r.jsx)(l.Z,{code:".hashtag {\n color: #1CA782;\n font-family: cursive;\n}\n",name:"hashtagStyles.css"}),(0,r.jsx)(l.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]})]})}}]),e}(o.Component)},88441:function(u){u.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},61471:function(u){u.exports={editor:"editorStyles_editor__tbhBa"}},45718:function(u){u.exports={hashtag:"hashtagStyles_hashtag__fIWJv"}},87483:function(u){u.exports={editor:"editorStyles_editor__wchtf"}},4813:function(u){u.exports={root:"InlineCode_root__8ZQag"}},68535:function(u){u.exports={root:"styles_root__9mjru",param:"styles_param__yi9Uy",paramName:"styles_paramName__Hae94",subParams:"styles_subParams__cCZKw",subParam:"styles_subParam__CJr0E",subParamName:"styles_subParamName__JZ8Ij",list:"styles_list__1EQ1V",listEntry:"styles_listEntry__aHYbn",guideCodeBlock:"styles_guideCodeBlock__i2XSI"}},7091:function(u,t,e){"use strict";e.d(t,{Z:function(){return B}});var n=e(2784),s=e(40489);function a(){return a=Object.assign?Object.assign.bind():function(u){for(var t=1;t\n
\n );\n }\n}\n",name:"SimpleImageEditor.js"}),(0,s.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]}),(0,s.jsxs)(u.Z,{children:[(0,s.jsx)(te.Z,{level:2,children:"Alignment + Resize + Focus + Drag'n'Drop + Drag'n'Drop Upload Example"}),(0,s.jsx)(J,{}),(0,s.jsx)(c.Z,{code:"import { readFile } from '@draft-js-plugins/drag-n-drop-upload';\n\n/*\n*\n* @name: mockUpload\n* @desc: Custom file upload function. Simulates a file upload.\n* @param {[File], formData} data: consists of an array of files that have been uploaded and a formData object composed of those same files.\n* @param {function([{name: string, src: string}])} success - function to mark a successfull file upload, it takes an array of successfully uploaded files.\n* @param {function({name: string, src?: string})} failed - function that is called to mark a failure to upload one or more files. Removes the upload placeholders.\n* @param {(function(percent:int, file: {name:string, src:string})} progress - function to mark the progress in percentage points. It updates the progress count on each placeholder.\n*/\nexport default function mockUpload(data, success, failed, progress) {\n function doProgress(percent) {\n progress(percent || 1);\n if (percent === 100) {\n // Start reading the file\n Promise.all(data.files.map(readFile)).then((files) =>\n success(files, { retainSrc: true })\n );\n } else {\n setTimeout(doProgress, 250, (percent || 0) + 10);\n }\n }\n\n doProgress();\n}\n",name:"mockUpload.js"}),(0,s.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { convertFromRaw, EditorState } from 'draft-js';\n\nimport Editor, { composeDecorators } from '@draft-js-plugins/editor';\n\nimport createImagePlugin from '@draft-js-plugins/image';\n\nimport createAlignmentPlugin from '@draft-js-plugins/alignment';\n\nimport createFocusPlugin from '@draft-js-plugins/focus';\n\nimport createResizeablePlugin from '@draft-js-plugins/resizeable';\n\nimport createBlockDndPlugin from '@draft-js-plugins/drag-n-drop';\n\nimport createDragNDropUploadPlugin from '@draft-js-plugins/drag-n-drop-upload';\nimport editorStyles from './editorStyles.module.css';\nimport mockUpload from './mockUpload';\n\nconst focusPlugin = createFocusPlugin();\nconst resizeablePlugin = createResizeablePlugin();\nconst blockDndPlugin = createBlockDndPlugin();\nconst alignmentPlugin = createAlignmentPlugin();\nconst { AlignmentTool } = alignmentPlugin;\n\nconst decorator = composeDecorators(\n resizeablePlugin.decorator,\n alignmentPlugin.decorator,\n focusPlugin.decorator,\n blockDndPlugin.decorator\n);\nconst imagePlugin = createImagePlugin({ decorator });\n\nconst dragNDropFileUploadPlugin = createDragNDropUploadPlugin({\n handleUpload: mockUpload,\n addImage: imagePlugin.addImage,\n});\n\nconst plugins = [\n dragNDropFileUploadPlugin,\n blockDndPlugin,\n focusPlugin,\n alignmentPlugin,\n resizeablePlugin,\n imagePlugin,\n];\n\n/* eslint-disable */\nconst initialState = {\n entityMap: {\n 0: {\n type: 'IMAGE',\n mutability: 'IMMUTABLE',\n data: {\n src: '/images/canada-landscape-small.jpg',\n },\n },\n },\n blocks: [\n {\n key: '9gm3s',\n text:\n 'You can have images in your text field. This is a very rudimentary example, but you can enhance the image plugin with resizing, focus or alignment plugins.',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: 'ov7r',\n text: ' ',\n type: 'atomic',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [\n {\n offset: 0,\n length: 1,\n key: 0,\n },\n ],\n data: {},\n },\n {\n key: 'e23a8',\n text: 'See advanced examples further down \u2026',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n ],\n};\n/* eslint-enable */\n\nexport default class CustomImageEditor extends Component {\n state = {\n editorState: EditorState.createWithContent(convertFromRaw(initialState)),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n
\n );\n }\n}\n",name:"AddImageEditor.js"}),(0,s.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]}),(0,s.jsxs)(u.Z,{children:[(0,s.jsx)(te.Z,{level:2,children:"Add Image Button Example"}),(0,s.jsx)(k,{}),(0,s.jsx)(c.Z,{code:"import React, { Component } from 'react';\n\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\n\nimport createImagePlugin from '@draft-js-plugins/image';\nimport ImageAdd from './ImageAdd';\n\nimport editorStyles from './editorStyles.module.css';\n\nconst imagePlugin = createImagePlugin();\nconst plugins = [imagePlugin];\n\nconst text =\n 'Click on the + button below and insert \"/images/canada-landscape-small.jpg\" to add the landscape image. Alternativly you can use any image url on the web.';\n\nexport default class CustomImageEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n
\n );\n }\n}\n",name:"AddImageEditor.js"}),(0,s.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]})]})}}]),n}(l.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},90797:function(e){e.exports={addImage:"styles_addImage__oDDUB",addImagePopover:"styles_addImagePopover__Pk7zR",addImageClosedPopover:"styles_addImageClosedPopover__5ruB0",addImageButton:"styles_addImageButton__8hQ7c",addImagePressedButton:"styles_addImagePressedButton__4ysW9 styles_addImageButton__8hQ7c",addImageBottomGradient:"styles_addImageBottomGradient__blXlD",addImageInput:"styles_addImageInput__Bk2QZ",addImageConfirmButton:"styles_addImageConfirmButton__NLsa5"}},10287:function(e){e.exports={editor:"editorStyles_editor__cuMXt",options:"editorStyles_options__G0gLu"}},44710:function(e){e.exports={editor:"editorStyles_editor__zYq1x",options:"editorStyles_options__xsPF4"}},17101:function(e){e.exports={editor:"editorStyles_editor__gPkdE",options:"editorStyles_options__Z_hyN"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},60115:function(e){e.exports={root:"styles_root__Nj6Xu",param:"styles_param__XAHIo",paramBig:"styles_paramBig__wMN9c",paramName:"styles_paramName__XYdYV",subParams:"styles_subParams__iubxK",subParam:"styles_subParam__JPamg",subParamName:"styles_subParamName__yFFAm",list:"styles_list__niFRh",listEntry:"styles_listEntry__p4Y8x",guideCodeBlock:"styles_guideCodeBlock__w3ZtJ"}},74782:function(e,t,n){"use strict";n.d(t,{Z:function(){return c}});var a=n(1503),r=n(46670),o=n(2784);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n {\n this.editor = element;\n }}\n />\n
\n \n {\n editor.current = element;\n }}\n />\n
\n );\n};\n\nexport default SimpleInlineToolbarEditor;\n",name:"SimpleInlineToolbarEditor.js"}),(0,a.jsx)(u.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(c.Z,{children:[(0,a.jsx)(L.Z,{level:2,children:"Custom Inline Toolbar Example"}),(0,a.jsx)(_,{}),(0,a.jsx)(u.Z,{code:"/* eslint-disable react/no-multi-comp */\nimport React, { Component } from 'react';\n\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\n\nimport createInlineToolbarPlugin, {\n Separator,\n} from '@draft-js-plugins/inline-toolbar';\nimport {\n ItalicButton,\n BoldButton,\n UnderlineButton,\n CodeButton,\n HeadlineOneButton,\n HeadlineTwoButton,\n HeadlineThreeButton,\n UnorderedListButton,\n OrderedListButton,\n BlockquoteButton,\n CodeBlockButton,\n} from '@draft-js-plugins/buttons';\nimport editorStyles from './editorStyles.module.css';\n\nclass HeadlinesPicker extends Component {\n componentDidMount() {\n setTimeout(() => {\n window.addEventListener('click', this.onWindowClick);\n });\n }\n\n componentWillUnmount() {\n window.removeEventListener('click', this.onWindowClick);\n }\n\n onWindowClick = () =>\n // Call `onOverrideContent` again with `undefined`\n // so the toolbar can show its regular content again.\n this.props.onOverrideContent(undefined);\n\n render() {\n const buttons = [HeadlineOneButton, HeadlineTwoButton, HeadlineThreeButton];\n return (\n \n {buttons.map((Button, i) => (\n // eslint-disable-next-line react/no-array-index-key\n \n ))}\n
\n );\n }\n}\n\nclass HeadlinesButton extends Component {\n // When using a click event inside overridden content, mouse down\n // events needs to be prevented so the focus stays in the editor\n // and the toolbar remains visible onMouseDown = (event) => event.preventDefault()\n onMouseDown = (event) => event.preventDefault();\n\n onClick = () =>\n // A button can call `onOverrideContent` to replace the content\n // of the toolbar. This can be useful for displaying sub\n // menus or requesting additional information from the user.\n this.props.onOverrideContent(HeadlinesPicker);\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"CustomInlineToolbarEditor.js"}),(0,a.jsx)(u.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.headlineButtonWrapper {\n display: inline-block;\n}\n\n.headlineButton {\n background: #fbfbfb;\n color: #888;\n font-size: 18px;\n border: 0;\n padding-top: 5px;\n vertical-align: bottom;\n height: 34px;\n width: 36px;\n}\n\n.headlineButton:hover,\n.headlineButton:focus {\n background: #f3f3f3;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(c.Z,{children:[(0,a.jsx)(L.Z,{level:2,children:"Themed Inline Toolbar Example"}),(0,a.jsx)(D,{}),(0,a.jsx)(u.Z,{code:"import React, { Component } from 'react';\n\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\n\nimport createInlineToolbarPlugin from '@draft-js-plugins/inline-toolbar';\nimport editorStyles from './editorStyles.module.css';\nimport buttonStyles from './buttonStyles.module.css';\nimport toolbarStyles from './toolbarStyles.module.css';\n\nconst inlineToolbarPlugin = createInlineToolbarPlugin({\n theme: { buttonStyles, toolbarStyles },\n});\nconst { InlineToolbar } = inlineToolbarPlugin;\nconst plugins = [inlineToolbarPlugin];\nconst text =\n 'In this editor a toolbar with a lot more options shows up once you select part of the text \u2026';\n\nexport default class ThemedInlineToolbarEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n componentDidMount() {\n // fixing issue with SSR https://github.com/facebook/draft-js/issues/2332#issuecomment-761573306\n // eslint-disable-next-line react/no-did-mount-set-state\n this.setState({\n editorState: createEditorStateWithText(text),\n });\n }\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n
\n )\n }\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"ThemedInlineToolbarEditor.js"}),(0,a.jsx)(u.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]})]})}}]),t}(l.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},14149:function(e){e.exports={editor:"editorStyles_editor__xOQ2t",headlineButtonWrapper:"editorStyles_headlineButtonWrapper__ktoeI",headlineButton:"editorStyles_headlineButton__qVe1q"}},49776:function(e){e.exports={editor:"editorStyles_editor__Mg1vV"}},21749:function(e){e.exports={buttonWrapper:"buttonStyles_buttonWrapper__QMi8s",button:"buttonStyles_button__lQjHQ",active:"buttonStyles_active__P_Pll"}},86968:function(e){e.exports={editor:"editorStyles_editor__Y7ZT_"}},16183:function(e){e.exports={toolbar:"toolbarStyles_toolbar__Qyyy4"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},55026:function(e){e.exports={root:"styles_root__Ibjgg",param:"styles_param__OU4Mg",paramName:"styles_paramName__OfEol",subParams:"styles_subParams__yrv_s",subParam:"styles_subParam__KxW2T",subParamName:"styles_subParamName__zhFOc",list:"styles_list__WKcb3",listEntry:"styles_listEntry__DLLAc",guideCodeBlock:"styles_guideCodeBlock__VOhAV"}},77012:function(e,n,t){"use strict";t.d(n,{C:function(){return c},Z:function(){return d}});var o=t(2784),i=t(52367),r=t(1503),s=t(20138);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var n=1;n\n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"SimpleLinkifyEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(B.Z,{level:2,children:"Themed Linkify Example"}),(0,a.jsx)(P,{}),(0,a.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { EditorState } from 'draft-js';\nimport Editor from '@draft-js-plugins/editor';\nimport createLinkifyPlugin from '@draft-js-plugins/linkify';\nimport editorStyles from './editorStyles.module.css';\n\nconst linkifyPlugin = createLinkifyPlugin({ target: '_blank' });\nconst plugins = [linkifyPlugin];\n\nexport default class CustomMentionEditor extends Component {\n state = {\n editorState: EditorState.createEmpty(),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"CustomLinkifyEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(B.Z,{level:2,children:"Themed Linkify Example"}),(0,a.jsx)(E,{}),(0,a.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { EditorState } from 'draft-js';\nimport Editor from '@draft-js-plugins/editor';\nimport createLinkifyPlugin from '@draft-js-plugins/linkify';\nimport linkifyIt from 'linkify-it';\nimport tlds from 'tlds';\nimport editorStyles from './editorStyles.module.css';\n\nconst linkifyPlugin = createLinkifyPlugin({\n component(props) {\n // eslint-disable-next-line no-alert, jsx-a11y/anchor-has-content\n return alert('Clicked on Link!')} />;\n },\n customExtractLinks: (text) =>\n linkifyIt().tlds(tlds).set({ fuzzyEmail: false }).match(text),\n});\nconst plugins = [linkifyPlugin];\n\nexport default class CustomMentionEditor extends Component {\n state = {\n editorState: EditorState.createEmpty(),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"CustomComponentLinkifyEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]})]})}}]),n}(l.Component)},88441:function(t){t.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},21466:function(t){t.exports={editor:"editorStyles_editor__afRP0"}},67262:function(t){t.exports={editor:"editorStyles_editor__rZjDZ"}},19567:function(t){t.exports={editor:"editorStyles_editor__kTC1V"}},4813:function(t){t.exports={root:"InlineCode_root__8ZQag"}},94849:function(t){t.exports={root:"styles_root__z8bGY",param:"styles_param__N_qYw",paramName:"styles_paramName__iOf9d",subParams:"styles_subParams__8w2_2",subParam:"styles_subParam__pJrD1",subParamName:"styles_subParamName__HGCdp",list:"styles_list__dKNPr",listEntry:"styles_listEntry__DDfKB",guideCodeBlock:"styles_guideCodeBlock__x8GGq"}},97194:function(t,e,n){"use strict";n.d(e,{Z:function(){return g}});var i=n(2784),r=n(40489),s=n(10251),o=n.n(s),a=n(90784);function l(){return l=Object.assign?Object.assign.bind():function(t){for(var e=1;e\n
\n );\n}\n\nexport default function CustomMentionEditor(): ReactElement {\n const ref = useRef\n
\n \n
\n\n \n
\n \n {mention.name}\n
\n\n \n {mention.title}\n
\n {children}
}\n />\n \n );\n}\n",name:"CustomMentionEditor.ts"}),(0,s.jsx)(a.Z,{code:".mention {\n color: #4a85bb;\n text-decoration: none;\n}\n\n.mentionSuggestions {\n border-top: 1px solid #eee;\n background: #fff;\n border-radius: 2px;\n cursor: pointer;\n padding-top: 8px;\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n transform-origin: 50% 0%;\n transform: scaleY(0);\n margin: -16px;\n}\n\n.mentionSuggestionsEntryContainer {\n display: table;\n width: 100%;\n}\n\n.mentionSuggestionsEntryContainerLeft,\n.mentionSuggestionsEntryContainerRight {\n display: table-cell;\n vertical-align: middle;\n}\n\n.mentionSuggestionsEntryContainerRight {\n width: 100%;\n padding-left: 8px;\n}\n\n.mentionSuggestionsEntry {\n padding: 7px 10px 3px 10px;\n transition: background-color 0.4s cubic-bezier(.27,1.27,.48,.56);\n}\n\n.mentionSuggestionsEntry:active {\n background-color: #cce7ff;\n}\n\n.mentionSuggestionsEntryFocused {\n composes: mentionSuggestionsEntry;\n background-color: #e6f3ff;\n}\n\n.mentionSuggestionsEntryText,\n.mentionSuggestionsEntryTitle {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.mentionSuggestionsEntryText {\n}\n\n.mentionSuggestionsEntryTitle {\n font-size: 80%;\n color: #a7a7a7;\n}\n\n.mentionSuggestionsEntryAvatar {\n display: block;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n}\n",name:"MentionsStyles.module.css"}),(0,s.jsx)(a.Z,{code:"import { MentionData } from '@draft-js-plugins/mention';\n\nconst mentions: MentionData[] = [\n {\n name: 'Matthew Russell',\n title: 'Senior Software Engineer',\n avatar:\n 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',\n },\n {\n name: 'Julian Krispel-Samsel',\n title: 'United Kingdom',\n avatar: 'https://avatars2.githubusercontent.com/u/1188186?v=3&s=400',\n },\n {\n name: 'Jyoti Puri',\n title: 'New Delhi, India',\n avatar: 'https://avatars0.githubusercontent.com/u/2182307?v=3&s=400',\n },\n {\n name: 'Max Stoiber',\n title:\n 'Travels around the world, brews coffee, skis mountains and makes stuff on the web.',\n avatar: 'https://avatars0.githubusercontent.com/u/7525670?s=200&v=4',\n },\n {\n name: 'Nik Graf',\n title: 'Passionate about Software Architecture, UX, Skiing & Triathlons',\n avatar: 'https://avatars0.githubusercontent.com/u/223045?v=3&s=400',\n },\n {\n name: 'Pascal Brandt',\n title: 'HeathIT hacker and researcher',\n avatar:\n 'https://pbs.twimg.com/profile_images/688487813025640448/E6O6I011_400x400.png',\n },\n {\n name: '\u0141ukasz B\u0105k',\n title: 'Randomly Generated User',\n avatar: 'https://randomuser.me/api/portraits/men/36.jpg',\n },\n {\n name: '\u4f50\u3005\u6728 \u5c0f\u6b21\u90ce',\n title: 'Famous Japanese swordsman (SAMURAI)',\n avatar:\n 'https://upload.wikimedia.org/wikipedia/commons/0/08/Sasaki-Ganryu-%28Kojiro%29-by-Utagawa-Kuniyoshi-1845.png',\n url: 'https://en.wikipedia.org/wiki/Sasaki_Kojir%C5%8D',\n },\n];\n\nexport default mentions;\n",name:"Mentions.ts"}),(0,s.jsx)(a.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"CustomMentionEditor.module.css"})]}),(0,s.jsxs)(r.Z,{children:[(0,s.jsx)(K.Z,{level:2,children:"Remote Data Mention Example"}),(0,s.jsx)(R,{}),(0,s.jsx)(a.Z,{code:"import React, {\n ReactElement,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { EditorState } from 'draft-js';\n\nimport Editor from '@draft-js-plugins/editor';\n\nimport createMentionPlugin from '@draft-js-plugins/mention';\nimport editorStyles from './RemoteMentionEditor.module.css';\n\nexport default function RemoteMentionEditor(): ReactElement {\n const ref = useRef\n
\n );\n }\n}\n",name:"SimpleResizeableEditor.js"}),(0,a.jsx)(u.Z,{code:"import React from 'react';\n\nconst ColorBlock = React.forwardRef(\n (\n {\n block, // eslint-disable-line no-unused-vars\n blockProps, // eslint-disable-line no-unused-vars\n customStyleMap, // eslint-disable-line no-unused-vars\n customStyleFn, // eslint-disable-line no-unused-vars\n decorator, // eslint-disable-line no-unused-vars\n forceSelection, // eslint-disable-line no-unused-vars\n offsetKey, // eslint-disable-line no-unused-vars\n selection, // eslint-disable-line no-unused-vars\n tree, // eslint-disable-line no-unused-vars\n contentState, // eslint-disable-line no-unused-vars\n blockStyleFn, // eslint-disable-line no-unused-vars\n preventScroll, // eslint-disable-line no-unused-vars\n style,\n ...elementProps\n },\n ref\n ) => (\n \n {\n this.editor = element;\n }}\n />\n
\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"SimpleSideToolbarEditor.js"}),(0,a.jsx)(d.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(p.Z,{children:[(0,a.jsx)(I.Z,{level:2,children:"Custom Side Toolbar Example"}),(0,a.jsx)(C,{}),(0,a.jsx)(d.Z,{code:"import React, { Component } from 'react';\n\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport {\n HeadlineOneButton,\n HeadlineTwoButton,\n BlockquoteButton,\n CodeBlockButton,\n} from '@draft-js-plugins/buttons';\n\nimport createSideToolbarPlugin from '@draft-js-plugins/side-toolbar';\nimport editorStyles from './editorStyles.module.css';\nimport buttonStyles from './buttonStyles.module.css';\nimport toolbarStyles from './toolbarStyles.module.css';\nimport blockTypeSelectStyles from './blockTypeSelectStyles.module.css';\n\n// Setting the side Toolbar at right position(default is left) and styling with custom theme\nconst sideToolbarPlugin = createSideToolbarPlugin({\n position: 'right',\n theme: { buttonStyles, toolbarStyles, blockTypeSelectStyles },\n});\nconst { SideToolbar } = sideToolbarPlugin;\nconst plugins = [sideToolbarPlugin];\nconst text =\n 'Once you click into the text field the sidebar plugin will show up \u2026';\n\nexport default class CustomSideToolbarEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n componentDidMount() {\n // fixing issue with SSR https://github.com/facebook/draft-js/issues/2332#issuecomment-761573306\n // eslint-disable-next-line react/no-did-mount-set-state\n this.setState({\n editorState: createEditorStateWithText(text),\n });\n }\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"CustomSideToolbarEditor.js"}),(0,a.jsx)(d.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"}),(0,a.jsx)(d.Z,{code:".wrapper {\n position: absolute;\n}\n\n.buttonWrapper {\n display: inline-block;\n}\n\n.button {\n background: #333;\n color: #ddd;\n font-size: 18px;\n border: 0;\n padding-top: 5px;\n vertical-align: bottom;\n height: 34px;\n width: 36px;\n border-radius: 4px;\n}\n\n.button svg {\n fill: #ddd;\n}\n\n.button:hover, .button:focus {\n background: #444;\n outline: 0; /* reset for :focus */\n}\n\n.active {\n color: #6a9cc9;\n}\n\n.active svg {\n fill: #6a9cc9;\n}\n",name:"buttonStyles.css"}),(0,a.jsx)(d.Z,{code:".wrapper {\n position: absolute;\n}\n",name:"toolbarStyles.css"}),(0,a.jsx)(d.Z,{code:'.blockType {\n box-sizing: border-box;\n border: 1px solid #111;\n background: #333;\n padding: 5px;\n margin: 0;\n border-radius: 18px;\n cursor: pointer;\n height: 36px;\n width: 36px;\n line-height: 36px;\n text-align: center;\n}\n\n.blockType svg {\n fill: #ddd;\n}\n\n.spacer {\n position: absolute;\n left: 50%;\n transform: translate(-50%);\n width: 74px;\n height: 8px;\n}\n\n.popup {\n position: absolute;\n left: 50%;\n transform: translate(-50%);\n border: 1px solid #111;\n background: #333;\n border-radius: 2px;\n box-shadow: 0px 1px 3px 0px rgba(220,220,220,1);\n z-index: 3;\n box-sizing: border-box;\n width: 74px;\n margin-top: 8px;\n}\n\n.popup:after, .popup:before {\n bottom: 100%;\n left: 50%;\n border: solid transparent;\n content: " ";\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n}\n\n.popup:after {\n border-color: rgba(251, 251, 251, 0);\n border-bottom-color: #333;\n border-width: 4px;\n margin-left: -4px;\n}\n.popup:before {\n border-color: rgba(221, 221, 221, 0);\n border-bottom-color: #111;\n border-width: 6px;\n margin-left: -6px;\n}\n',name:"blockTypeSelectStyles.css"})]})]})}}]),n}(l.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},53677:function(e){e.exports={blockType:"blockTypeSelectStyles_blockType__DNDx3",spacer:"blockTypeSelectStyles_spacer__8RJt_",popup:"blockTypeSelectStyles_popup__HXIh_"}},50663:function(e){e.exports={wrapper:"buttonStyles_wrapper__6SJps",buttonWrapper:"buttonStyles_buttonWrapper__yzO_M",button:"buttonStyles_button__Rloqk",active:"buttonStyles_active__e1c7A"}},50282:function(e){e.exports={editor:"editorStyles_editor__XKtDz"}},14197:function(e){e.exports={wrapper:"toolbarStyles_wrapper__xssqr"}},10371:function(e){e.exports={editor:"editorStyles_editor__AqZMP"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},61265:function(e){e.exports={root:"styles_root__JZuk7",param:"styles_param___EF4N",paramName:"styles_paramName__03rWD",subParams:"styles_subParams__kRexe",subParam:"styles_subParam__Mibff",subParamName:"styles_subParamName__l2rvA",list:"styles_list__wpxSo",listEntry:"styles_listEntry__F26FM",guideCodeBlock:"styles_guideCodeBlock__WinBM"}},88189:function(e,t,n){"use strict";n.d(t,{Z:function(){return x}});var o=n(2784),s=n(52367),r=n(52358),i=n.n(r),a=n(20138),l=n(35741);function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n
\n )\n }\n \n
\n );\n }\n}\n",name:"SimpleToolbarEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(X.Z,{level:2,children:"Custom Static Toolbar Example"}),(0,a.jsx)(k,{}),(0,a.jsx)(c.Z,{code:"/* eslint-disable react/no-multi-comp */\nimport React, { Component } from 'react';\n\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\n\nimport createToolbarPlugin, {\n Separator,\n} from '@draft-js-plugins/static-toolbar';\nimport {\n ItalicButton,\n BoldButton,\n UnderlineButton,\n CodeButton,\n HeadlineOneButton,\n HeadlineTwoButton,\n HeadlineThreeButton,\n UnorderedListButton,\n OrderedListButton,\n BlockquoteButton,\n CodeBlockButton,\n} from '@draft-js-plugins/buttons';\nimport editorStyles from './editorStyles.module.css';\n\nclass HeadlinesPicker extends Component {\n componentDidMount() {\n setTimeout(() => {\n window.addEventListener('click', this.onWindowClick);\n });\n }\n\n componentWillUnmount() {\n window.removeEventListener('click', this.onWindowClick);\n }\n\n onWindowClick = () =>\n // Call `onOverrideContent` again with `undefined`\n // so the toolbar can show its regular content again.\n this.props.onOverrideContent(undefined);\n\n render() {\n const buttons = [HeadlineOneButton, HeadlineTwoButton, HeadlineThreeButton];\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n {buttons.map((Button, i) => (\n // eslint-disable-next-line\n \n ))}\n
\n );\n }\n}\n\nclass HeadlinesButton extends Component {\n onClick = () =>\n // A button can call `onOverrideContent` to replace the content\n // of the toolbar. This can be useful for displaying sub\n // menus or requesting additional information from the user.\n this.props.onOverrideContent(HeadlinesPicker);\n\n render() {\n return (\n \n \n
\n );\n }\n}\n\nconst toolbarPlugin = createToolbarPlugin();\nconst { Toolbar } = toolbarPlugin;\nconst plugins = [toolbarPlugin];\nconst text =\n 'In this editor a toolbar shows up once you select part of the text \u2026';\n\nexport default class CustomToolbarEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n componentDidMount() {\n // fixing issue with SSR https://github.com/facebook/draft-js/issues/2332#issuecomment-761573306\n // eslint-disable-next-line react/no-did-mount-set-state\n this.setState({\n editorState: createEditorStateWithText(text),\n });\n }\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n
\n );\n }\n}\n",name:"CustomToolbarEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.headlineButtonWrapper {\n display: inline-block;\n}\n\n.headlineButton {\n background: #fbfbfb;\n color: #888;\n font-size: 18px;\n border: 0;\n padding-top: 5px;\n vertical-align: bottom;\n height: 34px;\n width: 36px;\n}\n\n.headlineButton:hover,\n.headlineButton:focus {\n background: #f3f3f3;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(X.Z,{level:2,children:"Themed Static Toolbar Example"}),(0,a.jsx)(q,{}),(0,a.jsx)(c.Z,{code:"import React, { Component } from 'react';\n\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\n\nimport createToolbarPlugin from '@draft-js-plugins/static-toolbar';\nimport editorStyles from './editorStyles.module.css';\nimport buttonStyles from './buttonStyles.module.css';\nimport toolbarStyles from './toolbarStyles.module.css';\n\nconst toolbarPlugin = createToolbarPlugin({\n theme: { buttonStyles, toolbarStyles },\n});\nconst { Toolbar } = toolbarPlugin;\nconst plugins = [toolbarPlugin];\nconst text =\n 'In this editor a toolbar with a lot more options shows up once you select part of the text \u2026';\n\nexport default class ThemedToolbarEditor extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n componentDidMount() {\n // fixing issue with SSR https://github.com/facebook/draft-js/issues/2332#issuecomment-761573306\n // eslint-disable-next-line react/no-did-mount-set-state\n this.setState({\n editorState: createEditorStateWithText(text),\n });\n }\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n \n
\n )\n }\n \n
\n );\n }\n}\n",name:"ThemedToolbarEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"}),(0,a.jsx)(c.Z,{code:".buttonWrapper {\n display: inline-block;\n}\n\n.button {\n background: #333;\n color: #ddd;\n font-size: 18px;\n border: 0;\n padding-top: 5px;\n vertical-align: bottom;\n height: 34px;\n width: 36px;\n border-radius: 4px;\n}\n\n.button svg {\n fill: #ddd;\n}\n\n.button:hover, .button:focus {\n background: #444;\n outline: 0; /* reset for :focus */\n}\n\n.active {\n color: #6a9cc9;\n}\n\n.active svg {\n fill: #6a9cc9;\n}\n",name:"buttonStyles.css"}),(0,a.jsx)(c.Z,{code:".toolbar {\n border: 1px solid #111;\n background: #333;\n border-radius: 4px;\n box-shadow: 0px 1px 3px 0px rgba(220,220,220,1);\n z-index: 2;\n box-sizing: border-box;\n}\n\n.toolbar:after {\n border-color: rgba(255, 255, 255, 0);\n border-top-color: #333;\n border-width: 4px;\n margin-left: -4px;\n}\n\n.toolbar:before {\n border-color: rgba(221, 221, 221, 0);\n border-top-color: #111;\n border-width: 6px;\n margin-left: -6px;\n}\n",name:"toolbarStyles.css"})]})]})}}]),e}(l.Component)},88441:function(t){t.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},84397:function(t){t.exports={editor:"editorStyles_editor__VOpo_",headlineButtonWrapper:"editorStyles_headlineButtonWrapper__KB9tE",headlineButton:"editorStyles_headlineButton__3uA39"}},9389:function(t){t.exports={editor:"editorStyles_editor__wiqT_"}},98773:function(t){t.exports={buttonWrapper:"buttonStyles_buttonWrapper__WH8fv",button:"buttonStyles_button__31gRH",active:"buttonStyles_active__gXfcV"}},41887:function(t){t.exports={editor:"editorStyles_editor__38T7B"}},80398:function(t){t.exports={toolbar:"toolbarStyles_toolbar__xLCJ5"}},4813:function(t){t.exports={root:"InlineCode_root__8ZQag"}},48756:function(t){t.exports={root:"styles_root__RDi4C",param:"styles_param__MaWes",paramName:"styles_paramName__yjZL4",subParams:"styles_subParams__f0WDc",subParam:"styles_subParam__8j0k6",subParamName:"styles_subParamName__LDQMR",list:"styles_list__anhjm",listEntry:"styles_listEntry__3BJ6R",guideCodeBlock:"styles_guideCodeBlock__r7SM0"}},16481:function(t,n,e){"use strict";e.d(n,{C:function(){return h},Z:function(){return u}});var o=e(2784),r=e(52367),i=e(20138),s=e(13980),a=e.n(s);function l(){return l=Object.assign?Object.assign.bind():function(t){for(var n=1;n\n {\n this.editor = element;\n }}\n />\n
\n \n
\n );\n }\n}\n",name:"SimpleStickerEditor.js"}),(0,o.jsx)(l.Z,{code:"import { fromJS } from 'immutable';\n\nconst stickers = fromJS({\n data: {\n 'b3aa388f-b9f4-45b0-bba5-d92cf2caa48b': {\n id: 'b3aa388f-b9f4-45b0-bba5-d92cf2caa48b',\n url: '../images/unicorn-4.png',\n },\n 'adec3f13-823c-47c3-b4d1-be4f68dd9d6d': {\n id: 'adec3f13-823c-47c3-b4d1-be4f68dd9d6d',\n url: '../images/unicorn-1.png',\n },\n 'e14b5a20-1025-4952-b731-41cd4b118ba0': {\n id: 'e14b5a20-1025-4952-b731-41cd4b118ba0',\n url: '../images/unicorn-6.png',\n },\n '659a0dbf-5f85-4f32-999d-eb9ba6b0f417': {\n id: '659a0dbf-5f85-4f32-999d-eb9ba6b0f417',\n url: '../images/unicorn-2.png',\n },\n 'fab0ae95-ae95-4775-b484-72c290437602': {\n id: 'fab0ae95-ae95-4775-b484-72c290437602',\n url: '../images/unicorn-5.png',\n },\n '71853190-8acd-4d3b-b4fd-63f7b0648daa': {\n id: '71853190-8acd-4d3b-b4fd-63f7b0648daa',\n url: '../images/unicorn-3.png',\n },\n },\n});\n\nexport default stickers;\n",name:"stickers.js"}),(0,o.jsx)(l.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]}),(0,o.jsxs)(u.Z,{children:[(0,o.jsx)(M.Z,{level:2,children:"Themed Sticker Example"}),(0,o.jsx)(N,{}),(0,o.jsx)(l.Z,{code:"import React, { Component } from 'react';\nimport { EditorState } from 'draft-js';\nimport Editor from '@draft-js-plugins/editor';\nimport createStickerPlugin from '@draft-js-plugins/sticker';\nimport editorStyles from './editorStyles.module.css';\nimport stickers from './stickers';\n\nconst stickerPlugin = createStickerPlugin({ stickers });\nconst plugins = [stickerPlugin];\nconst StickerSelect = stickerPlugin.StickerSelect;\n\nexport default class CustomStickerEditor extends Component {\n state = {\n editorState: EditorState.createEmpty(),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n
\n );\n }\n}\n",name:"CustomStickerEditor.js"}),(0,o.jsx)(l.Z,{code:"import { fromJS } from 'immutable';\n\nconst stickers = fromJS({\n data: {\n 'b3aa388f-b9f4-45b0-bba5-d92cf2caa48b': {\n id: 'b3aa388f-b9f4-45b0-bba5-d92cf2caa48b',\n url: '../images/unicorn-4.png',\n },\n 'adec3f13-823c-47c3-b4d1-be4f68dd9d6d': {\n id: 'adec3f13-823c-47c3-b4d1-be4f68dd9d6d',\n url: '../images/unicorn-1.png',\n },\n 'e14b5a20-1025-4952-b731-41cd4b118ba0': {\n id: 'e14b5a20-1025-4952-b731-41cd4b118ba0',\n url: '../images/unicorn-6.png',\n },\n '659a0dbf-5f85-4f32-999d-eb9ba6b0f417': {\n id: '659a0dbf-5f85-4f32-999d-eb9ba6b0f417',\n url: '../images/unicorn-2.png',\n },\n 'fab0ae95-ae95-4775-b484-72c290437602': {\n id: 'fab0ae95-ae95-4775-b484-72c290437602',\n url: '../images/unicorn-5.png',\n },\n '71853190-8acd-4d3b-b4fd-63f7b0648daa': {\n id: '71853190-8acd-4d3b-b4fd-63f7b0648daa',\n url: '../images/unicorn-3.png',\n },\n },\n});\n\nexport default stickers;\n",name:"stickers.js"}),(0,o.jsx)(l.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]})]})}}]),n}(c.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},57754:function(e){e.exports={editor:"editorStyles_editor__xznJ3",options:"editorStyles_options__0Tgx8"}},71324:function(e){e.exports={editor:"editorStyles_editor__dO406",options:"editorStyles_options__NjF9_"}},4813:function(e){e.exports={root:"InlineCode_root__8ZQag"}},90212:function(e){e.exports={root:"styles_root__iJkep",param:"styles_param__cflCA",paramBig:"styles_paramBig__guWyN",paramName:"styles_paramName__F6mmz",subParams:"styles_subParams__NyNSV",subParam:"styles_subParam___KjgI",subParamName:"styles_subParamName__0Q_dr",list:"styles_list__OXU_H",listEntry:"styles_listEntry__L1gLZ",guideCodeBlock:"styles_guideCodeBlock__gGk3_"}},62749:function(e,t,n){"use strict";n.d(t,{Z:function(){return h}});var s=n(2784),r=n(46670),a=n(1503);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n \n \n
\n);\n\nexport default MyEditor;\n",name:"gettingStarted.js"}),(0,s.jsxs)("p",{children:["The plugin ships with a default styling available at this location: \xa0",(0,s.jsx)(G.Z,{code:"node_modules/@draft-js-plugins/text-alignment/lib/plugin.css"}),". If you want to use the default styles, you can include this stylesheet (",(0,s.jsx)(K.Z,{target:"_blank",href:"https://webpack.js.org/loaders/style-loader/",children:"Webpack usage"}),"). Otherwise you can supply your own styles via the `theme` config option."]})]}),(0,s.jsxs)(m.Z,{children:[(0,s.jsx)(X.Z,{level:2,children:"Simple Static Toolbar Example"}),(0,s.jsx)(M,{}),(0,s.jsx)(g.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createStaticToolbarPlugin from '@draft-js-plugins/static-toolbar';\nimport createTextAlignmentPlugin from '@draft-js-plugins/text-alignment';\nimport {\n ItalicButton,\n BoldButton,\n UnderlineButton,\n} from '@draft-js-plugins/buttons';\nimport editorStyles from './editorStyles.module.css';\n\nconst textAlignmentPlugin = createTextAlignmentPlugin();\nconst staticToolbarPlugin = createStaticToolbarPlugin();\nconst { Toolbar } = staticToolbarPlugin;\nconst plugins = [staticToolbarPlugin, textAlignmentPlugin];\nconst text =\n 'Try selecting a part of this text and click on one of alignment buttons';\n\nexport default class SimpleTextAlignmentPlugin extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => this.setState({ editorState });\n\n focus = () => this.editor.focus();\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"SimpleTextAlignmentPluginEditor.js"}),(0,s.jsx)(g.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"})]}),(0,s.jsxs)(m.Z,{children:[(0,s.jsx)(X.Z,{level:2,children:"Custom Static Toolbar Example"}),(0,s.jsx)(D,{}),(0,s.jsx)(g.Z,{code:"import React, { Component } from 'react';\nimport Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';\nimport createStaticToolbarPlugin from '@draft-js-plugins/static-toolbar';\nimport createTextAlignmentPlugin from '@draft-js-plugins/text-alignment';\nimport {\n ItalicButton,\n BoldButton,\n UnderlineButton,\n} from '@draft-js-plugins/buttons';\nimport editorStyles from './editorStyles.module.css';\nimport buttonStyles from './buttonStyles.module.css';\nimport alignmentStyles from './alignmentStyles.module.css';\nimport toolbarStyles from './toolbarStyles.module.css';\n\nconst textAlignmentPlugin = createTextAlignmentPlugin({\n theme: { alignmentStyles },\n});\n\nconst staticToolbarPlugin = createStaticToolbarPlugin({\n theme: { buttonStyles, toolbarStyles },\n});\nconst { Toolbar } = staticToolbarPlugin;\nconst plugins = [staticToolbarPlugin, textAlignmentPlugin];\nconst text =\n 'Try selecting a part of this text and click on one of alignment buttons';\n\nexport default class SimpleTextAlignmentPlugin extends Component {\n state = {\n editorState: createEditorStateWithText(text),\n };\n\n onChange = (editorState) => this.setState({ editorState });\n\n focus = () => this.editor.focus();\n\n render() {\n return (\n \n
\n )\n }\n \n {\n this.editor = element;\n }}\n />\n \n {\n // may be use React.Fragment instead of div to improve perfomance after React 16\n (externalProps) => (\n \n
\n );\n }\n}\n",name:"customExampleCode.js"}),(0,s.jsx)(g.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n",name:"editorStyles.css"}),(0,s.jsx)(g.Z,{code:".buttonWrapper {\n display: inline-block;\n}\n\n.button {\n background: #333;\n color: #ddd;\n font-size: 18px;\n border: 0;\n padding-top: 5px;\n vertical-align: bottom;\n height: 34px;\n width: 36px;\n border-radius: 4px;\n}\n\n.button svg {\n fill: #ddd;\n}\n\n.button:hover, .button:focus {\n background: #444;\n outline: 0; /* reset for :focus */\n}\n\n.active {\n color: #6a9cc9;\n}\n\n.active svg {\n fill: #6a9cc9;\n}\n",name:"buttonStyles.css"}),(0,s.jsx)(g.Z,{code:".toolbar {\n border: 1px solid #111;\n background: #333;\n border-radius: 4px;\n box-shadow: 0px 1px 3px 0px rgba(220,220,220,1);\n z-index: 2;\n box-sizing: border-box;\n}\n\n.toolbar:after {\n border-color: rgba(255, 255, 255, 0);\n border-top-color: #333;\n border-width: 4px;\n margin-left: -4px;\n}\n\n.toolbar:before {\n border-color: rgba(221, 221, 221, 0);\n border-top-color: #111;\n border-width: 6px;\n margin-left: -6px;\n}\n",name:"toolbarStyles.css"}),(0,s.jsx)(g.Z,{code:".draftLeft :global(.public-DraftStyleDefault-ltr) {\n color: blue;\n font-weight: bold;\n text-align: left;\n}\n\n.draftRight :global(.public-DraftStyleDefault-ltr) {\n color: green;\n font-weight: bold;\n text-align: right;\n}\n\n.draftCenter :global(.public-DraftStyleDefault-ltr) {\n color: red;\n font-weight: bold;\n text-align: center;\n}",name:"alignmentStyles.css"})]})]})}}]),e}(d.Component)},88441:function(t){t.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},13537:function(t){t.exports={draftLeft:"alignmentStyles_draftLeft__KI0QF",draftRight:"alignmentStyles_draftRight__zTGwm",draftCenter:"alignmentStyles_draftCenter__z60AY"}},95561:function(t){t.exports={buttonWrapper:"buttonStyles_buttonWrapper__1BFHW",button:"buttonStyles_button__M0XX0",active:"buttonStyles_active__DkEx1"}},72274:function(t){t.exports={editor:"editorStyles_editor__Q5vIY"}},4993:function(t){t.exports={toolbar:"toolbarStyles_toolbar__aNDrq"}},84971:function(t){t.exports={editor:"editorStyles_editor__xlaaJ"}},4813:function(t){t.exports={root:"InlineCode_root__8ZQag"}},10795:function(t){t.exports={root:"styles_root__4AGyH",param:"styles_param___TRI3",paramBig:"styles_paramBig__zOVEL",paramName:"styles_paramName__u9zh4",subParams:"styles_subParams__I1O8H",subParam:"styles_subParam__wOWFC",subParamName:"styles_subParamName__ubx3I",list:"styles_list__7j1er",listEntry:"styles_listEntry___1U_o",guideCodeBlock:"styles_guideCodeBlock__ipkyI"}},16481:function(t,n,e){"use strict";e.d(n,{C:function(){return m},Z:function(){return u}});var o=e(2784),r=e(52367),i=e(20138),a=e(13980),s=e.n(a);function l(){return l=Object.assign?Object.assign.bind():function(t){for(var n=1;n\n
\n )\n }\n \n
\n);\n\nexport default MyEditor;\n",name:"gettingStarted.js"}),(0,a.jsx)(A.Z,{level:3,children:"Importing the default styles"}),(0,a.jsxs)("p",{children:["The plugin ships with a default styling available at this location in the installed package: \xa0",(0,a.jsx)(O.Z,{code:"node_modules/@draft-js-plugins/undo/lib/plugin.css"})]}),(0,a.jsx)(A.Z,{level:4,children:"Webpack Usage"}),(0,a.jsxs)("ul",{className:I().list,children:[(0,a.jsxs)("li",{className:I().listEntry,children:["1. Install Webpack loaders: \xa0",(0,a.jsx)(O.Z,{code:"npm i style-loader css-loader --save-dev"})]}),(0,a.jsxs)("li",{className:I().listEntry,children:["2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.",(0,a.jsx)(c.Z,{code:"module.exports = {\n module: {\n loaders: [\n {\n test: /plugin\\.css$/,\n loaders: ['style-loader', 'css'],\n },\n ],\n },\n};\n",className:I().guideCodeBlock})]}),(0,a.jsxs)("li",{className:I().listEntry,children:["3. Add the below import line to your component to tell Webpack to inject the style to your component.",(0,a.jsx)(c.Z,{code:"import '@draft-js-plugins/undo/lib/plugin.css';",className:I().guideCodeBlock})]}),(0,a.jsx)("li",{className:I().listEntry,children:"4. Restart Webpack."})]})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(A.Z,{level:2,children:"Configuration Parameters"}),(0,a.jsxs)("div",{className:I().param,children:[(0,a.jsx)("span",{className:I().paramName,children:"theme"}),(0,a.jsx)("span",{children:"Object of CSS classes with the following keys."}),(0,a.jsxs)("div",{className:I().subParams,children:[(0,a.jsxs)("div",{className:I().subParam,children:[(0,a.jsx)("span",{className:I().subParamName,children:"undo:"})," CSS class to be applied to undo button."]}),(0,a.jsxs)("div",{className:I().subParam,children:[(0,a.jsx)("span",{className:I().subParamName,children:"redo:"})," CSS class to be applied to redo button."]})]})]}),(0,a.jsxs)("div",{className:I().param,children:[(0,a.jsx)("span",{className:I().paramName,children:"undoContent"}),(0,a.jsx)("span",{children:"Content of undo button. (Default content is \u21ba)"})]}),(0,a.jsxs)("div",{className:I().param,children:[(0,a.jsx)("span",{className:I().paramName,children:"redoContent"}),(0,a.jsx)("span",{children:"Content of redo button. (Default content is \u21bb)"})]})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(A.Z,{level:2,children:"Simple Example"}),(0,a.jsx)(R,{}),(0,a.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { EditorState } from 'draft-js';\nimport Editor from '@draft-js-plugins/editor';\nimport createUndoPlugin from '@draft-js-plugins/undo';\nimport editorStyles from './editorStyles.module.css';\n\nconst undoPlugin = createUndoPlugin();\nconst { UndoButton, RedoButton } = undoPlugin;\nconst plugins = [undoPlugin];\n\nexport default class SimpleUndoEditor extends Component {\n state = {\n editorState: EditorState.createEmpty(),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n
\n );\n }\n}\n",name:"SimpleUndoEditor.js"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]}),(0,a.jsxs)(u.Z,{children:[(0,a.jsx)(A.Z,{level:2,children:"Themed Undo/Redo Example"}),(0,a.jsx)(C,{}),(0,a.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { EditorState } from 'draft-js';\nimport Editor from '@draft-js-plugins/editor';\nimport createUndoPlugin from '@draft-js-plugins/undo';\nimport editorStyles from './editorStyles.module.css';\nimport buttonStyles from './buttonStyles.module.css';\n\nconst theme = {\n undo: buttonStyles.button,\n redo: buttonStyles.button,\n};\nconst undoPlugin = createUndoPlugin({\n undoContent: 'Undo',\n redoContent: 'Redo',\n theme,\n});\nconst { UndoButton, RedoButton } = undoPlugin;\nconst plugins = [undoPlugin];\n\nexport default class CustomUndoEditor extends Component {\n state = {\n editorState: EditorState.createEmpty(),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n
\n );\n }\n}\n",name:"CustomUndoEditor.js"}),(0,a.jsx)(c.Z,{code:".button {\n border: 1px solid #bbb;\n height: 40px;\n color: #888;\n border-radius: 2px;\n cursor: pointer;\n position: relative;\n background-color: #fff;\n margin-right: 10px;\n}\n\n.button:focus {\n background-color: #eee;\n color: #999;\n outline: 0; /* reset for :focus */\n}\n\n.button:hover {\n background-color: #eee;\n color: #999;\n}\n\n.button:active {\n background-color: #ddd;\n color: #777;\n}\n\n.button:disabled {\n background-color: #F5F5F5;\n color: #ccc;\n}\n",name:"buttonStyles.css"}),(0,a.jsx)(c.Z,{code:".editor {\n box-sizing: border-box;\n border: 1px solid #ddd;\n cursor: text;\n padding: 16px;\n border-radius: 2px;\n margin-bottom: 2em;\n box-shadow: inset 0px 1px 8px -3px #ABABAB;\n background: #fefefe;\n}\n\n.editor :global(.public-DraftEditor-content) {\n min-height: 140px;\n}\n\n.options {\n margin-bottom: 20px;\n}\n",name:"editorStyles.css"})]})]})}}]),e}(d.Component)},88441:function(t){t.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},65672:function(t){t.exports={button:"buttonStyles_button__zQIJX"}},35189:function(t){t.exports={editor:"editorStyles_editor__xnWq5",options:"editorStyles_options__JwQpC"}},49516:function(t){t.exports={editor:"editorStyles_editor__Tpj6_",options:"editorStyles_options__VJVzl"}},4813:function(t){t.exports={root:"InlineCode_root__8ZQag"}},55460:function(t){t.exports={root:"styles_root__wngh6",param:"styles_param__ZD3HD",paramName:"styles_paramName__uvhz7",subParams:"styles_subParams__AahcY",subParam:"styles_subParam__K9J9D",subParamName:"styles_subParamName__viEVC",list:"styles_list__05_97",listEntry:"styles_listEntry__AwKYG",guideCodeBlock:"styles_guideCodeBlock__7d5lL"}},27699:function(t,n,e){"use strict";e.d(n,{Z:function(){return f}});var o=e(2784),s=e(13980),r=e.n(s),i=e(1503),a=e(40489);function d(){return d=Object.assign?Object.assign.bind():function(t){for(var n=1;n\n {\n this.editor = element;\n }}\n />\n
\n \n
\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"SimpleVideoEditor.js"})]}),(0,s.jsxs)(u.Z,{children:[(0,s.jsx)(de.Z,{level:2,children:"Advanced Video Example"}),(0,s.jsx)(ee,{}),(0,s.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { EditorState, convertFromRaw } from 'draft-js';\nimport Editor, { composeDecorators } from '@draft-js-plugins/editor';\n\nimport createAlignmentPlugin from '@draft-js-plugins/alignment';\n\nimport createFocusPlugin from '@draft-js-plugins/focus';\n\nimport createResizeablePlugin from '@draft-js-plugins/resizeable';\nimport createVideoPlugin from '@draft-js-plugins/video';\nimport editorStyles from './editorStyles.module.css';\n\nconst focusPlugin = createFocusPlugin();\nconst resizeablePlugin = createResizeablePlugin();\nconst alignmentPlugin = createAlignmentPlugin();\nconst { AlignmentTool } = alignmentPlugin;\n\nconst decorator = composeDecorators(\n resizeablePlugin.decorator,\n alignmentPlugin.decorator,\n focusPlugin.decorator\n);\n\nconst videoPlugin = createVideoPlugin({ decorator });\nconst { types } = videoPlugin;\nconst plugins = [focusPlugin, alignmentPlugin, resizeablePlugin, videoPlugin];\n/* eslint-disable */\nconst initialState = {\n entityMap: {\n 0: {\n type: types.VIDEOTYPE,\n mutability: 'IMMUTABLE',\n data: {\n src: 'https://www.youtube.com/watch?v=iEPTlhBmwRg',\n },\n },\n },\n blocks: [\n {\n key: '9gm3s',\n text:\n 'You can have video in your text field. This is a very rudimentary example, but you can enhance the video plugin with resizing, focus or alignment plugins.',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: 'ov7r',\n text: ' ',\n type: 'atomic',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [\n {\n offset: 0,\n length: 1,\n key: 0,\n },\n ],\n data: {},\n },\n {\n key: 'e23a8',\n text: 'See advanced examples further down \u2026',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: '97vas',\n text: '',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: 'bbc5n',\n text: '',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: 'iqdh',\n text: '',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: 'fg6vi',\n text: '',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n {\n key: '7bvko',\n text: '',\n type: 'unstyled',\n depth: 0,\n inlineStyleRanges: [],\n entityRanges: [],\n data: {},\n },\n ],\n};\n/* eslint-enable */\nexport default class CustomVideoEditor extends Component {\n state = {\n editorState: EditorState.createWithContent(convertFromRaw(initialState)),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n {\n this.editor = element;\n }}\n />\n
\n );\n }\n}\n",name:"CustomVideoEditor.js"})]}),(0,s.jsxs)(u.Z,{children:[(0,s.jsx)(de.Z,{level:2,children:"Add Video Button Example"}),(0,s.jsx)(I,{}),(0,s.jsx)(c.Z,{code:"import React, { Component } from 'react';\nimport { EditorState } from 'draft-js';\nimport Editor from '@draft-js-plugins/editor';\nimport createVideoPlugin from '@draft-js-plugins/video';\nimport VideoAdd from './VideoAdd';\nimport editorStyles from './editorStyles.module.css';\n\nconst videoPlugin = createVideoPlugin();\n\nconst plugins = [videoPlugin];\n\nexport default class CustomVideoEditor extends Component {\n state = {\n editorState: EditorState.createEmpty(),\n };\n\n onChange = (editorState) => {\n this.setState({\n editorState,\n });\n };\n\n focus = () => {\n this.editor.focus();\n };\n\n render() {\n return (\n \n
\n );\n }\n}\n",name:"CustomAddVideoVideoEditor.js"})]})]})}}]),n}(d.Component)},88441:function(e){e.exports={root:"Code_root__L5JtP",name:"Code_name__0g9Xm",hiddenName:"Code_hiddenName__iBe7o"}},83475:function(e){e.exports={addVideo:"styles_addVideo__WYYUd",addVideoPopover:"styles_addVideoPopover__hBjqg",addVideoClosedPopover:"styles_addVideoClosedPopover__wP_3T",addVideoButton:"styles_addVideoButton__sy6Nn",addVideoPressedButton:"styles_addVideoPressedButton__3bKEt styles_addVideoButton__sy6Nn",addVideoBottomGradient:"styles_addVideoBottomGradient__w3QWf",addVideoInput:"styles_addVideoInput__LM6R5",addVideoConfirmButton:"styles_addVideoConfirmButton__0t5h6"}},28644:function(e){e.exports={editor:"editorStyles_editor__x9fiq"}},69908:function(e){e.exports={editor:"editorStyles_editor__HqJRO"}},32186:function(e){e.exports={editor:"editorStyles_editor__Aucla"}},87358:function(e){e.exports={root:"styles_root__5MvqW",param:"styles_param__uPMsT",paramName:"styles_paramName__izsN3",subParams:"styles_subParams__XhRfq",subParam:"styles_subParam__eifOO",subParamName:"styles_subParamName__wrzzn",list:"styles_list__ZmeR2",listEntry:"styles_listEntry__RMjnb",guideCodeBlock:"styles_guideCodeBlock__cQ3PX"}},53816:function(e,t,n){"use strict";n.d(t,{Z:function(){return c}});var i=n(1503),o=n(2784);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t\n {\n this.editor = element;\n }}\n />\n
\n