@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/DebugPanel.mjs

@@ -0,0 +1,315 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createShapeId,
+  debugFlags,
+  featureFlags,
+  hardResetEditor,
+  track,
+  uniqueId,
+  useEditor,
+  useValue
+} from "@bigbluebutton/editor";
+import * as React from "react";
+import { useDialogs } from "../hooks/useDialogsProvider.mjs";
+import { useToasts } from "../hooks/useToastsProvider.mjs";
+import { untranslated, useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import * as Dialog from "./primitives/Dialog.mjs";
+import * as DropdownMenu from "./primitives/DropdownMenu.mjs";
+let t = 0;
+function createNShapes(editor, n) {
+  const shapesToCreate = Array(n);
+  const cols = Math.floor(Math.sqrt(n));
+  for (let i = 0; i < n; i++) {
+    t++;
+    shapesToCreate[i] = {
+      id: createShapeId("box" + t),
+      type: "geo",
+      x: i % cols * 132,
+      y: Math.floor(i / cols) * 132
+    };
+  }
+  editor.batch(() => {
+    editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id));
+  });
+}
+const DebugPanel = React.memo(function DebugPanel2({
+  renderDebugMenuItems
+}) {
+  const msg = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-debug-panel", children: [
+    /* @__PURE__ */ jsx(CurrentState, {}),
+    /* @__PURE__ */ jsx(ShapeCount, {}),
+    /* @__PURE__ */ jsxs(DropdownMenu.Root, { id: "debug", children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { type: "icon", icon: "dots-horizontal", title: msg("debug-panel.more") }) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Content, { side: "top", align: "end", alignOffset: 0, children: /* @__PURE__ */ jsx(DebugMenuContent, { renderDebugMenuItems }) })
+    ] })
+  ] });
+});
+const CurrentState = track(function CurrentState2() {
+  const editor = useEditor();
+  return /* @__PURE__ */ jsx("div", { className: "tlui-debug-panel__current-state", children: editor.getPath() });
+});
+const ShapeCount = function ShapeCount2() {
+  const editor = useEditor();
+  const count = useValue("rendering shapes count", () => editor.getRenderingShapes().length, [
+    editor
+  ]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    count,
+    " Shapes"
+  ] });
+};
+const DebugMenuContent = track(function DebugMenuContent2({
+  renderDebugMenuItems
+}) {
+  const editor = useEditor();
+  const { addToast } = useToasts();
+  const { addDialog } = useDialogs();
+  const [error, setError] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            addToast({
+              id: uniqueId(),
+              title: "Something happened",
+              description: "Hey, attend to this thing over here. It might be important!",
+              keepOpen: true
+              // icon?: string
+              // title?: string
+              // description?: string
+              // actions?: TLUiToastAction[]
+            });
+            addToast({
+              id: uniqueId(),
+              title: "Something happened",
+              description: "Hey, attend to this thing over here. It might be important!",
+              keepOpen: true,
+              actions: [
+                {
+                  label: "Primary",
+                  type: "primary",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Normal",
+                  type: "normal",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Danger",
+                  type: "danger",
+                  onClick: () => {
+                  }
+                }
+              ]
+              // icon?: string
+              // title?: string
+              // description?: string
+              // actions?: TLUiToastAction[]
+            });
+            addToast({
+              id: uniqueId(),
+              title: "Something happened",
+              description: "Hey, attend to this thing over here. It might be important!",
+              keepOpen: true,
+              icon: "twitter",
+              actions: [
+                {
+                  label: "Primary",
+                  type: "primary",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Normal",
+                  type: "normal",
+                  onClick: () => {
+                  }
+                },
+                {
+                  label: "Danger",
+                  type: "danger",
+                  onClick: () => {
+                  }
+                }
+              ]
+            });
+          },
+          label: untranslated("Show toast")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            addDialog({
+              component: ({ onClose }) => /* @__PURE__ */ jsx(
+                ExampleDialog,
+                {
+                  displayDontShowAgain: true,
+                  onCancel: () => {
+                    onClose();
+                  },
+                  onContinue: () => {
+                    onClose();
+                  }
+                }
+              ),
+              onClose: () => {
+              }
+            });
+          },
+          label: untranslated("Show dialog")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => createNShapes(editor, 100),
+          label: untranslated("Create 100 shapes")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            function countDescendants({ children }) {
+              let count = 0;
+              if (!children.length)
+                return 0;
+              for (const el of [...children]) {
+                count++;
+                count += countDescendants(el);
+              }
+              return count;
+            }
+            const selectedShapes = editor.getSelectedShapes();
+            const shapes = selectedShapes.length === 0 ? editor.getRenderingShapes() : selectedShapes;
+            const elms = shapes.map(
+              (shape) => document.getElementById(shape.id).parentElement
+            );
+            let descendants = elms.length;
+            for (const elm of elms) {
+              descendants += countDescendants(elm);
+            }
+            window.alert(`Shapes ${shapes.length}, DOM nodes:${descendants}`);
+          },
+          label: untranslated("Count shapes / nodes")
+        }
+      ),
+      (() => {
+        if (error)
+          throw Error("oh no!");
+      })(),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            setError(true);
+          },
+          label: untranslated("Throw error")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          type: "menu",
+          onClick: () => {
+            hardResetEditor();
+          },
+          label: untranslated("Hard reset")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ jsx(DebugFlagToggle, { flag: debugFlags.debugSvg }),
+      /* @__PURE__ */ jsx(DebugFlagToggle, { flag: debugFlags.forceSrgb }),
+      /* @__PURE__ */ jsx(DebugFlagToggle, { flag: debugFlags.debugGeometry }),
+      /* @__PURE__ */ jsx(DebugFlagToggle, { flag: debugFlags.hideShapes })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenu.Group, { children: Object.values(featureFlags).map((flag) => {
+      return /* @__PURE__ */ jsx(DebugFlagToggle, { flag }, flag.name);
+    }) }),
+    renderDebugMenuItems?.()
+  ] });
+});
+function Toggle({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.CheckboxItem,
+    {
+      title: untranslated(label),
+      checked: value,
+      onSelect: () => onChange(!value),
+      children: /* @__PURE__ */ jsx("span", { className: "tlui-button__label", draggable: false, children: label })
+    }
+  );
+}
+const DebugFlagToggle = track(function DebugFlagToggle2({
+  flag,
+  onChange
+}) {
+  return (
+    /* @__PURE__ */ jsx(
+      Toggle,
+      {
+        label: flag.name.replace(/([a-z0-9])([A-Z])/g, (m) => `${m[0]} ${m[1].toLowerCase()}`).replace(/^[a-z]/, (m) => m.toUpperCase()),
+        value: flag.get(),
+        onChange: (newValue) => {
+          flag.set(newValue);
+          onChange?.(newValue);
+        }
+      }
+    )
+  );
+});
+function ExampleDialog({
+  title = "title",
+  body = "hello hello hello",
+  cancel = "Cancel",
+  confirm = "Continue",
+  displayDontShowAgain = false,
+  onCancel,
+  onContinue
+}) {
+  const [dontShowAgain, setDontShowAgain] = React.useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: title }),
+      /* @__PURE__ */ jsx(Dialog.CloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsx(Dialog.Body, { style: { maxWidth: 350 }, children: body }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { className: "tlui-dialog__footer__actions", children: [
+      displayDontShowAgain && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "normal",
+          onClick: () => setDontShowAgain(!dontShowAgain),
+          iconLeft: dontShowAgain ? "check" : "checkbox-empty",
+          style: { marginRight: "auto" },
+          children: `Don't show again`
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "normal", onClick: onCancel, children: cancel }),
+      /* @__PURE__ */ jsx(Button, { type: "primary", onClick: async () => onContinue(), children: confirm })
+    ] })
+  ] });
+}
+export {
+  DebugPanel
+};
+//# sourceMappingURL=DebugPanel.mjs.map

