owl-tiptap 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "owl-tiptap",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "tiptap used in odoo owl2",
   "main": "es/index.js",
   "scripts": {

package/es/components/tag-input/GroupExample.d.ts

@@ -1,24 +0,0 @@
-import { type SuggestionItem, type GroupItem } from './TagInput';
-export declare function ExampleUsage(): {
-    normalTagInput: {
-        items: ({ query }: {
-            query: string;
-        }) => SuggestionItem[];
-    };
-    structuredGroupedTagInput: {
-        items: ({ query }: {
-            query: string;
-        }) => ({
-            items: any;
-            value: string;
-            label?: string;
-            disabled?: boolean;
-        } | {
-            items: any;
-            group: string;
-        })[];
-        slots: {
-            listGroupHeader: (item: GroupItem) => string;
-        };
-    };
-};

package/es/components/tag-input/GroupExample.js

@@ -1,54 +0,0 @@
-// 示例1: 普通列表（保持原有结构）
-const normalItems = [
-    { value: 'apple', label: '苹果' },
-    { value: 'banana', label: '香蕉' },
-    { value: 'orange', label: '橙子' },
-];
-// 示例2: 分组列表（通过GroupItem结构）
-const structuredGroupedItems = [
-    {
-        group: '水果',
-        items: [
-            { value: 'apple', label: '苹果' },
-            { value: 'banana', label: '香蕉' },
-            { value: 'orange', label: '橙子' },
-        ],
-    },
-    {
-        group: '蔬菜',
-        items: [
-            { value: 'carrot', label: '胡萝卜' },
-            { value: 'broccoli', label: '西兰花' },
-            { value: 'tomato', label: '西红柿' },
-        ],
-    },
-];
-// 使用示例
-export function ExampleUsage() {
-    return {
-        // 普通列表用法（与之前完全相同）
-        normalTagInput: {
-            items: ({ query }) => {
-                return normalItems.filter((item) => item.label?.toLowerCase().includes(query.toLowerCase()));
-            },
-        },
-        // 分组列表用法（通过GroupItem结构）
-        structuredGroupedTagInput: {
-            items: ({ query }) => {
-                // 对于结构化分组，需要过滤每个分组内的项目
-                return structuredGroupedItems
-                    .map((group) => ({
-                    ...group,
-                    items: group.items.filter((item) => item.label?.toLowerCase().includes(query.toLowerCase())),
-                }))
-                    .filter((group) => group.items.length > 0); // 只返回有匹配项的分组
-            },
-            // 自定义分组标题样式
-            slots: {
-                listGroupHeader: (item) => {
-                    return `<div style="color: #666; font-weight: bold; padding: 6px 8px; background: #f5f5f5;">${item.group}</div>`;
-                },
-            },
-        },
-    };
-}

package/es/components/tag-input/SuggestionList.d.ts

@@ -1,67 +0,0 @@
-import { Component } from '@odoo/owl';
-export interface SuggestionItem {
-    value: string;
-    label?: string;
-    disabled?: boolean;
-    [key: string]: any;
-}
-export interface GroupItem {
-    group: string;
-    items: SuggestionItem[];
-    [key: string]: any;
-}
-export type ListItem = SuggestionItem | GroupItem;
-interface SuggestionListProps {
-    items: ListItem[];
-    onSelect: (event: MouseEvent, item: SuggestionItem) => void;
-    slots?: {
-        listHeader?: any;
-        listItem?: any;
-        listGroupHeader?: any;
-        listEmpty?: any;
-        listFooter?: any;
-    };
-    className?: string;
-}
-interface SuggestionListState {
-    selectedItem: SuggestionItem | null;
-}
-export declare class SuggestionList extends Component<SuggestionListProps> {
-    static props: {
-        items: {
-            type: ArrayConstructor;
-        };
-        onSelect: {
-            type: FunctionConstructor;
-        };
-        slots: {
-            type: ObjectConstructor;
-            optional: boolean;
-        };
-        className: {
-            type: StringConstructor;
-            optional: boolean;
-        };
-    };
-    /**
-     * 检查项目是否为分组项
-     */
-    private isGroupItem;
-    /**
-     * 获取处理后的项目列表
-     */
-    get processedItems(): ListItem[];
-    static template: string;
-    state: SuggestionListState;
-    listRef: {
-        el: HTMLElement;
-    };
-    onSelect(ev: MouseEvent, item: SuggestionItem): void;
-    setup(): void;
-    onKeyDown: (event: KeyboardEvent) => void;
-    upHandler(): void;
-    downHandler(): void;
-    enterHandler(event: KeyboardEvent): void;
-    scrollIntoView(): void;
-}
-export {};

package/es/components/tag-input/SuggestionList.js

@@ -1,215 +0,0 @@
-import { Component, xml, useState, useEffect, useRef } from '@odoo/owl';
-import { classNames } from '../../utils/classNames';
-export class SuggestionList extends Component {
-    constructor() {
-        super(...arguments);
-        this.state = useState({
-            selectedItem: null,
-        });
-        this.listRef = useRef('list');
-        this.onKeyDown = (event) => {
-            if (event.key === 'ArrowUp') {
-                this.upHandler();
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-            else if (event.key === 'ArrowDown') {
-                this.downHandler();
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-            else if (event.key === 'Enter') {
-                this.enterHandler(event);
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-        };
-    }
-    /**
-     * 检查项目是否为分组项
-     */
-    isGroupItem(item) {
-        return item && typeof item === 'object' && 'group' in item;
-    }
-    /**
-     * 获取处理后的项目列表
-     */
-    get processedItems() {
-        // 检查是否有分组项结构
-        const hasGroupItems = this.props.items.some((item) => this.isGroupItem(item));
-        // 如果有分组项，则直接返回
-        if (hasGroupItems) {
-            return this.props.items;
-        }
-        // 否则返回原始项目（普通列表）
-        return this.props.items;
-    }
-    onSelect(ev, item) {
-        if (!item.disabled) {
-            this.props.onSelect?.(ev, item);
-        }
-    }
-    setup() {
-        useEffect(() => {
-            // 找到第一个非禁用且非分组标题的项
-            let selectedItem = null;
-            for (const item of this.processedItems) {
-                if (this.isGroupItem(item)) {
-                    // 如果是分组项，查找分组内的第一个非禁用项
-                    const firstSelectable = item.items.find((subItem) => !subItem.disabled);
-                    if (firstSelectable) {
-                        selectedItem = firstSelectable;
-                        break;
-                    }
-                }
-                else {
-                    // 如果是普通项且非禁用
-                    selectedItem = item;
-                    break;
-                }
-            }
-            if (this.state.selectedItem?.value !== selectedItem?.value) {
-                this.state.selectedItem = selectedItem;
-            }
-        }, () => [this.props.items]);
-        useEffect(() => {
-            window.addEventListener('keydown', this.onKeyDown, true);
-            return () => {
-                window.removeEventListener('keydown', this.onKeyDown, true);
-            };
-        }, () => [this.props.items]);
-        useEffect(() => {
-            this.scrollIntoView();
-        });
-    }
-    upHandler() {
-        const { selectedItem } = this.state;
-        // 收集所有可选择的项目
-        const selectableItems = [];
-        for (const item of this.processedItems) {
-            if (this.isGroupItem(item)) {
-                // 如果是分组项，添加分组内的非禁用项
-                selectableItems.push(...item.items.filter((subItem) => !subItem.disabled));
-            }
-            else {
-                // 如果是普通项且非禁用
-                selectableItems.push(item);
-            }
-        }
-        if (!selectableItems.length) {
-            return;
-        }
-        const selectedIndex = selectableItems.indexOf(selectedItem);
-        const newIndex = (selectedIndex - 1 + selectableItems.length) % selectableItems.length;
-        this.state.selectedItem = selectableItems[newIndex];
-    }
-    downHandler() {
-        const { selectedItem } = this.state;
-        // 收集所有可选择的项目
-        const selectableItems = [];
-        for (const item of this.processedItems) {
-            if (this.isGroupItem(item)) {
-                // 如果是分组项，添加分组内的非禁用项
-                selectableItems.push(...item.items.filter((subItem) => !subItem.disabled));
-            }
-            else {
-                // 如果是普通项且非禁用
-                selectableItems.push(item);
-            }
-        }
-        if (!selectableItems.length) {
-            return;
-        }
-        const selectedIndex = selectableItems.indexOf(selectedItem);
-        const newIndex = (selectedIndex + 1) % selectableItems.length;
-        this.state.selectedItem = selectableItems[newIndex];
-    }
-    enterHandler(event) {
-        if (this.state.selectedItem) {
-            this.props.onSelect(event, this.state.selectedItem);
-        }
-    }
-    scrollIntoView() {
-        if (!this.listRef.el || !this.state.selectedItem) {
-            return;
-        }
-        const selectedItemEl = this.listRef.el.querySelector(`[data-value="${this.state.selectedItem.value}"]`);
-        if (selectedItemEl) {
-            const listRect = this.listRef.el.getBoundingClientRect();
-            const itemRect = selectedItemEl.getBoundingClientRect();
-            const listStyle = window.getComputedStyle(this.listRef.el);
-            const paddingTop = parseFloat(listStyle.paddingTop);
-            const paddingBottom = parseFloat(listStyle.paddingBottom);
-            if (itemRect.bottom > listRect.bottom - paddingBottom) {
-                this.listRef.el.scrollTop += itemRect.bottom - (listRect.bottom - paddingBottom);
-            }
-            else if (itemRect.top < listRect.top + paddingTop) {
-                this.listRef.el.scrollTop -= listRect.top + paddingTop - itemRect.top;
-            }
-        }
-    }
-}
-SuggestionList.props = {
-    items: { type: Array },
-    onSelect: { type: Function },
-    slots: { type: Object, optional: true },
-    className: { type: String, optional: true },
-};
-SuggestionList.template = xml `
-    <div class="${classNames('&suggestion-list')}" t-att-class="props.className" t-on-mousedown="(event) => event.preventDefault()" t-ref="list">
-      <t t-slot="listHeader"/>
-
-      <t t-if="processedItems.length">
-        <t t-foreach="processedItems" t-as="item" t-key="item.value || item.group">
-          <!-- 分组项 -->
-          <t t-if="this.isGroupItem(item)">
-            <div class="${classNames('&suggestion-header')}">
-              <t t-slot="listGroupHeader" item="item">
-                <span t-esc="item.group" />
-                <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15717" width="200" height="200"><path d="M320 928c-9.6 0-16-3.2-22.4-9.6-12.8-12.8-12.8-32 0-44.8L659.2 512 297.6 150.4c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0l384 384c12.8 12.8 12.8 32 0 44.8l-384 384c-6.4 6.4-12.8 9.6-22.4 9.6z" fill="#333333" p-id="15718"></path></svg>
-              </t>
-            </div>
-            <t t-foreach="item.items" t-as="subItem" t-key="subItem.value">
-              <div
-                t-att-class="{
-                  'is-selected': subItem.value === state.selectedItem?.value,
-                  'is-disabled': subItem.disabled,
-                }"
-                t-on-click="(ev) => this.onSelect(ev, subItem)"
-                t-att-data-value="subItem.value"
-              >
-                <t t-slot="listItem" item="subItem">
-                  <t t-esc="subItem.label" />
-                </t>
-              </div>
-            </t>
-          </t>
-          <!-- 普通项 -->
-          <t t-else="">
-            <div
-              t-att-class="{
-                'is-selected': item.value === state.selectedItem?.value,
-                'is-disabled': item.disabled,
-              }"
-              t-on-click="(ev) => this.onSelect(ev, item)"
-              t-att-data-value="item.value"
-            >
-              <t t-slot="listItem" item="item">
-                <t t-esc="item.label" />
-              </t>
-            </div>
-          </t>
-        </t>
-      </t>
-
-      <t t-else="">
-        <div class="is-empty">
-          <t t-slot="listEmpty" item="item">
-            没有匹配项
-          </t>
-        </div>
-      </t>
-
-      <t t-slot="listFooter"/>
-    </div>
-  `;

package/es/components/tag-input/TagInput.css

@@ -1,145 +0,0 @@
-.ott-tag-input {
-  --ott-primary-color: rgb(22, 119, 255);
-  --ott-border-color: rgb(204, 204, 204);
-  --ott-placeholder-color: rgb(173, 181, 189);
-  --ott-text-color-secondary: rgb(136, 136, 136);
-  --ott-primary-color-08: rgba(22, 119, 255, 0.8);
-  --ott-primary-color-02: rgba(22, 119, 255, 0.2);
-  --ott-primary-color-04: rgba(22, 119, 255, 0.4);
-  --ott-primary-color-01: rgba(22, 119, 255, 0.1);
-  position: relative;
-  background-color: white;
-}
-.ott-tag-input.disabled {
-  cursor: not-allowed;
-  background-color: #f5f5f5;
-  opacity: 0.7;
-}
-.ott-tag-input.disabled .ProseMirror {
-  background-color: #f5f5f5;
-  border-color: #e0e0e0;
-  color: #999;
-  pointer-events: none;
-}
-.ott-tag-input.disabled .tag-wrapper .tag {
-  pointer-events: none;
-}
-.ott-tag-input .ott-suggestion-header {
-  font-weight: normal;
-  color: var(--ott-text-color-secondary);
-  background-color: #f5f5f5;
-  cursor: default !important;
-  padding: 6px 8px;
-  border-bottom: 1px solid #eee;
-  margin-top: 3px;
-  display: flex;
-  align-items: center;
-}
-.ott-tag-input .ott-suggestion-header:first-child {
-  margin-top: 0;
-}
-.ott-tag-input .ott-suggestion-header .svg-icon {
-  width: 14px;
-  height: 14px;
-}
-.ott-tag-input .ott-suggestion-header:hover {
-  background-color: #f5f5f5 !important;
-  color: var(--ott-text-color-secondary) !important;
-}
-.ott-tag-input .ProseMirror {
-  padding: 8px;
-  border: 1px solid var(--ott-border-color);
-  border-radius: 4px;
-}
-.ott-tag-input .ProseMirror:focus {
-  outline: none;
-  border-color: var(--ott-primary-color-08);
-  box-shadow: 0 0 0 2px var(--ott-primary-color-02);
-}
-.ott-tag-input .ProseMirror p {
-  margin: 0;
-}
-.ott-tag-input .ProseMirror p.is-editor-empty:first-child::before {
-  content: attr(data-placeholder);
-  float: left;
-  color: var(--ott-placeholder-color);
-  pointer-events: none;
-  height: 0;
-}
-.ott-tag-input .tag-wrapper {
-  display: inline-flex;
-  padding: 0 2px;
-  align-items: center;
-}
-.ott-tag-input .tag-wrapper .tag {
-  min-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  background-color: var(--ott-primary-color);
-  border: none;
-  border-radius: 3px;
-  padding: 2px 8px;
-  color: white;
-  white-space: nowrap;
-  transition: all 0.2s;
-  font-size: 12px;
-  box-sizing: border-box;
-  line-height: 1;
-}
-.ott-tag-input .tag-wrapper .tag:hover {
-  cursor: pointer;
-}
-.ott-tag-input .tag-wrapper .tag .close-button {
-  margin-left: 2px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  transition: all 0.2s;
-}
-.ott-tag-input .tag-wrapper .tag .close-button:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: white;
-}
-.ott-tag-input .ott-suggestion-list-wrapper {
-  position: absolute;
-  z-index: 10;
-  left: 0;
-  right: 0;
-}
-.ott-tag-input .ott-suggestion-list {
-  background: white;
-  max-height: 200px;
-  border: 1px solid var(--ott-primary-color-04);
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  overflow: auto;
-  padding: 3px;
-}
-.ott-tag-input .ott-suggestion-list div {
-  padding: 3px 8px;
-  cursor: pointer;
-}
-.ott-tag-input .ott-suggestion-list div.is-selected, .ott-tag-input .ott-suggestion-list div:hover {
-  background-color: var(--ott-primary-color-01);
-  color: var(--ott-primary-color);
-}
-.ott-tag-input .ott-suggestion-list div.is-empty {
-  color: var(--ott-text-color-secondary);
-  cursor: default;
-}
-.ott-tag-input .ott-suggestion-list div.is-disabled {
-  color: var(--ott-text-color-secondary);
-  cursor: not-allowed;
-}
-.ott-tag-input .ott-suggestion-list div.is-disabled.is-selected, .ott-tag-input .ott-suggestion-list div.is-disabled:hover {
-  background-color: transparent;
-  color: var(--ott-text-color-secondary);
-}

package/es/components/tag-input/TagInput.d.ts

@@ -1,154 +0,0 @@
-import { Component } from '@odoo/owl';
-import { Editor } from '@tiptap/core';
-import { SuggestionList } from './SuggestionList';
-import type { SuggestionItem, ListItem } from './SuggestionList';
-export type { SuggestionItem, ListItem, GroupItem } from './SuggestionList';
-import './TagInput.css';
-export interface TagAttributes {
-    value: string;
-    label?: string;
-    group?: string;
-    [key: string]: any;
-}
-export interface TagNode {
-    node: any;
-    pos: number;
-}
-interface SuggestionState {
-    visible: boolean;
-    range: {
-        from: number;
-        to: number;
-    };
-    items: SuggestionItem[];
-    style: string;
-}
-interface TagInputState {
-    editor: Editor | null;
-    suggestion: SuggestionState;
-}
-interface TagInputProps {
-    className?: string;
-    ref?: (component: TagInput) => void;
-    placeholder?: string;
-    slots?: {
-        listHeader?: any;
-        listItem?: any;
-        listGroupHeader?: any;
-        listEmpty?: any;
-        listFooter?: any;
-    };
-    suggestionListClassName?: string;
-    onSuggestionSelect?: (event: MouseEvent, item: SuggestionItem) => void;
-    items?: (params: {
-        query: string;
-    }) => ListItem[];
-    onChange?: (content: any) => void;
-    readonly?: boolean;
-    onTagClick?: (index: number, attrs: TagAttributes) => void;
-    char?: string;
-}
-export declare class TagInput extends Component<TagInputProps> {
-    static components: {
-        SuggestionList: typeof SuggestionList;
-    };
-    static props: {
-        className: {
-            type: StringConstructor;
-            optional: boolean;
-        };
-        ref: {
-            type: FunctionConstructor;
-            optional: boolean;
-        };
-        placeholder: {
-            type: StringConstructor;
-            optional: boolean;
-        };
-        slots: {
-            type: ObjectConstructor;
-            optional: boolean;
-        };
-        suggestionListClassName: {
-            type: StringConstructor;
-            optional: boolean;
-        };
-        onSuggestionSelect: {
-            type: FunctionConstructor;
-            optional: boolean;
-        };
-        items: {
-            type: FunctionConstructor;
-            optional: boolean;
-        };
-        onChange: {
-            type: FunctionConstructor;
-            optional: boolean;
-        };
-        readonly: {
-            type: BooleanConstructor;
-            optional: boolean;
-        };
-        onTagClick: {
-            type: FunctionConstructor;
-            optional: boolean;
-        };
-        char: {
-            type: StringConstructor;
-            optional: boolean;
-        };
-    };
-    static template: string;
-    static defaultProps: {
-        items: () => any[];
-        readonly: boolean;
-        char: string;
-    };
-    editorRef: {
-        el: HTMLElement;
-    };
-    state: TagInputState;
-    get className(): string;
-    onSuggestionSelect(event: MouseEvent, item: SuggestionItem): void;
-    updateSuggestion(props: any, options?: Partial<SuggestionState>): void;
-    /**
-     * Serializes the current content of the editor.
-     * @returns {object} The content as a JSON object.
-     */
-    getContent(): any;
-    /**
-     * Deserializes content into the editor.
-     * @param {object} content - The content to set, as a JSON object.
-     */
-    setContent(content: any): void;
-    /**
-     * Adds a tag to the editor.
-     * @param {object} range - The range of the tag
-     * @param {number} range.from - The start position of the tag.
-     * @param {number} range.to - The end position of the tag.
-     * @param {object} props - The properties of the tag.
-     */
-    addTag(range: {
-        from: number;
-        to: number;
-    }, props: TagAttributes): void;
-    /**
-     * Removes a tag from the editor by its index.
-     * @param {number} index - The index of the tag to remove.
-     */
-    removeTag(index: number): void;
-    /**
-     * Replaces a tag at a specific index with a new tag.
-     * @param {number} index - The index of the tag to replace.
-     * @param {object} props - The properties of the new tag.
-     */
-    replaceTag(index: number, props: TagAttributes): void;
-    /**
-     * Gets all tag nodes from the editor.
-     * @returns {Array} An array of tag nodes with their positions.
-     */
-    getTags(): TagNode[];
-    renderEditor(): void;
-    destroyEditor(): void;
-    setup(): void;
-}

package/es/components/tag-input/TagInput.js

@@ -1,256 +0,0 @@
-import { Component, xml, useRef, onMounted, useEffect, useState, markRaw } from '@odoo/owl';
-import { classNames } from '../../utils/classNames';
-import { Editor } from '@tiptap/core';
-import Document from '@tiptap/extension-document';
-import Text from '@tiptap/extension-text';
-import Paragraph from '@tiptap/extension-paragraph';
-import History from '@tiptap/extension-history';
-import Placeholder from '@tiptap/extension-placeholder';
-import { SuggestionList } from './SuggestionList';
-import { TagNode } from './TagNode';
-import { SuggestionPlugin } from './suggestion';
-import './TagInput.css';
-export class TagInput extends Component {
-    constructor() {
-        super(...arguments);
-        this.editorRef = useRef('editor');
-        this.state = useState({
-            editor: null,
-            suggestion: {
-                visible: false,
-                range: {
-                    from: 0,
-                    to: 0,
-                },
-                items: [],
-                style: '',
-            },
-        });
-    }
-    get className() {
-        const disabledClass = this.props.readonly ? 'disabled' : '';
-        return classNames('&tag-input', this.props.className, disabledClass);
-    }
-    onSuggestionSelect(event, item) {
-        this.props.onSuggestionSelect?.(event, item);
-        if (!event.cancelBubble) {
-            this.addTag(this.state.suggestion.range, item);
-        }
-    }
-    updateSuggestion(props, options = {}) {
-        const clientRect = props.clientRect();
-        const editorRect = this.editorRef.el.getBoundingClientRect();
-        const { innerHeight } = window;
-        let style = '';
-        if (clientRect.bottom + 200 > innerHeight) {
-            style = `bottom: ${editorRect.height}px`;
-        }
-        else {
-            style = `top: ${editorRect.height}`;
-        }
-        this.state.suggestion = {
-            ...this.state.suggestion,
-            range: props.range,
-            items: props.items,
-            style,
-            ...options,
-        };
-    }
-    /**
-     * Serializes the current content of the editor.
-     * @returns {object} The content as a JSON object.
-     */
-    getContent() {
-        const json = this.state.editor.getJSON();
-        const { content } = json;
-        if (content.length === 1 && content[0].type === 'paragraph' && !content[0].content) {
-            return null;
-        }
-        return json;
-    }
-    /**
-     * Deserializes content into the editor.
-     * @param {object} content - The content to set, as a JSON object.
-     */
-    setContent(content) {
-        this.state.editor.commands.setContent(content);
-    }
-    /**
-     * Adds a tag to the editor.
-     * @param {object} range - The range of the tag
-     * @param {number} range.from - The start position of the tag.
-     * @param {number} range.to - The end position of the tag.
-     * @param {object} props - The properties of the tag.
-     */
-    addTag(range, props) {
-        this.state
-            .editor.chain()
-            .focus()
-            .insertContentAt(range, {
-            type: 'tag',
-            attrs: props,
-        })
-            .run();
-    }
-    /**
-     * Removes a tag from the editor by its index.
-     * @param {number} index - The index of the tag to remove.
-     */
-    removeTag(index) {
-        const tags = this.getTags();
-        const tagToRemove = tags[index];
-        if (tagToRemove) {
-            const { node, pos } = tagToRemove;
-            const from = pos;
-            const to = pos + node.nodeSize;
-            this.state.editor.chain().focus().deleteRange({ from, to }).run();
-        }
-    }
-    /**
-     * Replaces a tag at a specific index with a new tag.
-     * @param {number} index - The index of the tag to replace.
-     * @param {object} props - The properties of the new tag.
-     */
-    replaceTag(index, props) {
-        const tags = this.getTags();
-        const tagToReplace = tags[index];
-        if (tagToReplace) {
-            const { node, pos } = tagToReplace;
-            const from = pos;
-            const to = pos + node.nodeSize;
-            this.state
-                .editor.chain()
-                .focus()
-                .insertContentAt({ from, to }, {
-                type: 'tag',
-                attrs: props,
-            })
-                .run();
-        }
-    }
-    /**
-     * Gets all tag nodes from the editor.
-     * @returns {Array} An array of tag nodes with their positions.
-     */
-    getTags() {
-        const tags = [];
-        this.state.editor.state.doc.descendants((node, pos) => {
-            if (node.type.name === 'tag') {
-                tags.push({ node, pos });
-            }
-        });
-        return tags;
-    }
-    renderEditor() {
-        this.destroyEditor();
-        this.state.editor = markRaw(new Editor({
-            element: this.editorRef.el,
-            editable: !this.props.readonly,
-            extensions: [
-                Document,
-                Text,
-                Paragraph,
-                History,
-                Placeholder.configure({
-                    placeholder: this.props.placeholder || `请输入文本，按${this.props.char}选择标签...`,
-                }),
-                TagNode.configure({
-                    readonly: this.props.readonly,
-                    onTagClick: (attrs, pos) => {
-                        if (this.props.onTagClick) {
-                            const tags = this.getTags();
-                            const index = tags.findIndex((tag) => tag.pos === pos);
-                            if (index !== -1) {
-                                this.props.onTagClick(index, attrs);
-                            }
-                        }
-                    },
-                }),
-                SuggestionPlugin.configure({
-                    char: this.props.char,
-                    items: this.props.items,
-                    render: () => {
-                        return {
-                            onStart: (props) => {
-                                if (props.text !== this.props.char) {
-                                    return;
-                                }
-                                this.updateSuggestion(props, { visible: true });
-                            },
-                            onUpdate: (props) => {
-                                this.updateSuggestion(props);
-                            },
-                            onExit: (props) => {
-                                this.state.suggestion.visible = false;
-                            },
-                        };
-                    },
-                }),
-            ],
-            content: null,
-            onBlur: ({ editor }) => {
-                // this.state.suggestion.visible = false;
-                // exitSuggestionPlugin(editor.view);
-            },
-            onUpdate: ({ editor, transaction }) => {
-                if (transaction.docChanged) {
-                    this.props.onChange?.(this.getContent());
-                }
-            },
-        }));
-    }
-    destroyEditor() {
-        this.state.editor?.destroy();
-    }
-    setup() {
-        onMounted(() => {
-            this.props.ref?.(this);
-        });
-        useEffect(() => {
-            if (this.state.editor) {
-                const content = this.getContent();
-                this.destroyEditor();
-                this.renderEditor();
-                this.setContent(content);
-            }
-        }, () => [this.props.readonly]);
-        useEffect(() => {
-            this.renderEditor();
-            return () => {
-                this.destroyEditor();
-            };
-        }, () => []);
-    }
-}
-TagInput.components = { SuggestionList };
-TagInput.props = {
-    className: { type: String, optional: true },
-    ref: { type: Function, optional: true },
-    placeholder: { type: String, optional: true },
-    slots: { type: Object, optional: true },
-    suggestionListClassName: { type: String, optional: true },
-    onSuggestionSelect: { type: Function, optional: true },
-    items: { type: Function, optional: true },
-    onChange: { type: Function, optional: true },
-    readonly: { type: Boolean, optional: true },
-    onTagClick: { type: Function, optional: true },
-    char: { type: String, optional: true },
-};
-TagInput.template = xml `
-<div t-att-class="className">
-  <div t-ref="editor"/>
-  <div t-if="state.suggestion.visible" t-att-style="state.suggestion.style" class="ott-suggestion-list-wrapper">
-    <SuggestionList
-      className="props.suggestionListClassName"
-      items="state.suggestion.items"
-      onSelect.bind="onSuggestionSelect"
-      slots="props.slots"
-    />
-  </div>
-</div>
-  `;
-TagInput.defaultProps = {
-    items: () => [],
-    readonly: false,
-    char: '@',
-};

package/es/components/tag-input/TagNode.d.ts

@@ -1,9 +0,0 @@
-import { Node } from '@tiptap/core';
-import { TagAttributes } from './TagInput';
-interface TagNodeOptions {
-    onTagClick: (attrs: TagAttributes, pos: number) => void;
-    renderLabel?: (attrs: TagAttributes) => string;
-    readonly?: boolean;
-}
-export declare const TagNode: Node<TagNodeOptions, any>;
-export {};

package/es/components/tag-input/TagNode.js

@@ -1,81 +0,0 @@
-import { Node } from '@tiptap/core';
-const closeSVG = `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14">
-          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
-export const TagNode = Node.create({
-    name: 'tag',
-    group: 'inline',
-    inline: true,
-    selectable: false,
-    atom: true,
-    addOptions() {
-        return {
-            onTagClick: () => { },
-            readonly: false, // 默认不只读
-        };
-    },
-    addAttributes() {
-        return {
-            value: {
-                default: null,
-            },
-            label: {
-                default: null,
-            },
-            group: {
-                default: null,
-            },
-        };
-    },
-    addNodeView() {
-        // We can implement an Owl NodeView here later if complex rendering is needed.
-        // For now, renderHTML is sufficient.
-        return ({ node, getPos, editor }) => {
-            const { readonly } = this.options; // 从 options 中获取当前状态
-            console.log(readonly);
-            const wrapper = document.createElement('span');
-            wrapper.classList.add('tag-wrapper');
-            const dom = document.createElement('span');
-            // Get attributes directly from the node being rendered
-            const { label, ...attrs } = node.attrs;
-            // Set data attributes
-            Object.entries(attrs).forEach(([key, value]) => {
-                if (value !== null) {
-                    dom.setAttribute(`data-${key}`, value);
-                }
-            });
-            dom.setAttribute('data-type', 'tag');
-            dom.classList.add('tag'); // Add a class for styling
-            if (!readonly) {
-                dom.addEventListener('click', () => {
-                    this.options.onTagClick(node.attrs, getPos());
-                });
-            }
-            const labelSpan = document.createElement('span');
-            labelSpan.textContent = label; // Set the visible text
-            dom.appendChild(labelSpan);
-            if (!readonly) {
-                const closeButton = document.createElement('button');
-                closeButton.classList.add('close-button');
-                closeButton.innerHTML = closeSVG;
-                closeButton.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    const pos = getPos();
-                    editor.view.dispatch(editor.view.state.tr.delete(pos, pos + node.nodeSize));
-                    editor.view.focus();
-                });
-                dom.appendChild(closeButton);
-            }
-            wrapper.appendChild(dom);
-            return {
-                dom: wrapper,
-                update: (updatedNode) => {
-                    debugger;
-                    return true;
-                },
-            };
-        };
-    },
-});

package/es/components/tag-input/suggestion.d.ts

@@ -1,16 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { ListItem } from './SuggestionList';
-import { PluginKey } from 'prosemirror-state';
-interface SuggestionPluginOptions {
-    char?: string;
-    allowedPrefixes?: string[] | null;
-    items?: (params: {
-        query: string;
-    }) => ListItem[];
-    command?: (props: any) => void;
-    render?: () => any;
-}
-export declare const MySuggestionPluginKey: PluginKey<any>;
-export declare const exitSuggestionPlugin: (view: any) => void;
-export declare const SuggestionPlugin: Extension<SuggestionPluginOptions, any>;
-export {};

package/es/components/tag-input/suggestion.js

@@ -1,26 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Suggestion } from '@tiptap/suggestion';
-import { PluginKey } from 'prosemirror-state'; // optional, if you need to create a custom key
-import { exitSuggestion } from '@tiptap/suggestion';
-export const MySuggestionPluginKey = new PluginKey('my-suggestions'); // or use the default 'suggestion'
-export const exitSuggestionPlugin = (view) => {
-    exitSuggestion(view, MySuggestionPluginKey);
-};
-export const SuggestionPlugin = Extension.create({
-    name: 'suggestionPlugin',
-    addOptions() {
-        return {
-            allowedPrefixes: null, // Default Tiptap behavior
-            command: () => { },
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            Suggestion({
-                pluginKey: MySuggestionPluginKey,
-                editor: this.editor,
-                ...this.options,
-            }),
-        ];
-    },
-});

package/es/index.d.ts

@@ -1,2 +0,0 @@
-import { TagInput } from './components/tag-input/TagInput';
-export { TagInput };

package/es/index.js

@@ -1,2 +0,0 @@
-import { TagInput } from './components/tag-input/TagInput';
-export { TagInput };

package/es/utils/classNames.d.ts

@@ -1,6 +0,0 @@
-/**
- * 自定义className合并函数，用于给带&的className添加前缀
- * @param names - 需要合并的className字符串
- * @returns 合并后的className字符串
- */
-export declare const classNames: (...names: string[]) => string;

package/es/utils/classNames.js

@@ -1,22 +0,0 @@
-import _classNames from 'classnames';
-const PREFIX = 'ott';
-/**
- * 自定义className合并函数，用于给带&的className添加前缀
- * @param names - 需要合并的className字符串
- * @returns 合并后的className字符串
- */
-export const classNames = (...names) => {
-    const result = _classNames(...names);
-    if (result === '') {
-        return '';
-    }
-    return result
-        .split(' ')
-        .map((name) => {
-        if (name.startsWith('&')) {
-            return `${PREFIX}-${name.slice(1)}`;
-        }
-        return name;
-    })
-        .join(' ');
-};