@startlibs/form 1.0.0-alpha-9y → 1.0.0-alpha-10b

package/lib/index.js

@@ -5108,6 +5108,19 @@ var FlipDiv$1 = function FlipDiv(_ref3) {
   }));
 };
 
+function _templateObject$8() {
+  var data = _taggedTemplateLiteral(["\n    padding-right: 2.25rem;\n    background: rgba(0,0,0,0.075);\n  "]);
+
+  _templateObject$8 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var InputIcon$1 = styled__default(components.Icon).withConfig({
+  displayName: "RichText__InputIcon",
+  componentId: "x8c1ig-0"
+})(["position:absolute;outline:none;bottom:0;font-size:21px;line-height:3rem;right:0;width:2rem;pointer-events:none;color:", ";"], utils.getColor('gray150'));
 var FORMAT_TOOLS = {
   'bold': ['b', 'strong'],
   'italic': 'i',
@@ -5182,17 +5195,19 @@ var FIX_STYLE = {
 };
 var RichTextContainer = styled__default.div.withConfig({
   displayName: "RichText__RichTextContainer",
-  componentId: "x8c1ig-0"
-})(["position:relative;width:100%;border:1px solid ", ";border-radius:6px;background:white;", ";", ";", ""], utils.getColor('gray210'), function (props) {
+  componentId: "x8c1ig-1"
+})(["position:relative;width:100%;border:1px solid ", ";border-radius:6px;background:white;", ";", ";", " ", " ul{list-style-type:disc;}ul,ol{padding-inline-start:25px;margin-block-start:0.5em;margin-block-end:0.5em;}"], utils.getColor('gray210'), function (props) {
   return props.hasErrors && "border-color: ".concat(utils.getColor(props)('alert'));
 }, function (props) {
   return props.showToolbar && "\n    ".concat(ToolsContainer, " {\n      transition: 0.5s;\n      max-height: 7.5rem;\n      transition: 0.6s;\n      pointer-events: auto;\n    }\n  ");
 }, function (props) {
   return props.focus && "\n    border-color: ".concat(utils.getColor('gray180'), ";\n    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);\n  ");
+}, function (props) {
+  return props.locked && css(_templateObject$8());
 });
 var RichTextInput = styled__default.div.withConfig({
   displayName: "RichText__RichTextInput",
-  componentId: "x8c1ig-1"
+  componentId: "x8c1ig-2"
 })(["width:100%;font-size:14px;outline:0;outline:none;color:", ";background:white;min-height:", "px;outline:0;padding:0.7rem;overflow:auto;border-radius:5px;b,strong{font-weight:600;}&[contenteditable=true]:empty:before{content:attr(placeholder);color:rgba(0,0,0,0.3);}", ""], utils.getColor('gray60'), function (props) {
   return props.minHeight || 78;
 }, function (props) {
@@ -5200,15 +5215,15 @@ var RichTextInput = styled__default.div.withConfig({
 });
 var ToolsContainer = styled__default.div.withConfig({
   displayName: "RichText__ToolsContainer",
-  componentId: "x8c1ig-2"
+  componentId: "x8c1ig-3"
 })(["background:", ";padding:0 0.125rem;border-top-left-radius:5px;border-top-right-radius:5px;transition:0.225s;max-height:0;pointer-events:none;overflow:hidden;"], utils.getColor('gray240'));
 var ToolButton = styled__default(components.Button).withConfig({
   displayName: "RichText__ToolButton",
-  componentId: "x8c1ig-3"
+  componentId: "x8c1ig-4"
 })(["min-height:2rem;min-width:2rem;background:transparent;box-shadow:none;margin:0.25rem 0.125rem;& ~ &{margin-left:0.125rem;}.icon{font-size:23px;color:", ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}&:hover,&.activated:hover{background:rgba(0,0,0,0.13);}&.activated{background:rgba(0,0,0,0.1);}&:focus:after{content:none;}"], utils.getColor('gray90'));
 var ToolSeparator = styled__default.span.withConfig({
   displayName: "RichText__ToolSeparator",
-  componentId: "x8c1ig-4"
+  componentId: "x8c1ig-5"
 })(["border-left:1px solid ", ";margin-left:0.75rem;margin-right:0.5rem;line-height:2rem;vertical-align:-6px;"], utils.getColor('gray180'));
 var JS_CLASS = "EDITOR--JS";
 
@@ -5410,7 +5425,11 @@ var RichText = function RichText(_ref5) {
       helpText = _ref5.helpText,
       linkColor = _ref5.linkColor,
       _ref5$tabIndex = _ref5.tabIndex,
-      tabIndex = _ref5$tabIndex === void 0 ? 1 : _ref5$tabIndex;
+      tabIndex = _ref5$tabIndex === void 0 ? 1 : _ref5$tabIndex,
+      value = _ref5.value,
+      setValue = _ref5.setValue,
+      raw = _ref5.raw,
+      locked = _ref5.locked;
   var linkPopup = core.usePopupToggle();
   var input = core.useEnsureRef(inputRef);
   var activeLinkNode = React.useRef();
@@ -5422,21 +5441,34 @@ var RichText = function RichText(_ref5) {
   var commands = core.useRefState([]);
   var containerFocused = core.useToggle();
   var needsNormalize = core.useRefState();
-  var alreadyCancelled = core.useRefState();
+  var alreadyCancelled = core.useRefState(); // const [formValue, setFormValue] = useInput({path})
 
   var _useInput = useInput({
-    path: path
-  }),
-      _useInput2 = _slicedToArray(_useInput, 2),
+    path: path,
+    value: value,
+    setValue: setValue
+  }, raw),
+      _useInput2 = _slicedToArray(_useInput, 3),
       formValue = _useInput2[0],
-      setFormValue = _useInput2[1];
+      setFormValue = _useInput2[1],
+      hasErrors = _useInput2[2].hasErrors; // const tempValue = useConstant(formValue)
 
-  var tempValue = core.useConstant(formValue);
 
-  var _useState = React.useState({}),
+  var _useState = React.useState(formValue),
       _useState2 = _slicedToArray(_useState, 2),
-      activatedTools = _useState2[0],
-      setActivatedTools = _useState2[1];
+      tempValue = _useState2[0],
+      setTempValue = _useState2[1];
+
+  React.useEffect(function () {
+    if (value === formValue && formValue !== tempValue) {
+      setTempValue(formValue);
+    }
+  }, [path]);
+
+  var _useState3 = React.useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activatedTools = _useState4[0],
+      setActivatedTools = _useState4[1];
 
   var validElements = core.useLazyConstant(function () {
     return ['br', 'div', 'p', 'span'].concat(_flatten(formatTools.map(function (tool) {
@@ -5472,8 +5504,7 @@ var RichText = function RichText(_ref5) {
   };
 
   var containerBlur = function containerBlur(e) {
-    console.log(e.target, e.currentTarget);
-
+    // console.log(e.target,e.currentTarget)
     if (containerFocused.isOpen !== 1) {
       containerFocused.close();
       triggerScrollForPanel(Date.now());
@@ -5488,6 +5519,22 @@ var RichText = function RichText(_ref5) {
     }
   };
 
+  var keydownHandler = function keydownHandler(e) {
+    if (containerFocused.isOpen === 2) {
+      if (e.key === "k" && e.ctrlKey) {
+        e.preventDefault();
+        execCommand(null, 'link');
+      }
+    }
+  };
+
+  React.useEffect(function () {
+    document.addEventListener('keydown', keydownHandler);
+    return function () {
+      return document.removeEventListener('keydown', keydownHandler);
+    };
+  }, [containerFocused.isOpen]);
+
   var execCommand = function execCommand(e, command) {
     if (command === 'link') {
       var nodeEl;
@@ -5813,6 +5860,8 @@ var RichText = function RichText(_ref5) {
     className: JS_CLASS,
     minHeight: minHeight,
     placeholder: placeholder
+  }), locked && React__default.createElement(InputIcon$1, {
+    icon: "lock"
   }), linkPopup.isOpen && React__default.createElement(EditLinkPopup, {
     input: input,
     activeLinkNode: activeLinkNode,
@@ -6024,10 +6073,10 @@ var ToggleCheckbox = styled__default(function (_ref) {
   return props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ";
 });
 
-function _templateObject$8() {
+function _templateObject$9() {
   var data = _taggedTemplateLiteral(["\n    min-width: 0;\n    ", "\n  "]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
   };
 
@@ -6046,7 +6095,7 @@ var TabButton = styled__default(components.Button).withConfig({
   return props.isFirst !== undefined && !props.isFirst && "\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    :focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  ";
 }, function (props) {
   return props.isLast !== undefined && !props.isLast && "\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    :focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  ";
-}, utils.media.mobile(_templateObject$8(), function (props) {
+}, utils.media.mobile(_templateObject$9(), function (props) {
   return props.icon ? "\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    " : "\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    ";
 }), utils.customTheme('TabButton'));
 var InnerButton = styled__default.a.withConfig({

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.0-alpha-9y",
+  "version": "1.0.0-alpha-10b",
   "description": "Startlibs Form",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "sideEffects": false,
   "source": true,
   "peerDependencies": {

package/src/index.js

@@ -1,24 +0,0 @@
-export * from './Form'
-export * from './enhanceInput'
-export * from './Field'
-export * from './useConfirmDialog'
-export * from './TextInput'
-export * from './Errors'
-export * from './withFormImageInput'
-export * from './Checkbox'
-export * from './Combobox'
-export * from './ComboboxWithCustom'
-export * from './AutoComplete'
-export * from './EditableBox'
-export * from './FormValue'
-export * from './Radiobox'
-export * from './InputboxGroup'
-export * from './DatePicker'
-export * from './ExpandableBox'
-export * from './RichText'
-export * from './alt/radiobox/IconRadioBox'
-export * from './alt/checkbox/SimpleCheckbox'
-export * from './alt/checkbox/ToggleCheckbox'
-export * from './alt/radiobox/TabRadiobox'
-export * from './alt/radiobox/SimpleRadiobox'
-export {validation} from './validation'