Show mark toolbar for the deepest mark rather than the one first foun…

…d in `fields.markdoc`/`fields.mdx` (#1233)
Thinkmill · Jul 18, 2024 · cfc1bdc · cfc1bdc
1 parent b66a143
commit cfc1bdc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/.changeset/olive-parents-warn.md b/.changeset/olive-parents-warn.md
@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Show mark toolbar for the deepest mark rather than the one first found in `fields.markdoc`/`fields.mdx`
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/popovers/index.tsx b/packages/keystatic/src/form/fields/markdoc/editor/popovers/index.tsx
@@ -522,6 +522,7 @@ const CustomMarkPopover: MarkPopoverRenderer = props => {
 function getPopoverDecoration(state: EditorState): PopoverDecoration | null {
   if (state.selection instanceof TextSelection) {
     const schema = getEditorSchema(state.schema);
+    let decoration: PopoverDecoration | null = null;
     for (const [name, componentConfig] of Object.entries(schema.components)) {
       if (
         componentConfig.kind !== 'mark' ||
@@ -537,14 +538,17 @@ function getPopoverDecoration(state: EditorState): PopoverDecoration | null {
         aroundFrom.from === aroundTo?.from &&
         aroundFrom.to === aroundTo.to
       ) {
-        return {
-          adaptToBoundary: 'flip',
-          kind: 'mark',
-          component: CustomMarkPopover,
-          mark: aroundFrom.mark,
-          from: aroundFrom.from,
-          to: aroundFrom.to,
-        };
+        const rangeSize = aroundFrom.to - aroundFrom.from;
+        if (!decoration || rangeSize < decoration.to - decoration.from) {
+          decoration = {
+            adaptToBoundary: 'flip',
+            kind: 'mark',
+            component: CustomMarkPopover,
+            mark: aroundFrom.mark,
+            from: aroundFrom.from,
+            to: aroundFrom.to,
+          };
+        }
       }
     }
     if (schema.marks.link) {
@@ -558,16 +562,22 @@ function getPopoverDecoration(state: EditorState): PopoverDecoration | null {
         linkAroundFrom.from === linkAroundTo?.from &&
         linkAroundFrom.to === linkAroundTo.to
       ) {
-        return {
-          adaptToBoundary: 'flip',
-          kind: 'mark',
-          component: LinkPopover,
-          mark: linkAroundFrom.mark,
-          from: linkAroundFrom.from,
-          to: linkAroundFrom.to,
-        };
+        const rangeSize = linkAroundFrom.to - linkAroundFrom.from;
+        if (!decoration || rangeSize < decoration.to - decoration.from) {
+          return {
+            adaptToBoundary: 'flip',
+            kind: 'mark',
+            component: LinkPopover,
+            mark: linkAroundFrom.mark,
+            from: linkAroundFrom.from,
+            to: linkAroundFrom.to,
+          };
+        }
       }
     }
+    if (decoration) {
+      return decoration;
+    }
   }
 
   const editorSchema = getEditorSchema(state.schema);