npm - @aquera/nile-elements - Versions diffs - 1.0.1 → 1.1.0-beta-1.0 - Mend

@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.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 (1922) hide show

package/demo/index.html CHANGED Viewed

@@ -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>