@aquera/nile-elements 0.1.64-beta-1.2 → 0.1.65-beta-1.0

package/demo/index.html

@@ -50,11 +50,12 @@
             {"value":"h5","label":"Heading 5"},
             {"value":"h6","label":"Heading 6"}
           ]'></nile-rte-select>
-  
         <nile-rte-toolbar-item name="bold" label="Bold"></nile-rte-toolbar-item>
         <nile-rte-toolbar-item name="italic" label="Italic"></nile-rte-toolbar-item>
         <nile-rte-toolbar-item name="underline" label="Underline"></nile-rte-toolbar-item>
-        <nile-rte-color type="foreColor" label="Text color" value="#111111"></nile-rte-color>
+       
+        <nile-rte-color type="foreColor" label="Text" value="#000000"></nile-rte-color>
+        <nile-rte-color mode="background" label="Highlight" value="#ffff00"></nile-rte-color>
   
         <nile-rte-select
   type="font"
@@ -82,6 +83,7 @@
         <nile-rte-toolbar-item name="ul" label="Bulleted list"></nile-rte-toolbar-item>
         <nile-rte-toolbar-item name="ol" label="Numbered list"></nile-rte-toolbar-item>
         <nile-rte-toolbar-item name="clear" label="Clear Formatting" ></nile-rte-toolbar-item>  
+        <nile-rte-toolbar-item name="link" label="Link" ></nile-rte-toolbar-item>  
       </nile-rte-toolbar>
   
       <!-- Optional live preview -->
@@ -90,88 +92,14 @@
 
   </div>
 
-  <script>
-
-document.addEventListener('content-changed', e => {
-  console.log('Received from anywhere', e.detail.content);
-});
-
- 
-    const MENTIONS_CATALOG = [
-      // @people
-      {
-        character: "@",
-        data: [
-          { key: "alice", label: "Alice Smith" },
-          { key: "bob", label: "Bob Jones" },
-          { key: "charlie", label: "Charlie Kapoor" },
-          { key: "diana", label: "Diana Sen" },
-          { key: "eric", label: "Eric Das" }
-        ]
-      },
-      // #tickets / issues
-      {
-        character: "#",
-        data: [
-          { key: "ISSUE-101", label: "ISSUE-101: Login fails on Safari" },
-          { key: "BUG-556",   label: "BUG-556: NPE on save" },
-          { key: "TASK-72",   label: "TASK-72: Update docs" }
-        ]
-      },
-      // :emoji
-      {
-        character: ":",
-        data: [
-          { key: "thumbsup",   label: "👍 thumbs up" },
-          { key: "sparkles",   label: "✨ sparkles" },
-          { key: "tada",       label: "🎉 tada" },
-          { key: "fire",       label: "🔥 fire" },
-          { key: "warning",    label: "⚠️ warning" }
-        ]
-      },
-      // /commands
-      {
-        character: "/",
-        data: [
-          { key: "assign-me",     label: "Assign to me" },
-          { key: "request-review",label: "Request review" },
-          { key: "insert-date",   label: "Insert date" },
-          { key: "clear-format",  label: "Clear formatting" }
-        ]
-      },
-      // $variables (templating)
-      {
-        character: "$",
-        data: [
-          { key: "firstName", label: "firstName" },
-          { key: "lastName",  label: "lastName" },
-          { key: "email",     label: "email" },
-          { key: "today",     label: "today" }
-        ]
-      },
-      // !status
-      {
-        character: "!",
-        data: [
-          { key: "high",   label: "High Priority" },
-          { key: "medium", label: "Medium Priority" },
-          { key: "low",    label: "Low Priority" }
-        ]
-      },
-   
-      {
-        character: "%",
-        data: [
-          { key: "design",   label: "{{design}}" },
-          { key: "frontend", label: "frontend" },
-          { key: "backend",  label: "backend" },
-          { key: "release",  label: "release" }
-        ]
-      }
-    ];
-  
- 
-    async function setMentions(mentionsList) {
+  <script type="module">
+    // Optional: listen to editor content changes (keep if you already use it)
+    document.addEventListener('content-changed', e => {
+      console.log('Received from anywhere', e.detail.content);
+    });
+  
+    window.addEventListener('DOMContentLoaded', async () => {
+      // Wait for the editor custom element to be ready
       await customElements.whenDefined('nile-rich-text-editor');
   
       const editor = document.querySelector('nile-rich-text-editor');
@@ -180,42 +108,34 @@ document.addEventListener('content-changed', e => {
         return;
       }
   
-      let rteMentions = editor.querySelector('nile-rte-mentions');
-      if (!rteMentions) {
-        rteMentions = document.createElement('nile-rte-mentions');
-        editor.prepend(rteMentions);
+      // Ensure there is a <nile-rte-mentions> inside the editor
+      let mentions = editor.querySelector('nile-rte-mentions');
+      if (!mentions) {
+        mentions = document.createElement('nile-rte-mentions');
+        // Put it as the first child of the editor so it's available early
+        editor.prepend(mentions);
       }
   
-      // Clear existing
-      rteMentions.innerHTML = '';
-  
-      // Add all items
-      mentionsList.forEach(group => {
-        const item = document.createElement('nile-rte-mentions-item');
  
-        item.mentionsCharacter = group.character;
-        item.mentionsData = group.data;
-        rteMentions.appendChild(item);
-      });
+      const BIG_AT = Array.from({ length: 1000 }, (_, i) => ({
+        key:   `user-${i + 1}`,
+        label: `User ${i + 1}`
+      }));
   
-      // Optional: let the editor know they changed
-      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
-    }
-  
-    // 3) Call once DOM is ready
-    window.addEventListener('DOMContentLoaded', () => setMentions(MENTIONS_CATALOG));
+ 
+      mentions.setExternalConfig({ '@': BIG_AT });
   
  
-    async function updateMentionsFor(character, items) {
-      const editor = document.querySelector('nile-rich-text-editor');
-      const item = editor?.querySelector(`nile-rte-mentions-item[mentionscharacter="${character}"]`);
-      if (item) item.mentionsData = items;
-    }
+      mentions.mentionColors = { '@': '#eef2ff' };
+  
  
+      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
+    });
   </script>
   
   
   
+  
 </body>
 
 </html>