@rowsncolumns/ui 15.0.38

package/dist/esm/editor-pm/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./prosemirror-editor";
+export * from "./helpers";
+export * from "./use-dropdown-change-pm";
+export * from "./use-editor-keydown-pm";
+export * from "./use-editor-decorator-pm";
+export * from "./use-editor-change-pm";
+export * from "./decoration-plugin";
+export * from "./unfocused-selection-plugin";
+export * from "./mention-nodeview";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/editor-pm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editor-pm/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC"}

package/dist/esm/editor-pm/index.js

@@ -0,0 +1,9 @@
+export * from "./prosemirror-editor";
+export * from "./helpers";
+export * from "./use-dropdown-change-pm";
+export * from "./use-editor-keydown-pm";
+export * from "./use-editor-decorator-pm";
+export * from "./use-editor-change-pm";
+export * from "./decoration-plugin";
+export * from "./unfocused-selection-plugin";
+export * from "./mention-nodeview";

package/dist/esm/editor-pm/mention-nodeview.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { Node as PMNode } from "prosemirror-model";
+import { NodeView, EditorView } from "prosemirror-view";
+import { Mention } from "@rowsncolumns/spreadsheet";
+export type MentionTagComponentProps<M extends Mention = Mention> = {
+    mention: M;
+    selected?: boolean;
+    onClick?: () => void;
+};
+/**
+ * ProseMirror NodeView for rendering mentions with custom React components
+ */
+export declare class MentionNodeView implements NodeView {
+    dom: HTMLElement;
+    private root;
+    private destroyed;
+    private node;
+    private view;
+    private getPos;
+    private MentionTagComponent;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, MentionTagComponent?: React.ComponentType<MentionTagComponentProps>);
+    update(node: PMNode): boolean;
+    private renderComponent;
+    private ensureRoot;
+    private isNodeSelected;
+    private handleClick;
+    destroy(): void;
+    selectNode(): void;
+    deselectNode(): void;
+}
+//# sourceMappingURL=mention-nodeview.d.ts.map

package/dist/esm/editor-pm/mention-nodeview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-nodeview.d.ts","sourceRoot":"","sources":["../../../editor-pm/mention-nodeview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGxD,OAAO,EACL,OAAO,EAER,MAAM,2BAA2B,CAAC;AAGnC,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IAClE,OAAO,EAAE,CAAC,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAcF;;GAEG;AACH,qBAAa,eAAgB,YAAW,QAAQ;IAC9C,GAAG,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,IAAI,CAAgD;IAC5D,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,mBAAmB,CAAgD;gBAGzE,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS,EAChC,mBAAmB,GAAE,KAAK,CAAC,aAAa,CAAC,wBAAwB,CAA8B;IAmBjG,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAQ7B,OAAO,CAAC,eAAe;YAoBT,UAAU;IAQxB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAenB,OAAO;IAUP,UAAU;IAIV,YAAY;CAGb"}

package/dist/esm/editor-pm/mention-nodeview.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { TextSelection } from "prosemirror-state";
+import { scheduleNormalPriorityCallback, } from "@rowsncolumns/spreadsheet";
+import { cn } from "../utils";
+/**
+ * Default mention component - renders a simple styled span
+ */
+const DefaultMentionTagComponent = ({ mention, selected, }) => (React.createElement("span", { "data-mention": true, className: cn("bg-rnc-input rounded px-[2px]") }, mention.label));
+/**
+ * ProseMirror NodeView for rendering mentions with custom React components
+ */
+export class MentionNodeView {
+    dom;
+    root = null;
+    destroyed = false;
+    node;
+    view;
+    getPos;
+    MentionTagComponent;
+    constructor(node, view, getPos, MentionTagComponent = DefaultMentionTagComponent) {
+        this.node = node;
+        this.view = view;
+        this.getPos = getPos;
+        this.MentionTagComponent = MentionTagComponent;
+        // Create DOM element
+        this.dom = document.createElement("span");
+        this.dom.className = "mention-wrapper";
+        // Create React root lazily in browser to keep server import graph clean.
+        this.ensureRoot().then(() => {
+            if (!this.destroyed) {
+                this.update(node);
+            }
+        });
+    }
+    update(node) {
+        if (node.type.name !== "mention")
+            return false;
+        this.node = node;
+        this.renderComponent();
+        return true;
+    }
+    renderComponent() {
+        if (!this.root)
+            return;
+        const pos = this.getPos();
+        const isSelected = pos !== undefined && this.isNodeSelected(pos);
+        const mentionData = {
+            label: this.node.attrs.label,
+            value: this.node.attrs.value,
+        };
+        this.root.render(React.createElement(this.MentionTagComponent, { mention: mentionData, selected: isSelected, onClick: () => this.handleClick() }));
+    }
+    async ensureRoot() {
+        if (this.root || this.destroyed || typeof window === "undefined")
+            return;
+        const { createRoot } = await import("react-dom/client");
+        if (this.destroyed)
+            return;
+        this.root = createRoot(this.dom);
+    }
+    isNodeSelected(pos) {
+        const { selection } = this.view.state;
+        return selection.from <= pos && selection.to >= pos + this.node.nodeSize;
+    }
+    handleClick() {
+        const pos = this.getPos();
+        if (pos !== undefined) {
+            // Focus the editor and set cursor after the mention
+            this.view.focus();
+            this.view.dispatch(this.view.state.tr.setSelection(TextSelection.near(this.view.state.doc.resolve(pos + this.node.nodeSize))));
+        }
+    }
+    destroy() {
+        this.destroyed = true;
+        // Use setTimeout to avoid React's synchronous unmount race condition
+        scheduleNormalPriorityCallback(() => {
+            this.root?.unmount();
+            this.root = null;
+        });
+    }
+    // Make the node selectable
+    selectNode() {
+        this.renderComponent();
+    }
+    deselectNode() {
+        this.renderComponent();
+    }
+}

