@modusoperandi/licit-floatingmenu 0.1.0

package/FloatingMenuPlugin.d.ts

@@ -0,0 +1,44 @@
+import { DecorationSet, EditorView } from 'prosemirror-view';
+import { Node, Schema } from 'prosemirror-model';
+import { Plugin, PluginKey, EditorState } from 'prosemirror-state';
+import { PopUpHandle } from '@modusoperandi/licit-ui-commands';
+import { createSliceManager } from './slice';
+import { FloatRuntime } from './model';
+export declare const CMPluginKey: PluginKey<FloatingMenuPlugin>;
+interface SliceModel {
+    name: string;
+    description: string;
+    id: string;
+    referenceType: string;
+    source: string;
+    from: string;
+    to: string;
+    ids: string[];
+}
+export declare class FloatingMenuPlugin extends Plugin {
+    _popUpHandle: PopUpHandle | null;
+    _view: EditorView | null;
+    sliceManager: ReturnType<typeof createSliceManager>;
+    constructor(sliceRuntime: FloatRuntime);
+    getEffectiveSchema(schema: Schema): Schema;
+}
+export declare function copySelectionRich(view: EditorView, plugin: FloatingMenuPlugin): void;
+export declare function createSliceObject(editorView: EditorView): SliceModel;
+export declare function copySelectionPlain(view: EditorView, plugin: FloatingMenuPlugin): void;
+export declare function pasteFromClipboard(view: EditorView, plugin: FloatingMenuPlugin): Promise<void>;
+export declare function pasteAsReference(view: EditorView, plugin: FloatingMenuPlugin): Promise<void>;
+export declare function pasteAsPlainText(view: EditorView, plugin: FloatingMenuPlugin): Promise<void>;
+export declare function clipboardHasProseMirrorData(): Promise<boolean>;
+export declare function getDecorations(doc: Node, state: EditorState): DecorationSet;
+export declare function openFloatingMenu(plugin: FloatingMenuPlugin, view: EditorView, pos: number, anchorEl?: HTMLElement, contextPos?: {
+    x: number;
+    y: number;
+}): void;
+export declare function addAltRightClickHandler(view: EditorView, plugin: FloatingMenuPlugin): void;
+export declare function getDocSlices(this: FloatingMenuPlugin, view: EditorView): Promise<void>;
+export declare function changeAttribute(_view: EditorView): void;
+export declare function createNewSlice(view: EditorView): void;
+export declare function showReferences(view: EditorView): Promise<void>;
+export declare function createInfoIconHandler(view: EditorView): void;
+export declare function createCitationHandler(view: EditorView): void;
+export {};

package/FloatingMenuPlugin.js

