owl-tiptap 1.0.0

package/README.md

@@ -0,0 +1,7 @@
+# Owl Tiptap 组件库
+
+这是一个基于 Odoo Owl 和 Tiptap 构建的富文本编辑器组件库。
+
+## 可用组件
+
+-   [TagInput](./src/components/tag-input/README.md): 一个支持标签输入的组件。

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

@@ -0,0 +1,52 @@
+import { Component } from '@odoo/owl';
+export interface SuggestionItem {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+interface SuggestionListProps {
+    items: SuggestionItem[];
+    onSelect: (event: MouseEvent, item: SuggestionItem) => void;
+    slots?: {
+        listHeader?: any;
+        listItem?: 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;
+        };
+    };
+    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

@@ -0,0 +1,132 @@
+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();
+            }
+        };
+    }
+    onSelect(ev, item) {
+        !item.disabled && this.props.onSelect?.(ev, item);
+    }
+    setup() {
+        useEffect(() => {
+            const selectedItem = this.props.items.find((item) => !item.disabled) ?? null;
+            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 { items } = this.props;
+        const { selectedItem } = this.state;
+        const selectableItems = items.filter((item) => !item.disabled);
+        if (!selectableItems.length) {
+            return;
+        }
+        const selectedIndex = selectableItems.indexOf(selectedItem);
+        const newIndex = (selectedIndex - 1 + selectableItems.length) % selectableItems.length;
+        this.state.selectedItem = selectableItems[newIndex];
+    }
+    downHandler() {
+        const { items } = this.props;
+        const { selectedItem } = this.state;
+        const selectableItems = items.filter((item) => !item.disabled);
+        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="props.items.length">
+        <t t-foreach="props.items" t-as="item" t-key="item.value">
+          <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-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

@@ -0,0 +1,101 @@
+.ott-tag-input {
+  position: relative;
+  background-color: white;
+}
+.ott-tag-input .ProseMirror {
+  padding: 8px;
+  border: 1px solid rgb(var(--ott-border-color));
+  border-radius: 4px;
+}
+.ott-tag-input .ProseMirror:focus {
+  outline: none;
+  border-color: rgba(var(--ott-primary-color), 0.8);
+  box-shadow: 0 0 0 2px rgba(var(--ott-primary-color), 0.2);
+}
+.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: rgb(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: rgb(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 rgba(var(--ott-primary-color), 0.4);
+  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: rgba(var(--ott-primary-color), 0.1);
+  color: rgb(var(--ott-primary-color));
+}
+.ott-tag-input .ott-suggestion-list div.is-empty {
+  color: rgb(var(--ott-text-color-secondary));
+  cursor: default;
+}
+.ott-tag-input .ott-suggestion-list div.is-disabled {
+  color: rgb(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: rgb(var(--ott-text-color-secondary));
+}

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

@@ -0,0 +1,150 @@
+import { Component } from '@odoo/owl';
+import { Editor } from '@tiptap/core';
+import { SuggestionList, SuggestionItem } 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 {
+    ref?: (component: TagInput) => void;
+    placeholder?: string;
+    slots?: {
+        listHeader?: any;
+        listItem?: any;
+        listEmpty?: any;
+        listFooter?: any;
+    };
+    suggestionListClassName?: string;
+    onSuggestionSelect?: (event: MouseEvent, item: SuggestionItem) => void;
+    items?: (params: {
+        query: string;
+    }) => SuggestionItem[];
+    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;
+    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;
+}
+export {};

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

@@ -0,0 +1,247 @@
+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, exitSuggestionPlugin } 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: '',
+            },
+        });
+    }
+    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() {
+        return this.state.editor.getJSON();
+    }
+    /**
+     * 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?.(editor.getJSON());
+                }
+            },
+        }));
+    }
+    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 class="${classNames('&tag-input')}" t-att-class="props.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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,79 @@
+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
+            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

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core';
+import { SuggestionItem } from './SuggestionList';
+import { PluginKey } from 'prosemirror-state';
+interface SuggestionPluginOptions {
+    char?: string;
+    allowedPrefixes?: string[] | null;
+    items?: (params: {
+        query: string;
+    }) => SuggestionItem[];
+    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

@@ -0,0 +1,26 @@
+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.css

@@ -0,0 +1,6 @@
+:root {
+  --ott-primary-color: 22, 119, 255;
+  --ott-border-color: 204, 204, 204;
+  --ott-placeholder-color: 173, 181, 189;
+  --ott-text-color-secondary: 136, 136, 136;
+}

package/es/index.d.ts

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

package/es/index.js

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

package/es/utils/classNames.d.ts

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

package/es/utils/classNames.js

@@ -0,0 +1,22 @@
+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(' ');
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "owl-tiptap",
+  "version": "1.0.0",
+  "description": "tiptap used in odoo owl2",
+  "main": "index.js",
+  "scripts": {
+    "start": "vite",
+    "clean": "gulp clean",
+    "build": "gulp build",
+    "eslint": "eslint ./src/. ./test/.  --ext .js,.ts --fix"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/birdix-organiza/owl-tiptap"
+  },
+  "files": [
+    "es"
+  ],
+  "keywords": [
+    "owl"
+  ],
+  "author": "birdix",
+  "license": "MIT",
+  "dependencies": {
+    "@tiptap/core": "^3.2.0",
+    "@tiptap/extension-document": "^3.13.0",
+    "@tiptap/extension-history": "^3.13.0",
+    "@tiptap/extension-mention": "^3.2.0",
+    "@tiptap/extension-paragraph": "^3.13.0",
+    "@tiptap/extension-placeholder": "^3.2.0",
+    "@tiptap/extension-text": "^3.13.0",
+    "@tiptap/suggestion": "^3.13.0",
+    "classnames": "^2.3.2"
+  },
+  "peerDependencies": {
+    "@odoo/owl": "~2.4.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "@gulp-plugin/alias": "^2.2.2",
+    "@odoo/owl": "^2.4.1",
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "@stylistic/eslint-plugin-ts": "^4.2.0",
+    "@typescript-eslint/parser": "^8.29.1",
+    "@vitejs/plugin-legacy": "^6.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "copyfiles": "^2.4.1",
+    "eslint": "^9.22.0",
+    "glob": "^11.0.1",
+    "globals": "^16.0.0",
+    "gulp": "^5.0.0",
+    "gulp-clean": "^0.4.0",
+    "gulp-replace": "^1.1.4",
+    "gulp-sass": "^6.0.1",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "merge2": "^1.4.1",
+    "prettier": "^3.5.3",
+    "rimraf": "^6.0.1",
+    "sass": "^1.86.3",
+    "sass-embedded": "^1.86.0",
+    "tsccss": "^1.0.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.2",
+    "vite-plugin-eslint2": "^5.0.3"
+  }
+}