@examplary/ui 1.47.0 → 1.49.0

package/dist/components/ui/button.js

@@ -25,7 +25,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils";
-var buttonVariants = cva("inline-flex items-center text-text dark:text-white cursor-pointer justify-center whitespace-nowrap rounded-full font-base ring-offset-white transition-all gap-1.5 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", {
+var buttonVariants = cva("inline-flex items-center select-none text-text dark:text-white cursor-pointer justify-center whitespace-nowrap rounded-full font-base ring-offset-white transition-all gap-1.5 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         variant: {
             default: "bg-nav border border-black dark:bg-zinc-800 dark:border-white hover:shadow-light",

package/dist/components/ui/popover.js

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { cn } from "../../utils";
+import { cn } from "../../utils.js";
 export var Popover = PopoverPrimitive.Root;
 export var PopoverTrigger = PopoverPrimitive.Trigger;
 export var PopoverContent = React.forwardRef(function (_a, ref) {

package/dist/components/web-components/content-reference.d.ts

@@ -0,0 +1,11 @@
+export declare class ContentReferenceElement extends HTMLElement {
+    private targetEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private timeout;
+    private handleClick;
+    private handleKeyDown;
+    private handleEnter;
+    private handleLeave;
+    private restore;
+}

package/dist/components/web-components/content-reference.js

@@ -0,0 +1,111 @@
+"use client";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var ContentReferenceElement = /** @class */ (function (_super) {
+    __extends(ContentReferenceElement, _super);
+    function ContentReferenceElement() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.targetEl = null;
+        _this.timeout = null;
+        _this.handleClick = function () {
+            _this.handleEnter();
+            if (_this.timeout)
+                clearTimeout(_this.timeout);
+            _this.timeout = setTimeout(function () {
+                _this.timeout = null;
+                _this.restore();
+            }, 2000);
+        };
+        _this.handleKeyDown = function (event) {
+            if (event.key !== "Enter" && event.key !== " ")
+                return;
+            event.preventDefault();
+            _this.handleClick();
+        };
+        _this.handleEnter = function () {
+            if (_this.targetEl)
+                return;
+            var parent = _this.closest("[data-content-reference-target]");
+            var targetId = parent === null || parent === void 0 ? void 0 : parent.dataset.contentReferenceTarget;
+            if (!targetId)
+                return;
+            var target = document.getElementById(targetId);
+            if (!target)
+                return;
+            var quote = _this.getAttribute("quote");
+            if (!quote)
+                return;
+            var html = target.innerHTML;
+            if (!html.includes(quote))
+                return;
+            _this.targetEl = target;
+            target.innerHTML = html.replace(quote, "<mark class=\"content-reference-highlight\">".concat(quote, "</mark>"));
+        };
+        _this.handleLeave = function () {
+            if (_this.timeout)
+                return;
+            _this.restore();
+        };
+        return _this;
+    }
+    ContentReferenceElement.prototype.connectedCallback = function () {
+        if (!this.hasAttribute("tabindex"))
+            this.tabIndex = 0;
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "button");
+        if (!this.hasAttribute("aria-label")) {
+            this.setAttribute("aria-label", this.getAttribute("quote") || "Content reference");
+        }
+        this.addEventListener("mouseenter", this.handleEnter);
+        this.addEventListener("mouseleave", this.handleLeave);
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("touchstart", this.handleClick);
+        this.addEventListener("keydown", this.handleKeyDown);
+        this.addEventListener("focus", this.handleEnter);
+        this.addEventListener("blur", this.handleLeave);
+    };
+    ContentReferenceElement.prototype.disconnectedCallback = function () {
+        this.removeEventListener("mouseenter", this.handleEnter);
+        this.removeEventListener("mouseleave", this.handleLeave);
+        this.removeEventListener("click", this.handleClick);
+        this.removeEventListener("touchstart", this.handleClick);
+        this.removeEventListener("keydown", this.handleKeyDown);
+        this.removeEventListener("focus", this.handleEnter);
+        this.removeEventListener("blur", this.handleLeave);
+        this.restore();
+    };
+    ContentReferenceElement.prototype.restore = function () {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+        if (!this.targetEl)
+            return;
+        var highlights = this.targetEl.querySelectorAll("mark.content-reference-highlight");
+        highlights.forEach(function (highlight) {
+            var parent = highlight.parentNode;
+            if (!parent)
+                return;
+            while (highlight.firstChild) {
+                parent.insertBefore(highlight.firstChild, highlight);
+            }
+            parent.removeChild(highlight);
+        });
+        this.targetEl = null;
+    };
+    return ContentReferenceElement;
+}(HTMLElement));
+export { ContentReferenceElement };

package/dist/components/web-components/file-attachment.d.ts

@@ -1,12 +1,3 @@
-import React from "react";
-interface FileAttachmentProps {
-    title: string;
-    type?: string;
-    href: string;
-    className?: string;
-}
-export declare const FileAttachmentView: React.FC<FileAttachmentProps>;
 export declare class FileAttachmentElement extends HTMLElement {
     connectedCallback(): void;
 }
-export {};

package/dist/components/web-components/file-attachment.js

@@ -14,15 +14,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FileIcon } from "lucide-react";
-import { createRoot } from "react-dom/client";
 import { cn } from "../../utils";
-export var FileAttachmentView = function (_a) {
-    var title = _a.title, href = _a.href, className = _a.className;
-    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: cn("flex items-center gap-1.5 mt-1.5 py-1 rounded-base text-sm font-medium", className), children: [_jsx(FileIcon, { className: "size-4 flex-shrink-0" }), _jsx("span", { className: "truncate", children: title })] }));
-};
-// Custom element for use in rich text editors
 var FileAttachmentElement = /** @class */ (function (_super) {
     __extends(FileAttachmentElement, _super);
     function FileAttachmentElement() {
@@ -30,11 +22,28 @@ var FileAttachmentElement = /** @class */ (function (_super) {
     }
     FileAttachmentElement.prototype.connectedCallback = function () {
         var title = this.getAttribute("title") || "File";
-        var type = this.getAttribute("type") || "";
         var href = this.getAttribute("href") || "#";
         // Create React root and render component
-        var root = createRoot(this);
-        root.render(_jsx(FileAttachmentView, { title: title, type: type, href: href }));
+        var a = document.createElement("a");
+        a.href = href;
+        a.target = "_blank";
+        a.rel = "noopener noreferrer";
+        a.className =
+            "inline-flex items-center gap-1.5 mt-1.5 py-1 px-2 rounded-lg text-sm no-underline! font-medium max-w-full bg-blue-100/70 hover:bg-blue-100 text-blue-800 transition";
+        // If one of the parent elements is .ProseMirror, we want to disable pointer events on the link, since that is annoying in the editor
+        if (this.closest(".ProseMirror")) {
+            a.className = cn(a.className, "pointer-events-none");
+        }
+        var icon = document.createElement("span");
+        icon.className = "size-4 flex-shrink-0";
+        icon.innerHTML =
+            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="size-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></svg>';
+        a.appendChild(icon);
+        var text = document.createElement("span");
+        text.className = "truncate";
+        text.textContent = title;
+        a.appendChild(text);
+        this.replaceChildren(a);
     };
     return FileAttachmentElement;
 }(HTMLElement));

package/dist/components/web-components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./file-attachment";
 export * from "./page-clipping";
 export * from "./inline-math";
+export * from "./content-reference";
 export declare const registerWebComponents: () => void;

package/dist/components/web-components/index.js

@@ -1,10 +1,12 @@
 "use client";
+import { ContentReferenceElement } from "./content-reference";
 import { FileAttachmentElement } from "./file-attachment";
 import { InlineMathElement } from "./inline-math";
 import { PageClippingElement } from "./page-clipping";
 export * from "./file-attachment";
 export * from "./page-clipping";
 export * from "./inline-math";
+export * from "./content-reference";
 export var registerWebComponents = function () {
     if (typeof window !== "undefined" && !customElements.get("page-clipping")) {
         customElements.define("page-clipping", PageClippingElement);
@@ -15,4 +17,8 @@ export var registerWebComponents = function () {
     if (typeof window !== "undefined" && !customElements.get("inline-math")) {
         customElements.define("inline-math", InlineMathElement);
     }
+    if (typeof window !== "undefined" &&
+        !customElements.get("content-reference")) {
+        customElements.define("content-reference", ContentReferenceElement);
+    }
 };

package/dist/components/web-components/page-clipping.d.ts

@@ -1,4 +1,3 @@
-export declare const PageClippingView: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare class PageClippingElement extends HTMLElement {
     connectedCallback(): void;
 }

package/dist/components/web-components/page-clipping.js

@@ -14,12 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createRoot } from "react-dom/client";
-export var PageClippingView = function (props) {
-    return (_jsx("img", { src: "https://page-clippings.examplary.ai/?".concat(new URLSearchParams(props)), alt: "Page Clipping" }));
-};
-// Custom element for use in rich text editors
 var PageClippingElement = /** @class */ (function (_super) {
     __extends(PageClippingElement, _super);
     function PageClippingElement() {
@@ -32,9 +26,11 @@ var PageClippingElement = /** @class */ (function (_super) {
         var y = this.getAttribute("y") || "";
         var width = this.getAttribute("width") || "";
         var height = this.getAttribute("height") || "";
-        // Create React root and render component
-        var root = createRoot(this);
-        root.render(_jsx(PageClippingView, { url: url, page: page, x: x, y: y, width: width, height: height }));
+        var params = new URLSearchParams({ url: url, page: page, x: x, y: y, width: width, height: height });
+        var img = document.createElement("img");
+        img.src = "https://page-clippings.examplary.ai/?".concat(params.toString());
+        img.alt = "Page clipping";
+        this.replaceChildren(img);
     };
     return PageClippingElement;
 }(HTMLElement));