npm - @aquera/nile-elements - Versions diffs - 0.1.67-beta-1.8 → 0.1.67-beta-2.0 - Mend

@aquera/nile-elements 0.1.67-beta-1.8 → 0.1.67-beta-2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (705) hide show

package/demo/index.html CHANGED Viewed

@@ -8,171 +8,275 @@
   <script type="module" src="index.js"></script>
 </head>
 <style>
-  /* .flex-container {
+  .flex-container {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    max-width: 600px;
     gap: 30px;
-    padding: 0;
-    margin: 0;
-    border: 1px solid silver;
-    height: 900px;
-  } */
-  /* nile-button {
-    flex: 0 0 auto;
-    height: 38px;
-  } */
-  /* div {
-    background-color: #e6e9eba8;
-    font-weight: 700;
-    color: #000;
-    padding: 9px 12px;
-    font-family: colfax-medium;
-    font-size: 16px;
-  } */
-  body {
-    font-family: colfax-regular;
-    margin: 100px;
+    padding: 10px;
+    margin: 10px;
+    max-height: 100px;
   }
-  nile-select::part(listbox) {
-    max-height: 400px;
-  }
+  nile-rte-mentions .mention {
+  background: yellow !important;
+}
+h2{
+  color:red;
+}
 </style>
 <body>