package/dist-esm/lib/ui/components/DebugPanel.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/DebugPanel.tsx"],
+  "sourcesContent": ["import {\n\tcreateShapeId,\n\tDebugFlag,\n\tdebugFlags,\n\tEditor,\n\tfeatureFlags,\n\thardResetEditor,\n\tTLShapePartial,\n\ttrack,\n\tuniqueId,\n\tuseEditor,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport * as React from 'react'\nimport { useDialogs } from '../hooks/useDialogsProvider'\nimport { useToasts } from '../hooks/useToastsProvider'\nimport { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport * as Dialog from './primitives/Dialog'\nimport * as DropdownMenu from './primitives/DropdownMenu'\n\nlet t = 0\n\nfunction createNShapes(editor: Editor, n: number) {\n\tconst shapesToCreate: TLShapePartial[] = Array(n)\n\tconst cols = Math.floor(Math.sqrt(n))\n\n\tfor (let i = 0; i < n; i++) {\n\t\tt++\n\t\tshapesToCreate[i] = {\n\t\t\tid: createShapeId('box' + t),\n\t\t\ttype: 'geo',\n\t\t\tx: (i % cols) * 132,\n\t\t\ty: Math.floor(i / cols) * 132,\n\t\t}\n\t}\n\n\teditor.batch(() => {\n\t\teditor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))\n\t})\n}\n\n/** @internal */\nexport const DebugPanel = React.memo(function DebugPanel({\n\trenderDebugMenuItems,\n}: {\n\trenderDebugMenuItems: (() => React.ReactNode) | null\n}) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<div className=\"tlui-debug-panel\">\n\t\t\t<CurrentState />\n\t\t\t<ShapeCount />\n\t\t\t<DropdownMenu.Root id=\"debug\">\n\t\t\t\t<DropdownMenu.Trigger>\n\t\t\t\t\t<Button type=\"icon\" icon=\"dots-horizontal\" title={msg('debug-panel.more')} />\n\t\t\t\t</DropdownMenu.Trigger>\n\t\t\t\t<DropdownMenu.Content side=\"top\" align=\"end\" alignOffset={0}>\n\t\t\t\t\t<DebugMenuContent renderDebugMenuItems={renderDebugMenuItems} />\n\t\t\t\t</DropdownMenu.Content>\n\t\t\t</DropdownMenu.Root>\n\t\t</div>\n\t)\n})\n\nconst CurrentState = track(function CurrentState() {\n\tconst editor = useEditor()\n\treturn <div className=\"tlui-debug-panel__current-state\">{editor.getPath()}</div>\n})\n\nconst ShapeCount = function ShapeCount() {\n\tconst editor = useEditor()\n\tconst count = useValue('rendering shapes count', () => editor.getRenderingShapes().length, [\n\t\teditor,\n\t])\n\n\treturn <div>{count} Shapes</div>\n}\n\nconst DebugMenuContent = track(function DebugMenuContent({\n\trenderDebugMenuItems,\n}: {\n\trenderDebugMenuItems: (() => React.ReactNode) | null\n}) {\n\tconst editor = useEditor()\n\tconst { addToast } = useToasts()\n\tconst { addDialog } = useDialogs()\n\tconst [error, setError] = React.useState<boolean>(false)\n\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu.Group>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\t\t\ttitle: 'Something happened',\n\t\t\t\t\t\t\tdescription: 'Hey, attend to this thing over here. It might be important!',\n\t\t\t\t\t\t\tkeepOpen: true,\n\t\t\t\t\t\t\t// icon?: string\n\t\t\t\t\t\t\t// title?: string\n\t\t\t\t\t\t\t// description?: string\n\t\t\t\t\t\t\t// actions?: TLUiToastAction[]\n\t\t\t\t\t\t})\n\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\t\t\ttitle: 'Something happened',\n\t\t\t\t\t\t\tdescription: 'Hey, attend to this thing over here. It might be important!',\n\t\t\t\t\t\t\tkeepOpen: true,\n\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Primary',\n\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Normal',\n\t\t\t\t\t\t\t\t\ttype: 'normal',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Danger',\n\t\t\t\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t// icon?: string\n\t\t\t\t\t\t\t// title?: string\n\t\t\t\t\t\t\t// description?: string\n\t\t\t\t\t\t\t// actions?: TLUiToastAction[]\n\t\t\t\t\t\t})\n\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\tid: uniqueId(),\n\t\t\t\t\t\t\ttitle: 'Something happened',\n\t\t\t\t\t\t\tdescription: 'Hey, attend to this thing over here. It might be important!',\n\t\t\t\t\t\t\tkeepOpen: true,\n\t\t\t\t\t\t\ticon: 'twitter',\n\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Primary',\n\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Normal',\n\t\t\t\t\t\t\t\t\ttype: 'normal',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tlabel: 'Danger',\n\t\t\t\t\t\t\t\t\ttype: 'danger',\n\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t})\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Show toast')}\n\t\t\t\t/>\n\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\taddDialog({\n\t\t\t\t\t\t\tcomponent: ({ onClose }) => (\n\t\t\t\t\t\t\t\t<ExampleDialog\n\t\t\t\t\t\t\t\t\tdisplayDontShowAgain\n\t\t\t\t\t\t\t\t\tonCancel={() => {\n\t\t\t\t\t\t\t\t\t\tonClose()\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonContinue={() => {\n\t\t\t\t\t\t\t\t\t\tonClose()\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tonClose: () => {\n\t\t\t\t\t\t\t\tvoid null\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t})\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Show dialog')}\n\t\t\t\t/>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => createNShapes(editor, 100)}\n\t\t\t\t\tlabel={untranslated('Create 100 shapes')}\n\t\t\t\t/>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tfunction countDescendants({ children }: HTMLElement) {\n\t\t\t\t\t\t\tlet count = 0\n\t\t\t\t\t\t\tif (!children.length) return 0\n\t\t\t\t\t\t\tfor (const el of [...(children as any)]) {\n\t\t\t\t\t\t\t\tcount++\n\t\t\t\t\t\t\t\tcount += countDescendants(el)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn count\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\n\t\t\t\t\t\tconst shapes =\n\t\t\t\t\t\t\tselectedShapes.length === 0 ? editor.getRenderingShapes() : selectedShapes\n\n\t\t\t\t\t\tconst elms = shapes.map(\n\t\t\t\t\t\t\t(shape) => (document.getElementById(shape.id) as HTMLElement)!.parentElement!\n\t\t\t\t\t\t)\n\n\t\t\t\t\t\tlet descendants = elms.length\n\n\t\t\t\t\t\tfor (const elm of elms) {\n\t\t\t\t\t\t\tdescendants += countDescendants(elm)\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\twindow.alert(`Shapes ${shapes.length}, DOM nodes:${descendants}`)\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Count shapes / nodes')}\n\t\t\t\t/>\n\t\t\t\t{(() => {\n\t\t\t\t\tif (error) throw Error('oh no!')\n\t\t\t\t})()}\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetError(true)\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Throw error')}\n\t\t\t\t/>\n\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\thardResetEditor()\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={untranslated('Hard reset')}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Group>\n\t\t\t<DropdownMenu.Group>\n\t\t\t\t<DebugFlagToggle flag={debugFlags.debugSvg} />\n\t\t\t\t<DebugFlagToggle flag={debugFlags.forceSrgb} />\n\t\t\t\t<DebugFlagToggle flag={debugFlags.debugGeometry} />\n\t\t\t\t<DebugFlagToggle flag={debugFlags.hideShapes} />\n\t\t\t</DropdownMenu.Group>\n\t\t\t<DropdownMenu.Group>\n\t\t\t\t{Object.values(featureFlags).map((flag) => {\n\t\t\t\t\treturn <DebugFlagToggle key={flag.name} flag={flag} />\n\t\t\t\t})}\n\t\t\t</DropdownMenu.Group>\n\t\t\t{renderDebugMenuItems?.()}\n\t\t</>\n\t)\n})\n\nfunction Toggle({\n\tlabel,\n\tvalue,\n\tonChange,\n}: {\n\tlabel: string\n\tvalue: boolean\n\tonChange: (newValue: boolean) => void\n}) {\n\treturn (\n\t\t<DropdownMenu.CheckboxItem\n\t\t\ttitle={untranslated(label)}\n\t\t\tchecked={value}\n\t\t\tonSelect={() => onChange(!value)}\n\t\t>\n\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t{label}\n\t\t\t</span>\n\t\t</DropdownMenu.CheckboxItem>\n\t)\n}\n\nconst DebugFlagToggle = track(function DebugFlagToggle({\n\tflag,\n\tonChange,\n}: {\n\tflag: DebugFlag<boolean>\n\tonChange?: (newValue: boolean) => void\n}) {\n\treturn (\n\t\t<Toggle\n\t\t\tlabel={flag.name\n\t\t\t\t.replace(/([a-z0-9])([A-Z])/g, (m) => `${m[0]} ${m[1].toLowerCase()}`)\n\t\t\t\t.replace(/^[a-z]/, (m) => m.toUpperCase())}\n\t\t\tvalue={flag.get()}\n\t\t\tonChange={(newValue) => {\n\t\t\t\tflag.set(newValue)\n\t\t\t\tonChange?.(newValue)\n\t\t\t}}\n\t\t/>\n\t)\n})\n\nfunction ExampleDialog({\n\ttitle = 'title',\n\tbody = 'hello hello hello',\n\tcancel = 'Cancel',\n\tconfirm = 'Continue',\n\tdisplayDontShowAgain = false,\n\tonCancel,\n\tonContinue,\n}: {\n\ttitle?: string\n\tbody?: string\n\tcancel?: string\n\tconfirm?: string\n\tdisplayDontShowAgain?: boolean\n\tonCancel: () => void\n\tonContinue: () => void\n}) {\n\tconst [dontShowAgain, setDontShowAgain] = React.useState(false)\n\n\treturn (\n\t\t<>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>{title}</Dialog.Title>\n\t\t\t\t<Dialog.CloseButton />\n\t\t\t</Dialog.Header>\n\t\t\t<Dialog.Body style={{ maxWidth: 350 }}>{body}</Dialog.Body>\n\t\t\t<Dialog.Footer className=\"tlui-dialog__footer__actions\">\n\t\t\t\t{displayDontShowAgain && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\tonClick={() => setDontShowAgain(!dontShowAgain)}\n\t\t\t\t\t\ticonLeft={dontShowAgain ? 'check' : 'checkbox-empty'}\n\t\t\t\t\t\tstyle={{ marginRight: 'auto' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{`Don't show again`}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t\t<Button type=\"normal\" onClick={onCancel}>\n\t\t\t\t\t{cancel}\n\t\t\t\t</Button>\n\t\t\t\t<Button type=\"primary\" onClick={async () => onContinue()}>\n\t\t\t\t\t{confirm}\n\t\t\t\t</Button>\n\t\t\t</Dialog.Footer>\n\t\t</>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["DebugPanel", "CurrentState", "ShapeCount", "DebugMenuContent", "DebugFlagToggle"]
+}

