@formicoidea/labre-core 0.23.0

package/src/_pkgs/affine-block-note/commands/dedent-blocks.ts

@@ -0,0 +1,87 @@
+import { ParagraphBlockModel } from '../../affine-model/index.js';
+import {
+  calculateCollapsedSiblings,
+  matchModels,
+} from '../../affine-shared/utils/index.js';
+import { type Command, TextSelection } from '../../std/index.js';
+
+import { dedentBlock } from './dedent-block';
+
+export const dedentBlocks: Command<{
+  blockIds?: string[];
+  stopCapture?: boolean;
+}> = (ctx, next) => {
+  let { blockIds } = ctx;
+  const { std, stopCapture = true } = ctx;
+  const { store, selection, range, host } = std;
+  const { schema } = store;
+
+  if (!blockIds || !blockIds.length) {
+    const nativeRange = range.value;
+    if (nativeRange) {
+      const topBlocks = range.getSelectedBlockComponentsByRange(nativeRange, {
+        match: el => el.model.role === 'content',
+        mode: 'highest',
+      });
+      if (topBlocks.length > 0) {
+        blockIds = topBlocks.map(block => block.blockId);
+      }
+    } else {
+      blockIds = std.selection.getGroup('note').map(sel => sel.blockId);
+    }
+  }
+
+  if (!blockIds || !blockIds.length || store.readonly) return;
+
+  // Find the first model that can be unindented
+  let firstDedentIndex = -1;
+  for (let i = 0; i < blockIds.length; i++) {
+    const model = store.getBlock(blockIds[i])?.model;
+    if (!model) continue;
+    const parent = store.getParent(blockIds[i]);
+    if (!parent) continue;
+    const grandParent = store.getParent(parent);
+    if (!grandParent) continue;
+
+    if (schema.isValid(model.flavour, grandParent.flavour)) {
+      firstDedentIndex = i;
+      break;
+    }
+  }
+
+  if (firstDedentIndex === -1) return;
+
+  if (stopCapture) store.captureSync();
+
+  const collapsedIds: string[] = [];
+  blockIds.slice(firstDedentIndex).forEach(id => {
+    const model = store.getBlock(id)?.model;
+    if (!model) return;
+    if (
+      matchModels(model, [ParagraphBlockModel]) &&
+      model.props.type.startsWith('h') &&
+      model.props.collapsed
+    ) {
+      const collapsedSiblings = calculateCollapsedSiblings(model);
+      collapsedIds.push(...collapsedSiblings.map(sibling => sibling.id));
+    }
+  });
+  // Models waiting to be dedented
+  const dedentIds = blockIds
+    .slice(firstDedentIndex)
+    .filter(id => !collapsedIds.includes(id));
+  dedentIds.reverse().forEach(id => {
+    std.command.exec(dedentBlock, { blockId: id, stopCapture: false });
+  });
+
+  const textSelection = selection.find(TextSelection);
+  if (textSelection) {
+    host.updateComplete
+      .then(() => {
+        range.syncTextSelectionToRange(textSelection);
+      })
+      .catch(console.error);
+  }
+
+  return next();
+};

package/src/_pkgs/affine-block-note/commands/indent-block.ts

@@ -0,0 +1,74 @@
+import { ListBlockModel, ParagraphBlockModel } from '../../affine-model/index.js';
+import {
+  calculateCollapsedSiblings,
+  matchModels,
+} from '../../affine-shared/utils/index.js';
+import type { Command } from '../../std/index.js';
+
+/**
+ * @example
+ * before indent:
+ * - aaa
+ *   - bbb
+ * - ccc|
+ *   - ddd
+ *   - eee
+ *
+ * after indent:
+ * - aaa
+ *   - bbb
+ *   - ccc|
+ *     - ddd
+ *     - eee
+ */
+export const indentBlock: Command<{
+  blockId?: string;
+  stopCapture?: boolean;
+}> = (ctx, next) => {
+  let { blockId } = ctx;
+  const { std, stopCapture = true } = ctx;
+  const { store } = std;
+  const { schema } = store;
+  if (!blockId) {
+    const sel = std.selection.getGroup('note').at(0);
+    blockId = sel?.blockId;
+  }
+  if (!blockId) return;
+  const model = std.store.getBlock(blockId)?.model;
+  if (!model) return;
+
+  const previousSibling = store.getPrev(model);
+  if (
+    store.readonly ||
+    !previousSibling ||
+    !schema.isValid(model.flavour, previousSibling.flavour)
+  ) {
+    // can not indent, do nothing
+    return;
+  }
+
+  if (stopCapture) store.captureSync();
+
+  if (
+    matchModels(model, [ParagraphBlockModel]) &&
+    model.props.type.startsWith('h') &&
+    model.props.collapsed
+  ) {
+    const collapsedSiblings = calculateCollapsedSiblings(model);
+    store.moveBlocks([model, ...collapsedSiblings], previousSibling);
+  } else {
+    store.moveBlocks([model], previousSibling);
+  }
+
+  // update collapsed state of affine list
+  if (
+    matchModels(previousSibling, [ListBlockModel]) &&
+    previousSibling.props.collapsed
+  ) {
+    store.updateBlock(previousSibling, {
+      collapsed: false,
+    });
+  }
+
+  return next();
+};

