@aquera/nile-elements 1.0.1-beta-1.9 → 1.1.0-beta-1.0

package/README.md

@@ -77,140 +77,11 @@ To run a local development server that serves the basic demo located in `demo/in
 
 ## Release Notes
 
-In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
-
-#### Version 1.0.1-beta-1.8
-- Nile Icon: Icon Releated Fix and Nile Input Fix
-
-#### Version 1.0.1-beta-1.7
-- Nile Icon: New NG Icon Released- ng-lock-03 [UIF-916]
-
-
-#### Version 1.0.1-beta-1.5
-- Nile Input: Font-Family Removed for Password Placeholder Text
-
-#### Version 1.0.1-beta-1.4
-- Nile Icon: ng-arrow-narrow-right icon addition
-- Dependeny Nile 1.0.1-beta-1.1
-
-#### Version 1.0.1-beta-1.3
-- Nile Tokenization: Ng nxt defect fix
-- Dependeny Nile 1.0.1-beta-1.0
-
-#### Version 1.0.1-beta-1.2
-- Nile Tokenization: Ng nxt defect fix
-
-#### Version 1.0.1-beta-1.0
-- Nile Tokenization: Ng nxt defect fix
-
-#### Version 0.1.63-beta-1.1
-- Nile Tokenization: Ng nxt defect fix[UIF-922]
-
-#### Version 0.1.60-beta-1.2
-- Nile Tokenization: Ng nxt defect fixes
-- Dependeny Nile 0.3.72-beta-1.3
-
-#### Version 0.1.60-beta-1.1
-- Nile Tokenization: Ng nxt defect fixes
-
-#### Version 0.1.60-beta-1.0
-- Nile Tokenization: Ng nxt defect fixes
-- Dependeny Nile 0.3.72-beta-1.2
- 
-#### Version 0.1.57-beta-1.6
-- Nile Icon: Added new ng-eye-off icon
-- Dependeny Nile 0.3.72-beta-1.1
-
-#### Version 0.1.57-beta-1.3
-- Nile Icon: Added new ng-eye icon
-- Dependeny Nile 0.3.72-beta-1.0
-
-#### Version 0.1.50-beta-1.8
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.50-beta-1.7
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.50-beta-1.6
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.70-beta-1.6
-
-#### Version 0.1.50-beta-1.4
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.50-beta-1.3
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.50-beta-1.2
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.49-beta-1.3
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.49-beta-1.1
-- Fixes: Fixed bugs in Form group and Font-Weight
-
-#### Version 0.1.49-beta-1.0
-- Fixes: Fixed bugs in Button Toggle, Select, Badge and Card components
-
-#### Version 0.1.47-beta-1.6
-- Nile Card: Hover Issue Fix
-
-
-#### Version 0.1.47-beta-1.5
-- Nile CDN Changes
-- Dependency Nile 0.3.70-beta-1.5
-
-#### Version 0.1.47-beta-1.4
-- Nile Icon Changes: Icon SVG Fixes
-- Dependency Nile 0.3.70-beta-1.4
-
-#### Version 0.1.47-beta-1.2
-- Nile Icon Changes: Icon SVG Fixes
-- Dependency Nile 0.3.70-beta-1.2
-
-#### Version 0.1.47-beta-1.1
-- Nile Icon Changes: Icon SVG Fixes
-- Dependency Nile 0.3.70-beta-1.1
-
-#### Version 0.1.46-beta-1.8
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.6
-
-#### Version 0.1.46-beta-1.4
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.4
-
-#### Version 0.1.46-beta-1.3
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.3
-
-#### Version 0.1.46-beta-1.1
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.2
-
-#### Version 0.1.46-beta-1.0
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.69-beta-1.0
-
-#### Version 0.1.69
-- Nile Table: Column resize defect fix [UIF-959]
-
-#### Version 0.1.68
--  Nile Code Editor: Code Editor Fixes [UIF-956]
-
-#### Version 0.1.67
-- New Component: Nile Option Group [UIF-948]
+In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects. 
 
 #### Version 0.1.66
   Nile Virtual Select: Provide option to pass class to `nile-option` [UIF-938]
 
-#### Version 0.1.55-patch-2
-- Nile Code Editor: Defect fix [UIF-939]
-
-#### Version 0.1.55-1
-- Nile Code Editor: Added defaultFont property, Enabled tab completion by default [UIF-887]
-
 #### Version 0.1.65
 - Nile Option: Added a CSS Part (Technical Change) [UIF-937]
 
@@ -279,36 +150,6 @@ In this section, you can find the updates for each release of `nile-elements`. I
 - Nile Icon Component: Bug Fixes for Nile Info Icon.
 - Dependency Nile 0.3.68
 
-#### Version 0.1.44-beta-2.1
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.9
-
-#### Version 0.1.44-beta-2.0
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.8
-
-#### Version 0.1.44-beta-1.8
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.6
-
-#### Version 0.1.44-beta-1.6
-- Nile Tokenization: Admin UI defect fixes & pagination token changes
-- Dependency Nile 0.3.68-beta-1.4
-
-#### Version 0.1.44-beta-1.5
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.3
-
-#### Version 0.1.44-beta-1.4
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.2
-
-#### Version 0.1.44-beta-1.3
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.44-beta-1.2
-- Nile Tokenization: Admin UI defect fixes
-- Dependency Nile 0.3.68-beta-1.1
 #### Version 0.1.44
 - Nile Tab Component: Bug Fixes for Nile-Tab [UIF-817]
 
@@ -321,56 +162,6 @@ In this section, you can find the updates for each release of `nile-elements`. I
 #### Version 0.1.41
 - Nile Pagination Component: Bug Fixes for Pagination Component [UIF-736]
 
-#### Version 0.1.40-beta-2.5
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.40-beta-2.1
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.40-beta-1.6
-- Nile Tokenization: Admin UI defect fixes
-
-#### Version 0.1.40-beta-1.2
-- Nile Tokenization: Admin UI defect fixes and new icons added
-- Dependency Nile 0.3.66-beta-1.2
-
-#### Version 0.1.38-beta-1.4
-- Nile Tokenization: New Design Tokens added
-- Dependency Nile 0.3.64-beta-1.2
-
-#### Version 0.1.35-beta-1.2
-- Nile Select: Help text property updated
-
-#### Version 0.1.35-beta-1.1
-- Nile Filter Chip : New Component
-- Dependency Nile 0.3.61-beta-1.1
-
-#### Version 0.1.35-beta-1.0
-- Nile Code Editor: Bugfix for autocomplete dialog
-
-#### Version 0.1.34-beta-1.1
-- Nile Code Editor: Bugfix for search section one cmd+f
-
-#### Version 0.1.34-beta-1.0
-- Nile Error Message: Ux updated & maxHeight, maxWidth properties added
-
-
-#### Version 0.1.33-beta-1.1
-- Nile Menu: Property added allowSpaceKey
-
-#### Version 0.1.33-beta-1.0
-- Nile Menu: Bugfix for using space key in nile input inside nile-menu
-
-#### Version 0.1.32-beta-1.5
-- Nile Tokens: Spacing tokens updated
-- Dependency Nile 0.3.61-beta-1.0
-
-#### Version 0.1.32-beta-1.4
--  Nile Tooltip: Bug Fixes
-
-#### Version 0.1.32-beta-1.3
-- Nile Input: Safari's AutoFill icon defect fix
-- 
 #### Version 0.1.40
 - Nile Pagination Component: Component Published for v1 for [UIF-736]
 #### Version 0.1.39

package/demo/index.css

@@ -1,14 +1,8 @@
 body {
-  font-family: var(--ng-font-family-body);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  height: 100vh;
+  background: #fafafa;
+  font-family: colfax-regular, sans-serif;
+  margin:0px;
 }
-
-
- 
-
 #demo {
   max-width: 40ch;
   padding: 48px;
@@ -43,7 +37,7 @@ body {
   width:100%;
   word-wrap: break-word;
 }
-/* 
+
 @font-face {
   font-family: 'colfax-regular';
   src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
@@ -68,7 +62,7 @@ body {
   font-display: auto;
   font-style: normal;
   font-weight: bold;
-} */
+}
 
 .stack {
   display: flex;
@@ -121,99 +115,4 @@ nile-drawer {
 
 .body {
   display: flex;
-}
-
-
-nile-input:not(:defined),
-nile-button:not(:defined),
-nile-icon:not(:defined),
-nile-icon-button:not(:defined),
-nile-tree:not(:defined),
-nile-table:not(:defined),
-nile-sidebar-menu:not(:defined),
-nile-filter-chip:not(:defined),
-nile-radio-group:not(:defined),
-nile-popover:not(:defined),
-nile-option:not(:defined),
-nile-sidebar-wrapper:not(:defined),
-nile-card:not(:defined),
-nile-table-body:not(:defined),
-nile-list-item:not(:defined),
-nile-tab-group:not(:defined),
-nile-vertical-stepper-item:not(:defined),
-nile-tab:not(:defined),
-nile-content-editor:not(:defined),
-nile-tab-panel:not(:defined),
-nile-drawer:not(:defined),
-nile-error-notification:not(:defined),
-nile-menu-item:not(:defined),
-nile-divider:not(:defined),
-nile-date-picker:not(:defined),
-nile-footer:not(:defined),
-nile-chip:not(:defined),
-nile-slide-toggle:not(:defined),
-nile-progress-bar:not(:defined),
-nile-auto-complete:not(:defined),
-nile-tree-item:not(:defined),
-nile-form-help-text:not(:defined),
-nile-sidebar-menu-items:not(:defined),
-nile-section-message:not(:defined),
-nile-table-row:not(:defined),
-nile-badge:not(:defined),
-nile-file-upload:not(:defined),
-nile-textarea:not(:defined),
-nile-checkbox:not(:defined),
-nile-page-header:not(:defined),
-nile-file-preview:not(:defined),
-nile-tooltip:not(:defined),
-nile-inline-edit:not(:defined),
-nile-circular-progressbar:not(:defined),
-nile-breadcrumb:not(:defined),
-nile-sidebar:not(:defined),
-nile-table-header-item:not(:defined),
-nile-popup:not(:defined),
-nile-link:not(:defined),
-nile-button-toggle-group:not(:defined),
-nile-stepper-item:not(:defined),
-nile-select:not(:defined),
-nile-button-filter:not(:defined),
-nile-empty-state:not(:defined),
-nile-tag:not(:defined),
-nile-table-cell-item:not(:defined),
-nile-radio:not(:defined),
-nile-breadcrumb-item:not(:defined),
-nile-list:not(:defined),
-nile-menu:not(:defined),
-nile-title:not(:defined),
-nile-heading:not(:defined),
-nile-code-editor:not(:defined),
-nile-toast:not(:defined),
-nile-toolbar:not(:defined),
-nile-calendar:not(:defined),
-nile-accordion:not(:defined),
-nile-form-error-message:not(:defined),
-nile-avatar:not(:defined),
-nile-switcher:not(:defined),
-nile-spinner:not(:defined),
-nile-form-group:not(:defined),
-nile-hero:not(:defined),
-nile-dialog:not(:defined),
-nile-split-panel:not(:defined),
-nile-error-message:not(:defined),
-nile-hero-header:not(:defined),
-nile-dropdown:not(:defined),
-nile-format-date:not(:defined),
-nile-loader:not(:defined),
-nile-button-toggle:not(:defined),
-nile-stepper:not(:defined) {
-  opacity: 0;
-}
-
-
-
-
-
-
-
-
-
+}

package/demo/index.html

@@ -1,29 +1,291 @@
 <!DOCTYPE html>
 <html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="nxtgen.css" id="stylesheet" />
-    <!-- <link rel="stylesheet" href="variables.css" id="stylesheet" /> -->
-    <link rel="stylesheet" href="index.css" />
 
-    <style>
- 
-    </style>
-    <script type="module" src="index.js"></script>
-  </head>
-  <body> 
+<head>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="variables.css" id="stylesheet" />
+  <link rel="stylesheet" href="index.css" />
+  <script type="module" src="index.js"></script>
+</head>
+<style>
+  .flex-container {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    padding: 10px;
+    margin: 10px;
+    max-height: 100px;
+    width: 400px;
+  }
 
+  nile-rte-mentions .mention {
+  background: yellow !important;
+}
 
- 
+/* nile-rich-text-editor .editor{
+  background: red;
+  width: 478px;
+  min-height: 50px;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+nile-rte-preview {
+  background: blue !important;
+  width: 478px;
+  min-height: 50px;
+  overflow-x: auto;
+  white-space: nowrap;
+} */
 
-  <nile-pagination totalItems="1000"
-  currentPage="1"
-  variant="compact"
-  pageSizeOptions="[5,15,30,60,120]">
- </nile-pagination>
+h2{
+  color:red;
+}
+ 
+</style>
 
+<body>
+  <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>
+
+  const rte = document.querySelector('nile-rich-text-editor');
+  // rte.value = '<p style="font-weight:400;font-style:normal;text-decoration:none solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline"><b style="font-weight:700;font-style:normal;text-decoration:none solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline"><i style="font-weight:700;font-style:italic;text-decoration:none solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline"><u style="font-weight:700;font-style:italic;text-decoration:underline solid rgb(51, 51, 51);color:rgb(51, 51, 51);background-color:rgba(0, 0, 0, 0);font-size:16px;font-family:colfax-regular, Helvetica, &quot;Helvetica Neue&quot;, Arial, &quot;Segoe UI&quot;, Roboto, &quot;Droid Sans&quot;, sans-serif;text-align:start;line-height:25.6px;letter-spacing:normal;white-space:normal;vertical-align:baseline">sdasdasd</u></i></b></p>'
+
+  // rte.addEventListener('content-changed', e => {
+  //   console.log('Received from anywhere', e.detail.content);
+  // });
 
 
-  </body>
-</html>
+
+
+  </script>
+  <!-- <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');
+      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>