@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/EditLinkDialog.js

@@ -0,0 +1,161 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var EditLinkDialog_exports = {};
+__export(EditLinkDialog_exports, {
+  EditLinkDialog: () => EditLinkDialog,
+  EditLinkDialogInner: () => EditLinkDialogInner
+});
+module.exports = __toCommonJS(EditLinkDialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = require("react");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var Dialog = __toESM(require("./primitives/Dialog"));
+var import_Input = require("./primitives/Input");
+function validateUrl(url) {
+  if ((0, import_editor.isValidUrl)(url)) {
+    return { isValid: true, hasProtocol: true };
+  }
+  if ((0, import_editor.isValidUrl)("https://" + url)) {
+    return { isValid: true, hasProtocol: false };
+  }
+  return { isValid: false, hasProtocol: false };
+}
+const EditLinkDialog = (0, import_editor.track)(function EditLinkDialog2({ onClose }) {
+  const editor = (0, import_editor.useEditor)();
+  const selectedShape = editor.getOnlySelectedShape();
+  if (!(selectedShape && "url" in selectedShape.props && typeof selectedShape.props.url === "string")) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditLinkDialogInner, { onClose, selectedShape });
+});
+const EditLinkDialogInner = (0, import_editor.track)(function EditLinkDialogInner2({
+  onClose,
+  selectedShape
+}) {
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const rInput = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    requestAnimationFrame(() => rInput.current?.focus());
+  }, []);
+  const rInitialValue = (0, import_react.useRef)(selectedShape.props.url);
+  const [urlInputState, setUrlInputState] = (0, import_react.useState)(() => {
+    const urlValidResult = validateUrl(selectedShape.props.url);
+    const initialValue = urlValidResult.isValid === true ? urlValidResult.hasProtocol ? selectedShape.props.url : "https://" + selectedShape.props.url : "https://";
+    return {
+      actual: initialValue,
+      safe: initialValue,
+      valid: true
+    };
+  });
+  const handleChange = (0, import_react.useCallback)((rawValue) => {
+    const fixedRawValue = rawValue.replace(/https?:\/\/(https?:\/\/)/, (_match, arg1) => {
+      return arg1;
+    });
+    const urlValidResult = validateUrl(fixedRawValue);
+    const safeValue = urlValidResult.isValid === true ? urlValidResult.hasProtocol ? fixedRawValue : "https://" + fixedRawValue : "https://";
+    setUrlInputState({
+      actual: fixedRawValue,
+      safe: safeValue,
+      valid: urlValidResult.isValid
+    });
+  }, []);
+  const handleClear = (0, import_react.useCallback)(() => {
+    const onlySelectedShape = editor.getOnlySelectedShape();
+    if (!onlySelectedShape)
+      return;
+    editor.updateShapes([
+      { id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: "" } }
+    ]);
+    onClose();
+  }, [editor, onClose]);
+  const handleComplete = (0, import_react.useCallback)(() => {
+    const onlySelectedShape = editor.getOnlySelectedShape();
+    if (!onlySelectedShape)
+      return;
+    if (onlySelectedShape && "url" in onlySelectedShape.props) {
+      if (onlySelectedShape.props.url !== urlInputState.safe) {
+        editor.updateShapes([
+          {
+            id: onlySelectedShape.id,
+            type: onlySelectedShape.type,
+            props: { url: urlInputState.safe }
+          }
+        ]);
+      }
+    }
+    onClose();
+  }, [editor, onClose, urlInputState]);
+  const handleCancel = (0, import_react.useCallback)(() => {
+    onClose();
+  }, [onClose]);
+  if (!selectedShape) {
+    onClose();
+    return null;
+  }
+  const isRemoving = rInitialValue.current && !urlInputState.valid;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { children: msg("edit-link-dialog.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.CloseButton, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-edit-link-dialog", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Input.Input,
+        {
+          ref: rInput,
+          className: "tlui-edit-link-dialog__input",
+          label: "edit-link-dialog.url",
+          autofocus: true,
+          value: urlInputState.actual,
+          onValueChange: handleChange,
+          onComplete: handleComplete,
+          onCancel: handleCancel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: urlInputState.valid ? msg("edit-link-dialog.detail") : msg("edit-link-dialog.invalid-url") })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Footer, { className: "tlui-dialog__footer__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "normal", onClick: handleCancel, onTouchEnd: handleCancel, children: msg("edit-link-dialog.cancel") }),
+      isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "danger", onTouchEnd: handleClear, onClick: handleClear, children: msg("edit-link-dialog.clear") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.Button,
+        {
+          type: "primary",
+          disabled: !urlInputState.valid,
+          onTouchEnd: handleComplete,
+          onClick: handleComplete,
+          children: msg("edit-link-dialog.save")
+        }
+      )
+    ] })
+  ] });
+});
+//# sourceMappingURL=EditLinkDialog.js.map

