@plohoj/html-editor 0.0.6 → 0.1.0

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

@@ -1,112 +1,176 @@
-
-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";
-
-export interface IObserveQuerySelectorBaseOptions<T extends Element = Element> {
-    /**
-     * The parent element within which changes are tracked.
-     * @default document.documentElement
-     */
-    parent?: Element;
-    /** Checks if the added element has any child elements that match the selectors. */
-    has?: string;
-    /** Custom validation of each item */
-    filter?: (element: T) => boolean;
-}
-
-export interface IObserveQuerySelectorOptions<T extends Element = Element> extends IObserveQuerySelectorBaseOptions<T> {
-    /**
-     * When the `asRemovedWhen` parameter emits a` true` value,
-     * all currently added items will be returned as removed.
-     * When the `asRemovedWhen` parameter emits a `false` value,
-     * the search will resume and all items will again be returned as added.
-     */
-    asRemovedWhen?: Observable<Boolean>;
-}
-
-export interface IObserveElementChange<T extends Element = Element> {
-    /** Element that satisfy the filtering condition. */
-    target?: T;
-    /** New element that have been added since the last emit. */
-    added?: T;
-    /** Element that have been removed since the last emit. */
-    removed?: T;
-}
-
-/**
- * Returns change (addition and deletion) of element that match selectors, like an Rx stream.
- */
-export function observeQuerySelector<T extends Element = Element>(
-    query: string,
-    options: IObserveQuerySelectorOptions<T> = {},
-): Observable<IObserveElementChange<T>> {
-    const {
-        parent = document.documentElement,
-        asRemovedWhen,
-        filter = trueStub,
-    } = options;
-    let targetElement: T | undefined;
-
-    function checkChanges(): Observable<IObserveElementChange<T>> {
-        const querySelectedElements: NodeListOf<T> = parent.querySelectorAll<T>(query);
-        let filteredSelectedElement: T | undefined;
-        const changes: IObserveElementChange<T> = {};
-
-        for (const querySelectedElement of querySelectedElements) {
-            if (options.has && !querySelectedElement.querySelector(options.has)) {
-                continue;
-            }
-            if (!filter(querySelectedElement)) {
-                continue;
-            }
-
-            filteredSelectedElement = querySelectedElement;
-            break;
-        }
-
-        if (filteredSelectedElement === targetElement) {
-            return EMPTY;
-        }
-        if (targetElement) {
-            changes.removed = targetElement;
-        }
-        if (filteredSelectedElement) {
-            changes.added = filteredSelectedElement;
-        }
-        changes.target = filteredSelectedElement;
-        targetElement = filteredSelectedElement;
-        return of(changes);
-    }
-
-    const observeQuerySelector$ = 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 (!targetElement) {
-                return EMPTY;
-            }
-            const changes: IObserveElementChange<T> = {
-                removed: targetElement,
-            };
-            targetElement = undefined;
-            return of(changes);
-        });
-
-        const observeQuerySelectorWithRemovedWhen$ = asRemovedWhen.pipe(
-            distinctUntilChanged(),
-            switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelector$),
-        );
-
-        return observeQuerySelectorWithRemovedWhen$;
-    }
-
-    return observeQuerySelector$;
-}
+
+import { concat, defer, distinctUntilChanged, EMPTY, mergeMap, Observable, of, switchMap, throttleTime } from "rxjs";
+import { IMergeMapElementChangeOptions, mergeMapAddedElements } from '../operators/merge-map-added-elements';
+import { trueStub } from '../utils/stubs';
+import { observeElementMutation } from "./observe-mutation";
+
+export interface IObserveQuerySelectorBaseOptions<T extends Element = Element> {
+  query: string;
+  /**
+   * The parent element within which changes are tracked.
+   * @default document.documentElement
+   */
+  parent?: Element;
+  /** Checks if the added element has any child elements that match the query selectors. */
+  has?: string;
+  /** Custom validation of each item */
+  filter?: (element: T) => boolean;
+}
+
+export interface IObserveQuerySelectorOptions<E extends Element = Element, O = unknown>
+  extends IObserveQuerySelectorBaseOptions<E>, Omit<IMergeMapElementChangeOptions<E, O>, 'project'> {
+  /**
+   * * When the {@link asRemovedWhen} option emits a `true` value,
+   * all currently added items will be returned as removed.
+   * * When the {@link asRemovedWhen} option emits a `false` value,
+   * the search will resume and all items will again be returned as added.
+   */
+  asRemovedWhen?: Observable<Boolean>;
+  /**
+   * The function that will be called to generate a new stream
+   * for each element discovered the first time after it is added.
+   */
+  project?: (element: E) => Observable<O>;
+  /**
+   * The {@link tap} function will be called once for each element discovered the first time after it is added.
+   * The {@link tap} function is called before the {@link project} function is called.
+   */
+  tap?: (element: E) => void,
+}
+
+export interface IObservedElementChange<T extends Element = Element> {
+  /** Element that satisfy the filtering condition. */
+  target?: T;
+  /** New element that have been added since the last emit. */
+  added?: T;
+  /** Element that have been removed since the last emit. */
+  removed?: T;
+}
+
+/** Observation changes (addition and deletion) of elements that match to query selectors as an Rx stream. */
+export function observeQuerySelector<E extends Element = Element>(
+  options: IObserveQuerySelectorOptions<E> & { project?: undefined },
+): Observable<IObservedElementChange<E>>;
+export function observeQuerySelector<E extends Element = Element, O = unknown>(
+  options: IObserveQuerySelectorOptions<E, O>,
+): Observable<O>;
+export function observeQuerySelector<E extends Element = Element>(
+  query: string,
+  options?: Omit<IObserveQuerySelectorOptions<E>, 'query'> & { project?: undefined },
+): Observable<IObservedElementChange<E>>;
+export function observeQuerySelector<E extends Element = Element, O = unknown>(
+  query: string,
+  options: Omit<IObserveQuerySelectorOptions<E, O>, 'query'>,
+): Observable<O>;
+export function observeQuerySelector<E extends Element = Element, O = unknown>(
+  query: string,
+  project: ((element: E) => Observable<O>),
+  options: Omit<IObserveQuerySelectorOptions<E>, 'query' | 'project'>,
+): Observable<O>;
+export function observeQuerySelector<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<IObservedElementChange<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
+
+  let targetElement: E | undefined;
+
+  function checkChanges(): Observable<IObservedElementChange<E>> {
+    const querySelectedElements: NodeListOf<E> = parent.querySelectorAll<E>(query);
+    let filteredSelectedElement: E | undefined;
+    const changes: IObservedElementChange<E> = {};
+
+    for (const querySelectedElement of querySelectedElements) {
+      if (has && !querySelectedElement.querySelector(has)) {
+        continue;
+      }
+      if (!filter(querySelectedElement)) {
+        continue;
+      }
+
+      filteredSelectedElement = querySelectedElement;
+      break;
+    }
+
+    if (filteredSelectedElement === targetElement) {
+      return EMPTY;
+    }
+    if (targetElement) {
+      changes.removed = targetElement;
+    }
+    if (filteredSelectedElement) {
+      changes.added = filteredSelectedElement;
+      tap?.(filteredSelectedElement);
+    }
+    changes.target = filteredSelectedElement;
+    targetElement = filteredSelectedElement;
+
+    return of(changes);
+  }
+
+  const observeQuerySelector$: Observable<IObservedElementChange<E>> = concat(
+    defer(() => checkChanges()),
+    observeElementMutation(parent, { subtree: true, childList: true }).pipe(
+      throttleTime(0, undefined, { leading: true, trailing: true }),
+      mergeMap(checkChanges),
+    )
+  )
+
+  let observeQuerySelectorWithRemovedWhen$ = observeQuerySelector$;
+
+  if (asRemovedWhen) {
+    const removedObserver$ = defer(() => {
+      if (!targetElement) {
+        return EMPTY;
+      }
+      const changes: IObservedElementChange<E> = {
+        removed: targetElement,
+      };
+      targetElement = undefined;
+      return of(changes);
+    });
+
+    observeQuerySelectorWithRemovedWhen$ = asRemovedWhen.pipe(
+      distinctUntilChanged(),
+      switchMap(asRemoved => asRemoved ? removedObserver$ : observeQuerySelector$),
+    );
+  }
+
+  if (project) {
+    return observeQuerySelectorWithRemovedWhen$.pipe(
+      mergeMapAddedElements({
+        project,
+        ...restOfStableOptions,
+      }),
+    );
+  }
+
+  return observeQuerySelectorWithRemovedWhen$;
+}

