be6d1dfb66
* Add 'placement' property * Extract logic for moving text node into instance method ... so that it can be used elsewhere. * Add writable store to indicate whether composition session is active * Work around issue with entering text around MathJax via IME * Make get() called only once while composition session is active
356 lines
10 KiB
TypeScript
356 lines
10 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
import { getSelection, isSelectionCollapsed } from "@tslib/cross-browser";
|
|
import { elementIsEmpty, nodeIsElement, nodeIsText } from "@tslib/dom";
|
|
import { on } from "@tslib/events";
|
|
import type { Unsubscriber } from "svelte/store";
|
|
import { get } from "svelte/store";
|
|
|
|
import { moveChildOutOfElement } from "../domlib/move-nodes";
|
|
import { placeCaretAfter } from "../domlib/place-caret";
|
|
import { isComposing } from "../sveltelib/composition";
|
|
import type { FrameElement } from "./frame-element";
|
|
|
|
/**
|
|
* The frame handle also needs some awareness that it's hosted below
|
|
* the frame
|
|
*/
|
|
export const frameElementTagName = "anki-frame";
|
|
|
|
/**
|
|
* I originally used a zero width space, however, in contentEditable, if
|
|
* a line ends in a zero width space, and you click _after_ the line,
|
|
* the caret will be placed _before_ the zero width space.
|
|
* Instead I use a hairline space.
|
|
*/
|
|
const spaceCharacter = "\u200a";
|
|
const spaceRegex = /[\u200a]/g;
|
|
|
|
export function isFrameHandle(node: unknown): node is FrameHandle {
|
|
return node instanceof FrameHandle;
|
|
}
|
|
|
|
function skippableNode(handleElement: FrameHandle, node: Node): boolean {
|
|
/**
|
|
* We only want to move nodes, which are direct descendants of the FrameHandle
|
|
* MutationRecords however might include nodes which were directly removed again
|
|
*/
|
|
return (
|
|
(nodeIsText(node)
|
|
&& (node.data === spaceCharacter || node.data.length === 0))
|
|
|| !Array.prototype.includes.call(handleElement.childNodes, node)
|
|
);
|
|
}
|
|
|
|
function restoreHandleContent(mutations: MutationRecord[]): void {
|
|
let referenceNode: Node | null = null;
|
|
|
|
for (const mutation of mutations) {
|
|
const target = mutation.target;
|
|
|
|
if (mutation.type === "childList") {
|
|
if (!isFrameHandle(target)) {
|
|
/* nested insertion */
|
|
continue;
|
|
}
|
|
|
|
const handleElement = target;
|
|
const frameElement = handleElement.parentElement as FrameElement;
|
|
|
|
for (const node of mutation.addedNodes) {
|
|
if (skippableNode(handleElement, node)) {
|
|
continue;
|
|
}
|
|
|
|
if (
|
|
nodeIsElement(node)
|
|
&& !elementIsEmpty(node)
|
|
&& (node.textContent === spaceCharacter
|
|
|| node.textContent?.length === 0)
|
|
) {
|
|
/**
|
|
* When we surround the spaceCharacter of the frame handle
|
|
*/
|
|
node.replaceWith(new Text(spaceCharacter));
|
|
} else {
|
|
referenceNode = moveChildOutOfElement(
|
|
frameElement,
|
|
node,
|
|
handleElement.placement,
|
|
);
|
|
}
|
|
}
|
|
} else if (mutation.type === "characterData") {
|
|
if (
|
|
!nodeIsText(target)
|
|
|| !isFrameHandle(target.parentElement)
|
|
|| skippableNode(target.parentElement, target)
|
|
|| target.parentElement.unsubscribe
|
|
) {
|
|
continue;
|
|
}
|
|
if (get(isComposing)) {
|
|
target.parentElement.subscribeToCompositionEvent();
|
|
continue;
|
|
}
|
|
|
|
referenceNode = target.parentElement.moveTextOutOfFrame();
|
|
}
|
|
}
|
|
|
|
if (referenceNode) {
|
|
placeCaretAfter(referenceNode);
|
|
}
|
|
}
|
|
|
|
const handleObserver = new MutationObserver(restoreHandleContent);
|
|
const handles: Set<FrameHandle> = new Set();
|
|
|
|
type Placement = Extract<InsertPosition, "beforebegin" | "afterend">;
|
|
|
|
export abstract class FrameHandle extends HTMLElement {
|
|
static get observedAttributes(): string[] {
|
|
return ["data-frames"];
|
|
}
|
|
|
|
/**
|
|
* When a deletion is trigger with a FrameHandle selected, it will be treated
|
|
* differently depending on whether it is selected:
|
|
* - If partially selected, it should be restored (unless the frame element
|
|
* is also selected).
|
|
* - Otherwise, it should be deleted along with the frame element.
|
|
*/
|
|
partiallySelected = false;
|
|
frames?: string;
|
|
abstract placement: Placement;
|
|
unsubscribe: Unsubscriber | null;
|
|
|
|
constructor() {
|
|
super();
|
|
handleObserver.observe(this, {
|
|
childList: true,
|
|
subtree: true,
|
|
characterData: true,
|
|
});
|
|
this.unsubscribe = null;
|
|
}
|
|
|
|
attributeChangedCallback(name: string, old: string, newValue: string): void {
|
|
if (newValue === old) {
|
|
return;
|
|
}
|
|
|
|
switch (name) {
|
|
case "data-frames":
|
|
this.frames = newValue;
|
|
break;
|
|
}
|
|
}
|
|
|
|
abstract getFrameRange(): Range;
|
|
|
|
invalidSpace(): boolean {
|
|
return (
|
|
!this.firstChild
|
|
|| !(nodeIsText(this.firstChild) && this.firstChild.data === spaceCharacter)
|
|
);
|
|
}
|
|
|
|
refreshSpace(): void {
|
|
while (this.firstChild) {
|
|
this.removeChild(this.firstChild);
|
|
}
|
|
|
|
this.append(new Text(spaceCharacter));
|
|
}
|
|
|
|
hostedUnderFrame(): boolean {
|
|
return this.parentElement!.tagName === frameElementTagName.toUpperCase();
|
|
}
|
|
|
|
connectedCallback(): void {
|
|
if (this.invalidSpace()) {
|
|
this.refreshSpace();
|
|
}
|
|
|
|
if (!this.hostedUnderFrame()) {
|
|
const range = this.getFrameRange();
|
|
|
|
const frameElement = document.createElement(
|
|
frameElementTagName,
|
|
) as FrameElement;
|
|
frameElement.dataset.frames = this.frames;
|
|
|
|
range.surroundContents(frameElement);
|
|
}
|
|
|
|
handles.add(this);
|
|
}
|
|
|
|
removeMoveIn?: () => void;
|
|
|
|
disconnectedCallback(): void {
|
|
handles.delete(this);
|
|
|
|
this.removeMoveIn?.();
|
|
this.removeMoveIn = undefined;
|
|
this.unsubscribeToCompositionEvent();
|
|
}
|
|
|
|
abstract notifyMoveIn(offset: number): void;
|
|
|
|
moveTextOutOfFrame(): Text {
|
|
const frameElement = this.parentElement! as FrameElement;
|
|
const cleaned = this.innerHTML.replace(spaceRegex, "");
|
|
const text = new Text(cleaned);
|
|
|
|
if (this.placement === "beforebegin") {
|
|
frameElement.before(text);
|
|
} else if (this.placement === "afterend") {
|
|
frameElement.after(text);
|
|
}
|
|
this.refreshSpace();
|
|
return text;
|
|
}
|
|
|
|
/**
|
|
* https://github.com/ankitects/anki/issues/2251
|
|
*
|
|
* Work around the issue by not moving the input string while an IME session
|
|
* is active, and moving the final output from IME only after the session ends.
|
|
*/
|
|
subscribeToCompositionEvent(): void {
|
|
this.unsubscribe = isComposing.subscribe((composing) => {
|
|
if (!composing) {
|
|
placeCaretAfter(this.moveTextOutOfFrame());
|
|
this.unsubscribeToCompositionEvent();
|
|
}
|
|
});
|
|
}
|
|
|
|
unsubscribeToCompositionEvent(): void {
|
|
this.unsubscribe?.();
|
|
this.unsubscribe = null;
|
|
}
|
|
}
|
|
|
|
export class FrameStart extends FrameHandle {
|
|
static tagName = "frame-start";
|
|
placement: Placement;
|
|
|
|
constructor() {
|
|
super();
|
|
this.placement = "beforebegin";
|
|
}
|
|
|
|
getFrameRange(): Range {
|
|
const range = new Range();
|
|
range.setStartBefore(this);
|
|
|
|
const maybeFramed = this.nextElementSibling;
|
|
|
|
if (maybeFramed?.matches(this.frames ?? ":not(*)")) {
|
|
const maybeHandleEnd = maybeFramed.nextElementSibling;
|
|
|
|
range.setEndAfter(
|
|
maybeHandleEnd?.tagName.toLowerCase() === FrameStart.tagName
|
|
? maybeHandleEnd
|
|
: maybeFramed,
|
|
);
|
|
} else {
|
|
range.setEndAfter(this);
|
|
}
|
|
|
|
return range;
|
|
}
|
|
|
|
notifyMoveIn(offset: number): void {
|
|
if (offset === 1) {
|
|
this.dispatchEvent(new Event("movein"));
|
|
}
|
|
}
|
|
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
|
|
this.removeMoveIn = on(
|
|
this,
|
|
"movein" as keyof HTMLElementEventMap,
|
|
() => this.parentElement?.dispatchEvent(new Event("moveinstart")),
|
|
);
|
|
}
|
|
}
|
|
|
|
export class FrameEnd extends FrameHandle {
|
|
static tagName = "frame-end";
|
|
placement: Placement;
|
|
|
|
constructor() {
|
|
super();
|
|
this.placement = "afterend";
|
|
}
|
|
|
|
getFrameRange(): Range {
|
|
const range = new Range();
|
|
range.setEndAfter(this);
|
|
|
|
const maybeFramed = this.previousElementSibling;
|
|
|
|
if (maybeFramed?.matches(this.frames ?? ":not(*)")) {
|
|
const maybeHandleStart = maybeFramed.previousElementSibling;
|
|
|
|
range.setEndAfter(
|
|
maybeHandleStart?.tagName.toLowerCase() === FrameEnd.tagName
|
|
? maybeHandleStart
|
|
: maybeFramed,
|
|
);
|
|
} else {
|
|
range.setStartBefore(this);
|
|
}
|
|
|
|
return range;
|
|
}
|
|
|
|
notifyMoveIn(offset: number): void {
|
|
if (offset === 0) {
|
|
this.dispatchEvent(new Event("movein"));
|
|
}
|
|
}
|
|
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
|
|
this.removeMoveIn = on(
|
|
this,
|
|
"movein" as keyof HTMLElementEventMap,
|
|
() => this.parentElement?.dispatchEvent(new Event("moveinend")),
|
|
);
|
|
}
|
|
}
|
|
|
|
function checkWhetherMovingIntoHandle(selection: Selection, handle: FrameHandle): void {
|
|
if (selection.anchorNode === handle.firstChild && isSelectionCollapsed(selection)) {
|
|
handle.notifyMoveIn(selection.anchorOffset);
|
|
}
|
|
}
|
|
|
|
function checkWhetherSelectingHandle(selection: Selection, handle: FrameHandle): void {
|
|
handle.partiallySelected = handle.firstChild && !isSelectionCollapsed(selection)
|
|
? selection.containsNode(handle.firstChild)
|
|
: false;
|
|
}
|
|
|
|
export function checkHandles(): void {
|
|
for (const handle of handles) {
|
|
const selection = getSelection(handle)!;
|
|
|
|
if (selection.rangeCount === 0) {
|
|
continue;
|
|
}
|
|
|
|
checkWhetherMovingIntoHandle(selection, handle);
|
|
checkWhetherSelectingHandle(selection, handle);
|
|
}
|
|
}
|