When adding the LeaveEditorDialog I realized both files ares starting to look very similar when it comes to publish logic.
So I did a compare + recommendation, here are the results:

Investigation: Making Publish.vue and AbstractContent.vue more DRY

Overlap

Differences

Refactoring Options

Option 1: useLeaveEditorConfirmation composable (recommended)

Extract the leave-editor logic (~80 duplicated lines) into a composable at composables/useLeaveEditorConfirmation.js.

API:

useLeaveEditorConfirmation({
  isDirty, // Ref<boolean> or () => boolean
  onBeforeLeave, // optional: (targetUrl) => void - e.g. for event logging
})

Option 2: Single configurable EditorActionsWidget (alternative to composable)

Instead of extracting a composable, extend the existing Publish widget into a single EditorActionsWidget (or PublishActionsWidget) that handles both use cases via props.

Props:

Usage:

Publish.vue / Default view (ZObject editor):

<wl-editor-actions-widget
  :show-cancel-button="true"
  :is-dirty="isDirty"
  :get-cancel-url="getCancelUrl"
  :before-publish="raisePublishWarnings"
  :on-before-leave="logCancel"
  ...
/>

AbstractContent.vue:

<wl-editor-actions-widget
  :show-cancel-button="false"
  :is-dirty="isDirty"
  :submit-action="submitAction"
  :success-callback="successCallback"
  :should-listen-for-exit="edit"
/>

Pros: Single component, shared logic, no composable. Cons: Prop surface can grow; AbstractContent layout may need to change to host the widget in header-action.

Recommendation

1. Implement useLeaveEditorConfirmation and refactor both components to use it
2. Optionally add findNavigationLink for link-detection reuse

// utils/navigationUtils.js or similar
function findNavigationLink( clickTarget ) {
    let target = clickTarget;
    while ( target && target.tagName !== 'A' ) {
        target = target.parentNode;
        if ( !target ) return null;
    }
    if (
        !target?.href ||
        target.target === '_blank' ||
        urlUtils.isLinkCurrentPath( target.href ) ||
        target.role === 'button'
    ) {
        return null;
    }
    return target;  // the <a> element, or null
}

Why the composable

1. Matches the duplication – The leave-editor logic is ~95% identical between the two components. The publish flow differs more; unifying those would be a larger refactor.
2. Lower risk – No structural changes. Publish.vue and AbstractContent.vue keep their current templates; we only move shared logic into a composable.

Thanks. What an AI doesn't take into account is that these components are also used differently in About widget, and that this is part of an MVP.

I'd say lets take these recommendations with caution and not refactor unnecessarily.

Change #1238783 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] LeaveEditorDialog: add composable and also use in AbstractContent

https://gerrit.wikimedia.org/r/1238783

Yeah it did a quick analysis and i agree 95% is duplicate. I made a very very simple hook to reuse for publish and abstract. Works great

Change #1238783 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] LeaveEditorDialog: add composable and also use in AbstractContent

https://gerrit.wikimedia.org/r/1238783