@nkzw/mdx-editor 0.1.0

package/dist/plugins/search/index.js

@@ -0,0 +1,360 @@
+import { Cell, debounceTime, useRealm, useCellValue, useCell } from "@mdxeditor/gurx";
+import { getNearestEditorFromDOMNode, $getNearestNodeFromDOMNode, $isTextNode, $createRangeSelection } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { contentEditableRef$, createRootEditorSubscription$ } from "../core/index.js";
+const EmptyTextNodeIndex = {
+  allText: "",
+  nodeIndex: [],
+  offsetIndex: []
+};
+const editorSearchTerm$ = Cell("");
+const editorSearchRanges$ = Cell([]);
+const editorSearchCursor$ = Cell(0);
+const editorSearchTextNodeIndex$ = Cell(EmptyTextNodeIndex);
+const searchOpen$ = Cell(false);
+const editorSearchTermDebounced$ = Cell("", (realm) => {
+  realm.link(editorSearchTermDebounced$, realm.pipe(editorSearchTerm$, realm.transformer(debounceTime(250))));
+});
+const editorSearchScrollableContent$ = Cell(
+  null,
+  (r) => r.sub(contentEditableRef$, (cref) => {
+    r.pub(editorSearchScrollableContent$, cref?.current?.parentNode ?? null);
+  })
+);
+const MDX_SEARCH_NAME = "MdxSearch";
+const MDX_FOCUS_SEARCH_NAME = "MdxFocusSearch";
+const debouncedIndexer$ = Cell(EmptyTextNodeIndex, (realm) => {
+  realm.link(debouncedIndexer$, realm.pipe(editorSearchTextNodeIndex$, realm.transformer(debounceTime(250))));
+});
+function* searchText(allText, searchQuery) {
+  if (!searchQuery) {
+    return;
+  }
+  let regex;
+  try {
+    regex = new RegExp(searchQuery, "gi");
+  } catch (e) {
+    console.error("Invalid search pattern:", e);
+    return;
+  }
+  let match;
+  while ((match = regex.exec(allText)) !== null) {
+    if (match[0].length === 0) {
+      if (regex.lastIndex === match.index) {
+        regex.lastIndex++;
+      }
+      continue;
+    }
+    const start = match.index;
+    const end = start + match[0].length - 1;
+    yield [start, end];
+  }
+}
+function indexAllTextNodes(root) {
+  let allText = "";
+  const nodeIndex = [];
+  const offsetIndex = [];
+  if (!root) {
+    return { allText: "", nodeIndex, offsetIndex };
+  }
+  const contentSelector = "p, h1, h2, h3, h4, h5, h6, li, code, pre";
+  const treeWalker = document.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT,
+    // The corrected heuristic: accept any text node that is a descendant of a valid content container.
+    (node) => {
+      if (node.parentElement?.closest(contentSelector)) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+      return NodeFilter.FILTER_REJECT;
+    }
+  );
+  let currentNode;
+  while (currentNode = treeWalker.nextNode()) {
+    const nodeContent = currentNode.textContent?.normalize("NFKD") ?? currentNode.textContent ?? "";
+    for (let i = 0; i < nodeContent.length; i++) {
+      nodeIndex.push(currentNode);
+      offsetIndex.push(i);
+      allText += nodeContent[i] ?? "";
+    }
+  }
+  return { allText, nodeIndex, offsetIndex };
+}
+function* rangeSearchScan(searchQuery, { allText, offsetIndex, nodeIndex }) {
+  for (const [start, end] of searchText(allText, searchQuery)) {
+    const startOffset = offsetIndex[start];
+    const endOffset = offsetIndex[end];
+    const startNode = nodeIndex[start];
+    const endNode = nodeIndex[end];
+    const range = new Range();
+    if (startNode === void 0 || endNode === void 0 || startOffset === void 0 || endOffset === void 0) {
+      throw new Error("Invalid range: startNode, endNode, startOffset, or endOffset is undefined.");
+    }
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset + 1);
+    yield range;
+  }
+}
+const focusHighlightRange = (range) => {
+  CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
+  if (range) CSS.highlights.set(MDX_FOCUS_SEARCH_NAME, new Highlight(range));
+};
+const highlightRanges = (ranges) => {
+  CSS.highlights.set(MDX_SEARCH_NAME, new Highlight(...ranges));
+};
+const resetHighlights = () => {
+  CSS.highlights.delete(MDX_SEARCH_NAME);
+  CSS.highlights.delete(MDX_FOCUS_SEARCH_NAME);
+};
+const scrollToRange = (range, contentEditable, options) => {
+  const ignoreIfInView = options?.ignoreIfInView ?? true;
+  const behavior = options?.behavior ?? "smooth";
+  const [first] = range.getClientRects();
+  if (!contentEditable) {
+    console.warn("No content-editable element found for scrolling.");
+    return;
+  }
+  if (!first) {
+    console.warn("No client rect found for the range, cannot scroll.");
+    return;
+  }
+  const containerRect = contentEditable.getBoundingClientRect();
+  const topRelativeToContainer = first.top - containerRect.top;
+  const bottomRelativeToContainer = first.bottom - containerRect.top;
+  if (ignoreIfInView) {
+    const rangeTop = topRelativeToContainer + contentEditable.scrollTop;
+    const rangeBottom = bottomRelativeToContainer + contentEditable.scrollTop;
+    const visibleTop = contentEditable.scrollTop;
+    const visibleBottom = visibleTop + contentEditable.clientHeight;
+    const inView = rangeTop >= visibleTop && rangeBottom <= visibleBottom;
+    if (inView) return;
+  }
+  const top = topRelativeToContainer + contentEditable.scrollTop - first.height;
+  contentEditable.scrollTo({ top, behavior });
+};
+function isSimilarRange(range1, range2) {
+  return range1.startContainer === range2.startContainer && range1.startOffset === range2.startOffset;
+}
+function replaceTextInRange(range, str, onUpdate) {
+  const startDomNode = range.startContainer;
+  const endDomNode = range.endContainer;
+  const startOffset = range.startOffset;
+  const endOffset = range.endOffset;
+  const editor = getNearestEditorFromDOMNode(startDomNode);
+  if (!editor) {
+    console.warn("No editor found for the provided DOM node.");
+    return;
+  }
+  editor.update(
+    () => {
+      const startLexicalNode = $getNearestNodeFromDOMNode(startDomNode);
+      const endLexicalNode = $getNearestNodeFromDOMNode(endDomNode);
+      if (!$isTextNode(startLexicalNode) || !$isTextNode(endLexicalNode)) {
+        return;
+      }
+      try {
+        const selection = $createRangeSelection();
+        selection.anchor.set(startLexicalNode.getKey(), startOffset, "text");
+        selection.focus.set(endLexicalNode.getKey(), endOffset, "text");
+        selection.insertText(str);
+      } catch (e) {
+        console.warn("Error replacing text in the editor:", e);
+        if (onUpdate) {
+          onUpdate();
+        }
+      }
+    },
+    {
+      onUpdate
+    }
+  );
+}
+function useEditorSearch() {
+  const realm = useRealm();
+  const ranges = useCellValue(editorSearchRanges$);
+  const cursor = useCellValue(editorSearchCursor$);
+  const search = useCellValue(editorSearchTerm$);
+  const currentRange = ranges[cursor - 1] ?? null;
+  const contentEditable = useCellValue(editorSearchScrollableContent$);
+  const [isSearchOpen, setIsSearchOpen] = useCell(searchOpen$);
+  const openSearch = () => {
+    setIsSearchOpen(true);
+  };
+  const closeSearch = () => {
+    setIsSearchOpen(false);
+  };
+  const toggleSearch = () => {
+    setIsSearchOpen(!isSearchOpen);
+  };
+  const rangeCount = ranges.length;
+  const scrollToRangeOrIndex = (range, options) => {
+    const scrollRange = typeof range === "number" ? ranges[range - 1] : range;
+    if (!scrollRange) {
+      throw new Error("Error scrolling to range, range does not exist");
+    }
+    scrollToRange(scrollRange, contentEditable, options);
+  };
+  const setSearch = (term) => {
+    if ((term ?? "") !== search) {
+      realm.pub(editorSearchCursor$, 0);
+    }
+    realm.pub(editorSearchTermDebounced$, term ?? "");
+  };
+  const next = () => {
+    if (!ranges.length) return;
+    const newVal = cursor % ranges.length + 1;
+    scrollToRangeOrIndex(newVal);
+    realm.pub(editorSearchCursor$, newVal);
+  };
+  const prev = () => {
+    if (!ranges.length) return;
+    const newVal = cursor <= 1 ? ranges.length : cursor - 1;
+    scrollToRangeOrIndex(newVal);
+    realm.pub(editorSearchCursor$, newVal);
+  };
+  const replace = (str, onUpdate) => {
+    const currentRange2 = ranges[cursor - 1];
+    if (!currentRange2) {
+      return;
+    }
+    const { startContainer, startOffset } = currentRange2 ?? {};
+    replaceTextInRange(currentRange2, str, () => {
+      const unsub = realm.sub(editorSearchRanges$, (newRanges) => {
+        unsub();
+        if (isSimilarRange(newRanges[cursor - 1] ?? {}, {
+          startOffset,
+          startContainer
+        })) {
+          realm.pub(editorSearchCursor$, (cursor + 1) % (newRanges.length + 1) || 1);
+        }
+      });
+      onUpdate?.();
+    });
+  };
+  const replaceAll = (str, onUpdate) => {
+    const runReplaceAll = () => {
+      let ticks = 0;
+      for (let i = ranges.length - 1; i >= 0; i--) {
+        const textReplaceRange = ranges[i];
+        if (!textReplaceRange) {
+          throw new Error("error replacing all text range does not exist");
+        }
+        replaceTextInRange(textReplaceRange, str, () => {
+          ticks++;
+          if (ticks >= ranges.length) {
+            onUpdate?.();
+          }
+        });
+      }
+    };
+    if (typeof requestIdleCallback === "function") {
+      requestIdleCallback(runReplaceAll);
+    } else {
+      setTimeout(runReplaceAll, 0);
+    }
+  };
+  return {
+    next,
+    prev,
+    total: rangeCount,
+    cursor,
+    setSearch,
+    search,
+    currentRange,
+    isSearchOpen,
+    setIsSearchOpen,
+    openSearch,
+    closeSearch,
+    toggleSearch,
+    ranges,
+    scrollToRangeOrIndex,
+    replace,
+    replaceAll
+  };
+}
+const searchPlugin = realmPlugin({
+  //TODO: ensure proper event cleanup
+  init(realm) {
+    if (typeof CSS.highlights === "undefined") {
+      console.warn("CSS.highlights is not supported in this browser. Search functionality will be limited.");
+      return;
+    }
+    realm.sub(editorSearchCursor$, (cursor) => {
+      const ranges = realm.getValue(editorSearchRanges$);
+      focusHighlightRange(ranges[cursor - 1]);
+    });
+    const updateHighlights = (searchQuery, textNodeIndex) => {
+      if (!searchQuery) {
+        realm.pub(editorSearchCursor$, 0);
+        realm.pub(editorSearchRanges$, []);
+        resetHighlights();
+        return;
+      }
+      const ranges = Array.from(rangeSearchScan(searchQuery, textNodeIndex));
+      realm.pub(editorSearchRanges$, ranges);
+      highlightRanges(ranges);
+      if (ranges.length) {
+        const currentCursor = realm.getValue(editorSearchCursor$) || 1;
+        focusHighlightRange(ranges[currentCursor - 1]);
+        realm.pub(editorSearchCursor$, currentCursor);
+        const scrollRange = ranges[currentCursor - 1];
+        if (!scrollRange) throw new Error("error updating highlights, scroll range does not exist");
+        const contentEditable = realm.getValue(editorSearchScrollableContent$);
+        scrollToRange(scrollRange, contentEditable, {
+          ignoreIfInView: true
+        });
+      } else {
+        resetHighlights();
+      }
+    };
+    realm.sub(editorSearchTextNodeIndex$, (textNodeIndex) => {
+      updateHighlights(realm.getValue(editorSearchTerm$), textNodeIndex);
+    });
+    realm.sub(editorSearchTerm$, (searchQuery) => {
+      updateHighlights(searchQuery, realm.getValue(editorSearchTextNodeIndex$));
+    });
+    realm.pub(createRootEditorSubscription$, (editor) => {
+      let observer = null;
+      return editor.registerRootListener((rootElement) => {
+        if (observer) {
+          observer.disconnect();
+          observer = null;
+        }
+        if (rootElement) {
+          const initialIndex = indexAllTextNodes(rootElement);
+          realm.pub(editorSearchTextNodeIndex$, initialIndex);
+          observer = new MutationObserver(() => {
+            const newIndex = indexAllTextNodes(rootElement);
+            if (realm.getValue(searchOpen$)) {
+              realm.pub(editorSearchTextNodeIndex$, newIndex);
+            } else {
+              realm.pub(debouncedIndexer$, newIndex);
+            }
+          });
+          observer.observe(rootElement, {
+            childList: true,
+            subtree: true,
+            characterData: true
+          });
+          return () => observer?.disconnect();
+        }
+      });
+    });
+  }
+});
+export {
+  EmptyTextNodeIndex,
+  MDX_FOCUS_SEARCH_NAME,
+  MDX_SEARCH_NAME,
+  debouncedIndexer$,
+  editorSearchCursor$,
+  editorSearchRanges$,
+  editorSearchScrollableContent$,
+  editorSearchTerm$,
+  editorSearchTermDebounced$,
+  editorSearchTextNodeIndex$,
+  rangeSearchScan,
+  searchOpen$,
+  searchPlugin,
+  useEditorSearch
+};

package/dist/plugins/table/LexicalTableVisitor.js

@@ -0,0 +1,10 @@
+import { $isTableNode } from "./TableNode.js";
+const LexicalTableVisitor = {
+  testLexicalNode: $isTableNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    actions.appendToParent(mdastParent, lexicalNode.getMdastNode());
+  }
+};
+export {
+  LexicalTableVisitor
+};

package/dist/plugins/table/MdastTableVisitor.js

@@ -0,0 +1,10 @@
+import { $createTableNode } from "./TableNode.js";
+const MdastTableVisitor = {
+  testNode: "table",
+  visitNode({ mdastNode, lexicalParent }) {
+    lexicalParent.append($createTableNode(mdastNode));
+  }
+};
+export {
+  MdastTableVisitor
+};