@ant-design/agentic-ui 2.0.15 → 2.0.17

package/dist/MarkdownInputField/MarkdownInputField.js

@@ -78,7 +78,7 @@ import { useFileUploadManager } from "./FileUploadManager";
 import { QuickActions } from "./QuickActions";
 import { SendActions } from "./SendActions";
 import { SkillModeBar } from "./SkillModeBar";
-import { addGlowBorderOffset, useStyle } from "./style";
+import { useStyle } from "./style";
 import { Suggestion } from "./Suggestion";
 import TopOperatingArea from "./TopOperatingArea";
 import { useVoiceInputManager } from "./VoiceInputManager";
@@ -98,7 +98,7 @@ var MarkdownInputField = (_a) => {
     "onFocus",
     "isShowTopOperatingArea"
   ]);
-  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const baseCls = getPrefixCls("agentic-md-input-field");
   const { wrapSSR, hashId } = useStyle(baseCls);
@@ -127,16 +127,27 @@ var MarkdownInputField = (_a) => {
     const topOverlayPadding = (topRightPadding || 0) + (quickRightOffset || 0);
     return Math.max(bottomOverlayPadding, topOverlayPadding);
   }, [props.toolsRender, rightPadding, topRightPadding, quickRightOffset]);
+  const collapsedHeight = useMemo(() => {
+    var _a3;
+    const mh = (_a3 = props.style) == null ? void 0 : _a3.maxHeight;
+    const base = typeof mh === "number" ? mh : mh ? parseFloat(String(mh)) || 114 : 114;
+    return base;
+  }, [(_a2 = props.style) == null ? void 0 : _a2.maxHeight, (_b2 = props.attachment) == null ? void 0 : _b2.enable]);
+  const collapsedHeightPx = useMemo(() => {
+    var _a3;
+    const extra = ((_a3 = props.attachment) == null ? void 0 : _a3.enable) ? 90 : 0;
+    return collapsedHeight + extra;
+  }, [(_c = props.style) == null ? void 0 : _c.maxHeight, (_d = props.attachment) == null ? void 0 : _d.enable]);
   const [fileMap, setFileMap] = useMergedState(void 0, {
-    value: (_a2 = props.attachment) == null ? void 0 : _a2.fileMap,
-    onChange: (_b2 = props.attachment) == null ? void 0 : _b2.onFileMapChange
+    value: (_e = props.attachment) == null ? void 0 : _e.fileMap,
+    onChange: (_f = props.attachment) == null ? void 0 : _f.onFileMapChange
   });
   const isMultiRowLayout = useMemo(() => {
     var _a3;
     return !!((props == null ? void 0 : props.quickActionRender) || ((_a3 = props == null ? void 0 : props.refinePrompt) == null ? void 0 : _a3.enable) || (props == null ? void 0 : props.actionsRender) || (props == null ? void 0 : props.toolsRender));
   }, [
     props == null ? void 0 : props.quickActionRender,
-    (_c = props == null ? void 0 : props.refinePrompt) == null ? void 0 : _c.enable,
+    (_g = props == null ? void 0 : props.refinePrompt) == null ? void 0 : _g.enable,
     props == null ? void 0 : props.actionsRender,
     props == null ? void 0 : props.toolsRender
   ]);
@@ -164,18 +175,6 @@ var MarkdownInputField = (_a) => {
     (_b3 = (_a3 = markdownEditorRef.current) == null ? void 0 : _a3.store) == null ? void 0 : _b3.setMDContent(value);
   }, [props.value]);
   useImperativeHandle(props.inputRef, () => markdownEditorRef.current);
-  useEffect(() => {
-    var _a3;
-    const targetElement = (_a3 = props.enlargeTargetRef) == null ? void 0 : _a3.current;
-    if (targetElement && isEnlarged) {
-      const computedStyle = window.getComputedStyle(targetElement);
-      if (computedStyle.position === "static") {
-        console.warn(
-          "MarkdownInputField: enlargeTargetRef 容器的 position 为 static，这可能导致放大功能无法正常工作。请为目标容器设置 position: relative、absolute 或 fixed。"
-        );
-      }
-    }
-  }, [isEnlarged, props.enlargeTargetRef]);
   const handleEnlargeClick = useRefFunction(() => {
     setIsEnlarged(!isEnlarged);
   });
