fix(ios): stabilize keyboard toolbar, image picker, and scrolling (#15182)
## Summary - keep the editor active when iOS keyboard toolbar interactions move focus into range-sync excluded widgets - use the native iOS image picker/source sheet and sync native presentation with the app theme - pin `ListViewKit` to `1.1.6` so the iOS workspace resolves with Xcode 16.3 - restore vertical scrolling in the iOS `WKWebView` by removing the global `contentOffset` reset while preserving zoom prevention ## Test plan - [x] `yarn vitest --run --config \"vitest.config.ts\" --browser.enabled=false \"src/__tests__/inline/active.unit.spec.ts\"` - [x] `LANG=en_US.UTF-8 LC_ALL=en_US.UTF-8 xcodebuild -resolvePackageDependencies -workspace \"packages/frontend/apps/ios/App/App.xcworkspace\" -scheme \"App\"` - [x] `xcodebuild -workspace \"App.xcworkspace\" -scheme \"App\" -destination \"generic/platform=iOS Simulator\" build CODE_SIGNING_ALLOWED=NO ONLY_ACTIVE_ARCH=YES ARCHS=arm64` - [x] Xcode build validation for the updated PR branch
This commit is contained in:
@@ -0,0 +1,79 @@
|
|||||||
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
import {
|
||||||
|
getImageFilesFromLocal,
|
||||||
|
registerNativeImageFilesPicker,
|
||||||
|
} from '../../utils';
|
||||||
|
|
||||||
|
describe('getImageFilesFromLocal', () => {
|
||||||
|
let originalShowPicker: ((this: HTMLInputElement) => void) | undefined;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
originalShowPicker = (
|
||||||
|
HTMLInputElement.prototype as HTMLInputElement & {
|
||||||
|
showPicker?: (this: HTMLInputElement) => void;
|
||||||
|
}
|
||||||
|
).showPicker;
|
||||||
|
|
||||||
|
(
|
||||||
|
HTMLInputElement.prototype as HTMLInputElement & {
|
||||||
|
showPicker?: (this: HTMLInputElement) => void;
|
||||||
|
}
|
||||||
|
).showPicker = vi.fn(function (this: HTMLInputElement) {
|
||||||
|
this.dispatchEvent(new Event('cancel'));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
if (originalShowPicker) {
|
||||||
|
(
|
||||||
|
HTMLInputElement.prototype as HTMLInputElement & {
|
||||||
|
showPicker?: (this: HTMLInputElement) => void;
|
||||||
|
}
|
||||||
|
).showPicker = originalShowPicker;
|
||||||
|
} else {
|
||||||
|
delete (
|
||||||
|
HTMLInputElement.prototype as unknown as {
|
||||||
|
showPicker?: unknown;
|
||||||
|
}
|
||||||
|
).showPicker;
|
||||||
|
}
|
||||||
|
|
||||||
|
registerNativeImageFilesPicker(null);
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('prefers the registered native image picker when available', async () => {
|
||||||
|
const file = new File(['picked-image'], 'picked.png', {
|
||||||
|
type: 'image/png',
|
||||||
|
lastModified: 123,
|
||||||
|
});
|
||||||
|
const nativePicker = vi.fn(async () => [file]);
|
||||||
|
registerNativeImageFilesPicker(nativePicker);
|
||||||
|
|
||||||
|
const files = await getImageFilesFromLocal();
|
||||||
|
|
||||||
|
expect(nativePicker).toHaveBeenCalledTimes(1);
|
||||||
|
expect(files).toEqual([file]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('falls back to the standard picker when the native picker rejects', async () => {
|
||||||
|
vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||||
|
const nativePicker = vi.fn(async () => {
|
||||||
|
throw new Error('Native picker failed');
|
||||||
|
});
|
||||||
|
registerNativeImageFilesPicker(nativePicker);
|
||||||
|
|
||||||
|
const files = await getImageFilesFromLocal();
|
||||||
|
|
||||||
|
expect(nativePicker).toHaveBeenCalledTimes(1);
|
||||||
|
expect(files).toEqual([]);
|
||||||
|
expect(
|
||||||
|
(
|
||||||
|
HTMLInputElement.prototype as HTMLInputElement & {
|
||||||
|
showPicker?: (this: HTMLInputElement) => void;
|
||||||
|
}
|
||||||
|
).showPicker
|
||||||
|
).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -14,8 +14,14 @@ interface OpenFilePickerOptions {
|
|||||||
multiple?: boolean | undefined;
|
multiple?: boolean | undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type NativeImageFilesPicker = () => Promise<File[] | null>;
|
||||||
|
|
||||||
|
const NATIVE_IMAGE_FILES_PICKER_KEY =
|
||||||
|
'__AFFINE_NATIVE_IMAGE_FILES_PICKER__' as const;
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Window {
|
interface Window {
|
||||||
|
[NATIVE_IMAGE_FILES_PICKER_KEY]?: NativeImageFilesPicker;
|
||||||
// Window API: showOpenFilePicker
|
// Window API: showOpenFilePicker
|
||||||
showOpenFilePicker?: (
|
showOpenFilePicker?: (
|
||||||
options?: OpenFilePickerOptions
|
options?: OpenFilePickerOptions
|
||||||
@@ -29,6 +35,17 @@ declare global {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function registerNativeImageFilesPicker(
|
||||||
|
picker: NativeImageFilesPicker | null
|
||||||
|
) {
|
||||||
|
if (picker) {
|
||||||
|
window[NATIVE_IMAGE_FILES_PICKER_KEY] = picker;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
delete window[NATIVE_IMAGE_FILES_PICKER_KEY];
|
||||||
|
}
|
||||||
|
|
||||||
// Minimal polyfill for FileSystemDirectoryHandle to iterate over files
|
// Minimal polyfill for FileSystemDirectoryHandle to iterate over files
|
||||||
interface FileSystemDirectoryHandle {
|
interface FileSystemDirectoryHandle {
|
||||||
kind: 'directory';
|
kind: 'directory';
|
||||||
@@ -195,7 +212,18 @@ export async function snapshotFile(file: File, relativePath?: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function snapshotFiles(files: File[]) {
|
export async function snapshotFiles(files: File[]) {
|
||||||
return Promise.all(files.map(file => snapshotFile(file)));
|
const results = await Promise.allSettled(
|
||||||
|
files.map(file => snapshotFile(file))
|
||||||
|
);
|
||||||
|
const snapshots: File[] = [];
|
||||||
|
for (const result of results) {
|
||||||
|
if (result.status === 'fulfilled') {
|
||||||
|
snapshots.push(result.value);
|
||||||
|
} else {
|
||||||
|
console.error('Failed to snapshot file', result.reason);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return snapshots;
|
||||||
}
|
}
|
||||||
|
|
||||||
function canUseFileSystemAccessAPI(
|
function canUseFileSystemAccessAPI(
|
||||||
@@ -332,7 +360,11 @@ export async function openDirectory(
|
|||||||
if (fileHandle.getFile) {
|
if (fileHandle.getFile) {
|
||||||
const file = await fileHandle.getFile();
|
const file = await fileHandle.getFile();
|
||||||
if (options?.snapshot) {
|
if (options?.snapshot) {
|
||||||
files.push(await snapshotFile(file, relativePath));
|
try {
|
||||||
|
files.push(await snapshotFile(file, relativePath));
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to snapshot file', relativePath, error);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
Object.defineProperty(file, 'webkitRelativePath', {
|
Object.defineProperty(file, 'webkitRelativePath', {
|
||||||
value: relativePath,
|
value: relativePath,
|
||||||
@@ -410,6 +442,15 @@ export async function openSingleFileWith(
|
|||||||
}
|
}
|
||||||
|
|
||||||
export async function getImageFilesFromLocal() {
|
export async function getImageFilesFromLocal() {
|
||||||
|
const nativePicker = window[NATIVE_IMAGE_FILES_PICKER_KEY];
|
||||||
|
if (nativePicker) {
|
||||||
|
try {
|
||||||
|
return (await nativePicker()) ?? [];
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const files = await openFilesWith('Images');
|
const files = await openFilesWith('Images');
|
||||||
return files ?? [];
|
return files ?? [];
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
requiredProperties,
|
requiredProperties,
|
||||||
ShadowlessElement,
|
ShadowlessElement,
|
||||||
} from '@blocksuite/std';
|
} from '@blocksuite/std';
|
||||||
|
import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
|
||||||
import { effect, type Signal, signal } from '@preact/signals-core';
|
import { effect, type Signal, signal } from '@preact/signals-core';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
import { property } from 'lit/decorators.js';
|
import { property } from 'lit/decorators.js';
|
||||||
@@ -263,6 +264,7 @@ export class AffineKeyboardToolbar extends SignalWatcher(
|
|||||||
|
|
||||||
override connectedCallback() {
|
override connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
|
||||||
|
|
||||||
// There are two cases that `_expanded$` will be true:
|
// There are two cases that `_expanded$` will be true:
|
||||||
// 1. when virtual keyboard is opened, the panel need to be expanded and overlapped by the keyboard,
|
// 1. when virtual keyboard is opened, the panel need to be expanded and overlapped by the keyboard,
|
||||||
|
|||||||
@@ -0,0 +1,66 @@
|
|||||||
|
/**
|
||||||
|
* @vitest-environment happy-dom
|
||||||
|
*/
|
||||||
|
import { afterEach, describe, expect, test } from 'vitest';
|
||||||
|
|
||||||
|
import { shouldDeactivateEditorOnFocusOut } from '../../inline/range/active.js';
|
||||||
|
import { RANGE_SYNC_EXCLUDE_ATTR } from '../../inline/range/consts.js';
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
document.body.replaceChildren();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('editor active helpers', () => {
|
||||||
|
test('keeps editor active when focus moves into an excluded widget', () => {
|
||||||
|
const host = document.createElement('editor-host');
|
||||||
|
const paragraph = document.createElement('div');
|
||||||
|
host.append(paragraph);
|
||||||
|
|
||||||
|
const widgetRoot = document.createElement('div');
|
||||||
|
widgetRoot.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
|
||||||
|
const widgetButton = document.createElement('button');
|
||||||
|
widgetRoot.append(widgetButton);
|
||||||
|
|
||||||
|
document.body.append(host, widgetRoot);
|
||||||
|
|
||||||
|
expect(shouldDeactivateEditorOnFocusOut(host, widgetButton)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('keeps editor active when focus stays inside the editor host', () => {
|
||||||
|
const host = document.createElement('editor-host');
|
||||||
|
const input = document.createElement('input');
|
||||||
|
host.append(input);
|
||||||
|
document.body.append(host);
|
||||||
|
|
||||||
|
expect(shouldDeactivateEditorOnFocusOut(host, input)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('deactivates editor when focus moves to a regular external control', () => {
|
||||||
|
const host = document.createElement('editor-host');
|
||||||
|
const paragraph = document.createElement('div');
|
||||||
|
host.append(paragraph);
|
||||||
|
|
||||||
|
const externalButton = document.createElement('button');
|
||||||
|
document.body.append(host, externalButton);
|
||||||
|
|
||||||
|
expect(shouldDeactivateEditorOnFocusOut(host, externalButton)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('keeps editor active on focusout when related target is null', () => {
|
||||||
|
// Focus leaving to nowhere (e.g. block-level selection) must not deactivate
|
||||||
|
// the editor via `focusout`; the host `blur` handler owns that case.
|
||||||
|
const host = document.createElement('editor-host');
|
||||||
|
document.body.append(host);
|
||||||
|
|
||||||
|
expect(shouldDeactivateEditorOnFocusOut(host, null)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('keeps editor active when the related target is not a DOM node', () => {
|
||||||
|
const host = document.createElement('editor-host');
|
||||||
|
document.body.append(host);
|
||||||
|
|
||||||
|
expect(shouldDeactivateEditorOnFocusOut(host, new EventTarget())).toBe(
|
||||||
|
false
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -4,6 +4,7 @@ import { signal } from '@preact/signals-core';
|
|||||||
|
|
||||||
import { LifeCycleWatcher } from '../extension/index.js';
|
import { LifeCycleWatcher } from '../extension/index.js';
|
||||||
import { KeymapIdentifier } from '../identifier.js';
|
import { KeymapIdentifier } from '../identifier.js';
|
||||||
|
import { shouldDeactivateEditorOnFocusOut } from '../inline/range/active.js';
|
||||||
import type { BlockStdScope } from '../scope/index.js';
|
import type { BlockStdScope } from '../scope/index.js';
|
||||||
import { type BlockComponent, EditorHost } from '../view/index.js';
|
import { type BlockComponent, EditorHost } from '../view/index.js';
|
||||||
import {
|
import {
|
||||||
@@ -174,16 +175,21 @@ export class UIEventDispatcher extends LifeCycleWatcher {
|
|||||||
this._setActive(true);
|
this._setActive(true);
|
||||||
});
|
});
|
||||||
this.disposables.addFromEvent(document, 'focusout', e => {
|
this.disposables.addFromEvent(document, 'focusout', e => {
|
||||||
if (e.relatedTarget && !this.host.contains(e.relatedTarget as Node)) {
|
if (shouldDeactivateEditorOnFocusOut(this.host, e.relatedTarget)) {
|
||||||
this._setActive(false);
|
this._setActive(false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.disposables.addFromEvent(this.host, 'blur', () => {
|
this.disposables.addFromEvent(this.host, 'blur', e => {
|
||||||
if (_dragging) {
|
if (_dragging) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this._setActive(false);
|
if (
|
||||||
|
!e.relatedTarget ||
|
||||||
|
shouldDeactivateEditorOnFocusOut(this.host, e.relatedTarget)
|
||||||
|
) {
|
||||||
|
this._setActive(false);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.disposables.addFromEvent(this.host, 'dragover', () => {
|
this.disposables.addFromEvent(this.host, 'dragover', () => {
|
||||||
_dragging = true;
|
_dragging = true;
|
||||||
|
|||||||
@@ -1,4 +1,46 @@
|
|||||||
import { RANGE_SYNC_EXCLUDE_ATTR } from './consts';
|
import { RANGE_SYNC_EXCLUDE_ATTR } from './consts.js';
|
||||||
|
|
||||||
|
function getClosestElement(target: EventTarget | null) {
|
||||||
|
if (target instanceof Element) {
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (target instanceof Node) {
|
||||||
|
return target.parentElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isRangeSyncExcludedTarget(target: EventTarget | null) {
|
||||||
|
return !!getClosestElement(target)?.closest(
|
||||||
|
`[${RANGE_SYNC_EXCLUDE_ATTR}="true"]`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldDeactivateEditorOnFocusOut(
|
||||||
|
editorHost: HTMLElement,
|
||||||
|
relatedTarget: EventTarget | null
|
||||||
|
) {
|
||||||
|
// A missing or non-DOM `relatedTarget` means focus is not moving to a
|
||||||
|
// trackable element (e.g. block-level selection or a keyboard action). The
|
||||||
|
// document `focusout` handler must keep the editor active in this case so the
|
||||||
|
// current block selection is preserved; leaving-to-nowhere is handled
|
||||||
|
// explicitly by the host `blur` handler instead.
|
||||||
|
if (!relatedTarget || !(relatedTarget instanceof Node)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editorHost.contains(relatedTarget)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isRangeSyncExcludedTarget(relatedTarget)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Check if the active element is in the editor host.
|
* Check if the active element is in the editor host.
|
||||||
@@ -11,8 +53,7 @@ export function isActiveInEditor(editorHost: HTMLElement) {
|
|||||||
const currentActiveElement = document.activeElement;
|
const currentActiveElement = document.activeElement;
|
||||||
if (!currentActiveElement) return false;
|
if (!currentActiveElement) return false;
|
||||||
// The input or textarea in the widget should be ignored.
|
// The input or textarea in the widget should be ignored.
|
||||||
if (currentActiveElement.closest(`[${RANGE_SYNC_EXCLUDE_ATTR}="true"]`))
|
if (isRangeSyncExcludedTarget(currentActiveElement)) return false;
|
||||||
return false;
|
|
||||||
const currentEditorHost = currentActiveElement?.closest('editor-host');
|
const currentEditorHost = currentActiveElement?.closest('editor-host');
|
||||||
if (!currentEditorHost) return false;
|
if (!currentEditorHost) return false;
|
||||||
return currentEditorHost === editorHost;
|
return currentEditorHost === editorHost;
|
||||||
|
|||||||
@@ -2,7 +2,15 @@ import os from 'node:os';
|
|||||||
import path from 'node:path';
|
import path from 'node:path';
|
||||||
|
|
||||||
import fs from 'fs-extra';
|
import fs from 'fs-extra';
|
||||||
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
|
import {
|
||||||
|
afterEach,
|
||||||
|
beforeAll,
|
||||||
|
beforeEach,
|
||||||
|
describe,
|
||||||
|
expect,
|
||||||
|
test,
|
||||||
|
vi,
|
||||||
|
} from 'vitest';
|
||||||
|
|
||||||
const electronMock = vi.hoisted(() => ({
|
const electronMock = vi.hoisted(() => ({
|
||||||
tmpDir: '',
|
tmpDir: '',
|
||||||
@@ -32,6 +40,13 @@ vi.mock('../../src/main/logger', () => ({
|
|||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
// Warm the handler module's transform once so the first per-test dynamic
|
||||||
|
// import doesn't race the default 60s test timeout on loaded CI shards, where
|
||||||
|
// cold-transforming the heavy `@toeverything/infra` graph can starve.
|
||||||
|
beforeAll(async () => {
|
||||||
|
await import('@affine/electron/main/byok-storage/handlers');
|
||||||
|
}, 120_000);
|
||||||
|
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
vi.useRealTimers();
|
vi.useRealTimers();
|
||||||
vi.resetModules();
|
vi.resetModules();
|
||||||
|
|||||||
@@ -32,8 +32,8 @@
|
|||||||
"kind" : "remoteSourceControl",
|
"kind" : "remoteSourceControl",
|
||||||
"location" : "https://github.com/Lakr233/ListViewKit",
|
"location" : "https://github.com/Lakr233/ListViewKit",
|
||||||
"state" : {
|
"state" : {
|
||||||
"revision" : "07f7adfa0629f8647991e3c148b7d3e060fe2917",
|
"revision" : "a4372d7f90c846d834c1f1575d1af0050d70fa0f",
|
||||||
"version" : "1.2.0"
|
"version" : "1.1.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -63,15 +63,6 @@
|
|||||||
"version" : "3.9.1"
|
"version" : "3.9.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"identity" : "msdisplaylink",
|
|
||||||
"kind" : "remoteSourceControl",
|
|
||||||
"location" : "https://github.com/Lakr233/MSDisplayLink",
|
|
||||||
"state" : {
|
|
||||||
"revision" : "ebf5823cb5fc1326639d9a05bc06d16bbe82989f",
|
|
||||||
"version" : "2.0.8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"identity" : "purchases-ios-spm",
|
"identity" : "purchases-ios-spm",
|
||||||
"kind" : "remoteSourceControl",
|
"kind" : "remoteSourceControl",
|
||||||
|
|||||||
@@ -3,8 +3,13 @@ import Intelligents
|
|||||||
import UIKit
|
import UIKit
|
||||||
import WebKit
|
import WebKit
|
||||||
|
|
||||||
class AFFiNEViewController: CAPBridgeViewController, UIScrollViewDelegate {
|
class AFFiNEViewController: CAPBridgeViewController, UIScrollViewDelegate, AffineThemeConfigurable {
|
||||||
var intelligentsButton: IntelligentsButton?
|
var intelligentsButton: IntelligentsButton?
|
||||||
|
var appThemeUserInterfaceStyle: UIUserInterfaceStyle = .unspecified {
|
||||||
|
didSet {
|
||||||
|
overrideUserInterfaceStyle = appThemeUserInterfaceStyle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
override func viewDidLoad() {
|
override func viewDidLoad() {
|
||||||
super.viewDidLoad()
|
super.viewDidLoad()
|
||||||
@@ -52,9 +57,11 @@ class AFFiNEViewController: CAPBridgeViewController, UIScrollViewDelegate {
|
|||||||
|
|
||||||
override func capacitorDidLoad() {
|
override func capacitorDidLoad() {
|
||||||
let plugins: [CAPPlugin] = [
|
let plugins: [CAPPlugin] = [
|
||||||
|
AffineThemePlugin(associatedController: self),
|
||||||
AuthPlugin(),
|
AuthPlugin(),
|
||||||
CookiePlugin(),
|
CookiePlugin(),
|
||||||
HashcashPlugin(),
|
HashcashPlugin(),
|
||||||
|
ImagePickerPlugin(associatedController: self),
|
||||||
NavigationGesturePlugin(),
|
NavigationGesturePlugin(),
|
||||||
NbStorePlugin(),
|
NbStorePlugin(),
|
||||||
PayWallPlugin(associatedController: self),
|
PayWallPlugin(associatedController: self),
|
||||||
@@ -110,12 +117,6 @@ class AFFiNEViewController: CAPBridgeViewController, UIScrollViewDelegate {
|
|||||||
scrollView.zoomScale = 1.0
|
scrollView.zoomScale = 1.0
|
||||||
}
|
}
|
||||||
|
|
||||||
func scrollViewDidScroll(_ scrollView: UIScrollView) {
|
|
||||||
if scrollView.contentOffset != .zero {
|
|
||||||
scrollView.contentOffset = .zero
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MARK: - Web Content Process Crash Recovery
|
// MARK: - Web Content Process Crash Recovery
|
||||||
|
|
||||||
// NOTE: Capacitor's CAPBridgeViewController owns the WKWebView
|
// NOTE: Capacitor's CAPBridgeViewController owns the WKWebView
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ enum ApplicationBridgedWindowScript: String {
|
|||||||
case getCurrentWorkspaceId = "window.getCurrentWorkspaceId();"
|
case getCurrentWorkspaceId = "window.getCurrentWorkspaceId();"
|
||||||
case getCurrentDocId = "window.getCurrentDocId();"
|
case getCurrentDocId = "window.getCurrentDocId();"
|
||||||
case getCurrentI18nLocale = "window.getCurrentI18nLocale();"
|
case getCurrentI18nLocale = "window.getCurrentI18nLocale();"
|
||||||
|
case getCurrentThemeMode = "window.getCurrentThemeMode();"
|
||||||
case createNewDocByMarkdownInCurrentWorkspace = "return await window.createNewDocByMarkdownInCurrentWorkspace(markdown, title);"
|
case createNewDocByMarkdownInCurrentWorkspace = "return await window.createNewDocByMarkdownInCurrentWorkspace(markdown, title);"
|
||||||
|
|
||||||
var requiresAsyncContext: Bool {
|
var requiresAsyncContext: Bool {
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
import Capacitor
|
||||||
|
import UIKit
|
||||||
|
|
||||||
|
protocol AffineThemeConfigurable: AnyObject {
|
||||||
|
var appThemeUserInterfaceStyle: UIUserInterfaceStyle { get set }
|
||||||
|
}
|
||||||
|
|
||||||
|
private enum AffineThemeMode: String {
|
||||||
|
case dark
|
||||||
|
case light
|
||||||
|
case system
|
||||||
|
|
||||||
|
var userInterfaceStyle: UIUserInterfaceStyle {
|
||||||
|
switch self {
|
||||||
|
case .dark:
|
||||||
|
.dark
|
||||||
|
case .light:
|
||||||
|
.light
|
||||||
|
case .system:
|
||||||
|
.unspecified
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@objc(AffineThemePlugin)
|
||||||
|
public final class AffineThemePlugin: CAPPlugin, CAPBridgedPlugin {
|
||||||
|
init(associatedController: UIViewController?) {
|
||||||
|
controller = associatedController
|
||||||
|
super.init()
|
||||||
|
}
|
||||||
|
|
||||||
|
weak var controller: UIViewController?
|
||||||
|
|
||||||
|
public let identifier = "AffineThemePlugin"
|
||||||
|
public let jsName = "AffineTheme"
|
||||||
|
public let pluginMethods: [CAPPluginMethod] = [
|
||||||
|
CAPPluginMethod(name: "onThemeChanged", returnType: CAPPluginReturnPromise),
|
||||||
|
]
|
||||||
|
|
||||||
|
@objc func onThemeChanged(_ call: CAPPluginCall) {
|
||||||
|
DispatchQueue.main.async {
|
||||||
|
let themeMode = AffineThemeMode(rawValue: call.getString("themeMode") ?? "") ?? .system
|
||||||
|
(self.controller as? AffineThemeConfigurable)?.appThemeUserInterfaceStyle = themeMode.userInterfaceStyle
|
||||||
|
call.resolve()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,689 @@
|
|||||||
|
import AffineResources
|
||||||
|
import Capacitor
|
||||||
|
import Foundation
|
||||||
|
import PhotosUI
|
||||||
|
import UIKit
|
||||||
|
import UniformTypeIdentifiers
|
||||||
|
|
||||||
|
private struct PickedImageFile {
|
||||||
|
let path: String
|
||||||
|
let name: String
|
||||||
|
let mimeType: String
|
||||||
|
let lastModified: Int64
|
||||||
|
|
||||||
|
var dictionary: [String: Any] {
|
||||||
|
[
|
||||||
|
"path": path,
|
||||||
|
"name": name,
|
||||||
|
"mimeType": mimeType,
|
||||||
|
"lastModified": lastModified,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@objc(ImagePickerPlugin)
|
||||||
|
public class ImagePickerPlugin: CAPPlugin, CAPBridgedPlugin {
|
||||||
|
init(
|
||||||
|
associatedController: UIViewController?
|
||||||
|
) {
|
||||||
|
controller = associatedController
|
||||||
|
super.init()
|
||||||
|
}
|
||||||
|
|
||||||
|
weak var controller: UIViewController?
|
||||||
|
|
||||||
|
public let identifier = "ImagePickerPlugin"
|
||||||
|
public let jsName = "ImagePicker"
|
||||||
|
public let pluginMethods: [CAPPluginMethod] = [
|
||||||
|
CAPPluginMethod(name: "pickImages", returnType: CAPPluginReturnPromise),
|
||||||
|
]
|
||||||
|
|
||||||
|
private var pendingCall: CAPPluginCall?
|
||||||
|
private var allowsMultipleSelection = true
|
||||||
|
|
||||||
|
@objc func pickImages(_ call: CAPPluginCall) {
|
||||||
|
DispatchQueue.main.async {
|
||||||
|
guard self.pendingCall == nil else {
|
||||||
|
call.reject("Another image picker request is already in progress.")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
do {
|
||||||
|
try self.clearStagingDirectory()
|
||||||
|
let presenter = try self.resolvePresenter()
|
||||||
|
self.pendingCall = call
|
||||||
|
self.allowsMultipleSelection = call.getBool("multiple") ?? true
|
||||||
|
self.presentSourceActionSheet(from: presenter)
|
||||||
|
} catch {
|
||||||
|
call.reject("Failed to present image picker.", nil, error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private func resolvePresenter() throws -> UIViewController {
|
||||||
|
if let controller {
|
||||||
|
return controller
|
||||||
|
}
|
||||||
|
if let bridge, let viewController = bridge.viewController {
|
||||||
|
return viewController
|
||||||
|
}
|
||||||
|
throw NSError(
|
||||||
|
domain: "ImagePickerPlugin",
|
||||||
|
code: 1,
|
||||||
|
userInfo: [NSLocalizedDescriptionKey: "No view controller available."]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func presentSourceActionSheet(from presenter: UIViewController) {
|
||||||
|
let presentSheet = { [weak self, weak presenter] (theme: ImagePickerSheetTheme) in
|
||||||
|
guard let self, let presenter else { return }
|
||||||
|
|
||||||
|
let sheetController = ImagePickerSourceSheetViewController(
|
||||||
|
actions: [
|
||||||
|
ImagePickerSheetAction(
|
||||||
|
title: "Photo Library",
|
||||||
|
iconSystemName: "photo.on.rectangle.angled"
|
||||||
|
) { [weak self, weak presenter] in
|
||||||
|
guard let self, let presenter else { return }
|
||||||
|
self.presentPhotoLibrary(from: presenter)
|
||||||
|
},
|
||||||
|
ImagePickerSheetAction(
|
||||||
|
title: "Take Photo",
|
||||||
|
iconSystemName: "camera",
|
||||||
|
isEnabled: UIImagePickerController.isSourceTypeAvailable(.camera)
|
||||||
|
) { [weak self, weak presenter] in
|
||||||
|
guard let self, let presenter else { return }
|
||||||
|
self.presentCamera(from: presenter)
|
||||||
|
},
|
||||||
|
ImagePickerSheetAction(
|
||||||
|
title: "Choose Files",
|
||||||
|
iconSystemName: "folder"
|
||||||
|
) { [weak self, weak presenter] in
|
||||||
|
guard let self, let presenter else { return }
|
||||||
|
self.presentDocumentPicker(from: presenter)
|
||||||
|
},
|
||||||
|
],
|
||||||
|
theme: theme,
|
||||||
|
onCancel: { [weak self] in
|
||||||
|
self?.resolvePendingCall(files: [], canceled: true)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
sheetController.overrideUserInterfaceStyle = theme.userInterfaceStyle
|
||||||
|
sheetController.modalPresentationStyle = .overFullScreen
|
||||||
|
sheetController.modalTransitionStyle = .crossDissolve
|
||||||
|
presenter.present(sheetController, animated: false)
|
||||||
|
}
|
||||||
|
|
||||||
|
if let webView = bridge?.webView {
|
||||||
|
webView.evaluateScript(.getCurrentThemeMode) { output in
|
||||||
|
DispatchQueue.main.async {
|
||||||
|
presentSheet(Self.sheetTheme(for: output as? String))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
presentSheet(.light)
|
||||||
|
}
|
||||||
|
|
||||||
|
private static func sheetTheme(for themeMode: String?) -> ImagePickerSheetTheme {
|
||||||
|
switch themeMode {
|
||||||
|
case "dark":
|
||||||
|
return .dark
|
||||||
|
case "system":
|
||||||
|
return UITraitCollection.current.userInterfaceStyle == .dark ? .dark : .light
|
||||||
|
default:
|
||||||
|
return .light
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private func presentPhotoLibrary(from presenter: UIViewController) {
|
||||||
|
var configuration = PHPickerConfiguration(photoLibrary: .shared())
|
||||||
|
configuration.filter = .images
|
||||||
|
configuration.selectionLimit = allowsMultipleSelection ? 0 : 1
|
||||||
|
|
||||||
|
let picker = PHPickerViewController(configuration: configuration)
|
||||||
|
picker.delegate = self
|
||||||
|
presenter.present(picker, animated: true)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func presentCamera(from presenter: UIViewController) {
|
||||||
|
let picker = UIImagePickerController()
|
||||||
|
picker.sourceType = .camera
|
||||||
|
picker.mediaTypes = [UTType.image.identifier]
|
||||||
|
picker.allowsEditing = false
|
||||||
|
picker.delegate = self
|
||||||
|
presenter.present(picker, animated: true)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func presentDocumentPicker(from presenter: UIViewController) {
|
||||||
|
let picker = UIDocumentPickerViewController(
|
||||||
|
forOpeningContentTypes: [.image],
|
||||||
|
asCopy: true
|
||||||
|
)
|
||||||
|
picker.delegate = self
|
||||||
|
picker.allowsMultipleSelection = allowsMultipleSelection
|
||||||
|
presenter.present(picker, animated: true)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func resolvePendingCall(files: [PickedImageFile], canceled: Bool) {
|
||||||
|
pendingCall?.resolve([
|
||||||
|
"files": files.map(\.dictionary),
|
||||||
|
"canceled": canceled,
|
||||||
|
])
|
||||||
|
pendingCall = nil
|
||||||
|
}
|
||||||
|
|
||||||
|
private func rejectPendingCall(message: String, error: Error? = nil) {
|
||||||
|
pendingCall?.reject(message, nil, error)
|
||||||
|
pendingCall = nil
|
||||||
|
}
|
||||||
|
|
||||||
|
private func createStagingDirectory() throws -> URL {
|
||||||
|
let directory = FileManager.default.temporaryDirectory
|
||||||
|
.appendingPathComponent("affine-image-picker", isDirectory: true)
|
||||||
|
try FileManager.default.createDirectory(at: directory, withIntermediateDirectories: true)
|
||||||
|
return directory
|
||||||
|
}
|
||||||
|
|
||||||
|
private func clearStagingDirectory() throws {
|
||||||
|
let directory = FileManager.default.temporaryDirectory
|
||||||
|
.appendingPathComponent("affine-image-picker", isDirectory: true)
|
||||||
|
guard FileManager.default.fileExists(atPath: directory.path) else { return }
|
||||||
|
try FileManager.default.removeItem(at: directory)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func uniqueFileURL(in directory: URL, fileName: String) -> URL {
|
||||||
|
let strippedName = (fileName as NSString).lastPathComponent
|
||||||
|
let sanitizedName = strippedName
|
||||||
|
.components(separatedBy: CharacterSet(charactersIn: "/\\:"))
|
||||||
|
.filter { !$0.isEmpty && $0 != "." && $0 != ".." }
|
||||||
|
.joined(separator: "-")
|
||||||
|
let safeName = sanitizedName.isEmpty ? UUID().uuidString : sanitizedName
|
||||||
|
return directory.appendingPathComponent("\(UUID().uuidString)-\(safeName)")
|
||||||
|
}
|
||||||
|
|
||||||
|
private func pickedFile(from sourceURL: URL, suggestedName: String? = nil) throws -> PickedImageFile {
|
||||||
|
let stagingDirectory = try createStagingDirectory()
|
||||||
|
let fileName = suggestedName ?? sourceURL.lastPathComponent
|
||||||
|
let destinationURL = uniqueFileURL(in: stagingDirectory, fileName: fileName)
|
||||||
|
|
||||||
|
if FileManager.default.fileExists(atPath: destinationURL.path) {
|
||||||
|
try FileManager.default.removeItem(at: destinationURL)
|
||||||
|
}
|
||||||
|
|
||||||
|
try FileManager.default.copyItem(at: sourceURL, to: destinationURL)
|
||||||
|
|
||||||
|
let resourceValues = try destinationURL.resourceValues(forKeys: [.contentModificationDateKey])
|
||||||
|
let mimeType = UTType(filenameExtension: destinationURL.pathExtension)?.preferredMIMEType ?? "image/*"
|
||||||
|
let lastModified = Int64((resourceValues.contentModificationDate ?? Date()).timeIntervalSince1970 * 1000)
|
||||||
|
|
||||||
|
return PickedImageFile(
|
||||||
|
path: destinationURL.path,
|
||||||
|
name: destinationURL.lastPathComponent,
|
||||||
|
mimeType: mimeType,
|
||||||
|
lastModified: lastModified
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func pickedFile(from image: UIImage) throws -> PickedImageFile {
|
||||||
|
let stagingDirectory = try createStagingDirectory()
|
||||||
|
let destinationURL = uniqueFileURL(in: stagingDirectory, fileName: "captured-image.jpg")
|
||||||
|
|
||||||
|
guard let data = image.jpegData(compressionQuality: 0.92) else {
|
||||||
|
throw NSError(
|
||||||
|
domain: "ImagePickerPlugin",
|
||||||
|
code: 2,
|
||||||
|
userInfo: [NSLocalizedDescriptionKey: "Failed to encode captured image."]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
try data.write(to: destinationURL, options: .atomic)
|
||||||
|
|
||||||
|
return PickedImageFile(
|
||||||
|
path: destinationURL.path,
|
||||||
|
name: destinationURL.lastPathComponent,
|
||||||
|
mimeType: "image/jpeg",
|
||||||
|
lastModified: Int64(Date().timeIntervalSince1970 * 1000)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private struct ImagePickerSheetAction {
|
||||||
|
let title: String
|
||||||
|
let iconSystemName: String
|
||||||
|
var isEnabled: Bool = true
|
||||||
|
let handler: () -> Void
|
||||||
|
}
|
||||||
|
|
||||||
|
private enum ImagePickerSheetTheme {
|
||||||
|
case dark
|
||||||
|
case light
|
||||||
|
|
||||||
|
var userInterfaceStyle: UIUserInterfaceStyle {
|
||||||
|
switch self {
|
||||||
|
case .dark:
|
||||||
|
return .dark
|
||||||
|
case .light:
|
||||||
|
return .light
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private var traitCollection: UITraitCollection {
|
||||||
|
UITraitCollection(userInterfaceStyle: userInterfaceStyle)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func resolvedColor(_ color: AffineColors) -> UIColor {
|
||||||
|
color.uiColor.resolvedColor(with: traitCollection)
|
||||||
|
}
|
||||||
|
|
||||||
|
var dimmingColor: UIColor {
|
||||||
|
UIColor.black.withAlphaComponent(self == .dark ? 0.44 : 0.18)
|
||||||
|
}
|
||||||
|
|
||||||
|
var backgroundColor: UIColor {
|
||||||
|
resolvedColor(.layerBackgroundPrimary)
|
||||||
|
}
|
||||||
|
|
||||||
|
var secondaryBackgroundColor: UIColor {
|
||||||
|
resolvedColor(.layerBackgroundSecondary)
|
||||||
|
}
|
||||||
|
|
||||||
|
var pressedBackgroundColor: UIColor {
|
||||||
|
resolvedColor(.layerBackgroundSecondary)
|
||||||
|
}
|
||||||
|
|
||||||
|
var borderColor: UIColor {
|
||||||
|
resolvedColor(.layerBorder)
|
||||||
|
}
|
||||||
|
|
||||||
|
var textColor: UIColor {
|
||||||
|
resolvedColor(.textPrimary)
|
||||||
|
}
|
||||||
|
|
||||||
|
var iconColor: UIColor {
|
||||||
|
resolvedColor(.buttonPrimary)
|
||||||
|
}
|
||||||
|
|
||||||
|
var disabledTextColor: UIColor {
|
||||||
|
resolvedColor(.textTertiary)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private final class ImagePickerSourceSheetViewController: UIViewController {
|
||||||
|
private let actions: [ImagePickerSheetAction]
|
||||||
|
private let theme: ImagePickerSheetTheme
|
||||||
|
private let onCancel: () -> Void
|
||||||
|
private let dimmingView = UIView()
|
||||||
|
private let contentStackView = UIStackView()
|
||||||
|
private let actionsContainerView = UIView()
|
||||||
|
private let actionsStackView = UIStackView()
|
||||||
|
private let cancelButton = UIButton(type: .system)
|
||||||
|
private let handleView = UIView()
|
||||||
|
private var separatorViews: [UIView] = []
|
||||||
|
private var hasResolvedCancellation = false
|
||||||
|
private var isDismissingSheet = false
|
||||||
|
|
||||||
|
init(actions: [ImagePickerSheetAction], theme: ImagePickerSheetTheme, onCancel: @escaping () -> Void) {
|
||||||
|
self.actions = actions
|
||||||
|
self.theme = theme
|
||||||
|
self.onCancel = onCancel
|
||||||
|
super.init(nibName: nil, bundle: nil)
|
||||||
|
modalPresentationCapturesStatusBarAppearance = true
|
||||||
|
}
|
||||||
|
|
||||||
|
@available(*, unavailable)
|
||||||
|
required init?(coder: NSCoder) {
|
||||||
|
fatalError("init(coder:) has not been implemented")
|
||||||
|
}
|
||||||
|
|
||||||
|
override func viewDidLoad() {
|
||||||
|
super.viewDidLoad()
|
||||||
|
setupViews()
|
||||||
|
setupConstraints()
|
||||||
|
updateAppearance()
|
||||||
|
}
|
||||||
|
|
||||||
|
override func viewDidAppear(_ animated: Bool) {
|
||||||
|
super.viewDidAppear(animated)
|
||||||
|
animateIn()
|
||||||
|
}
|
||||||
|
|
||||||
|
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
|
||||||
|
super.traitCollectionDidChange(previousTraitCollection)
|
||||||
|
guard traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) else {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
updateAppearance()
|
||||||
|
}
|
||||||
|
|
||||||
|
private func setupViews() {
|
||||||
|
view.backgroundColor = .clear
|
||||||
|
|
||||||
|
dimmingView.alpha = 0
|
||||||
|
dimmingView.addGestureRecognizer(UITapGestureRecognizer(
|
||||||
|
target: self,
|
||||||
|
action: #selector(handleCancelTapped)
|
||||||
|
))
|
||||||
|
view.addSubview(dimmingView)
|
||||||
|
|
||||||
|
contentStackView.axis = .vertical
|
||||||
|
contentStackView.spacing = 12
|
||||||
|
contentStackView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
view.addSubview(contentStackView)
|
||||||
|
|
||||||
|
handleView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
handleView.layer.cornerRadius = 2.5
|
||||||
|
actionsContainerView.addSubview(handleView)
|
||||||
|
|
||||||
|
actionsContainerView.layer.cornerRadius = 20
|
||||||
|
actionsContainerView.clipsToBounds = true
|
||||||
|
actionsContainerView.layer.borderWidth = 1 / UIScreen.main.scale
|
||||||
|
|
||||||
|
actionsStackView.axis = .vertical
|
||||||
|
actionsStackView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
actionsContainerView.addSubview(actionsStackView)
|
||||||
|
|
||||||
|
for (index, action) in actions.enumerated() {
|
||||||
|
let button = ImagePickerActionButton(action: action, theme: theme)
|
||||||
|
button.addTarget(self, action: #selector(handleActionTap(_:)), for: .touchUpInside)
|
||||||
|
button.tag = index
|
||||||
|
actionsStackView.addArrangedSubview(button)
|
||||||
|
|
||||||
|
if index < actions.count - 1 {
|
||||||
|
let separator = UIView()
|
||||||
|
separator.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
separatorViews.append(separator)
|
||||||
|
actionsStackView.addArrangedSubview(separator)
|
||||||
|
separator.heightAnchor.constraint(equalToConstant: 1 / UIScreen.main.scale).isActive = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cancelButton.configuration = .plain()
|
||||||
|
cancelButton.titleLabel?.font = .systemFont(ofSize: 17, weight: .semibold)
|
||||||
|
cancelButton.setTitle("Cancel", for: .normal)
|
||||||
|
cancelButton.layer.cornerRadius = 16
|
||||||
|
cancelButton.layer.borderWidth = 1 / UIScreen.main.scale
|
||||||
|
cancelButton.addTarget(self, action: #selector(handleCancelTapped), for: .touchUpInside)
|
||||||
|
cancelButton.heightAnchor.constraint(equalToConstant: 56).isActive = true
|
||||||
|
|
||||||
|
contentStackView.addArrangedSubview(actionsContainerView)
|
||||||
|
contentStackView.addArrangedSubview(cancelButton)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func setupConstraints() {
|
||||||
|
dimmingView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
NSLayoutConstraint.activate([
|
||||||
|
dimmingView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
|
||||||
|
dimmingView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
|
||||||
|
dimmingView.topAnchor.constraint(equalTo: view.topAnchor),
|
||||||
|
dimmingView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
|
||||||
|
|
||||||
|
contentStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 12),
|
||||||
|
contentStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -12),
|
||||||
|
contentStackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -8),
|
||||||
|
|
||||||
|
handleView.topAnchor.constraint(equalTo: actionsContainerView.topAnchor, constant: 8),
|
||||||
|
handleView.centerXAnchor.constraint(equalTo: actionsContainerView.centerXAnchor),
|
||||||
|
handleView.widthAnchor.constraint(equalToConstant: 36),
|
||||||
|
handleView.heightAnchor.constraint(equalToConstant: 5),
|
||||||
|
|
||||||
|
actionsStackView.leadingAnchor.constraint(equalTo: actionsContainerView.leadingAnchor),
|
||||||
|
actionsStackView.trailingAnchor.constraint(equalTo: actionsContainerView.trailingAnchor),
|
||||||
|
actionsStackView.topAnchor.constraint(equalTo: handleView.bottomAnchor, constant: 12),
|
||||||
|
actionsStackView.bottomAnchor.constraint(equalTo: actionsContainerView.bottomAnchor, constant: -8),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
private func updateAppearance() {
|
||||||
|
dimmingView.backgroundColor = theme.dimmingColor
|
||||||
|
actionsContainerView.backgroundColor = theme.backgroundColor
|
||||||
|
actionsContainerView.layer.borderColor = theme.borderColor.cgColor
|
||||||
|
handleView.backgroundColor = theme.borderColor
|
||||||
|
|
||||||
|
separatorViews.forEach { $0.backgroundColor = theme.borderColor }
|
||||||
|
|
||||||
|
cancelButton.backgroundColor = theme.backgroundColor
|
||||||
|
cancelButton.layer.borderColor = theme.borderColor.cgColor
|
||||||
|
cancelButton.setTitleColor(theme.textColor, for: .normal)
|
||||||
|
}
|
||||||
|
|
||||||
|
private func animateIn() {
|
||||||
|
contentStackView.transform = CGAffineTransform(translationX: 0, y: 24)
|
||||||
|
contentStackView.alpha = 0
|
||||||
|
|
||||||
|
UIView.animate(withDuration: 0.24, delay: 0, options: [.curveEaseOut]) {
|
||||||
|
self.dimmingView.alpha = 1
|
||||||
|
self.contentStackView.alpha = 1
|
||||||
|
self.contentStackView.transform = .identity
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private func dismissSheet(resolveCancellation: Bool = false, completion: (() -> Void)? = nil) {
|
||||||
|
guard !isDismissingSheet else { return }
|
||||||
|
isDismissingSheet = true
|
||||||
|
|
||||||
|
UIView.animate(withDuration: 0.2, delay: 0, options: [.curveEaseIn]) {
|
||||||
|
self.dimmingView.alpha = 0
|
||||||
|
self.contentStackView.alpha = 0
|
||||||
|
self.contentStackView.transform = CGAffineTransform(translationX: 0, y: 24)
|
||||||
|
} completion: { _ in
|
||||||
|
self.dismiss(animated: false) {
|
||||||
|
if resolveCancellation, !self.hasResolvedCancellation {
|
||||||
|
self.hasResolvedCancellation = true
|
||||||
|
self.onCancel()
|
||||||
|
}
|
||||||
|
completion?()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@objc private func handleCancelTapped() {
|
||||||
|
dismissSheet(resolveCancellation: true)
|
||||||
|
}
|
||||||
|
|
||||||
|
@objc private func handleActionTap(_ sender: UIButton) {
|
||||||
|
let action = actions[sender.tag]
|
||||||
|
guard action.isEnabled else { return }
|
||||||
|
|
||||||
|
dismissSheet {
|
||||||
|
action.handler()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private final class ImagePickerActionButton: UIButton {
|
||||||
|
private let iconContainerView = UIView()
|
||||||
|
private let iconView = UIImageView()
|
||||||
|
private let titleLabelView = UILabel()
|
||||||
|
private let isActionEnabled: Bool
|
||||||
|
private let theme: ImagePickerSheetTheme
|
||||||
|
|
||||||
|
init(action: ImagePickerSheetAction, theme: ImagePickerSheetTheme) {
|
||||||
|
isActionEnabled = action.isEnabled
|
||||||
|
self.theme = theme
|
||||||
|
super.init(frame: .zero)
|
||||||
|
|
||||||
|
translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
heightAnchor.constraint(equalToConstant: 56).isActive = true
|
||||||
|
contentHorizontalAlignment = .fill
|
||||||
|
contentVerticalAlignment = .fill
|
||||||
|
|
||||||
|
iconContainerView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
iconContainerView.layer.cornerRadius = 16
|
||||||
|
addSubview(iconContainerView)
|
||||||
|
|
||||||
|
iconView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
iconView.contentMode = .scaleAspectFit
|
||||||
|
iconView.preferredSymbolConfiguration = UIImage.SymbolConfiguration(pointSize: 16, weight: .semibold)
|
||||||
|
iconView.image = UIImage(systemName: action.iconSystemName)
|
||||||
|
iconContainerView.addSubview(iconView)
|
||||||
|
|
||||||
|
titleLabelView.translatesAutoresizingMaskIntoConstraints = false
|
||||||
|
titleLabelView.font = .systemFont(ofSize: 17, weight: .medium)
|
||||||
|
titleLabelView.text = action.title
|
||||||
|
addSubview(titleLabelView)
|
||||||
|
|
||||||
|
NSLayoutConstraint.activate([
|
||||||
|
iconContainerView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
|
||||||
|
iconContainerView.centerYAnchor.constraint(equalTo: centerYAnchor),
|
||||||
|
iconContainerView.widthAnchor.constraint(equalToConstant: 32),
|
||||||
|
iconContainerView.heightAnchor.constraint(equalToConstant: 32),
|
||||||
|
|
||||||
|
iconView.centerXAnchor.constraint(equalTo: iconContainerView.centerXAnchor),
|
||||||
|
iconView.centerYAnchor.constraint(equalTo: iconContainerView.centerYAnchor),
|
||||||
|
|
||||||
|
titleLabelView.leadingAnchor.constraint(equalTo: iconContainerView.trailingAnchor, constant: 12),
|
||||||
|
titleLabelView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
|
||||||
|
titleLabelView.centerYAnchor.constraint(equalTo: centerYAnchor),
|
||||||
|
])
|
||||||
|
|
||||||
|
isEnabled = action.isEnabled
|
||||||
|
updateAppearance()
|
||||||
|
}
|
||||||
|
|
||||||
|
@available(*, unavailable)
|
||||||
|
required init?(coder: NSCoder) {
|
||||||
|
fatalError("init(coder:) has not been implemented")
|
||||||
|
}
|
||||||
|
|
||||||
|
override var isHighlighted: Bool {
|
||||||
|
didSet {
|
||||||
|
guard isEnabled else { return }
|
||||||
|
backgroundColor = isHighlighted ? theme.pressedBackgroundColor : .clear
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private func updateAppearance() {
|
||||||
|
backgroundColor = .clear
|
||||||
|
iconContainerView.backgroundColor = theme.secondaryBackgroundColor
|
||||||
|
|
||||||
|
if isActionEnabled {
|
||||||
|
iconView.tintColor = theme.iconColor
|
||||||
|
titleLabelView.textColor = theme.textColor
|
||||||
|
} else {
|
||||||
|
iconView.tintColor = theme.disabledTextColor
|
||||||
|
titleLabelView.textColor = theme.disabledTextColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
extension ImagePickerPlugin: PHPickerViewControllerDelegate {
|
||||||
|
public func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
|
||||||
|
picker.dismiss(animated: true)
|
||||||
|
|
||||||
|
guard !results.isEmpty else {
|
||||||
|
resolvePendingCall(files: [], canceled: true)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let group = DispatchGroup()
|
||||||
|
let lock = NSLock()
|
||||||
|
var pickedFiles = Array<PickedImageFile?>(repeating: nil, count: results.count)
|
||||||
|
var pickedError: Error?
|
||||||
|
|
||||||
|
for (index, result) in results.enumerated() {
|
||||||
|
let itemProvider = result.itemProvider
|
||||||
|
guard itemProvider.hasItemConformingToTypeIdentifier(UTType.image.identifier) else {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
group.enter()
|
||||||
|
itemProvider.loadFileRepresentation(forTypeIdentifier: UTType.image.identifier) { [weak self] url, error in
|
||||||
|
defer { group.leave() }
|
||||||
|
guard let self else { return }
|
||||||
|
|
||||||
|
if let error {
|
||||||
|
lock.lock()
|
||||||
|
pickedError = pickedError ?? error
|
||||||
|
lock.unlock()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
guard let url else {
|
||||||
|
lock.lock()
|
||||||
|
pickedError = pickedError ?? NSError(
|
||||||
|
domain: "ImagePickerPlugin",
|
||||||
|
code: 3,
|
||||||
|
userInfo: [NSLocalizedDescriptionKey: "No image URL returned from photo library."]
|
||||||
|
)
|
||||||
|
lock.unlock()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
do {
|
||||||
|
let file = try self.pickedFile(from: url, suggestedName: itemProvider.suggestedName)
|
||||||
|
lock.lock()
|
||||||
|
pickedFiles[index] = file
|
||||||
|
lock.unlock()
|
||||||
|
} catch {
|
||||||
|
lock.lock()
|
||||||
|
pickedError = pickedError ?? error
|
||||||
|
lock.unlock()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
group.notify(queue: .main) {
|
||||||
|
if let pickedError {
|
||||||
|
self.rejectPendingCall(message: "Failed to load selected images.", error: pickedError)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
self.resolvePendingCall(
|
||||||
|
files: pickedFiles.compactMap { $0 },
|
||||||
|
canceled: false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
extension ImagePickerPlugin: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
|
||||||
|
public func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
|
||||||
|
picker.dismiss(animated: true)
|
||||||
|
resolvePendingCall(files: [], canceled: true)
|
||||||
|
}
|
||||||
|
|
||||||
|
public func imagePickerController(
|
||||||
|
_ picker: UIImagePickerController,
|
||||||
|
didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]
|
||||||
|
) {
|
||||||
|
picker.dismiss(animated: true)
|
||||||
|
|
||||||
|
do {
|
||||||
|
guard let image = info[.originalImage] as? UIImage else {
|
||||||
|
throw NSError(
|
||||||
|
domain: "ImagePickerPlugin",
|
||||||
|
code: 4,
|
||||||
|
userInfo: [NSLocalizedDescriptionKey: "No captured image returned from camera."]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
let file = try pickedFile(from: image)
|
||||||
|
resolvePendingCall(files: [file], canceled: false)
|
||||||
|
} catch {
|
||||||
|
rejectPendingCall(message: "Failed to process captured image.", error: error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
extension ImagePickerPlugin: UIDocumentPickerDelegate {
|
||||||
|
public func documentPicker(_ controller: UIDocumentPickerViewController, didPickDocumentsAt urls: [URL]) {
|
||||||
|
do {
|
||||||
|
let files = try urls.compactMap { url -> PickedImageFile? in
|
||||||
|
guard url.startAccessingSecurityScopedResource() else {
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
defer { url.stopAccessingSecurityScopedResource() }
|
||||||
|
return try pickedFile(from: url)
|
||||||
|
}
|
||||||
|
resolvePendingCall(files: files, canceled: false)
|
||||||
|
} catch {
|
||||||
|
rejectPendingCall(message: "Failed to import selected files.", error: error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public func documentPickerWasCancelled(_ controller: UIDocumentPickerViewController) {
|
||||||
|
resolvePendingCall(files: [], canceled: true)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -21,7 +21,7 @@ let package = Package(
|
|||||||
.package(url: "https://github.com/SnapKit/SnapKit.git", from: "5.7.1"),
|
.package(url: "https://github.com/SnapKit/SnapKit.git", from: "5.7.1"),
|
||||||
.package(url: "https://github.com/SwifterSwift/SwifterSwift.git", from: "6.2.0"),
|
.package(url: "https://github.com/SwifterSwift/SwifterSwift.git", from: "6.2.0"),
|
||||||
.package(url: "https://github.com/Recouse/EventSource.git", from: "0.1.8"),
|
.package(url: "https://github.com/Recouse/EventSource.git", from: "0.1.8"),
|
||||||
.package(url: "https://github.com/Lakr233/ListViewKit.git", from: "1.2.0"),
|
.package(url: "https://github.com/Lakr233/ListViewKit.git", .upToNextMinor(from: "1.1.6")),
|
||||||
.package(url: "https://github.com/Lakr233/MarkdownView.git", from: "3.9.1"),
|
.package(url: "https://github.com/Lakr233/MarkdownView.git", from: "3.9.1"),
|
||||||
],
|
],
|
||||||
targets: [
|
targets: [
|
||||||
|
|||||||
@@ -54,9 +54,11 @@ import {
|
|||||||
MarkdownAdapter,
|
MarkdownAdapter,
|
||||||
titleMiddleware,
|
titleMiddleware,
|
||||||
} from '@blocksuite/affine/shared/adapters';
|
} from '@blocksuite/affine/shared/adapters';
|
||||||
|
import { registerNativeImageFilesPicker } from '@blocksuite/affine/shared/utils';
|
||||||
import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
|
import { MarkdownTransformer } from '@blocksuite/affine/widgets/linked-doc';
|
||||||
import { App as CapacitorApp } from '@capacitor/app';
|
import { App as CapacitorApp } from '@capacitor/app';
|
||||||
import { Browser } from '@capacitor/browser';
|
import { Browser } from '@capacitor/browser';
|
||||||
|
import { Capacitor } from '@capacitor/core';
|
||||||
import { Haptics } from '@capacitor/haptics';
|
import { Haptics } from '@capacitor/haptics';
|
||||||
import { Keyboard, KeyboardStyle } from '@capacitor/keyboard';
|
import { Keyboard, KeyboardStyle } from '@capacitor/keyboard';
|
||||||
import { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
|
import { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
|
||||||
@@ -69,8 +71,10 @@ import { RouterProvider } from 'react-router-dom';
|
|||||||
|
|
||||||
import { BlocksuiteMenuConfigProvider } from './bs-menu-config';
|
import { BlocksuiteMenuConfigProvider } from './bs-menu-config';
|
||||||
import { ModalConfigProvider } from './modal-config';
|
import { ModalConfigProvider } from './modal-config';
|
||||||
|
import { AffineTheme } from './plugins/affine-theme';
|
||||||
import { Auth } from './plugins/auth';
|
import { Auth } from './plugins/auth';
|
||||||
import { Hashcash } from './plugins/hashcash';
|
import { Hashcash } from './plugins/hashcash';
|
||||||
|
import { ImagePicker } from './plugins/image-picker';
|
||||||
import { NbStoreNativeDBApis } from './plugins/nbstore';
|
import { NbStoreNativeDBApis } from './plugins/nbstore';
|
||||||
import { PayWall } from './plugins/paywall';
|
import { PayWall } from './plugins/paywall';
|
||||||
import { Preview } from './plugins/preview';
|
import { Preview } from './plugins/preview';
|
||||||
@@ -237,6 +241,39 @@ registerNativePreviewHandlers({
|
|||||||
renderMermaidSvg: request => Preview.renderMermaidSvg(request),
|
renderMermaidSvg: request => Preview.renderMermaidSvg(request),
|
||||||
renderTypstSvg: request => Preview.renderTypstSvg(request),
|
renderTypstSvg: request => Preview.renderTypstSvg(request),
|
||||||
});
|
});
|
||||||
|
registerNativeImageFilesPicker(async () => {
|
||||||
|
const result = await ImagePicker.pickImages({ multiple: true });
|
||||||
|
if (result.canceled || result.files.length === 0) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const settled = await Promise.allSettled(
|
||||||
|
result.files.map(async file => {
|
||||||
|
const filePath = file.path.startsWith('file://')
|
||||||
|
? file.path
|
||||||
|
: `file://${file.path}`;
|
||||||
|
const response = await fetch(Capacitor.convertFileSrc(filePath));
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(
|
||||||
|
`Failed to read image picker file: ${file.name} (status ${response.status})`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
return new File([blob], file.name, {
|
||||||
|
type: file.mimeType || blob.type || 'image/*',
|
||||||
|
lastModified: file.lastModified,
|
||||||
|
});
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return settled
|
||||||
|
.filter(
|
||||||
|
(settledResult): settledResult is PromiseFulfilledResult<File> =>
|
||||||
|
settledResult.status === 'fulfilled'
|
||||||
|
)
|
||||||
|
.map(settledResult => settledResult.value);
|
||||||
|
});
|
||||||
|
|
||||||
// ------ some apis for native ------
|
// ------ some apis for native ------
|
||||||
(window as any).getCurrentServerBaseUrl = () => {
|
(window as any).getCurrentServerBaseUrl = () => {
|
||||||
@@ -252,6 +289,9 @@ registerNativePreviewHandlers({
|
|||||||
(window as any).getCurrentI18nLocale = () => {
|
(window as any).getCurrentI18nLocale = () => {
|
||||||
return I18n.language;
|
return I18n.language;
|
||||||
};
|
};
|
||||||
|
(window as any).getCurrentThemeMode = () => {
|
||||||
|
return 'system';
|
||||||
|
};
|
||||||
(window as any).getAiButtonFeatureFlag = () => {
|
(window as any).getAiButtonFeatureFlag = () => {
|
||||||
const featureFlagService = frameworkProvider.get(FeatureFlagService);
|
const featureFlagService = frameworkProvider.get(FeatureFlagService);
|
||||||
return featureFlagService.flags.enable_mobile_ai_button.value;
|
return featureFlagService.flags.enable_mobile_ai_button.value;
|
||||||
@@ -522,6 +562,18 @@ const KeyboardThemeProvider = () => {
|
|||||||
});
|
});
|
||||||
}, [resolvedTheme]);
|
}, [resolvedTheme]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const themeMode = resolvedTheme === 'dark' ? 'dark' : 'light';
|
||||||
|
(window as any).getCurrentThemeMode = () => {
|
||||||
|
return themeMode;
|
||||||
|
};
|
||||||
|
AffineTheme.onThemeChanged({
|
||||||
|
themeMode,
|
||||||
|
}).catch(e => {
|
||||||
|
console.error(`Failed to sync app theme: ${e}`);
|
||||||
|
});
|
||||||
|
}, [resolvedTheme]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import type { NativeThemeMode } from './theme-mode';
|
||||||
|
|
||||||
|
export interface AffineThemePlugin {
|
||||||
|
onThemeChanged(options: { themeMode: NativeThemeMode }): Promise<void>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { registerPlugin } from '@capacitor/core';
|
||||||
|
|
||||||
|
import type { AffineThemePlugin } from './definitions';
|
||||||
|
|
||||||
|
const AffineTheme = registerPlugin<AffineThemePlugin>('AffineTheme');
|
||||||
|
|
||||||
|
export * from './definitions';
|
||||||
|
export * from './theme-mode';
|
||||||
|
export { AffineTheme };
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export type NativeThemeMode = 'dark' | 'light' | 'system';
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
export interface PickedImageFile {
|
||||||
|
path: string;
|
||||||
|
name: string;
|
||||||
|
mimeType: string;
|
||||||
|
lastModified: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImagePickerPlugin {
|
||||||
|
pickImages(options?: { multiple?: boolean }): Promise<{
|
||||||
|
files: PickedImageFile[];
|
||||||
|
canceled?: boolean;
|
||||||
|
}>;
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { registerPlugin } from '@capacitor/core';
|
||||||
|
|
||||||
|
import type { ImagePickerPlugin } from './definitions';
|
||||||
|
|
||||||
|
const ImagePicker = registerPlugin<ImagePickerPlugin>('ImagePicker');
|
||||||
|
|
||||||
|
export * from './definitions';
|
||||||
|
export { ImagePicker };
|
||||||
Reference in New Issue
Block a user