owl-tiptap 1.0.0 → 1.0.1

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

@@ -1,16 +1,38 @@
 .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 .ProseMirror {
   padding: 8px;
-  border: 1px solid rgb(var(--ott-border-color));
+  border: 1px solid 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);
+  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;
@@ -18,7 +40,7 @@
 .ott-tag-input .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: rgb(var(--ott-placeholder-color));
+  color: var(--ott-placeholder-color);
   pointer-events: none;
   height: 0;
 }
@@ -31,7 +53,7 @@
   min-height: 20px;
   display: inline-flex;
   align-items: center;
-  background-color: rgb(var(--ott-primary-color));
+  background-color: var(--ott-primary-color);
   border: none;
   border-radius: 3px;
   padding: 2px 8px;
@@ -73,7 +95,7 @@
 .ott-tag-input .ott-suggestion-list {
   background: white;
   max-height: 200px;
-  border: 1px solid rgba(var(--ott-primary-color), 0.4);
+  border: 1px solid var(--ott-primary-color-04);
   border-radius: 4px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   overflow: auto;
@@ -84,18 +106,18 @@
   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));
+  background-color: var(--ott-primary-color-01);
+  color: var(--ott-primary-color);
 }
 .ott-tag-input .ott-suggestion-list div.is-empty {
-  color: rgb(var(--ott-text-color-secondary));
+  color: var(--ott-text-color-secondary);
   cursor: default;
 }
 .ott-tag-input .ott-suggestion-list div.is-disabled {
-  color: rgb(var(--ott-text-color-secondary));
+  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: rgb(var(--ott-text-color-secondary));
+  color: var(--ott-text-color-secondary);
 }

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

@@ -26,6 +26,7 @@ interface TagInputState {
     suggestion: SuggestionState;
 }
 interface TagInputProps {
+    className?: string;
     ref?: (component: TagInput) => void;
     placeholder?: string;
     slots?: {
@@ -104,6 +105,7 @@ export declare class TagInput extends Component<TagInputProps> {
         el: HTMLElement;
     };
     state: TagInputState;
+    get className(): string;
     onSuggestionSelect(event: MouseEvent, item: SuggestionItem): void;
     updateSuggestion(props: any, options?: Partial<SuggestionState>): void;
     /**

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

@@ -27,6 +27,10 @@ export class TagInput extends Component {
             },
         });
     }
+    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) {
@@ -57,7 +61,12 @@ export class TagInput extends Component {
      * @returns {object} The content as a JSON object.
      */
     getContent() {
-        return this.state.editor.getJSON();
+        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.
@@ -185,7 +194,7 @@ export class TagInput extends Component {
             },
             onUpdate: ({ editor, transaction }) => {
                 if (transaction.docChanged) {
-                    this.props.onChange?.(editor.getJSON());
+                    this.props.onChange?.(this.getContent());
                 }
             },
         }));
@@ -228,7 +237,7 @@ TagInput.props = {
     char: { type: String, optional: true },
 };
 TagInput.template = xml `
-<div class="${classNames('&tag-input')}" t-att-class="props.className">
+<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

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

@@ -48,9 +48,11 @@ export const TagNode = Node.create({
             });
             dom.setAttribute('data-type', 'tag');
             dom.classList.add('tag'); // Add a class for styling
-            dom.addEventListener('click', () => {
-                this.options.onTagClick(node.attrs, getPos());
-            });
+            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);

package/es/index.d.ts

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

package/es/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "owl-tiptap",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "tiptap used in odoo owl2",
   "main": "index.js",
   "scripts": {

package/es/index.css

@@ -1,6 +0,0 @@
-: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;
-}