package/dist-cjs/lib/ui/components/EditLinkDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/EditLinkDialog.tsx"],
+  "sourcesContent": ["import { TLBaseShape, isValidUrl, track, useEditor } from '@bigbluebutton/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { TLUiDialogProps } from '../hooks/useDialogsProvider'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport * as Dialog from './primitives/Dialog'\nimport { Input } from './primitives/Input'\n\n// A url can either be invalid, or valid with a protocol, or valid without a protocol.\n// For example, \"aol.com\" would be valid with a protocol ()\nfunction validateUrl(url: string) {\n\tif (isValidUrl(url)) {\n\t\treturn { isValid: true, hasProtocol: true }\n\t}\n\tif (isValidUrl('https://' + url)) {\n\t\treturn { isValid: true, hasProtocol: false }\n\t}\n\treturn { isValid: false, hasProtocol: false }\n}\n\ntype ShapeWithUrl = TLBaseShape<string, { url: string }>\n\nexport const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDialogProps) {\n\tconst editor = useEditor()\n\n\tconst selectedShape = editor.getOnlySelectedShape()\n\n\tif (\n\t\t!(selectedShape && 'url' in selectedShape.props && typeof selectedShape.props.url === 'string')\n\t) {\n\t\treturn null\n\t}\n\n\treturn <EditLinkDialogInner onClose={onClose} selectedShape={selectedShape as ShapeWithUrl} />\n})\n\nexport const EditLinkDialogInner = track(function EditLinkDialogInner({\n\tonClose,\n\tselectedShape,\n}: TLUiDialogProps & { selectedShape: ShapeWithUrl }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst rInput = useRef<HTMLInputElement>(null)\n\n\tuseEffect(() => {\n\t\trequestAnimationFrame(() => rInput.current?.focus())\n\t}, [])\n\n\tconst rInitialValue = useRef(selectedShape.props.url)\n\n\tconst [urlInputState, setUrlInputState] = useState(() => {\n\t\tconst urlValidResult = validateUrl(selectedShape.props.url)\n\n\t\tconst initialValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? selectedShape.props.url\n\t\t\t\t\t: 'https://' + selectedShape.props.url\n\t\t\t\t: 'https://'\n\n\t\treturn {\n\t\t\tactual: initialValue,\n\t\t\tsafe: initialValue,\n\t\t\tvalid: true,\n\t\t}\n\t})\n\n\tconst handleChange = useCallback((rawValue: string) => {\n\t\t// Just auto-correct double https:// from a bad paste.\n\t\tconst fixedRawValue = rawValue.replace(/https?:\\/\\/(https?:\\/\\/)/, (_match, arg1) => {\n\t\t\treturn arg1\n\t\t})\n\n\t\tconst urlValidResult = validateUrl(fixedRawValue)\n\n\t\tconst safeValue =\n\t\t\turlValidResult.isValid === true\n\t\t\t\t? urlValidResult.hasProtocol\n\t\t\t\t\t? fixedRawValue\n\t\t\t\t\t: 'https://' + fixedRawValue\n\t\t\t\t: 'https://'\n\n\t\tsetUrlInputState({\n\t\t\tactual: fixedRawValue,\n\t\t\tsafe: safeValue,\n\t\t\tvalid: urlValidResult.isValid,\n\t\t})\n\t}, [])\n\n\tconst handleClear = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\tif (!onlySelectedShape) return\n\t\teditor.updateShapes([\n\t\t\t{ id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: '' } },\n\t\t])\n\t\tonClose()\n\t}, [editor, onClose])\n\n\tconst handleComplete = useCallback(() => {\n\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\n\t\tif (!onlySelectedShape) return\n\n\t\t// ? URL is a magic value\n\t\tif (onlySelectedShape && 'url' in onlySelectedShape.props) {\n\t\t\t// Here would be a good place to validate the next shape\u2014would setting the empty\n\t\t\tif (onlySelectedShape.props.url !== urlInputState.safe) {\n\t\t\t\teditor.updateShapes([\n\t\t\t\t\t{\n\t\t\t\t\t\tid: onlySelectedShape.id,\n\t\t\t\t\t\ttype: onlySelectedShape.type,\n\t\t\t\t\t\tprops: { url: urlInputState.safe },\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t}\n\t\t}\n\t\tonClose()\n\t}, [editor, onClose, urlInputState])\n\n\tconst handleCancel = useCallback(() => {\n\t\tonClose()\n\t}, [onClose])\n\n\tif (!selectedShape) {\n\t\t// dismiss modal\n\t\tonClose()\n\t\treturn null\n\t}\n\n\t// Are we going from a valid state to an invalid state?\n\tconst isRemoving = rInitialValue.current && !urlInputState.valid\n\n\treturn (\n\t\t<>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>{msg('edit-link-dialog.title')}</Dialog.Title>\n\t\t\t\t<Dialog.CloseButton />\n\t\t\t</Dialog.Header>\n\t\t\t<Dialog.Body>\n\t\t\t\t<div className=\"tlui-edit-link-dialog\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tref={rInput}\n\t\t\t\t\t\tclassName=\"tlui-edit-link-dialog__input\"\n\t\t\t\t\t\tlabel=\"edit-link-dialog.url\"\n\t\t\t\t\t\tautofocus\n\t\t\t\t\t\tvalue={urlInputState.actual}\n\t\t\t\t\t\tonValueChange={handleChange}\n\t\t\t\t\t\tonComplete={handleComplete}\n\t\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{urlInputState.valid\n\t\t\t\t\t\t\t? msg('edit-link-dialog.detail')\n\t\t\t\t\t\t\t: msg('edit-link-dialog.invalid-url')}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Dialog.Body>\n\t\t\t<Dialog.Footer className=\"tlui-dialog__footer__actions\">\n\t\t\t\t<Button type=\"normal\" onClick={handleCancel} onTouchEnd={handleCancel}>\n\t\t\t\t\t{msg('edit-link-dialog.cancel')}\n\t\t\t\t</Button>\n\t\t\t\t{isRemoving ? (\n\t\t\t\t\t<Button type={'danger'} onTouchEnd={handleClear} onClick={handleClear}>\n\t\t\t\t\t\t{msg('edit-link-dialog.clear')}\n\t\t\t\t\t</Button>\n\t\t\t\t) : (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t\tdisabled={!urlInputState.valid}\n\t\t\t\t\t\tonTouchEnd={handleComplete}\n\t\t\t\t\t\tonClick={handleComplete}\n\t\t\t\t\t>\n\t\t\t\t\t\t{msg('edit-link-dialog.save')}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</Dialog.Footer>\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["EditLinkDialog", "EditLinkDialogInner"]
+}

