react-simple-wysiwyg - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

lib/es/styles.js

@@ -6,3 +6,5 @@ const styles = {
             border: 'none',
+            color: '#222',
             height: 24,
+            outline: 'none',
             padding: 0,
@@ -25,6 +27,7 @@ verticalAlign: 'top',
     dropdown: {
+        boxSizing: 'border-box',
         height: 20,
         marginTop: 2,
         outline: 'none',
-        width: '5em',
+        verticalAlign: 'top',
     },
@@ -31,0 +34,0 @@ editor: {

lib/es/toolbar/buttons.js

@@ -8,3 +8,3 @@ import { useState } from 'react';
 export const BtnBold = createButton('Bold', '𝐁', 'bold');
-export const BtnClearFormatting = createButton('Clear formatting', '𝘛̲ₓ', 'removeFormat');
+export const BtnClearFormatting = createButton('Clear formatting', 'T̲ₓ', 'removeFormat');
 export const BtnItalic = createButton('Italic', '𝑰', 'italic');
@@ -16,3 +16,3 @@ export const BtnLink = createButton('Link', '🔗', (selected) => {
     else {
-        document.execCommand('createLink', true, prompt('URL'));
+        document.execCommand('createLink', false, prompt('URL'));
     }
@@ -43,7 +43,3 @@ });
     };
-    const onMouseDown = (e) => {
-        e.preventDefault();
-        props.onMouseDown && props.onMouseDown(e);
-    };
-    return (React.createElement("button", Object.assign({}, inputProps, { style: style, onMouseDown: onMouseDown, onMouseEnter: onHover, onMouseLeave: onUnHover })));
+    return (React.createElement("button", Object.assign({}, inputProps, { style: style, onMouseEnter: onHover, onMouseLeave: onUnHover })));
 }
@@ -59,3 +55,3 @@ function createButton(title, content, command) {
         }
