diff --git a/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts b/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts index 91da233e2f43..7857e4233978 100644 --- a/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts +++ b/core-web/libs/block-editor/src/lib/components/dot-block-editor/dot-block-editor.component.ts @@ -670,7 +670,31 @@ export class DotBlockEditorComponent implements OnInit, OnChanges, OnDestroy, Co Underline, TextAlign.configure({ types: ['heading', 'paragraph', 'listItem', 'dotImage'] }), Highlight.configure({ HTMLAttributes: { style: 'background: #accef7;' } }), - Link.configure({ autolink: false, openOnClick: false }) + // Extends the default Link mark with accessibility attributes (title, aria-label) + // and rel. These are persisted in the TipTap JSON and rendered in the editor DOM. + Link.extend({ + addAttributes() { + return { + ...this.parent?.(), + title: { + default: null, + parseHTML: (el) => el.getAttribute('title'), + renderHTML: (attrs) => (attrs.title ? { title: attrs.title } : {}) + }, + 'aria-label': { + default: null, + parseHTML: (el) => el.getAttribute('aria-label'), + renderHTML: (attrs) => + attrs['aria-label'] ? { 'aria-label': attrs['aria-label'] } : {} + }, + rel: { + default: null, + parseHTML: (el) => el.getAttribute('rel'), + renderHTML: (attrs) => (attrs.rel ? { rel: attrs.rel } : {}) + } + }; + } + }).configure({ autolink: false, openOnClick: false }) ]; } diff --git a/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css b/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css index 86feaa54d713..81133f06fac4 100644 --- a/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css +++ b/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.css @@ -57,27 +57,39 @@ } .current-link-view__icon { - @apply text-2xl; + @apply text-base text-gray-500; } .current-link-view__link { - @apply overflow-hidden text-ellipsis whitespace-nowrap max-w-[18.75rem] inline-block; + @apply overflow-hidden text-ellipsis whitespace-nowrap max-w-[18.75rem] inline-block text-xs; } -.current-link-view__checkbox-container { - @apply flex items-center gap-3 mb-6; +.current-link-view__actions { + @apply flex gap-2 mt-4 pt-4 border-t border-gray-200; } -.current-link-view__checkbox { - @apply mr-1; +.field { + @apply flex flex-col gap-1 mb-3; } -.current-link-view__actions { - @apply flex gap-3; +.field label { + @apply text-xs font-medium text-gray-600; +} + +.field input { + @apply h-8 text-sm; +} + +.toggle-advanced { + @apply flex items-center gap-1 text-xs font-medium text-gray-500 bg-transparent border-none cursor-pointer p-0 mb-2 hover:text-gray-700; +} + +.toggle-advanced .pi { + @apply text-xs; } -.current-link-view__action-button { - @apply w-1/2; +.link-editor-popover__advanced { + @apply flex flex-col mb-1; } .listbox-item { diff --git a/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.html b/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.html index 6aa82d8c673c..72966b5ef35e 100644 --- a/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.html +++ b/core-web/libs/block-editor/src/lib/elements/dot-bubble-menu/components/dot-link-editor-popover/dot-link-editor-popover.component.html @@ -79,15 +79,81 @@ {{ existingLinkUrl() }} -