- Fix contenteditable tag support

- Improve transition of toolbar
- Fix empty color appearance

package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
-    "svelte": "^5.0.0-next.166",
+    "svelte": "^5.0.0-next.167",
     "vite": "^5.3.2"
   },
   "peerDependencies": {

src/marker/find-text-ranges.ts

@@ -10,9 +10,12 @@ export default function(texts: string[]) {
         //only text nodes
         NodeFilter.SHOW_TEXT,
         //skip blacklisted tags
-        (node) =>
-            //@ts-ignore
-            blacklistedTags.includes(node.parentNode?.tagName) || !node.parentNode?.checkVisibility() ? 
+        node =>
+            (
+                blacklistedTags.includes((node.parentNode as HTMLElement)?.tagName) ||
+                (node.parentNode as HTMLElement)?.contentEditable == 'true' ||
+                !(node.parentNode as HTMLElement)?.checkVisibility()
+            ) ?
                 NodeFilter.FILTER_REJECT : 
                 NodeFilter.FILTER_ACCEPT
     )

src/marker/index.ts

@@ -32,7 +32,10 @@ export function getCurrentRange(): Range | undefined {
     if (!selection?.rangeCount) return
     const range = selection.getRangeAt(0)
     //ignore contenteditable elements
-    if (range?.commonAncestorContainer?.parentElement?.hasAttribute('contenteditable')) return
+    if (
+        (range?.commonAncestorContainer?.nodeType == 1 ? range?.commonAncestorContainer as HTMLElement : range?.commonAncestorContainer?.parentElement)
+            ?.closest('[contenteditable=""], [contenteditable=true]')
+    ) return
     return range
 }
 

src/marker/modern.ts

@@ -40,7 +40,7 @@ export function apply(highlights: RaindropHighlight[]) {
                 ::highlight(${cssId}) {
                     all: unset;
                     background-color: color-mix(in srgb, ${colors.get(color!) || color || 'yellow'}, white 60%) !important;
-                    color: color-mix(in srgb, ${colors.get(color!) || color}, black 80%) !important;
+                    color: color-mix(in srgb, ${colors.get(color!) || color || 'yellow'}, black 80%) !important;
                     ${note ? `text-decoration: underline wavy; -webkit-text-decoration: underline wavy;` : ''}
                     text-decoration-thickness: from-font;
                 }

src/ui/modal.svelte

@@ -174,7 +174,6 @@
         font-weight: bold;
         position: sticky;
         top: 0;
-        
     }
 
     @supports(animation-timeline: scroll()) {

src/ui/toolbar.svelte

@@ -297,15 +297,16 @@
             display .25s allow-discrete ease-in-out, 
             overlay .25s allow-discrete ease-in-out, 
             box-shadow .25s allow-discrete ease-in-out, 
-            transform .25s allow-discrete ease-in-out,
-            opacity .25s ease-in-out;
+            opacity .25s ease-in-out,
+            left .15s ease-in-out,
+            top .15s ease-in-out,
+            right .15s ease-in-out,
+            bottom .15s ease-in-out;
         opacity: 0;
-        transform: translateY(3px);
     }
 
     [open] {
         opacity: 1;
-        transform: translateY(0);
     }
 
     dialog:not([open]) {
@@ -316,7 +317,6 @@
     @starting-style {
         [open] {
             opacity: 0;
-            transform: translateY(-3px);
         }
     }
 </style>

test/iframe/embed.html

@@ -17,7 +17,7 @@ <h1>12 Modern CSS One-Line Upgrades | Modern CSS Sometim&nbsp;<a href="https://m
     either a key or a value.
   </p>
 
-  <div contenteditable>blabla<b>aa</b></div>
+  <div contenteditable>Map blabla<b>aa</b></div>
 
   <p>
     One thing that comes up often is how they relate to scrollbars. For example, if an element is sized to 100vw and stretches edge-to-edge, that’s fine so long as the page doesn’t have a vertical scrollbar. If it does have a vertical scrollbar, then 100vw is too wide, and the presence of that vertical scrollbar triggers a horizontal scrollbar because viewport units don’t have an elegant/optional way of handling that. So you might be hiding overflow on the body when you otherwise wouldn’t need to, for example. (Demo)