@@ -0,0 +1,454 @@
+// A generic Floating Menu ProseMirror Plugin
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Slice } from 'prosemirror-model';
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { createPopUp, atAnchorBottomLeft, } from '@modusoperandi/licit-ui-commands';
+import { FloatingMenu } from './FloatingPopup';
+import { v4 as uuidv4 } from 'uuid';
+import { insertReference } from '@modusoperandi/licit-referencing';
+import { createSliceManager } from './slice';
+export const CMPluginKey = new PluginKey('floating-menu');
+export class FloatingMenuPlugin extends Plugin {
+    _popUpHandle = null;
+    _view = null;
+    sliceManager;
+    constructor(sliceRuntime) {
+        const sliceManager = createSliceManager(sliceRuntime);
+        super({
+            key: CMPluginKey,
+            state: {
+                init(_config, state) {
+                    return {
+                        decorations: getDecorations(state.doc, state),
+                    };
+                },
+                apply(tr, prev, _oldState, newState) {
+                    let decos = prev.decorations;
+                    if (!tr.docChanged) {
+                        return { decorations: decos?.map(tr.mapping, tr.doc) };
+                    }
+                    decos = decos.map(tr.mapping, tr.doc);
+                    const requiresRescan = tr.steps.some((step) => {
+                        const s = step.toJSON();
+                        return (s.stepType === 'replace' ||
+                            s.stepType === 'replaceAround' ||
+                            s.stepType === 'setNodeMarkup');
+                    }) || tr.getMeta(CMPluginKey)?.forceRescan;
+                    if (requiresRescan) {
+                        decos = getDecorations(tr.doc, newState);
+                    }
+                    return { decorations: decos };
+                },
+            },
+            props: {
+                decorations(state) {
+                    return this.getState(state)?.decorations;
+                },
+            },
+            view: (view) => {
+                const plugin = this;
+                plugin._view = view;
+                plugin.sliceManager = sliceManager;
+                getDocSlices.call(plugin, view);
+                view.dom.addEventListener('pointerdown', (e) => {
+                    const targetEl = e.target.closest('.float-icon');
+                    if (!targetEl)
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const wrapper = targetEl.closest('.pm-hamburger-wrapper');
+                    wrapper?.classList.add('popup-open');
+                    const pos = Number(targetEl.dataset.pos);
+                    openFloatingMenu(plugin, view, pos, targetEl);
+                });
+                // --- Alt + Right Click handler ---
+                view.dom.addEventListener('contextmenu', (e) => {
+                    if (e.altKey && e.button === 2 && view.editable) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const pos = {
+                            x: e ? e.clientX : 0,
+                            y: e ? e.clientY : 0,
+                        };
+                        openFloatingMenu(plugin, view, undefined, undefined, pos);
+                    }
+                });
+                // --- Close popup on outside click ---
+                const outsideClickHandler = (e) => {
+                    const el = e.target;
+                    if (plugin._popUpHandle &&
+                        !el.closest('.context-menu') &&
+                        !el.closest('.float-icon')) {
+                        plugin._popUpHandle.close(null);
+                        plugin._popUpHandle = null;
+                    }
+                };
+                document.addEventListener('click', outsideClickHandler);
+                return {};
+            },
+        });
+    }
+    getEffectiveSchema(schema) {
+        return schema;
+    }
+}
+export function copySelectionRich(view, plugin) {
+    const { state } = view;
+    if (state.selection.empty)
+        return;
+    if (!view.hasFocus())
+        view.focus();
+    const slice = state.selection.content();
+    const sliceJSON = {
+        content: slice.content.toJSON(),
+        openStart: slice.openStart,
+        openEnd: slice.openEnd,
+        sliceModel: createSliceObject(view),
+    };
+    navigator.clipboard
+        .writeText(JSON.stringify(sliceJSON))
+        .then(() => console.log('Rich content copied'))
+        .catch((err) => console.error('Clipboard write failed', err));
+    if (plugin._popUpHandle) {
+        plugin._popUpHandle.update({
+            ...plugin._popUpHandle['props'],
+            pasteAsReferenceEnabled: true,
+        });
+    }
+    if (plugin._popUpHandle?.close) {
+        plugin._popUpHandle.close(null);
+        plugin._popUpHandle = null;
+    }
+}
+export function createSliceObject(editorView) {
+    const instanceUrl = 'http://modusoperandi.com/editor/instance/';
+    const referenceUrl = 'http://modusoperandi.com/ont/document#Reference_nodes';
+    const sliceModel = {
+        name: '',
+        description: '',
+        id: '',
+        referenceType: '',
+        source: '',
+        from: '',
+        to: '',
+        ids: [],
+    };
+    const objectIds = [];
+    let firstParagraphText = null;
+    editorView.focus();
+    const $from = editorView.state.selection.$from;
+    const $to = editorView.state.selection.$to;
+    const from = $from.start($from.depth);
+    const to = $to.end($to.depth);
+    editorView.state.doc.nodesBetween(from, to, (node) => {
+        if (node.type.name === 'paragraph') {
+            if (!firstParagraphText && node.textContent?.trim()) {
+                firstParagraphText = node.textContent.trim();
+            }
+            if (node.attrs?.objectId) {
+                objectIds.push(node.attrs.objectId);
+            }
+        }
+    });
+    sliceModel.id = instanceUrl + uuidv4();
+    sliceModel.ids = objectIds;
+    sliceModel.from = objectIds.length > 0 ? objectIds[0] : '';
+    sliceModel.to = objectIds.length > 0 ? objectIds[objectIds.length - 1] : '';
+    const viewWithDocView = editorView;
+    sliceModel.source = viewWithDocView?.['docView']?.node?.attrs?.objectId;
+    sliceModel.referenceType = referenceUrl;
+    const today = new Date().toISOString().split('T')[0];
+    const snippet = (firstParagraphText || 'Untitled').substring(0, 20);
+    sliceModel.name = `${snippet} - ${today}`;
+    return sliceModel;
+}
+export function copySelectionPlain(view, plugin) {
+    if (!view.hasFocus()) {
+        view.focus();
+    }
+    const { from, to } = view.state.selection;
+    if (from === to)
+        return;
+    const slice = view.state.doc.slice(from, to);
+    const text = slice.content.textBetween(0, slice.content.size, '\n');
+    navigator.clipboard
+        .writeText(text)
+        .then(() => console.log('Plain text copied!'))
+        .catch((err) => console.error('Clipboard write failed:', err));
+    if (plugin._popUpHandle?.close) {
+        plugin._popUpHandle.close(null);
+        plugin._popUpHandle = null;
+    }
+}
+export async function pasteFromClipboard(view, plugin) {
+    try {
+        if (!view.hasFocus())
+            view.focus();
+        const text = await navigator.clipboard.readText();
+        let tr;
+        try {
+            // Try parsing as JSON slice
+            const parsed = JSON.parse(text);
+            const slice = Slice.fromJSON(view.state.schema, parsed);
+            tr = view.state.tr.replaceSelection(slice);
+        }
+        catch (jsonErr) {
+            // If not JSON, treat as plain text
+            tr = view.state.tr.insertText(text, view.state.selection.from, view.state.selection.to);
+        }
+        view.dispatch(tr.scrollIntoView());
+    }
+    catch (err) {
+        console.error('Clipboard paste failed:', err);
+    }
+    finally {
+        if (plugin._popUpHandle?.close) {
+            plugin._popUpHandle.close(null);
+            plugin._popUpHandle = null;
+        }
+    }
+}
+export async function pasteAsReference(view, plugin) {
+    try {
+        if (!view.hasFocus())
+            view.focus();
+        const text = await navigator.clipboard.readText();
+        const parsed = JSON.parse(text);
+        const sliceModel = parsed.sliceModel;
+        if (!plugin.sliceManager?.createSliceViaDialog) {
+            throw new Error('SliceManager or createSliceViaDialog is not initialized');
+        }
+        const val = await plugin.sliceManager.createSliceViaDialog(sliceModel);
+        if (!val) {
+            console.warn('Slice creation returned no value, skipping insertReference.');
+            return;
+        }
+        insertReference(view, val.id, val.source, view['docView']?.node?.attrs?.objectMetaData?.name);
+        console.log('Slice created successfully:', val);
+    }
+    catch (err) {
+        console.error('Failed to paste content or create slice:', err);
+    }
+    finally {
+        if (plugin._popUpHandle?.close) {
+            plugin._popUpHandle.close(null);
+            plugin._popUpHandle = null;
+        }
+    }
+}
+export async function pasteAsPlainText(view, plugin) {
+    try {
+        if (!view.hasFocus())
+            view.focus();
+        const text = await navigator.clipboard.readText();
+        let plainText = text;
+        try {
+            const parsed = JSON.parse(text);
+            const slice = Slice.fromJSON(view.state.schema, parsed);
+            const frag = slice.content;
+            plainText = '';
+            frag.forEach((node) => {
+                plainText += node.textContent + '\n';
+            });
+            plainText = plainText.trim();
+        }
+        catch {
+            // Not JSON → just keep as is
+        }
+        const { state } = view;
+        const tr = state.tr.insertText(plainText, state.selection.from, state.selection.to);
+        view.dispatch(tr.scrollIntoView());
+    }
+    catch (err) {
+        console.error('Plain text paste failed:', err);
+    }
+    if (plugin._popUpHandle?.close) {
+        plugin._popUpHandle.close(null);
+        plugin._popUpHandle = null;
+    }
+}
+export async function clipboardHasProseMirrorData() {
+    try {
+        const text = await navigator.clipboard.readText();
+        if (!text)
+            return false;
+        const parsed = JSON.parse(text);
+        return ((parsed &&
+            typeof parsed === 'object' &&
+            parsed.content &&
+            Array.isArray(parsed.content)) ||
+            parsed.content.type);
+    }
+    catch {
+        return false;
+    }
+}
+// --- Decoration function ---
+export function getDecorations(doc, state) {
+    const decorations = [];
+    doc?.forEach((node, pos) => {
+        if (node.type.name !== 'paragraph')
+            return;
+        const wrapper = document.createElement('span');
+        wrapper.className = 'pm-hamburger-wrapper';
+        const hamburger = document.createElement('span');
+        // ✅ Use FontAwesome
+        hamburger.className = 'float-icon fa fa-bars';
+        hamburger.style.fontFamily = 'FontAwesome'; // for fa compatibility
+        hamburger.dataset.pos = String(pos);
+        wrapper.appendChild(hamburger);
+        decorations.push(Decoration.widget(pos + 1, wrapper, { side: 1 }));
+        const decoFlags = node.attrs?.isDeco;
+        if (!decoFlags)
+            return;
+        if (decoFlags.isSlice || decoFlags.isTag || decoFlags.isComment) {
+            // --- Container for gutter marks ---
+            const container = document.createElement('span');
+            container.style.position = 'absolute';
+            container.style.left = '27px';
+            container.style.display = 'inline-flex';
+            container.style.gap = '6px';
+            container.style.alignItems = 'center';
+            container.contentEditable = 'false';
+            container.style.userSelect = 'none';
+            // --- Slice ---
+            if (decoFlags.isSlice) {
+                const SliceMark = document.createElement('span');
+                SliceMark.id = `slicemark-${uuidv4()}`;
+                SliceMark.style.fontFamily = 'FontAwesome';
+                SliceMark.innerHTML = '&#xf097';
+                SliceMark.onclick = () => console.log('Slice deco clicked');
+                container.appendChild(SliceMark);
+            }
+            // --- Tag ---
+            if (decoFlags.isTag) {
+                const TagMark = document.createElement('span');
+                TagMark.style.fontFamily = 'FontAwesome';
+                TagMark.innerHTML = '';
+                TagMark.onclick = () => console.log('Tag deco clicked');
+                container.appendChild(TagMark);
+            }
+            // --- Comment ---
+            if (decoFlags.isComment) {
+                const CommentMark = document.createElement('span');
+                CommentMark.style.fontFamily = 'FontAwesome';
+                CommentMark.innerHTML = '';
+                CommentMark.onclick = () => console.log('Comment deco clicked');
+                container.appendChild(CommentMark);
+            }
+            decorations.push(Decoration.widget(pos + 1, container, { side: -1 }));
+        }
+    });
+    return DecorationSet.create(state.doc, decorations);
+}
+export function openFloatingMenu(plugin, view, pos, anchorEl, contextPos) {
+    // Close existing popup if any
+    if (plugin._popUpHandle) {
+        plugin._popUpHandle.close(null);
+        plugin._popUpHandle = null;
+    }
+    // Determine if clipboard has ProseMirror data
+    clipboardHasProseMirrorData().then((hasPM) => {
+        plugin._popUpHandle = createPopUp(FloatingMenu, {
+            editorState: view.state,
+            editorView: view,
+            paragraphPos: pos,
+            pasteAsReferenceEnabled: hasPM,
+            copyRichHandler: () => copySelectionRich(view, plugin),
+            copyPlainHandler: () => copySelectionPlain(view, plugin),
+            pasteHandler: () => pasteFromClipboard(view, plugin),
+            pasteAsReferenceHandler: () => pasteAsReference(view, plugin),
+            pastePlainHandler: () => pasteAsPlainText(view, plugin),
+            createInfoIconHandler: () => createInfoIconHandler(view),
+            createCitationHandler: () => createCitationHandler(view),
+        }, {
+            anchor: anchorEl || view.dom,
+            contextPos: contextPos,
+            position: atAnchorBottomLeft,
+            autoDismiss: false,
+            onClose: () => {
+                plugin._popUpHandle = null;
+                // Remove 'popup-open' class if anchor is a hamburger wrapper
+                anchorEl
+                    ?.closest('.pm-hamburger-wrapper')
+                    ?.classList.remove('popup-open');
+            },
+        });
+    });
+}
+export function addAltRightClickHandler(view, plugin) {
+    view.dom.addEventListener('contextmenu', (e) => {
+        if (e.altKey && e.button === 2) {
+            e.preventDefault();
+            e.stopPropagation();
+            const pos = view.posAtCoords({ left: e.clientX, top: e.clientY })?.pos;
+            if (pos == null)
+                return;
+            openFloatingMenu(plugin, view, pos);
+        }
+    });
+}
+// To retrieve all the document slices from the server and cache it.
+export async function getDocSlices(view) {
+    try {
+        const result = await this.sliceManager?.getDocumentSlices(view);
+        this.sliceManager?.setSlices(result, view.state);
+        this.sliceManager?.setSliceAttrs(view);
+    }
+    catch (err) {
+        console.error('Failed to load slices:', err);
+    }
+}
+export function changeAttribute(_view) {
+    const from = _view.state.selection.$from.before(1);
+    const node = _view.state.doc.nodeAt(from);
+    if (!node)
+        return; // early return if node does not exist
+    let tr = _view.state.tr;
+    const newattrs = { ...node.attrs };
+    const isDeco = { ...(newattrs.isDeco || {}) };
+    isDeco.isSlice = true;
+    newattrs.isDeco = isDeco;
+    tr = tr.setNodeMarkup(from, undefined, newattrs);
+    _view.dispatch(tr);
+}
+export function createNewSlice(view) {
+    const sliceModel = createSliceObject(view);
+    const plugin = CMPluginKey.get(view.state);
+    if (!plugin)
+        return;
+    plugin.sliceManager
+        .createSliceViaDialog(sliceModel)
+        .then((val) => {
+        plugin.sliceManager.addSliceToList(val);
+        changeAttribute(view);
+    })
+        .catch((err) => {
+        console.error('createSlice failed with:', err);
+    });
+}
+export async function showReferences(view) {
+    const plugin = CMPluginKey.get(view.state);
+    if (!plugin)
+        return;
+    plugin.sliceManager
+        .insertReference()
+        .then((val) => {
+        insertReference(view, val.id, val.source, view['docView']?.node?.attrs?.objectMetaData?.name);
+    })
+        .catch((err) => {
+        console.error('createSlice failed with:', err);
+    });
+}
+export function createInfoIconHandler(view) {
+    const plugin = CMPluginKey.get(view.state);
+    if (!plugin)
+        return;
+    plugin.sliceManager?.addInfoIcon();
+}
+export function createCitationHandler(view) {
+    const plugin = CMPluginKey.get(view.state);
+    if (!plugin)
+        return;
+    plugin.sliceManager?.addCitation();
+}

