@mirus/tiptap-editor 2.1.7 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mirus/tiptap-editor",
-    "version": "2.1.7",
+    "version": "2.1.9",
     "description": "custom setup for the tiptap editor",
     "repository": "https://github.com/mirusresearch/tiptap-editor",
     "bugs": {

package/src/App.vue

@@ -1,14 +1,52 @@
 <template>
-    <tiptapEditor
-        :value.sync="localtext"
-        :warnings="warnings"
-        :showMenu="showMenu"
-        :maxCharacterCount="maxCharacterCount"
-        :height="height"
-        v-on:new-character-count="localcount = $event"
-        id="unique_id"
-        placeholder="write something will-ya!"
-    />
+    <div>
+        <div class="dev-controls">
+            <button class="light-dark-button" @click="toggleLightMode">
+                <div v-if="isLightMode" class="button-content">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+                        />
+                    </svg>
+                    <span>Light</span>
+                </div>
+                <div v-else class="button-content">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+                        />
+                    </svg>
+                    <span>Dark</span>
+                </div>
+            </button>
+        </div>
+        <tiptapEditor
+            :value.sync="localtext"
+            :warnings="warnings"
+            :showMenu="showMenu"
+            :maxCharacterCount="maxCharacterCount"
+            :height="height"
+            v-on:new-character-count="localcount = $event"
+            id="unique_id"
+            placeholder="write something will-ya!"
+        />
+    </div>
 </template>
 
 <script>
@@ -19,6 +57,7 @@ export default {
     components: { tiptapEditor },
     data() {
         return {
+            isLightMode: true,
             maxCharacterCount: 250, //default null for infinity
             height: '200px', // default it 300px
             showMenu: true, // false to hide
@@ -59,5 +98,48 @@ export default {
             localcount: null,
         };
     },
+    methods: {
+        toggleLightMode() {
+            this.isLightMode = !this.isLightMode;
+            const htmlElement = document.documentElement;
+            if (htmlElement) {
+                if (htmlElement.getAttribute('color-scheme') === 'dark') {
+                    htmlElement.setAttribute('color-scheme', 'light');
+                } else {
+                    htmlElement.setAttribute('color-scheme', 'dark');
+                }
+            }
+        },
+    },
 };
 </script>
+
+<style>
+.light-dark-button {
+    background: #f4f4f5;
+    margin-bottom: 8px;
+    border-radius: 8px;
+    border: 0;
+    padding: 8px 12px 8px 12px;
+    cursor: pointer;
+
+    svg {
+        height: 1rem;
+        width: 1rem;
+    }
+}
+
+.button-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+}
+
+html[color-scheme='dark'] {
+    button {
+        background: #1f2937;
+        color: #d1d5db;
+    }
+}
+</style>

package/src/tiptap-editor.vue

@@ -66,7 +66,7 @@
                                 : 'character-count__graph'
                         "
                     >
-                        <circle r="10" cx="10" cy="10" fill="#e9ecef" />
+                        <circle r="10" cx="10" cy="10" class="character-count__outer-circle" />
                         <circle
                             r="5"
                             cx="10"
@@ -77,7 +77,7 @@
                             :stroke-dasharray="`calc(${characterCountPercentage}px * 31.4 / 100) 31.4`"
                             transform="rotate(-90) translate(-20)"
                         />
-                        <circle r="6" cx="10" cy="10" fill="white" />
+                        <circle r="6" cx="10" cy="10" class="character-count__inner-circle" />
                     </svg>
                     <div class="character-count__text" aria-live="polite">
                         {{ currentCharacterCount }} / {{ maxCharacterCount }} characters
@@ -321,9 +321,10 @@ export default {
         getOffsetAdjustment(warning) {
             // compliance check offsets count all HTML entities as one character, whereas the editor value does not. compensate for
             // this by adding to the offset until it matches (or equals the length of the editor text as a failsafe break from the loop)
+            const normalizedString = this.value.normalize('NFKC').replace(/&nbsp;/g, ' ');
             while (
-                this.value.substr(warning.offset, warning.value.length) !== warning.value &&
-                warning.offset <= this.value.length
+                normalizedString.substr(warning.offset, warning.value.length) !== warning.value &&
+                warning.offset <= normalizedString.length
             ) {
                 warning.offset++;
             }
@@ -474,7 +475,7 @@ export default {
         // border-bottom: 1px solid #e5e7eb;
         padding: 4px;
         border-radius: 4px;
-        background-color: #f4f4f5;
+        background: #f4f4f5;
         display: flex;
 
         button {
@@ -520,7 +521,7 @@ export default {
         font-size: 16px;
         outline: 0;
         overflow-y: auto;
-        padding: 10px;
+        padding: 6px 2px 4px 2px;
 
         .underline-red {
             border-bottom: 3px red solid;
@@ -544,8 +545,8 @@ export default {
 
         .ProseMirror {
             height: 100%;
-            padding: 2px;
-            border-radius: 7px;
+            padding: 2px 8px 2px 8px;
+            border-radius: 4px;
 
             &:focus {
                 outline: 2px solid #3b82f6;
@@ -572,5 +573,73 @@ export default {
             color: #fb7373;
         }
     }
+
+    &__inner-circle {
+        fill: #f4f4f5;
+    }
+
+    &__outer-circle {
+        fill: #ffffff;
+    }
+}
+
+html[color-scheme='dark'] {
+    .tiptap-editor {
+        border: 2px solid #374151;
+        background: #111827;
+        color: #d1d5db;
+
+        .menubar {
+            background: #1f2937;
+            color: #d1d5db;
+
+            button {
+                color: #d1d5db;
+
+                &:focus {
+                    outline: 2px solid #3b82f6;
+                    transition: all 0.08s ease-in-out;
+                }
+
+                &.is-active {
+                    background-color: #374151;
+                }
+
+                &.is-active:focus {
+                    background-color: #4b5563;
+                }
+
+                &:not(.is-active):hover {
+                    background-color: #374151;
+                }
+
+                &:not(.is-active):focus {
+                    background-color: #374151;
+                }
+
+                svg {
+                    width: 12px;
+                }
+            }
+        }
+    }
+
+    .character-count {
+        &__graph {
+            color: #a8c2f7;
+
+            &--warning {
+                color: #fb7373;
+            }
+        }
+
+        &__inner-circle {
+            fill: #1f2937;
+        }
+
+        &__outer-circle {
+            fill: #111827;
+        }
+    }
 }
 </style>

package/src/warnings.js

@@ -62,8 +62,9 @@ function lint(doc, position, prev, getErrorWords) {
     doc.descendants((node, pos) => {
         if (node.isText) {
             // Scan text nodes for bad words
+            const normalizedText = node.text.normalize('NFKC').replace(/ /g, ' ');
             let m;
-            while ((m = badWordsRegex.exec(node.text))) {
+            while ((m = badWordsRegex.exec(normalizedText))) {
                 const matchingErrorWords = words.filter((word) => word.value === m[0]);
                 const indexOfMatchedWord = pos + m.index;
                 let errorHasOffsetData = false;