@@ -204,32 +203,14 @@ var MarkdownInputField = (_a) => {
       }
     }
   }));
-  const bgSize = useMemo(() => {
-    var _a3, _b3;
-    const height = ((_a3 = props.style) == null ? void 0 : _a3.height) ? addGlowBorderOffset(props.style.height) : addGlowBorderOffset("100%");
-    const width = ((_b3 = props.style) == null ? void 0 : _b3.width) ? addGlowBorderOffset(props.style.width) : addGlowBorderOffset("100%");
-    return { height, width };
-  }, [(_d = props.style) == null ? void 0 : _d.height, (_e = props.style) == null ? void 0 : _e.width]);
   const enlargedStyle = useMemo(() => {
-    var _a3;
     if (!isEnlarged)
       return {};
-    if ((_a3 = props.enlargeTargetRef) == null ? void 0 : _a3.current) {
-      const topOffset = 48;
-      return {
-        position: "absolute",
-        top: `${topOffset}px`,
-        left: "0",
-        right: "0",
-        bottom: "0",
-        width: "auto",
-        height: `calc(100% - ${topOffset}px)`,
-        maxWidth: "none",
-        zIndex: 1e3
-      };
-    }
-    return {};
-  }, [isEnlarged, props.enlargeTargetRef]);
+    return {
+      maxHeight: "980px",
+      minHeight: "280px"
+    };
+  }, [isEnlarged]);
   const beforeTools = useMemo(() => {
     if (props.beforeToolsRender) {
       return props.beforeToolsRender(__spreadProps(__spreadValues({}, props), {
@@ -288,6 +269,113 @@ var MarkdownInputField = (_a) => {
     }),
     [fileMap, markdownProps == null ? void 0 : markdownProps.attachment]
   );
+  const attachmentList = useMemo(() => {
+    var _a3;
+    if (!((_a3 = props.attachment) == null ? void 0 : _a3.enable))
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      AttachmentFileList,
+      {
+        fileMap,
+        onDelete: handleFileRemoval,
+        onRetry: handleFileRetry,
+        onClearFileMap: () => {
+          updateAttachmentFiles(/* @__PURE__ */ new Map());
+        }
+      }
+    );
+  }, [
+    fileMap,
+    (_h = props.attachment) == null ? void 0 : _h.enable,
+    handleFileRemoval,
+    handleFileRetry,
+    updateAttachmentFiles
+  ]);
+  const handleKeyDown = useRefFunction(
+    (e) => {
+      var _a3;
+      const triggerSendKey = props.triggerSendKey || "Enter";
+      if ((_a3 = markdownEditorRef == null ? void 0 : markdownEditorRef.current) == null ? void 0 : _a3.store.inputComposition)
+        return;
+      const isEnter = e.key === "Enter";
+      const isMod = e.ctrlKey || e.metaKey;
+      if (triggerSendKey === "Enter") {
+        if (!(isEnter && !isMod))
+          return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (props.onSend)
+          sendMessage();
+        return;
+      }
+      if (triggerSendKey === "Mod+Enter") {
+        if (!(isEnter && isMod))
+          return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (props.onSend)
+          sendMessage();
+      }
+    }
+  );
+  const handleContainerClick = useRefFunction(
+    (e) => {
+      var _a3, _b3, _c2, _d2;
+      if ((_a3 = markdownEditorRef == null ? void 0 : markdownEditorRef.current) == null ? void 0 : _a3.store.inputComposition)
+        return;
+      if (props.disabled)
+        return;
+      if ((_b3 = actionsRef.current) == null ? void 0 : _b3.contains(e.target))
+        return;
+      if ((_c2 = quickActionsRef.current) == null ? void 0 : _c2.contains(e.target))
+        return;
+      const editor = (_d2 = markdownEditorRef.current) == null ? void 0 : _d2.markdownEditorRef.current;
+      if (!editor)
+        return;
+      if (ReactEditor.isFocused(editor))
+        return;
+      ReactEditor.focus(editor);
+      Transforms.move(editor, { distance: 1, unit: "offset" });
+      Transforms.select(editor, {
+        anchor: Editor.end(editor, []),
+        focus: Editor.end(editor, [])
+      });
+    }
+  );
+  const sendActionsNode = /* @__PURE__ */ React.createElement(
+    SendActions,
+    {
+      attachment: __spreadProps(__spreadValues({}, props.attachment), {
+        supportedFormat,
+        fileMap,
+        onFileMapChange: setFileMap,
+        upload: ((_i = props.attachment) == null ? void 0 : _i.upload) ? (file) => props.attachment.upload(file, 0) : void 0
+      }),
+      voiceRecognizer: props.voiceRecognizer,
+      value,
+      disabled: props.disabled,
+      typing: props.typing,
+      isLoading,
+      fileUploadDone,
+      recording,
+      collapseSendActions,
+      allowEmptySubmit: props.allowEmptySubmit,
+      uploadImage,
+      onStartRecording: startRecording,
+      onStopRecording: stopRecording,
+      onSend: sendMessage,
+      onStop: () => {
+        var _a3;
+        setIsLoading(false);
+        (_a3 = props.onStop) == null ? void 0 : _a3.call(props);
+      },
+      actionsRender: props.actionsRender,
+      prefixCls: baseCls,
+      hashId,
+      hasTools: !!props.toolsRender,
+      onResize: setRightPadding
+    }
+  );
   return wrapSSR(
     /* @__PURE__ */ React.createElement(React.Fragment, null, isShowTopOperatingArea && /* @__PURE__ */ React.createElement("div", { className: classNames(`${baseCls}-top-area`, hashId) }, /* @__PURE__ */ React.createElement(
       TopOperatingArea,
@@ -316,60 +404,17 @@ var MarkdownInputField = (_a) => {
             [`${baseCls}-enlarged`]: isEnlarged
           }),
           style: __spreadProps(__spreadValues(__spreadValues({}, props.style), enlargedStyle), {
+            minHeight: `${collapsedHeight}px`,
+            height: isEnlarged ? `${(_k = (_j = props.enlargeable) == null ? void 0 : _j.height) != null ? _k : 980}px` : `max(${collapsedHeight}px,100%)`,
             borderRadius: borderRadius || 16,
-            transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+            maxHeight: isEnlarged ? "none" : `max(${collapsedHeightPx}px,100%)`,
+            transition: "height, max-height 0.3s,border-radius 0.3s,box-shadow 0.3s,transform 0.3s,opacity 0.3s,background 0.3s"
           }),
           tabIndex: 1,
           onMouseEnter: () => setHover(true),
           onMouseLeave: () => setHover(false),
-          onKeyDown: (e) => {
-            var _a3;
-            const { triggerSendKey = "Enter" } = props;
-            if ((_a3 = markdownEditorRef == null ? void 0 : markdownEditorRef.current) == null ? void 0 : _a3.store.inputComposition) {
-              return;
-            }
-            if (triggerSendKey === "Enter" && e.key === "Enter" && !(e.ctrlKey || e.metaKey)) {
-              e.stopPropagation();
-              e.preventDefault();
-              if (props.onSend) {
-                sendMessage();
-              }
-              return;
-            }
-            if (triggerSendKey === "Mod+Enter" && (e.ctrlKey || e.metaKey) && e.key === "Enter") {
-              e.stopPropagation();
-              e.preventDefault();
-              if (props.onSend) {
-                sendMessage();
-              }
-            }
-          },
-          onClick: (e) => {
-            var _a3, _b3, _c2, _d2, _e2, _f2, _g2, _h2;
-            if ((_a3 = markdownEditorRef == null ? void 0 : markdownEditorRef.current) == null ? void 0 : _a3.store.inputComposition) {
-              return;
-            }
-            if (props.disabled) {
-              return;
-            }
-            if ((_b3 = actionsRef.current) == null ? void 0 : _b3.contains(e.target)) {
-              return;
-            }
-            if ((_c2 = quickActionsRef.current) == null ? void 0 : _c2.contains(e.target)) {
-              return;
-            }
-            if (((_e2 = (_d2 = markdownEditorRef.current) == null ? void 0 : _d2.store) == null ? void 0 : _e2.editor) && !ReactEditor.isFocused((_g2 = (_f2 = markdownEditorRef.current) == null ? void 0 : _f2.store) == null ? void 0 : _g2.editor)) {
-              const editor = (_h2 = markdownEditorRef.current) == null ? void 0 : _h2.markdownEditorRef.current;
-              if (editor) {
-                ReactEditor.focus(editor);
-                Transforms.move(editor, { distance: 1, unit: "offset" });
-                Transforms.select(editor, {
-                  anchor: Editor.end(editor, []),
-                  focus: Editor.end(editor, [])
-                });
-              }
-            }
-          }
+          onKeyDown: handleKeyDown,
+          onClick: handleContainerClick
         },
         /* @__PURE__ */ React.createElement(
           "div",
@@ -378,38 +423,33 @@ var MarkdownInputField = (_a) => {
               [`${baseCls}-hover`]: isHover
             }),
             style: {
-              minHeight: ((_f = props.style) == null ? void 0 : _f.minHeight) || 0,
-              height: bgSize.height,
-              width: bgSize.width
+              minHeight: ((_l = props.style) == null ? void 0 : _l.minHeight) || 0,
+              height: "100%",
+              width: "100%"
             }
           }
         ),
         /* @__PURE__ */ React.createElement(
           "div",
           {
+            className: classNames(`${baseCls}-border-wrapper`, hashId),
             style: {
-              flex: 1,
-              backgroundColor: "#fff",
-              width: "100%",
               height: isEnlarged ? "100%" : "auto",
-              display: "flex",
-              zIndex: 9,
-              flexDirection: "column",
-              boxSizing: "border-box",
+              maxHeight: isEnlarged ? "100%" : "auto",
               borderRadius: (borderRadius || 16) - 2 || 10,
               cursor: isLoading || props.disabled ? "not-allowed" : "auto",
               opacity: props.disabled ? 0.5 : 1,
-              minHeight: isEnlarged ? "auto" : isMultiRowLayout ? 114 : void 0,
-              transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+              minHeight: isEnlarged ? "auto" : isMultiRowLayout ? 106 : void 0
             }
           },
-          /* @__PURE__ */ React.createElement(
+          /* @__PURE__ */ React.createElement("div", { className: classNames(`${baseCls}-content-wrapper`, hashId) }, /* @__PURE__ */ React.createElement(
             "div",
             {
               style: {
                 display: "flex",
                 flexDirection: "column",
-                borderRadius: (borderRadius || 16) - 2 || 10,
+                borderTopLeftRadius: (borderRadius || 16) - 2 || 10,
+                borderTopRightRadius: (borderRadius || 16) - 2 || 10,
                 maxHeight: isEnlarged ? "none" : (() => {
                   var _a3, _b3;
                   const mh = (_a3 = props.style) == null ? void 0 : _a3.maxHeight;
@@ -418,8 +458,7 @@ var MarkdownInputField = (_a) => {
                   return `min(${base + extra}px)`;
                 })(),
                 height: isEnlarged ? "100%" : "auto",
-                flex: 1,
-                transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)"
+                flex: 1
               },
               className: classNames(`${baseCls}-editor`, hashId, {
                 [`${baseCls}-editor-hover`]: isHover,
@@ -433,96 +472,92 @@ var MarkdownInputField = (_a) => {
                 onSkillModeOpenChange: props.onSkillModeOpenChange
               }
             ),
-            /* @__PURE__ */ React.createElement("div", { className: classNames(`${baseCls}-editor-content`, hashId) }, useMemo(() => {
-              var _a3;
-              return ((_a3 = props.attachment) == null ? void 0 : _a3.enable) ? /* @__PURE__ */ React.createElement(
-                AttachmentFileList,
-                {
-                  fileMap,
-                  onDelete: handleFileRemoval,
-                  onRetry: handleFileRetry,
-                  onClearFileMap: () => {
-                    updateAttachmentFiles(/* @__PURE__ */ new Map());
-                  }
-                }
-              ) : null;
-            }, [fileMap == null ? void 0 : fileMap.values(), (_g = props.attachment) == null ? void 0 : _g.enable]), /* @__PURE__ */ React.createElement(
-              BaseMarkdownEditor,
-              __spreadValues({
-                editorRef: markdownEditorRef,
-                leafRender: props.leafRender,
-                style: {
-                  width: "100%",
-                  flex: 1,
-                  padding: 0,
-                  paddingRight: computedRightPadding
-                },
-                toolBar: {
-                  enable: false
-                },
-                floatBar: {
-                  enable: false
-                },
-                readonly: isLoading,
-                contentStyle: {
-                  padding: "12px 12px 12px 12px"
-                },
-                textAreaProps: {
-                  enable: true,
-                  placeholder: props.placeholder,
-                  triggerSendKey: props.triggerSendKey || "Enter"
-                },
-                tagInputProps: __spreadValues({
-                  enable: true,
-                  type: "dropdown"
-                }, tagInputProps),
-                initValue: props.value,
-                onChange: (value2) => {
-                  var _a3;
-                  setValue(value2);
-                  (_a3 = props.onChange) == null ? void 0 : _a3.call(props, value2);
-                },
-                onFocus: (value2, schema, e) => {
-                  onFocus == null ? void 0 : onFocus(value2, schema, e);
-                  activeInput(true);
-                },
-                onBlur: (value2, schema, e) => {
-                  onBlur == null ? void 0 : onBlur(value2, schema, e);
-                  activeInput(false);
-                },
-                onPaste: (e) => {
-                  handlePaste(e);
-                },
-                titlePlaceholderContent: props.placeholder,
-                toc: false,
-                pasteConfig: props.pasteConfig
-              }, markdownProps)
-            ))
-          ),
-          props.toolsRender ? /* @__PURE__ */ React.createElement(
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                className: classNames(`${baseCls}-editor-content`, hashId)
+              },
+              attachmentList,
+              /* @__PURE__ */ React.createElement(
+                BaseMarkdownEditor,
+                __spreadValues({
+                  editorRef: markdownEditorRef,
+                  leafRender: props.leafRender,
+                  style: {
+                    width: "100%",
+                    flex: 1,
+                    padding: 0,
+                    paddingRight: computedRightPadding
+                  },
+                  toolBar: {
+                    enable: false
+                  },
+                  floatBar: {
+                    enable: false
+                  },
+                  readonly: isLoading,
+                  contentStyle: {
+                    padding: "var(--padding-card-base)"
+                  },
+                  textAreaProps: {
+                    enable: true,
+                    placeholder: props.placeholder,
+                    triggerSendKey: props.triggerSendKey || "Enter"
+                  },
+                  tagInputProps: __spreadValues({
+                    enable: true,
+                    type: "dropdown"
+                  }, tagInputProps),
+                  initValue: props.value,
+                  onChange: (value2) => {
+                    var _a3;
+                    setValue(value2);
+                    (_a3 = props.onChange) == null ? void 0 : _a3.call(props, value2);
+                  },
+                  onFocus: (value2, schema, e) => {
+                    onFocus == null ? void 0 : onFocus(value2, schema, e);
+                    activeInput(true);
+                  },
+                  onBlur: (value2, schema, e) => {
+                    onBlur == null ? void 0 : onBlur(value2, schema, e);
+                    activeInput(false);
+                  },
+                  onPaste: (e) => {
+                    handlePaste(e);
+                  },
+                  titlePlaceholderContent: props.placeholder,
+                  toc: false,
+                  pasteConfig: props.pasteConfig
+                }, markdownProps)
+              )
+            )
+          ), props.toolsRender ? /* @__PURE__ */ React.createElement(
             "div",
             {
               style: {
+                backgroundColor: "#fff",
                 display: "flex",
                 boxSizing: "border-box",
+                borderBottomLeftRadius: (borderRadius || 16) - 2 || 10,
+                borderBottomRightRadius: (borderRadius || 16) - 2 || 10,
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-between",
                 gap: 8,
                 width: "100%",
-                paddingRight: 8,
-                paddingLeft: 8,
-                paddingBottom: 12
+                paddingRight: "var(--padding-card-base)",
+                paddingLeft: "var(--padding-card-base)",
+                paddingBottom: "var(--padding-card-base)"
               }
             },
-            props.toolsRender ? /* @__PURE__ */ React.createElement(
+            /* @__PURE__ */ React.createElement(
               "div",
               {
                 ref: actionsRef,
                 contentEditable: false,
                 className: classNames(`${baseCls}-send-tools`, hashId)
               },
-              props.toolsRender ? props.toolsRender(__spreadProps(__spreadValues({
+              props.toolsRender(__spreadProps(__spreadValues({
                 value,
                 fileMap,
                 onFileMapChange: setFileMap
@@ -530,77 +565,10 @@ var MarkdownInputField = (_a) => {
                 isHover,
                 isLoading,
                 fileUploadStatus: fileUploadDone ? "done" : "uploading"
-              })) : []
-            ) : null,
-            /* @__PURE__ */ React.createElement(
-              SendActions,
-              {
-                attachment: __spreadProps(__spreadValues({}, props.attachment), {
-                  supportedFormat,
-                  fileMap,
-                  onFileMapChange: setFileMap,
-                  upload: ((_h = props.attachment) == null ? void 0 : _h.upload) ? (file) => props.attachment.upload(file, 0) : void 0
-                }),
-                voiceRecognizer: props.voiceRecognizer,
-                value,
-                disabled: props.disabled,
-                typing: props.typing,
-                isLoading,
-                fileUploadDone,
-                recording,
-                collapseSendActions,
-                allowEmptySubmit: props.allowEmptySubmit,
-                uploadImage,
-                onStartRecording: startRecording,
-                onStopRecording: stopRecording,
-                onSend: sendMessage,
-                onStop: () => {
-                  var _a3;
-                  setIsLoading(false);
-                  (_a3 = props.onStop) == null ? void 0 : _a3.call(props);
-                },
-                actionsRender: props.actionsRender,
-                prefixCls: baseCls,
-                hashId,
-                hasTools: !!props.toolsRender,
-                onResize: setRightPadding
-              }
-            )
-          ) : /* @__PURE__ */ React.createElement(
-            SendActions,
-            {
-              attachment: __spreadProps(__spreadValues({}, props.attachment), {
-                supportedFormat,
-                fileMap,
-                onFileMapChange: setFileMap,
-                upload: ((_i = props.attachment) == null ? void 0 : _i.upload) ? (file) => props.attachment.upload(file, 0) : void 0
-              }),
-              voiceRecognizer: props.voiceRecognizer,
-              value,
-              disabled: props.disabled,
-              typing: props.typing,
-              isLoading,
-              fileUploadDone,
-              recording,
-              collapseSendActions,
-              allowEmptySubmit: props.allowEmptySubmit,
-              uploadImage,
-              onStartRecording: startRecording,
-              onStopRecording: stopRecording,
-              onSend: sendMessage,
-              onStop: () => {
-                var _a3;
-                setIsLoading(false);
-                (_a3 = props.onStop) == null ? void 0 : _a3.call(props);
-              },
-              actionsRender: props.actionsRender,
-              prefixCls: baseCls,
-              hashId,
-              hasTools: !!props.toolsRender,
-              onResize: setRightPadding
-            }
-          ),
-          (props == null ? void 0 : props.quickActionRender) || ((_j = props.refinePrompt) == null ? void 0 : _j.enable) ? /* @__PURE__ */ React.createElement(
+              }))
+            ),
+            sendActionsNode
+          ) : sendActionsNode, (props == null ? void 0 : props.quickActionRender) || ((_m = props.refinePrompt) == null ? void 0 : _m.enable) ? /* @__PURE__ */ React.createElement(
             QuickActions,
             {
               ref: quickActionsRef,
@@ -621,7 +589,7 @@ var MarkdownInputField = (_a) => {
               quickActionRender: props.quickActionRender,
               prefixCls: baseCls,
               hashId,
-              enlargeable: props.enlargeable,
+              enlargeable: !!((_n = props.enlargeable) == null ? void 0 : _n.enable),
               isEnlarged,
               onEnlargeClick: handleEnlargeClick,
               onResize: (width, rightOffset) => {
@@ -629,7 +597,7 @@ var MarkdownInputField = (_a) => {
                 setQuickRightOffset(rightOffset);
               }
             }
-          ) : null
+          ) : null)
         )
       )
     ))