@kerebron/extension-ui 0.8.1

package/src/hover/HoverPlugin.ts

@@ -0,0 +1,467 @@
+import { Node as PmNode } from 'prosemirror-model';
+import { Plugin, PluginKey, Selection, Transaction } from 'prosemirror-state';
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view';
+
+import { type CoreEditor, TextRange } from '@kerebron/editor';
+import { debounce } from '@kerebron/editor/utilities';
+
+import { HoverConfig, HoverMatch, HoverSource, HoverTrigger } from './types.js';
+import { MarkdownRenderer } from './MarkdownRenderer.js';
+
+export const HoverPluginKey = new PluginKey<HoverState>(
+  'hover',
+);
+
+interface HoverMeta {
+  addHoverSource?: {
+    hoverSource: HoverSource;
+  };
+  trigger?: HoverTrigger;
+  setRequest?: HoverMatch;
+  setResponse?: {
+    id: number;
+    text: string;
+  };
+  clearRequest?: boolean;
+}
+
+class HoverState {
+  idGenerator = 1;
+
+  hoverSources: HoverSource[] = [];
+
+  request?: {
+    decorationId: string;
+    id: number;
+    range: TextRange;
+    // pos: number;
+    // inside: number;
+    // node: PmNode;
+    uri?: string;
+    source: HoverSource;
+    renderer: MarkdownRenderer;
+  };
+
+  response?: {
+    id: number;
+    text: string;
+  };
+
+  constructor(private editor: CoreEditor) {
+    this.onMouseMove = debounce(this.onMouseMove.bind(this), 200);
+    this.onMouseLeave = debounce(this.onMouseLeave.bind(this), 200);
+    this.matchSource = debounce(this.matchSource.bind(this), 200);
+  }
+
+  clearActive() {
+    if (this.request) {
+      this.request.renderer.destroy();
+      this.request = undefined;
+    }
+    this.response = undefined;
+  }
+
+  private matchSource(trigger: HoverTrigger): void {
+    const sources: HoverSource[] = this.hoverSources;
+    let matched: HoverMatch | undefined = undefined;
+    const parentNode = trigger.node;
+
+    // if (parentNode && !parentNode.isTextblock && !parentNode.isText) { //
+    //   console.trace('!parentNode', trigger);
+    //   return;
+    // }
+
+    for (const source of sources) {
+      if (!source.match) {
+        continue;
+      }
+
+      const match = source.match(trigger);
+      console.log('matchSource', match);
+
+      if (match) {
+        matched = match;
+
+        this.handleSource(match);
+        break;
+      }
+    }
+
+    if (!matched) {
+      this.dispatchMeta({ clearRequest: true });
+    }
+
+    console.groupEnd();
+
+    return undefined;
+  }
+
+  handleSource(match?: HoverMatch) {
+    if (match) {
+      this.dispatchMeta({
+        setRequest: {
+          source: match.source,
+          range: match.range,
+          text: match.text,
+          uri: match.uri,
+        },
+      });
+    } else {
+      this.clearRequest();
+    }
+  }
+
+  onMouseLeave(view: EditorView, event: Event | undefined) {
+    this.dispatchMeta({
+      clearRequest: true,
+    });
+  }
+
+  onMouseMove(view: EditorView, event: MouseEvent) {
+    const coords = {
+      left: event.clientX,
+      top: event.clientY,
+    };
+
+    const result = view.posAtCoords(coords);
+
+    if (!result) return;
+    if (result.inside === -1) return;
+
+    const pos = result.pos;
+    const node = view.state.doc.nodeAt(pos) || undefined;
+
+    if (!node) {
+      console.error('NO NODE at', pos);
+    }
+
+    // Handle nodeview for code_block
+    const dom = view.nodeDOM(pos);
+    if (dom instanceof HTMLElement) {
+      const editorElement = dom.querySelector('[data-uri]');
+      const uri =
+        (editorElement ? editorElement.getAttribute('data-uri') : undefined) ||
+        undefined;
+
+      if (uri && editorElement) {
+        const range = getNodeRange(event);
+        if (range) {
+          const offset = getOffsetWithinElement(editorElement, range);
+
+          result.inside = offset;
+          if (result.inside === -1) return;
+
+          this.dispatchMeta({
+            trigger: {
+              pos: result.pos,
+              inside: result.inside,
+              node,
+              uri,
+            },
+          });
+        }
+        return;
+      }
+    }
+
+    if (!node) {
+      return;
+    }
+
+    // avoid redundant updates
+    // if (this.request?.range.from === result.range.from && this.request?.range.to === result.inside) return;
+
+    this.dispatchMeta({
+      trigger: {
+        pos: result.pos,
+        inside: result.inside,
+        node,
+        uri: undefined,
+      },
+    });
+  }
+
+  handleCommands(pluginMeta: HoverMeta | undefined, transaction: Transaction) {
+    if (!pluginMeta) {
+      return false;
+    }
+
+    if (pluginMeta.addHoverSource) {
+      this.hoverSources.push(pluginMeta.addHoverSource.hoverSource);
+      return true;
+    }
+
+    if (pluginMeta.trigger) {
+      console.group('hover.trigger', pluginMeta.trigger);
+      this.matchSource(pluginMeta?.trigger);
+      console.groupEnd();
+      return true;
+    }
+
+    if (pluginMeta?.setRequest) {
+      console.group('setRequest');
+      const id = this.idGenerator++;
+      const decorationId = `id_${Math.floor(Math.random() * 0xffffffff)}`;
+
+      let renderer = this.request?.renderer;
+      if (this.request?.source !== pluginMeta.setRequest.source) {
+        if (renderer) {
+          renderer.destroy();
+          renderer = undefined;
+        }
+      }
+      if (!renderer) {
+        renderer = new MarkdownRenderer(this.editor);
+        renderer.addEventListener('close', () => {
+          this.dispatchMeta({
+            clearRequest: true,
+          });
+        });
+      }
+
+      renderer.setAnchorSelector(`[data-decoration-id="${decorationId}"]`, {
+        above: true,
+      });
+
+      this.request = {
+        id,
+        decorationId,
+        range: pluginMeta.setRequest.range,
+        uri: pluginMeta.setRequest.uri,
+        source: pluginMeta.setRequest.source,
+        renderer,
+      };
+
+      const request = this.request;
+
+      const go = async () => {
+        const item = await request.source.getItem(request.range);
+
+        this.dispatchMeta({
+          setResponse: {
+            id,
+            text: item.text,
+          },
+        });
+      };
+      go();
+
+      console.groupEnd();
+
+      return true;
+    }
+
+    if (pluginMeta?.setResponse && this.request) {
+      this.response = {
+        id: pluginMeta?.setResponse.id,
+        text: pluginMeta?.setResponse.text,
+      };
+      console.group('setResponse', this.response, this.request?.renderer);
+
+      this.request?.renderer.setResponse({ text: this.response.text });
+
+      console.groupEnd();
+      return true;
+    }
+
+    if (pluginMeta.clearRequest) {
+      console.trace('clearRequest');
+      this.clearRequest();
+      return true;
+    }
+
+    return false;
+  }
+
+  clearRequest() {
+    if (this.request) {
+      this.request.renderer.destroy();
+      this.request = undefined;
+    }
+    this.response = undefined;
+  }
+
+  dispatchMeta(meta: HoverMeta) {
+    const tr = this.editor.state.tr;
+    tr.setMeta(HoverPluginKey, meta);
+    this.editor.dispatchTransaction(tr);
+  }
+}
+
+function getNodeRange(
+  { clientX, clientY }: { clientX: number; clientY: number },
+) {
+  let range;
+
+  if (document.caretPositionFromPoint) {
+    const pos = document.caretPositionFromPoint(clientX, clientY);
+    if (!pos) return;
+    range = document.createRange();
+    range.setStart(pos.offsetNode, pos.offset);
+  } else if (document.caretRangeFromPoint) {
+    range = document.caretRangeFromPoint(clientX, clientY);
+  }
+
+  return range;
+}
+
+function getOffsetWithinElement(element: Node, range: Range): number {
+  const container = range.startContainer;
+  const offsetInNode = range.startOffset;
+
+  if (container === element) {
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    const firstText = walker.nextNode();
+    if (!firstText) return offsetInNode;
+    let total = 0;
+    let node: Text | null = firstText as Text;
+    while (node) {
+      if (node === container) return total + offsetInNode;
+      total += node.nodeValue?.length ?? 0;
+      node = walker.nextNode() as Text | null;
+    }
+    return total;
+  }
+
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+  let total = 0;
+  let textNode = walker.nextNode() as Text | null;
+  while (textNode) {
+    if (textNode === container) {
+      return total + offsetInNode;
+    }
+    total += textNode.nodeValue?.length ?? 0;
+    textNode = walker.nextNode() as Text | null;
+  }
+  return -1;
+}
+
+// function matchSource(selection: Selection, sources: HoverSource[]) {
+//   let matched: MatchedSource | undefined = undefined;
+//   const parentNode = selection.$anchor.parent;
+
+//   for (const source of sources) {
+//     if (!source.match) {
+//       continue;
+//     }
+
+//     const trigger: HoverTrigger = {
+//       pos: 0,
+//       inside: 0,
+//       node: parentNode,
+//       uri: parentNode.attrs.uri
+//     };
+
+//     const match = source.match(trigger);
+//     if (match) {
+//       matched = match;
+//       return matched;
+//     }
+//   }
+//   return undefined;
+// }
+
+export class HoverPlugin<Item, TSelected> extends Plugin<HoverState> {
+  constructor(config: HoverConfig, editor: CoreEditor) {
+    super({
+      key: HoverPluginKey,
+      state: {
+        init() {
+          return new HoverState(editor);
+        },
+
+        apply(transaction, nextHoverState: HoverState, prevState, state) {
+          if (transaction.isGeneric) {
+            return nextHoverState;
+          }
+
+          const pluginMeta: HoverMeta | undefined = transaction.getMeta(
+            HoverPluginKey,
+          );
+
+          if (nextHoverState.handleCommands(pluginMeta, transaction)) {
+            return nextHoverState;
+          }
+
+          if (transaction.docChanged) {
+            nextHoverState.dispatchMeta({ clearRequest: true });
+          }
+
+          return nextHoverState;
+        },
+      },
+
+      view() {
+        return {
+          update: async (view, prevState) => {
+            return;
+          },
+
+          destroy: () => {
+            const pluginState = HoverPluginKey.getState(editor.state);
+            if (!pluginState) {
+              return;
+            }
+
+            if (pluginState.request) {
+              pluginState.request.renderer.destroy();
+            }
+          },
+        };
+      },
+
+      props: {
+        handleDOMEvents: {
+          mousemove: (view, event) => {
+            const pluginState = HoverPluginKey.getState(editor.state);
+            if (!pluginState) {
+              return;
+            }
+            pluginState.onMouseMove(view, event);
+            return;
+          },
+          mouseleave: (view, event) => {
+            const pluginState = HoverPluginKey.getState(editor.state);
+            if (!pluginState) {
+              return;
+            }
+            pluginState.onMouseLeave(view, event);
+            return;
+          },
+        },
+
+        decorations(state) {
+          const { request } = this.getState(state) || {};
+
+          if (!request) {
+            return null;
+          }
+
+          const attrs = {
+            class: config.decorationClass || 'kb-hover--decor',
+            'data-decoration-id': request.decorationId,
+          };
+
+          if (request.range.from === request.range.to) {
+            return DecorationSet.create(state.doc, [
+              Decoration.widget(request.range.from, () => {
+                const widgetNode = document.createElement('span');
+                widgetNode.className = attrs.class;
+                for (const [k, v] of Object.entries(attrs)) {
+                  widgetNode.setAttribute(k, v);
+                }
+                return widgetNode;
+              }, attrs),
+            ]);
+          } else {
+            return DecorationSet.create(state.doc, [
+              Decoration.inline(request.range.from, request.range.to, {
+                ...attrs,
+              }),
+            ]);
+          }
+        },
+      },
+    });
+  }
+}