package/src/observable/observe-url-changes.ts

@@ -0,0 +1,23 @@
+import { Observable } from 'rxjs';
+import { IMergeMapByStringConditionOptions, mergeMapStringCondition } from '../operators/merge-map-by-string-condition';
+import { urlChange$ } from './url-change';
+
+export interface IObserveUrlChangesOptions<T = unknown> extends Partial<IMergeMapByStringConditionOptions<T>> {}
+
+/** Observation of `URL` changes that satisfy the conditions. */
+export function observeUrlChanges(
+  options?: IObserveUrlChangesOptions<unknown> & { project?: undefined }
+): Observable<string>;
+export function observeUrlChanges<O>(
+  options: IObserveUrlChangesOptions<O>
+): Observable<O>;
+export function observeUrlChanges<O>(
+  options: IObserveUrlChangesOptions<O> = {}
+): Observable<O | string> {
+  return urlChange$.pipe(
+    mergeMapStringCondition({
+      ...options,
+      condition: options.condition || (() => true),
+    })
+  );
+}

package/src/observable/url-change.ts

@@ -1,38 +1,37 @@
-import { Observable, Subscriber } from "rxjs";
-import { distinctUntilChanged, shareReplay } from "rxjs/operators";
-
-let pushStateSubscriber$: Subscriber<string> | undefined;
-let isPushStateWasInjected = false;
-
-function injectPushStateHandler(): void {
-    if (isPushStateWasInjected) {
-        return;
-    }
-    const pushState = history.pushState;
-    history.pushState = function (...args) {
-        pushState.apply(this, args);
-        pushStateSubscriber$?.next(location.href);
-    };
-}
-
-/**
- * Emit new location url when the URL is changes
- */
-export const urlChange$ = new Observable<string>(subscriber$ => {
-    function updateURL(): void {
-        subscriber$.next(location.href)
-    }    
-    window.addEventListener('hashchange', updateURL);
-    window.addEventListener('popstate', updateURL);
-    pushStateSubscriber$ = subscriber$;
-    subscriber$.next(location.href);
-    injectPushStateHandler();
-    return () => {
-        pushStateSubscriber$ = undefined;
-        window.removeEventListener('hashchange', updateURL);
-        window.removeEventListener('popstate', updateURL);
-    }
-}).pipe(
-    distinctUntilChanged(),
-    shareReplay(1),
-);
+import { Observable, Subscriber, distinctUntilChanged, shareReplay } from "rxjs";
+
+let pushStateSubscriber$: Subscriber<string> | undefined;
+let isPushStateWasInjected = false;
+
+function injectPushStateHandler(): void {
+    if (isPushStateWasInjected) {
+        return;
+    }
+    const pushState = history.pushState;
+    history.pushState = function (...args) {
+        pushState.apply(this, args);
+        pushStateSubscriber$?.next(location.href);
+    };
+}
+
+/**
+ * Emit new location url when the URL is changes
+ */
+export const urlChange$ = new Observable<string>(subscriber$ => {
+    function updateURL(): void {
+        subscriber$.next(location.href)
+    }    
+    window.addEventListener('hashchange', updateURL);
+    window.addEventListener('popstate', updateURL);
+    pushStateSubscriber$ = subscriber$;
+    subscriber$.next(location.href);
+    injectPushStateHandler();
+    return () => {
+        pushStateSubscriber$ = undefined;
+        window.removeEventListener('hashchange', updateURL);
+        window.removeEventListener('popstate', updateURL);
+    }
+}).pipe(
+    distinctUntilChanged(),
+    shareReplay(1),
+);

