@kerebron/legacy-compat 0.7.7 → 0.7.8

package/dist/kerebron.js

@@ -10064,7 +10064,9 @@ class CommandManager {
     return () => this.createCan();
   }
   createChain(e, A = !0) {
-    const { commandFactories: n, editor: r } = this, o = this.editor.state, { view: s } = r, a = [], l = !!e, g = e || o.tr, c = createChainableState(g, o), I = () => {
+    const { commandFactories: n, editor: r } = this, o = this.editor.state, { view: s } = r, a = [], l = !!e, g = e || o.tr;
+    g.setMeta("isCommand", !0);
+    const c = createChainableState(g, o), I = () => {
     }, d = {
       ...Object.fromEntries(
         Object.entries(n).map(([h, u]) => [h, (...E) => {
@@ -34389,6 +34391,75 @@ class ExtensionTables extends Extension {
     ];
   }
 }
+const CSS_PREFIX = "kb-autocomplete";
+class DefaultRenderer extends EventTarget {
+  constructor(e) {
+    super(), this.editor = e, this.items = [], this.pos = -1, this.command = () => {
+    }, this.keyDownHandler = (A) => {
+      this.onKeyDown({ event: A }) && (A.stopPropagation(), A.preventDefault());
+    };
+  }
+  onUpdate(e) {
+    this.command = e.command, this.items.splice(0, this.items.length, ...e.items), this.props = e, this.refresh();
+  }
+  destroy() {
+    document.body.removeEventListener("keydown", this.keyDownHandler, {
+      capture: !0
+    }), this.wrapper && (this.wrapper.parentNode?.removeChild(this.wrapper), this.wrapper = void 0, this.dispatchEvent(new Event("close"))), this.pos = -1;
+  }
+  onKeyDown(e) {
+    if (!this.wrapper || this.items.length === 0)
+      return !1;
+    if (e.event.key === "Escape" && this.wrapper)
+      return this.wrapper.parentNode?.removeChild(this.wrapper), this.wrapper = void 0, !0;
+    if (e.event.key === "ArrowUp" && this.pos > -1)
+      return this.pos = this.pos - 1, this.refresh(), !0;
+    if (e.event.key === "ArrowDown" && this.pos < this.items.length - 1)
+      return this.pos++, this.refresh(), !0;
+    if (e.event.key === "Enter" && this.pos > -1 && this.pos < this.items.length) {
+      const A = this.items[this.pos];
+      return this.items.splice(0, this.items.length), this.destroy(), this.command(A), !0;
+    }
+    return !1;
+  }
+  createListItem(e, A) {
+    const n = document.createElement("li");
+    return A === this.pos && n.classList.add("active"), n.innerText = "" + e, n.style.cursor = "pointer", n.addEventListener("click", () => {
+      this.destroy(), this.command(e);
+    }), n;
+  }
+  refresh() {
+    if (this.wrapper || (this.wrapper = document.createElement("dialog"), this.wrapper.classList.add(CSS_PREFIX + "__wrapper"), document.body.appendChild(this.wrapper), this.list = document.createElement("ul"), this.wrapper.appendChild(this.list)), document.body.removeEventListener("keydown", this.keyDownHandler, {
+      capture: !0
+    }), !this.list)
+      return;
+    this.list.innerHTML = "";
+    for (let n = 0; n < this.items.length; n++) {
+      const r = this.items[n];
+      this.list.appendChild(this.createListItem(r, n));
+    }
+    this.items.length > 0 && document.body.addEventListener("keydown", this.keyDownHandler, {
+      capture: !0
+    });
+    let e = !1;
+    this.items.length === 0 || (e = !0);
+    const A = this.props?.clientRect?.();
+    if (A?.height) {
+      const n = A.left, r = A.bottom;
+      this.wrapper.style.left = n + "px", this.wrapper.style.top = r + "px";
+    } else
+      e = !1;
+    if (e) {
+      if (!this.wrapper.open) {
+        const n = document.activeElement, r = n instanceof HTMLElement ? n : null;
+        this.wrapper.show(), requestAnimationFrame(() => {
+          r && r.isConnected && r.focus();
+        });
+      }
+    } else
+      this.wrapper.open && this.wrapper.close();
+  }
+}
 function escapeForRegEx(t) {
   return t.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
 }
@@ -34403,10 +34474,10 @@ function createDefaultMatcher(t = {}) {
       "gm"
     ), d = o.nodeBefore?.isText && o.nodeBefore.text;
     if (!d)
-      return null;
+      return;
     const h = o.pos - d.length, u = Array.from(d.matchAll(I)).pop();
     if (!u || u.input === void 0 || u.index === void 0)
-      return null;
+      return;
     const B = u.input.slice(
       Math.max(0, u.index - 1),
       u.index
@@ -34414,196 +34485,222 @@ function createDefaultMatcher(t = {}) {
       `^[${n?.join("")}\0]?$`
     ).test(B);
     if (n !== null && !E)
-      return null;
+      return;
     const f = h + u.index;
     let Q = f + u[0].length;
-    return s && l.test(d.slice(Q - 1, Q + 1)) && (u[0] += " ", Q += 1), f < o.pos && Q >= o.pos ? {
-      range: {
-        from: f,
-        to: Q
-      },
-      query: u[0],
-      text: u[0]
-    } : null;
+    if (s && l.test(d.slice(Q - 1, Q + 1)) && (u[0] += " ", Q += 1), f < o.pos && Q >= o.pos)
+      return {
+        range: {
+          from: f,
+          to: Q
+        },
+        query: u[0]
+      };
   };
 }
-const CSS_PREFIX = "kb-autocomplete";
-class DefaultRenderer extends EventTarget {
-  constructor(e) {
-    super(), this.editor = e, this.items = [], this.pos = -1, this.command = () => {
-    };
-  }
-  onStart(e) {
-    this.command = e.command, this.wrapper && this.wrapper.parentElement?.removeChild(this.wrapper);
-    const A = "root" in this.editor.view ? this.editor.view.root : document || document;
-    this.wrapper = document.createElement("ul"), this.wrapper.classList.add(CSS_PREFIX + "__wrapper"), A.appendChild(this.wrapper), this.items.splice(0, this.items.length, ...e.items), this.recreateList(e);
-  }
-  onUpdate(e) {
-    this.command = e.command, this.items.splice(0, this.items.length, ...e.items), this.recreateList(e);
-  }
-  onExit() {
-    this.wrapper && (this.wrapper.parentNode?.removeChild(this.wrapper), this.wrapper = void 0), this.dispatchEvent(new Event("close")), this.pos = -1;
-  }
-  onKeyDown(e) {
-    return !this.wrapper || this.items.length === 0 ? !1 : e.event.key === "Escape" && this.wrapper ? (this.wrapper.parentNode?.removeChild(this.wrapper), this.wrapper = void 0, !0) : e.event.key === "ArrowUp" ? (this.pos > -1 && (this.pos = this.pos - 1, this.recreateList()), !0) : e.event.key === "ArrowDown" ? (this.pos < this.items.length - 1 && (this.pos++, this.recreateList()), !0) : e.event.key === "Enter" && this.pos > -1 && this.pos < this.items.length ? (this.command(this.items[this.pos]), this.items.splice(0, this.items.length), this.onExit(), !0) : !1;
-  }
-  createListItem(e, A) {
-    const n = document.createElement("li");
-    return A === this.pos && n.classList.add("active"), n.innerText = "" + e, n.style.cursor = "pointer", n.addEventListener("click", () => {
-      this.command(e);
-    }), n;
-  }
-  recreateList(e) {
-    if (!this.wrapper)
-      return;
-    this.wrapper.innerHTML = "";
-    for (let n = 0; n < this.items.length; n++) {
-      const r = this.items[n];
-      this.wrapper.appendChild(this.createListItem(r, n));
-    }
-    this.items.length === 0 ? this.wrapper.style.display = "none" : this.wrapper.style.display = "";
-    const A = e?.clientRect?.();
-    if (A?.height) {
-      const n = A.left, r = A.bottom;
-      this.wrapper.style.left = n + "px", this.wrapper.style.top = r + "px";
-    }
+const AutocompletePluginKey = new PluginKey(
+  "autocomplete"
+);
+function matchSource(t, e) {
+  let A;
+  const n = t.$anchor.parent;
+  for (const r of e) {
+    if (!r.matchers)
+      continue;
+    const o = r.matchers;
+    if (!["code_blocxk"].includes(n.type.name))
+      for (const s of o) {
+        const a = s(t.$from);
+        if (a)
+          return A = {
+            source: r,
+            match: a
+          }, A;
+      }
   }
 }
-const AutocompletePluginKey = new PluginKey("autocomplete");
 class AutocompletePlugin extends Plugin {
   constructor(e, A) {
-    let n;
-    const r = e.renderer || new DefaultRenderer(A);
     super({
       key: AutocompletePluginKey,
+      state: {
+        // Initialize the plugin's internal state.
+        init() {
+          return {
+            autocompleteSources: [],
+            manual: !1,
+            active: void 0,
+            composing: !1
+          };
+        },
+        // Apply changes to the plugin state from a view transaction.
+        apply(n, r, o, s) {
+          const a = n.getMeta(
+            AutocompletePluginKey
+          ), l = { ...r };
+          !a && n.isGeneric;
+          const { editable: g, composing: c } = A.view, { selection: I } = n, d = () => {
+            l.active && (l.active.renderer.destroy(), l.active = void 0), l.decorationId = void 0;
+          }, h = (B) => {
+            if (B && (!B.source.allow || B.source.allow({
+              range: B.match.range,
+              isActive: !!l.active
+            }))) {
+              const { source: E, match: f } = B;
+              console.info("Trigger matcher autocomplete", f);
+              let Q = l.active?.renderer;
+              l.active?.source !== E && Q && (Q.destroy(), Q = void 0), Q || (Q = new DefaultRenderer(A), Q.addEventListener("close", () => {
+                const m = A.state.tr.setMeta(AutocompletePluginKey, {
+                  deactivate: !0
+                });
+                console.info("Manual autocomplete deactivate"), A.view.dispatch(m);
+              })), l.active = {
+                renderer: Q,
+                source: E,
+                match: f
+              };
+              const p = `id_${Math.floor(Math.random() * 4294967295)}`;
+              l.decorationId = l.decorationId || p;
+            } else
+              d();
+          };
+          if (a?.addAutocompleteSource) {
+            const B = {
+              ...a.addAutocompleteSource.autocompleteSource
+            };
+            return !B.matchers && B.triggerKeys?.length === 1 && (B.matchers = [
+              createDefaultMatcher({ char: B.triggerKeys[0] })
+            ]), l.autocompleteSources.push(
+              B
+            ), l;
+          }
+          if (a?.activate) {
+            console.info("Trigger manual autocomplete");
+            const B = matchSource(I, l.autocompleteSources);
+            return h(B), l.manual = !0, l;
+          }
+          if (a?.deactivate)
+            return console.info("Deactivate autocomplete"), d(), l;
+          if (!g || !I.empty && !A.view.composing)
+            return d(), l;
+          if (l.active && !c && !l.composing && (I.from < l.active.match.range.from || I.from > l.active.match.range.to) && d(), l.composing = c, n.getMeta("isCommand"))
+            return l;
+          const u = matchSource(I, l.autocompleteSources);
+          return h(u), l.manual = !1, l;
+        }
+      },
       view() {
         return {
-          update: async (o, s) => {
-            const a = this.key?.getState(s), l = this.key?.getState(o.state), g = a.active && l.active && a.range.from !== l.range.from, c = !a.active && l.active, I = a.active && !l.active, d = !c && !I && a.query !== l.query, h = c || g && d, u = d || g;
-            let B = I || g && d;
-            if (!h && !u && !B)
+          update: async (n, r) => {
+            const o = this.key?.getState(r), s = this.key?.getState(n.state), a = o.active && s.active && o.active.match.range.from !== s.active.match.range.from, l = !o.active?.match && s.active?.match, g = o.active?.match && !s.active?.match, c = !l && !g && o.active?.match.query !== s.active?.match.query;
+            if (g && o.active) {
+              o.active.renderer.destroy();
               return;
-            const E = B && !h ? a : l, f = o.dom.querySelector(
-              `[data-decoration-id="${E.decorationId}"]`
-            );
-            if (n = {
-              range: E.range,
-              query: E.query,
-              text: E.text,
-              items: [],
-              command: (Q) => e.onSelect ? e.onSelect(Q, E.range) : () => {
-              },
-              decorationNode: f,
-              // virtual node for popper.js or tippy.js
-              // this can be used for building popups without a DOM node
-              clientRect: f ? () => {
-                const { decorationId: Q } = this.key?.getState(A.state);
-                return o.dom.querySelector(
-                  `[data-decoration-id="${Q}"]`
-                )?.getBoundingClientRect() || null;
-              } : null
-            }, h && r?.onBeforeStart?.(n), u && r?.onBeforeUpdate?.(n), (u || h) && e.getItems) {
+            }
+            if (s.active && (o.active?.match.query !== s.active.match.query || a)) {
+              n.dom.querySelector(
+                `[data-decoration-id="${s.decorationId}"]`
+              );
+              const B = s.active.source.onSelect, E = s.active.match.range, f = {
+                match: s.active.match,
+                items: [],
+                command: (Q) => B(Q, E),
+                // decorationNode,
+                // virtual node for popper.js or tippy.js
+                // this can be used for building popups without a DOM node
+                clientRect: () => {
+                  const { decorationId: Q } = s;
+                  return n.dom.querySelector(
+                    `[data-decoration-id="${Q}"]`
+                  )?.getBoundingClientRect() || null;
+                }
+              };
+              s.active.renderer.onUpdate(f);
               try {
-                const Q = { state: E, range: E.range, isActive: !0 };
-                n.items = await e.getItems(E.query, Q);
+                const Q = {
+                  range: s.active.match.range,
+                  isActive: !!s.active
+                }, p = await s.active.source.getItems(
+                  s.active.match.query,
+                  Q
+                );
+                s.active.renderer.onUpdate({ ...f, items: p });
               } catch (Q) {
                 if (Q.isLSP)
-                  n.items = [], console.error(
+                  console.error(
                     "LSP error config.getItems()",
                     Q.message,
-                    e.getItems
+                    s.active.source.getItems
                   );
                 else
                   throw Q;
               }
-              n.items.length === 0 && (B = !0);
             }
-            B && r?.onExit?.(n), u && r?.onUpdate?.(n), h && r?.onStart?.(n);
           },
           destroy: () => {
-            n && r?.onExit?.(n);
+            const n = AutocompletePluginKey.getState(A.state);
+            if (!n)
+              return;
+            const { active: r } = n;
+            r && r.renderer.destroy();
           }
         };
       },
-      state: {
-        // Initialize the plugin's internal state.
-        init() {
-          return {
-            manual: !1,
-            active: !1,
-            range: {
-              from: 0,
-              to: 0
-            },
-            query: null,
-            text: null,
-            composing: !1
-          };
-        },
-        // Apply changes to the plugin state from a view transaction.
-        apply(o, s, a, l) {
-          const { composing: c } = A.view, { selection: I } = o, { empty: d, from: h } = I, u = { ...s }, B = o.getMeta(AutocompletePluginKey);
-          if (!B && !o.isGeneric)
-            return u;
-          if (B?.type === "deactivate")
-            return console.info("Deactivate autocomplete"), u.active = !1, u;
-          if (B?.type === "activate")
-            return console.info("Trigger manual autocomplete"), u.range = { from: I.from, to: I.to }, u.active = !0, u.manual = !0, u.query = null, u;
-          u.composing = c;
-          const E = I.$anchor.parent;
-          if (!["code_block"].includes(E?.type.name) && (d || A.view.composing)) {
-            (h < s.range.from || h > s.range.to) && !c && !s.composing && (u.active = !1);
-            const f = e.matchers || [createDefaultMatcher()];
-            let Q;
-            for (const m of f)
-              if (Q = m(I.$from), Q)
-                break;
-            const p = `id_${Math.floor(Math.random() * 4294967295)}`;
-            Q && (!e.allow || e.allow({
-              state: l,
-              range: Q.range,
-              isActive: s.active
-            })) ? (console.info("Trigger matcher autocomplete", Q), u.active = !0, u.decorationId = s.decorationId ? s.decorationId : p, u.range = Q.range, u.query = Q.query, u.text = Q.text) : u.active = !1;
-          } else
-            u.active = !1;
-          return u.manual = !1, u.active || (u.decorationId = null, u.range = { from: 0, to: 0 }, u.query = null, u.text = null), u;
-        }
-      },
       props: {
         // Call the keydown hook if suggestion is active.
-        handleKeyDown(o, s) {
-          const { active: a, range: l } = this.getState(o.state);
-          if (s.key === " " && s.ctrlKey) {
-            const g = o.state.tr.setMeta(AutocompletePluginKey, {
-              type: "activate"
-            });
-            return console.info("Manual autocomplete key"), o.dispatch(g), !0;
+        handleKeyDown(n, r) {
+          const o = this.getState(n.state), { autocompleteSources: s } = o;
+          for (const a of s) {
+            const l = [...a.triggerKeys || []];
+            for (const g of l) {
+              let c = g.toLowerCase();
+              if (c.startsWith("ctrl+")) {
+                if (!r.ctrlKey)
+                  continue;
+                c = c.substring(5);
+              }
+              if (c === r.key) {
+                const I = n.state.tr.setMeta(AutocompletePluginKey, {
+                  activate: !0
+                });
+                return console.info("Manual autocomplete key " + g), n.dispatch(I), !1;
+              }
+            }
           }
-          return a && r?.onKeyDown?.({ view: o, event: s, range: l }) || !1;
+          return !1;
         },
         // Setup decorator on the currently active suggestion.
-        decorations(o) {
-          const { active: s, range: a, decorationId: l } = this.getState(o);
-          if (!s)
+        decorations(n) {
+          const { active: r, decorationId: o } = this.getState(n) || {};
+          if (!r || !o)
             return null;
-          const g = document.createElement("span");
-          return g.className = e.decorationClass || "kb-autocomplete--decor", g.setAttribute("data-decoration-id", l), DecorationSet.create(o.doc, [
-            Decoration.widget(a.from, g)
+          const s = document.createElement("span");
+          return s.className = e.decorationClass || "kb-autocomplete--decor", s.setAttribute("data-decoration-id", o), DecorationSet.create(n.doc, [
+            Decoration.widget(r.match.range.from, s, {
+              class: s.className,
+              decorationId: o,
+              refresh: () => r.renderer.refresh()
+            })
           ]);
         }
       }
-    }), r.addEventListener("close", () => {
-      const o = A.state.tr.setMeta(AutocompletePluginKey, {
-        type: "deactivate"
-      });
-      console.info("Manual autocomplete deactivate"), A.view.dispatch(o);
     });
   }
 }
 class ExtensionAutocomplete extends Extension {
-  constructor(e) {
+  constructor(e = {}) {
     super(e), this.config = e, this.name = "autocomplete";
   }
+  getCommandFactories() {
+    return {
+      addAutocompleteSource: (A) => (n, r) => {
+        const o = n.tr;
+        return o.setMeta(AutocompletePluginKey, {
+          addAutocompleteSource: { autocompleteSource: A }
+        }), r && r(o), !0;
+      }
+    };
+  }
   getProseMirrorPlugins() {
     return [
       new AutocompletePlugin(this.config, this.editor)