package/src/hover/MarkdownRenderer.ts

@@ -0,0 +1,68 @@
+import { CoreEditor } from '@kerebron/editor';
+import { anchorElement, type OverLayer } from '../overlayer/mod.js';
+
+const CSS_PREFIX = 'kb-hover';
+
+export interface AnchorOpts {
+  above?: boolean;
+}
+
+export class MarkdownRenderer extends EventTarget {
+  overlayer: OverLayer;
+  wrapper: HTMLElement | undefined;
+  anchor?: { selector: string; opts: AnchorOpts };
+  text: string | undefined;
+
+  constructor(private editor: CoreEditor) {
+    super();
+
+    this.overlayer = this.editor.ci.resolve('overlayer');
+  }
+
+  setResponse({ text }: { text: string | undefined }) {
+    this.text = text;
+    this.refresh();
+  }
+
+  refresh() {
+    if (!this.text) {
+      if (this.wrapper) {
+        this.wrapper.style.display = 'none';
+      }
+      return;
+    }
+
+    console.log('MarkdownRenderer this.wrapper', this.wrapper);
+
+    if (!this.wrapper) {
+      this.wrapper = this.overlayer.createElement('div');
+      this.wrapper.classList.add(CSS_PREFIX + '__wrapper');
+    }
+
+    this.wrapper.innerText = this.text;
+    this.wrapper.style.display = '';
+
+    if (this.anchor) {
+      console.log('anchorElement', this.anchor.selector);
+      anchorElement(this.wrapper, this.anchor.selector, {
+        container: this.editor.config.element,
+        above: this.anchor.opts.above,
+      });
+    }
+  }
+
+  destroy() {
+    if (this.wrapper) {
+      this.wrapper.parentNode?.removeChild(this.wrapper);
+      this.wrapper.dispatchEvent(new CustomEvent('removed'));
+      this.wrapper = undefined;
+      this.dispatchEvent(new Event('close'));
+    }
+  }
+
+  setAnchorSelector(selector: string, opts: AnchorOpts): void {
+    console.log('setAnchorSelector', selector);
+    this.anchor = { selector, opts };
+    this.refresh();
+  }
+}

