@mirus/tiptap-editor 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mirus/tiptap-editor",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "custom setup for the tiptap editor",
     "repository": "https://github.com/mirusresearch/tiptap-editor",
     "bugs": {
@@ -9,7 +9,7 @@
     "homepage": "https://github.com/mirusresearch/tiptap-editor",
     "author": "alec@mirusresearch.com",
     "license": "MIT",
-    "main": "dist/tiptap-editor.umd.min.js",
+    "main": "dist/tiptap-editor.mjs",
     "browser": {
 	"./sfc": "src/tiptap-editor.vue"
     },
@@ -75,6 +75,7 @@
 	"ie >= 9"
     ],
     "dependencies": {
+	"vite-plugin-css-injected-by-js": "^3.3.0",
 	"vue-template-compiler": "^2.7.14"
     }
 }

package/src/App.vue

@@ -19,7 +19,7 @@ export default {
     components: { tiptapEditor },
     data() {
         return {
-            maxCharacterCount: 200, //default null for infinity
+            maxCharacterCount: 250, //default null for infinity
             height: '200px', // default it 300px
             showMenu: true, // false to hide
             warnings: [
@@ -27,7 +27,8 @@ export default {
                     value: 'red',
                     message: 'did you mean...',
                     options: ['read', 'reed'], // optional
-                    // default class is red
+                    offset: 55, // identifies which instance of the word is problematic
+                    length: 3, // length of the word
                 },
                 {
                     value: 'prob|emati(', // avoid regexs that go bump in the night
@@ -39,6 +40,8 @@ export default {
                     isWord: false,
                     message: 'you sure you wanted a tag?',
                     overrideClass: 'underline-blue', // optional
+                    offset: 10,
+                    length: 8,
                 },
                 {
                     value: 'green',
@@ -52,7 +55,7 @@ export default {
                 },
             ],
             localtext:
-                'Hi! 👋🏻 <script> welcome to tiptap editor, here is a red mark blue with suggestions. Even prob|emati( strings. You can highlight with other colors, e.g blue, orange, and green!!',
+                'Hi! 👋🏻 <script> welcome to tiptap editor, here is a red mark blue with suggestions. Even prob|emati( strings. You can highlight with other colors, e.g blue, orange, and green!! This <script&gt should not have any highlight.',
             localcount: null,
         };
     },

package/src/tiptap-editor.vue

@@ -80,8 +80,7 @@
                         <circle r="6" cx="10" cy="10" fill="white" />
                     </svg>
                     <div class="character-count__text" aria-live="polite">
-                        {{ editor.storage.characterCount.characters() }} /
-                        {{ maxCharacterCount }} characters
+                        {{ currentCharacterCount }} / {{ maxCharacterCount }} characters
                     </div>
                 </div>
             </div>
@@ -162,7 +161,8 @@ export default {
             navigatedOptionIndex: 0,
             insertOption: () => {},
             optionsRange: null,
-            currentCharacterCount: 0,
+            initialCharacterCount: 0,
+            previousCharacterCount: 0,
         };
     },
     computed: {
@@ -177,20 +177,23 @@ export default {
                     isWord: isWord,
                     value: isWord ? mistake.value : unescape(mistake.value),
                     message: mistake.message,
+                    offset: mistake.offset,
+                    length: mistake.length,
                     options: (mistake.options || []).map((value, id) => ({ value, id })),
                 };
             });
         },
+        currentCharacterCount() {
+            return this.editor.storage.characterCount.characters();
+        },
         maxCharacterCountExceeded() {
             if (this.editor) {
-                return this.editor.storage.characterCount.characters() >= this.maxCharacterCount;
+                return this.currentCharacterCount >= this.maxCharacterCount;
             }
         },
         characterCountPercentage() {
             if (this.editor) {
-                return Math.round(
-                    (100 / this.maxCharacterCount) * this.editor.storage.characterCount.characters()
-                );
+                return Math.round((100 / this.maxCharacterCount) * this.currentCharacterCount);
             }
         },
     },