package/dist-esm/lib/ui/components/Dialogs.mjs

@@ -0,0 +1,34 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useContainer } from "@bigbluebutton/editor";
+import * as _Dialog from "@radix-ui/react-dialog";
+import React, { useCallback } from "react";
+import { useDialogs } from "../hooks/useDialogsProvider.mjs";
+const Dialog = ({ id, component: ModalContent, onClose }) => {
+  const { removeDialog } = useDialogs();
+  const container = useContainer();
+  const handleOpenChange = useCallback(
+    (isOpen) => {
+      if (!isOpen) {
+        if (onClose) {
+          try {
+            onClose();
+          } catch (err) {
+            console.warn(err);
+          }
+        }
+        removeDialog(id);
+      }
+    },
+    [id, onClose, removeDialog]
+  );
+  return /* @__PURE__ */ jsx(_Dialog.Root, { onOpenChange: handleOpenChange, defaultOpen: true, children: /* @__PURE__ */ jsx(_Dialog.Portal, { container, children: /* @__PURE__ */ jsx(_Dialog.Overlay, { dir: "ltr", className: "tlui-dialog__overlay", children: /* @__PURE__ */ jsx(_Dialog.Content, { dir: "ltr", className: "tlui-dialog__content", children: /* @__PURE__ */ jsx(ModalContent, { onClose: () => handleOpenChange(false) }) }) }) }) });
+};
+function _Dialogs() {
+  const { dialogs } = useDialogs();
+  return /* @__PURE__ */ jsx(Fragment, { children: dialogs.map((dialog) => /* @__PURE__ */ jsx(Dialog, { ...dialog }, dialog.id)) });
+}
+const Dialogs = React.memo(_Dialogs);
+export {
+  Dialogs
+};
+//# sourceMappingURL=Dialogs.mjs.map

