chore: migrate oxlint & oxfmt (#15464)
#### PR Dependency Tree * **PR #15464** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Replaced the project’s formatting and linting workflow with Oxfmt and Oxlint. * Added shared formatting and linting configuration, editor integration, and updated automated checks. * Updated generated files, scripts, and lint guidance to use the new tooling. * **Style** * Reformatted templates, source code, examples, and configuration files for consistent readability. * No user-facing functionality or rendering behavior changed. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
DarkSky
@@ -234,22 +234,26 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
|
||||
backgroundColor: backgroundColor ?? 'transparent',
|
||||
})}
|
||||
>
|
||||
${iconContent
|
||||
? html`
|
||||
<div
|
||||
@click=${this._toggleIconPicker}
|
||||
contenteditable="false"
|
||||
class="${calloutEmojiContainerStyles}"
|
||||
style=${styleMap({
|
||||
marginTop: this._getEmojiMarginTop(),
|
||||
})}
|
||||
>
|
||||
<span class="${calloutEmojiStyles}" data-testid="callout-emoji"
|
||||
>${iconContent}</span
|
||||
${
|
||||
iconContent
|
||||
? html`
|
||||
<div
|
||||
@click=${this._toggleIconPicker}
|
||||
contenteditable="false"
|
||||
class="${calloutEmojiContainerStyles}"
|
||||
style=${styleMap({
|
||||
marginTop: this._getEmojiMarginTop(),
|
||||
})}
|
||||
>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
<span
|
||||
class="${calloutEmojiStyles}"
|
||||
data-testid="callout-emoji"
|
||||
>${iconContent}</span
|
||||
>
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
<div class="${calloutChildrenStyles}">
|
||||
${this.renderChildren(this.model)}
|
||||
</div>
|
||||
|
||||
@@ -489,9 +489,11 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
|
||||
}}
|
||||
>
|
||||
</rich-text>
|
||||
${collapsed
|
||||
? html`<div class="code-collapsed-fade" aria-hidden="true"></div>`
|
||||
: nothing}
|
||||
${
|
||||
collapsed
|
||||
? html`<div class="code-collapsed-fade" aria-hidden="true"></div>`
|
||||
: nothing
|
||||
}
|
||||
<div
|
||||
style=${styleMap({
|
||||
display: shouldRenderPreview && !collapsed ? undefined : 'none',
|
||||
|
||||
@@ -132,32 +132,36 @@ export class LinkCell extends BaseCellRenderer<string, string> {
|
||||
return html`
|
||||
<div>
|
||||
<div class="${linkContainerStyle}">
|
||||
${isDoc
|
||||
? html`<span class="${linkedDocStyle}" @click="${this.openDoc}"
|
||||
>${docName}</span
|
||||
>`
|
||||
: isValidUrl(linkText)
|
||||
? html`<a
|
||||
data-testid="property-link-a"
|
||||
class="${inlineLinkNodeStyle}"
|
||||
href="${linkText}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>${linkText}</a
|
||||
${
|
||||
isDoc
|
||||
? html`<span class="${linkedDocStyle}" @click="${this.openDoc}"
|
||||
>${docName}</span
|
||||
>`
|
||||
: html`<span class="${normalTextStyle}">${linkText}</span>`}
|
||||
: isValidUrl(linkText)
|
||||
? html`<a
|
||||
data-testid="property-link-a"
|
||||
class="${inlineLinkNodeStyle}"
|
||||
href="${linkText}"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>${linkText}</a
|
||||
>`
|
||||
: html`<span class="${normalTextStyle}">${linkText}</span>`
|
||||
}
|
||||
</div>
|
||||
${hasLink
|
||||
? html` <div class="${linkIconContainerStyle} ${showLinkIconStyle}">
|
||||
<div
|
||||
class="${linkIconStyle}"
|
||||
data-testid="edit-link-button"
|
||||
@click="${this._onEdit}"
|
||||
>
|
||||
${EditIcon()}
|
||||
</div>
|
||||
</div>`
|
||||
: nothing}
|
||||
${
|
||||
hasLink
|
||||
? html` <div class="${linkIconContainerStyle} ${showLinkIconStyle}">
|
||||
<div
|
||||
class="${linkIconStyle}"
|
||||
data-testid="edit-link-button"
|
||||
@click="${this._onEdit}"
|
||||
>
|
||||
${EditIcon()}
|
||||
</div>
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -427,33 +427,37 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
|
||||
`
|
||||
)
|
||||
)}
|
||||
${isError
|
||||
? html`
|
||||
<div class="affine-embed-linked-doc-card-content-reload">
|
||||
<div
|
||||
class="affine-embed-linked-doc-card-content-reload-button"
|
||||
@click=${this.refreshData}
|
||||
>
|
||||
${ResetIcon()} <span>Reload</span>
|
||||
${
|
||||
isError
|
||||
? html`
|
||||
<div class="affine-embed-linked-doc-card-content-reload">
|
||||
<div
|
||||
class="affine-embed-linked-doc-card-content-reload-button"
|
||||
@click=${this.refreshData}
|
||||
>
|
||||
${ResetIcon()} <span>Reload</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="affine-embed-linked-doc-content-date">
|
||||
<span>Updated</span>
|
||||
`
|
||||
: html`
|
||||
<div class="affine-embed-linked-doc-content-date">
|
||||
<span>Updated</span>
|
||||
|
||||
<span>${dateText}</span>
|
||||
</div>
|
||||
`}
|
||||
<span>${dateText}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
|
||||
${showDefaultBanner
|
||||
? html`
|
||||
<div class="affine-embed-linked-doc-banner default">
|
||||
${defaultBanner}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
${
|
||||
showDefaultBanner
|
||||
? html`
|
||||
<div class="affine-embed-linked-doc-banner default">
|
||||
${defaultBanner}
|
||||
</div>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
@@ -202,42 +202,48 @@ export class EmbedSyncedDocCard extends WithDisposable(ShadowlessElement) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${showDefaultNoteContent
|
||||
? html`<div class="affine-embed-synced-doc-content-note default">
|
||||
${defaultNoteContent}
|
||||
</div>`
|
||||
: nothing}
|
||||
${
|
||||
showDefaultNoteContent
|
||||
? html`<div class="affine-embed-synced-doc-content-note default">
|
||||
${defaultNoteContent}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
<div class="affine-embed-synced-doc-content-note render"></div>
|
||||
|
||||
${error
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-card-content-reload">
|
||||
<div
|
||||
class="affine-embed-synced-doc-card-content-reload-button"
|
||||
@click=${() => this.block.refreshData()}
|
||||
>
|
||||
${ResetIcon()} <span>Reload</span>
|
||||
${
|
||||
error
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-card-content-reload">
|
||||
<div
|
||||
class="affine-embed-synced-doc-card-content-reload-button"
|
||||
@click=${() => this.block.refreshData()}
|
||||
>
|
||||
${ResetIcon()} <span>Reload</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="affine-embed-synced-doc-card-content-date">
|
||||
<span>Updated</span>
|
||||
`
|
||||
: html`
|
||||
<div class="affine-embed-synced-doc-card-content-date">
|
||||
<span>Updated</span>
|
||||
|
||||
<span>${dateText}</span>
|
||||
</div>
|
||||
`}
|
||||
<span>${dateText}</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="affine-embed-synced-doc-card-banner render"></div>
|
||||
|
||||
${showDefaultBanner
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-card-banner default">
|
||||
${defaultBanner}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
${
|
||||
showDefaultBanner
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-card-banner default">
|
||||
${defaultBanner}
|
||||
</div>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -123,15 +123,17 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
|
||||
${header}
|
||||
</div>
|
||||
<div class="affine-embed-synced-doc-editor">
|
||||
${this.isPageMode && this._isEmptySyncedDoc
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-editor-empty">
|
||||
<span>
|
||||
This is a linked doc, you can add content here.
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: guard([editorMode, syncedDoc], renderEditor)}
|
||||
${
|
||||
this.isPageMode && this._isEmptySyncedDoc
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-editor-empty">
|
||||
<span>
|
||||
This is a linked doc, you can add content here.
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: guard([editorMode, syncedDoc], renderEditor)
|
||||
}
|
||||
</div>
|
||||
<div class="affine-embed-synced-doc-editor-overlay"></div>
|
||||
</div>
|
||||
|
||||
@@ -242,18 +242,20 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
|
||||
?data-scale=${undefined}
|
||||
>
|
||||
<div class="affine-embed-synced-doc-editor">
|
||||
${isPageMode && this._isEmptySyncedDoc
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-editor-empty">
|
||||
<span>
|
||||
This is a linked doc, you can add content here.
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: guard(
|
||||
[editorMode, syncedDoc, appTheme, edgelessTheme],
|
||||
renderEditor
|
||||
)}
|
||||
${
|
||||
isPageMode && this._isEmptySyncedDoc
|
||||
? html`
|
||||
<div class="affine-embed-synced-doc-editor-empty">
|
||||
<span>
|
||||
This is a linked doc, you can add content here.
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: guard(
|
||||
[editorMode, syncedDoc, appTheme, edgelessTheme],
|
||||
renderEditor
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
class=${classMap({
|
||||
|
||||
@@ -108,11 +108,13 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<EmbedFigmaMode
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${description
|
||||
? html`<div class="affine-embed-figma-content-description">
|
||||
${description}
|
||||
</div>`
|
||||
: nothing}
|
||||
${
|
||||
description
|
||||
? html`<div class="affine-embed-figma-content-description">
|
||||
${description}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
|
||||
<div class="affine-embed-figma-content-url" @click=${this.open}>
|
||||
<span>www.figma.com</span>
|
||||
|
||||
@@ -183,21 +183,23 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
|
||||
${titleIcon}
|
||||
</div>
|
||||
|
||||
${status && statusText
|
||||
? html`<div
|
||||
class=${classMap({
|
||||
'affine-embed-github-content-title-status-icon': true,
|
||||
[githubType]: true,
|
||||
[status]: true,
|
||||
success: statusReason === 'completed',
|
||||
failure: statusReason === 'not_planned',
|
||||
})}
|
||||
>
|
||||
${statusIcon}
|
||||
${
|
||||
status && statusText
|
||||
? html`<div
|
||||
class=${classMap({
|
||||
'affine-embed-github-content-title-status-icon': true,
|
||||
[githubType]: true,
|
||||
[status]: true,
|
||||
success: statusReason === 'completed',
|
||||
failure: statusReason === 'not_planned',
|
||||
})}
|
||||
>
|
||||
${statusIcon}
|
||||
|
||||
<span>${statusText}</span>
|
||||
</div>`
|
||||
: nothing}
|
||||
<span>${statusText}</span>
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="affine-embed-github-content-title-text">
|
||||
@@ -209,50 +211,56 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
|
||||
${descriptionText}
|
||||
</div>
|
||||
|
||||
${githubType === 'issue' && assignees
|
||||
? html`
|
||||
<div class="affine-embed-github-content-assignees">
|
||||
<div
|
||||
class="affine-embed-github-content-assignees-text label"
|
||||
>
|
||||
Assignees
|
||||
</div>
|
||||
${
|
||||
githubType === 'issue' && assignees
|
||||
? html`
|
||||
<div class="affine-embed-github-content-assignees">
|
||||
<div
|
||||
class="affine-embed-github-content-assignees-text label"
|
||||
>
|
||||
Assignees
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="affine-embed-github-content-assignees-text users"
|
||||
>
|
||||
${assignees.length === 0
|
||||
? html`<span
|
||||
class="affine-embed-github-content-assignees-text-users placeholder"
|
||||
>No one</span
|
||||
>`
|
||||
: repeat(
|
||||
assignees,
|
||||
assignee => assignee,
|
||||
(assignee, index) =>
|
||||
html`<span
|
||||
class="affine-embed-github-content-assignees-text-users user"
|
||||
@click=${() =>
|
||||
this._handleAssigneeClick(assignee)}
|
||||
>${`@${assignee}`}</span
|
||||
>
|
||||
${index === assignees.length - 1 ? '' : `, `}`
|
||||
)}
|
||||
<div
|
||||
class="affine-embed-github-content-assignees-text users"
|
||||
>
|
||||
${
|
||||
assignees.length === 0
|
||||
? html`<span
|
||||
class="affine-embed-github-content-assignees-text-users placeholder"
|
||||
>No one</span
|
||||
>`
|
||||
: repeat(
|
||||
assignees,
|
||||
assignee => assignee,
|
||||
(assignee, index) =>
|
||||
html`<span
|
||||
class="affine-embed-github-content-assignees-text-users user"
|
||||
@click=${() =>
|
||||
this._handleAssigneeClick(assignee)}
|
||||
>${`@${assignee}`}</span
|
||||
>
|
||||
${index === assignees.length - 1 ? '' : `, `}`
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
|
||||
<div class="affine-embed-github-content-url" @click=${this.open}>
|
||||
<span class="affine-embed-github-content-repo"
|
||||
>${`${owner}/${repo} |`}</span
|
||||
>
|
||||
|
||||
${createdAt
|
||||
? html`<span class="affine-embed-github-content-date"
|
||||
>${dateText} |</span
|
||||
>`
|
||||
: nothing}
|
||||
${
|
||||
createdAt
|
||||
? html`<span class="affine-embed-github-content-date"
|
||||
>${dateText} |</span
|
||||
>`
|
||||
: nothing
|
||||
}
|
||||
<span>github.com</span>
|
||||
|
||||
<div class="affine-embed-github-content-url-icon">
|
||||
|
||||
@@ -252,16 +252,18 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
|
||||
${this.error?.message || 'Failed to load embedded content'}
|
||||
</div>
|
||||
<div class="error-info">
|
||||
${this.readonly
|
||||
? nothing
|
||||
: html`
|
||||
<div class="button edit" @click=${this._toggleEdit}>
|
||||
<span class="icon"
|
||||
>${EditIcon({ width: '16px', height: '16px' })}</span
|
||||
>
|
||||
<span class="text">Edit</span>
|
||||
</div>
|
||||
`}
|
||||
${
|
||||
this.readonly
|
||||
? nothing
|
||||
: html`
|
||||
<div class="button edit" @click=${this._toggleEdit}>
|
||||
<span class="icon"
|
||||
>${EditIcon({ width: '16px', height: '16px' })}</span
|
||||
>
|
||||
<span class="text">Edit</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
<div class="button retry" @click=${this._handleRetry}>
|
||||
<span class="icon"
|
||||
>${ResetIcon({ width: '16px', height: '16px' })}</span
|
||||
|
||||
@@ -244,13 +244,15 @@ export class EmbedIframeLinkInputPopup extends EmbedIframeLinkInputBase {
|
||||
|
||||
return html`
|
||||
<div class=${modalMainWrapperClass}>
|
||||
${showCloseButton
|
||||
? html`
|
||||
<div class="popup-close-button" @click=${this._onClose}>
|
||||
${CloseIcon({ width: '20', height: '20' })}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
${
|
||||
showCloseButton
|
||||
? html`
|
||||
<div class="popup-close-button" @click=${this._onClose}>
|
||||
${CloseIcon({ width: '20', height: '20' })}
|
||||
</div>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
<div class="link-input-popup-content-wrapper">
|
||||
<div class="title">${title}</div>
|
||||
<div class="description">${description}</div>
|
||||
|
||||
@@ -392,9 +392,11 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
|
||||
scrolling=${ifDefined(scrolling)}
|
||||
style=${ifDefined(style)}
|
||||
></iframe>
|
||||
${sourceHost
|
||||
? html`<div class="affine-embed-iframe-source">${sourceHost}</div>`
|
||||
: nothing}`;
|
||||
${
|
||||
sourceHost
|
||||
? html`<div class="affine-embed-iframe-source">${sourceHost}</div>`
|
||||
: nothing
|
||||
}`;
|
||||
};
|
||||
|
||||
private readonly _isIframeUrlAllowed = (iframeUrl: string) => {
|
||||
|
||||
@@ -118,28 +118,30 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
|
||||
@dblclick=${this._handleDoubleClick}
|
||||
>
|
||||
<div class="affine-embed-loom-video">
|
||||
${videoId
|
||||
? html`
|
||||
<div class="affine-embed-loom-video-iframe-container">
|
||||
<iframe
|
||||
src=${`https://www.loom.com/embed/${videoId}?hide_title=true`}
|
||||
frameborder="0"
|
||||
allow="fullscreen; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
|
||||
sandbox="allow-scripts allow-same-origin allow-presentation"
|
||||
loading="lazy"
|
||||
credentialless
|
||||
></iframe>
|
||||
${
|
||||
videoId
|
||||
? html`
|
||||
<div class="affine-embed-loom-video-iframe-container">
|
||||
<iframe
|
||||
src=${`https://www.loom.com/embed/${videoId}?hide_title=true`}
|
||||
frameborder="0"
|
||||
allow="fullscreen; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
|
||||
sandbox="allow-scripts allow-same-origin allow-presentation"
|
||||
loading="lazy"
|
||||
credentialless
|
||||
></iframe>
|
||||
|
||||
<!-- overlay to prevent the iframe from capturing pointer events -->
|
||||
<div
|
||||
class=${classMap({
|
||||
'affine-embed-loom-video-iframe-overlay': true,
|
||||
hide: !this.showOverlay$.value,
|
||||
})}
|
||||
></div>
|
||||
</div>
|
||||
`
|
||||
: bannerImage}
|
||||
<!-- overlay to prevent the iframe from capturing pointer events -->
|
||||
<div
|
||||
class=${classMap({
|
||||
'affine-embed-loom-video-iframe-overlay': true,
|
||||
hide: !this.showOverlay$.value,
|
||||
})}
|
||||
></div>
|
||||
</div>
|
||||
`
|
||||
: bannerImage
|
||||
}
|
||||
</div>
|
||||
<div class="affine-embed-loom-content">
|
||||
<div class="affine-embed-loom-content-header">
|
||||
|
||||
@@ -134,40 +134,42 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
|
||||
@dblclick=${this._handleDoubleClick}
|
||||
>
|
||||
<div class="affine-embed-youtube-video">
|
||||
${videoId
|
||||
? html`
|
||||
<div class="affine-embed-youtube-video-iframe-container">
|
||||
<iframe
|
||||
id="ytplayer"
|
||||
type="text/html"
|
||||
src=${`https://www.youtube.com/embed/${videoId}`}
|
||||
frameborder="0"
|
||||
allow="fullscreen; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
|
||||
sandbox="allow-scripts allow-same-origin allow-presentation"
|
||||
loading="lazy"
|
||||
credentialless
|
||||
></iframe>
|
||||
${
|
||||
videoId
|
||||
? html`
|
||||
<div class="affine-embed-youtube-video-iframe-container">
|
||||
<iframe
|
||||
id="ytplayer"
|
||||
type="text/html"
|
||||
src=${`https://www.youtube.com/embed/${videoId}`}
|
||||
frameborder="0"
|
||||
allow="fullscreen; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
|
||||
sandbox="allow-scripts allow-same-origin allow-presentation"
|
||||
loading="lazy"
|
||||
credentialless
|
||||
></iframe>
|
||||
|
||||
<!-- overlay to prevent the iframe from capturing pointer events -->
|
||||
<div
|
||||
class=${classMap({
|
||||
'affine-embed-youtube-video-iframe-overlay': true,
|
||||
hide: !this.showOverlay$.value,
|
||||
})}
|
||||
></div>
|
||||
<img
|
||||
class=${classMap({
|
||||
'affine-embed-youtube-video-iframe-overlay': true,
|
||||
'media-print': true,
|
||||
hide: !this._showImage,
|
||||
})}
|
||||
src=${`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
|
||||
alt="YouTube Video"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
`
|
||||
: bannerImage}
|
||||
<!-- overlay to prevent the iframe from capturing pointer events -->
|
||||
<div
|
||||
class=${classMap({
|
||||
'affine-embed-youtube-video-iframe-overlay': true,
|
||||
hide: !this.showOverlay$.value,
|
||||
})}
|
||||
></div>
|
||||
<img
|
||||
class=${classMap({
|
||||
'affine-embed-youtube-video-iframe-overlay': true,
|
||||
'media-print': true,
|
||||
hide: !this._showImage,
|
||||
})}
|
||||
src=${`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
|
||||
alt="YouTube Video"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
`
|
||||
: bannerImage
|
||||
}
|
||||
</div>
|
||||
<div class="affine-embed-youtube-content">
|
||||
<div class="affine-embed-youtube-content-header">
|
||||
@@ -188,15 +190,17 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${loading
|
||||
? html`<div
|
||||
class="affine-embed-youtube-content-description"
|
||||
></div>`
|
||||
: descriptionText
|
||||
? html`<div class="affine-embed-youtube-content-description">
|
||||
${descriptionText}
|
||||
</div>`
|
||||
: nothing}
|
||||
${
|
||||
loading
|
||||
? html`<div
|
||||
class="affine-embed-youtube-content-description"
|
||||
></div>`
|
||||
: descriptionText
|
||||
? html`<div class="affine-embed-youtube-content-description">
|
||||
${descriptionText}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
|
||||
<div class="affine-embed-youtube-content-url" @click=${this.open}>
|
||||
<span>www.youtube.com</span>
|
||||
|
||||
@@ -25,12 +25,14 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
|
||||
return html`
|
||||
<edgeless-tool-icon-button
|
||||
class="edgeless-frame-button"
|
||||
.tooltip=${this.popper
|
||||
? ''
|
||||
: html`<affine-tooltip-content-with-shortcut
|
||||
data-tip="${'Frame'}"
|
||||
data-shortcut="${'F'}"
|
||||
></affine-tooltip-content-with-shortcut>`}
|
||||
.tooltip=${
|
||||
this.popper
|
||||
? ''
|
||||
: html`<affine-tooltip-content-with-shortcut
|
||||
data-tip="${'Frame'}"
|
||||
data-shortcut="${'F'}"
|
||||
></affine-tooltip-content-with-shortcut>`
|
||||
}
|
||||
.tooltipOffset=${17}
|
||||
.iconSize=${'24px'}
|
||||
.active=${type === 'frame'}
|
||||
|
||||
@@ -407,15 +407,17 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
|
||||
</edgeless-tool-icon-button>
|
||||
|
||||
<div class="edgeless-frame-navigator ${this.dense ? 'dense' : ''}">
|
||||
${this.dense
|
||||
? nothing
|
||||
: html`<span
|
||||
style="color: ${cssVar('textPrimaryColor')}"
|
||||
class="edgeless-frame-navigator-title"
|
||||
@click=${() => this._moveToCurrentFrame()}
|
||||
>
|
||||
${frame?.props.title ?? 'no frame'}
|
||||
</span>`}
|
||||
${
|
||||
this.dense
|
||||
? nothing
|
||||
: html`<span
|
||||
style="color: ${cssVar('textPrimaryColor')}"
|
||||
class="edgeless-frame-navigator-title"
|
||||
@click=${() => this._moveToCurrentFrame()}
|
||||
>
|
||||
${frame?.props.title ?? 'no frame'}
|
||||
</span>`
|
||||
}
|
||||
|
||||
<span class="edgeless-frame-navigator-count">
|
||||
${frames.length === 0 ? 0 : current + 1} / ${frames.length}
|
||||
@@ -435,9 +437,11 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
|
||||
|
||||
<div class="config-buttons">
|
||||
<edgeless-tool-icon-button
|
||||
.tooltip=${document.fullscreenElement
|
||||
? 'Exit Full Screen'
|
||||
: 'Enter Full Screen'}
|
||||
.tooltip=${
|
||||
document.fullscreenElement
|
||||
? 'Exit Full Screen'
|
||||
: 'Enter Full Screen'
|
||||
}
|
||||
@click=${() => this._toggleFullScreen()}
|
||||
.iconContainerPadding=${0}
|
||||
.iconContainerWidth=${'24px'}
|
||||
@@ -446,14 +450,16 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
|
||||
${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()}
|
||||
</edgeless-tool-icon-button>
|
||||
|
||||
${this.dense
|
||||
? nothing
|
||||
: html`<edgeless-frame-order-button
|
||||
.popperShow=${this.frameMenuShow}
|
||||
.setPopperShow=${this.setFrameMenuShow}
|
||||
.edgeless=${this.edgeless}
|
||||
>
|
||||
</edgeless-frame-order-button>`}
|
||||
${
|
||||
this.dense
|
||||
? nothing
|
||||
: html`<edgeless-frame-order-button
|
||||
.popperShow=${this.frameMenuShow}
|
||||
.setPopperShow=${this.setFrameMenuShow}
|
||||
.edgeless=${this.edgeless}
|
||||
>
|
||||
</edgeless-frame-order-button>`
|
||||
}
|
||||
|
||||
<edgeless-navigator-setting-button
|
||||
.edgeless=${this.edgeless}
|
||||
|
||||
@@ -218,9 +218,9 @@ export class EdgelessFrameOrderMenu extends SignalWatcher(
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="edgeless-frame-order-items-container ${this.embed
|
||||
? 'embed'
|
||||
: ''}"
|
||||
class="edgeless-frame-order-items-container ${
|
||||
this.embed ? 'embed' : ''
|
||||
}"
|
||||
@click=${(e: MouseEvent) => e.stopPropagation()}
|
||||
>
|
||||
${repeat(
|
||||
@@ -235,11 +235,13 @@ export class EdgelessFrameOrderMenu extends SignalWatcher(
|
||||
)}
|
||||
<div class="indicator-line"></div>
|
||||
<div class="clone item">
|
||||
${frame
|
||||
? html`<div class="drag-indicator"></div>
|
||||
<div class="index">${this._curIndex + 1}</div>
|
||||
<div class="title">${frame.props.title.toString()}</div>`
|
||||
: nothing}
|
||||
${
|
||||
frame
|
||||
? html`<div class="drag-indicator"></div>
|
||||
<div class="index">${this._curIndex + 1}</div>
|
||||
<div class="title">${frame.props.title.toString()}</div>`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -150,17 +150,19 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
|
||||
</toggle-switch>
|
||||
</div>
|
||||
|
||||
${this.includeFrameOrder
|
||||
? html` <div class="divider"></div>
|
||||
<div class="item-container header">
|
||||
<div class="text title">Frame Order</div>
|
||||
</div>
|
||||
${
|
||||
this.includeFrameOrder
|
||||
? html` <div class="divider"></div>
|
||||
<div class="item-container header">
|
||||
<div class="text title">Frame Order</div>
|
||||
</div>
|
||||
|
||||
<edgeless-frame-order-menu
|
||||
.edgeless=${this.edgeless}
|
||||
.embed=${true}
|
||||
></edgeless-frame-order-menu>`
|
||||
: nothing}
|
||||
<edgeless-frame-order-menu
|
||||
.edgeless=${this.edgeless}
|
||||
.embed=${true}
|
||||
></edgeless-frame-order-menu>`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -174,23 +174,25 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
|
||||
[TOGGLE_BUTTON_PARENT_CLASS]: true,
|
||||
})}
|
||||
>
|
||||
${this.model.children.length > 0
|
||||
? html`
|
||||
<blocksuite-toggle-button
|
||||
.collapsed=${collapsed}
|
||||
.updateCollapsed=${(value: boolean) => {
|
||||
if (this.store.readonly) {
|
||||
this._readonlyCollapsed = value;
|
||||
} else {
|
||||
this.store.captureSync();
|
||||
this.store.updateBlock(this.model, {
|
||||
collapsed: value,
|
||||
});
|
||||
}
|
||||
}}
|
||||
></blocksuite-toggle-button>
|
||||
`
|
||||
: nothing}
|
||||
${
|
||||
this.model.children.length > 0
|
||||
? html`
|
||||
<blocksuite-toggle-button
|
||||
.collapsed=${collapsed}
|
||||
.updateCollapsed=${(value: boolean) => {
|
||||
if (this.store.readonly) {
|
||||
this._readonlyCollapsed = value;
|
||||
} else {
|
||||
this.store.captureSync();
|
||||
this.store.updateBlock(this.model, {
|
||||
collapsed: value,
|
||||
});
|
||||
}
|
||||
}}
|
||||
></blocksuite-toggle-button>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${listIcon}
|
||||
<rich-text
|
||||
.yText=${this.model.props.text.yText}
|
||||
|
||||
@@ -58,9 +58,11 @@ export function getListIcon(
|
||||
class=${`affine-list-block__prefix affine-list-block__todo-prefix ${model.store.readonly ? 'readonly' : ''}`}
|
||||
@click=${onClick}
|
||||
>
|
||||
${model.props.checked
|
||||
? CheckBoxCheckSolidIcon({ style: 'color: #1E96EB' })
|
||||
: CheckBoxUnIcon()}
|
||||
${
|
||||
model.props.checked
|
||||
? CheckBoxCheckSolidIcon({ style: 'color: #1E96EB' })
|
||||
: CheckBoxUnIcon()
|
||||
}
|
||||
</div>`;
|
||||
case 'toggle':
|
||||
return html`<div
|
||||
|
||||
@@ -322,25 +322,27 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
|
||||
.editing=${this._editing}
|
||||
></edgeless-note-mask>
|
||||
|
||||
${isCollapsable &&
|
||||
tool.currentToolName$.value !== 'frameNavigator' &&
|
||||
(!this.model.isPageBlock() || !hasHeader)
|
||||
? html`<div
|
||||
class="${classMap({
|
||||
[styles.collapseButton]: true,
|
||||
flip: isCollapseArrowUp,
|
||||
})}"
|
||||
style=${styleMap({
|
||||
bottom: this._editing ? `${-extra}px` : '0',
|
||||
})}
|
||||
data-testid="edgeless-note-collapse-button"
|
||||
@mousedown=${stopPropagation}
|
||||
@mouseup=${stopPropagation}
|
||||
@click=${this._setCollapse}
|
||||
>
|
||||
${MoreIndicator}
|
||||
</div>`
|
||||
: nothing}
|
||||
${
|
||||
isCollapsable &&
|
||||
tool.currentToolName$.value !== 'frameNavigator' &&
|
||||
(!this.model.isPageBlock() || !hasHeader)
|
||||
? html`<div
|
||||
class="${classMap({
|
||||
[styles.collapseButton]: true,
|
||||
flip: isCollapseArrowUp,
|
||||
})}"
|
||||
style=${styleMap({
|
||||
bottom: this._editing ? `${-extra}px` : '0',
|
||||
})}
|
||||
data-testid="edgeless-note-collapse-button"
|
||||
@mousedown=${stopPropagation}
|
||||
@mouseup=${stopPropagation}
|
||||
@click=${this._setCollapse}
|
||||
>
|
||||
${MoreIndicator}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
${this._collapsedContent()}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -304,38 +304,42 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
|
||||
[TOGGLE_BUTTON_PARENT_CLASS]: true,
|
||||
})}
|
||||
>
|
||||
${this.model.props.type$.value.startsWith('h')
|
||||
? html`
|
||||
<affine-paragraph-heading-icon
|
||||
.model=${this.model}
|
||||
></affine-paragraph-heading-icon>
|
||||
`
|
||||
: nothing}
|
||||
${this.model.props.type$.value.startsWith('h') &&
|
||||
collapsedSiblings.length > 0
|
||||
? html`
|
||||
<blocksuite-toggle-button
|
||||
.collapsed=${collapsed}
|
||||
.updateCollapsed=${(value: boolean) => {
|
||||
if (this.store.readonly) {
|
||||
this._readonlyCollapsed = value;
|
||||
} else {
|
||||
this.store.captureSync();
|
||||
this.store.updateBlock(this.model, {
|
||||
collapsed: value,
|
||||
});
|
||||
}
|
||||
${
|
||||
this.model.props.type$.value.startsWith('h')
|
||||
? html`
|
||||
<affine-paragraph-heading-icon
|
||||
.model=${this.model}
|
||||
></affine-paragraph-heading-icon>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
this.model.props.type$.value.startsWith('h') &&
|
||||
collapsedSiblings.length > 0
|
||||
? html`
|
||||
<blocksuite-toggle-button
|
||||
.collapsed=${collapsed}
|
||||
.updateCollapsed=${(value: boolean) => {
|
||||
if (this.store.readonly) {
|
||||
this._readonlyCollapsed = value;
|
||||
} else {
|
||||
this.store.captureSync();
|
||||
this.store.updateBlock(this.model, {
|
||||
collapsed: value,
|
||||
});
|
||||
}
|
||||
|
||||
if (this.hasCitationSiblings) {
|
||||
this.citationService.trackEvent('Expand', {
|
||||
control: 'Source Button',
|
||||
type: value ? 'Hide' : 'Show',
|
||||
});
|
||||
}
|
||||
}}
|
||||
></blocksuite-toggle-button>
|
||||
`
|
||||
: nothing}
|
||||
if (this.hasCitationSiblings) {
|
||||
this.citationService.trackEvent('Expand', {
|
||||
control: 'Source Button',
|
||||
type: value ? 'Hide' : 'Show',
|
||||
});
|
||||
}
|
||||
}}
|
||||
></blocksuite-toggle-button>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
<rich-text
|
||||
.yText=${this.model.props.text.yText}
|
||||
.inlineEventSource=${this.topContenteditableElement ?? nothing}
|
||||
@@ -351,19 +355,21 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
|
||||
.verticalScrollContainerGetter=${() =>
|
||||
getViewportElement(this.host)}
|
||||
></rich-text>
|
||||
${this.inEdgelessText
|
||||
? nothing
|
||||
: html`
|
||||
<div
|
||||
contenteditable="false"
|
||||
class=${classMap({
|
||||
'affine-paragraph-placeholder': true,
|
||||
visible: this._displayPlaceholder.value,
|
||||
})}
|
||||
>
|
||||
${this._placeholder}
|
||||
</div>
|
||||
`}
|
||||
${
|
||||
this.inEdgelessText
|
||||
? nothing
|
||||
: html`
|
||||
<div
|
||||
contenteditable="false"
|
||||
class=${classMap({
|
||||
'affine-paragraph-placeholder': true,
|
||||
visible: this._displayPlaceholder.value,
|
||||
})}
|
||||
>
|
||||
${this._placeholder}
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
|
||||
${children} ${widgets}
|
||||
|
||||
@@ -544,7 +544,7 @@ export class EdgelessClipboardController extends PageClipboard {
|
||||
}
|
||||
});
|
||||
|
||||
// oxlint-disable-next-line @typescript-eslint/prefer-for-of
|
||||
// oxlint-disable-next-line typescript/prefer-for-of
|
||||
for (let i = 0; i < blocksInsideFrame.length; i++) {
|
||||
const element = blocksInsideFrame[i];
|
||||
await _drawTopLevelBlock(element, true);
|
||||
@@ -645,7 +645,7 @@ export class EdgelessClipboardController extends PageClipboard {
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// oxlint-disable-next-line @typescript-eslint/prefer-for-of
|
||||
// oxlint-disable-next-line typescript/prefer-for-of
|
||||
for (let index = 0; index < content.length; index++) {
|
||||
const blockSnapshot = content[index];
|
||||
if (blockSnapshot.flavour === 'affine:note') {
|
||||
|
||||
@@ -99,24 +99,30 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
|
||||
'not-found': modelNotFound,
|
||||
})}
|
||||
>
|
||||
${modelNotFound
|
||||
? html`<div class="surface-ref-not-found-background">
|
||||
${notFoundBackground}
|
||||
</div>`
|
||||
: nothing}
|
||||
${
|
||||
modelNotFound
|
||||
? html`<div class="surface-ref-not-found-background">
|
||||
${notFoundBackground}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
<div class="surface-ref-placeholder-heading">
|
||||
${modelNotFound ? DeleteIcon() : matchedType.icon}
|
||||
<span class="surface-ref-title">
|
||||
${modelNotFound
|
||||
? `This ${matchedType.name} not available`
|
||||
: `${title}`}
|
||||
${
|
||||
modelNotFound
|
||||
? `This ${matchedType.name} not available`
|
||||
: `${title}`
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<div class="surface-ref-placeholder-body">
|
||||
<span class="surface-ref-text">
|
||||
${modelNotFound
|
||||
? `The ${matchedType.name.toLowerCase()} is deleted or not in this doc.`
|
||||
: `The ${matchedType.name.toLowerCase()} is inserted but cannot display in edgeless mode. Switch to page mode to view the block.`}
|
||||
${
|
||||
modelNotFound
|
||||
? `The ${matchedType.name.toLowerCase()} is deleted or not in this doc.`
|
||||
: `The ${matchedType.name.toLowerCase()} is inserted but cannot display in edgeless mode. Switch to page mode to view the block.`
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// oxlint-disable-next-line @typescript-eslint/triple-slash-reference
|
||||
// oxlint-disable-next-line typescript/triple-slash-reference
|
||||
/// <reference path="./effects.ts" />
|
||||
export * from './consts.js';
|
||||
export { GRID_GAP_MAX, GRID_GAP_MIN } from './consts.js';
|
||||
|
||||
@@ -281,7 +281,7 @@ export class DefaultTool extends BaseTool {
|
||||
}
|
||||
}
|
||||
|
||||
// oxlint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
// oxlint-disable-next-line typescript/no-misused-promises
|
||||
override async dragStart(e: PointerEventState) {
|
||||
const { preventDefaultState, handledByView } =
|
||||
this.interactivity?.dispatchEvent('dragstart', e) ?? {};
|
||||
|
||||
@@ -153,7 +153,7 @@ export class AStarRunner {
|
||||
}
|
||||
const neighbors = this._neighbors(current);
|
||||
|
||||
// oxlint-disable-next-line @typescript-eslint/prefer-for-of
|
||||
// oxlint-disable-next-line typescript/prefer-for-of
|
||||
for (let i = 0; i < neighbors.length; i++) {
|
||||
const next = neighbors[i];
|
||||
const curCosts = this._costSoFar.get(current);
|
||||
|
||||
@@ -268,12 +268,14 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
|
||||
}
|
||||
)}
|
||||
</tbody>
|
||||
${IS_MOBILE || this.dataManager.readonly$.value
|
||||
? nothing
|
||||
: html`<affine-table-add-button
|
||||
style="display: contents;"
|
||||
.dataManager=${this.dataManager}
|
||||
></affine-table-add-button>`}
|
||||
${
|
||||
IS_MOBILE || this.dataManager.readonly$.value
|
||||
? nothing
|
||||
: html`<affine-table-add-button
|
||||
style="display: contents;"
|
||||
.dataManager=${this.dataManager}
|
||||
></affine-table-add-button>`
|
||||
}
|
||||
${html`<affine-table-selection-layer
|
||||
style="display: contents;"
|
||||
.selectionController=${this.selectionController}
|
||||
|
||||
@@ -138,9 +138,9 @@ export class TableCell extends SignalWatcher(
|
||||
].map(item =>
|
||||
menu.action({
|
||||
prefix: html`<div
|
||||
style="color: ${item.color ??
|
||||
cssVarV2.layer.background
|
||||
.primary};display: flex;align-items: center;justify-content: center;"
|
||||
style="color: ${
|
||||
item.color ?? cssVarV2.layer.background.primary
|
||||
};display: flex;align-items: center;justify-content: center;"
|
||||
>
|
||||
${TextBackgroundDuotoneIcon}
|
||||
</div>`,
|
||||
@@ -264,9 +264,9 @@ export class TableCell extends SignalWatcher(
|
||||
].map(item =>
|
||||
menu.action({
|
||||
prefix: html`<div
|
||||
style="color: ${item.color ??
|
||||
cssVarV2.layer.background
|
||||
.primary};display: flex;align-items: center;justify-content: center;"
|
||||
style="color: ${
|
||||
item.color ?? cssVarV2.layer.background.primary
|
||||
};display: flex;align-items: center;justify-content: center;"
|
||||
>
|
||||
${TextBackgroundDuotoneIcon}
|
||||
</div>`,
|
||||
@@ -376,9 +376,9 @@ export class TableCell extends SignalWatcher(
|
||||
items: [{ name: 'Default', color: undefined }, ...colorList].map(item =>
|
||||
menu.action({
|
||||
prefix: html`<div
|
||||
style="color: ${item.color ??
|
||||
cssVarV2.layer.background
|
||||
.primary};display: flex;align-items: center;justify-content: center;"
|
||||
style="color: ${
|
||||
item.color ?? cssVarV2.layer.background.primary
|
||||
};display: flex;align-items: center;justify-content: center;"
|
||||
>
|
||||
${TextBackgroundDuotoneIcon}
|
||||
</div>`,
|
||||
@@ -418,7 +418,7 @@ export class TableCell extends SignalWatcher(
|
||||
name: 'Paste',
|
||||
prefix: PasteIcon(),
|
||||
select: () => {
|
||||
// oxlint-disable-next-line @typescript-eslint/no-floating-promises
|
||||
// oxlint-disable-next-line typescript/no-floating-promises
|
||||
navigator.clipboard.readText().then(text => {
|
||||
this.selectionController.doPaste(text, selected);
|
||||
});
|
||||
@@ -501,12 +501,16 @@ export class TableCell extends SignalWatcher(
|
||||
return nothing;
|
||||
}
|
||||
return html`
|
||||
${this.rowIndex === 0
|
||||
? this.renderColumnOptions(this.column, this.columnIndex)
|
||||
: nothing}
|
||||
${this.columnIndex === 0
|
||||
? this.renderRowOptions(this.row, this.rowIndex)
|
||||
: nothing}
|
||||
${
|
||||
this.rowIndex === 0
|
||||
? this.renderColumnOptions(this.column, this.columnIndex)
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
this.columnIndex === 0
|
||||
? this.renderRowOptions(this.row, this.rowIndex)
|
||||
: nothing
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user