package/dist/esm/editor-pm/mentions-dropdown.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Mention } from "@rowsncolumns/common-types";
+export type MentionsDropdownProps<M extends Mention = Mention> = {
+    mentions?: M[];
+    onSelect?: (mention: M) => void;
+    highlightedIndex?: number;
+    isFetchingMentions?: boolean;
+    MentionDropdownItemComponent?: React.ComponentType<{
+        mention: M;
+    }>;
+};
+export declare const MentionsDropdown: <M extends Mention>({ mentions, onSelect, highlightedIndex, isFetchingMentions, MentionDropdownItemComponent, }: MentionsDropdownProps<M>) => React.JSX.Element;
+//# sourceMappingURL=mentions-dropdown.d.ts.map

package/dist/esm/editor-pm/mentions-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentions-dropdown.d.ts","sourceRoot":"","sources":["../../../editor-pm/mentions-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,IAAI;IAC/D,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,4BAA4B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,CAAC,CAAA;KAAE,CAAC,CAAC;CACpE,CAAC;AAMF,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,OAAO,EAAE,6FAMjD,qBAAqB,CAAC,CAAC,CAAC,sBA8B1B,CAAC"}

package/dist/esm/editor-pm/mentions-dropdown.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { StyledDropdownItem, StyledDropdownWrapper } from "../editor/style";
+import { LoadingIcon } from "@rowsncolumns/icons";
+const DefaultMentionDropdownItem = ({ mention }) => {
+    return mention.label;
+};
+export const MentionsDropdown = ({ mentions, onSelect, highlightedIndex = 0, isFetchingMentions, MentionDropdownItemComponent, }) => {
+    const ItemComponent = MentionDropdownItemComponent || DefaultMentionDropdownItem;
+    return (React.createElement(StyledDropdownWrapper, { role: "listbox" },
+        isFetchingMentions ? (React.createElement(StyledDropdownItem, { role: "option", className: "flex flex-row items-center gap-2 select-none" },
+            React.createElement(LoadingIcon, { className: "animate-spin" }),
+            React.createElement("span", null, "Loading..."))) : null,
+        mentions?.map((mention, index) => {
+            return (React.createElement(StyledDropdownItem, { role: "option", key: mention.value, variant: "unstyled", active: highlightedIndex === index, onClick: () => onSelect?.(mention), onMouseDown: (event) => event.preventDefault() },
+                React.createElement(ItemComponent, { mention: mention })));
+        })));
+};

package/dist/esm/editor-pm/mentions-plugin.d.ts

@@ -0,0 +1,18 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { MentionRange, MentionState } from "./prosemirror-editor";
+import { EditorView } from "prosemirror-view";
+import { Mention } from "@rowsncolumns/common-types";
+interface MentionPosition {
+    left: number;
+    top: number;
+}
+declare const mentionsPluginKey: PluginKey<MentionState>;
+declare const insertMention: (view: EditorView, mention: Mention, range: MentionRange) => void;
+export type CreateMentionPluginOptions = {
+    onChangeState: (state: MentionState) => void;
+    getFormulaMode: () => boolean;
+};
+declare const createMentionsPlugin: ({ onChangeState, getFormulaMode, }: CreateMentionPluginOptions) => Plugin<MentionState>;
+export { createMentionsPlugin, mentionsPluginKey, insertMention };
+export type { MentionState, MentionRange, MentionPosition };
+//# sourceMappingURL=mentions-plugin.d.ts.map