@@ -218,6 +221,7 @@ export default {
                 Text,
                 Warning.configure({
                     getErrorWords: this.getErrorWords,
+                    getInitialCharacterCount: this.getInitialCharacterCount,
                     onEnter: ({ range, command, virtualNode, text }) => {
                         this.currentWarning = this.errors.find((err) => err.value === text);
                         this.currentOptions = this.currentWarning.options || [];
@@ -281,6 +285,21 @@ export default {
             arrowType: 'round',
             hideOnClick: false,
         });
+        this.initialCharacterCount = this.currentCharacterCount;
+        this.previousCharacterCount = this.currentCharacterCount;
+        this.editor.on('update', ({ editor }) => {
+            this.warnings.forEach((warning) => {
+                if (warning.length && warning.offset) {
+                    if (editor.state.selection.head - 1 <= warning.offset) {
+                        const charCountDif =
+                            this.currentCharacterCount - this.previousCharacterCount;
+                        warning.offset += charCountDif;
+                    }
+                }
+            });
+            this.previousCharacterCount = this.currentCharacterCount;
+            this.editor.commands.focus();
+        });
     },
     destroyed() {
         this.editor.destroy();
@@ -297,8 +316,13 @@ export default {
                 value: err.value,
                 overrideClass: err.overrideClass,
                 isWord: err.isWord,
+                offset: err.offset,
+                length: err.length,
             }));
         },
+        getInitialCharacterCount() {
+            return this.initialCharacterCount;
+        },
         upHandler() {
             this.navigatedOptionIndex =
                 (this.navigatedOptionIndex + this.currentOptions.length - 1) %
@@ -362,8 +386,11 @@ export default {
             if (this.editor) {
                 // preserve selection after updating warnings
                 const oldSelection = this.editor.selection;
-                this.editor.setContent(this.currentValue);
-                this.editor.setSelection(oldSelection.from, oldSelection.to);
+                this.editor.commands.setContent(this.currentValue);
+                this.editor.commands.setSelection(oldSelection.from, oldSelection.to);
+
+                // record length of text that was used to generate the list of warnings
+                this.initialCharacterCount = this.currentCharacterCount;
             }
         },
     },
@@ -382,6 +409,7 @@ export default {
 
 .tiptap-editor {
     border: 1px solid #e5e7eb;
+    background: white;
     border-radius: 8px;
     padding: 4px;
 

package/src/warnings.js

@@ -20,7 +20,7 @@ function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
-function lint(doc, position, prev, getErrorWords) {
+function lint(doc, position, prev, getErrorWords, getInitialCharacterCount) {
     const words = getErrorWords();
     const regexString = words
         .map((w) => (isWord(w) ? `\\b(${escapeRegExp(w.value)})\\b` : `(${escapeRegExp(w.value)})`))
@@ -64,7 +64,17 @@ function lint(doc, position, prev, getErrorWords) {
             // Scan text nodes for bad words
             let m;
             while ((m = badWordsRegex.exec(node.text))) {
-                record(pos + m.index, pos + m.index + m[0].length, m[0]);
+                const originalErrorWord = words.find((word) => word.value === m[0]);
+
+                // highlight specific instance if the error has offset data
+                const indexOfMatchedWord = pos + m.index;
+                if (originalErrorWord.offset && originalErrorWord.length) {
+                    if (indexOfMatchedWord == originalErrorWord.offset) {
+                        record(indexOfMatchedWord, indexOfMatchedWord + m[0].length, m[0]);
+                    }
+                } else {
+                    record(indexOfMatchedWord, indexOfMatchedWord + m[0].length, m[0]);
+                }
             }
         }
     });
@@ -82,6 +92,7 @@ const Warning = Node.create({
             onEnter: () => {},
             onExit: () => {},
             onKeyDown: () => {},
+            getInitialCharacterCount: () => 0,
             defaultClass: 'underline-red',
         };
     },
@@ -202,13 +213,25 @@ const Warning = Node.create({
                 },
                 state: {
                     init(_, { doc }) {
-                        return lint(doc, null, {}, self.options.getErrorWords);
+                        return lint(
+                            doc,
+                            null,
+                            {},
+                            self.options.getErrorWords,
+                            self.options.getInitialCharacterCount
+                        );
                     },
                     apply(tr, prev) {
                         const { selection } = tr;
                         const next = Object.assign({}, prev);
                         const position = selection.$from;
-                        return lint(tr.doc, position, prev, self.options.getErrorWords);
+                        return lint(
+                            tr.doc,
+                            position,
+                            prev,
+                            self.options.getErrorWords,
+                            self.options.getInitialCharacterCount
+                        );
                     },
                 },
                 props: {

package/vite.config.js

@@ -1,8 +1,16 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue2'
-
-const path = require("path");
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue2';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 export default defineConfig({
-    plugins: [vue()],
-})
+    plugins: [vue(), cssInjectedByJsPlugin()],
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'src/index.js'),
+            name: 'TiptapEditor',
+            fileName: 'tiptap-editor',
+            formats: ['es'],
+        },
+    },
+});