package/dist-esm/lib/ui/components/Dialogs.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Dialogs.tsx"],
+  "sourcesContent": ["import { useContainer } from '@bigbluebutton/editor'\nimport * as _Dialog from '@radix-ui/react-dialog'\nimport React, { useCallback } from 'react'\nimport { TLUiDialog, useDialogs } from '../hooks/useDialogsProvider'\n\nconst Dialog = ({ id, component: ModalContent, onClose }: TLUiDialog) => {\n\tconst { removeDialog } = useDialogs()\n\n\tconst container = useContainer()\n\n\tconst handleOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\tif (onClose) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClose()\n\t\t\t\t\t} catch (err: any) {\n\t\t\t\t\t\tconsole.warn(err)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tremoveDialog(id)\n\t\t\t}\n\t\t},\n\t\t[id, onClose, removeDialog]\n\t)\n\n\treturn (\n\t\t<_Dialog.Root onOpenChange={handleOpenChange} defaultOpen>\n\t\t\t<_Dialog.Portal container={container}>\n\t\t\t\t<_Dialog.Overlay dir=\"ltr\" className=\"tlui-dialog__overlay\">\n\t\t\t\t\t<_Dialog.Content dir=\"ltr\" className=\"tlui-dialog__content\">\n\t\t\t\t\t\t<ModalContent onClose={() => handleOpenChange(false)} />\n\t\t\t\t\t</_Dialog.Content>\n\t\t\t\t</_Dialog.Overlay>\n\t\t\t</_Dialog.Portal>\n\t\t</_Dialog.Root>\n\t)\n}\n\nfunction _Dialogs() {\n\tconst { dialogs } = useDialogs()\n\n\treturn (\n\t\t<>\n\t\t\t{dialogs.map((dialog: TLUiDialog) => (\n\t\t\t\t<Dialog key={dialog.id} {...dialog} />\n\t\t\t))}\n\t\t</>\n\t)\n}\n\nexport const Dialogs = React.memo(_Dialogs)\n"],
+  "mappings": "AA+BM,SAYJ,UAZI;AA/BN,SAAS,oBAAoB;AAC7B,YAAY,aAAa;AACzB,OAAO,SAAS,mBAAmB;AACnC,SAAqB,kBAAkB;AAEvC,MAAM,SAAS,CAAC,EAAE,IAAI,WAAW,cAAc,QAAQ,MAAkB;AACxE,QAAM,EAAE,aAAa,IAAI,WAAW;AAEpC,QAAM,YAAY,aAAa;AAE/B,QAAM,mBAAmB;AAAA,IACxB,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,YAAI,SAAS;AACZ,cAAI;AACH,oBAAQ;AAAA,UACT,SAAS,KAAU;AAClB,oBAAQ,KAAK,GAAG;AAAA,UACjB;AAAA,QACD;AACA,qBAAa,EAAE;AAAA,MAChB;AAAA,IACD;AAAA,IACA,CAAC,IAAI,SAAS,YAAY;AAAA,EAC3B;AAEA,SACC,oBAAC,QAAQ,MAAR,EAAa,cAAc,kBAAkB,aAAW,MACxD,8BAAC,QAAQ,QAAR,EAAe,WACf,8BAAC,QAAQ,SAAR,EAAgB,KAAI,OAAM,WAAU,wBACpC,8BAAC,QAAQ,SAAR,EAAgB,KAAI,OAAM,WAAU,wBACpC,8BAAC,gBAAa,SAAS,MAAM,iBAAiB,KAAK,GAAG,GACvD,GACD,GACD,GACD;AAEF;AAEA,SAAS,WAAW;AACnB,QAAM,EAAE,QAAQ,IAAI,WAAW;AAE/B,SACC,gCACE,kBAAQ,IAAI,CAAC,WACb,oBAAC,UAAwB,GAAG,UAAf,OAAO,EAAgB,CACpC,GACF;AAEF;AAEO,MAAM,UAAU,MAAM,KAAK,QAAQ;",
+  "names": []
+}