package/src/_pkgs/affine-block-note/commands/indent-blocks.ts

@@ -0,0 +1,125 @@
+import { ParagraphBlockModel } from '../../affine-model/index.js';
+import {
+  calculateCollapsedSiblings,
+  getNearestHeadingBefore,
+  matchModels,
+} from '../../affine-shared/utils/index.js';
+import { type Command, TextSelection } from '../../std/index.js';
+
+import { indentBlock } from './indent-block';
+
+export const indentBlocks: Command<{
+  blockIds?: string[];
+  stopCapture?: boolean;
+}> = (ctx, next) => {
+  let { blockIds } = ctx;
+  const { std, stopCapture = true } = ctx;
+  const { store, selection, range, host } = std;
+  const { schema } = store;
+
+  if (!blockIds || !blockIds.length) {
+    const nativeRange = range.value;
+    if (nativeRange) {
+      const topBlocks = range.getSelectedBlockComponentsByRange(nativeRange, {
+        match: el => el.model.role === 'content',
+        mode: 'highest',
+      });
+      if (topBlocks.length > 0) {
+        blockIds = topBlocks.map(block => block.blockId);
+      }
+    } else {
+      blockIds = std.selection.getGroup('note').map(sel => sel.blockId);
+    }
+  }
+
+  if (!blockIds || !blockIds.length || store.readonly) return;
+
+  // Find the first model that can be indented
+  let firstIndentIndex = -1;
+  for (let i = 0; i < blockIds.length; i++) {
+    const previousSibling = store.getPrev(blockIds[i]);
+    const model = store.getBlock(blockIds[i])?.model;
+    if (
+      model &&
+      previousSibling &&
+      schema.isValid(model.flavour, previousSibling.flavour)
+    ) {
+      firstIndentIndex = i;
+      break;
+    }
+  }
+
+  // No model can be indented
+  if (firstIndentIndex === -1) return;
+
+  if (stopCapture) store.captureSync();
+
+  const collapsedIds: string[] = [];
+  blockIds.slice(firstIndentIndex).forEach(id => {
+    const model = store.getBlock(id)?.model;
+    if (!model) return;
+    if (
+      matchModels(model, [ParagraphBlockModel]) &&
+      model.props.type.startsWith('h') &&
+      model.props.collapsed
+    ) {
+      const collapsedSiblings = calculateCollapsedSiblings(model);
+      collapsedIds.push(...collapsedSiblings.map(sibling => sibling.id));
+    }
+  });
+  // Models waiting to be indented
+  const indentIds = blockIds
+    .slice(firstIndentIndex)
+    .filter(id => !collapsedIds.includes(id));
+  const firstModel = store.getBlock(indentIds[0])?.model;
+  if (!firstModel) return;
+
+  {
+    // > # 123
+    // > # 456
+    // > # 789
+    //
+    // we need to update 123 collapsed state to false when indent 456 and 789
+
+    const nearestHeading = getNearestHeadingBefore(firstModel);
+    if (
+      nearestHeading &&
+      matchModels(nearestHeading, [ParagraphBlockModel]) &&
+      nearestHeading.props.collapsed
+    ) {
+      store.updateBlock(nearestHeading, { collapsed: false });
+    }
+  }
+
+  indentIds.forEach(id => {
+    std.command.exec(indentBlock, { blockId: id, stopCapture: false });
+  });
+
+  {
+    // 123
+    //   > # 456
+    // 789
+    // 012
+    //
+    // we need to update 456 collapsed state to false when indent 789 and 012
+    const nearestHeading = getNearestHeadingBefore(firstModel);
+    if (
+      nearestHeading &&
+      matchModels(nearestHeading, [ParagraphBlockModel]) &&
+      nearestHeading.props.collapsed
+    ) {
+      store.updateBlock(nearestHeading, { collapsed: false });
+    }
+  }
+
+  const textSelection = selection.find(TextSelection);
+  if (textSelection) {
+    host.updateComplete
+      .then(() => {
+        range.syncTextSelectionToRange(textSelection);
+      })
+      .catch(console.error);
+  }
+
+  return next();
+};

