@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/ToolIcon.scss

@@ -0,0 +1,184 @@
+@import "open-color/open-color.scss";
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .ToolIcon {
+    border-radius: var(--border-radius-lg);
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+
+    &__hidden {
+      display: none !important;
+    }
+
+    @include toolbarButtonColorStates;
+  }
+
+  .ToolIcon--plain {
+    background-color: transparent;
+    .ToolIcon__icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .ToolIcon__icon {
+    box-sizing: border-box;
+    width: var(--default-button-size);
+    height: var(--default-button-size);
+    color: var(--icon-fill-color);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: var(--border-radius-lg);
+
+    & + .ToolIcon__label {
+      margin-inline-start: 0;
+    }
+
+    svg {
+      position: relative;
+      width: var(--default-icon-size);
+      height: var(--default-icon-size);
+      color: var(--icon-fill-color);
+    }
+  }
+
+  .ToolIcon__label {
+    display: flex;
+    align-items: center;
+    color: var(--icon-fill-color);
+    font-family: var(--ui-font);
+    margin: 0 0.8em;
+    text-overflow: ellipsis;
+
+    .Spinner {
+      margin-left: 0.6em;
+    }
+  }
+
+  .ToolIcon_size_small .ToolIcon__icon {
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.8em;
+  }
+
+  .ToolIcon_type_button,
+  .Modal .ToolIcon_type_button,
+  .ToolIcon_type_button {
+    padding: 0;
+    border: none;
+    margin: 0;
+    font-size: inherit;
+    background-color: initial;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
+
+    &.ToolIcon--selected {
+      background-color: var(--button-gray-2);
+
+      &:active {
+        background-color: var(--button-gray-3);
+      }
+    }
+
+    &:active {
+      background-color: var(--button-gray-3);
+    }
+
+    &--show {
+      visibility: visible;
+    }
+
+    &--hide {
+      display: none !important;
+    }
+  }
+
+  .ToolIcon_type_floating {
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    &:active {
+      background-color: transparent;
+    }
+
+    .ToolIcon__icon {
+      background-color: var(--button-gray-1);
+      &:hover {
+        background-color: var(--button-gray-2);
+      }
+      &:active {
+        background-color: var(--button-gray-3);
+      }
+
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+
+  .ToolIcon__keybinding {
+    position: absolute;
+    bottom: 2px;
+    right: 3px;
+    font-size: 0.625rem;
+    color: var(--keybinding-color);
+    font-family: var(--ui-font);
+    user-select: none;
+  }
+
+  .unlocked-icon {
+    :root[dir="ltr"] & {
+      left: 2px;
+    }
+
+    :root[dir="rtl"] & {
+      right: 2px;
+    }
+  }
+
+  .App-toolbar-container {
+    .ToolIcon__icon {
+      width: var(--lg-button-size);
+      height: var(--lg-button-size);
+
+      @media screen and (max-width: 450px) {
+        width: 1.8rem;
+        height: 1.8rem;
+      }
+      @media screen and (max-width: 379px) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      svg {
+        width: var(--lg-icon-size);
+        height: var(--lg-icon-size);
+      }
+    }
+
+    .ToolIcon__LaserPointer .ToolIcon__icon,
+    .ToolIcon__MagicButton .ToolIcon__icon {
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
+  }
+}

package/dist/packages/excalidraw/components/Toolbar.scss

@@ -0,0 +1,50 @@
+@import "open-color/open-color.scss";
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .App-toolbar {
+    &.zen-mode {
+      .ToolIcon__keybinding,
+      .HintViewer {
+        display: none;
+      }
+    }
+
+    &__divider {
+      width: 1px;
+      height: 1.5rem;
+      align-self: center;
+      background-color: var(--default-border-color);
+      margin: 0 0.25rem;
+
+      @include isMobile {
+        margin: 0;
+      }
+    }
+  }
+
+  .App-toolbar__extra-tools-trigger {
+    box-shadow: none;
+    border: 0;
+    background-color: transparent;
+
+    &:active {
+      background-color: var(--button-hover-bg);
+      box-shadow: 0 0 0 1px
+        var(--button-active-border, var(--color-primary-darkest)) inset;
+    }
+
+    &--selected,
+    &--selected:hover {
+      background: var(--color-primary-light);
+      color: var(--color-primary);
+    }
+  }
+
+  .App-toolbar__extra-tools-dropdown {
+    margin-top: 0.375rem;
+    right: 0;
+    min-width: 11.875rem;
+    z-index: 1;
+  }
+}

package/dist/packages/excalidraw/components/Tooltip.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Tooltip.scss";
+import { useEffect } from "react";
+export const getTooltipDiv = () => {
+    const existingDiv = document.querySelector(".excalidraw-tooltip");
+    if (existingDiv) {
+        return existingDiv;
+    }
+    const div = document.createElement("div");
+    document.body.appendChild(div);
+    div.classList.add("excalidraw-tooltip");
+    return div;
+};
+export const updateTooltipPosition = (tooltip, item, position = "bottom") => {
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const margin = 5;
+    let left = item.left + item.width / 2 - tooltipRect.width / 2;
+    if (left < 0) {
+        left = margin;
+    }
+    else if (left + tooltipRect.width >= viewportWidth) {
+        left = viewportWidth - tooltipRect.width - margin;
+    }
+    let top;
+    if (position === "bottom") {
+        top = item.top + item.height + margin;
+        if (top + tooltipRect.height >= viewportHeight) {
+            top = item.top - tooltipRect.height - margin;
+        }
+    }
+    else {
+        top = item.top - tooltipRect.height - margin;
+        if (top < 0) {
+            top = item.top + item.height + margin;
+        }
+    }
+    Object.assign(tooltip.style, {
+        top: `${top}px`,
+        left: `${left}px`,
+    });
+};
+const updateTooltip = (item, tooltip, label, long) => {
+    tooltip.classList.add("excalidraw-tooltip--visible");
+    tooltip.style.minWidth = long ? "50ch" : "10ch";
+    tooltip.style.maxWidth = long ? "50ch" : "15ch";
+    tooltip.textContent = label;
+    const itemRect = item.getBoundingClientRect();
+    updateTooltipPosition(tooltip, itemRect);
+};
+export const Tooltip = ({ children, label, long = false, style, disabled, }) => {
+    useEffect(() => {
+        return () => getTooltipDiv().classList.remove("excalidraw-tooltip--visible");
+    }, []);
+    if (disabled) {
+        return null;
+    }
+    return (_jsx("div", { className: "excalidraw-tooltip-wrapper", onPointerEnter: (event) => updateTooltip(event.currentTarget, getTooltipDiv(), label, long), onPointerLeave: () => getTooltipDiv().classList.remove("excalidraw-tooltip--visible"), style: style, children: children }));
+};

package/dist/packages/excalidraw/components/Tooltip.scss

@@ -0,0 +1,47 @@
+@import "../css/variables.module.scss";
+
+// container in body where the actual tooltip is appended to
+.excalidraw-tooltip {
+  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+    Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--ui-font);
+  position: fixed;
+  z-index: var(--zIndex-popup);
+
+  padding: 8px;
+  border-radius: 6px;
+  box-sizing: border-box;
+  pointer-events: none;
+  word-wrap: break-word;
+
+  background: $oc-black;
+
+  line-height: 1.5;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: $oc-white;
+
+  display: none;
+
+  &.excalidraw-tooltip--visible {
+    display: block;
+  }
+}
+
+// wraps the element we want to apply the tooltip to
+.excalidraw-tooltip-wrapper {
+  display: flex;
+}
+
+.excalidraw-tooltip-icon {
+  width: 0.9em;
+  height: 0.9em;
+  margin-left: 5px;
+  margin-top: 1px;
+  display: flex;
+
+  @include isMobile {
+    display: none;
+  }
+}

package/dist/packages/excalidraw/components/Trans.js

@@ -0,0 +1,139 @@
+import React from "react";
+import { useI18n } from "../i18n";
+// Used for splitting i18nKey into tokens in Trans component
+// Example:
+// "Please <link>click {{location}}</link> to continue.".split(SPLIT_REGEX).filter(Boolean)
+// produces
+// ["Please ", "<link>", "click ", "{{location}}", "</link>", " to continue."]
+const SPLIT_REGEX = /({{[\w-]+}})|(<[\w-]+>)|(<\/[\w-]+>)/g;
+// Used for extracting "location" from "{{location}}"
+const KEY_REGEXP = /{{([\w-]+)}}/;
+// Used for extracting "link" from "<link>"
+const TAG_START_REGEXP = /<([\w-]+)>/;
+// Used for extracting "link" from "</link>"
+const TAG_END_REGEXP = /<\/([\w-]+)>/;
+const getTransChildren = (format, props) => {
+    const stack = [
+        {
+            name: "",
+            children: [],
+        },
+    ];
+    format
+        .split(SPLIT_REGEX)
+        .filter(Boolean)
+        .forEach((match) => {
+        const tagStartMatch = match.match(TAG_START_REGEXP);
+        const tagEndMatch = match.match(TAG_END_REGEXP);
+        const keyMatch = match.match(KEY_REGEXP);
+        if (tagStartMatch !== null) {
+            // The match is <tag>. Set the tag name as the name if it's one of the
+            // props, e.g. for "Please <link>click the button</link> to continue"
+            // tagStartMatch[1] = "link" and props contain "link" then it will be
+            // pushed to stack.
+            const name = tagStartMatch[1];
+            if (props.hasOwnProperty(name)) {
+                stack.push({
+                    name,
+                    children: [],
+                });
+            }
+            else {
+                console.warn(`Trans: missed to pass in prop ${name} for interpolating ${format}`);
+            }
+        }
+        else if (tagEndMatch !== null) {
+            // If tag end match is found, this means we need to replace the content with
+            // its actual value in prop e.g. format = "Please <link>click the
+            // button</link> to continue", tagEndMatch is for "</link>", stack last item name =
+            // "link" and props.link = (el) => <a
+            // href="https://example.com">{el}</a> then its prop value will be
+            // pushed to "link"'s children so on DOM when rendering it's rendered as
+            // <a href="https://example.com">click the button</a>
+            const name = tagEndMatch[1];
+            if (name === stack[stack.length - 1].name) {
+                const item = stack.pop();
+                const itemChildren = React.createElement(React.Fragment, {}, ...item.children);
+                const fn = props[item.name];
+                if (typeof fn === "function") {
+                    stack[stack.length - 1].children.push(fn(itemChildren));
+                }
+            }
+            else {
+                console.warn(`Trans: unexpected end tag ${match} for interpolating ${format}`);
+            }
+        }
+        else if (keyMatch !== null) {
+            // The match is for {{key}}. Check if the key is present in props and set
+            // the prop value as children of last stack item e.g. format = "Hello
+            // {{name}}", key = "name" and props.name = "Excalidraw" then its prop
+            // value will be pushed to "name"'s children so it's rendered on DOM as
+            // "Hello Excalidraw"
+            const name = keyMatch[1];
+            if (props.hasOwnProperty(name)) {
+                stack[stack.length - 1].children.push(props[name]);
+            }
+            else {
+                console.warn(`Trans: key ${name} not in props for interpolating ${format}`);
+            }
+        }
+        else {
+            // If none of cases match means we just need to push the string
+            // to stack eg - "Hello {{name}} Whats up?" "Hello", "Whats up" will be pushed
+            stack[stack.length - 1].children.push(match);
+        }
+    });
+    if (stack.length !== 1) {
+        console.warn(`Trans: stack not empty for interpolating ${format}`);
+    }
+    return stack[0].children;
+};
+/*
+Trans component is used for translating JSX.
+
+```json
+{
+  "example1": "Hello {{audience}}",
+  "example2": "Please <link>click the button</link> to continue.",
+  "example3": "Please <link>click {{location}}</link> to continue.",
+  "example4": "Please <link>click <bold>{{location}}</bold></link> to continue.",
+}
+```
+
+```jsx
+<Trans i18nKey="example1" audience="world" />
+
+<Trans
+  i18nKey="example2"
+  connectLink={(el) => <a href="https://example.com">{el}</a>}
+/>
+
+<Trans
+  i18nKey="example3"
+  connectLink={(el) => <a href="https://example.com">{el}</a>}
+  location="the button"
+/>
+
+<Trans
+  i18nKey="example4"
+  connectLink={(el) => <a href="https://example.com">{el}</a>}
+  location="the button"
+  bold={(el) => <strong>{el}</strong>}
+/>
+```
+
+Output:
+
+```html
+Hello world
+Please <a href="https://example.com">click the button</a> to continue.
+Please <a href="https://example.com">click the button</a> to continue.
+Please <a href="https://example.com">click <strong>the button</strong></a> to continue.
+```
+*/
+const Trans = ({ i18nKey, children, ...props }) => {
+    const { t } = useI18n();
+    // This is needed to avoid unique key error in list which gets rendered from getTransChildren
+    return React.createElement(React.Fragment, {}, ...getTransChildren(t(i18nKey), props));
+};
+export default Trans;

package/dist/packages/excalidraw/components/UserList.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./UserList.scss";
+import React from "react";
+import clsx from "clsx";
+import { Tooltip } from "./Tooltip";
+import { useExcalidrawActionManager } from "./App";
+import * as Popover from "@radix-ui/react-popover";
+import { Island } from "./Island";
+import { searchIcon } from "./icons";
+import { t } from "../i18n";
+import { isShallowEqual } from "../utils";
+const FIRST_N_AVATARS = 3;
+const SHOW_COLLABORATORS_FILTER_AT = 8;
+const ConditionalTooltipWrapper = ({ shouldWrap, children, clientId, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children }, clientId)) : (_jsx(React.Fragment, { children: children }, clientId));
+const renderCollaborator = ({ actionManager, collaborator, clientId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
+    const data = {
+        clientId,
+        collaborator,
+        withName,
+        isBeingFollowed,
+    };
+    const avatarJSX = actionManager.renderAction("goToCollaborator", data);
+    return (_jsx(ConditionalTooltipWrapper, { clientId: clientId, username: collaborator.username, shouldWrap: shouldWrapWithTooltip, children: avatarJSX }, clientId));
+};
+const collaboratorComparatorKeys = [
+    "avatarUrl",
+    "id",
+    "socketId",
+    "username",
+];
+export const UserList = React.memo(({ className, mobile, collaborators, userToFollow }) => {
+    const actionManager = useExcalidrawActionManager();
+    const uniqueCollaboratorsMap = new Map();
+    collaborators.forEach((collaborator, socketId) => {
+        const userId = (collaborator.id || socketId);
+        uniqueCollaboratorsMap.set(
+        // filter on user id, else fall back on unique socketId
+        userId, { ...collaborator, socketId });
+    });
+    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(([_, collaborator]) => collaborator.username?.trim());
+    const [searchTerm, setSearchTerm] = React.useState("");
+    if (uniqueCollaboratorsArray.length === 0) {
+        return null;
+    }
+    const searchTermNormalized = searchTerm.trim().toLowerCase();
+    const filteredCollaborators = searchTermNormalized
+        ? uniqueCollaboratorsArray.filter(([, collaborator]) => collaborator.username?.toLowerCase().includes(searchTerm))
+        : uniqueCollaboratorsArray;
+    const firstNCollaborators = uniqueCollaboratorsArray.slice(0, FIRST_N_AVATARS);
+    const firstNAvatarsJSX = firstNCollaborators.map(([clientId, collaborator]) => renderCollaborator({
+        actionManager,
+        collaborator,
+        clientId,
+        shouldWrapWithTooltip: true,
+        isBeingFollowed: collaborator.socketId === userToFollow,
+    }));
+    return mobile ? (_jsx("div", { className: clsx("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(([clientId, collaborator]) => renderCollaborator({
+            actionManager,
+            collaborator,
+            clientId,
+            shouldWrapWithTooltip: true,
+            isBeingFollowed: collaborator.socketId === userToFollow,
+        })) })) : (_jsxs("div", { className: clsx("UserList", className), children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (_jsxs(Popover.Root, { onOpenChange: (isOpen) => {
+                    if (!isOpen) {
+                        setSearchTerm("");
+                    }
+                }, children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - FIRST_N_AVATARS] }), _jsx(Popover.Content, { style: {
+                            zIndex: 2,
+                            width: "13rem",
+                            textAlign: "left",
+                        }, align: "end", sideOffset: 10, children: _jsxs(Island, { style: { overflow: "hidden" }, children: [uniqueCollaboratorsArray.length >=
+                                    SHOW_COLLABORATORS_FILTER_AT && (_jsxs("div", { className: "UserList__search-wrapper", children: [searchIcon, _jsx("input", { className: "UserList__search", type: "text", placeholder: t("userList.search.placeholder"), value: searchTerm, onChange: (e) => {
+                                                setSearchTerm(e.target.value);
+                                            } })] })), _jsxs("div", { className: "dropdown-menu UserList__collaborators", children: [filteredCollaborators.length === 0 && (_jsx("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") })), _jsx("div", { className: "UserList__hint", children: t("userList.hint.text") }), filteredCollaborators.map(([clientId, collaborator]) => renderCollaborator({
+                                            actionManager,
+                                            collaborator,
+                                            clientId,
+                                            withName: true,
+                                            isBeingFollowed: collaborator.socketId === userToFollow,
+                                        }))] })] }) })] }))] }));
+}, (prev, next) => {
+    if (prev.collaborators.size !== next.collaborators.size ||
+        prev.mobile !== next.mobile ||
+        prev.className !== next.className ||
+        prev.userToFollow !== next.userToFollow) {
+        return false;
+    }
+    for (const [socketId, collaborator] of prev.collaborators) {
+        const nextCollaborator = next.collaborators.get(socketId);
+        if (!nextCollaborator ||
+            !isShallowEqual(collaborator, nextCollaborator, collaboratorComparatorKeys)) {
+            return false;
+        }
+    }
+    return true;
+});