@startlibs/form 1.0.0-alpha-10a → 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";
 
@@ -5413,7 +5428,8 @@ var RichText = function RichText(_ref5) {
       tabIndex = _ref5$tabIndex === void 0 ? 1 : _ref5$tabIndex,
       value = _ref5.value,
       setValue = _ref5.setValue,
-      raw = _ref5.raw;
+      raw = _ref5.raw,
+      locked = _ref5.locked;
   var linkPopup = core.usePopupToggle();
   var input = core.useEnsureRef(inputRef);
   var activeLinkNode = React.useRef();
@@ -5503,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;
@@ -5828,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,
@@ -6039,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;
   };
 
@@ -6061,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,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.0.0-alpha-10a",
+  "version": "1.0.0-alpha-10b",
   "description": "Startlibs Form",
   "main": "lib/index.js",
   "sideEffects": false,