@rowsncolumns/ui 15.0.38

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/editor-pm/mention-nodeview.js

@@ -0,0 +1,105 @@
+import { __awaiter, __generator } from "tslib";
+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
+ */
+var DefaultMentionTagComponent = function (_a) {
+    var mention = _a.mention, selected = _a.selected;
+    return (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
+ */
+var MentionNodeView = /** @class */ (function () {
+    function MentionNodeView(node, view, getPos, MentionTagComponent) {
+        if (MentionTagComponent === void 0) { MentionTagComponent = DefaultMentionTagComponent; }
+        var _this = this;
+        this.root = null;
+        this.destroyed = false;
+        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(function () {
+            if (!_this.destroyed) {
+                _this.update(node);
+            }
+        });
+    }
+    MentionNodeView.prototype.update = function (node) {
+        if (node.type.name !== "mention")
+            return false;
+        this.node = node;
+        this.renderComponent();
+        return true;
+    };
+    MentionNodeView.prototype.renderComponent = function () {
+        var _this = this;
+        if (!this.root)
+            return;
+        var pos = this.getPos();
+        var isSelected = pos !== undefined && this.isNodeSelected(pos);
+        var mentionData = {
+            label: this.node.attrs.label,
+            value: this.node.attrs.value,
+        };
+        this.root.render(React.createElement(this.MentionTagComponent, { mention: mentionData, selected: isSelected, onClick: function () { return _this.handleClick(); } }));
+    };
+    MentionNodeView.prototype.ensureRoot = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var createRoot;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.root || this.destroyed || typeof window === "undefined")
+                            return [2 /*return*/];
+                        return [4 /*yield*/, import("react-dom/client")];
+                    case 1:
+                        createRoot = (_a.sent()).createRoot;
+                        if (this.destroyed)
+                            return [2 /*return*/];
+                        this.root = createRoot(this.dom);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    MentionNodeView.prototype.isNodeSelected = function (pos) {
+        var selection = this.view.state.selection;
+        return selection.from <= pos && selection.to >= pos + this.node.nodeSize;
+    };
+    MentionNodeView.prototype.handleClick = function () {
+        var 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))));
+        }
+    };
+    MentionNodeView.prototype.destroy = function () {
+        var _this = this;
+        this.destroyed = true;
+        // Use setTimeout to avoid React's synchronous unmount race condition
+        scheduleNormalPriorityCallback(function () {
+            var _a;
+            (_a = _this.root) === null || _a === void 0 ? void 0 : _a.unmount();
+            _this.root = null;
+        });
+    };
+    // Make the node selectable
+    MentionNodeView.prototype.selectNode = function () {
+        this.renderComponent();
+    };
+    MentionNodeView.prototype.deselectNode = function () {
+        this.renderComponent();
+    };
+    return MentionNodeView;
+}());
+export { MentionNodeView };

package/dist/cjs/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/cjs/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/cjs/editor-pm/mentions-dropdown.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { StyledDropdownItem, StyledDropdownWrapper } from "../editor/style";
+import { LoadingIcon } from "@rowsncolumns/icons";
+var DefaultMentionDropdownItem = function (_a) {
+    var mention = _a.mention;
+    return mention.label;
+};
+export var MentionsDropdown = function (_a) {
+    var mentions = _a.mentions, onSelect = _a.onSelect, _b = _a.highlightedIndex, highlightedIndex = _b === void 0 ? 0 : _b, isFetchingMentions = _a.isFetchingMentions, MentionDropdownItemComponent = _a.MentionDropdownItemComponent;
+    var 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 === null || mentions === void 0 ? void 0 :
+        mentions.map(function (mention, index) {
+            return (React.createElement(StyledDropdownItem, { role: "option", key: mention.value, variant: "unstyled", active: highlightedIndex === index, onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(mention); }, onMouseDown: function (event) { return event.preventDefault(); } },
+                React.createElement(ItemComponent, { mention: mention })));
+        })));
+};

package/dist/cjs/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/cjs/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/cjs/editor-pm/mentions-plugin.js

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

package/dist/cjs/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/cjs/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/cjs/editor-pm/placeholder-plugin.js

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