@plohoj/html-editor 0.0.6 → 0.1.0

package/src/index.ts

@@ -1,19 +1,25 @@
-// Observable
-export { awaitElement, IAwaitElementOptions } from "./observable/await-element";
-export { awaitRandomElement } from './observable/await-random-element';
-export { observeElementMutation } from "./observable/observe-mutation";
-export { IObservePressedKeyboardButtonsOptions, observePressedKeyboardButtons } from './observable/observe-pressed-keyboard-buttons';
-export { IObserveElementChange, IObserveQuerySelectorBaseOptions, IObserveQuerySelectorOptions, observeQuerySelector } from "./observable/observe-query-selector";
-export { IObservedElementsChanges, observeQuerySelectorAll } from "./observable/observe-query-selector-all";
-export { urlChange$ } from "./observable/url-change";
-// Operators
-export { clickElement } from "./operators/click-element";
-export { mergeMapAddedElements } from "./operators/merge-map-added-elements";
-export { mergeMapStringToggle } from "./operators/merge-map-string-toggle";
-export { removeElement } from "./operators/remove-element";
-export { IRestoredHistoryOption, restoreHistory } from './operators/restore-history';
-export { setInputValue } from "./operators/set-input-value";
-// Utils
-export { ComposedRestoredHistoryOperatorsArray, ComposedRestoredHistoryOperatorsList, ComposedRestoredHistoryOperatorsRecord, ComposedRestoredHistoryOptionList, composeRestoreHistory, IComposedRestoredHistory } from './utils/compose-restore-history';
-export { findRecursively, FindRecursivelyContinue, FindRecursivelyMatcher, FindRecursivelyResult, IFindRecursivelyMatherOptions, IFindRecursivelyOptions } from "./utils/find-recursively";
-export { randomFromArray } from "./utils/random-from-array";
+// Observable
+export { awaitElement, IAwaitElementOptions } from "./observable/await-element";
+export { awaitElements } from './observable/await-elements';
+export { awaitRandomElement } from './observable/await-random-element';
+export { observeElementMutation } from "./observable/observe-mutation";
+export { IObservePressedKeyboardButtonsOptions, observePressedKeyboardButtons } from './observable/observe-pressed-keyboard-buttons';
+export { IObservedElementChange, IObserveQuerySelectorBaseOptions, IObserveQuerySelectorOptions, observeQuerySelector } from "./observable/observe-query-selector";
+export { IObservedElementsChanges, observeQuerySelectorAll } from "./observable/observe-query-selector-all";
+export { urlChange$ } from "./observable/url-change";
+
+// Operators
+export { observeUrlChanges } from './observable/observe-url-changes';
+export { clickElement } from "./operators/click-element";
+export { focusElement } from './operators/focus-element';
+export { mergeMapAddedElements } from "./operators/merge-map-added-elements";
+export { mergeMapByCondition } from './operators/merge-map-by-condition';
+export { mergeMapStringCondition } from "./operators/merge-map-by-string-condition";
+export { removeElement } from "./operators/remove-element";
+export { IRestoredHistoryOption, restoreHistory } from './operators/restore-history';
+export { setInputValue } from "./operators/set-input-value";
+
+// Utils
+export { ComposedRestoredHistoryOperatorsArray, ComposedRestoredHistoryOperatorsList, ComposedRestoredHistoryOperatorsRecord, ComposedRestoredHistoryOptionList, composeRestoreHistory, IComposedRestoredHistory } from './utils/compose-restore-history';
+export { findRecursively, FindRecursivelyContinue, FindRecursivelyMatcher, FindRecursivelyResult, IFindRecursivelyMatherOptions, IFindRecursivelyOptions } from "./utils/find-recursively";
+export { randomFromArray } from "./utils/random-from-array";

package/src/observable/await-element.ts