package/dist-cjs/lib/ui/components/EmbedDialog.js

@@ -0,0 +1,152 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var EmbedDialog_exports = {};
+__export(EmbedDialog_exports, {
+  EmbedDialog: () => EmbedDialog
+});
+module.exports = __toCommonJS(EmbedDialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = require("react");
+var import_embeds = require("../../utils/embeds/embeds");
+var import_useAssetUrls = require("../hooks/useAssetUrls");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+var Dialog = __toESM(require("./primitives/Dialog"));
+var import_Icon = require("./primitives/Icon");
+var import_Input = require("./primitives/Input");
+const EmbedDialog = (0, import_editor.track)(function EmbedDialog2({ onClose }) {
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const assetUrls = (0, import_useAssetUrls.useAssetUrls)();
+  const [embedDefinition, setEmbedDefinition] = (0, import_react.useState)(null);
+  const [url, setUrl] = (0, import_react.useState)("");
+  const [embedInfoForUrl, setEmbedInfoForUrl] = (0, import_react.useState)(null);
+  const [showError, setShowError] = (0, import_react.useState)(false);
+  const rShowErrorTimeout = (0, import_react.useRef)(-1);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { children: embedDefinition ? `${msg("embed-dialog.title")} \u2014 ${embedDefinition.title}` : msg("embed-dialog.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.CloseButton, {})
+    ] }),
+    embedDefinition ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Body, { className: "tlui-embed-dialog__enter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Input.Input,
+          {
+            className: "tlui-embed-dialog__input",
+            label: "embed-dialog.url",
+            placeholder: "http://example.com",
+            autofocus: true,
+            onValueChange: (value) => {
+              setUrl(value);
+              const embedInfo = (0, import_embeds.getEmbedInfo)(value);
+              setEmbedInfoForUrl(
+                embedInfo && embedInfo.definition.type === embedDefinition.type ? embedInfo : null
+              );
+              setShowError(false);
+              clearTimeout(rShowErrorTimeout.current);
+              rShowErrorTimeout.current = setTimeout(() => setShowError(!embedInfo), 320);
+            }
+          }
+        ),
+        url === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-embed-dialog__instruction", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: msg("embed-dialog.instruction") }),
+          " ",
+          embedDefinition.instructionLink && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "a",
+            {
+              target: "_blank",
+              rel: "noopener noreferrer",
+              href: embedDefinition.instructionLink,
+              className: "tlui-embed-dialog__instruction__link",
+              children: [
+                "Learn more.",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: "external-link", small: true })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-embed-dialog__warning", children: showError ? msg("embed-dialog.invalid-url") : "\xA0" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Footer, { className: "tlui-dialog__footer__actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Button.Button,
+          {
+            type: "normal",
+            onClick: () => {
+              setEmbedDefinition(null);
+              setEmbedInfoForUrl(null);
+              setUrl("");
+            },
+            label: "embed-dialog.back"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-embed__spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "normal", label: "embed-dialog.cancel", onClick: onClose }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Button.Button,
+          {
+            type: "primary",
+            disabled: !embedInfoForUrl,
+            label: "embed-dialog.create",
+            onClick: () => {
+              if (!embedInfoForUrl)
+                return;
+              editor.putExternalContent({
+                type: "embed",
+                url,
+                point: editor.getViewportPageCenter(),
+                embed: embedInfoForUrl.definition
+              });
+              onClose();
+            }
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Body, { className: "tlui-embed-dialog__list", children: import_editor.EMBED_DEFINITIONS.map((def) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.Button,
+        {
+          type: "menu",
+          onClick: () => setEmbedDefinition(def),
+          label: (0, import_useTranslation.untranslated)(def.title),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "tlui-embed-dialog__item__image",
+              style: { backgroundImage: `url(${assetUrls.embedIcons[def.type]})` }
+            }
+          )
+        },
+        def.type
+      );
+    }) }) })
+  ] });
+});
+//# sourceMappingURL=EmbedDialog.js.map