package/dist-esm/lib/ui/components/DuplicateButton.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { track, useEditor } from "@bigbluebutton/editor";
+import { useActions } from "../hooks/useActions.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import { kbdStr } from "./primitives/shared.mjs";
+const DuplicateButton = track(function DuplicateButton2() {
+  const editor = useEditor();
+  const actions = useActions();
+  const msg = useTranslation();
+  const action = actions["duplicate"];
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: action.icon,
+      type: "icon",
+      onClick: () => action.onSelect("quick-actions"),
+      disabled: !(editor.isIn("select") && editor.getSelectedShapeIds().length > 0),
+      title: `${msg(action.label)} ${kbdStr(action.kbd)}`,
+      smallIcon: true
+    }
+  );
+});
+export {
+  DuplicateButton
+};
+//# sourceMappingURL=DuplicateButton.mjs.map

package/dist-esm/lib/ui/components/DuplicateButton.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/DuplicateButton.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const DuplicateButton = track(function DuplicateButton() {\n\tconst editor = useEditor()\n\tconst actions = useActions()\n\tconst msg = useTranslation()\n\tconst action = actions['duplicate']\n\n\treturn (\n\t\t<Button\n\t\t\ticon={action.icon}\n\t\t\ttype=\"icon\"\n\t\t\tonClick={() => action.onSelect('quick-actions')}\n\t\t\tdisabled={!(editor.isIn('select') && editor.getSelectedShapeIds().length > 0)}\n\t\t\ttitle={`${msg(action.label!)} ${kbdStr(action.kbd!)}`}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AAaE;AAbF,SAAS,OAAO,iBAAiB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,cAAc;AAEhB,MAAM,kBAAkB,MAAM,SAASA,mBAAkB;AAC/D,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,WAAW;AAC3B,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,QAAQ,WAAW;AAElC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,MAAK;AAAA,MACL,SAAS,MAAM,OAAO,SAAS,eAAe;AAAA,MAC9C,UAAU,EAAE,OAAO,KAAK,QAAQ,KAAK,OAAO,oBAAoB,EAAE,SAAS;AAAA,MAC3E,OAAO,GAAG,IAAI,OAAO,KAAM,CAAC,IAAI,OAAO,OAAO,GAAI,CAAC;AAAA,MACnD,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["DuplicateButton"]
+}

package/dist-esm/lib/ui/components/EditLinkDialog.mjs

@@ -0,0 +1,131 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isValidUrl, track, useEditor } from "@bigbluebutton/editor";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import * as Dialog from "./primitives/Dialog.mjs";
+import { Input } from "./primitives/Input.mjs";
+function validateUrl(url) {
+  if (isValidUrl(url)) {
+    return { isValid: true, hasProtocol: true };
+  }
+  if (isValidUrl("https://" + url)) {
+    return { isValid: true, hasProtocol: false };
+  }
+  return { isValid: false, hasProtocol: false };
+}
+const EditLinkDialog = track(function EditLinkDialog2({ onClose }) {
+  const editor = useEditor();
+  const selectedShape = editor.getOnlySelectedShape();
+  if (!(selectedShape && "url" in selectedShape.props && typeof selectedShape.props.url === "string")) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(EditLinkDialogInner, { onClose, selectedShape });
+});
+const EditLinkDialogInner = track(function EditLinkDialogInner2({
+  onClose,
+  selectedShape
+}) {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const rInput = useRef(null);
+  useEffect(() => {
+    requestAnimationFrame(() => rInput.current?.focus());
+  }, []);
+  const rInitialValue = useRef(selectedShape.props.url);
+  const [urlInputState, setUrlInputState] = 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 = 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 = useCallback(() => {
+    const onlySelectedShape = editor.getOnlySelectedShape();
+    if (!onlySelectedShape)
+      return;
+    editor.updateShapes([
+      { id: onlySelectedShape.id, type: onlySelectedShape.type, props: { url: "" } }
+    ]);
+    onClose();
+  }, [editor, onClose]);
+  const handleComplete = 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 = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  if (!selectedShape) {
+    onClose();
+    return null;
+  }
+  const isRemoving = rInitialValue.current && !urlInputState.valid;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: msg("edit-link-dialog.title") }),
+      /* @__PURE__ */ jsx(Dialog.CloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "tlui-edit-link-dialog", children: [
+      /* @__PURE__ */ jsx(
+        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__ */ jsx("div", { children: urlInputState.valid ? msg("edit-link-dialog.detail") : msg("edit-link-dialog.invalid-url") })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { className: "tlui-dialog__footer__actions", children: [
+      /* @__PURE__ */ jsx(Button, { type: "normal", onClick: handleCancel, onTouchEnd: handleCancel, children: msg("edit-link-dialog.cancel") }),
+      isRemoving ? /* @__PURE__ */ jsx(Button, { type: "danger", onTouchEnd: handleClear, onClick: handleClear, children: msg("edit-link-dialog.clear") }) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "primary",
+          disabled: !urlInputState.valid,
+          onTouchEnd: handleComplete,
+          onClick: handleComplete,
+          children: msg("edit-link-dialog.save")
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  EditLinkDialog,
+  EditLinkDialogInner
+};
+//# sourceMappingURL=EditLinkDialog.mjs.map

package/dist-esm/lib/ui/components/EditLinkDialog.mjs.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"]
+}