package/src/_pkgs/affine-block-note/commands/index.ts

@@ -0,0 +1,10 @@
+export { updateBlockType } from './block-type.js';
+export { changeNoteDisplayMode } from './change-note-display-mode.js';
+export { dedentBlock } from './dedent-block.js';
+export { dedentBlockToRoot } from './dedent-block-to-root.js';
+export { dedentBlocks } from './dedent-blocks.js';
+export { dedentBlocksToRoot } from './dedent-blocks-to-root.js';
+export { indentBlock } from './indent-block.js';
+export { indentBlocks } from './indent-blocks.js';
+export { selectBlock } from './select-block.js';
+export { selectBlocksBetween } from './select-blocks-between.js';

package/src/_pkgs/affine-block-note/commands/select-block.ts

@@ -0,0 +1,22 @@
+import {
+  type BlockComponent,
+  BlockSelection,
+  type Command,
+} from '../../std/index.js';
+
+export const selectBlock: Command<{
+  focusBlock?: BlockComponent;
+}> = (ctx, next) => {
+  const { focusBlock, std } = ctx;
+  if (!focusBlock) {
+    return;
+  }
+
+  const { selection } = std;
+
+  selection.setGroup('note', [
+    selection.create(BlockSelection, { blockId: focusBlock.blockId }),
+  ]);
+
+  return next();
+};

package/src/_pkgs/affine-block-note/commands/select-blocks-between.ts

@@ -0,0 +1,53 @@
+import {
+  type BlockComponent,
+  BlockSelection,
+  type Command,
+} from '../../std/index.js';
+
+export const selectBlocksBetween: Command<{
+  focusBlock?: BlockComponent;
+  anchorBlock?: BlockComponent;
+  tail: boolean;
+}> = (ctx, next) => {
+  const { focusBlock, anchorBlock, tail } = ctx;
+  if (!focusBlock || !anchorBlock) {
+    return;
+  }
+  const selection = ctx.std.selection;
+
+  // In same block
+  if (anchorBlock.blockId === focusBlock.blockId) {
+    const blockId = focusBlock.blockId;
+    selection.setGroup('note', [selection.create(BlockSelection, { blockId })]);
+    return next();
+  }
+
+  // In different blocks
+  const selections = [...selection.value];
+  if (selections.every(sel => sel.blockId !== focusBlock.blockId)) {
+    if (tail) {
+      selections.push(
+        selection.create(BlockSelection, { blockId: focusBlock.blockId })
+      );
+    } else {
+      selections.unshift(
+        selection.create(BlockSelection, { blockId: focusBlock.blockId })
+      );
+    }
+  }
+
+  let start = false;
+  const sel = selections.filter(sel => {
+    if (
+      sel.blockId === anchorBlock.blockId ||
+      sel.blockId === focusBlock.blockId
+    ) {
+      start = !start;
+      return true;
+    }
+    return start;
+  });
+
+  selection.setGroup('note', sel);
+  return next();
+};

package/src/_pkgs/affine-block-note/components/edgeless-note-background.css.ts

@@ -0,0 +1,27 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+import {
+  ACTIVE_NOTE_EXTRA_PADDING,
+  edgelessNoteContainer,
+} from '../note-edgeless-block.css';
+
+export const background = style({
+  position: 'absolute',
+  borderColor: cssVar('black10'),
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%',
+
+  selectors: {
+    [`${edgelessNoteContainer}[data-editing="true"] &`]: {
+      left: `${-ACTIVE_NOTE_EXTRA_PADDING}px`,
+      top: `${-ACTIVE_NOTE_EXTRA_PADDING}px`,
+      width: `calc(100% + ${ACTIVE_NOTE_EXTRA_PADDING * 2}px)`,
+      height: `calc(100% + ${ACTIVE_NOTE_EXTRA_PADDING * 2}px)`,
+      transition: 'left 0.3s, top 0.3s, width 0.3s, height 0.3s',
+      boxShadow: cssVar('activeShadow'),
+    },
+  },
+});

