@dxos/react-ui-editor 0.4.5-main.f10c180 → 0.4.5-next.ea4f804

package/dist/lib/browser/index.mjs

@@ -1,3 +1,27 @@
+// packages/ui/react-ui-editor/src/translations.ts
+var translationKey = "react-ui-editor";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "strong label": "Bold",
+        "emphasis label": "Italics",
+        "strikethrough label": "Strikethrough",
+        "code label": "Code",
+        "link label": "Link",
+        "list-bullet label": "Bullet list",
+        "list-ordered label": "Numbered list",
+        "list-task label": "Task list",
+        "blockquote label": "Block quote",
+        "codeblock label": "Code block",
+        "comment label": "Create comment",
+        "heading label": "Heading level",
+        "table label": "Create table"
+      }
+    }
+  }
+];
+
 // packages/ui/react-ui-editor/src/index.ts
 import { keymap as keymap8 } from "@codemirror/view";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
@@ -3979,32 +4003,12 @@ var defaultMarkdownSlots = {
 import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2 from "react";
-import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, useTranslation } from "@dxos/react-ui";
+import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-editor/src/translations.ts
-var translationKey = "react-ui-editor";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "strong label": "Strong",
-        "emphasis label": "Emphasis",
-        "strikethrough label": "Strike-through",
-        "code label": "Code",
-        "list-bullet label": "Bullet list",
-        "list-ordered label": "Numbered list",
-        "list-task label": "Task list",
-        "blockquote label": "Block quote",
-        "codeblock label": "Code block",
-        "comment label": "Create comment",
-        "heading label": "Heading level"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
 var HeadingIcons = {
   "0": Paragraph,
   "1": TextHOne,
@@ -4033,7 +4037,9 @@ var ToolbarRoot = ({ children, onAction, classNames, state }) => {
 var buttonStyles = "min-bs-0 p-2";
 var iconStyles = getSize(5);
 var ToolbarButton = ({ Icon, children, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
@@ -4041,7 +4047,7 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: iconStyles
   }), /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, children));
+  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   role: "separator",
@@ -4054,13 +4060,15 @@ var MarkdownHeading = () => {
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
-  return /* @__PURE__ */ React2.createElement(Select.Root, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Select.Root, {
     disabled: value === null,
     value: value ?? "0",
     onValueChange: (value2) => onAction?.({
       type: "heading",
       data: parseInt(value2)
     })
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
@@ -4070,7 +4078,7 @@ var MarkdownHeading = () => {
     className: "sr-only"
   }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
     className: iconStyles
-  }))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+  })))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: "0"
   }, /* @__PURE__ */ React2.createElement(Paragraph, {
     className: iconStyles
@@ -4096,7 +4104,7 @@ var MarkdownHeading = () => {
     className: iconStyles
   }), level === 6 && /* @__PURE__ */ React2.createElement(TextHSix, {
     className: iconStyles
-  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
+  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var markdownStyles = [
   {
@@ -4215,7 +4223,9 @@ var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragmen
 var MarkdownExtended = () => {
   const { onAction } = useToolbarContext("MarkdownStyles");
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     variant: "ghost",
     "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
@@ -4226,7 +4236,7 @@ var MarkdownExtended = () => {
     className: iconStyles
   }), /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, t("comment label")));
+  }, t("comment label")))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("comment label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var Toolbar = {
   Root: ToolbarRoot,
@@ -4677,6 +4687,7 @@ export {
   toggleStrikethrough,
   toggleStrong,
   toggleStyle,
+  translations_default as translations,
   typewriter,
   useActionHandler,
   useComments,