package/FloatingPopup.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { EditorView } from 'prosemirror-view';
+import { EditorState } from 'prosemirror-state';
+interface FloatingMenuProps {
+    editorState: EditorState;
+    editorView: EditorView;
+    paragraphPos: number;
+    pasteAsReferenceEnabled: boolean;
+    copyRichHandler: () => void;
+    copyPlainHandler: () => void;
+    createCitationHandler: () => void;
+    createInfoIconHandler: () => void;
+    pasteHandler: () => void;
+    pasteAsReferenceHandler: () => void;
+    pastePlainHandler: () => void;
+    close?: (menuName: string) => void;
+}
+export declare class FloatingMenu extends React.PureComponent<FloatingMenuProps, FloatingMenuProps> {
+    constructor(props: any);
+    render(): React.ReactNode;
+    closePopup(menuName: string): void;
+}
+export {};

package/FloatingPopup.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CustomButton } from '@modusoperandi/licit-ui-commands';
+import { createNewSlice, showReferences } from './FloatingMenuPlugin';
+export class FloatingMenu extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            ...props,
+        };
+    }
+    render() {
+        const { editorState, paragraphPos } = this.props;
+        const { selection } = editorState;
+        const $from = selection.$from;
+        const $to = selection.$to;
+        const inThisParagraph = $from.before($from.depth) === paragraphPos &&
+            $to.before($to.depth) === paragraphPos;
+        const isTextSelected = inThisParagraph && !selection.empty;
+        const enableCitationAndComment = isTextSelected;
+        const enableTagAndInfoicon = inThisParagraph;
+        return (React.createElement("div", { className: "context-menu", role: "menu", tabIndex: -1 },
+            React.createElement("div", { className: "context-menu__items" },
+                React.createElement(CustomButton, { disabled: !enableCitationAndComment, label: "Create Citation", onClick: this.props.createCitationHandler }),
+                React.createElement(CustomButton, { disabled: !enableTagAndInfoicon, label: "Create Infoicon", onClick: this.props.createInfoIconHandler }),
+                React.createElement(CustomButton, { label: "Copy", onClick: this.props.copyRichHandler }),
+                React.createElement(CustomButton, { label: "Copy Without Formatting", onClick: this.props.copyPlainHandler }),
+                React.createElement(CustomButton, { label: "Paste", onClick: () => {
+                        this.props.pasteHandler();
+                    } }),
+                React.createElement(CustomButton, { label: "Paste As Plain Text", onClick: this.props.pastePlainHandler }),
+                React.createElement(CustomButton, { disabled: !this.props.pasteAsReferenceEnabled, label: "Paste As Reference", onClick: () => {
+                        this.props.pasteAsReferenceHandler();
+                    } }),
+                React.createElement(CustomButton, { label: "Create Bookmark", onClick: () => { createNewSlice(this.props.editorView); this.props.close?.('Create Slice'); } }),
+                React.createElement(CustomButton, { label: "Insert Reference", onClick: () => { showReferences(this.props.editorView); this.props.close?.('Insert reference'); } }))));
+    }
+    closePopup(menuName) {
+        this.props.close?.(menuName);
+    }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Modus Operandi Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# licit-plugin-contrib-floatingmenu
+Licit plugin for managing an editor context menu
+
+
+### Dependency
+
+### Commands
+
+- npm install
+
+- npm run ci:build
+
+- npm pack
+
+#### To use this in Licit
+
+Include plugin in licit component
+
+```
+
+import { FloatingMenuPlugin } from '@modusoperandi/licit-floatingmenu';
+
+
+const  plugins = [new FloatingMenuPlugin(this.runtime)]
+
+ReactDOM.render(<Licit docID={0} plugins={plugins}/>)
+
+```