-  <nile-select placeholder="Select..." class="virtual-scroll-string" searchEnabled multiple>
-    <!-- <nile-option-group name="date">Date Formats</nile-option-group>
-    <nile-option groupName="date" value="1 DD/MM/YYYY">1DD/MM/YYYY</nile-option>
-    <nile-option groupName="date" value="MM-DD-YYYY">MM-DD-YYYY</nile-option>
-    <nile-option groupName="date" value="YYYY/MM/DD">YYYY/MM/DD</nile-option>
-    <nile-option-group name="currency">
-      <span>Currency Formats</span>
-    </nile-option-group>
-    <nile-option groupName="currency" value="123456 dd">$1,234.56 dd</nile-option>
-    <nile-option groupName="currency" value="123456">€1.234,56</nile-option>
-    <nile-option groupName="currency" value="12345678">₹1,23,456.78</nile-option>
- </nile-select> -->
- <!-- <nile-icon name="user"></nile-icon> -->
- <script>
-  const htmlLabelOptions = [
-    {
-      header: "Fruits",
-      items: [
-        { value: "xyz", label: "Apple" },
-        { value: "2", label: "Banana" },
-        { value: "3", label: "Cherry" },
-        { value: "4", label: "Date" },
-        { value: "5", label: "Elderberry" },
-        { value: "6", label: "Fig" },
-        { value: "7", label: "Grape" }
-      ]
-    },
-    {
-      header: "Vegetables",
-      items: [
-        { value: "8", label: "Carrot" },
-        { value: "9", label: "Broccoli" },
-        { value: "10", label: "Spinach" },
-        { value: "11", label: "Tomato" }
-      ]
-    },
-    {
-      header: "Animals",
-      items: [
-        { value: "12", label: "Dog" },
-        { value: "13", label: "Cat" },
-        { value: "14", label: "Bird" },
-        { value: "15", label: "Fish" }
-      ]
-    },
-    {
-      header: "Colors",
-      items: [
-        { value: "16", label: "Red" },
-        { value: "17", label: "Green" },
-        { value: "18", label: "Blue" },
-        { value: "19", label: "Yellow" }
-      ]
-    }
-  ];
-  const select = document.querySelector('nile-select');
-  const optionData = {
-    prefix: {
-      // icon: {
-      //   name: "action",
-      //   size: "16",
-      //   color: "red"
-      // },
-      image: {
-        src: "https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg",
-        height: "200",
-        width: "200"
-      },
-      // prefixText: "hello"
-    },
-    suffix: {
-      // icon: {
-      //   name: "user",
-      //   size: "16",
-      //   color: "red"
-      // },
-      image: {
-        src: "https://gratisography.com/wp-content/uploads/2024/11/gratisography-augmented-reality-800x525.jpg",
-        height: "400",
-        width: "400"
-      },
-      // suffixText: ""
-    }
+  <div class="flex-container">
+    <nile-rich-text-editor>
+     <!-- <nile-rte-mentions mentioncolors='{
+      "@": "#eef2ff",
+      "#": "#fff3cd",
+      ":": "#e0f2fe"
+    }'></nile-rte-mentions> -->
+    <nile-rte-mentions>
+      <nile-rte-mentions-item
+        mentionscharacter="@"
+        mentionscolor="#e0f7fa"
+        mentionsprefix="{{"
+        mentionssuffix="}}"
+        mentionsdata='[
+          {"key":"abc","label":"ABC"},
+          {"key":"pqr","label":"PQR"}
+        ]'
+      ></nile-rte-mentions-item>
+      <nile-rte-mentions-item
+      mentionscharacter="#"
+      mentionsdata='[
+        {"key":"alpha","label":"Alpha"},
+        {"key":"bravo","label":"Bravo"},
+        {"key":"charlie","label":"Charlie"},
+        {"key":"delta","label":"Delta"},
+        {"key":"echo","label":"Echo"},
+        {"key":"foxtrot","label":"Foxtrot"},
+        {"key":"golf","label":"Golf"},
+        {"key":"hotel","label":"Hotel"},
+        {"key":"india","label":"India"},
+        {"key":"juliet","label":"Juliet"},
+        {"key":"kilo","label":"Kilo"},
+        {"key":"lima","label":"Lima"},
+        {"key":"mike","label":"Mike"},
+        {"key":"november","label":"November"},
+        {"key":"oscar","label":"Oscar"},
+        {"key":"papa","label":"Papa"},
+        {"key":"quebec","label":"Quebec"},
+        {"key":"romeo","label":"Romeo"},
+        {"key":"sierra","label":"Sierra"},
+        {"key":"tango","label":"Tango"},
+        {"key":"uniform","label":"Uniform"},
+        {"key":"victor","label":"Victor"},
+        {"key":"whiskey","label":"Whiskey"},
+        {"key":"xray","label":"X-Ray"},
+        {"key":"yankee","label":"Yankee"},
+        {"key":"zulu","label":"Zulu"},
+        {"key":"apple","label":"Apple"},
+        {"key":"banana","label":"Banana"},
+        {"key":"cherry","label":"Cherry"},
+        {"key":"date","label":"Date"},
+        {"key":"elderberry","label":"Elderberry"},
+        {"key":"fig","label":"Fig"},
+        {"key":"grape","label":"Grape"},
+        {"key":"honeydew","label":"Honeydew"},
+        {"key":"ice","label":"Ice"},
+        {"key":"jackfruit","label":"Jackfruit"},
+        {"key":"kiwi","label":"Kiwi"},
+        {"key":"lemon","label":"Lemon"},
+        {"key":"mango","label":"Mango"},
+        {"key":"nectarine","label":"Nectarine"},
+        {"key":"orange","label":"Orange"},
+        {"key":"papaya","label":"Papaya"},
+        {"key":"quince","label":"Quince"},
+        {"key":"raspberry","label":"Raspberry"},
+        {"key":"strawberry","label":"Strawberry"},
+        {"key":"tomato","label":"Tomato"},
+        {"key":"ugli","label":"Ugli"},
+        {"key":"vanilla","label":"Vanilla"},
+        {"key":"watermelon","label":"Watermelon"},
+        {"key":"xigua","label":"Xigua"},
+        {"key":"yam","label":"Yam"},
+        {"key":"zucchini","label":"Zucchini"},
+        {"key":"red","label":"Red"},
+        {"key":"orange-color","label":"Orange"},
+        {"key":"yellow","label":"Yellow"},
+        {"key":"green","label":"Green"},
+        {"key":"blue","label":"Blue"},
+        {"key":"indigo","label":"Indigo"},
+        {"key":"violet","label":"Violet"},
+        {"key":"black","label":"Black"},
+        {"key":"white","label":"White"},
+        {"key":"gray","label":"Gray"},
+        {"key":"silver","label":"Silver"},
+        {"key":"gold","label":"Gold"},
+        {"key":"cyan","label":"Cyan"},
+        {"key":"magenta","label":"Magenta"},
+        {"key":"pink","label":"Pink"},
+        {"key":"brown","label":"Brown"},
+        {"key":"beige","label":"Beige"},
+        {"key":"maroon","label":"Maroon"},
+        {"key":"olive","label":"Olive"},
+        {"key":"teal","label":"Teal"},
+        {"key":"navy","label":"Navy"},
+        {"key":"lime","label":"Lime"},
+        {"key":"peach","label":"Peach"},
+        {"key":"plum","label":"Plum"},
+        {"key":"tan","label":"Tan"},
+        {"key":"salmon","label":"Salmon"},
+        {"key":"coral","label":"Coral"},
+        {"key":"crimson","label":"Crimson"},
+        {"key":"amber","label":"Amber"},
+        {"key":"mint","label":"Mint"},
+        {"key":"turquoise","label":"Turquoise"},
+        {"key":"lavender","label":"Lavender"},
+        {"key":"orchid","label":"Orchid"},
+        {"key":"periwinkle","label":"Periwinkle"},
+        {"key":"chartreuse","label":"Chartreuse"},
+        {"key":"emerald","label":"Emerald"},
+        {"key":"jade","label":"Jade"},
+        {"key":"ruby","label":"Ruby"},
+        {"key":"sapphire","label":"Sapphire"},
+        {"key":"topaz","label":"Topaz"},
+        {"key":"amethyst","label":"Amethyst"},
+        {"key":"opal","label":"Opal"},
+        {"key":"onyx","label":"Onyx"},
+        {"key":"quartz","label":"Quartz"},
+        {"key":"diamond","label":"Diamond"},
+        {"key":"pearl","label":"Pearl"},
+        {"key":"garnet","label":"Garnet"},
+        {"key":"spinach","label":"Spinach"}
+      ]'
+    ></nile-rte-mentions-item>
+    </nile-rte-mentions>
+      <nile-rte-toolbar>
+        <!-- <nile-rte-select
+          type="heading"
+          options='[
+            {"value":"p","label":"Normal"},
+            {"value":"h1","label":"Heading 1"},
+            {"value":"h2","label":"Heading 2"},
+            {"value":"h3","label":"Heading 3"},
+            {"value":"h4","label":"Heading 4"},
+            {"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-divider></nile-rte-divider>
+        <!-- <nile-rte-color mode="foreColor" label="Text" value="#000000"></nile-rte-color>
+        <nile-rte-color mode="backColor" label="Highlight" value="#ffffff"></nile-rte-color> -->
+        <!-- <nile-rte-select
+  type="font"
+  label="Font"
+  options='[
+  {"value":"colfax-regular","label":"Colfax Regular"},
+    {"value":"Inter","label":"Inter"},
+    {"value":"Georgia","label":"Georgia"},
+    {"value":"Times New Roman","label":"Times New Roman"},
+    {"value":"Courier New","label":"Courier New"},
+    {"value":"Monaco","label":"Monaco"}
+  ]'>
+</nile-rte-select> -->
+        <nile-rte-select
+          type="align"
+          label="Align"></nile-rte-select>
+        <nile-rte-toolbar-item name="ul"  ></nile-rte-toolbar-item>
+        <nile-rte-toolbar-item name="ol"  ></nile-rte-toolbar-item>
+        <nile-rte-divider></nile-rte-divider>
+        <!-- <nile-rte-toolbar-item name="clear"  ></nile-rte-toolbar-item>   -->
+        <!-- <nile-rte-link></nile-rte-link> -->
+        <!-- <nile-rte-toolbar-item name="link"   ></nile-rte-toolbar-item>  -->
+      </nile-rte-toolbar>
+      <!-- Optional live preview -->
+      <nile-rte-preview></nile-rte-preview>
+    </nile-rich-text-editor>
+  </div>
+  <script>
+document.addEventListener('content-changed', e => {
+  console.log('Received from Clean:', e.detail.content);
+  if (e.detail.mention) {
+    console.log('Also in content-changed:', e.detail.mention);
   }
+});
+document.addEventListener('mention-opened', e => {
+  console.log('Mention started:', e.detail.trigger, e.detail.suggestions);
+});
+document.addEventListener('mention-selected', e => {
+  console.log('Mention picked:', e.detail.trigger, e.detail.key, e.detail.label);
+});
+  </script>
+  <!-- <script type="module">
-  htmlLabelOptions.forEach(element => {
-    const optionGroup = document.createElement('nile-option-group');
-    optionGroup.setAttribute('name', element.header);
-    optionGroup.data = optionData;
-    select.appendChild(optionGroup);
-    element.items.forEach(item => {
-      const option = document.createElement('nile-option');
-      option.setAttribute('value', item.value);
-      option.setAttribute('groupName', element.header);
-      option.innerHTML = item.label;
-      select.appendChild(option);
+     const rte = document.querySelector('nile-rich-text-editor');
+rte.value = '<h2>Welcome</h2><p>This came from JS.</p>';
+    // 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);
     });
-  })
-  // const data = [];
-  // htmlLabelOptions.forEach(group => {
-  //   data.push({
-  //     value: group.header,
-  //     label: `${group.header}`,
-  //     group: {
-  //       header: group.header,
-  //     }
-  //   });
-  //   if(group.names) {
-  //     group.names.forEach(name => {
-  //       data.push({
-  //         value: name,
-  //         label: `${name}`,
-  //         group:{
-  //           groupName: group.header
-  //         }
-  //       });
-  //     });
-  //   }
-  // });
-  // const virtualSelect = document.querySelector('nile-select.virtual-scroll-string');
-  // virtualSelect.data = data;
-</script>
+    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');
+      if (!editor) {
+        console.error('nile-rich-text-editor not found');
+        return;
+      }
+      // 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);
+      }
+      const BIG_AT = Array.from({ length: 1000 }, (_, i) => ({
+        key:   `user-${i + 1}`,
+        label: `User ${i + 1}`
+      }));
+      mentions.setExternalConfig({ '@': BIG_AT });
+      mentions.mentionColors = { '@': '#eef2ff' };
+      editor.dispatchEvent(new CustomEvent('nile-mentions-updated', { bubbles: true, composed: true }));
+    });
+  </script> -->
 </body>
-</html>
+</html>