@@ -1,30 +1,47 @@
-import { Observable, SchedulerLike } from "rxjs";
-import { debounceTime, filter, map, take } from "rxjs/operators";
-import { IObserveQuerySelectorBaseOptions, observeQuerySelector } from "./observe-query-selector";
-
-export interface IAwaitElementOptions<T extends Element = Element> extends IObserveQuerySelectorBaseOptions<T> {
-    /**
-     * The time to wait for elements changes.
-     * If during the waiting time the elements have changed the timer will be reset.
-     * @default 0
-     */
-    debounceTime?: number;
-    debounceScheduler?: SchedulerLike;
-}
-
-/**
- * Awaiting only one element to match the selector and returns it as an Rx stream.
- * The stream ends after one element is found / added.
- */
-export function awaitElement<T extends Element = Element>(
-    query: string,
-    options: IAwaitElementOptions<T> = {},
-): Observable<T> {
-    return observeQuerySelector<T>(query, options)
-        .pipe(
-            debounceTime(options.debounceTime || 0, options.debounceScheduler),
-            filter(changes => !!changes.target),
-            map(changes => changes.target!),
-            take(1),
-        );
-}
+import { Observable, SchedulerLike, debounceTime, filter, map, take } from "rxjs";
+import { IObserveQuerySelectorBaseOptions, observeQuerySelector } from "./observe-query-selector";
+
+export interface IAwaitElementOptions<T extends Element = Element> extends IObserveQuerySelectorBaseOptions<T> {
+  /**
+   * The time to wait for elements changes.
+   * If during the waiting time the elements have changed the timer will be reset.
+   * @default 0
+   */
+  debounceTime?: number;
+  debounceScheduler?: SchedulerLike;
+}
+
+/**
+ * Awaiting only one element to match the selector and returns it as an Rx stream.
+ * The stream ends after one element is found / added.
+ */
+export function awaitElement<T extends Element = Element>(
+  options: IAwaitElementOptions<T>,
+): Observable<T>;
+export function awaitElement<T extends Element = Element>(
+  query: string,
+  options?: Omit<IAwaitElementOptions<T>, 'query'>,
+): Observable<T>;
+export function awaitElement<T extends Element = Element>(
+  queryOrOptions: string | IAwaitElementOptions<T>,
+  options?: Omit<IAwaitElementOptions<T>, 'query'>,
+): Observable<T> {
+  // #region Options parsing
+  let query: string;
+  let stableOptions: Omit<IAwaitElementOptions<T>, 'query'>;
+  if (typeof queryOrOptions === 'string') {
+    query = queryOrOptions;
+    stableOptions = options || {};
+  } else {
+    stableOptions = queryOrOptions;
+    query = queryOrOptions.query;
+  }
+  // #endregion
+
+  return observeQuerySelector<T>(query, stableOptions).pipe(
+    debounceTime(stableOptions.debounceTime || 0, stableOptions.debounceScheduler),
+    filter(changes => !!changes.target),
+    map(changes => changes.target!),
+    take(1),
+  );
+}

package/src/observable/await-elements.ts

@@ -0,0 +1,38 @@
+import { Observable, debounceTime, filter, map, take } from "rxjs";
+import { IAwaitElementOptions } from './await-element';
+import { observeQuerySelectorAll } from './observe-query-selector-all';
+
+/**
+ * Awaiting only first elements changes to match the selector and returns it as an Rx stream.
+ * The stream ends after any element is found / added.
+ */
+export function awaitElements<T extends Element = Element>(
+  options: IAwaitElementOptions<T>,
+): Observable<T[]>;
+export function awaitElements<T extends Element = Element>(
+  query: string,
+  options?: Omit<IAwaitElementOptions<T>, 'query'>,
+): Observable<T[]>;
+export function awaitElements<T extends Element = Element>(
+  queryOrOptions: string | IAwaitElementOptions<T>,
+  options?: Omit<IAwaitElementOptions<T>, 'query'>,
+): Observable<T[]> {
+  // #region Options parsing
+  let query: string;
+  let stableOptions: Omit<IAwaitElementOptions<T>, 'query'>;
+  if (typeof queryOrOptions === 'string') {
+    query = queryOrOptions;
+    stableOptions = options || {};
+  } else {
+    stableOptions = queryOrOptions;
+    query = queryOrOptions.query;
+  }
+  // #endregion
+
+  return observeQuerySelectorAll<T>(query, stableOptions).pipe(
+    debounceTime(stableOptions.debounceTime || 0, stableOptions.debounceScheduler),
+    filter(changes => !!changes.target),
+    map(changes => changes.target),
+    take(1),
+  );
+}