package/src/_pkgs/affine-block-note/components/edgeless-note-background.ts

@@ -0,0 +1,182 @@
+import {
+  DefaultTheme,
+  ListBlockModel,
+  NoteBlockModel,
+  ParagraphBlockModel,
+  StrokeStyle,
+} from '../../affine-model/index.js';
+import { ThemeProvider } from '../../affine-shared/services/index.js';
+import {
+  getClosestBlockComponentByPoint,
+  handleNativeRangeAtPoint,
+  matchModels,
+  stopPropagation,
+} from '../../affine-shared/utils/index.js';
+import { clamp, Point } from '../../global/gfx/index.js';
+import { SignalWatcher, WithDisposable } from '../../global/lit/index.js';
+import {
+  type BlockComponent,
+  type BlockStdScope,
+  PropTypes,
+  requiredProperties,
+  ShadowlessElement,
+  stdContext,
+  TextSelection,
+} from '../../std/index.js';
+import { GfxControllerIdentifier } from '../../std/gfx/index.js';
+import type { BlockModel } from '../../store/index.js';
+import { consume } from '@lit/context';
+import { computed, effect } from '@preact/signals-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { NoteConfigExtension } from '../config';
+import * as styles from './edgeless-note-background.css';
+
+@requiredProperties({
+  note: PropTypes.instanceOf(NoteBlockModel),
+})
+export class EdgelessNoteBackground extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  readonly backgroundStyle$ = computed(() => {
+    const themeProvider = this.std.get(ThemeProvider);
+    const theme = themeProvider.theme$.value;
+    const backgroundColor = themeProvider.generateColorProperty(
+      this.note.props.background$.value,
+      DefaultTheme.noteBackgrounColor,
+      theme
+    );
+
+    const { borderRadius, borderSize, borderStyle, shadowType } =
+      this.note.props.edgeless$.value.style;
+
+    return {
+      borderRadius: borderRadius + 'px',
+      backgroundColor: backgroundColor,
+      borderWidth: `${borderSize}px`,
+      borderStyle: borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle,
+      boxShadow: !shadowType ? 'none' : `var(${shadowType})`,
+    };
+  });
+
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  get doc() {
+    return this.std.host.store;
+  }
+
+  private _tryAddParagraph(x: number, y: number) {
+    const nearest = getClosestBlockComponentByPoint(
+      new Point(x, y)
+    ) as BlockComponent | null;
+    if (!nearest) return;
+
+    const nearestBBox = nearest.getBoundingClientRect();
+    const yRel = y - nearestBBox.top;
+
+    const insertPos: 'before' | 'after' =
+      yRel < nearestBBox.height / 2 ? 'before' : 'after';
+
+    const nearestModel = nearest.model as BlockModel;
+    const nearestModelIdx = this.note.children.indexOf(nearestModel);
+
+    const children = this.note.children;
+    const siblingModel =
+      children[
+        clamp(
+          nearestModelIdx + (insertPos === 'before' ? -1 : 1),
+          0,
+          children.length
+        )
+      ];
+
+    if (
+      (!nearestModel.text ||
+        !matchModels(nearestModel, [ParagraphBlockModel, ListBlockModel])) &&
+      (!siblingModel ||
+        !siblingModel.text ||
+        !matchModels(siblingModel, [ParagraphBlockModel, ListBlockModel]))
+    ) {
+      const [pId] = this.doc.addSiblingBlocks(
+        nearestModel,
+        [{ flavour: 'affine:paragraph' }],
+        insertPos
+      );
+
+      this.updateComplete
+        .then(() => {
+          this.std.selection.setGroup('note', [
+            this.std.selection.create(TextSelection, {
+              from: {
+                blockId: pId,
+                index: 0,
+                length: 0,
+              },
+              to: null,
+            }),
+          ]);
+        })
+        .catch(console.error);
+    }
+  }
+
+  private _handleClickAtBackground(e: MouseEvent) {
+    e.stopPropagation();
+    if (!this.editing) return;
+
+    const { zoom } = this.gfx.viewport;
+
+    const rect = this.getBoundingClientRect();
+    const offsetY = 16 * zoom;
+    const offsetX = 2 * zoom;
+    const x = clamp(e.x, rect.left + offsetX, rect.right - offsetX);
+    const y = clamp(e.y, rect.top + offsetY, rect.bottom - offsetY);
+    handleNativeRangeAtPoint(x, y);
+
+    if (this.std.host.store.readonly) return;
+
+    this._tryAddParagraph(x, y);
+  }
+
+  private _renderHeader() {
+    const header = this.std
+      .getOptional(NoteConfigExtension.identifier)
+      ?.edgelessNoteHeader({ note: this.note, std: this.std });
+
+    return header;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(styles.background);
+    this.disposables.add(
+      effect(() => {
+        Object.assign(this.style, this.backgroundStyle$.value);
+      })
+    );
+    this.disposables.addFromEvent(this, 'pointerdown', stopPropagation);
+    this.disposables.addFromEvent(this, 'click', this._handleClickAtBackground);
+  }
+
+  override render() {
+    return this.note.isPageBlock() ? this._renderHeader() : nothing;
+  }
+
+  @consume({ context: stdContext })
+  accessor std!: BlockStdScope;
+
+  @property({ attribute: false })
+  accessor editing: boolean = false;
+
+  @property({ attribute: false })
+  accessor note!: NoteBlockModel;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-note-background': EdgelessNoteBackground;
+  }
+}

