Skip to content

V15: TinyMce triggers navigation when clicking links #17781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nielslyngsoe merged 2 commits into from
Dec 11, 2024
Merged

V15: TinyMce triggers navigation when clicking links #17781

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bf07bd
chore: formatting
iOvergaard Dec 11, 2024
ccd3651
fix: trigger only on a-tags inside our own block elements
iOvergaard Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions ...Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,9 +300,9 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert
? html`<uui-button
@click=${this.#expose}
label=${this.localize.term('blockEditor_createThisFor', this._contentTypeName)}
look="secondary"
><uui-icon name="icon-add"></uui-icon
></uui-button>`
look="secondary">
<uui-icon name="icon-add"></uui-icon>
</uui-button>`
: nothing;
}

Expand Down
38 changes: 19 additions & 19 deletions ....Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,34 +76,34 @@ export const defaultFallbackConfig: RawEditorOptions = {
// If we try to open link in a new tab, then we want to skip skip:
//if ((isWindows && e.ctrlKey) || (!isWindows && e.metaKey)) return;

const composedPaths = 'composedPath' in e ? e.composedPath() : null;

// Find the target by using the composed path to get the element through the shadow boundaries.
// Notice the difference here compared to RouterSlots implementation [NL]
const $anchor: HTMLAnchorElement = (('composedPath' in e) as any)
? (e
.composedPath()
.find(($elem) => $elem instanceof HTMLAnchorElement || ($elem as any).tagName === 'A') as HTMLAnchorElement)
: (e.target as HTMLAnchorElement);

// Abort if the event is not about the anchor tag
if ($anchor == null || !($anchor instanceof HTMLAnchorElement || ($anchor as any).tagName === 'A')) {
return;
}

// Get the HREF value from the anchor tag
const href = $anchor.href;
const $anchor: HTMLAnchorElement =
(composedPaths?.find(
($elem) => $elem instanceof HTMLAnchorElement || ($elem as any).tagName === 'A',
) as HTMLAnchorElement) ?? (e.target as HTMLAnchorElement);

// Only handle the anchor tag if the follow holds true:
// - The HREF is relative to the origin of the current location.
// - The target is targeting the current frame.
// - The anchor doesn't have the attribute [data-router-slot]="disabled"
// Abort if the event is not about the anchor tag or the anchor tag has the attribute [data-router-slot]="disabled"
if (
!href.startsWith(location.origin) ||
($anchor.target !== '' && $anchor.target !== '_self') ||
$anchor == null ||
!($anchor instanceof HTMLAnchorElement || ($anchor as any).tagName === 'A') ||
$anchor.dataset['routerSlot'] === 'disabled'
) {
return;
}

// Abort if the anchor tag is not inside a block element
const isInsideBlockElement =
composedPaths?.some(
($elem) => ($elem as any).tagName === 'UMB-RTE-BLOCK' || ($elem as any).tagName === 'UMB-RTE-BLOCK-INLINE',
) ?? false;

if (!isInsideBlockElement) {
return;
}

// Remove the origin from the start of the HREF to get the path
const path = $anchor.pathname + $anchor.search + $anchor.hash;

Expand Down