package/index.d.ts

@@ -0,0 +1 @@
+export * from './FloatingMenuPlugin';

package/index.js

@@ -0,0 +1 @@
+export * from './FloatingMenuPlugin';

package/model.d.ts

@@ -0,0 +1,17 @@
+export interface SliceModel {
+    name: string;
+    description: string;
+    id: string;
+    referenceType: string;
+    source: string;
+    from: string;
+    to: string;
+    ids: string[];
+}
+export interface FloatRuntime {
+    createSlice(slice: SliceModel): Promise<SliceModel>;
+    retrieveSlices(): Promise<SliceModel[]>;
+    insertInfoIconFloat(): void;
+    insertCitationFloat(): void;
+    insertReference(): Promise<SliceModel>;
+}

package/model.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,79 @@
+{
+   "name": "@modusoperandi/licit-floatingmenu",
+   "version": "0.1.0",
+   "type": "module",
+   "description": "licit-floatingmenu plugin built with ProseMirror",
+   "main": "index.js",
+   "types": "index.d.ts",
+   "style": "styles.css",
+   "license": "MIT",
+   "repository": {
+      "type": "git",
+      "url": "https://github.com/MO-Movia/licit-plugin-contrib-floatingmenu"
+   },
+   "scripts": {
+      "lint": "eslint src",
+      "test": "jest --coverage",
+      "test:unit": "jest",
+      "test:coverage": "jest --coverage",
+      "ci:build": "tsc --build tsconfig.prod.json && copyfiles --up 1 \"src/**/*.css\" dist  && copyfiles package.json LICENSE README.md dist",
+      "ci:bom": "npx @cyclonedx/cyclonedx-npm --ignore-npm-errors --short-PURLs --output-format XML --output-file dist/bom.xml",
+      "debug": "node --debug-brk --inspect ./node_modules/.bin/jest -i",
+      "verify": "npm run lint -- --fix && npm run ci:build && npm run test:coverage && echo 'All Tests Passed!'"
+   },
+   "peerDependencies": {
+      "@modusoperandi/licit-ui-commands": "^1.0.0",
+      "@modusoperandi/licit-referencing": "^1.0.0",
+      "prosemirror-model": "^1.19.4",
+      "prosemirror-state": "^1.4.2",
+      "prosemirror-transform": "^1.7.0",
+      "prosemirror-view": "^1.27.0",
+      "prosemirror-schema-basic": "^1.2.0",
+      "prosemirror-schema-list": "^1.2.0",
+      "prosemirror-utils": "^1.0.0"
+   },
+   "dependencies": {
+      "font-awesome": "^4.7.0"
+   },
+   "devDependencies": {
+      "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+      "@testing-library/jest-dom": "^6.4.1",
+      "@testing-library/react": "^16.0.0",
+      "@testing-library/user-event": "^14.4.3",
+      "@types/jest": "^29.0.2",
+      "@types/node": "^20.11.17",
+      "@types/orderedmap": "^2.0.0",
+      "@types/react": "^18.0.21",
+      "@types/react-dom": "^18.0.6",
+      "@typescript-eslint/eslint-plugin": "^7.0.0",
+      "@typescript-eslint/parser": "^7.0.2",
+      "copyfiles": "^2.4.1",
+      "enzyme": "^3.11.0",
+      "eslint": "^8.56.0",
+      "eslint-config-prettier": "^9.1.0",
+      "eslint-plugin-jest": "^28.2.0",
+      "eslint-plugin-prettier": "^5.1.3",
+      "eslint-plugin-react": "^7.24.0",
+      "husky": "^9.0.10",
+      "identity-obj-proxy": "^3.0.0",
+      "jest": "^29.3.1",
+      "jest-environment-jsdom": "^29.7.0",
+      "jest-junit": "^16.0.0",
+      "jest-mock-extended": "^3.0.4",
+      "jest-prosemirror": "^2.1.5",
+      "jest-sonar-reporter": "^2.0.0",
+      "lint-staged": "^15.2.1",
+      "prettier": "^3.0.0",
+      "stylelint-config-standard": "^36.0.0",
+      "stylelint-prettier": "^5.0.0",
+      "ts-jest": "^29.0.7",
+      "ts-node": "^10.4.0",
+      "typescript": "^5.3.3"
+   },
+   "importSort": {
+      ".js": {
+         "parser": "babylon",
+         "style": "module-grouping"
+      }
+   }
+}

