Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): extract common components (#9277)

Browse Source
This commit is contained in:
Saul-Mirone
2024-12-24 04:42:53 +00:00
parent 475e3d80b2
commit ea0a345533
10 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
blocksuite/blocks/src/_common/components/block-selection.ts
View File

@@ -1,74 +0,0 @@
import type { BlockComponent } from '@blocksuite/block-std';
import { SignalWatcher } from '@blocksuite/global/utils';
import { css, LitElement, type PropertyValues } from 'lit';
import { property } from 'lit/decorators.js';
/**
* Renders a the block selection.
*
* @example
* ```ts
* class Block extends LitElement {
* state override styles = css`
* :host {
* position: relative;
* }
*
* render() {
* return html`<affine-block-selection></affine-block-selection>
* };
* }
* ```
*/
export class BlockSelection extends SignalWatcher(LitElement) {
static override styles = css`
:host {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-color: var(--affine-hover-color);
border-color: transparent;
border-style: solid;
}
`;
override connectedCallback(): void {
super.connectedCallback();
this.style.borderRadius = `${this.borderRadius}px`;
if (this.borderWidth !== 0) {
this.style.boxSizing = 'content-box';
this.style.transform = `translate(-${this.borderWidth}px, -${this.borderWidth}px)`;
}
this.style.borderWidth = `${this.borderWidth}px`;
}
override disconnectedCallback() {
super.disconnectedCallback();
this.block = null as unknown as BlockComponent; // force gc
}
protected override updated(_changedProperties: PropertyValues): void {
super.updated(_changedProperties);
this.style.display = this.block.selected?.is('block') ? 'block' : 'none';
}
@property({ attribute: false })
accessor block!: BlockComponent;
@property({ attribute: false })
accessor borderRadius: number = 5;
@property({ attribute: false })
accessor borderWidth: number = 0;
}
declare global {
interface HTMLElementTagNameMap {
'affine-block-selection': BlockSelection;
}
}

53
blocksuite/blocks/src/_common/components/block-zero-width.ts
View File

@@ -1,53 +0,0 @@
import { focusTextModel } from '@blocksuite/affine-components/rich-text';
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import type { BlockComponent } from '@blocksuite/block-std';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
export class BlockZeroWidth extends LitElement {
static override styles = css`
.block-zero-width {
position: absolute;
bottom: -15px;
height: 10px;
width: 100%;
cursor: text;
z-index: 1;
}
`;
_handleClick = (e: MouseEvent) => {
stopPropagation(e);
if (this.block.doc.readonly) return;
const nextBlock = this.block.doc.getNext(this.block.model);
if (nextBlock?.flavour !== 'affine:paragraph') {
const [paragraphId] = this.block.doc.addSiblingBlocks(this.block.model, [
{ flavour: 'affine:paragraph' },
]);
focusTextModel(this.block.host.std, paragraphId);
}
};
override connectedCallback(): void {
super.connectedCallback();
this.addEventListener('click', this._handleClick);
}
override disconnectedCallback(): void {
this.removeEventListener('click', this._handleClick);
super.disconnectedCallback();
}
override render() {
return html`<div class="block-zero-width"></div>`;
}
@property({ attribute: false })
accessor block!: BlockComponent;
}
declare global {
interface HTMLElementTagNameMap {
'block-zero-width': BlockZeroWidth;
}
}

2
blocksuite/blocks/src/_common/components/embed-card/embed-card-more-menu-popper.ts
View File

@@ -8,6 +8,7 @@ import {
} from '@blocksuite/affine-components/icons';
import { isPeekable, peek } from '@blocksuite/affine-components/peek';
import { toast } from '@blocksuite/affine-components/toast';
import { getBlockProps } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/utils';
import { Slice } from '@blocksuite/store';
import { css, html, LitElement, nothing } from 'lit';
@@ -17,7 +18,6 @@ import {
isEmbedLinkedDocBlock,
isEmbedSyncedDocBlock,
} from '../../../root-block/edgeless/utils/query.js';
import { getBlockProps } from '../../utils/index.js';
import type { EmbedBlockComponent } from './type.js';
export class EmbedCardMoreMenu extends WithDisposable(LitElement) {

3
blocksuite/blocks/src/_common/components/index.ts
View File

@@ -1,5 +1,2 @@
export * from './ai-item/index.js';
export * from './block-selection.js';
export * from './block-zero-width.js';
export * from './menu-divider.js';
export { scrollbarStyle } from './utils.js';

50
blocksuite/blocks/src/_common/components/menu-divider.ts
View File

@@ -1,50 +0,0 @@
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
// FIXME: horizontal
export class MenuDivider extends LitElement {
static override styles = css`
:host {
display: inline-block;
}
.divider {
background-color: var(--affine-border-color);
}
.divider.vertical {
width: 1px;
height: 100%;
margin: 0 var(--divider-margin);
}
.divider.horizontal {
width: 100%;
height: 1px;
margin: var(--divider-margin) 0;
}
`;
override render() {
const dividerStyles = styleMap({
'--divider-margin': `${this.dividerMargin}px`,
});
return html`<div
class="divider ${this.vertical ? 'vertical' : 'horizontal'}"
style=${dividerStyles}
></div>`;
}
@property({ attribute: false })
accessor dividerMargin = 7;
@property({ attribute: false })
accessor vertical = false;
}
declare global {
interface HTMLElementTagNameMap {
'menu-divider': MenuDivider;
}
}

10
blocksuite/blocks/src/effects.ts
View File

@@ -2,6 +2,8 @@ import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/eff
import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
import { effects as blockSurfaceEffects } from '@blocksuite/affine-block-surface/effects';
import { BlockSelection } from '@blocksuite/affine-components/block-selection';
import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
@@ -26,12 +28,7 @@ import { EmbedCardEditCaptionEditModal } from './_common/components/embed-card/m
import { EmbedCardCreateModal } from './_common/components/embed-card/modal/embed-card-create-modal.js';
import { EmbedCardEditModal } from './_common/components/embed-card/modal/embed-card-edit-modal.js';
import { FilterableListComponent } from './_common/components/filterable-list/index.js';
import {
AIItemList,
BlockSelection,
BlockZeroWidth,
MenuDivider,
} from './_common/components/index.js';
import { AIItemList } from './_common/components/index.js';
import { Loader } from './_common/components/loader.js';
import { SmoothCorner } from './_common/components/smooth-corner.js';
import { ToggleSwitch } from './_common/components/toggle-switch.js';
@@ -544,7 +541,6 @@ export function effects() {
customElements.define('affine-drop-indicator', DropIndicator);
customElements.define('mini-mindmap-root-block', MindmapRootBlock);
customElements.define('affine-block-selection', BlockSelection);
customElements.define('menu-divider', MenuDivider);
customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
customElements.define(
'edgeless-toolbar-shape-draggable',