@shenjipo/mention-editor 0.1.0

package/dist/esm/index.d.mts

@@ -0,0 +1,31 @@
+import { Editor } from '@tiptap/core';
+
+interface MentionBridge {
+    items: MentionItem[];
+    selectedIndex: number;
+    select: (index: number) => void;
+    confirm: (index: number) => void;
+    setOptions: (val: Array<MentionItem>) => void;
+}
+interface MentionItem {
+    id: string;
+    label: string;
+    description?: string;
+}
+
+interface CreateMentionEditorOptions {
+    element: HTMLElement;
+    suggestionDom: HTMLElement;
+    bridge: MentionBridge;
+    content?: string;
+    onCommand?: (item: MentionItem) => void;
+    placeholder?: string;
+}
+interface MentionEditor {
+    editor: Editor;
+    destroy: () => void;
+    getJSON: () => any;
+}
+declare function createMentionEditor(options: CreateMentionEditorOptions): MentionEditor;
+
+export { type MentionBridge, type MentionEditor, type MentionItem, createMentionEditor };

package/dist/esm/index.mjs

@@ -0,0 +1,2 @@
+import{Editor as y}from"@tiptap/core";import u from"@tiptap/extension-document";import p from"@tiptap/extension-paragraph";import M from"@tiptap/extension-text";var d=[u,p,M];import E from"@tiptap/extension-mention";function s(e,t={}){let n=document.createElement(e);return Object.assign(n,t),n}function l(e){return()=>{let t=null,n=[],o=0,m;function a(){t&&(i(),t.innerHTML="",t.appendChild(e.suggestionDom))}let i=()=>{e.bridge.items=n,e.bridge.selectedIndex=o};return e.bridge.select=r=>{o=r,i()},e.bridge.confirm=r=>{m(n[r])},{onStart(r){console.log("onStart"),t=s("div",{className:"mention-menu"}),document.body.appendChild(t),f(t,r.clientRect()),n=r.items,m=r.command,o=0,a()},onUpdate(r){console.log("onUpdate"),n=r.items,o=0,a()},onKeyDown({event:r}){return r.key==="ArrowDown"?(console.log("ArrowDown"),o=(o+1)%n.length,i(),!0):r.key==="ArrowUp"?(console.log("ArrowUp"),o=(o-1+n.length)%n.length,i(),!0):r.key==="Enter"?(m(n[o]),!0):!1},onExit(){t?.remove(),t=null}}}}function f(e,t){e.style.position="absolute",e.style.left=`${t.left}px`,e.style.top=`${t.bottom+4}px`}function g(e){return{char:"/",startOfLine:!1,items:({query:t})=>e.bridge.items,command:({editor:t,range:n,props:o})=>{t.chain().focus().deleteRange(n).insertContent({type:"mention",attrs:{id:o.id,label:o.label}}).run(),e.onCommand?.(o)},render:l({suggestionDom:e.suggestionDom,bridge:e.bridge})}}function c(e){return E.configure({HTMLAttributes:{class:"mention","data-type":"mention"},suggestion:g(e),renderHTML({node:t}){return["span",{class:"mention","data-id":t.attrs.id,"data-label":t.attrs.label},t.attrs.label]}})}import b from"@tiptap/extension-placeholder";function x(e){let t=new y({element:e.element,extensions:[...d,c({onCommand:e.onCommand,suggestionDom:e.suggestionDom,bridge:e.bridge}),b.configure({placeholder:e.placeholder||"\u8BF7\u8F93\u5165...",emptyEditorClass:"is-editor-empty"})],content:e.content??""});return{editor:t,destroy:()=>t.destroy(),getJSON:()=>t.getJSON()}}export{x as createMentionEditor};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor.ts","../../src/schema/base.ts","../../src/mention/index.ts","../../src/utils/dom.ts","../../src/mention/renderer.ts","../../src/mention/suggestion.ts"],"sourcesContent":["import { Editor } from '@tiptap/core'\nimport { baseExtensions } from './schema/base'\nimport { createMentionExtension } from './mention/index'\nimport type { MentionBridge, MentionItem } from './mention/types'\nimport Placeholder from '@tiptap/extension-placeholder'\n\n\nexport interface CreateMentionEditorOptions {\n    element: HTMLElement\n    suggestionDom: HTMLElement,\n    bridge: MentionBridge,\n    content?: string\n    onCommand?: (item: MentionItem) => void,\n    placeholder?: string\n}\n\nexport interface MentionEditor {\n    editor: Editor\n    destroy: () => void\n    getJSON: () => any\n}\n\nexport function createMentionEditor(options: CreateMentionEditorOptions,): MentionEditor {\n    const editor = new Editor({\n        element: options.element,\n        extensions: [\n            ...baseExtensions,\n            createMentionExtension({\n                onCommand: options.onCommand,\n                suggestionDom: options.suggestionDom,\n                bridge: options.bridge\n            }),\n            Placeholder.configure({\n                placeholder: options.placeholder || '请输入...',\n                emptyEditorClass: 'is-editor-empty'\n            })\n        ],\n        content: options.content ?? '',\n    })\n\n    return {\n        editor,\n        destroy: () => editor.destroy(),\n        getJSON: () => editor.getJSON(),\n    }\n}\n","import Document from '@tiptap/extension-document'\nimport Paragraph from '@tiptap/extension-paragraph'\nimport Text from '@tiptap/extension-text'\n\nexport const baseExtensions = [\n    Document,\n    Paragraph,\n    Text,\n]\n","import Mention from '@tiptap/extension-mention'\nimport { createSuggestion } from './suggestion'\nimport type { MentionBridge, MentionItem } from './types'\n\ninterface MentionExtensionOptions {\n    onCommand?: (item: MentionItem) => void,\n    suggestionDom: HTMLElement,\n    bridge: MentionBridge,\n}\n\nexport function createMentionExtension(options: MentionExtensionOptions) {\n    return Mention.configure({\n        HTMLAttributes: {\n            class: 'mention',\n            'data-type': 'mention',\n        },\n        suggestion: createSuggestion(options),\n        renderHTML({ node }) {\n            return [\n                'span',\n                {\n                    class: 'mention',\n                    'data-id': node.attrs.id,\n                    'data-label': node.attrs.label,\n                },\n                node.attrs.label,\n            ]\n        }\n    })\n}\n","export function createElement<K extends keyof HTMLElementTagNameMap>(\n    tag: K,\n    props: Partial<HTMLElementTagNameMap[K]> = {},\n): HTMLElementTagNameMap[K] {\n    const el = document.createElement(tag)\n    Object.assign(el, props)\n    return el\n}\n","import type { MentionItem, MentionBridge } from './types'\nimport { createElement } from '../utils/dom'\n\nexport function createMentionRenderer(options: {\n    suggestionDom: HTMLElement\n    bridge: MentionBridge\n}) {\n    return () => {\n        let container: HTMLElement | null = null\n        let items: MentionItem[] = []\n        let selectedIndex = 0\n        let command: (item: MentionItem) => void\n\n        function render() {\n            if (!container) return\n            syncBridge()\n            container.innerHTML = ''\n            container!.appendChild(options.suggestionDom)\n        }\n\n        const syncBridge = () => {\n            options.bridge.items = items\n            options.bridge.selectedIndex = selectedIndex\n        }\n\n        options.bridge.select = (index: number) => {\n            selectedIndex = index\n            syncBridge()\n        }\n\n        options.bridge.confirm = (index: number) => {\n            command(items[index])\n        }\n\n        return {\n            onStart(props: any) {\n                console.log('onStart')\n                container = createElement('div', {\n                    className: 'mention-menu',\n                })\n\n                document.body.appendChild(container)\n                position(container, props.clientRect())\n\n                items = props.items\n                command = props.command\n                selectedIndex = 0\n                render()\n            },\n\n            onUpdate(props: any) {\n                console.log('onUpdate')\n                items = props.items\n                selectedIndex = 0\n                render()\n            },\n\n            onKeyDown({ event }: { event: KeyboardEvent }) {\n                if (event.key === 'ArrowDown') {\n                    console.log('ArrowDown')\n                    selectedIndex = (selectedIndex + 1) % items.length\n                    syncBridge()\n                    return true\n                }\n                if (event.key === 'ArrowUp') {\n                    console.log('ArrowUp')\n                    selectedIndex = (selectedIndex - 1 + items.length) % items.length\n                    syncBridge()\n                    return true\n                }\n                if (event.key === 'Enter') {\n                    command(items[selectedIndex])\n                    return true\n                }\n                return false\n            },\n\n            onExit() {\n                container?.remove()\n                container = null\n            },\n        }\n    }\n}\n\nfunction position(el: HTMLElement, rect: DOMRect) {\n    el.style.position = 'absolute'\n    el.style.left = `${rect.left}px`\n    el.style.top = `${rect.bottom + 4}px`\n}\n","import type { Editor } from '@tiptap/core'\nimport type { MentionBridge, MentionItem } from './types'\nimport { createMentionRenderer } from './renderer'\n\ninterface SuggestionOptions {\n    onCommand?: (item: MentionItem) => void,\n    suggestionDom: HTMLElement,\n    bridge: MentionBridge,\n}\n\ninterface CommandProps {\n    editor: Editor\n    range: { from: number; to: number }\n    props: MentionItem\n}\n\nexport function createSuggestion(options: SuggestionOptions) {\n    return {\n        char: '/',\n        startOfLine: false,\n\n        items: ({ query }: { query: string }): MentionItem[] => {\n            // const list: MentionItem[] = [\n            //     { id: 'summary', label: '总结' },\n            //     { id: 'translate', label: '翻译' },\n            //     { id: 'rewrite', label: '改写' },\n            // ]\n\n            // if (!query) return list\n            return options.bridge.items\n        },\n\n        command: ({ editor, range, props }: CommandProps) => {\n            editor.chain().focus().deleteRange(range).insertContent({\n                type: 'mention',\n                attrs: {\n                    id: props.id,\n                    label: props.label,\n                },\n            }).run()\n\n            options.onCommand?.(props)\n        },\n\n        render: createMentionRenderer({\n            suggestionDom: options.suggestionDom,\n            bridge: options.bridge\n        }),\n    \n    }\n}\n"],"mappings":"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","names":["Editor","Document","Paragraph","Text","baseExtensions","Mention","createElement","tag","props","el","createMentionRenderer","options","container","items","selectedIndex","command","render","syncBridge","index","props","createElement","position","event","el","rect","createSuggestion","options","query","editor","range","props","createMentionRenderer","createMentionExtension","options","Mention","createSuggestion","node","Placeholder","createMentionEditor","options","editor","Editor","baseExtensions","createMentionExtension"]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@shenjipo/mention-editor",
+  "version": "0.1.0",
+  "module": "dist/esm/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "types": "./dist/esm/index.d.mts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build:watch": "tsup --watch",
+    "build": "tsup"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.10.0",
+  "dependencies": {
+    "@tiptap/core": "2.7.1",
+    "@tiptap/extension-document": "2.7.1",
+    "@tiptap/extension-text": "2.7.1",
+    "@tiptap/extension-paragraph": "2.7.1",
+    "@tiptap/extension-mention": "2.7.1",
+    "@tiptap/extension-placeholder": "2.7.1",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-model": "^1.21.0",
+    "prosemirror-view": "^1.33.7"
+  },
+  "main": "index.js",
+  "devDependencies": {},
+  "description": ""
+}