package/src/observable/await-random-element.ts

@@ -1,23 +1,40 @@
-import { Observable } from "rxjs";
-import { debounceTime, filter, map, take } from "rxjs/operators";
-import { randomFromArray } from "../utils/random-from-array";
-import { IAwaitElementOptions } from './await-element';
-import { observeQuerySelectorAll } from "./observe-query-selector-all";
-
-/**
- * Awaiting Expects at least one element to match the selector and returns it as an Rx stream.
- * If there are more than 1 elements, it will return a random one.
- * The stream ends after the elements are found / added.
- */
-export function awaitRandomElement<T extends Element = Element>(
-    query: string,
-    options: IAwaitElementOptions<T> = {},
-): Observable<T> {
-    return observeQuerySelectorAll<T>(query, options)
-        .pipe(
-            debounceTime(options.debounceTime || 0, options.debounceScheduler),
-            filter(changes => changes.target.length > 0),
-            map(changes => randomFromArray(changes.target)),
-            take(1)
-        );
-}
+import { Observable, debounceTime, filter, map, take } from "rxjs";
+import { randomFromArray } from "../utils/random-from-array";
+import { IAwaitElementOptions } from './await-element';
+import { observeQuerySelectorAll } from "./observe-query-selector-all";
+
+/**
+ * Awaiting Expects at least one element to match the selector and returns it as an Rx stream.
+ * If there are more than 1 elements, it will return a random one.
+ * The stream ends after the elements are found / added.
+ */
+export function awaitRandomElement<T extends Element = Element>(
+  options: IAwaitElementOptions<T>,
+): Observable<T>;
+export function awaitRandomElement<T extends Element = Element>(
+  query: string,
+  options?: Omit<IAwaitElementOptions<T>, 'query'>,
+): Observable<T>;
+export function awaitRandomElement<T extends Element = Element>(
+  queryOrOptions: string | IAwaitElementOptions<T>,
+  options?: Omit<IAwaitElementOptions<T>, 'query'>,
+): Observable<T> {
+  // #region Options parsing
+  let query: string;
+  let stableOptions: Omit<IAwaitElementOptions<T>, 'query'>;
+  if (typeof queryOrOptions === 'string') {
+    query = queryOrOptions;
+    stableOptions = options || {};
+  } else {
+    stableOptions = queryOrOptions;
+    query = queryOrOptions.query;
+  }
+  // #endregion
+
+  return observeQuerySelectorAll<T>(query, stableOptions).pipe(
+    debounceTime(stableOptions.debounceTime || 0, stableOptions.debounceScheduler),
+    filter(changes => changes.target.length > 0),
+    map(changes => randomFromArray(changes.target)),
+    take(1)
+  );
+}

package/src/observable/observe-mutation.ts

@@ -1,12 +1,10 @@
-import { Observable } from "rxjs";
-
-/**
- * Converts the callback of the MutationObserver class to an Rx event stream
- */
-export function observeElementMutation<T extends Node>(node: T, options?: MutationObserverInit): Observable<MutationRecord[]> {
-    return new Observable<MutationRecord[]>(subscriber => {
-        const mutationObserver = new MutationObserver(mutation => subscriber.next(mutation));
-        mutationObserver.observe(node, options);
-        return () => mutationObserver.disconnect();
-    });
-}
+import { Observable } from "rxjs";
+
+/** Converts the callback of the {@link MutationObserver} class to an Rx event stream */
+export function observeElementMutation<T extends Node>(node: T, options?: MutationObserverInit): Observable<MutationRecord[]> {
+    return new Observable<MutationRecord[]>(subscriber => {
+        const mutationObserver = new MutationObserver(mutation => subscriber.next(mutation));
+        mutationObserver.observe(node, options);
+        return () => mutationObserver.disconnect();
+    });
+}

