Is there a way to display the number of search results in the CodeMirror editor?

After conducting some research on how to integrate the search result count in Codemirror like the provided image, I was unable to find any solutions. I am currently working with Angular and utilizing ngx-codemirror, which led me to realize that editing the search.js file within the ngx-codemirror package seems to be the only option.

I am seeking a more efficient solution as directly modifying the search.js file in the package may not be ideal. This is especially true since our team collaborates closely and performs numerous pushes daily, making it inconvenient to push the node_modules folder each time.

https://i.stack.imgur.com/v9Qax.png

angulartypescriptcodemirror

Answer №1

Angular Solution:

Note: Please note that this solution may not be the most optimal (without modifying the CodeMirror package).

HTML Code:

        <ngx-codemirror #codeEditor [(ngModel)]="htmlString" [options]="options" name="html">
        </ngx-codemirror>
        <span *ngIf="resultCount > 0" class="btn"> Search amount: {{ resultCount }}</span>

Typescript Code:

        export class HtmlEditorComponent
          implements OnInit, DoCheck {

          @ViewChild('codeEditor') codeEditor: CodemirrorComponent;
          resultCount = 0;
          htmlString = '';

          constructor() {}

          ngDoCheck() {
            if (
              this.codeEditor &&
              this.codeEditor.codeMirror &&
              this.htmlString.length > 0
            ) {
              this.checkSearch();
            }
          }

          checkSearch() {
            const searchField = document.getElementsByClassName(
              'CodeMirror-search-field'
            )[0] as any;
            if (searchField && searchField.value.length > 0) {
              const text = new RegExp(searchField.value, 'gi');
              const count = (this.htmlString.match(text) || []).length;
              this.resultCount = count;
            } else {
              this.resultCount = 0;
            }
          }
        }

Test it out now by using CTRL+F on CodeMirror to see the search count.

Live Demo: https://stackblitz.com/edit/angular-codemirror-search-count

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

Currently, I have developed a micro frontend application in Angular using module federation. This application is hosted in production with Docker containers. My main concern revolves around how to update the UI changes for the user without them needing to ...

javascriptangularmicro-frontendwebpack-module-federation

Adding properties to React Component

Due to security reasons, I am required to update the ant design library in my codebase from version 3 to 4. In the past, this was how I used the icon: import { Icon } from 'antd'; const Demo = () => ( <div> <Icon type="smile" ...

reactjstypescriptantd

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

Missing data: null or undefined?

When using vuex-module-decorators, is it better to set the default value of a data property to null or undefined? For example: export default class ComponentName extends Vue { post: BlogPost | null = null } or export default class ComponentName extends V ...

typescriptvue.js

Error: The "res.json" method is not defined in CustomerComponent

FetchData(){ this.http.get("http://localhost:3000/Customers") .subscribe(data=>this.OnSuccess(data),data=>this.OnError(data)); } OnError(data:any){ console.debug(data.json()); } OnSuccess(data:any){ this.FetchData(); } SuccessGe ...

javascriptangulartypescript

unable to get ng-model and ng-options to function properly

Can anyone assist me with my issue? I can't figure out why it's not working. I want to generate a select dynamically from the Level[] retrieved from the database <select> <option>1</option> <option>2</option&g ...

angularselectdrop-down-menung-optionsangularjs-ng-options

Verify if the currentRoute begins with a specific text pattern (such as something/something/*...) in Angular

I need to prevent a loader from appearing on certain screens, so I used ngIf on routes where the loader is not necessary. Here's the code snippet from app.component.ts : <router-outlet> <app-spinner></app-spinner> <ngx-ui-load ...

javascriptangularangularjsangular-ng-if

Is there a way to utilize const assertions to retrieve the explicit types from objects nested at various levels?

In reference to this question, the previous structure had a depth of 2: const grandkids = { Karen: { Ava: ['Alice', 'Amelia'], Emma: ['Sarah'], }, Mary: { Sophia: ['Grace'], }, } as const; To ext ...

typescripttypes

Using angular 7 to apply a dynamic CSS class on a span element

I want to dynamically change the CSS class of a span element in an ngx datatable based on the value. Here is my HTML code: <ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50" [rowHe ...

htmlcssangularng-class

Angular 5 does not allow function calls within decorators

I encountered an issue while building a Progressive Web App (PWA) from my Angular application. When running ng build --prod, I received the following error: ERROR in app\app.module.ts(108,64): Error during template compile of 'AppModule' Fu ...

angulartypescriptprogressive-web-apps

Why does isDisplayed method in Protractor return "No element found using locator" instead of a boolean value?

In my code, I've created a function called isElementDisplayed which features a call to element.isDisplayed. I'm curious as to why the isDisplayed method sometimes returns No element found instead of a boolean value. isElementDisplayed(element: ...

seleniumtypescriptwebdriverprotractor

Tips for generating a fixed-length array from multiple arrays with different lengths, focusing on selecting items from each array according to their significance

In order to create a quiz, I am looking to extract 'questions' from various 'topic' arrays. These topics are selected based on the user's preference and are used to populate a question bank for a 20-question quiz. The topics rated ...

javascriptarraystypescriptsortingweighting

Getting parameter names (or retrieving arguments as an object) within a method decorator in TypeScript: What you need to know

I am currently working on creating a method decorator that logs the method name, its arguments, and result after execution. However, I want to implement a filter that allows me to choose which parameters are logged. Since the number and names of parameter ...

javascriptnode.jstypescriptnestjsdecorator

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

Is it possible for Next.js to retrieve the window size without resorting to a faulty hook call or encountering an undefined window

In my ongoing efforts to dynamically adjust the size of an image within a next.js application to make it responsive to various screen sizes, I have encountered challenges. The different methods I have attempted and observed have resulted in either an inv ...

reactjstypescriptreact-hooksnext.js

The error message displayed by Create React App states: "You cannot utilize JSX without the '--jsx' flag."

I need help with overcoming this particular issue in a TypeScript based React application: Encountering an error stating "Cannot use JSX unless the '--jsx' flag is provided" ...

reactjstypescript

I'm encountering an error in TestCafe that says "TypeError: Cannot read properties of undefined (reading 'match')". Which specific segment of my code is causing this issue?

retrieveUrlFromEmailData(emailData:any){ const emailContent = emailData.email_text; const urlPattern = /(https?:\/\/[^\n]*)/; const foundUrl = emailContent.match(urlPattern)[0]; return foundUrl } ...

typescripttestingautomated-testse2e-testingtestcafe

TypeScript interface designed to capture objects containing a flexible number of values

In my possession is an object that looks like the following: { "0001": "a", "0002": "b", "0003": "c", ... } Is it possible for me to create a TypeScript interface that accurately represents this type? ...

typescripttypesstructural-typing

Filter through the array using the cast method

Trying to implement this: let selections = list.filter(obj => obj.type === "myType"); An issue arises with the filter function displaying an error message which states 'filter' does not exist on type 'NodeType' I attempted to ...

javascripttypescript

When I attempt to run 'ionic cordova build android --prod', I am receiving the following warnings

''' Configure project :app WARNING: The onesignal-gradle-plugin MUST be before com.android.application! Please put onesignal-gradle-plugin first OR update to com.android.tools.build:gradle:3.0.0 or newer! WARNING: Configuration 'compile ...

androidnode.jsangularionic-frameworknpm