@kerebron/extension-ui 0.8.1

package/src/autocomplete/DefaultRenderer.ts

@@ -0,0 +1,189 @@
+import { CoreEditor } from '@kerebron/editor';
+import {
+  AutocompleteRenderer,
+  SuggestionKeyDownProps,
+  SuggestionProps,
+} from './types.js';
+import { anchorElement, OverLayer } from '../overlayer/mod.js';
+
+const CSS_PREFIX = 'kb-autocomplete';
+
+export class DefaultRenderer<Item> extends EventTarget
+  implements AutocompleteRenderer {
+  command: (props: any) => void;
+  wrapper: HTMLElement | undefined;
+  list: HTMLElement | undefined;
+  items: Array<Item> = [];
+  pos: number = -1;
+  props: SuggestionProps<Item, any> | undefined;
+  readonly keyDownHandler: (this: HTMLElement, ev: KeyboardEvent) => any;
+  overlayer: OverLayer;
+  anchor?: string;
+
+  constructor(private editor: CoreEditor) {
+    super();
+
+    this.overlayer = this.editor.ci.resolve('overlayer');
+
+    this.command = () => {};
+
+    this.keyDownHandler = (event) => {
+      if (this.onKeyDown({ event })) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    };
+  }
+
+  setCommand(command: (props: any) => void) {
+    this.command = command;
+    this.refresh();
+  }
+
+  setResponse() {
+    this.refresh();
+  }
+
+  onUpdate(props: SuggestionProps<Item>) {
+    this.items.splice(0, this.items.length, ...props.items);
+    this.props = props;
+    this.refresh();
+  }
+
+  destroy() {
+    document.body.removeEventListener('keydown', this.keyDownHandler, {
+      capture: true,
+    });
+    if (this.wrapper) {
+      this.wrapper.parentNode?.removeChild(this.wrapper);
+      this.wrapper = undefined;
+      this.dispatchEvent(new Event('close'));
+    }
+    this.pos = -1;
+  }
+
+  onKeyDown(props: SuggestionKeyDownProps) {
+    if (!this.wrapper) {
+      return false;
+    }
+    if (this.items.length === 0) {
+      return false;
+    }
+
+    if (props.event.key === 'Escape') {
+      if (this.wrapper) {
+        this.wrapper.parentNode?.removeChild(this.wrapper);
+        this.wrapper = undefined;
+        return true;
+      }
+    }
+    if (props.event.key === 'ArrowUp') {
+      if (this.pos > -1) {
+        this.pos = this.pos - 1;
+        this.refresh();
+        return true;
+      }
+    }
+
+    if (props.event.key === 'ArrowDown') {
+      if (this.pos < this.items.length - 1) {
+        this.pos++;
+        this.refresh();
+        return true;
+      }
+    }
+
+    if (props.event.key === 'Enter') {
+      if (this.pos > -1 && this.pos < this.items.length) {
+        const item = this.items[this.pos];
+        this.items.splice(0, this.items.length);
+        this.destroy();
+        this.command(item);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  createListItem(item: Item, cnt: number) { // override
+    const li = document.createElement('li');
+    if (cnt === this.pos) {
+      li.classList.add('active');
+    }
+    li.innerText = '' + item; // TODO item to string and item formatting
+    li.style.cursor = 'pointer';
+    li.addEventListener('click', () => {
+      this.destroy();
+      this.command(item);
+    });
+    return li;
+  }
+
+  refresh() {
+    if (!this.wrapper) {
+      this.wrapper = this.overlayer.createElement('div');
+      this.wrapper.classList.add(CSS_PREFIX + '__wrapper');
+
+      this.list = document.createElement('ul');
+      this.wrapper.appendChild(this.list);
+    }
+
+    document.body.removeEventListener('keydown', this.keyDownHandler, {
+      capture: true,
+    });
+
+    if (!this.list) {
+      return;
+    }
+
+    this.list.innerHTML = '';
+    for (let cnt = 0; cnt < this.items.length; cnt++) {
+      const item = this.items[cnt];
+      this.list.appendChild(this.createListItem(item, cnt));
+    }
+
+    if (this.items.length > 0) {
+      document.body.addEventListener('keydown', this.keyDownHandler, {
+        capture: true,
+      });
+    }
+
+    let visible = false;
+    if (this.items.length === 0) {
+      // this.wrapper.style.display = 'none';
+    } else {
+      visible = true;
+      // this.wrapper.style.display = '';
+    }
+
+    if (this.anchor) {
+      anchorElement(this.wrapper, this.anchor, {
+        container: this.editor.config.element,
+      });
+    } else {
+      visible = false;
+    }
+
+    //   if (visible) {
+    //     if (!this.wrapper.matches(':popover-open')) {
+    //       const el = document.activeElement;
+    //       const previousFocus = el instanceof HTMLElement ? el : null;
+    //       this.wrapper.showPopover();
+    //       requestAnimationFrame(() => {
+    //         if (previousFocus && previousFocus.isConnected) {
+    //           previousFocus.focus();
+    //         }
+    //       });
+    //     }
+    //   } else {
+    //     if (this.wrapper.matches(':popover-open')) {
+    //       this.wrapper.hidePopover();
+    //     }
+    //   }
+  }
+
+  setAnchorSelector(anchor: string): void {
+    this.anchor = anchor;
+    this.refresh();
+  }
+}

package/src/autocomplete/ExtensionAutocomplete.ts

@@ -0,0 +1,49 @@
+import type { EditorState, Plugin, Transaction } from 'prosemirror-state';
+
+import { CommandFactories, Extension } from '@kerebron/editor';
+import { CommandFactory } from '@kerebron/editor/commands';
+
+import {
+  AutocompletePlugin,
+  AutocompletePluginKey,
+} from './AutocompletePlugin.js';
+import { AutocompleteConfig, AutocompleteSource } from './types.js';
+
+export class ExtensionAutocomplete extends Extension {
+  name = 'autocomplete';
+
+  public constructor(
+    public override config: AutocompleteConfig = {},
+  ) {
+    super(config);
+  }
+
+  override getCommandFactories(): Partial<CommandFactories> {
+    const addAutocompleteSource: CommandFactory = (
+      autocompleteSource: AutocompleteSource,
+    ) => {
+      return (state: EditorState, dispatch?: (tr: Transaction) => void) => {
+        const tr = state.tr;
+        tr.setMeta(AutocompletePluginKey, {
+          addAutocompleteSource: { autocompleteSource },
+        });
+
+        if (dispatch) {
+          dispatch(tr);
+        }
+
+        return true;
+      };
+    };
+
+    return {
+      addAutocompleteSource,
+    };
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      new AutocompletePlugin(this.config, this.editor),
+    ];
+  }
+}

package/src/autocomplete/createDefaultMatcher.ts

@@ -0,0 +1,94 @@
+import { ResolvedPos } from 'prosemirror-model';
+import { AutocompleteMatcher, SuggestionMatch } from './types.js';
+
+// source: https://stackoverflow.com/a/6969486
+export function escapeForRegEx(string: string): string {
+  return string.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+}
+
+export interface MatcherConfig {
+  char?: string;
+  allowSpaces?: boolean;
+  allowToIncludeChar?: boolean;
+  allowedPrefixes?: string[] | null;
+  startOfLine?: boolean;
+}
+
+export function createDefaultMatcher(
+  config: MatcherConfig = {},
+): AutocompleteMatcher {
+  const char = config.char || '@';
+  const allowToIncludeChar = config.allowToIncludeChar || false;
+  const allowedPrefixes = config.allowedPrefixes || [' '];
+  const startOfLine = config.startOfLine || false;
+
+  return ($position: ResolvedPos): SuggestionMatch | undefined => {
+    const allowSpaces = config.allowSpaces && !allowToIncludeChar;
+
+    const escapedChar = escapeForRegEx(char);
+    const suffix = new RegExp(`\\s${escapedChar}$`);
+    const prefix = startOfLine ? '^' : '';
+    const finalEscapedChar = allowToIncludeChar ? '' : escapedChar;
+    const regexp = allowSpaces
+      ? new RegExp(
+        `${prefix}${escapedChar}.*?(?=\\s${finalEscapedChar}|$)`,
+        'gm',
+      )
+      : new RegExp(
+        `${prefix}(?:^)?${escapedChar}[^\\s${finalEscapedChar}]*`,
+        'gm',
+      );
+
+    const text = $position.nodeBefore?.isText && $position.nodeBefore.text;
+
+    if (!text) {
+      return undefined;
+    }
+
+    const textFrom = $position.pos - text.length;
+    const match = Array.from(text.matchAll(regexp)).pop();
+
+    if (!match || match.input === undefined || match.index === undefined) {
+      return undefined;
+    }
+
+    // JavaScript doesn't have lookbehinds. This hacks a check that first character
+    // is a space or the start of the line
+    const matchPrefix = match.input.slice(
+      Math.max(0, match.index - 1),
+      match.index,
+    );
+    const matchPrefixIsAllowed = new RegExp(
+      `^[${allowedPrefixes?.join('')}\0]?$`,
+    )
+      .test(matchPrefix);
+
+    if (allowedPrefixes !== null && !matchPrefixIsAllowed) {
+      return undefined;
+    }
+
+    // The absolute position of the match in the document
+    const from = textFrom + match.index;
+    let to = from + match[0].length;
+
+    // Edge case handling; if spaces are allowed and we're directly in between
+    // two triggers
+    if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+      match[0] += ' ';
+      to += 1;
+    }
+
+    // If the $position is located within the matched substring, return that range
+    if (from < $position.pos && to >= $position.pos) {
+      return {
+        range: {
+          from,
+          to,
+        },
+        query: match[0],
+      };
+    }
+
+    return undefined;
+  };
+}

package/src/autocomplete/createPosMatcher.ts

@@ -0,0 +1,21 @@
+import { ResolvedPos } from 'prosemirror-model';
+import { AutocompleteMatcher, SuggestionMatch } from './types.js';
+
+export function createPosMatcher(): AutocompleteMatcher {
+  return ($position: ResolvedPos): SuggestionMatch | undefined => {
+    const textFrom = $position.pos;
+
+    const query = '';
+
+    const from = textFrom;
+    const to = from + query.length;
+
+    return {
+      range: {
+        from,
+        to,
+      },
+      query,
+    };
+  };
+}

package/src/autocomplete/createRegexMatcher.ts

@@ -0,0 +1,70 @@
+import type { ResolvedPos } from 'prosemirror-model';
+import { AutocompleteMatcher, SuggestionMatch } from './types.js';
+
+export function ensureAnchor(expr: RegExp, start: boolean) {
+  let { source } = expr;
+  let addStart = start && source[0] != '^',
+    addEnd = source[source.length - 1] != '$';
+  if (!addStart && !addEnd) return expr;
+  return new RegExp(
+    `${addStart ? '^' : ''}(?:${source})${addEnd ? '$' : ''}`,
+    expr.flags ?? (expr.ignoreCase ? 'i' : ''),
+  );
+}
+
+function matchBefore($position: ResolvedPos, expr: RegExp) {
+  const text = $position.nodeBefore?.isText && $position.nodeBefore.text;
+
+  if (!text) {
+    return null;
+  }
+
+  const textFrom = $position.pos - text.length;
+
+  const start = Math.max(textFrom, $position.pos - 250);
+  const str = text.slice();
+
+  const found = str.search(ensureAnchor(expr, false));
+
+  return found < 0
+    ? null
+    : { from: start + found, to: $position.pos, text: str.slice(found) };
+}
+
+export function createRegexMatcher(
+  regexes: RegExp[],
+): AutocompleteMatcher {
+  return ($position: ResolvedPos): SuggestionMatch | undefined => {
+    const text = $position.nodeBefore?.isText && $position.nodeBefore.text;
+
+    if (!text) {
+      return undefined;
+    }
+    const textFrom = $position.pos - text.length;
+
+    const matches = regexes.map((regex) => matchBefore($position, regex))
+      .filter((m) => !!m);
+
+    if (matches.length === 0) {
+      return undefined;
+    }
+
+    matches.sort((a, b) => b.text.length - a.text.length);
+
+    let from = matches[0].from;
+    let matchedText = matches[0].text;
+    let to = matches[0].to;
+    while (matchedText.match(/^\s/)) {
+      matchedText = matchedText.substring(1);
+      from++;
+    }
+
+    return {
+      range: {
+        from,
+        to,
+      },
+      query: matchedText,
+    };
+  };
+}

package/src/autocomplete/mod.ts

@@ -0,0 +1,5 @@
+export * from './types.js';
+export * from './ExtensionAutocomplete.js';
+export * from './createRegexMatcher.js';
+export * from './createDefaultMatcher.js';
+export * from './createPosMatcher.js';

package/src/autocomplete/types.ts

@@ -0,0 +1,90 @@
+import type { ResolvedPos } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+
+import type { TextRange } from '@kerebron/editor';
+
+export interface AutocompleteConfig {
+  decorationTag?: string;
+  decorationClass?: string;
+}
+
+export interface AutocompleteProps {
+  range: TextRange;
+  isActive?: boolean;
+}
+
+export type AutocompleteMatcher = (
+  pos: ResolvedPos,
+) => SuggestionMatch | undefined;
+
+export interface AutocompleteSource<I = any, TSelected = any> {
+  getItems: (query: string, props: AutocompleteProps) => I[] | Promise<I[]>;
+
+  onSelect: (selected: TSelected, range: TextRange) => void;
+  allow?: (
+    props: AutocompleteProps,
+  ) => boolean;
+
+  matchers?: AutocompleteMatcher[];
+  renderer?: AutocompleteRenderer<I, TSelected>;
+  triggerKeys?: string[];
+}
+
+export interface SuggestionKeyDownProps {
+  event: KeyboardEvent;
+}
+
+export type SuggestionMatch = {
+  range: TextRange;
+  query: string;
+};
+
+export interface SuggestionProps<I = any, TSelected = any> {
+  match: SuggestionMatch;
+
+  /**
+   * The suggestion items array.
+   */
+  items: I[];
+
+  // /**
+  //  * The decoration node HTML element
+  //  * @default null
+  //  */
+  // decorationNode: Element | null;
+
+  // anchor: HTMLElement;
+
+  /**
+   * The function that returns the client rect
+   * @default null
+   * @example () => new DOMRect(0, 0, 0, 0)
+   */
+  // clientRect?: (() => DOMRect | null) | null;
+}
+
+export interface AutocompleteRenderer<I = any, TSelected = any> {
+  setAnchorSelector(anchor: string): void;
+  setCommand: (command: (props: TSelected) => void) => void;
+  setResponse: () => void;
+  onUpdate: (props: SuggestionProps<I, TSelected>) => void;
+  onKeyDown?: (props: SuggestionKeyDownProps) => boolean;
+  destroy: () => void;
+  refresh: () => void;
+
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  removeEventListener(
+    type: string,
+    callback: EventListenerOrEventListenerObject | null,
+    options?: EventListenerOptions | boolean,
+  ): void;
+}
+
+export type MatchedSource = {
+  match: SuggestionMatch;
+  source: AutocompleteSource;
+};

package/src/hover/ExtensionHover.ts

@@ -0,0 +1,46 @@
+import type { EditorState, Plugin, Transaction } from 'prosemirror-state';
+
+import { CommandFactories, Extension } from '@kerebron/editor';
+import { CommandFactory } from '@kerebron/editor/commands';
+
+import { HoverPlugin, HoverPluginKey } from './HoverPlugin.js';
+import { HoverConfig, HoverSource } from './types.js';
+
+export class ExtensionHover extends Extension {
+  name = 'hover';
+
+  public constructor(
+    public override config: HoverConfig = {},
+  ) {
+    super(config);
+  }
+
+  override getCommandFactories(): Partial<CommandFactories> {
+    const addHoverSource: CommandFactory = (
+      hoverSource: HoverSource,
+    ) => {
+      return (state: EditorState, dispatch?: (tr: Transaction) => void) => {
+        const tr = state.tr;
+        tr.setMeta(HoverPluginKey, {
+          addHoverSource: { hoverSource },
+        });
+
+        if (dispatch) {
+          dispatch(tr);
+        }
+
+        return true;
+      };
+    };
+
+    return {
+      addHoverSource,
+    };
+  }
+
+  override getProseMirrorPlugins(): Plugin[] {
+    return [
+      new HoverPlugin(this.config, this.editor),
+    ];
+  }
+}