package/dist-cjs/lib/ui/components/EmbedDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/EmbedDialog.tsx"],
+  "sourcesContent": ["import { EMBED_DEFINITIONS, EmbedDefinition, track, useEditor } from '@bigbluebutton/editor'\nimport { useRef, useState } from 'react'\nimport { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'\nimport { useAssetUrls } from '../hooks/useAssetUrls'\nimport { TLUiDialogProps } from '../hooks/useDialogsProvider'\nimport { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport * as Dialog from './primitives/Dialog'\nimport { Icon } from './primitives/Icon'\nimport { Input } from './primitives/Input'\n\nexport const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst assetUrls = useAssetUrls()\n\n\t// The embed definition for the user's selected embed (set by the user clicking on an embed in stage 1)\n\tconst [embedDefinition, setEmbedDefinition] = useState<null | EmbedDefinition>(null)\n\n\t// The URL that the user has typed into (in stage 2)\n\tconst [url, setUrl] = useState<string>('')\n\n\t// The embed info for the user's selected embed (based on the URL they've entered in stage 2)\n\tconst [embedInfoForUrl, setEmbedInfoForUrl] = useState<null | TLEmbedResult>(null)\n\n\t// Should we show the \"invalid URL\" error message?\n\tconst [showError, setShowError] = useState(false)\n\tconst rShowErrorTimeout = useRef<any>(-1)\n\n\treturn (\n\t\t<>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>\n\t\t\t\t\t{embedDefinition\n\t\t\t\t\t\t? `${msg('embed-dialog.title')} \u2014 ${embedDefinition.title}`\n\t\t\t\t\t\t: msg('embed-dialog.title')}\n\t\t\t\t</Dialog.Title>\n\t\t\t\t<Dialog.CloseButton />\n\t\t\t</Dialog.Header>\n\t\t\t{embedDefinition ? (\n\t\t\t\t<>\n\t\t\t\t\t<Dialog.Body className=\"tlui-embed-dialog__enter\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tclassName=\"tlui-embed-dialog__input\"\n\t\t\t\t\t\t\tlabel=\"embed-dialog.url\"\n\t\t\t\t\t\t\tplaceholder=\"http://example.com\"\n\t\t\t\t\t\t\tautofocus\n\t\t\t\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\t\t\t\t// Set the url that the user has typed into the input\n\t\t\t\t\t\t\t\tsetUrl(value)\n\n\t\t\t\t\t\t\t\t// Set the embed info to either the embed info for the URL (if\n\t\t\t\t\t\t\t\t// that embed info can be found and of a type that matches the\n\t\t\t\t\t\t\t\t// user's selected definition type)\n\t\t\t\t\t\t\t\tconst embedInfo = getEmbedInfo(value)\n\t\t\t\t\t\t\t\tsetEmbedInfoForUrl(\n\t\t\t\t\t\t\t\t\tembedInfo && embedInfo.definition.type === embedDefinition.type ? embedInfo : null\n\t\t\t\t\t\t\t\t)\n\n\t\t\t\t\t\t\t\t// We want to hide the error when the user enters text,\n\t\t\t\t\t\t\t\t// and then show an error after a short delay if the user\n\t\t\t\t\t\t\t\t// has not yet entered a valid URL.\n\t\t\t\t\t\t\t\tsetShowError(false)\n\t\t\t\t\t\t\t\tclearTimeout(rShowErrorTimeout.current)\n\t\t\t\t\t\t\t\trShowErrorTimeout.current = setTimeout(() => setShowError(!embedInfo), 320)\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{url === '' ? (\n\t\t\t\t\t\t\t<div className=\"tlui-embed-dialog__instruction\">\n\t\t\t\t\t\t\t\t<span>{msg('embed-dialog.instruction')}</span>{' '}\n\t\t\t\t\t\t\t\t{embedDefinition.instructionLink && (\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\thref={embedDefinition.instructionLink}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-embed-dialog__instruction__link\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tLearn more.\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"external-link\" small />\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tlui-embed-dialog__warning\">\n\t\t\t\t\t\t\t\t{showError ? msg('embed-dialog.invalid-url') : '\\xa0'}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Dialog.Body>\n\t\t\t\t\t<Dialog.Footer className=\"tlui-dialog__footer__actions\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetEmbedDefinition(null)\n\t\t\t\t\t\t\t\tsetEmbedInfoForUrl(null)\n\t\t\t\t\t\t\t\tsetUrl('')\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tlabel=\"embed-dialog.back\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"tlui-embed__spacer\" />\n\t\t\t\t\t\t<Button type=\"normal\" label=\"embed-dialog.cancel\" onClick={onClose} />\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t\t\tdisabled={!embedInfoForUrl}\n\t\t\t\t\t\t\tlabel=\"embed-dialog.create\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (!embedInfoForUrl) return\n\n\t\t\t\t\t\t\t\teditor.putExternalContent({\n\t\t\t\t\t\t\t\t\ttype: 'embed',\n\t\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\t\tpoint: editor.getViewportPageCenter(),\n\t\t\t\t\t\t\t\t\tembed: embedInfoForUrl.definition,\n\t\t\t\t\t\t\t\t})\n\n\t\t\t\t\t\t\t\tonClose()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Dialog.Footer>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Dialog.Body className=\"tlui-embed-dialog__list\">\n\t\t\t\t\t\t{EMBED_DEFINITIONS.map((def) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\t\t\tkey={def.type}\n\t\t\t\t\t\t\t\t\tonClick={() => setEmbedDefinition(def)}\n\t\t\t\t\t\t\t\t\tlabel={untranslated(def.title)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-embed-dialog__item__image\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ backgroundImage: `url(${assetUrls.embedIcons[def.type]})` }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Dialog.Body>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["EmbedDialog"]
+}