package/slice.d.ts

@@ -0,0 +1,14 @@
+import { EditorView } from 'prosemirror-view';
+import { EditorState } from 'prosemirror-state';
+import { FloatRuntime, SliceModel } from './model';
+export declare function createSliceManager(runtime: FloatRuntime): {
+    setSlices: (slices: SliceModel[], state: EditorState) => void;
+    getDocSlices: () => SliceModel[];
+    getDocumentSlices: (_view: EditorView) => Promise<SliceModel[]>;
+    addSliceToList: (slice: SliceModel) => SliceModel[];
+    setSliceAttrs: (view: EditorView) => void;
+    addInfoIcon: () => void;
+    addCitation: () => void;
+    createSliceViaDialog: (props: SliceModel) => Promise<SliceModel>;
+    insertReference: () => Promise<SliceModel>;
+};

package/slice.js

@@ -0,0 +1,61 @@
+export function createSliceManager(runtime) {
+    let docSlices = [];
+    // store slices in cache
+    function setSlices(slices, state) {
+        const objectId = state.doc.attrs.objectId;
+        const filteredSlices = slices.filter((slice) => slice.source === objectId);
+        docSlices = [...docSlices, ...filteredSlices];
+    }
+    function getDocSlices() {
+        return docSlices;
+    }
+    // retrieve document slices from server
+    function getDocumentSlices(_view) {
+        return runtime?.retrieveSlices();
+    }
+    // add new slice to cache
+    function addSliceToList(slice) {
+        docSlices.push(slice);
+        return docSlices;
+    }
+    // apply slice attributes to the doc
+    function setSliceAttrs(view) {
+        const result = getDocSlices();
+        let tr = view.state.tr;
+        result.forEach((obj) => {
+            view.state.doc.descendants((nodeactual, pos) => {
+                if (nodeactual?.attrs?.objectId === obj?.from) {
+                    const newattrs = { ...nodeactual.attrs };
+                    const isDeco = { ...(newattrs.isDeco || {}) };
+                    isDeco.isSlice = true;
+                    newattrs.isDeco = isDeco;
+                    tr = tr.setNodeMarkup(pos, undefined, newattrs);
+                }
+            });
+        });
+        view.dispatch(tr);
+    }
+    function addInfoIcon() {
+        return runtime?.insertInfoIconFloat();
+    }
+    function addCitation() {
+        return runtime?.insertCitationFloat();
+    }
+    function createSliceViaDialog(props) {
+        return runtime?.createSlice(props);
+    }
+    function insertReference() {
+        return runtime?.insertReference();
+    }
+    return {
+        setSlices,
+        getDocSlices,
+        getDocumentSlices,
+        addSliceToList,
+        setSliceAttrs,
+        addInfoIcon,
+        addCitation,
+        createSliceViaDialog,
+        insertReference
+    };
+}

package/styles.css

@@ -0,0 +1 @@
+@import url("./ui/menu.css");

package/ui/menu.css

@@ -0,0 +1,52 @@
+/* Wrapper for each paragraph hamburger */
+.pm-hamburger-wrapper {
+  position: relative;
+  float: right;
+}
+
+/* Icon hidden by default */
+.float-icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+  margin-right: 6px;
+  color: #555;
+  font-size: 16px;
+  user-select: none;
+  opacity: 0; /* hidden initially */
+  transition: opacity 0.18s ease-in-out;
+}
+
+/* Show icon only when hovering over the paragraph */
+.ProseMirror p:hover .float-icon {
+  opacity: 1;
+}
+
+.context-menu {
+  position: absolute; /* positioned by createPopUp */
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 6px 8px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  z-index: 10000;
+
+  display: flex;
+  flex-direction: column;
+
+  /* 👇 important fix */
+  min-width: 180px;
+  min-height: 40px;
+}
+
+
+.context-menu__items {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ProseMirror[contenteditable="false"] .pm-hamburger-wrapper {
+  display: none !important;
+}