package/src/observable/observe-pressed-keyboard-buttons.ts

@@ -1,31 +1,29 @@
-import { fromEvent, merge, Observable } from 'rxjs';
-import { filter, map, tap } from 'rxjs/operators';
-import { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';
-
-export interface IObservePressedKeyboardButtonsOptions {
-    /** @default window */
-    target?: HasEventTargetAddRemove<KeyboardEvent>
-}
-
-export function observePressedKeyboardButtons(
-    options: IObservePressedKeyboardButtonsOptions = {}
-): Observable<Set<string>> {
-    const target = options.target || window;
-    const set = new Set<string>();
-    const addKey$ = merge(
-        fromEvent(target, 'keydown'),
-        fromEvent(target, 'keypress'),
-    ).pipe(
-        filter((event: KeyboardEvent) => !set.has(event.key)),
-        tap((event: KeyboardEvent) => set.add(event.key)),
-    )
-    const keyRemove$ = fromEvent(target, 'keyup')
-        .pipe(
-            filter((event: KeyboardEvent) => set.has(event.key)),
-            tap((event: KeyboardEvent) => set.delete(event.key)),
-        );
-    return merge(
-        addKey$,
-        keyRemove$,
-    ).pipe(map(() => set));
-}
+import { filter, fromEvent, map, merge, Observable, tap } from 'rxjs';
+import { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';
+
+export interface IObservePressedKeyboardButtonsOptions {
+    /** @default window */
+    target?: HasEventTargetAddRemove<KeyboardEvent>
+}
+
+export function observePressedKeyboardButtons(
+    options: IObservePressedKeyboardButtonsOptions = {}
+): Observable<Set<string>> {
+    const target = options.target || window;
+    const set = new Set<string>();
+    const addKey$ = merge(
+        fromEvent(target, 'keydown'),
+        fromEvent(target, 'keypress'),
+    ).pipe(
+        filter((event: KeyboardEvent) => !set.has(event.key)),
+        tap((event: KeyboardEvent) => set.add(event.key)),
+    )
+    const keyRemove$ = fromEvent(target, 'keyup').pipe(
+        filter((event: KeyboardEvent) => set.has(event.key)),
+        tap((event: KeyboardEvent) => set.delete(event.key)),
+    );
+    return merge(
+        addKey$,
+        keyRemove$,
+    ).pipe(map(() => set));
+}

package/src/observable/observe-query-selector-all.ts

@@ -1,101 +1,154 @@
-
-import { concat, defer, EMPTY, Observable, of } from "rxjs";
-import { distinctUntilChanged, mergeMap, switchMap, throttleTime } from "rxjs/operators";
-import { trueStub } from '../utils/stubs';
-import { observeElementMutation } from "./observe-mutation";
-import { IObserveQuerySelectorOptions } from "./observe-query-selector";
-
-export interface IObservedElementsChanges<T extends Element = Element> {
-    /** All elements that satisfy the filtering condition. */
-    target: T[];
-    /** New elements that have been added since the last emit. */
-    added: T[];
-    /** Elements that have been removed since the last emit. */
-    removed: T[];
-}
-
-/** Returns changes (additions and deletions) of elements that match selectors, like an Rx stream. */
-export function observeQuerySelectorAll<T extends Element = Element>(
-    query: string,
-    options: IObserveQuerySelectorOptions<T> = {},
-): Observable<IObservedElementsChanges<T>> {
-    const {
-        parent = document.documentElement,
-        asRemovedWhen,
-        filter = trueStub,
-    } = options;
-    const targetElements = new Set<T>();
-
-    function checkChanges(): Observable<IObservedElementsChanges<T>> {
-        const addedElements = new Set<T>();
-        const targetElementsDiff = new Set(targetElements);
-        const querySelectedElements = new Set(parent.querySelectorAll<T>(query));
-
-        for (const querySelectedElement of querySelectedElements) {
-            if (options.has && !querySelectedElement.querySelector(options.has)) {
-                continue;
-            }
-            if (!filter(querySelectedElement)) {
-                continue;
-            }
-
-            if (targetElementsDiff.has(querySelectedElement)) {
-                targetElementsDiff.delete(querySelectedElement);
-            } else {
-                addedElements.add(querySelectedElement);
-            }
-        }
-
-        // No changes
-        if (addedElements.size === 0 && targetElementsDiff.size === 0) {
-            return EMPTY;
-        }
-
-        for (const removedElement of targetElementsDiff) {
-            targetElements.delete(removedElement);
-        }
-        for (const addedElement of addedElements) {
-            targetElements.add(addedElement);
-        }
-
-        const changes: IObservedElementsChanges<T> = {
-            target: [...targetElements.values()],
-            added: [...addedElements.values()],
-            removed: [...targetElementsDiff.values()],
-        }
-
-        return of(changes);
-    }
-
-    let observeQuerySelectorAll$ = concat(
-        defer(() => checkChanges()),
-        observeElementMutation(parent, {subtree: true, childList: true}).pipe(
-            throttleTime(0, undefined, {leading: true, trailing: true}),
-            mergeMap(checkChanges)
-        ),
-    )
-
-    if (asRemovedWhen) {
-        const removedObserver$ = defer(() => {
-            if (targetElements.size === 0) {
-                return EMPTY;
-            }
-            const changes: IObservedElementsChanges<T> = {
-                target: [],
-                added: [],
-                removed: [...targetElements.values()],
-            };
-            targetElements.clear();
-            return of(changes);
-        });
-
-        const observeQuerySelectorAllWithRemovedWhen$ = asRemovedWhen.pipe(
-            distinctUntilChanged(),
-            switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelectorAll$),
-        );
-
-        return observeQuerySelectorAllWithRemovedWhen$;
-    }
-
-    return observeQuerySelectorAll$;
-}
+
+import { concat, defer, distinctUntilChanged, EMPTY, mergeMap, Observable, of, switchMap, throttleTime } from "rxjs";
+import { mergeMapAddedElements } from '../operators/merge-map-added-elements';
+import { trueStub } from '../utils/stubs';
+import { observeElementMutation } from "./observe-mutation";
+import { IObserveQuerySelectorOptions } from "./observe-query-selector";
+
+export interface IObservedElementsChanges<T extends Element = Element> {
+  /** All elements that satisfy the filtering condition. */
+  target: T[];
+  /** New elements that have been added since the last emit. */
+  added: T[];
+  /** Elements that have been removed since the last emit. */
+  removed: T[];
+}
+
+/** Observation changes (additions and deletions) of elements that match to query selectors as an Rx stream. */
+export function observeQuerySelectorAll<E extends Element = Element>(
+  options: IObserveQuerySelectorOptions<E, unknown> & { project?: undefined },
+): Observable<IObservedElementsChanges<E>>;
+export function observeQuerySelectorAll<E extends Element = Element, O = unknown>(
+  options: IObserveQuerySelectorOptions<E, O>,
+): Observable<O>;
+export function observeQuerySelectorAll<E extends Element = Element>(
+  query: string,
+  options?: Omit<IObserveQuerySelectorOptions<E, unknown>, 'query'> & { project?: undefined },
+): Observable<IObservedElementsChanges<E>>;
+export function observeQuerySelectorAll<E extends Element = Element, O = unknown>(
+  query: string,
+  options: Omit<IObserveQuerySelectorOptions<E, O>, 'query'>,
+): Observable<O>;
+export function observeQuerySelectorAll<E extends Element = Element, O = unknown>(
+  query: string,
+  project: ((element: E) => Observable<O>),
+  options: Omit<IObserveQuerySelectorOptions<E>, 'query' | 'project'>,
+): Observable<O>;
+export function observeQuerySelectorAll<E extends Element = Element, O = unknown>(
+  queryOrOptions: string | IObserveQuerySelectorOptions<E, O>,
+  projectOrOptions?: ((element: E) => Observable<O>) | Omit<IObserveQuerySelectorOptions<E, O>, 'query'>,
+  options?: Omit<IObserveQuerySelectorOptions<E>, 'query' | 'project'>
+): Observable<IObservedElementsChanges<E> | O> {
+  // #region Options parsing
+  let query: string;
+  let project: ((element: E) => Observable<O>) | undefined;
+  let stableOptions: Omit<IObserveQuerySelectorOptions<E>, 'query' | 'project'>;
+  if (typeof queryOrOptions === 'string') {
+    query = queryOrOptions;
+    if (typeof projectOrOptions === 'function') {
+      project = projectOrOptions;
+      stableOptions = options || {};
+    } else {
+      stableOptions = projectOrOptions || {};
+      project = projectOrOptions?.project;
+    }
+  } else {
+    stableOptions = queryOrOptions;
+    query = queryOrOptions.query;
+    project = queryOrOptions?.project;
+  }
+  const {
+    parent = document.documentElement,
+    asRemovedWhen,
+    filter = trueStub,
+    has,
+    tap,
+    ...restOfStableOptions
+  } = stableOptions;
+  // #endregion
+
+  const targetElements = new Set<E>();
+
+  function checkChanges(): Observable<IObservedElementsChanges<E>> {
+    const addedElements = new Set<E>();
+    const targetElementsDiff = new Set(targetElements);
+    const querySelectedElements = new Set(parent.querySelectorAll<E>(query));
+
+    for (const querySelectedElement of querySelectedElements) {
+      if (has && !querySelectedElement.querySelector(has)) {
+        continue;
+      }
+      if (!filter(querySelectedElement)) {
+        continue;
+      }
+
+      if (targetElementsDiff.has(querySelectedElement)) {
+        targetElementsDiff.delete(querySelectedElement);
+      } else {
+        addedElements.add(querySelectedElement);
+      }
+    }
+
+    // No changes
+    if (addedElements.size === 0 && targetElementsDiff.size === 0) {
+      return EMPTY;
+    }
+
+    for (const removedElement of targetElementsDiff) {
+      targetElements.delete(removedElement);
+    }
+    for (const addedElement of addedElements) {
+      targetElements.add(addedElement);
+      tap?.(addedElement);
+    }
+
+    const changes: IObservedElementsChanges<E> = {
+      target: [...targetElements.values()],
+      added: [...addedElements.values()],
+      removed: [...targetElementsDiff.values()],
+    }
+
+    return of(changes);
+  }
+
+  const observeQuerySelectorAll$ = concat(
+    defer(() => checkChanges()),
+    observeElementMutation(parent, { subtree: true, childList: true }).pipe(
+      throttleTime(0, undefined, { leading: true, trailing: true }),
+      mergeMap(checkChanges)
+    ),
+  )
+
+  let observeQuerySelectorAllWithRemovedWhen$ = observeQuerySelectorAll$;
+
+  if (asRemovedWhen) {
+    const removedObserver$ = defer(() => {
+      if (targetElements.size === 0) {
+        return EMPTY;
+      }
+      const changes: IObservedElementsChanges<E> = {
+        target: [],
+        added: [],
+        removed: [...targetElements.values()],
+      };
+      targetElements.clear();
+      return of(changes);
+    });
+
+    observeQuerySelectorAllWithRemovedWhen$ = asRemovedWhen.pipe(
+      distinctUntilChanged(),
+      switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelectorAll$),
+    );
+  }
+
+  if (project) {
+    return observeQuerySelectorAllWithRemovedWhen$.pipe(
+      mergeMapAddedElements({
+        project,
+        ...restOfStableOptions,
+      }),
+    );
+  }
+
+  return observeQuerySelectorAllWithRemovedWhen$;
+}