- First
- Second
"); // expect(surroundedRange.toString()).toEqual("12"); }); @@ -281,14 +220,8 @@ describe("surround complicated nested structure", () => { range.setStartBefore(body.firstElementChild!.firstChild!); range.setEndAfter(body.lastElementChild!.firstChild!); - const { addedNodes, removedNodes, surroundedRange } = surround( - range, - document.createElement("b"), - body, - ); + const surroundedRange = surround(range, body, easyBold); - expect(addedNodes).toHaveLength(1); - expect(removedNodes).toHaveLength(1); expect(body).toHaveProperty( "innerHTML", "12345", @@ -310,14 +243,8 @@ describe("skips over empty elements", () => { range.setStartBefore(body.firstChild!); range.setEndAfter(body.childNodes[2]!); - const { addedNodes, removedNodes, surroundedRange } = surround( - range, - document.createElement("b"), - body, - ); + const surroundedRange = surround(range, body, easyBold); - expect(addedNodes).toHaveLength(1); - expect(removedNodes).toHaveLength(0); expect(body).toHaveProperty("innerHTML", "before
after"); expect(surroundedRange.toString()).toEqual("beforeafter"); }); @@ -334,32 +261,93 @@ describe("skips over empty elements", () => { const range = new Range(); range.selectNode(body.firstChild!); - const { addedNodes, removedNodes, surroundedRange } = surround( - range, - document.createElement("b"), - body, - ); + surround(range, body, easyBold); - expect(addedNodes).toHaveLength(1); - expect(removedNodes).toHaveLength(1); expect(body).toHaveProperty("innerHTML", "before
after"); - expect(surroundedRange.toString()).toEqual("before"); + // expect(surroundedRange.toString()).toEqual("before"); }); test("normalize node contents", () => { const range = new Range(); range.selectNodeContents(body.firstChild!); - const { addedNodes, removedNodes, surroundedRange } = surround( - range, - document.createElement("b"), - body, - ); + const surroundedRange = surround(range, body, easyBold); - expect(addedNodes).toHaveLength(1); - expect(removedNodes).toHaveLength(1); expect(body).toHaveProperty("innerHTML", "before
after"); expect(surroundedRange.toString()).toEqual("before"); }); }); }); + +// TODO +// describe("special cases when surrounding within range.commonAncestor", () => { +// // these are not vital but rather define how the algorithm works in edge cases + +// test("does not normalize beyond level of contained text nodes", () => { +// const body = p("beforenestedafter"); +// const range = new Range(); +// range.selectNode(body.firstChild!.childNodes[1].firstChild!); + +// const { addedNodes, removedNodes, surroundedRange } = surround( +// range, +// body, +// easyBold, +// ); + +// expect(addedNodes).toHaveLength(1); +// expect(removedNodes).toHaveLength(0); +// expect(body).toHaveProperty( +// "innerHTML", +// "beforenestedafter", +// ); +// expect(surroundedRange.toString()).toEqual("nested"); +// }); + +// test("does not normalize beyond level of contained text nodes 2", () => { +// const body = p("aaabbbccc"); +// const range = new Range(); +// range.setStartBefore(body.firstChild!.firstChild!); +// range.setEndAfter(body.firstChild!.childNodes[1].firstChild!); + +// const { addedNodes, removedNodes } = surround(range, body, easyBold); + +// expect(body).toHaveProperty("innerHTML", "aaabbbccc"); +// expect(addedNodes).toHaveLength(1); +// expect(removedNodes).toHaveLength(2); +// // expect(surroundedRange.toString()).toEqual("aaabbb"); // is aaabbbccc instead +// }); + +// test("does normalize beyond level of contained text nodes", () => { +// const body = p("aaabbbccc"); +// const range = new Range(); +// range.setStartBefore(body.firstChild!.childNodes[1].firstChild!.firstChild!); +// range.setEndAfter(body.firstChild!.childNodes[1].childNodes[1].firstChild!); + +// const { addedNodes, removedNodes } = surround(range, body, easyBold); + +// expect(body).toHaveProperty("innerHTML", "aaabbbccc"); +// expect(addedNodes).toHaveLength(1); +// expect(removedNodes).toHaveLength(4); +// // expect(surroundedRange.toString()).toEqual("aaabbb"); // is aaabbbccc instead +// }); + +// test("does remove even if there is already equivalent surrounding in place", () => { +// const body = p("beforenestedafter"); +// const range = new Range(); +// range.selectNode(body.firstChild!.childNodes[1].firstChild!.firstChild!); + +// const { addedNodes, removedNodes, surroundedRange } = surround( +// range, +// body, +// easyBold, +// ); + +// expect(addedNodes).toHaveLength(1); +// expect(removedNodes).toHaveLength(1); +// expect(body).toHaveProperty( +// "innerHTML", +// "beforenestedafter", +// ); +// expect(surroundedRange.toString()).toEqual("nested"); +// }); +// }); diff --git a/ts/domlib/surround/surround.ts b/ts/domlib/surround/surround.ts new file mode 100644 index 000000000..781083b88 --- /dev/null +++ b/ts/domlib/surround/surround.ts @@ -0,0 +1,91 @@ +// Copyright: Ankitects Pty Ltd and contributors +// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html + +import type { Matcher } from "../find-above"; +import { findFarthest } from "../find-above"; +import { + apply, + ApplyFormat, + ReformatApplyFormat, + UnsurroundApplyFormat, +} from "./apply"; +import { + build, + BuildFormat, + ReformatBuildFormat, + UnsurroundBuildFormat, +} from "./build"; +import { boolMatcher } from "./match-type"; +import { splitPartiallySelected } from "./split-text"; +import type { SurroundFormat } from "./surround-format"; + +function surroundInner
after` into
+ * `beforeafter` (negligible nodes inbetween).
+ */
+ static merge` into `inside
+ */
+ ascendAbove(elementNode: ElementNode): void {
+ this.range.select(elementNode.element);
+ this.extensions.push(elementNode.element as HTMLElement | SVGElement);
+
+ if (!this.hasChildren()) {
+ // Drop elementNode, as it has no effect
+ return;
+ }
+
+ elementNode.replaceChildren(...this.replaceChildren(elementNode));
+ }
+
+ /**
+ * Extending only makes sense, if it is following by a FormattingNode
+ * ascending above it.
+ * Which is why if the match node is not ascendable, we might as well
+ * stop extending.
+ *
+ * @returns Whether formatting node ascended at least one level
+ */
+ getExtension(): ElementNode | null {
+ const node = this.range.parent;
+
+ if (nodeIsElement(node)) {
+ return ElementNode.make(node, this.insideRange);
+ }
+
+ return null;
+ }
+
+ // The following methods are meant for users when specifying their surround
+ // formats and is not vital to the algorithm itself
+
+ /**
+ * Match leaves are the matching elements that are/were descendants of
+ * `this`. This makes them the element nodes, which actually affect text
+ * nodes located inside `this`.
+ *
+ * @example
+ * If we are surrounding with bold, then in this case:
+ * `firstsecond
+ * The inner b tags are match leaves, but the outer b tag is not, because
+ * it does affect any text nodes.
+ *
+ * @remarks
+ * These are important for mergers.
+ */
+ matchLeaves: Match- 222
+
(
matches: boolean,
range: Range,
- selection: Selection,
- surroundElement: Element,
base: HTMLElement,
- matcher: ElementMatcher,
- clearer: ElementClearer,
+ format: SurroundFormat,
+ selection: Selection,
): void {
- const { surroundedRange } = matches
- ? unsurround(range, surroundElement, base, matcher, clearer)
- : surroundNoSplitting(range, surroundElement, base, matcher, clearer);
+ const surroundedRange = matches
+ ? unsurround(range, base, format)
+ : surround(range, base, format);
selection.removeAllRanges();
selection.addRange(surroundedRange);
}
-export interface GetSurrounderResult {
- surroundCommand(
- surroundElement: Element,
- matcher: ElementMatcher,
- clearer?: ElementClearer,
- ): Promise;
- isSurrounded(matcher: ElementMatcher): Promise;
+function removeFormats(
+ range: Range,
+ base: Element,
+ formats: SurroundFormat[],
+ reformats: SurroundFormat[] = [],
+): Range {
+ let surroundRange = range;
+
+ for (const format of formats) {
+ surroundRange = unsurround(surroundRange, base, format);
+ }
+
+ for (const format of reformats) {
+ surroundRange = reformat(surroundRange, base, format);
+ }
+
+ return surroundRange;
}
-export function getSurrounder(richTextInput: RichTextInputAPI): GetSurrounderResult {
- const { add, remove, active } = richTextInput.getTriggerOnNextInsert();
+export class Surrounder {
+ static make(): Surrounder {
+ return new Surrounder();
+ }
- async function isSurrounded(matcher: ElementMatcher): Promise {
- const base = await richTextInput.element;
+ private api: RichTextInputAPI | null = null;
+ private trigger: Trigger | null = null;
+
+ set richText(api: RichTextInputAPI) {
+ this.api = api;
+ this.trigger = api.getTriggerOnNextInsert();
+ }
+
+ /**
+ * After calling disable, using any of the surrounding methods will throw an
+ * exception. Make sure to set the rich text before trying to use them again.
+ */
+ disable(): void {
+ this.api = null;
+ this.trigger = null;
+ }
+
+ private async _assert_base(): Promise {
+ if (!this.api) {
+ throw new Error("No rich text set");
+ }
+
+ return await this.api.element;
+ }
+
+ private _toggleTrigger(
+ base: HTMLElement,
+ selection: Selection,
+ matcher: Matcher,
+ format: SurroundFormat,
+ exclusive: SurroundFormat[] = [],
+ ): void {
+ if (get(this.trigger!.active)) {
+ this.trigger!.remove();
+ } else {
+ this.trigger!.add(async ({ node }: { node: Node }) => {
+ const range = new Range();
+ range.selectNode(node);
+
+ const matches = Boolean(findClosest(node, base, matcher));
+ const clearedRange = removeFormats(range, base, exclusive);
+ surroundAndSelect(matches, clearedRange, base, format, selection);
+ selection.collapseToEnd();
+ });
+ }
+ }
+
+ /**
+ * Use the surround command on the current range of the RichTextInput.
+ * If the range is already surrounded, it will unsurround instead.
+ */
+ async surround(
+ format: SurroundFormat,
+ exclusive: SurroundFormat[] = [],
+ ): Promise {
+ const base = await this._assert_base();
+ const selection = getSelection(base)!;
+ const range = getRange(selection);
+ const matcher = boolMatcher(format);
+
+ if (!range) {
+ return;
+ }
+
+ if (range.collapsed) {
+ return this._toggleTrigger(base, selection, matcher, format, exclusive);
+ }
+
+ const clearedRange = removeFormats(range, base, exclusive);
+ const matches = isSurroundedInner(clearedRange, base, matcher);
+ surroundAndSelect(matches, clearedRange, base, format, selection);
+ }
+
+ /**
+ * Use the surround command on the current range of the RichTextInput.
+ * If the range is already surrounded, it will overwrite the format.
+ * This might be better suited if the surrounding is parameterized (like
+ * text color).
+ */
+ async overwriteSurround(
+ format: SurroundFormat,
+ exclusive: SurroundFormat[] = [],
+ ): Promise {
+ const base = await this._assert_base();
+ const selection = getSelection(base)!;
+ const range = getRange(selection);
+ const matcher = boolMatcher(format);
+
+ if (!range) {
+ return;
+ }
+
+ if (range.collapsed) {
+ return this._toggleTrigger(base, selection, matcher, format, exclusive);
+ }
+
+ const clearedRange = removeFormats(range, base, exclusive);
+ const surroundedRange = surround(clearedRange, base, format);
+ selection.removeAllRanges();
+ selection.addRange(surroundedRange);
+ }
+
+ /**
+ * Check if the current selection is surrounded. A selection will count as
+ * provided if either the start or the end boundary point are within the
+ * provided format, OR if a surround trigger is active (surround on next
+ * text insert).
+ */
+ async isSurrounded(format: SurroundFormat): Promise {
+ const base = await this._assert_base();
const selection = getSelection(base)!;
const range = getRange(selection);
@@ -57,58 +179,44 @@ export function getSurrounder(richTextInput: RichTextInputAPI): GetSurrounderRes
return false;
}
- const isSurrounded = isSurroundedInner(range, base, matcher);
- return get(active) ? !isSurrounded : isSurrounded;
+ const isSurrounded = isSurroundedInner(range, base, boolMatcher(format));
+ return get(this.trigger!.active) ? !isSurrounded : isSurrounded;
}
- async function surroundCommand(
- surroundElement: Element,
- matcher: ElementMatcher,
- clearer: ElementClearer = () => false,
+ /**
+ * Clear/Reformat the provided formats in the current range.
+ */
+ async remove(
+ formats: SurroundFormat[],
+ reformats: SurroundFormat[] = [],
): Promise {
- const base = await richTextInput.element;
+ const base = await this._assert_base();
const selection = getSelection(base)!;
const range = getRange(selection);
- if (!range) {
+ if (!range || range.collapsed) {
return;
- } else if (range.collapsed) {
- if (get(active)) {
- remove();
- } else {
- add(async ({ node }: { node: Node }) => {
- range.selectNode(node);
-
- const matches = Boolean(findClosest(node, base, matcher));
- surroundAndSelect(
- matches,
- range,
- selection,
- surroundElement,
- base,
- matcher,
- clearer,
- );
-
- selection.collapseToEnd();
- });
- }
- } else {
- const matches = isSurroundedInner(range, base, matcher);
- surroundAndSelect(
- matches,
- range,
- selection,
- surroundElement,
- base,
- matcher,
- clearer,
- );
}
+
+ const surroundedRange = removeFormats(range, base, formats, reformats);
+ selection.removeAllRanges();
+ selection.addRange(surroundedRange);
+ }
+}
+
+/**
+ * @returns True, if element has no style attribute (anymore).
+ */
+export function removeEmptyStyle(element: HTMLElement | SVGElement): boolean {
+ if (element.style.cssText.length === 0) {
+ element.removeAttribute("style");
+ // Calling `.hasAttribute` right after `.removeAttribute` might return true.
+ return true;
}
- return {
- surroundCommand,
- isSurrounded,
- };
+ return false;
}
+
+registerPackage("anki/surround", {
+ Surrounder,
+});
diff --git a/ts/lib/dom.ts b/ts/lib/dom.ts
index 0163dfddb..1cf599050 100644
--- a/ts/lib/dom.ts
+++ b/ts/lib/dom.ts
@@ -7,10 +7,22 @@ export function nodeIsElement(node: Node): node is Element {
return node.nodeType === Node.ELEMENT_NODE;
}
+/**
+ * In the web this is probably equivalent to `nodeIsElement`, but this is
+ * convenient to convince Typescript.
+ */
+export function nodeIsCommonElement(node: Node): node is HTMLElement | SVGElement {
+ return node instanceof HTMLElement || node instanceof SVGElement;
+}
+
export function nodeIsText(node: Node): node is Text {
return node.nodeType === Node.TEXT_NODE;
}
+export function nodeIsComment(node: Node): node is Comment {
+ return node.nodeType === Node.COMMENT_NODE;
+}
+
// https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
export const BLOCK_ELEMENTS = [
"ADDRESS",
diff --git a/ts/lib/keys.ts b/ts/lib/keys.ts
index 9c60666fe..7beda3508 100644
--- a/ts/lib/keys.ts
+++ b/ts/lib/keys.ts
@@ -56,6 +56,7 @@ const modifierPressed =
export const controlPressed = modifierPressed("Control");
export const shiftPressed = modifierPressed("Shift");
+export const altPressed = modifierPressed("Alt");
export function modifiersToPlatformString(modifiers: string[]): string {
const displayModifiers = isApplePlatform()