draftail - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/blocks/EmbedBlock.js

@@ -66,3 +66,3 @@ 'use strict';
                         'a',
-                        { href: url, target: '_blank', rel: 'noopener' },
+                        { href: url, target: '_blank', rel: 'noopener noreferrer' },
                         url
@@ -69,0 +69,0 @@ )

dist/components/BlockControls.js

@@ -11,12 +11,10 @@ 'use strict';
 
-var _StyleButton = require('./StyleButton');
+var _Button = require('./Button');
 
-var _StyleButton2 = _interopRequireDefault(_StyleButton);
+var _Button2 = _interopRequireDefault(_Button);
 
 var _DraftUtils = require('../utils/DraftUtils');
 
-var DraftUtils = _interopRequireWildcard(_DraftUtils);
+var _DraftUtils2 = _interopRequireDefault(_DraftUtils);
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -32,8 +30,8 @@
         styles.map(function (type) {
-            return _react2.default.createElement(_StyleButton2.default, {
+            return _react2.default.createElement(_Button2.default, {
                 key: type.label,
-                active: type.style === DraftUtils.getSelectedBlockType(editorState),
+                active: type.style === _DraftUtils2.default.getSelectedBlockType(editorState),
                 label: type.label,
                 icon: type.icon,
-                onToggle: onToggle,
+                onClick: onToggle.bind(null, type.style),
                 style: type.style
@@ -40,0 +38,0 @@ });

dist/components/Button.js

@@ -16,13 +16,11 @@ 'use strict';
         label = _ref.label,
+        active = _ref.active,
         onClick = _ref.onClick;
-
-    var className = 'RichEditor-styleButton';
-
-    if (icon) {
-        className += ' icon icon-' + icon;
-    }
-
     return _react2.default.createElement(
-        'span',
-        { className: className, onClick: onClick },
+        'a',
+        {
+            href: '#',
+            className: 'RichEditor-styleButton' + (active ? ' RichEditor-activeButton' : '') + (icon ? ' icon icon-' + icon : ''),
+            onClick: onClick
+        },
         label
@@ -35,5 +33,6 @@ );
     onClick: _react2.default.PropTypes.func.isRequired,
-    icon: _react2.default.PropTypes.string
+    icon: _react2.default.PropTypes.string,
+    active: _react2.default.PropTypes.bool
 };
 
 exports.default = Button;

dist/components/DraftailEditor.js

@@ -17,9 +17,11 @@ 'use strict';
 
+var _config = require('../config');
+
 var _DraftUtils = require('../utils/DraftUtils');
 
-var DraftUtils = _interopRequireWildcard(_DraftUtils);
+var _DraftUtils2 = _interopRequireDefault(_DraftUtils);
 
-var _config = require('../config');
+var _conversion = require('../api/conversion');
 
-var _config2 = _interopRequireDefault(_config);
+var _conversion2 = _interopRequireDefault(_conversion);
 
@@ -54,8 +56,2 @@ var _BlockControls = require('../components/BlockControls');
 
-var _conversion = require('../api/conversion');
-
-var _conversion2 = _interopRequireDefault(_conversion);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -69,14 +65,2 @@
 
-// =============================================================================
-// Config
-// =============================================================================
-
-// =============================================================================
-// UI Components
-// =============================================================================
-
-// =============================================================================
-// Utilities
-// =============================================================================
-
 var $ = global.jQuery;
@@ -110,4 +94,5 @@
         var updateTimeout = void 0;
+
         _this.onChange = function (editorState) {
-            return _this.setState({ editorState: editorState }, function () {
+            _this.setState({ editorState: editorState }, function () {
                 if (updateTimeout) {
@@ -163,9 +148,12 @@ global.clearTimeout(updateTimeout);
         }
+
+        // eslint-disable-next-line class-methods-use-this
+
     }, {
         key: 'handleFocus',
         value: function handleFocus() {
-            // if (this.refs.wrapper.contains(e.target)) {
+            // if (this.wrapperRef.contains(e.target)) {
             //   this.setState({readOnly: false}, () => {
             //     global.setTimeout(() => {
-            //       this.refs.editor.focus();
+            //       this.editorRef.focus();
             //     }, 0)
@@ -182,5 +170,4 @@ //   })
 
-            var input = this.refs.input;
 
-            input.value = _conversion2.default.serialiseEditorState(editorState);
+            this.inputRef.value = _conversion2.default.serialiseEditorState(editorState);
         }
@@ -230,7 +217,7 @@
                 });
-                var nextState = _draftJs.EditorState.acceptSelection(this.state.editorState, updatedSelection);
+                var nextState = _draftJs.EditorState.acceptSelection(editorState, updatedSelection);
                 this.onChange(nextState);
 
                 global.setTimeout(function () {
-                    return _this2.refs.editor.focus();
+                    return _this2.editorRef.focus();
                 }, 0);
@@ -244,3 +231,3 @@ }
             // not sure we need this.
-            // setTimeout(() => this.refs.editor.focus(), 0);
+            // setTimeout(() => this.editorRef.focus(), 0);
             return true;
@@ -284,5 +271,8 @@ }
         key: 'toggleBlockType',
-        value: function toggleBlockType(blockType) {
+        value: function toggleBlockType(blockType, e) {
             var editorState = this.state.editorState;
 
+
+            e.preventDefault();
+
             this.onChange(_draftJs.RichUtils.toggleBlockType(editorState, blockType));
@@ -292,5 +282,8 @@ }
         key: 'toggleInlineStyle',
-        value: function toggleInlineStyle(inlineStyle) {
+        value: function toggleInlineStyle(inlineStyle, e) {
             var editorState = this.state.editorState;
 
+
+            e.preventDefault();
+
             this.onChange(_draftJs.RichUtils.toggleInlineStyle(editorState, inlineStyle));
@@ -310,4 +303,4 @@ }
 
-            var pickerOptions = options.modelPickerOptions.find(function (p) {
-                return p.contentType === contentType;
+            var pickerOptions = options.modelPickerOptions.find(function (opt) {
+                return opt.contentType === contentType;
             });
@@ -329,3 +322,3 @@
 
-            var entitySelectionState = DraftUtils.getSelectedEntitySelection(editorState);
+            var entitySelectionState = _DraftUtils2.default.getSelectedEntitySelection(editorState);
 
@@ -344,3 +337,3 @@ this.setState({
             var entityKey = _draftJs.Entity.create('TOKEN', 'IMMUTABLE', {});
-            var nextState = DraftUtils.insertBlock(editorState, entityKey, ' ', 'horizontal-rule');
+            var nextState = _DraftUtils2.default.insertBlock(editorState, entityKey, ' ', 'horizontal-rule');
             this.updateState(nextState);
@@ -353,4 +346,4 @@ }
 
-            var pickerOptions = options.modelPickerOptions.find(function (p) {
-                return p.contentType === contentType;
+            var pickerOptions = options.modelPickerOptions.find(function (opt) {
+                return opt.contentType === contentType;
             });
@@ -371,2 +364,3 @@
             var options = this.props.options;
+            var editorState = this.state.editorState;
 
@@ -384,3 +378,3 @@ var type = contentBlock.getType();
                             unlockEditor: this.unlockEditor,
-                            editorState: this.state.editorState,
+                            editorState: editorState,
                             onUpdate: this.onDialogComplete
@@ -458,3 +452,3 @@ }
                         global.setTimeout(function () {
-                            _this3.refs.editor.focus();
+                            _this3.editorRef.focus();
                         }, 0);
@@ -492,3 +486,3 @@ });
 
-            var activeDialogType = activeEntityDialog ? activeEntityDialog : activeBlockDialog;
+            var activeDialogType = activeEntityDialog || activeBlockDialog;
             var dialog = void 0;
@@ -499,4 +493,4 @@ var Klass = void 0;
             if (activeDialogType) {
-                dialog = options.sources.find(function (obj) {
-                    return obj.entity === activeDialogType;
+                dialog = options.sources.find(function (src) {
+                    return src.entity === activeDialogType;
                 });
@@ -536,4 +530,4 @@
             if (shouldShowTooltip) {
-                var entityKey = DraftUtils.getSelectionEntity(editorState);
-                var entityData = DraftUtils.getEntityData(entityKey);
+                var entityKey = _DraftUtils2.default.getSelectionEntity(editorState);
+                var entityData = _DraftUtils2.default.getEntityData(entityKey);
 
@@ -567,10 +561,9 @@ tooltip = entityData ? _react2.default.createElement(_Tooltip2.default, {
 
+            // const addMedia = (type) => {
+            //     this.setState({
+            //         activeBlockDialog: type,
+            //         readOnly: true,
+            //     });
+            // };
 
-            var addMedia = function addMedia(type) {
-                _this4.setState({
-                    activeBlockDialog: type,
-                    readOnly: true
-                });
-            };
-
             return _react2.default.createElement(
@@ -580,3 +573,3 @@ 'div',
                 _react2.default.createElement(_BlockControls2.default, {
-                    styles: _config2.default.get('BLOCK_TYPES'),
+                    styles: options.BLOCK_TYPES,
                     editorState: editorState,
@@ -586,3 +579,3 @@ onToggle: this.toggleBlockType
                 _react2.default.createElement(_InlineStyleControls2.default, {
-                    styles: _config2.default.get('INLINE_STYLES'),
+                    styles: options.INLINE_STYLES,
                     editorState: editorState,
@@ -594,4 +587,3 @@ onToggle: this.toggleInlineStyle
                     label: 'HR',
-                    icon: 'horizontalrule',
-                    style: 'image'
+                    icon: 'horizontalrule'
                 }),
@@ -619,4 +611,3 @@ options.mediaControls.map(function (control) {
                         label: picker.label,
-                        icon: picker.icon,
-                        style: 'image'
+                        icon: picker.icon
                     });
@@ -629,2 +620,4 @@ })
         value: function render() {
+            var _this5 = this;
+
             var name = this.props.name;
@@ -639,3 +632,5 @@ var _state4 = this.state,
                 {
-                    ref: 'wrapper',
+                    ref: function ref(_ref3) {
+                        _this5.wrapperRef = _ref3;
+                    },
                     className: 'json-text',
@@ -649,3 +644,5 @@ onBlur: this.saveRawState,
                 _react2.default.createElement(_draftJs.Editor, {
-                    ref: 'editor',
+                    ref: function ref(_ref) {
+                        _this5.editorRef = _ref;
+                    },
                     editorState: editorState,
@@ -660,3 +657,11 @@ onChange: this.onChange,
                 }),
-                _react2.default.createElement('input', { ref: 'input', type: 'hidden', name: name })
+                this.renderTooltip(),
+                this.renderDialog(),
+                _react2.default.createElement('input', {
+                    ref: function ref(_ref2) {
+                        _this5.inputRef = _ref2;
+                    },
+                    type: 'hidden',
+                    name: name
+                })
             );
@@ -663,0 +668,0 @@ }

dist/components/Icon.js

@@ -26,3 +26,3 @@ 'use strict';
             'span',
-            { 'aria-role': 'presentation' },
+            { role: 'presentation' },
             title
@@ -29,0 +29,0 @@ ) : null

dist/components/InlineStyleControls.js

@@ -11,6 +11,10 @@ 'use strict';
 
-var _StyleButton = require('./StyleButton');
+var _Button = require('./Button');
 
-var _StyleButton2 = _interopRequireDefault(_StyleButton);
+var _Button2 = _interopRequireDefault(_Button);
 
+var _DraftUtils = require('../utils/DraftUtils');
+
+var _DraftUtils2 = _interopRequireDefault(_DraftUtils);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,4 +26,2 @@
         onToggle = _ref.onToggle;
-
-    var currentStyle = editorState.getCurrentInlineStyle();
     return _react2.default.createElement(
@@ -29,8 +31,8 @@ 'div',
         styles.map(function (type) {
-            return _react2.default.createElement(_StyleButton2.default, {
+            return _react2.default.createElement(_Button2.default, {
                 key: type.label,
-                active: currentStyle.has(type.style),
+                active: _DraftUtils2.default.hasCurrentInlineStyle(editorState, type.style),
                 label: type.label,
                 icon: type.icon,
-                onToggle: onToggle,
+                onClick: onToggle.bind(null, type.style),
                 style: type.style
@@ -37,0 +39,0 @@ });

dist/components/Tooltip.js

@@ -36,3 +36,3 @@ 'use strict';
                 target: '_blank',
-                rel: 'noopener',
+                rel: 'noopener noreferrer',
                 className: 'RichEditor-tooltip__link'
@@ -39,0 +39,0 @@ },

dist/config.js

@@ -22,6 +22,2 @@ 'use strict';
 
-var BLOCK_TYPES = [{ label: 'H2', style: 'header-two' }, { label: 'H3', style: 'header-three' }, { label: 'H4', style: 'header-four' }, { label: 'H5', style: 'header-five' }, { label: 'Blockquote', style: 'blockquote', icon: 'openquote' }, { label: 'UL', style: 'unordered-list-item', icon: 'list-ul' }, { label: 'OL', style: 'ordered-list-item', icon: 'list-ol' }];
-
-var INLINE_STYLES = [{ label: 'Bold', style: 'BOLD', icon: 'bold' }, { label: 'Italic', style: 'ITALIC', icon: 'italic' }];
-
 var TYPE_MAP = {
@@ -32,15 +28,3 @@ WAGTAIL_IMAGE: _ImageBlock2.default,
 
-// TODO Make this configurable when initialising the JSONTextField.
-var _config = {
-    BLOCK_TYPES: global.BLOCK_TYPES || BLOCK_TYPES,
-    INLINE_STYLES: global.INLINE_STYLES || INLINE_STYLES,
-    TYPE_MAP: global.TYPE_MAP || TYPE_MAP
-};
-
 exports.default = {
-    get: function get(key) {
-        var _default = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
-        return typeof _config[key] !== 'undefined' ? _config[key] : _default;
-    },
     getEntityComponent: function getEntityComponent(type) {
@@ -52,3 +36,3 @@ var _default = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _NullBlock2.default;
 };
-var MAX_LIST_NESTING = exports.MAX_LIST_NESTING = 4;
+var MAX_LIST_NESTING = exports.MAX_LIST_NESTING = 3;
 var STATE_SAVE_INTERVAL = exports.STATE_SAVE_INTERVAL = 250;

dist/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.DraftUtils = undefined;
 
@@ -12,4 +13,14 @@ var _DraftailEditor = require('./components/DraftailEditor');
 
+var _DraftUtils = require('./utils/DraftUtils');
+
+var _DraftUtils2 = _interopRequireDefault(_DraftUtils);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _DraftailEditor2.default;
+/**
+ * Draftail's main API entry point. Exposes all of the modules people
+ * will need to create their own editor instances from Draftail.
+ */
+
+exports.default = _DraftailEditor2.default;
+exports.DraftUtils = _DraftUtils2.default;

dist/utils/DraftUtils.js

@@ -6,3 +6,2 @@ 'use strict';
 });
-exports.createEntity = exports.insertBlock = exports.getSelectedEntitySelection = exports.getSelectedBlockType = exports.getEntityData = exports.getEntityRange = exports.getSelectionEntity = undefined;
 
@@ -21,106 +20,113 @@ var _draftJs = require('draft-js');
  * Wrapper around draftjs-utils, with our custom functions.
- * import * as DraftUtils from '../utils/DraftUtils';
+ * import DraftUtils from '../utils/DraftUtils';
  */
+exports.default = {
+    getSelectionEntity: _draftjsUtils2.default.getSelectionEntity.bind(_draftjsUtils2.default),
 
-var getSelectionEntity = exports.getSelectionEntity = _draftjsUtils2.default.getSelectionEntity.bind(_draftjsUtils2.default);
+    getEntityRange: _draftjsUtils2.default.getEntityRange.bind(_draftjsUtils2.default),
 
-var getEntityRange = exports.getEntityRange = _draftjsUtils2.default.getEntityRange.bind(_draftjsUtils2.default);
+    getEntityData: function getEntityData(entityKey) {
+        var entity = _draftJs.Entity.get(entityKey);
+        return entity.getData();
+    },
 
-var getEntityData = exports.getEntityData = function getEntityData(entityKey) {
-    var entity = _draftJs.Entity.get(entityKey);
-    return entity.getData();
-};
+    /**
+     * Returns the type of the block the current selection starts in.
+     */
+    getSelectedBlockType: function getSelectedBlockType(editorState) {
+        var selectionState = editorState.getSelection();
+        var contentState = editorState.getCurrentContent();
+        var startKey = selectionState.getStartKey();
+        var block = contentState.getBlockForKey(startKey);
 
-/**
- * Returns the type of the block the current selection starts in.
- */
-var getSelectedBlockType = exports.getSelectedBlockType = function getSelectedBlockType(editorState) {
-    var selectionState = editorState.getSelection();
-    var contentState = editorState.getCurrentContent();
-    var startKey = selectionState.getStartKey();
-    var block = contentState.getBlockForKey(startKey);
+        return block.type;
+    },
 
-    return block.type;
-};
+    /**
+     * Creates a selection for the entirety of an entity that can be partially selected.
+     */
+    getSelectedEntitySelection: function getSelectedEntitySelection(editorState) {
+        var selectionState = editorState.getSelection();
+        var contentState = editorState.getCurrentContent();
+        var entityKey = undefined.getSelectionEntity(editorState);
+        var entityRange = undefined.getEntityRange(editorState, entityKey);
+        var anchorKey = selectionState.getAnchorKey();
+        var block = contentState.getBlockForKey(anchorKey);
+        var blockKey = block.getKey();
 
-/**
- * Creates a selection for the entirety of an entity that can be partially selected.
- */
-var getSelectedEntitySelection = exports.getSelectedEntitySelection = function getSelectedEntitySelection(editorState) {
-    var selectionState = editorState.getSelection();
-    var contentState = editorState.getCurrentContent();
-    var entityKey = getSelectionEntity(editorState);
-    var entityRange = getEntityRange(editorState, entityKey);
-    var anchorKey = selectionState.getAnchorKey();
-    var block = contentState.getBlockForKey(anchorKey);
-    var blockKey = block.getKey();
+        return new _draftJs.SelectionState({
+            anchorOffset: entityRange.start,
+            anchorKey: blockKey,
+            focusOffset: entityRange.end,
+            focusKey: blockKey,
+            isBackward: false,
+            hasFocus: selectionState.getHasFocus()
+        });
+    },
 
-    return new _draftJs.SelectionState({
-        anchorOffset: entityRange.start,
-        anchorKey: blockKey,
-        focusOffset: entityRange.end,
-        focusKey: blockKey,
-        isBackward: false,
-        hasFocus: selectionState.getHasFocus()
-    });
-};
+    hasCurrentInlineStyle: function hasCurrentInlineStyle(editorState, style) {
+        var currentStyle = editorState.getCurrentInlineStyle();
 
-// TODO Document.
-var insertBlock = exports.insertBlock = function insertBlock(editorState, entityKey, character, blockType) {
-    var contentState = editorState.getCurrentContent();
-    var selectionState = editorState.getSelection();
+        return currentStyle.has(style);
+    },
 
-    var afterRemoval = _draftJs.Modifier.removeRange(contentState, selectionState, 'backward');
+    // TODO Document.
+    insertBlock: function insertBlock(editorState, entityKey, character, blockType) {
+        var contentState = editorState.getCurrentContent();
+        var selectionState = editorState.getSelection();
 
-    var targetSelection = afterRemoval.getSelectionAfter();
-    var afterSplit = _draftJs.Modifier.splitBlock(afterRemoval, targetSelection);
-    var insertionTarget = afterSplit.getSelectionAfter();
+        var afterRemoval = _draftJs.Modifier.removeRange(contentState, selectionState, 'backward');
 
-    var asAtomicBlock = _draftJs.Modifier.setBlockType(afterSplit, insertionTarget, blockType);
+        var targetSelection = afterRemoval.getSelectionAfter();
+        var afterSplit = _draftJs.Modifier.splitBlock(afterRemoval, targetSelection);
+        var insertionTarget = afterSplit.getSelectionAfter();
 
-    var charData = _draftJs.CharacterMetadata.create({ entity: entityKey });
+        var asAtomicBlock = _draftJs.Modifier.setBlockType(afterSplit, insertionTarget, blockType);
 
-    var fragmentArray = [new _draftJs.ContentBlock({
-        key: (0, _draftJs.genKey)(),
-        type: blockType,
-        text: character,
-        characterList: (0, _immutable.List)((0, _immutable.Repeat)(charData, character.length))
-    }), new _draftJs.ContentBlock({
-        key: (0, _draftJs.genKey)(),
-        type: 'unstyled',
-        text: '',
-        characterList: (0, _immutable.List)()
-    })];
+        var charData = _draftJs.CharacterMetadata.create({ entity: entityKey });
 
-    var fragment = _draftJs.BlockMapBuilder.createFromArray(fragmentArray);
+        var fragmentArray = [new _draftJs.ContentBlock({
+            key: (0, _draftJs.genKey)(),
+            type: blockType,
+            text: character,
+            characterList: (0, _immutable.List)((0, _immutable.Repeat)(charData, character.length))
+        }), new _draftJs.ContentBlock({
+            key: (0, _draftJs.genKey)(),
+            type: 'unstyled',
+            text: '',
+            characterList: (0, _immutable.List)()
+        })];
 
-    var withBlock = _draftJs.Modifier.replaceWithFragment(asAtomicBlock, insertionTarget, fragment);
+        var fragment = _draftJs.BlockMapBuilder.createFromArray(fragmentArray);
 
-    var newContent = withBlock.merge({
-        selectionBefore: selectionState,
-        selectionAfter: withBlock.getSelectionAfter().set('hasFocus', true)
-    });
+        var withBlock = _draftJs.Modifier.replaceWithFragment(asAtomicBlock, insertionTarget, fragment);
 
-    return _draftJs.EditorState.push(editorState, newContent, 'insert-fragment');
-};
+        var newContent = withBlock.merge({
+            selectionBefore: selectionState,
+            selectionAfter: withBlock.getSelectionAfter().set('hasFocus', true)
+        });
 
-// TODO Document.
-var createEntity = exports.createEntity = function createEntity(editorState, entityType, entityData, entityText) {
-    var entityMutability = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'IMMUTABLE';
+        return _draftJs.EditorState.push(editorState, newContent, 'insert-fragment');
+    },
 
-    var entityKey = _draftJs.Entity.create(entityType, entityMutability, entityData);
+    // TODO Document.
+    createEntity: function createEntity(editorState, entityType, entityData, entityText) {
+        var entityMutability = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'IMMUTABLE';
 
-    var contentState = editorState.getCurrentContent();
-    var selection = editorState.getSelection();
+        var entityKey = _draftJs.Entity.create(entityType, entityMutability, entityData);
 
-    var nextContentState = void 0;
+        var contentState = editorState.getCurrentContent();
+        var selection = editorState.getSelection();
 
-    if (selection.isCollapsed()) {
-        nextContentState = _draftJs.Modifier.insertText(contentState, editorState.getSelection(), entityText, null, entityKey);
-    } else {
-        nextContentState = _draftJs.Modifier.replaceText(contentState, editorState.getSelection(), entityText, null, entityKey);
+        var nextContentState = void 0;
+
+        if (selection.isCollapsed()) {
+            nextContentState = _draftJs.Modifier.insertText(contentState, editorState.getSelection(), entityText, null, entityKey);
+        } else {
+            nextContentState = _draftJs.Modifier.replaceText(contentState, editorState.getSelection(), entityText, null, entityKey);
+        }
+
+        var nextState = _draftJs.EditorState.push(editorState, nextContentState, 'insert');
+        return nextState;
     }
-
-    var nextState = _draftJs.EditorState.push(editorState, nextContentState, 'insert');
-    return nextState;
 };

dist/utils/DraftUtils.test.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var DraftUtils = _interopRequireWildcard(_DraftUtils);
+var _DraftUtils2 = _interopRequireDefault(_DraftUtils);
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -15,3 +15,3 @@ describe('DraftUtils', function () {
         it('exists', function () {
-            expect(DraftUtils.getEntityData).toBeDefined();
+            expect(_DraftUtils2.default.getEntityData).toBeDefined();
         });
@@ -29,3 +29,3 @@
             editorState = _draftJs.RichUtils.toggleLink(editorState, updatedSelection, entityKey);
-            expect(DraftUtils.getEntityData(entityKey)).toEqual({ url: 'www.testing.com' });
+            expect(_DraftUtils2.default.getEntityData(entityKey)).toEqual({ url: 'www.testing.com' });
         });
@@ -36,3 +36,3 @@ });
         it('exists', function () {
-            expect(DraftUtils.getSelectedBlockType).toBeDefined();
+            expect(_DraftUtils2.default.getSelectedBlockType).toBeDefined();
         });
@@ -50,5 +50,5 @@
             editorState = _draftJs.RichUtils.toggleLink(editorState, updatedSelection, entityKey);
-            expect(DraftUtils.getSelectedBlockType(editorState)).toEqual('header-one');
+            expect(_DraftUtils2.default.getSelectedBlockType(editorState)).toEqual('header-one');
         });
     });
 });

dist/utils/format.js

@@ -44,23 +44,2 @@ 'use strict';
     return ret;
-};
-
-// From http://stackoverflow.com/a/5782563/1798491
-var slugify = exports.slugify = function slugify(str) {
-    var ret = str;
-    ret = ret.replace(/^\s+|\s+$/g, ''); // trim
-    ret = ret.toLowerCase();
-
-    // remove accents, swap ñ for n, etc
-    var fromChars = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
-    var toChars = 'aaaaeeeeiiiioooouuuunc------';
-
-    for (var i = 0, l = fromChars.length; i < l; i++) {
-        ret = ret.replace(new RegExp(fromChars.charAt(i), 'g'), toChars.charAt(i));
-    }
-
-    ret = ret.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
-    .replace(/\s+/g, '-') // collapse whitespace and replace by -
-    .replace(/-+/g, '-'); // collapse dashes
-
-    return ret;
 };

dist/utils/format.test.js

@@ -15,12 +15,2 @@ 'use strict';
     });
-
-    describe('#slugify', function () {
-        it('exists', function () {
-            expect(_format.slugify).toBeDefined();
-        });
-
-        it('slugifies URLs', function () {
-            expect((0, _format.slugify)('http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/')).toEqual('http-blogstackoverflowcom-2011-07-its-ok-to-ask-and-answer-your-own-questions-');
-        });
-    });
 });

package.json

 {
   "name": "draftail",
-  "version": "0.1.0",
-  "description": "",
+  "version": "0.2.0",
+  "description": "A batteries-excluded rich text editor based on Draft.js",
+  "author": "Springload",
+  "license": "MIT",
   "main": "dist/index.js",
@@ -18,4 +20,2 @@ "keywords": [
   ],
-  "author": "Springload",
-  "license": "MIT",
   "repository": {
@@ -63,10 +63,13 @@ "type": "git",
     "start": "npm run server -s",
-    "server": "nodemon server/index.js",
-    "css": "node-sass lib/index.scss docs/index.css",
+    "server": "node server/index.js",
+    "css": "node-sass lib/index.scss examples/assets/draftail.css",
     "dist": "babel -d dist lib",
-    "lint": "eslint .",
+    "linter:js": "eslint",
+    "lint": "npm run linter:js -s -- .",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "pages": "rm -rf pages && cp -R examples pages && webpack --config=webpack.config.prod.js --progress -p",
+    "deploy": "./bin/deploy.sh"
   }
 }

README.md

@@ -1,12 +0,19 @@
-draftail [![Build Status](https://travis-ci.org/springload/draftail.svg?branch=master)](https://travis-ci.org/springload/draftail) [![Dependency Status](https://david-dm.org/springload/draftail.svg?style=flat-square)](https://david-dm.org/springload/draftail) [![devDependency Status](https://david-dm.org/springload/draftail/dev-status.svg?style=flat-square)](https://david-dm.org/springload/draftail#info=devDependencies)
+[draftail](https://springload.github.io/draftail/) [![npm](https://img.shields.io/npm/v/draftail.svg?style=flat-square)](https://www.npmjs.com/package/draftail) [![Build Status](https://travis-ci.org/springload/draftail.svg?branch=master)](https://travis-ci.org/springload/draftail) [![Dependency Status](https://david-dm.org/springload/draftail.svg?style=flat-square)](https://david-dm.org/springload/draftail) [![devDependency Status](https://david-dm.org/springload/draftail/dev-status.svg?style=flat-square)](https://david-dm.org/springload/draftail#info=devDependencies)
 =========
 
-> A batteries-excluded rich text editor based on [Draft.js](https://facebook.github.io/draft-js/) :memo::cocktail:
+> A batteries-excluded rich text editor based on [Draft.js](https://facebook.github.io/draft-js/). :memo::cocktail:
 
-This is a work in progress. It is intended to be integrated into [Wagtail](https://wagtail.io/).
+This is a work in progress. It is intended to be integrated into [Wagtail](https://wagtail.io/). [Try a demo now](https://springload.github.io/draftail/).
 
 ```sh
 npm install --save draftail
+# Draftail's peerDependencies:
+npm install --save draft-js@^0.9.x draftjs-utils@^0.3.2 immutable@^3.x.x react@^15.x.x react-dom@^15.x.x
 ```
 
+There are other, not so explicit dependencies at the moment:
+
+- jQuery 2, separately loaded onto the page.
+- Specific styles from Wagtail, including its icon font.
+
 ## Development
@@ -22,2 +29,4 @@
 npm install
+# Optionally, install the git hooks.
+./.githooks/deploy
 ```
@@ -24,0 +33,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

59

increased by18%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

75706

decreased by-67.09%

Number of package files

29

decreased by-65.88%

Lines of code

1560

decreased by-61.43%

No dependency changes