package/src/_pkgs/affine-block-note/components/edgeless-note-border-dropdown-menu.ts

@@ -0,0 +1,42 @@
+import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
+import { LineWidth, type StrokeStyle } from '../../affine-model/index.js';
+import { LineStyleIcon } from '@blocksuite/icons/lit';
+import { ShadowlessElement } from '../../std/index.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
+  override render() {
+    const { lineSize, lineStyle } = this;
+
+    return html`
+      <editor-menu-button
+        .button=${html`
+          <editor-icon-button
+            aria-label="Border style"
+            .tooltip="${'Border style'}"
+          >
+            ${LineStyleIcon()} ${EditorChevronDown}
+          </editor-icon-button>
+        `}
+      >
+        <edgeless-line-styles-panel
+          .lineSize=${lineSize}
+          .lineStyle=${lineStyle}
+        ></edgeless-line-styles-panel>
+      </editor-menu-button>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor lineStyle!: StrokeStyle;
+
+  @property({ attribute: false })
+  accessor lineSize: LineWidth = LineWidth.Two;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-note-border-dropdown-menu': EdgelessNoteBorderDropdownMenu;
+  }
+}

package/src/_pkgs/affine-block-note/components/edgeless-note-display-mode-dropdown-menu.ts

@@ -0,0 +1,58 @@
+import { EditorChevronDown } from '../../affine-components/toolbar/index.js';
+import { NoteDisplayMode } from '../../affine-model/index.js';
+import { ShadowlessElement } from '../../std/index.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+const DisplayModeMap = {
+  [NoteDisplayMode.DocAndEdgeless]: 'Both',
+  [NoteDisplayMode.EdgelessOnly]: 'Edgeless',
+  [NoteDisplayMode.DocOnly]: 'Page',
+} as const satisfies Record<NoteDisplayMode, string>;
+
+export class EdgelessNoteDisplayModeDropdownMenu extends ShadowlessElement {
+  get mode() {
+    return DisplayModeMap[this.displayMode];
+  }
+
+  select(detail: NoteDisplayMode) {
+    this.dispatchEvent(new CustomEvent('select', { detail }));
+  }
+
+  override render() {
+    const { displayMode, mode } = this;
+
+    return html`
+      <span class="display-mode-button-label">Show in</span>
+      <editor-menu-button
+        .contentPadding=${'8px'}
+        .button=${html`
+          <editor-icon-button
+            aria-label="Mode"
+            .tooltip="${'Display mode'}"
+            .justify="${'space-between'}"
+            .labelHeight="${'20px'}"
+          >
+            <span class="label">${mode}</span>
+            ${EditorChevronDown}
+          </editor-icon-button>
+        `}
+      >
+        <note-display-mode-panel
+          .displayMode=${displayMode}
+          .onSelect=${(newMode: NoteDisplayMode) => this.select(newMode)}
+        >
+        </note-display-mode-panel>
+      </editor-menu-button>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor displayMode!: NoteDisplayMode;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-note-display-mode-dropdown-menu': EdgelessNoteDisplayModeDropdownMenu;
+  }
+}