[pull] master from afry:master

.github/workflows/ci.yml

@@ -0,0 +1,22 @@
+name: Run CI
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout project
+        uses: actions/checkout@v4
+
+      - name: Install npm
+        uses: actions/setup-node@v3
+        with:
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Test
+        run: npm run test

.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - name: Checkout project
+        uses: actions/checkout@v4
+
+      - name: Install npm
+        uses: actions/setup-node@v4
+        with:
+          cache-dependency-path: package-lock.json
+          cache: "npm"
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        run: |
+          npm config set init-author-name "quill-mention"
+          npm config set init-author-email "[email protected]"
+          npm config set init-author-url "https://quill-mention.com"
+          npm publish --provenance --access public

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# tsimp compiler cache
+.tsimp

.vscode/settings.json

@@ -2,5 +2,5 @@
   "files.eol": "\n",
   "files.insertFinalNewline": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": false
 }

docs/CNAME

@@ -0,0 +1 @@
+quill-mention.com

docs/index.html

@@ -5,10 +5,7 @@
     <meta charset="utf-8" />
     <title>Quill Mention</title>
     <meta name="description" content="Quill Mention Demo" />
-    <link
-      href="https://cdn.quilljs.com/1.3.6/quill.snow.css"
-      rel="stylesheet"
-    />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
     <link href="quill.mention.min.css" rel="stylesheet" />
     <style>
       body {
@@ -44,39 +41,109 @@ <h1>Quill Mention</h1>
       for the Quill rich text editor.
     </p>
 
-    <h2>Demo</h2>
+    <h2>Simple Demo</h2>
     <!-- Create the editor container -->
     <div id="editor"></div>
 
+    <br />
+    <h2>Advanced Demo</h2>
+    <p>
+      Asynchronous retrieval, disabled items (i.e. group headers), loading
+      message, programmatic methods, and custom blot rendering
+    </p>
+    <div id="editor2"></div>
+    <div style="margin-top: 5px">
+      <button onclick="showMenu()">Show @ Menu</button>
+      <button onclick="addMention()">Add Mention Programmatically</button>
+    </div>
+
     <h2>License</h2>
     <p>This project is licensed under the MIT License</p>
     <p><a href="https://github.com/afry/quill-mention">View on GitHub</a></p>
 
     <!-- Include the Quill library -->
-    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
     <script src="quill.mention.min.js"></script>
+
     <!-- Initialize Quill editor -->
     <script>
       const atValues = [
         { id: "515fd775-cb54-41f3-b921-56163871e2cf", value: "Mickey Dooley" },
         {
           id: "3f0b7933-57b8-4d9d-b238-f8af62b2e945",
-          value: "Desmond Waterstone"
+          value: "Desmond Waterstone",
         },
         { id: "711f68ab-ca20-4011-ab0f-d98c8fac4c05", value: "Jeralee Fryd" },
         { id: "775e05fc-72bc-48a1-9508-5c61674734f1", value: "Eddie Hucquart" },
-        { id: "e8701885-105e-4a21-b200-98e559776655", value: "Nathalia Whear" }
+        { id: "e8701885-105e-4a21-b200-98e559776655", value: "Nathalia Whear" },
       ];
 
       const hashValues = [
         { id: "0075256a-19c2-4a2d-b549-627000bcc3bc", value: "Accounting" },
         {
           id: "91e8901b-e3bf-4158-8ddf-7f5d9e8cbb7f",
-          value: "Product Management"
+          value: "Product Management",
         },
         { id: "c3373e89-7ab8-4a45-8b69-0b0cc49d89a9", value: "Marketing" },
         { id: "fa22f1d2-16c8-4bea-b869-8acad16e187a", value: "Engineering" },
-        { id: "fe681168-f315-42f0-b78b-b1ea787fa1fd", value: "Accounting" }
+        { id: "fe681168-f315-42f0-b78b-b1ea787fa1fd", value: "Accounting" },
+      ];
+
+      const advancedValues = [
+        {
+          id: "1",
+          value: "Manuel Neuer",
+          team: "Bayern Munich",
+          color: "green",
+        },
+        {
+          id: "2",
+          value: "Robert Lewandowski",
+          team: "Bayern Munich",
+          color: "blue",
+        },
+        {
+          id: "3",
+          value: "Thomas Muller",
+          team: "Bayern Munich",
+          color: "red",
+        },
+        {
+          id: "4",
+          value: "Roman Burki",
+          team: "Borussia Dortmund",
+          color: "orange",
+        },
+        {
+          id: "5",
+          value: "Jadon Sancho",
+          team: "Borussia Dortmund",
+          color: "black",
+        },
+        {
+          id: "6",
+          value: "Marco Reus",
+          team: "Borussia Dortmund",
+          color: "yellow",
+        },
+        {
+          id: "7",
+          value: "Alexander Nubel",
+          team: "Schalke 04",
+          color: "purple",
+        },
+        {
+          id: "8",
+          value: "Bastian Oczipka",
+          team: "Schalke 04",
+          color: "indigo",
+        },
+        {
+          id: "9",
+          value: "Weston McKennie",
+          team: "Schalke 04",
+          color: "violet",
+        },
       ];
 
       var quill = new Quill("#editor", {
@@ -85,7 +152,7 @@ <h2>License</h2>
           mention: {
             allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
             mentionDenotationChars: ["@", "#"],
-            source: function(searchTerm, renderList, mentionChar) {
+            source: function (searchTerm, renderList, mentionChar) {
               let values;
 
               if (mentionChar === "@") {
@@ -107,9 +174,112 @@ <h2>License</h2>
                     matches.push(values[i]);
                 renderList(matches, searchTerm);
               }
-            }
-          }
+            },
+          },
+        },
+      });
+
+      const MentionBlot = Quill.import("blots/mention");
+
+      class StyledMentionBlot extends MentionBlot {
+        static render(data) {
+          const element = document.createElement("span");
+          element.innerText = data.value;
+          element.style.color = data.color;
+          return element;
         }
+      }
+      StyledMentionBlot.blotName = "styled-mention";
+
+      Quill.register(StyledMentionBlot);
+
+      var quill2 = new Quill("#editor2", {
+        placeholder: "Start by typing @ for mentions",
+        modules: {
+          mention: {
+            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+            mentionDenotationChars: ["@"],
+            positioningStrategy: "fixed",
+            renderItem: (data) => {
+              if (data.disabled) {
+                const div = document.createElement("div");
+                div.style =
+                  "height:10px;line-height:10px;font-size:10px;background-color:#ccc;margin:0 -20px;padding:4px";
+                div.innerText = data.value;
+                return div;
+              }
+              return data.value;
+            },
+            renderLoading: () => {
+              return "Loading...";
+            },
+            source: function (searchTerm, renderList, mentionChar) {
+              var matches = [];
+
+              if (searchTerm.length === 0) {
+                matches = advancedValues;
+              } else {
+                for (i = 0; i < advancedValues.length; i++)
+                  if (
+                    ~advancedValues[i].value
+                      .toLowerCase()
+                      .indexOf(searchTerm.toLowerCase())
+                  )
+                    matches.push(advancedValues[i]);
+              }
+
+              //create group header items
+              var matchesWithGroupHeaders = [];
+              var currentTeam;
+              for (i = 0; i < matches.length; i++) {
+                var match = matches[i];
+                if (currentTeam !== match.team) {
+                  matchesWithGroupHeaders.push({
+                    id: match.team,
+                    value: match.team,
+                    disabled: true,
+                  });
+                  currentTeam = match.team;
+                }
+                matchesWithGroupHeaders.push(match);
+              }
+              matches = matchesWithGroupHeaders;
+
+              window.setTimeout(() => {
+                renderList(matches, searchTerm);
+              }, 1000);
+            },
+            dataAttributes: [
+              "id",
+              "value",
+              "denotationChar",
+              "link",
+              "target",
+              "disabled",
+              "color",
+            ],
+            blotName: "styled-mention",
+          },
+        },
+      });
+
+      function showMenu() {
+        quill2.getModule("mention").openMenu("@");
+      }
+
+      function addMention() {
+        quill2.getModule("mention").insertItem(
+          {
+            denotationChar: "@",
+            id: "123abc",
+            value: "Hello World",
+          },
+          true
+        );
+      }
+
+      window.addEventListener("mention-clicked", function (event) {
+        console.log(event);
       });
     </script>
   </body>