package/src/hover/mod.ts

@@ -0,0 +1,2 @@
+export * from './ExtensionHover.js';
+export * from './types.js';

package/src/hover/types.ts

@@ -0,0 +1,26 @@
+import { Node as PmNode } from 'prosemirror-model';
+import { TextRange } from '@kerebron/editor';
+
+export interface HoverConfig {
+  decorationTag?: string;
+  decorationClass?: string;
+}
+
+export interface HoverTrigger {
+  pos: number;
+  inside: number;
+  node?: PmNode;
+  uri?: string;
+}
+
+export interface HoverMatch {
+  source: HoverSource;
+  range: TextRange;
+  text?: string;
+  uri?: string;
+}
+
+export interface HoverSource<I = any> {
+  match: (trigger: HoverTrigger) => HoverMatch | undefined;
+  getItem: (range: TextRange) => I | Promise<I>;
+}

package/src/mod.ts

@@ -0,0 +1 @@
+export * from './ExtensionUi.js';

package/src/overlayer/mod.ts

@@ -0,0 +1,146 @@
+export class OverLayer {
+  overLayerContainer: HTMLElement;
+
+  stack: HTMLElement[] = [];
+
+  constructor(container?: HTMLElement) {
+    if (!container) {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+      container.classList.add('kb--top-layer');
+    }
+
+    this.overLayerContainer = container;
+  }
+
+  private removeStacked(start: number) {
+    for (let i = this.stack.length - 1; i >= start; i--) {
+      if (this.overLayerContainer.contains(this.stack[i])) {
+        this.overLayerContainer.removeChild(this.stack[i]);
+      }
+    }
+    this.stack.splice(start, this.stack.length - start);
+  }
+
+  createElement<T extends HTMLElement>(
+    type: string,
+    ancestor?: HTMLElement,
+  ): T {
+    const element = document.createElement(type);
+    this.overLayerContainer.appendChild(element);
+
+    const observer = new MutationObserver((mutations) => {
+      if (!element.isConnected) {
+        observer.disconnect();
+        const idx = this.stack.findIndex((item) => item === element);
+        if (idx > -1) {
+          this.removeStacked(idx);
+        }
+        element.dispatchEvent(new CustomEvent('removed'));
+      }
+    });
+
+    if (ancestor) {
+      const idx = this.stack.findIndex((item) => item === ancestor);
+      if (idx > -1) {
+        this.removeStacked(idx + 1);
+      }
+    } else {
+      this.removeStacked(0);
+    }
+
+    this.stack.push(element);
+
+    observer.observe(this.overLayerContainer, {
+      childList: true,
+    });
+
+    return element as T;
+  }
+}
+
+export interface AnchorParams {
+  container?: HTMLElement;
+  above?: boolean;
+}
+
+export function anchorElement(
+  popover: HTMLElement,
+  anchorSelector: string,
+  params?: AnchorParams,
+) {
+  let rafId: number | null = null;
+
+  popover.style.position = 'fixed';
+  popover.setAttribute('data-anchor-selector', anchorSelector);
+
+  function update() {
+    rafId = null;
+
+    const container: HTMLElement = params?.container || document.body;
+    const anchor = container.querySelector(anchorSelector);
+
+    if (anchor) {
+      const rect = anchor.getBoundingClientRect();
+
+      if (params?.above) {
+        popover.style.left = `${rect.left}px`;
+        popover.style.top = `${rect.top - popover.clientHeight}px`;
+      } else {
+        popover.style.left = `${rect.left}px`;
+        popover.style.top = `${rect.bottom}px`;
+      }
+
+      popover.style.display = '';
+    } else {
+      const ids = [];
+      const nodes = container.querySelectorAll('[data-decoration-id]');
+      nodes.forEach((n) => ids.push(n.getAttribute('data-decoration-id')));
+
+      // console.debug('!anchorSelector', anchorSelector, ids);
+      popover.style.display = 'none';
+      scheduleUpdate();
+    }
+  }
+
+  function scheduleUpdate() {
+    if (!rafId) {
+      rafId = requestAnimationFrame(update);
+    }
+  }
+
+  update();
+
+  // const resizeObserver = new ResizeObserver(scheduleUpdate);
+  // resizeObserver.observe(anchor);
+
+  // const moveObserver = new IntersectionObserver(scheduleUpdate);
+  // moveObserver.observe(anchor);
+
+  if (params?.container) {
+    const observer = new MutationObserver((mutations) => {
+      scheduleUpdate();
+    });
+
+    observer.observe(params?.container, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  }
+
+  globalThis.addEventListener('resize', scheduleUpdate, true);
+  document.addEventListener('scroll', scheduleUpdate, true);
+
+  popover.addEventListener('removed', () => {
+    // resizeObserver.disconnect();
+    // moveObserver.disconnect();
+    globalThis.removeEventListener('resize', scheduleUpdate, true);
+    document.removeEventListener('scroll', scheduleUpdate, true);
+
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  });
+}