package/dist-cjs/lib/ui/components/FollowingIndicator.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var FollowingIndicator_exports = {};
+__export(FollowingIndicator_exports, {
+  FollowingIndicator: () => FollowingIndicator
+});
+module.exports = __toCommonJS(FollowingIndicator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+function FollowingIndicator() {
+  const editor = (0, import_editor.useEditor)();
+  const followingUserId = (0, import_editor.useValue)("follow", () => editor.getInstanceState().followingUserId, [
+    editor
+  ]);
+  if (!followingUserId)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FollowingIndicatorInner, { userId: followingUserId });
+}
+function FollowingIndicatorInner({ userId }) {
+  const presence = (0, import_editor.usePresence)(userId);
+  if (!presence)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-following-indicator", style: { borderColor: presence.color } });
+}
+//# sourceMappingURL=FollowingIndicator.js.map

package/dist-cjs/lib/ui/components/FollowingIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/FollowingIndicator.tsx"],
+  "sourcesContent": ["import { useEditor, usePresence, useValue } from '@bigbluebutton/editor'\n\nexport function FollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQQ;AARR,oBAAiD;AAE1C,SAAS,qBAAqB;AACpC,QAAM,aAAS,yBAAU;AACzB,QAAM,sBAAkB,wBAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC;AAAiB,WAAO;AAC7B,SAAO,4CAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,eAAW,2BAAY,MAAM;AACnC,MAAI,CAAC;AAAU,WAAO;AACtB,SAAO,4CAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/HTMLCanvas.js

@@ -0,0 +1,66 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var HTMLCanvas_exports = {};
+__export(HTMLCanvas_exports, {
+  HTMLCanvas: () => HTMLCanvas
+});
+module.exports = __toCommonJS(HTMLCanvas_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var React = __toESM(require("react"));
+const HTMLCanvas = (0, import_editor.track)(function HTMLCanvas2() {
+  const editor = (0, import_editor.useEditor)();
+  const rCanvas = React.useRef(null);
+  const camera = editor.getCamera();
+  const shapes = editor.getCurrentPageShapes();
+  if (rCanvas.current) {
+    const cvs = rCanvas.current;
+    const ctx = cvs.getContext("2d");
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, cvs.width, cvs.height);
+    const path = new Path2D();
+    ctx.translate(camera.x, camera.y);
+    for (const shape of shapes) {
+      const bounds = editor.getShapePageBounds(shape);
+      path.rect(bounds.minX, bounds.minY, bounds.width, bounds.height);
+    }
+    ctx.fillStyle = "#cccccc";
+    ctx.fill(path);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "canvas",
+    {
+      ref: rCanvas,
+      width: editor.getViewportScreenBounds().width,
+      height: editor.getViewportScreenBounds().height,
+      style: { width: "100%", height: "100%" }
+    }
+  );
+});
+//# sourceMappingURL=HTMLCanvas.js.map

package/dist-cjs/lib/ui/components/HTMLCanvas.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/HTMLCanvas.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport * as React from 'react'\n\n/** @internal */\nexport const HTMLCanvas = track(function HTMLCanvas() {\n\tconst editor = useEditor()\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null)\n\n\tconst camera = editor.getCamera()\n\tconst shapes = editor.getCurrentPageShapes()\n\tif (rCanvas.current) {\n\t\tconst cvs = rCanvas.current\n\t\tconst ctx = cvs.getContext('2d')!\n\t\tctx.resetTransform()\n\t\tctx.clearRect(0, 0, cvs.width, cvs.height)\n\n\t\tconst path = new Path2D()\n\n\t\tctx.translate(camera.x, camera.y)\n\n\t\tfor (const shape of shapes) {\n\t\t\tconst bounds = editor.getShapePageBounds(shape)!\n\t\t\tpath.rect(bounds.minX, bounds.minY, bounds.width, bounds.height)\n\t\t}\n\n\t\tctx.fillStyle = '#cccccc'\n\t\tctx.fill(path)\n\n\t\t// for (const shape of shapes) {\n\t\t// \tctx.save()\n\t\t// \tconst corners = editor.getPageCorners(shape)\n\t\t// \tcorners.forEach((corner) => dot(ctx, corner.x, corner.y, 'red'))\n\t\t// \tctx.restore()\n\t\t// }\n\t}\n\n\treturn (\n\t\t<canvas\n\t\t\tref={rCanvas}\n\t\t\twidth={editor.getViewportScreenBounds().width}\n\t\t\theight={editor.getViewportScreenBounds().height}\n\t\t\tstyle={{ width: '100%', height: '100%' }}\n\t\t/>\n\t)\n})\n\n// function dot(ctx: CanvasRenderingContext2D, x: number, y: number, color = '#000') {\n// \tctx.save()\n// \tctx.beginPath()\n// \tctx.ellipse(x, y, 4, 4, 0, 0, Math.PI * 2)\n// \tctx.fillStyle = color\n// \tctx.fill()\n// \tctx.restore()\n// }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCE;AArCF,oBAAiC;AACjC,YAAuB;AAGhB,MAAM,iBAAa,qBAAM,SAASA,cAAa;AACrD,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAU,MAAM,OAA0B,IAAI;AAEpD,QAAM,SAAS,OAAO,UAAU;AAChC,QAAM,SAAS,OAAO,qBAAqB;AAC3C,MAAI,QAAQ,SAAS;AACpB,UAAM,MAAM,QAAQ;AACpB,UAAM,MAAM,IAAI,WAAW,IAAI;AAC/B,QAAI,eAAe;AACnB,QAAI,UAAU,GAAG,GAAG,IAAI,OAAO,IAAI,MAAM;AAEzC,UAAM,OAAO,IAAI,OAAO;AAExB,QAAI,UAAU,OAAO,GAAG,OAAO,CAAC;AAEhC,eAAW,SAAS,QAAQ;AAC3B,YAAM,SAAS,OAAO,mBAAmB,KAAK;AAC9C,WAAK,KAAK,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO,OAAO,MAAM;AAAA,IAChE;AAEA,QAAI,YAAY;AAChB,QAAI,KAAK,IAAI;AAAA,EAQd;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,OAAO,OAAO,wBAAwB,EAAE;AAAA,MACxC,QAAQ,OAAO,wBAAwB,EAAE;AAAA,MACzC,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA;AAAA,EACxC;AAEF,CAAC;",
+  "names": ["HTMLCanvas"]
+}

package/dist-cjs/lib/ui/components/HelpMenu.js

@@ -0,0 +1,116 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var HelpMenu_exports = {};
+__export(HelpMenu_exports, {
+  HelpMenu: () => HelpMenu
+});
+module.exports = __toCommonJS(HelpMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+var React = __toESM(require("react"));
+var import_useHelpMenuSchema = require("../hooks/useHelpMenuSchema");
+var import_useMenuIsOpen = require("../hooks/useMenuIsOpen");
+var import_useReadonly = require("../hooks/useReadonly");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_LanguageMenu = require("./LanguageMenu");
+var import_Button = require("./primitives/Button");
+var M = __toESM(require("./primitives/DropdownMenu"));
+const HelpMenu = React.memo(function HelpMenu2() {
+  const container = (0, import_editor.useContainer)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const [isOpen, onOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)("help menu");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-help-menu", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_dropdown_menu.Root, { dir: "ltr", open: isOpen, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dropdown_menu.Trigger, { asChild: true, dir: "ltr", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.Button,
+      {
+        type: "help",
+        className: "tlui-button",
+        smallIcon: true,
+        title: msg("help-menu.title"),
+        icon: "question-mark"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_dropdown_menu.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_dropdown_menu.Content,
+      {
+        className: "tlui-menu",
+        side: "top",
+        sideOffset: 8,
+        align: "end",
+        alignOffset: 0,
+        collisionPadding: 4,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpMenuContent, {})
+      }
+    ) })
+  ] }) });
+});
+function HelpMenuContent() {
+  const menuSchema = (0, import_useHelpMenuSchema.useHelpMenuSchema)();
+  const isReadonly = (0, import_useReadonly.useReadonly)();
+  function getHelpMenuItem(item) {
+    if (!item)
+      return null;
+    if (isReadonly && !item.readonlyOk)
+      return null;
+    switch (item.type) {
+      case "custom": {
+        if (item.id === "LANGUAGE_MENU") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LanguageMenu.LanguageMenu, {}, "item");
+        }
+        break;
+      }
+      case "group": {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.Group, { size: "small", children: item.children.map(getHelpMenuItem) }, item.id);
+      }
+      case "submenu": {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(M.Sub, { id: `help menu ${item.id}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.SubTrigger, { label: item.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.SubContent, { children: item.children.map(getHelpMenuItem) })
+        ] }, item.id);
+      }
+      case "item": {
+        const { id, kbd, label, onSelect, icon } = item.actionItem;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          M.Item,
+          {
+            type: "menu",
+            kbd,
+            label,
+            onClick: () => onSelect("help-menu"),
+            iconLeft: icon
+          },
+          id
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: menuSchema.map(getHelpMenuItem) });
+}
+//# sourceMappingURL=HelpMenu.js.map

package/dist-cjs/lib/ui/components/HelpMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/HelpMenu.tsx"],
+  "sourcesContent": ["import { useContainer } from '@bigbluebutton/editor'\nimport { Content, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useHelpMenuSchema } from '../hooks/useHelpMenuSchema'\nimport { useMenuIsOpen } from '../hooks/useMenuIsOpen'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { LanguageMenu } from './LanguageMenu'\nimport { Button } from './primitives/Button'\nimport * as M from './primitives/DropdownMenu'\n\ninterface HelpMenuLink {\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\turl: string\n}\n\n/** @internal */\nexport interface HelpMenuProps {\n\tlinks?: HelpMenuLink[]\n}\n\n/** @internal */\nexport const HelpMenu = React.memo(function HelpMenu() {\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('help menu')\n\n\treturn (\n\t\t<div className=\"tlui-help-menu\">\n\t\t\t<Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t\t<Trigger asChild dir=\"ltr\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"help\"\n\t\t\t\t\t\tclassName=\"tlui-button\"\n\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\ttitle={msg('help-menu.title')}\n\t\t\t\t\t\ticon=\"question-mark\"\n\t\t\t\t\t/>\n\t\t\t\t</Trigger>\n\t\t\t\t<Portal container={container}>\n\t\t\t\t\t<Content\n\t\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\t\tside=\"top\"\n\t\t\t\t\t\tsideOffset={8}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\talignOffset={0}\n\t\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t\t>\n\t\t\t\t\t\t<HelpMenuContent />\n\t\t\t\t\t</Content>\n\t\t\t\t</Portal>\n\t\t\t</Root>\n\t\t</div>\n\t)\n})\n\nfunction HelpMenuContent() {\n\tconst menuSchema = useHelpMenuSchema()\n\n\tconst isReadonly = useReadonly()\n\n\tfunction getHelpMenuItem(item: TLUiMenuChild) {\n\t\tif (!item) return null\n\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\tswitch (item.type) {\n\t\t\tcase 'custom': {\n\t\t\t\tif (item.id === 'LANGUAGE_MENU') {\n\t\t\t\t\treturn <LanguageMenu key=\"item\" />\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'group': {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Group size=\"small\" key={item.id}>\n\t\t\t\t\t\t{item.children.map(getHelpMenuItem)}\n\t\t\t\t\t</M.Group>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'submenu': {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Sub id={`help menu ${item.id}`} key={item.id}>\n\t\t\t\t\t\t<M.SubTrigger label={item.label} />\n\t\t\t\t\t\t<M.SubContent>{item.children.map(getHelpMenuItem)}</M.SubContent>\n\t\t\t\t\t</M.Sub>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'item': {\n\t\t\t\tconst { id, kbd, label, onSelect, icon } = item.actionItem\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\tkbd={kbd}\n\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\tonClick={() => onSelect('help-menu')}\n\t\t\t\t\t\ticonLeft={icon}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn <>{menuSchema.map(getHelpMenuItem)}</>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCG;AAjCH,oBAA6B;AAC7B,iCAA+C;AAC/C,YAAuB;AAEvB,+BAAkC;AAClC,2BAA8B;AAC9B,yBAA4B;AAE5B,4BAA+B;AAE/B,0BAA6B;AAC7B,oBAAuB;AACvB,QAAmB;AAcZ,MAAM,WAAW,MAAM,KAAK,SAASA,YAAW;AACtD,QAAM,gBAAY,4BAAa;AAC/B,QAAM,UAAM,sCAAe;AAC3B,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,WAAW;AAExD,SACC,4CAAC,SAAI,WAAU,kBACd,uDAAC,mCAAK,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAChE;AAAA,gDAAC,sCAAQ,SAAO,MAAC,KAAI,OACpB;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAS;AAAA,QACT,OAAO,IAAI,iBAAiB;AAAA,QAC5B,MAAK;AAAA;AAAA,IACN,GACD;AAAA,IACA,4CAAC,qCAAO,WACP;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAM;AAAA,QACN,aAAa;AAAA,QACb,kBAAkB;AAAA,QAElB,sDAAC,mBAAgB;AAAA;AAAA,IAClB,GACD;AAAA,KACD,GACD;AAEF,CAAC;AAED,SAAS,kBAAkB;AAC1B,QAAM,iBAAa,4CAAkB;AAErC,QAAM,iBAAa,gCAAY;AAE/B,WAAS,gBAAgB,MAAqB;AAC7C,QAAI,CAAC;AAAM,aAAO;AAClB,QAAI,cAAc,CAAC,KAAK;AAAY,aAAO;AAE3C,YAAQ,KAAK,MAAM;AAAA,MAClB,KAAK,UAAU;AACd,YAAI,KAAK,OAAO,iBAAiB;AAChC,iBAAO,4CAAC,sCAAiB,MAAO;AAAA,QACjC;AACA;AAAA,MACD;AAAA,MACA,KAAK,SAAS;AACb,eACC,4CAAC,EAAE,OAAF,EAAQ,MAAK,SACZ,eAAK,SAAS,IAAI,eAAe,KADR,KAAK,EAEhC;AAAA,MAEF;AAAA,MACA,KAAK,WAAW;AACf,eACC,6CAAC,EAAE,KAAF,EAAM,IAAI,aAAa,KAAK,EAAE,IAC9B;AAAA,sDAAC,EAAE,YAAF,EAAa,OAAO,KAAK,OAAO;AAAA,UACjC,4CAAC,EAAE,YAAF,EAAc,eAAK,SAAS,IAAI,eAAe,GAAE;AAAA,aAFX,KAAK,EAG7C;AAAA,MAEF;AAAA,MACA,KAAK,QAAQ;AACZ,cAAM,EAAE,IAAI,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK;AAChD,eACC;AAAA,UAAC,EAAE;AAAA,UAAF;AAAA,YACA,MAAK;AAAA,YAEL;AAAA,YACA;AAAA,YACA,SAAS,MAAM,SAAS,WAAW;AAAA,YACnC,UAAU;AAAA;AAAA,UAJL;AAAA,QAKN;AAAA,MAEF;AAAA,IACD;AAAA,EACD;AAEA,SAAO,2EAAG,qBAAW,IAAI,eAAe,GAAE;AAC3C;",
+  "names": ["HelpMenu"]
+}