package/dist/esm/editor-pm/mentions-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mentions-plugin.d.ts","sourceRoot":"","sources":["../../../editor-pm/mentions-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,EAAE,SAAS,EAAe,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AACD,QAAA,MAAM,iBAAiB,yBAA0C,CAAC;AAGlE,QAAA,MAAM,aAAa,GACjB,MAAM,UAAU,EAChB,SAAS,OAAO,EAChB,OAAO,YAAY,KAClB,IAOF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,MAAM,OAAO,CAAC;CAC/B,CAAC;AAGF,QAAA,MAAM,oBAAoB,GAAI,oCAG3B,0BAA0B,KAAG,MAAM,CAAC,YAAY,CAiGlD,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,aAAa,EAAE,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/editor-pm/mentions-plugin.js

@@ -0,0 +1,92 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+const mentionsPluginKey = new PluginKey("mentions");
+// Function to insert mention
+const insertMention = (view, mention, range) => {
+    const mentionText = `@[${mention.label}](${mention.value}) `;
+    const tr = view.state.tr
+        .delete(range.from, range.to)
+        .insertText(mentionText);
+    view.dispatch(tr);
+};
+// Create mentions plugin
+const createMentionsPlugin = ({ onChangeState, getFormulaMode, }) => {
+    return new Plugin({
+        key: mentionsPluginKey,
+        state: {
+            init() {
+                return {
+                    active: false,
+                    query: "",
+                    range: null,
+                    selectedIndex: 0,
+                };
+            },
+            apply(tr, pluginState, oldState, newState) {
+                const selection = newState.selection;
+                // Disable mentions in formula mode
+                if (getFormulaMode()) {
+                    if (pluginState.active) {
+                        const newPluginState = {
+                            ...pluginState,
+                            active: false,
+                            query: "",
+                            range: null,
+                        };
+                        onChangeState(newPluginState);
+                        return newPluginState;
+                    }
+                    return pluginState;
+                }
+                if (!selection.empty) {
+                    if (pluginState.active) {
+                        const newPluginState = {
+                            ...pluginState,
+                            active: false,
+                            query: "",
+                            range: null,
+                        };
+                        onChangeState(newPluginState);
+                        return newPluginState;
+                    }
+                    return pluginState;
+                }
+                const $pos = selection.$from;
+                // Fix: textBefore needs start and end parameters
+                const textBefore = $pos.parent.textBetween(0, $pos.parentOffset, undefined, undefined);
+                // Check for @ symbol
+                const match = textBefore.match(/@([^@\s]*)$/);
+                if (match) {
+                    const query = match[1];
+                    const from = $pos.pos - match[0].length;
+                    const to = $pos.pos;
+                    if (!pluginState.active || pluginState.query !== query) {
+                        const newPluginState = {
+                            ...pluginState,
+                            query,
+                            range: {
+                                from,
+                                to,
+                            },
+                            active: true,
+                            selectedIndex: 0,
+                        };
+                        onChangeState(newPluginState);
+                    }
+                    return pluginState;
+                }
+                else {
+                    const newPluginState = {
+                        ...pluginState,
+                        active: false,
+                        query: "",
+                        range: null,
+                        selectedIndex: 0,
+                    };
+                    onChangeState(newPluginState);
+                    return newPluginState;
+                }
+            },
+        },
+    });
+};
+export { createMentionsPlugin, mentionsPluginKey, insertMention };

package/dist/esm/editor-pm/placeholder-plugin.d.ts

@@ -0,0 +1,4 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+export declare const placeholderPluginKey: PluginKey<any>;
+export declare function createPlaceholderPlugin(placeholder: string): Plugin<any>;
+//# sourceMappingURL=placeholder-plugin.d.ts.map

package/dist/esm/editor-pm/placeholder-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder-plugin.d.ts","sourceRoot":"","sources":["../../../editor-pm/placeholder-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,oBAAoB,gBAA+B,CAAC;AAEjE,wBAAgB,uBAAuB,CAAC,WAAW,EAAE,MAAM,eAmB1D"}

package/dist/esm/editor-pm/placeholder-plugin.js

@@ -0,0 +1,20 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+export const placeholderPluginKey = new PluginKey("placeholder");
+export function createPlaceholderPlugin(placeholder) {
+    return new Plugin({
+        key: placeholderPluginKey,
+        props: {
+            attributes(state) {
+                const doc = state.doc;
+                const isEmpty = doc.content.size === 0 ||
+                    (doc.content.size === 2 && doc.textContent === "");
+                const attrs = {};
+                if (isEmpty) {
+                    attrs.class = "pm-placeholder";
+                    attrs["data-placeholder"] = placeholder;
+                }
+                return attrs;
+            },
+        },
+    });
+}