package/src/operators/blur-element.ts

@@ -0,0 +1,21 @@
+import { MonoTypeOperatorFunction, tap } from "rxjs";
+
+function blurElementImmediately(element: Element): void {
+    if ('blur' in element) {
+        (element as HTMLElement).blur();
+    } else {
+        element.dispatchEvent(new FocusEvent('blur'));
+        element.dispatchEvent(new FocusEvent('focusout', {bubbles: true}));
+    }
+    console.log(`Blur: `, element);
+}
+
+export function blurElement<T extends Element>(): MonoTypeOperatorFunction<T>;
+export function blurElement<T extends Element>(element: T): void;
+export function blurElement<T extends Element>(element?: T): MonoTypeOperatorFunction<T> | void {
+    if (element) {
+        blurElementImmediately(element);
+    } else {
+        return tap((element: T) => blurElementImmediately(element));
+    }
+}

package/src/operators/click-element.ts

@@ -1,20 +1,20 @@
-import { MonoTypeOperatorFunction, pipe } from "rxjs";
-import { tap } from "rxjs/operators";
-
-function clickElementImmediately(element: Element): void {
-    element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    console.log(`Click: `, element);
-}
-
-
-export function clickElement<T extends Element>(): MonoTypeOperatorFunction<T>;
-export function clickElement<T extends Element>(element: T): void;
-export function clickElement<T extends Element>(element?: T): MonoTypeOperatorFunction<T> | void {
-    if (element) {
-        clickElementImmediately(element);
-    } else {
-        return pipe(
-            tap((element: T) => clickElementImmediately(element)),
-        );
-    }
-}
+import { MonoTypeOperatorFunction, tap } from "rxjs";
+
+function clickElementImmediately(element: Element): void {
+    if ('click' in element) {
+        (element as HTMLElement).click();
+    } else {
+        element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    }
+    console.log(`Click: `, element);
+}
+
+export function clickElement<T extends Element>(): MonoTypeOperatorFunction<T>;
+export function clickElement<T extends Element>(element: T): void;
+export function clickElement<T extends Element>(element?: T): MonoTypeOperatorFunction<T> | void {
+    if (element) {
+        clickElementImmediately(element);
+    } else {
+        return tap((element: T) => clickElementImmediately(element));
+    }
+}

package/src/operators/focus-element.ts

@@ -0,0 +1,21 @@
+import { MonoTypeOperatorFunction, tap } from "rxjs";
+
+function focusElementImmediately(element: Element): void {
+    if ('focus' in element) {
+        (element as HTMLElement).focus();
+    } else {
+        element.dispatchEvent(new FocusEvent('focus'));
+        element.dispatchEvent(new FocusEvent('focusin', {bubbles: true}));
+    }
+    console.log(`Focus: `, element);
+}
+
+export function focusElement<T extends Element>(): MonoTypeOperatorFunction<T>;
+export function focusElement<T extends Element>(element: T): void;
+export function focusElement<T extends Element>(element?: T): MonoTypeOperatorFunction<T> | void {
+    if (element) {
+        focusElementImmediately(element);
+    } else {
+        return tap((element: T) => focusElementImmediately(element));
+    }
+}