obsidian#FuzzyMatch TypeScript Examples

renderSuggestion(result: FuzzyMatch<HomebrewCreature>, el: HTMLElement) {
        let { item, match: matches } = result || {};
        let content = el.createDiv({
            cls: "suggestion-content icon"
        });
        if (!item) {
            this.suggester.selectedItem = null;
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.name.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.appendChild(element);
                element.appendText(item.name.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.appendText(item.name[i]);
        }
    }

renderSuggestion(result: FuzzyMatch<Admonition>, el: HTMLElement) {
        let { item, match: matches } = result || {};
        let content = el.createDiv({
            cls: "suggestion-content icon"
        });
        if (!item) {
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.type.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.appendChild(element);
                element.appendText(item.type.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.appendText(item.type[i]);
        }

        const iconDiv = createDiv("suggestion-flair admonition-suggester-icon");
        iconDiv
            .appendChild(
                this.plugin.iconManager.getIconNode(item.icon) ?? createDiv()
            )
            .setAttribute("color", `rgb(${item.color})`);

        content.prepend(iconDiv);
    }

renderSuggestion(value: FuzzyMatch<string>, el: HTMLElement) {
    el.setText(value.item);

    let matches = value.match.matches;
    if (matches == null || matches.length == 0) {
      return;
    }
    let start = matches[0][0];
    let end = matches[0][1];

    let range = new Range();

    let text = el.firstChild;
    if (text == null) {
      return;
    }

    range.setStart(text, start);
    range.setEnd(text, end);
    range.surroundContents(document.createElement("b"));
  }

renderSuggestion(result: FuzzyMatch<TFile>, el: HTMLElement) {
        let { item, match: matches } = result || {};
        let content = el.createDiv({
            cls: "suggestion-content icon"
        });
        if (!item) {
            this.suggester.selectedItem = null;
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.basename.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.appendChild(element);
                element.appendText(item.basename.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.appendText(item.basename[i]);
        }

        let path = item.path.split("/").slice(0, -1).join("/");
        if (path.length) {
            path += "/";
        }

        el.createDiv({
            cls: "suggestion-note",
            text: path
        });
    }

renderSuggestion(
        result: FuzzyMatch<HomebrewCreature | SRDMonster>,
        el: HTMLElement
    ) {
        let { item, match: matches } = result || {};

        let content = el.createDiv({
            cls: "suggestion-content icon"
        });
        if (!item) {
            this.suggester.selectedItem = null;
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.name.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.appendChild(element);
                element.appendText(item.name.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.appendText(item.name[i]);
        }
        el.createDiv({
            cls: "suggestion-note",
            text: item.source
        });
    }

renderSuggestion(match: FuzzyMatch<TFile>, el: HTMLElement) {
    super.renderSuggestion(match, el);

    const { showPreviewInLocalModal } = this.plugin.settings;
    if (showPreviewInLocalModal) {
      const content = el.innerHTML;
      el.addClass('banner-suggestion-item');
      el.innerHTML = html`
        <p class="suggestion-text">${content}</p>
        <div class="suggestion-image-wrapper">
          <img src="${this.vault.getResourcePath(match.item)}" />
        </div>
      `;
    }
  }

selectSuggestion({ item }: FuzzyMatch<Condition>) {
        if (this.condition !== null) {
            this.inputEl.value = item.name;
            this.condition = item;
        } else {
            this.condition = {
                name: this.inputEl.value,
                description: ""
            };
        }

        this.onClose();
        this.close();
    }

selectSuggestion({ item }: FuzzyMatch<TFile | BlockCache | HeadingCache>) {
        let link: string;
        if (item instanceof TFile) {
            this.file = item;
            link = item.basename;
        } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
            link = this.file.basename + "#" + (<HeadingCache>item).heading;
        } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
            link = this.file.basename + "^" + (<BlockCache>item).id;
        }
        const path = this.file.path.split("/").slice(0, -1);
        if (path.length) {
            this.link = path.join("/") + "/" + link;
        } else {
            this.link = link;
        }
        this.text.setValue(link);

        this.close();
        this.onClose();
    }

renderSuggestion(result: FuzzyMatch<TFolder>, el: HTMLElement) {
        let { item, match: matches } = result || {};
        let content = el.createDiv({
            cls: "suggestion-content"
        });
        if (!item) {
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        let pathLength = item.path.length - item.name.length;
        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = pathLength; i < item.path.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.appendChild(element);
                element.appendText(item.path.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.appendText(item.path[i]);
        }
        el.createDiv({
            cls: "suggestion-note",
            text: item.path
        });
    }

renderSuggestion(result: FuzzyMatch<Condition>, el: HTMLElement) {
        let { item, match: matches } = result || {};
        let content = new Setting(el); /* el.createDiv({
            cls: "suggestion-content"
        }); */
        if (!item) {
            content.nameEl.setText(this.emptyStateText);
            this.condition = null;
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.name.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.nameEl.appendChild(element);
                element.appendText(item.name.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.nameEl.appendText(item.name[i]);
        }
    }

renderSuggestion(item: FuzzyMatch<ChartTemplateType>, el: HTMLElement): void {
        const div = createDiv({ cls: "chartsview-thumbnail" });
        const type = ChartTemplateType[item.item[0] as keyof typeof ChartTemplateType];
        const img = createEl("img", {
            attr: {
                src: ChartThumbnailMapping[type]
            }
        });
        div.appendChild(img);
        el.appendChild(div);
        el.addClass("chartsview-thumbnail-container");
        super.renderSuggestion(item, el);
    }

renderSuggestion(result: FuzzyMatch<HomebrewCreature>, el: HTMLElement) {
        let { item, match: matches } = result || {};
        let content = new Setting(el); /* el.createDiv({
            cls: "suggestion-content"
        }); */
        if (!item) {
            content.nameEl.setText(this.emptyStateText);
            /* content.parentElement.addClass("is-selected"); */
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.name.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.nameEl.appendChild(element);
                element.appendText(item.name.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.nameEl.appendText(item.name[i]);
        }

        content.setDesc(item.source ?? "");
        content.addExtraButton((b) => {
            b.setIcon("pencil")
                .setTooltip("Edit")
                .onClick(() => this.onEditItem(item));
        });
        content.addExtraButton((b) => {
            b.setIcon("trash")
                .setTooltip("Delete")
                .onClick(() => this.onRemoveItem(item));
        });
    }

selectSuggestion({ item }: FuzzyMatch<HomebrewCreature>) {
        return;
    }

filteredItems: FuzzyMatch<T>[] = [];

suggester: Suggester<FuzzyMatch<T>>;

selectSuggestion({ item }: FuzzyMatch<HomebrewCreature | SRDMonster>) {
        this.inputEl.value = item.name;
        this.creature = item;

        this.onClose();
        this.close();
    }

selectSuggestion({ item }: FuzzyMatch<HomebrewCreature>) {
        this.text.setValue(item.name);
        this.player = item;

        this.onClose();
        this.close();
    }

selectSuggestion({ item }: FuzzyMatch<TFile>) {
        this.text.setValue(item.basename);
        this.file = item;

        this.onClose();
        this.close();
    }

renderSuggestion(
        result: FuzzyMatch<AdmonitionIconDefinition>,
        el: HTMLElement
    ) {
        let { item, match: matches } = result || {};
        let content = el.createDiv({
            cls: "suggestion-content icon"
        });
        
        if (!item) {
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        const matchElements = matches.matches.map((m) => {
            return createSpan("suggestion-highlight");
        });
        for (let i = 0; i < item.name.length; i++) {
            let match = matches.matches.find((m) => m[0] === i);
            if (match) {
                let element = matchElements[matches.matches.indexOf(match)];
                content.appendChild(element);
                element.appendText(item.name.substring(match[0], match[1]));

                i += match[1] - match[0] - 1;
                continue;
            }

            content.appendText(item.name[i]);
        }

        const iconDiv = createDiv("suggestion-flair admonition-suggester-icon");
        iconDiv.appendChild(
            this.plugin.iconManager.getIconNode(item) ?? createDiv()
        );
        content.prepend(iconDiv);
        content.createDiv({
            cls: "suggestion-note",
            text: this.plugin.iconManager.getIconModuleName(item)
        });
    }

suggester: Suggester<FuzzyMatch<T>>;

selectSuggestion({ item }: FuzzyMatch<Admonition>) {
        this.text.setValue(item.type);
        this.onClose();
        this.close();
    }

selectSuggestion({ item }: FuzzyMatch<AdmonitionIconDefinition>) {
        this.text.setValue(item.name);
        this.icon = item;
        this.onClose();

        this.close();
    }

suggester: Suggester<FuzzyMatch<T>>;

renderSuggestion(item: FuzzyMatch<string>, el: HTMLElement): void {
		el.addClass("CS-icon-container");
		const div = createDiv({ cls: "CS-icon" });
		el.appendChild(div);
		setIcon(div, item.item);
		super.renderSuggestion(item, el);
	}

renderSuggestion(match: FuzzyMatch<IEmojiPair>, el: HTMLElement): void {
    super.renderSuggestion(match, el);
    const { useTwemoji } = this.plugin.settings;
    const { emoji } = match.item;
    const html = useTwemoji ? twemoji.parse(emoji) : `<span class="regular-emoji">${emoji} </span>`;
    el.insertAdjacentHTML('afterbegin', html);
  }

getSuggestions(query: string): FuzzyMatch<IEmojiPair>[] {
    const emojiText = query.match(EMOJI_REGEX)?.join('');
    return emojiText ? ([{
      item: { code: 'Paste inputted emoji(s)', emoji: emojiText },
      match: { score: 1, matches: [] }
    }]) : super.getSuggestions(query);
  }

renderSuggestion(match: FuzzyMatch<Entry>, el: HTMLElement): void {
    el.empty();
    const entry = match.item;
    const entryTitle = entry.title || '';

    const container = el.createEl('div', { cls: 'zoteroResult' });
    const titleEl = container.createEl('span', {
      cls: 'zoteroTitle',
    });
    container.createEl('span', { cls: 'zoteroCitekey', text: entry.id });

    const authorsCls = entry.authorString
      ? 'zoteroAuthors'
      : 'zoteroAuthors zoteroAuthorsEmpty';
    const authorsEl = container.createEl('span', {
      cls: authorsCls,
    });

    // Prepare to highlight string matches for each part of the search item.
    // Compute offsets of each rendered element's content within the string
    // returned by `getItemText`.
    const allMatches = match.match.matches;
    const authorStringOffset = 1 + entryTitle.length;

    // Filter a match list to contain only the relevant matches for a given
    // substring, and with match indices shifted relative to the start of that
    // substring
    const shiftMatches = (
      matches: SearchMatches,
      start: number,
      end: number,
    ) => {
      return matches
        .map((match: SearchMatchPart) => {
          const [matchStart, matchEnd] = match;
          return [
            matchStart - start,
            Math.min(matchEnd - start, end),
          ] as SearchMatchPart;
        })
        .filter((match: SearchMatchPart) => {
          const [matchStart, matchEnd] = match;
          return matchStart >= 0;
        });
    };

    // Now highlight matched strings within each element
    renderMatches(
      titleEl,
      entryTitle,
      shiftMatches(allMatches, 0, entryTitle.length),
    );
    if (entry.authorString) {
      renderMatches(
        authorsEl,
        entry.authorString,
        shiftMatches(
          allMatches,
          authorStringOffset,
          authorStringOffset + entry.authorString.length,
        ),
      );
    }
  }

suggester: Suggester<FuzzyMatch<T>>;

renderSuggestion(
        result: FuzzyMatch<TFile | BlockCache | HeadingCache>,
        el: HTMLElement
    ) {
        let { item, match: matches } = result || {};
        let content = el.createDiv({
            cls: "suggestion-content"
        });
        if (!item) {
            content.setText(this.emptyStateText);
            content.parentElement.addClass("is-selected");
            return;
        }

        if (item instanceof TFile) {
            let pathLength = item.path.length - item.name.length;
            const matchElements = matches.matches.map((m) => {
                return createSpan("suggestion-highlight");
            });
            for (
                let i = pathLength;
                i < item.path.length - item.extension.length - 1;
                i++
            ) {
                let match = matches.matches.find((m) => m[0] === i);
                if (match) {
                    let element = matchElements[matches.matches.indexOf(match)];
                    content.appendChild(element);
                    element.appendText(item.path.substring(match[0], match[1]));

                    i += match[1] - match[0] - 1;
                    continue;
                }

                content.appendText(item.path[i]);
            }
            el.createDiv({
                cls: "suggestion-note",
                text: item.path
            });
        } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
            content.setText((<HeadingCache>item).heading);
            content.prepend(
                createSpan({
                    cls: "suggestion-flair",
                    text: `H${(<HeadingCache>item).level}`
                })
            );
        } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
            content.setText((<BlockCache>item).id);
        }
    }