prism-code-editor/dist/extensions/search/index.js

Lightweight, extensible code editor component for the web using Prism

import { b as createTemplate, a as addListener, p as preventDefault, d as doc, n as numLines } from "../../index-CKRNGLIi.js";
import { h as isMac, c as getModifierCode, e as getLineBefore, f as getLineStart, k as getLineEnd, q as isWebKit, u as updateNode, g as getStyleValue, a as addOverlay, r as regexEscape } from "../../index-BvZmi6ce.js";
import { createReplaceAPI } from "./api.js";
import { a, h } from "../../selection-M9_8z0AZ.js";
import { c as createSearchAPI } from "../../search-Dk5fdw4x.js";
const shortcut = ` (Alt+${isMac ? "Cmd+" : ""}`;
const template = /* @__PURE__ */ createTemplate(
  `<div class=prism-search-container style=display:flex;align-items:flex-start;justify-content:flex-end><div dir=ltr class=prism-search><button type=button aria-expanded=false title="Toggle Replace" class=pce-expand></button><div spellcheck=false><div><div class="pce-input pce-find"><input autocorrect=off autocapitalize=off placeholder=Find aria-label=Find><button type=button class=prev-match title="Previous Match (Shift+Enter)"></button><button type=button class=next-match title="Next Match (Enter)"></button><div class=search-error></div></div><button type=button class=pce-close title="Close (Esc)"></button></div><div class="pce-input pce-replace"><input autocorrect=off autocapitalize=off placeholder=Replace aria-label=Replace><button type=button title=(Enter)>Replace</button><button type=button title=(${isMac ? "Cmd" : "Ctrl+Alt"}+Enter)>All</button></div><div class=pce-options><div class=pce-match-count>0<span> of </span>0</div><button type=button aria-pressed=false class=pce-regex title="RegExp Search${shortcut}R)"><span aria-hidden=true></span></button><button type=button aria-pressed=false title="Preserve Case${shortcut}P)"><span aria-hidden=true>Aa</span></button><button type=button aria-pressed=false class=pce-whole title="Match Whole Word${shortcut}W)"><span aria-hidden=true>ab</span></button><button type=button aria-pressed=false class=pce-in-selection title="Find in Selection${shortcut}L)">`
);
const toggleAttr = (el, name) => el.setAttribute(name, el.getAttribute(name) == "false");
const searchWidget = () => {
  let prevLength;
  let useRegExp;
  let matchCase;
  let wholeWord;
  let searchSelection;
  let isOpen;
  let currentSelection;
  let prevUserSelection;
  let prevMargin;
  let selectNext = false;
  let marginTop;
  const self = (editor) => {
    editor.extensions.searchWidget = self;
    const { textarea, wrapper, container, getSelection } = editor;
    const replaceAPI = createReplaceAPI(editor);
    const startSearch = (selectMatch) => {
      if (selectMatch && !isWebKit) textarea.setSelectionRange(...prevUserSelection);
      const error = replaceAPI.search(
        findInput.value,
        matchCase,
        wholeWord,
        useRegExp,
        searchSelection
      );
      const index = error ? -1 : selectNext ? replaceAPI.next() : replaceAPI.closest();
      updateNode(current, index + 1);
      updateNode(total, replaceAPI.matches.length);
      findContainer.classList.toggle("pce-error", !!error);
      if (error) errorEl.textContent = error;
      else if (selectMatch || selectNext) replaceAPI.selectMatch(index, prevMargin);
    };
    const keydown = (e) => {
      if (e.keyCode >> 1 == 35 && getModifierCode(e) == (isMac ? 4 : 2)) {
        preventDefault(e);
        open();
        let [start, end] = getSelection(), value = editor.value, word = value.slice(start, end) || /[_\p{N}\p{L}]*$/u.exec(getLineBefore(value, start))[0] + /^[_\p{N}\p{L}]*/u.exec(value.slice(start))[0];
        if (/^$|\n/.test(word)) startSearch();
        else {
          if (useRegExp) word = regexEscape(word);
          doc.execCommand("insertText", false, word);
          findInput.select();
        }
      }
    };
    const open = (focusInput = true) => {
      if (!isOpen) {
        isOpen = true;
        if (marginTop == null) prevMargin = marginTop = getStyleValue(wrapper, "marginTop");
        prevUserSelection = getSelection();
        addOverlay(editor, searchContainer);
        updateMargin();
        resize();
        observer?.observe(container);
      }
      if (focusInput) findInput.select();
    };
    const close = self.close = (focusTextarea = true) => {
      if (isOpen) {
        isOpen = false;
        replaceAPI.stopSearch();
        searchContainer.remove();
        updateMargin();
        observer?.disconnect();
        focusTextarea && textarea.focus();
      }
    };
    const move = (next) => {
      if (replaceAPI.matches[0]) {
        const index = replaceAPI[next ? "next" : "prev"]();
        replaceAPI.selectMatch(index, prevMargin);
        updateNode(current, index + 1);
      }
    };
    const updateMargin = () => {
      const newMargin = isOpen ? getStyleValue(search, "top") + getStyleValue(search, "height") : marginTop;
      const newScroll = container.scrollTop + newMargin - prevMargin;
      wrapper.style.marginTop = isOpen ? newMargin + "px" : "";
      container.scrollTop = newScroll;
      prevMargin = newMargin;
    };
    const resize = () => div.style.setProperty(
      "--search-width",
      `min(${container.clientWidth - 2}px - 2.4em - var(--padding-left),20em)`
    );
    const observer = window.ResizeObserver && new ResizeObserver(resize);
    const replace = () => {
      selectNext = true;
      const index = replaceAPI.replace(replaceInput.value);
      if (index != null) {
        updateNode(current, index + 1);
        replaceAPI.selectMatch(index, prevMargin);
      }
      selectNext = false;
    };
    const replaceAll = () => {
      replaceAPI.replaceAll(replaceInput.value);
    };
    const keyCodeButtonMap = {
      80: matchCaseEl,
      87: wholeWordEl,
      82: useRegExpEl,
      76: inSelectionEl
    };
    const elementHandlerMap = /* @__PURE__ */ new Map([
      [nextEl, () => move(true)],
      [prevEl, move],
      [closeEl, close],
      [replaceEl, replace],
      [replaceAllEl, replaceAll],
      [
        toggle,
        () => {
          toggleAttr(toggle, "aria-expanded");
          updateMargin();
        }
      ],
      [matchCaseEl, () => matchCase = !matchCase],
      [useRegExpEl, () => useRegExp = !useRegExp],
      [wholeWordEl, () => wholeWord = !wholeWord],
      [
        inSelectionEl,
        () => {
          const value = editor.value;
          if (searchSelection) searchSelection = void 0;
          else {
            searchSelection = getSelection().slice(0, 2);
            if (numLines(value, ...searchSelection) > 1) {
              searchSelection = [
                getLineStart(value, searchSelection[0]),
                getLineEnd(value, searchSelection[1])
              ];
            }
          }
          prevLength = value.length;
        }
      ]
    ]);
    addListener(textarea, "keydown", keydown);
    addListener(textarea, "beforeinput", () => {
      if (isOpen && searchSelection) currentSelection = getSelection();
    });
    editor.on("update", () => {
      if (!isOpen) return;
      if (searchSelection && currentSelection) {
        const diff = prevLength - (prevLength = editor.value.length);
        const end = currentSelection[1];
        if (end <= searchSelection[1]) {
          searchSelection[1] -= diff;
          if (end <= searchSelection[0] - +(diff < 0)) searchSelection[0] -= diff;
        }
      }
      startSearch();
    });
    editor.on("selectionChange", (selection) => {
      if (isOpen && editor.focused) prevUserSelection = selection;
    });
    addListener(searchContainer, "click", (e) => {
      const target = e.target;
      const remove = editor.on("update", () => target.focus());
      elementHandlerMap.get(target)?.();
      if (target.matches(".pce-options>button")) {
        toggleAttr(target, "aria-pressed");
        startSearch(true);
      }
      remove();
    });
    addListener(findInput, "input", () => isOpen && startSearch(true));
    addListener(searchContainer, "keydown", (e) => {
      const shortcut2 = getModifierCode(e);
      const target = e.target;
      const keyCode = e.keyCode;
      const isFind = target == findInput;
      if (shortcut2 == (isMac ? 5 : 1)) {
        if (keyCodeButtonMap[keyCode]) {
          preventDefault(e);
          keyCodeButtonMap[keyCode].click();
        }
      } else if (keyCode == 13 && target.tagName == "INPUT") {
        preventDefault(e);
        if (!shortcut2) isFind ? move(true) : replaceEl.click();
        else if (shortcut2 == 8 && isFind) move();
        else if (shortcut2 == (isMac ? 4 : 3) && !isFind) replaceAllEl.click();
        target.focus();
      } else if (!shortcut2 && keyCode == 27) close();
      else keydown(e);
    });
    self.open = (focusInput) => {
      open(focusInput);
      startSearch();
    };
    replaceAPI.container.className = "pce-matches";
  };
  const searchContainer = template();
  const search = self.element = searchContainer.firstChild;
  const [toggle, div] = search.children;
  const rows = div.children;
  const [findContainer, closeEl] = rows[0].children;
  const [findInput, prevEl, nextEl, errorEl] = findContainer.children;
  const [replaceInput, replaceEl, replaceAllEl] = rows[1].children;
  const [matchCount, useRegExpEl, matchCaseEl, wholeWordEl, inSelectionEl] = rows[2].children;
  const [current, , total] = matchCount.childNodes;
  self.open = self.close = () => {
  };
  return self;
};
const showInvisibles = (alwaysShow) => {
  return (editor) => {
    let prev;
    const searchAPI = createSearchAPI(editor);
    const matches = searchAPI.matches;
    const container = searchAPI.container;
    const nodes = container.children;
    const tabs = [];
    const update = () => {
      const value = editor.value;
      const [start, end] = editor.getSelection();
      if (!alwaysShow || prev != (prev = value)) {
        searchAPI.search(" |	", true, false, true, alwaysShow ? void 0 : [start, end]);
        for (let i = 0, l = matches.length; i < l; i++) {
          if (value[matches[i][0]] == "	" == !tabs[i]) {
            nodes[i].className = (tabs[i] = !tabs[i]) ? "pce-tab" : "";
          }
        }
      }
    };
    container.className = "pce-invisibles";
    if (editor.value) update();
    editor.on("selectionChange", update);
  };
};
export {
  a as highlightCurrentWord,
  h as highlightSelectionMatches,
  searchWidget,
  showInvisibles
};
//# sourceMappingURL=index.js.map