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 { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { css, html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
let DatabaseTitle = class DatabaseTitle extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this.isComposing = false;
        this._onKeyDown = (event) => {
            if (event.key === 'Enter' && !event.isComposing) {
                // prevent insert v-line
                event.preventDefault();
                // insert new row
                this.onPressEnterKey?.();
                return;
            }
        };
        this.isActive = false;
        this._onTitleFocus = () => {
            this.isActive = true;
        };
        this._onTitleBlur = () => {
            this.isActive = false;
        };
    }
    get inlineEditor() {
        assertExists(this.richText.inlineEditor);
        return this.richText.inlineEditor;
    }
    get inlineEditorContainer() {
        return this.inlineEditor.rootElement;
    }
    firstUpdated() {
        // for title placeholder
        this.titleText.yText.observe(() => {
            this.requestUpdate();
        });
        this.updateComplete
            .then(() => {
            this.disposables.addFromEvent(this.inlineEditorContainer, 'focus', this._onTitleFocus);
            this.disposables.addFromEvent(this.inlineEditorContainer, 'blur', this._onTitleBlur);
            this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionstart', () => {
                this.isComposing = true;
            });
            this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionend', () => {
                this.isComposing = false;
            });
            this.disposables.addFromEvent(this.inlineEditorContainer, 'keydown', this._onKeyDown);
        })
            .catch(console.error);
    }
    async getUpdateComplete() {
        const result = await super.getUpdateComplete();
        await this.richText?.updateComplete;
        return result;
    }
    render() {
        const isEmpty = (!this.titleText || !this.titleText.length) && !this.isComposing;
        const classList = classMap({
            'database-title': true,
            'database-title-empty': isEmpty,
            ellipsis: !this.isActive,
        });
        return html `<div class="affine-database-title">
      <rich-text
        .yText=${this.titleText.yText}
        .enableFormat=${false}
        .readonly=${this.readonly}
        class="${classList}"
        data-block-is-database-title="true"
        title="${this.titleText.toString()}"
      ></rich-text>
      <div class="database-title" style="float:left;height: 0;">Untitled</div>
    </div>`;
    }
};
DatabaseTitle.styles = css `
    .affine-database-title {
      position: relative;
      flex: 1;
    }

    .database-title {
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      color: var(--affine-text-primary-color);
      font-family: inherit;
      /* overflow-x: scroll; */
      overflow: hidden;
      cursor: text;
    }

    .database-title [data-v-text='true'] {
      display: block;
      word-break: break-all !important;
    }

    .database-title.ellipsis [data-v-text='true'] {
      white-space: nowrap !important;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .database-title-empty [data-v-root='true']::before {
      content: 'Untitled';
      position: absolute;
      pointer-events: none;
      color: var(--affine-text-primary-color);
    }

    .database-title-empty [data-v-root='true']:focus::before {
      color: var(--affine-placeholder-color);
    }
  `;
__decorate([
    property({ attribute: false })
], DatabaseTitle.prototype, "titleText", void 0);
__decorate([
    property({ attribute: false })
], DatabaseTitle.prototype, "readonly", void 0);
__decorate([
    property({ attribute: false })
], DatabaseTitle.prototype, "onPressEnterKey", void 0);
__decorate([
    state()
], DatabaseTitle.prototype, "isComposing", void 0);
__decorate([
    query('rich-text')
], DatabaseTitle.prototype, "richText", void 0);
__decorate([
    state()
], DatabaseTitle.prototype, "isActive", void 0);
DatabaseTitle = __decorate([
    customElement('affine-database-title')
], DatabaseTitle);
export { DatabaseTitle };
//# sourceMappingURL=title.js.map