var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { assertExists } from '@blockeditor/global/utils';
import { INLINE_ROOT_ATTR, ZERO_WIDTH_SPACE, } from '@blockeditor/inline';
import { ShadowlessElement } from '@blockeditor/lit';
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
import { HoverController } from '../../../../components/hover/index.js';
import { affineTextStyles } from '../affine-text.js';
import { toggleLinkPopup } from './link-popup/toggle-link-popup.js';
let AffineLink = class AffineLink extends ShadowlessElement {
    constructor() {
        super(...arguments);
        this.delta = {
            insert: ZERO_WIDTH_SPACE,
        };
        this._whenHover = new HoverController(this, ({ abortController }) => {
            return {
                template: toggleLinkPopup(this.inlineEditor, 'view', this.selfInlineRange, abortController),
            };
        });
    }
    get link() {
        const link = this.delta.attributes?.link;
        if (!link) {
            return '';
        }
        return link;
    }
    get inlineEditor() {
        const inlineRoot = this.closest(`[${INLINE_ROOT_ATTR}]`);
        assertExists(inlineRoot);
        return inlineRoot.inlineEditor;
    }
    get selfInlineRange() {
        const selfInlineRange = this.inlineEditor.getInlineRangeFromElement(this);
        assertExists(selfInlineRange);
        return selfInlineRange;
    }
    // Workaround for links not working in contenteditable div
    // see also https://stackoverflow.com/questions/12059211/how-to-make-clickable-anchor-in-contenteditable-div
    //
    // Note: We cannot use JS to directly open a new page as this may be blocked by the browser.
    //
    // Please also note that when readonly mode active,
    // this workaround is not necessary and links work normally.
    // see https://github.com/toeverything/AFFiNE/issues/1540
    _onMouseUp() {
        const anchorElement = this.querySelector('a');
        assertExists(anchorElement);
        if (!anchorElement.isContentEditable)
            return;
        anchorElement.contentEditable = 'false';
        setTimeout(() => {
            anchorElement.removeAttribute('contenteditable');
        }, 0);
    }
    render() {
        const style = this.delta.attributes
            ? affineTextStyles(this.delta.attributes)
            : styleMap({});
        return html `<a
      ${ref(this._whenHover.setReference)}
      href=${this.link}
      rel="noopener noreferrer"
      target="_blank"
      style=${style}
      @mouseup=${this._onMouseUp}
      ><v-text .str=${this.delta.insert}></v-text
    ></a>`;
    }
};
AffineLink.styles = css `
    affine-link > a {
      white-space: nowrap;
      word-break: break-word;
      color: var(--affine-link-color);
      fill: var(--affine-link-color);
      text-decoration: none;
      cursor: pointer;
    }

    affine-link > a:hover [data-v-text='true'] {
      text-decoration: underline;
    }

    affine-link > a > v-text {
      white-space: break-spaces;
    }
  `;
__decorate([
    property({ type: Object })
], AffineLink.prototype, "delta", void 0);
AffineLink = __decorate([
    customElement('affine-link')
], AffineLink);
export { AffineLink };
//# sourceMappingURL=affine-link.js.map