@dxos/react-ui-editor 0.6.6 → 0.6.7-staging.1976059

package/dist/lib/browser/index.mjs

@@ -15,6 +15,8 @@ var translations_default = [
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
+        "selection overlaps existing comment label": "Selection overlaps existing comment",
+        "select text to comment label": "Select text to comment",
         "image label": "Insert image",
         "heading label": "Heading level",
         "table label": "Create table",
@@ -2149,9 +2151,7 @@ var defaultTheme = {
   //
   // tooltip
   //
-  ".cm-tooltip": {
-    border: "none"
-  },
+  ".cm-tooltip": {},
   "&light .cm-tooltip": {
     background: `${get2(tokens, "extend.colors.neutral.100")} !important`
   },
@@ -2163,21 +2163,27 @@ var defaultTheme = {
   // autocomplete
   // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
   //
-  ".cm-tooltip-autocomplete": {
+  ".cm-tooltip.cm-tooltip-autocomplete": {
     marginTop: "4px",
     marginLeft: "-3px"
   },
-  ".cm-tooltip-autocomplete > ul": {
+  ".cm-tooltip.cm-tooltip-autocomplete > ul": {
     maxHeight: "20em !important"
   },
-  ".cm-tooltip-autocomplete > ul > li": {},
-  ".cm-tooltip-autocomplete > ul > li[aria-selected]": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {},
+  ".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {},
   // TODO(burdon): Can we add a class prefix to avoid adding !important?
   ".cm-tooltip.cm-tooltip-autocomplete > ul > completion-section": {
     paddingLeft: "4px !important",
     borderBottom: "none !important",
     color: get2(tokens, "extend.colors.primary.500")
   },
+  ".cm-tooltip.cm-completionInfo": {
+    border: get2(tokens, "extend.colors.neutral.500"),
+    width: "360px !important",
+    margin: "-10px 1px 0 1px",
+    padding: "8px !important"
+  },
   ".cm-completionIcon": {
     display: "none"
   },
@@ -5004,6 +5010,12 @@ var MarkdownCustom = ({ onUpload } = {}) => {
 var MarkdownActions = () => {
   const { onAction, state: state2 } = useToolbarContext("MarkdownActions");
   const { t } = useTranslation(translationKey);
+  let toolTipKey = "comment label";
+  if (state2?.comment) {
+    toolTipKey = "selection overlaps existing comment label";
+  } else if (state2?.selection === false) {
+    toolTipKey = "select text to comment label";
+  }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ToolbarButton, {
     value: "comment",
     Icon: ChatText,
@@ -5012,7 +5024,7 @@ var MarkdownActions = () => {
       type: "comment"
     }),
     disabled: !state2 || state2.comment || !state2.selection
-  }, t("comment label")));
+  }, t(toolTipKey)));
 };
 var Toolbar = {
   Root: ToolbarRoot,