-        return (React.createElement(Button, Object.assign({ title: title }, buttonProps, { onClick: action, active: active }), content));
+        return (React.createElement(Button, Object.assign({ title: title }, buttonProps, { onMouseDown: action, active: active }), content));
         function action() {
@@ -62,0 +58,0 @@ if (typeof command === 'function') {

lib/styles.d.ts

@@ -6,3 +6,5 @@ declare const styles: {
             border: string;
+            color: string;
             height: number;
+            outline: string;
             padding: number;
@@ -25,6 +27,7 @@ verticalAlign: string;
     dropdown: {
+        boxSizing: any;
         height: number;
         marginTop: number;
         outline: string;
-        width: string;
+        verticalAlign: string;
     };
@@ -31,0 +34,0 @@ editor: {

lib/styles.js

@@ -8,3 +8,5 @@ "use strict";
             border: 'none',
+            color: '#222',
             height: 24,
+            outline: 'none',
             padding: 0,
@@ -27,6 +29,7 @@ verticalAlign: 'top',
     dropdown: {
+        boxSizing: 'border-box',
         height: 20,
         marginTop: 2,
         outline: 'none',
-        width: '5em',
+        verticalAlign: 'top',
     },
@@ -33,0 +36,0 @@ editor: {

lib/toolbar/buttons.js

@@ -30,3 +30,3 @@ "use strict";
 exports.BtnBold = createButton('Bold', '𝐁', 'bold');
-exports.BtnClearFormatting = createButton('Clear formatting', '𝘛̲ₓ', 'removeFormat');
+exports.BtnClearFormatting = createButton('Clear formatting', 'T̲ₓ', 'removeFormat');
 exports.BtnItalic = createButton('Italic', '𝑰', 'italic');
@@ -38,3 +38,3 @@ exports.BtnLink = createButton('Link', '🔗', function (selected) {
     else {
-        document.execCommand('createLink', true, prompt('URL'));
+        document.execCommand('createLink', false, prompt('URL'));
     }
@@ -59,7 +59,3 @@ });
     };
-    var onMouseDown = function (e) {
-        e.preventDefault();
-        props.onMouseDown && props.onMouseDown(e);
-    };
-    return (React.createElement("button", __assign({}, inputProps, { style: style, onMouseDown: onMouseDown, onMouseEnter: onHover, onMouseLeave: onUnHover })));
+    return (React.createElement("button", __assign({}, inputProps, { style: style, onMouseEnter: onHover, onMouseLeave: onUnHover })));
 }
@@ -76,3 +72,3 @@ exports.Button = Button;
         }
-        return (React.createElement(Button, __assign({ title: title }, buttonProps, { onClick: action, active: active }), content));
+        return (React.createElement(Button, __assign({ title: title }, buttonProps, { onMouseDown: action, active: active }), content));
         function action() {
@@ -79,0 +75,0 @@ if (typeof command === 'function') {

lib/umd/index.umd.js

@@ -197,3 +197,5 @@ (function (global, factory) {
                 border: 'none',
+                color: '#222',
                 height: 24,
+                outline: 'none',
                 padding: 0,
@@ -216,6 +218,7 @@ verticalAlign: 'top',
         dropdown: {
+            boxSizing: 'border-box',
             height: 20,
             marginTop: 2,
             outline: 'none',
-            width: '5em',
+            verticalAlign: 'top',
         },
@@ -313,3 +316,3 @@ editor: {
     var BtnBold = createButton('Bold', '𝐁', 'bold');
-    var BtnClearFormatting = createButton('Clear formatting', '𝘛̲ₓ', 'removeFormat');
+    var BtnClearFormatting = createButton('Clear formatting', 'T̲ₓ', 'removeFormat');
     var BtnItalic = createButton('Italic', '𝑰', 'italic');
@@ -321,3 +324,3 @@ var BtnLink = createButton('Link', '🔗', function (selected) {
         else {
-            document.execCommand('createLink', true, prompt('URL'));
+            document.execCommand('createLink', false, prompt('URL'));
         }
@@ -342,7 +345,3 @@ });
         };
-        var onMouseDown = function (e) {
-            e.preventDefault();
-            props.onMouseDown && props.onMouseDown(e);
-        };
-        return (React.createElement("button", __assign({}, inputProps, { style: style, onMouseDown: onMouseDown, onMouseEnter: onHover, onMouseLeave: onUnHover })));
+        return (React.createElement("button", __assign({}, inputProps, { style: style, onMouseEnter: onHover, onMouseLeave: onUnHover })));
     }
@@ -358,3 +357,3 @@ function createButton(title, content, command) {
             }
-            return (React.createElement(Button, __assign({ title: title }, buttonProps, { onClick: action, active: active }), content));
+            return (React.createElement(Button, __assign({ title: title }, buttonProps, { onMouseDown: action, active: active }), content));
             function action() {
@@ -361,0 +360,0 @@ if (typeof command === 'function') {

lib/umd/index.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../node_modules/react/index.js")):"function"==typeof define&&define.amd?define(["exports","../node_modules/react/index.js"],t):t((e=e||self).ReactSimpleWysiwyg={},e.React)}(this,function(e,c){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function t(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var u=function(){return(u=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function d(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&(n[o[r]]=e[o[r]])}return n}function p(e){return e&&"object"==typeof e&&!Array.isArray(e)}function n(e){return e&&e.replace(/&nbsp;|\u202F|\u00A0/g," ")}function r(e){var t=function e(t){if(t.nodeType===Node.TEXT_NODE)return t;for(var n=t.childNodes,o=n.length-1;0<=o;o--){var r=e(n[o]);if(null!==r)return r}return null}(e),n=document.activeElement===e;if(null!==t&&null!==t.nodeValue&&n){var o=document.createRange(),r=window.getSelection();o.setStart(t,t.nodeValue.length),o.collapse(!0),r.removeAllRanges(),r.addRange(o),e instanceof HTMLElement&&e.focus()}}var l,f=(t(i,l=c.Component),i.prototype.shouldComponentUpdate=function(e){var t=this.props;return!this.el||n(e.value)!==n(this.el.innerHTML)||!function(t,n,e){return e.every(function(e){return t[e]===n[e]})}(t,e,["disabled","tagName","className"])},i.prototype.componentDidUpdate=function(){this.el&&(this.props.value!==this.el.innerHTML&&(this.previousValue=this.props.value,this.el.innerHTML=this.props.value),r(this.el))},i.prototype.setElementRef=function(e){var t=this.props.contentEditableRef;this.el=e,t&&t(e)},i.prototype.onChange=function(e){if(this.el){var t=this.el.innerHTML,n=this.previousValue;this.previousValue=t,this.props.onChange&&t!==n&&this.props.onChange(u({},e,{target:{value:t}}))}},i.prototype.render=function(){var e=this.props,t=(e.contentEditableRef,e.tagName),n=e.value,o=d(e,["contentEditableRef","tagName","value"]);return c.createElement(t||"div",u({},o,{contentEditable:!this.props.disabled,dangerouslySetInnerHTML:{__html:n},onBlur:this.props.onBlur||this.onChange,onInput:this.onChange,onKeyDown:this.props.onKeyDown||this.onChange,onKeyUp:this.props.onKeyUp||this.onChange,ref:this.setElementRef}))},i);function i(e){var t=l.call(this,e)||this;return t.previousValue=e.value,t.onChange=t.onChange.bind(t),t.setElementRef=t.setElementRef.bind(t),t}var a,m={button:{normal:{backgroundColor:"unset",border:"none",height:24,padding:0,verticalAlign:"top",width:24},hovered:{backgroundColor:"#eaeaea"},active:{backgroundColor:"#e0e0e0"}},contentEditable:{flex:1,outline:"none",padding:5},dropdown:{height:20,marginTop:2,outline:"none",width:"5em"},editor:{border:"1px solid #ddd",borderRadius:3,display:"flex",flexDirection:"column",minHeight:100},separator:{backgroundColor:"#ddd",display:"inline-block",height:20,margin:2,verticalAlign:"top",width:1}},h=c.createContext({styles:m}),s=(t(v,a=c.PureComponent),v.prototype.componentDidMount=function(){document.addEventListener("click",this.onClickOutside)},v.prototype.componentWillUnmount=function(){document.removeEventListener("click",this.onClickOutside)},v.prototype.setContentEditableRef=function(e){this.setState({contentEditable:e}),this.props.contentEditableRef&&this.props.contentEditableRef(e)},v.prototype.onClickOutside=function(e){var t=this.state.contentEditable;e.target!==t&&(t&&t.contains(e.target)||this.setState({selection:null}))},v.prototype.onTextSelect=function(e){this.props.onSelect&&this.props.onSelect(e),this.setState({selection:function(){if(document.selection)return document.selection.createRange().parentElement();var e=window.getSelection();return 0<e.rangeCount?e.getRangeAt(0).startContainer.parentNode:void 0}()})},v.prototype.render=function(){var e=this.props,t=e.children,n=e.styles,o=d(e,["children","styles"]),r=this.state,l=r.contentEditable,i=r.selection,a=function e(t){for(var n,o,r=[],l=1;l<arguments.length;l++)r[l-1]=arguments[l];if(!r.length)return t;var i=r.shift();if(p(t)&&p(i))for(var a in i)i.hasOwnProperty(a)&&(p(i[a])?(t[a]||Object.assign(t,((n={})[a]={},n)),e(t[a],i[a])):Object.assign(t,((o={})[a]=i[a],o)));return e.apply(void 0,[t].concat(r))}({},m,n),s={el:l,selection:i,styles:a};return c.createElement("div",{style:s.styles.editor},c.createElement(h.Provider,{value:s},t,c.createElement(f,u({},o,{contentEditableRef:this.setContentEditableRef,onSelect:this.onTextSelect,style:a.contentEditable}))))},v);function v(e){var t=a.call(this,e)||this;return t.state={},t.onClickOutside=t.onClickOutside.bind(t),t.onTextSelect=t.onTextSelect.bind(t),t.setContentEditableRef=t.setContentEditableRef.bind(t),t}function y(n){return e.displayName="withEditorContext("+(n.displayName||n.name)+")",e;function e(t){return c.createElement(h.Consumer,null,function(e){return c.createElement(n,u({},t,{el:e.el,selection:e.selection,styles:e.styles}))})}}var E=B("Bold","𝐁","bold"),g=B("Clear formatting","𝘛̲ₓ","removeFormat"),L=B("Italic","𝑰","italic"),b=B("Link","🔗",function(e){e&&"A"===e.nodeName?document.execCommand("unlink"):document.execCommand("createLink",!0,prompt("URL"))}),C=B("Numbered list",c.createElement(function(){return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",style:{verticalAlign:"text-top"}},c.createElement("path",{fill:"currentColor",d:"M 6.99938,12.998L 6.99938,10.998L 20.9994,10.998L 20.9994,12.998L 6.99938,12.998 Z M 6.99938,18.9981L 6.99938,16.9981L 20.9994,16.9981L 20.9994,18.9981L 6.99938,18.9981 Z M 6.99938,6.99809L 6.99938,4.99809L 20.9994,4.99809L 20.9994,6.99809L 6.99938,6.99809 Z M 2.99938,7.99809L 2.99938,4.99809L 1.99938,4.99809L 1.99938,3.99809L 3.99938,3.99809L 3.99938,7.99809L 2.99938,7.99809 Z M 1.99938,16.9981L 1.99938,15.9981L 4.99938,15.9981L 4.99938,19.9981L 1.99938,19.9981L 1.99938,18.9981L 3.99938,18.9981L 3.99938,18.4981L 2.99938,18.4981L 2.99938,17.4981L 3.99938,17.4981L 3.99938,16.9981L 1.99938,16.9981 Z M 4.25,10C 4.66421,10 5,10.3358 5,10.75C 5,10.9524 4.91983,11.1361 4.7895,11.271L 3.11983,13L 5,13L 5,14L 2,14L 2,13.0782L 4,11L 2,11L 2,10L 4.25,10 Z "}))},null),"insertOrderedList"),w=B("Redo","↷","redo"),x=B("Underline",c.createElement("span",{style:{textDecoration:"underline"}},"𝐔"),"underline"),M=B("Undo","↶","undo"),O=B("Bullet list",c.createElement(function(){return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",style:{verticalAlign:"text-top"}},c.createElement("path",{fill:"currentColor",d:"M 7,5L 21,5L 21,7L 7,7L 7,5 Z M 7,13L 7,11L 21,11L 21,13L 7,13 Z M 4,4.50001C 4.83,4.50001 5.5,5.16993 5.5,6.00001C 5.5,6.83008 4.83,7.50001 4,7.50001C 3.17,7.50001 2.5,6.83008 2.5,6.00001C 2.5,5.16993 3.17,4.50001 4,4.50001 Z M 4,10.5C 4.83,10.5 5.5,11.17 5.5,12C 5.5,12.83 4.83,13.5 4,13.5C 3.17,13.5 2.5,12.83 2.5,12C 2.5,11.17 3.17,10.5 4,10.5 Z M 7,19L 7,17L 21,17L 21,19L 7,19 Z M 4,16.5C 4.83,16.5 5.5,17.17 5.5,18C 5.5,18.83 4.83,19.5 4,19.5C 3.17,19.5 2.5,18.83 2.5,18C 2.5,17.17 3.17,16.5 4,16.5 Z "}))},null),"insertUnorderedList");function R(t){var e=c.useState(!1),n=e[0],o=e[1],r=t.active,l=t.styles,i=(t.el,t.selection,d(t,["active","styles","el","selection"])),a=u({},l.button.normal,t.style,n?l.button.hovered:{},n?t.hoverStyle:{},r?l.button.active:{});return c.createElement("button",u({},i,{style:a,onMouseDown:function(e){e.preventDefault(),t.onMouseDown&&t.onMouseDown(e)},onMouseEnter:function(e){o(!0),t.onMouseEnter&&t.onMouseEnter(e)},onMouseLeave:function(e){o(!1),t.onMouseLeave&&t.onMouseLeave(e)}}))}function B(r,l,i){return e.displayName=r.replace(/\s/g,""),y(e);function e(e){var t=e.selection,n=d(e,["selection"]),o=!1;return"string"==typeof i&&(o=!!t&&document.queryCommandState(i)),c.createElement(R,u({title:r},n,{onClick:function(){"function"==typeof i?i(t):document.execCommand(i)},active:o}),l)}}var k,S,N=(S=[["Normal","formatBlock","DIV"],["𝗛𝗲𝗮𝗱𝗲𝗿 𝟭","formatBlock","H1"],["Header 2","formatBlock","H2"],["𝙲𝚘𝚍𝚎","formatBlock","PRE"]],D.displayName=k="Styles",y(D));function D(e){var l=e.selection,t=d(e,["selection"]);return c.createElement(T,u({},t,{onChange:function(e){var t=parseInt(e.target.value,10),n=S[t],o=n[1],r=n[2];e.preventDefault(),e.target.selectedIndex=0,"function"==typeof o?o(l):document.execCommand(o,!1,r)},title:k,items:S}))}function T(e){e.el;var t=e.items,n=e.selected,o=(e.selection,e.styles),r=d(e,["el","items","selected","selection","styles"]),l=u({},o.dropdown,e.style);return c.createElement("select",u({},r,{value:n,style:l}),c.createElement("option",{hidden:!0},e.title),t.map(function(e,t){return c.createElement("option",{key:t,value:t},e[0])}))}var _=y(function(e){return c.createElement("span",{style:e.styles.separator})});function j(e){var t=u({},Z.root,e.style);return c.createElement("div",u({},e,{style:t}))}var Z={root:{backgroundColor:"#f5f5f5",borderBottom:"1px solid #ddd"}};e.BtnBold=E,e.BtnBulletList=O,e.BtnClearFormatting=g,e.BtnItalic=L,e.BtnLink=b,e.BtnNumberedList=C,e.BtnRedo=w,e.BtnStyles=N,e.BtnUnderline=x,e.BtnUndo=M,e.Button=R,e.ContentEditable=f,e.DefaultEditor=function(e){return c.createElement(s,u({},e),c.createElement(j,null,c.createElement(M,null),c.createElement(w,null),c.createElement(_,null),c.createElement(E,null),c.createElement(L,null),c.createElement(x,null),c.createElement(_,null),c.createElement(C,null),c.createElement(O,null),c.createElement(_,null),c.createElement(b,null),c.createElement(g,null),c.createElement(_,null),c.createElement(N,null)))},e.Dropdown=T,e.Separator=_,e.Toolbar=j,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../node_modules/react/index.js")):"function"==typeof define&&define.amd?define(["exports","../node_modules/react/index.js"],t):t((e=e||self).ReactSimpleWysiwyg={},e.React)}(this,function(e,c){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function t(e,t){function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var u=function(){return(u=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function d(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&(n[o[r]]=e[o[r]])}return n}function p(e){return e&&"object"==typeof e&&!Array.isArray(e)}function n(e){return e&&e.replace(/&nbsp;|\u202F|\u00A0/g," ")}function r(e){var t=function e(t){if(t.nodeType===Node.TEXT_NODE)return t;for(var n=t.childNodes,o=n.length-1;0<=o;o--){var r=e(n[o]);if(null!==r)return r}return null}(e),n=document.activeElement===e;if(null!==t&&null!==t.nodeValue&&n){var o=document.createRange(),r=window.getSelection();o.setStart(t,t.nodeValue.length),o.collapse(!0),r.removeAllRanges(),r.addRange(o),e instanceof HTMLElement&&e.focus()}}var l,f=(t(i,l=c.Component),i.prototype.shouldComponentUpdate=function(e){var t=this.props;return!this.el||n(e.value)!==n(this.el.innerHTML)||!function(t,n,e){return e.every(function(e){return t[e]===n[e]})}(t,e,["disabled","tagName","className"])},i.prototype.componentDidUpdate=function(){this.el&&(this.props.value!==this.el.innerHTML&&(this.previousValue=this.props.value,this.el.innerHTML=this.props.value),r(this.el))},i.prototype.setElementRef=function(e){var t=this.props.contentEditableRef;this.el=e,t&&t(e)},i.prototype.onChange=function(e){if(this.el){var t=this.el.innerHTML,n=this.previousValue;this.previousValue=t,this.props.onChange&&t!==n&&this.props.onChange(u({},e,{target:{value:t}}))}},i.prototype.render=function(){var e=this.props,t=(e.contentEditableRef,e.tagName),n=e.value,o=d(e,["contentEditableRef","tagName","value"]);return c.createElement(t||"div",u({},o,{contentEditable:!this.props.disabled,dangerouslySetInnerHTML:{__html:n},onBlur:this.props.onBlur||this.onChange,onInput:this.onChange,onKeyDown:this.props.onKeyDown||this.onChange,onKeyUp:this.props.onKeyUp||this.onChange,ref:this.setElementRef}))},i);function i(e){var t=l.call(this,e)||this;return t.previousValue=e.value,t.onChange=t.onChange.bind(t),t.setElementRef=t.setElementRef.bind(t),t}var a,m={button:{normal:{backgroundColor:"unset",border:"none",color:"#222",height:24,outline:"none",padding:0,verticalAlign:"top",width:24},hovered:{backgroundColor:"#eaeaea"},active:{backgroundColor:"#e0e0e0"}},contentEditable:{flex:1,outline:"none",padding:5},dropdown:{boxSizing:"border-box",height:20,marginTop:2,outline:"none",verticalAlign:"top"},editor:{border:"1px solid #ddd",borderRadius:3,display:"flex",flexDirection:"column",minHeight:100},separator:{backgroundColor:"#ddd",display:"inline-block",height:20,margin:2,verticalAlign:"top",width:1}},h=c.createContext({styles:m}),s=(t(v,a=c.PureComponent),v.prototype.componentDidMount=function(){document.addEventListener("click",this.onClickOutside)},v.prototype.componentWillUnmount=function(){document.removeEventListener("click",this.onClickOutside)},v.prototype.setContentEditableRef=function(e){this.setState({contentEditable:e}),this.props.contentEditableRef&&this.props.contentEditableRef(e)},v.prototype.onClickOutside=function(e){var t=this.state.contentEditable;e.target!==t&&(t&&t.contains(e.target)||this.setState({selection:null}))},v.prototype.onTextSelect=function(e){this.props.onSelect&&this.props.onSelect(e),this.setState({selection:function(){if(document.selection)return document.selection.createRange().parentElement();var e=window.getSelection();return 0<e.rangeCount?e.getRangeAt(0).startContainer.parentNode:void 0}()})},v.prototype.render=function(){var e=this.props,t=e.children,n=e.styles,o=d(e,["children","styles"]),r=this.state,l=r.contentEditable,i=r.selection,a=function e(t){for(var n,o,r=[],l=1;l<arguments.length;l++)r[l-1]=arguments[l];if(!r.length)return t;var i=r.shift();if(p(t)&&p(i))for(var a in i)i.hasOwnProperty(a)&&(p(i[a])?(t[a]||Object.assign(t,((n={})[a]={},n)),e(t[a],i[a])):Object.assign(t,((o={})[a]=i[a],o)));return e.apply(void 0,[t].concat(r))}({},m,n),s={el:l,selection:i,styles:a};return c.createElement("div",{style:s.styles.editor},c.createElement(h.Provider,{value:s},t,c.createElement(f,u({},o,{contentEditableRef:this.setContentEditableRef,onSelect:this.onTextSelect,style:a.contentEditable}))))},v);function v(e){var t=a.call(this,e)||this;return t.state={},t.onClickOutside=t.onClickOutside.bind(t),t.onTextSelect=t.onTextSelect.bind(t),t.setContentEditableRef=t.setContentEditableRef.bind(t),t}function y(n){return e.displayName="withEditorContext("+(n.displayName||n.name)+")",e;function e(t){return c.createElement(h.Consumer,null,function(e){return c.createElement(n,u({},t,{el:e.el,selection:e.selection,styles:e.styles}))})}}var g=B("Bold","𝐁","bold"),E=B("Clear formatting","T̲ₓ","removeFormat"),L=B("Italic","𝑰","italic"),b=B("Link","🔗",function(e){e&&"A"===e.nodeName?document.execCommand("unlink"):document.execCommand("createLink",!1,prompt("URL"))}),C=B("Numbered list",c.createElement(function(){return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",style:{verticalAlign:"text-top"}},c.createElement("path",{fill:"currentColor",d:"M 6.99938,12.998L 6.99938,10.998L 20.9994,10.998L 20.9994,12.998L 6.99938,12.998 Z M 6.99938,18.9981L 6.99938,16.9981L 20.9994,16.9981L 20.9994,18.9981L 6.99938,18.9981 Z M 6.99938,6.99809L 6.99938,4.99809L 20.9994,4.99809L 20.9994,6.99809L 6.99938,6.99809 Z M 2.99938,7.99809L 2.99938,4.99809L 1.99938,4.99809L 1.99938,3.99809L 3.99938,3.99809L 3.99938,7.99809L 2.99938,7.99809 Z M 1.99938,16.9981L 1.99938,15.9981L 4.99938,15.9981L 4.99938,19.9981L 1.99938,19.9981L 1.99938,18.9981L 3.99938,18.9981L 3.99938,18.4981L 2.99938,18.4981L 2.99938,17.4981L 3.99938,17.4981L 3.99938,16.9981L 1.99938,16.9981 Z M 4.25,10C 4.66421,10 5,10.3358 5,10.75C 5,10.9524 4.91983,11.1361 4.7895,11.271L 3.11983,13L 5,13L 5,14L 2,14L 2,13.0782L 4,11L 2,11L 2,10L 4.25,10 Z "}))},null),"insertOrderedList"),w=B("Redo","↷","redo"),x=B("Underline",c.createElement("span",{style:{textDecoration:"underline"}},"𝐔"),"underline"),M=B("Undo","↶","undo"),O=B("Bullet list",c.createElement(function(){return c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24",style:{verticalAlign:"text-top"}},c.createElement("path",{fill:"currentColor",d:"M 7,5L 21,5L 21,7L 7,7L 7,5 Z M 7,13L 7,11L 21,11L 21,13L 7,13 Z M 4,4.50001C 4.83,4.50001 5.5,5.16993 5.5,6.00001C 5.5,6.83008 4.83,7.50001 4,7.50001C 3.17,7.50001 2.5,6.83008 2.5,6.00001C 2.5,5.16993 3.17,4.50001 4,4.50001 Z M 4,10.5C 4.83,10.5 5.5,11.17 5.5,12C 5.5,12.83 4.83,13.5 4,13.5C 3.17,13.5 2.5,12.83 2.5,12C 2.5,11.17 3.17,10.5 4,10.5 Z M 7,19L 7,17L 21,17L 21,19L 7,19 Z M 4,16.5C 4.83,16.5 5.5,17.17 5.5,18C 5.5,18.83 4.83,19.5 4,19.5C 3.17,19.5 2.5,18.83 2.5,18C 2.5,17.17 3.17,16.5 4,16.5 Z "}))},null),"insertUnorderedList");function R(t){var e=c.useState(!1),n=e[0],o=e[1],r=t.active,l=t.styles,i=(t.el,t.selection,d(t,["active","styles","el","selection"])),a=u({},l.button.normal,t.style,n?l.button.hovered:{},n?t.hoverStyle:{},r?l.button.active:{});return c.createElement("button",u({},i,{style:a,onMouseEnter:function(e){o(!0),t.onMouseEnter&&t.onMouseEnter(e)},onMouseLeave:function(e){o(!1),t.onMouseLeave&&t.onMouseLeave(e)}}))}function B(r,l,i){return e.displayName=r.replace(/\s/g,""),y(e);function e(e){var t=e.selection,n=d(e,["selection"]),o=!1;return"string"==typeof i&&(o=!!t&&document.queryCommandState(i)),c.createElement(R,u({title:r},n,{onMouseDown:function(){"function"==typeof i?i(t):document.execCommand(i)},active:o}),l)}}var S,k,N=(k=[["Normal","formatBlock","DIV"],["𝗛𝗲𝗮𝗱𝗲𝗿 𝟭","formatBlock","H1"],["Header 2","formatBlock","H2"],["𝙲𝚘𝚍𝚎","formatBlock","PRE"]],T.displayName=S="Styles",y(T));function T(e){var l=e.selection,t=d(e,["selection"]);return c.createElement(_,u({},t,{onChange:function(e){var t=parseInt(e.target.value,10),n=k[t],o=n[1],r=n[2];e.preventDefault(),e.target.selectedIndex=0,"function"==typeof o?o(l):document.execCommand(o,!1,r)},title:S,items:k}))}function _(e){e.el;var t=e.items,n=e.selected,o=(e.selection,e.styles),r=d(e,["el","items","selected","selection","styles"]),l=u({},o.dropdown,e.style);return c.createElement("select",u({},r,{value:n,style:l}),c.createElement("option",{hidden:!0},e.title),t.map(function(e,t){return c.createElement("option",{key:t,value:t},e[0])}))}var j=y(function(e){return c.createElement("span",{style:e.styles.separator})});function A(e){var t=u({},D.root,e.style);return c.createElement("div",u({},e,{style:t}))}var D={root:{backgroundColor:"#f5f5f5",borderBottom:"1px solid #ddd"}};e.BtnBold=g,e.BtnBulletList=O,e.BtnClearFormatting=E,e.BtnItalic=L,e.BtnLink=b,e.BtnNumberedList=C,e.BtnRedo=w,e.BtnStyles=N,e.BtnUnderline=x,e.BtnUndo=M,e.Button=R,e.ContentEditable=f,e.DefaultEditor=function(e){return c.createElement(s,u({},e),c.createElement(A,null,c.createElement(M,null),c.createElement(w,null),c.createElement(j,null),c.createElement(g,null),c.createElement(L,null),c.createElement(x,null),c.createElement(j,null),c.createElement(C,null),c.createElement(O,null),c.createElement(j,null),c.createElement(b,null),c.createElement(E,null),c.createElement(j,null),c.createElement(N,null)))},e.Dropdown=_,e.Separator=j,e.Toolbar=A,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "react-simple-wysiwyg",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Simple and lightweight React WYSIWYG editor",
@@ -13,5 +13,5 @@ "main": "lib/index.js",
     "build": "rm -rf lib && tsc && tsc -t ES2018 --outDir lib/es --declaration false && rollup -c",
-    "gh-pages": "gh-pages -d examples/github.io",
+    "pages": "gh-pages -d examples/github.io",
     "lint": "tslint -p tsconfig.json -t verbose",
-    "postversion": "git push && git push --tags && gh-pages",
+    "postversion": "git push && git push --tags",
     "prepack": "npm run build && npm run test",
@@ -18,0 +18,0 @@ "test": "npm run lint && npm run spell",

README.md

@@ -5,12 +5,68 @@ # react-simple-wysiwyg
 [![Dependencies status](https://david-dm.org/megahertz/react-simple-wysiwyg/status.svg)](https://david-dm.org/megahertz/react-simple-wysiwyg)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-simple-wysiwyg.svg?color=rgb%2868%2C%20204%2C%2017%29)](https://bundlephobia.com/result?p=react-simple-wysiwyg@0.0.3)
 
-Simple and lightweight React WYSIWYG editor.
+Simple and lightweight React WYSIWYG editor. [Demo](https://megahertz.github.io/react-simple-wysiwyg/).
 
-The project is in alpha stage.
+## Description
 
+**The project is in alpha stage.**
+
+[![Screenshot](docs/resources/screenshot.png)](https://megahertz.github.io/react-simple-wysiwyg/)
+
+It can be helpful if you only need basic text operations. It's:
+
+ - pretty small (~10kb, ~4kb gzipped)
+ - fast
+ - simple to configure
+ - simple to extend
+
+Of course, it's not so powerful as other complex editors. It DOES NOT:
+
+ - ✗ change HTML generated by browser (sometimes it can be too dirty)
+ - ✗ sanitize HTML (you can use [sanitize-html](https://www.npmjs.com/package/sanitize-html))
+ - ✗ contain a lot of feature as others (like table editor, image editor and so on)
+ - ✗ support old browser
+
+If you need more powerful solution for React, you'd better take a look at:
+
+ - [draft.js](https://draftjs.org/) or draft-powered editor like
+   [react-rte](https://github.com/sstur/react-rte)
+ - classic solution like [CKEditor](https://ckeditor.com/) and
+   (TinyMCE)[https://www.tiny.cloud/]
+ - [Quill](https://github.com/zenoamaro/react-quill) and
+   [Summernote](https://github.com/summernote/react-summernote)
+
+
 ## Usage
 
-1. Install with [npm](https://npmjs.org/package/react-simple-wysiwyg):
+ 1. Install with [npm](https://npmjs.org/package/react-simple-wysiwyg):
 
-    npm install react-simple-wysiwyg
+    `npm install react-simple-wysiwyg`
     
+    or [CDN (unpkg.com)](https://unpkg.com/react-simple-wysiwyg@0.0.3/)
+   
+    `<script src="//unpkg.com/react-simple-wysiwyg"></script>`
+    
+ 2. Use it you React component
+ 
+    ```jsx
+    import { DefaultEditor } from 'react-simple-wysiwyg';
+    
+    function App() {
+      const [html, setHtml] = React.useState('my <b>HTML</b>');
+      
+      const onChange = (e) => {
+        setHtml(e.target.value);
+      };
+    
+      return (
+        <DefaultEditor value={html} onChange={onChange} />
+      );
+    }
+    ```
+  
+## Credits
+
+ - Based on 
+   [lovasoa/react-contenteditable](https://github.com/lovasoa/react-contenteditable)
+ - Uses [Material Design Icons](http://materialdesignicons.com/)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

209278

increased by0.71%

Number of lines in readme file

72

increased by350%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes