Leveraging both closetag.js and closebrackets.js simultaneously in Codemirror on a single line

Currently, I am integrating the Codemirror library with a textarea to enable autoclosing of HTML tags and brackets such as {}, (), []. However, I have come across an issue where they do not work together on the same line.

For example, when typing out a tag like this:

<div></div>

The tags autoclose and the cursor is positioned between them. But if I attempt to add a bracket, like so:

<div>{</div>

It fails to close properly due to the behavior of closebrackets.js. It functions correctly when each element is on its own line. As a workaround, I discovered a quick fix by modifying closetag.js (Line 80), where you can include a space to resolve this issue:

text: ">" + (indent ? "\n\n" : " ") + "</" + tagName + ">",

This modification results in the tags closing as follows:

<div> </div>

However, it's slightly cumbersome and aesthetically unpleasing with the extra space. Do you have any suggestions on how to achieve both functionalities smoothly on the same line?

Answer №1

The closebrackets feature in CodeMirror mimics the behavior of Sublime Text by only automatically closing brackets when the cursor is positioned in front of another closing character or whitespace. While I am open to exploring alternative behaviors, I am hesitant to make changes based solely on one specific scenario. Has there been any established precedent for different bracket-closing behavior? If so, how exactly does it function? It seems unlikely that inserting opening brackets between HTML tags is a common occurrence.

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

Frontend update: Changing the display format for dates

Received from the backend is an array of objects (leavedays)- var leavedays = [{"_id":"62d544ae9f22d","season":2022,"name":"LEAVEDAY1","dateFrom":"2022- 07-26T00:00:00.000Z","date ...

Creating a single loop in Javascript to populate two dropdown menus with options

Is there a way to populate two dropdown menus in JavaScript with numbers using the same for loop? Currently, only one is being populated, specifically the last one. for (var i=1; i<10; i++) { var option = document.createElement("option"); option. ...

Why is 'this.contains' not recognized as a function when I invoke it within another function?

While attempting to create a Graph and incorporating one method at a time, I encountered an issue. Specifically, after calling a.contains("cats"), I received the error '//TypeError: Cannot read property 'length' of undefined'. Could thi ...

Is regex the reason why the website isn't showing up properly on mobile devices?

I encountered an issue on my Vue.js website hosted on Firebase where a blank white page was displayed on mobile devices. After some investigation, I traced the problem back to two objects declared in the data function of one of my components: re: { you ...

Integrate jquery into an expressJs application

Is there a way to include jQuery in the express app.js file? I need to use jQuery within app.js to make modifications to the HTML file. For example: app.js const express = require('express') const app = express() const $ = global.jQuery = re ...

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

It seems that I may have chosen the wrong platform by posting this question on the 'Software Engineering' exchange: Currently, my focus is on learning the MEAN stack (I have yet to dive into Angular, so for now I am using pure vanilla JS for the ...

`Creating a fluid MySQL table using JavaScript`

One of the challenges I'm facing involves working with a MySQL table that consists of 3 columns: MySQL db table +--+----+-------------+ |id|data|display_order| +--+----+-------------+ |0 |0 |2 | +--+----+-------------+ |1 |1 |1 ...

Confirming Bootstrap - Implement an onConfirm method for element attributes

I am looking to add a JavaScript function to my confirmation button. I have created the elements off-page and fetched them using ajax, so it is crucial that I can set the function in-properties rather than via $('#id').confirmation() So far, I h ...

Allowing unauthorized cross-origin requests to reach the SailsJS controller despite implementing CORS restrictions

My cors.js file has the following configuration: module.exports.cors = { allRoutes: true, origin: require('./local.js').hosts, // which is 'http://localhost' } I decided to test it by making a request from a random site, Here is ...

Managing redundant asynchronous data in AngularJS

Imagine this scenario: In your AngularJS application, a user is spamming input which triggers numerous asynchronous data calls on the backend. This results in constant changes to the displayed data as each fetch request completes. Ideally, we want the fina ...

Activating and deactivating event capturing in Vue.js

Incorporating Vue.js into my project has been a game-changer. One interesting aspect is the event listener's third option, known as capture. For instance: element.addEventListener("click", function(){}, true); I'm curious if it's ...

Having trouble with my findIndex function in Node.js while working with a mongo DB database

I am having difficulty finding the index of a specific product in a MongoDB database. const cart = await this.model.findOne({ user: { $eq: user } }); if (cart) { const itemFound = cart.products.findIndex( (item) => item._id === ...

How about starting a Node.js application with specific configurations?

Is there a way to develop a Node.js app that can be initiated with additional parameters? Here are a few examples: node myApp.js -nolog This command would initialize the app with the custom parameter noLog=true, preventing console logging. node myApp.js ...

Issue with function execution within useEffect() not being triggered

I am facing an issue where two functions in my component are not being called every time it renders, despite my efforts. Placing these functions in the dependency array causes an infinite loop. Can anyone identify why they are not executing? function Por ...

React Material-UI is notorious for its sluggish performance

I recently started using React Material-ui for the first time. Whenever I run yarn start in my react app, it takes quite a while (approximately 25 seconds) on my setup with an i5 8400 + 16 GB RAM. Initially, I suspected that the delay might be caused by e ...

Tips for decreasing the width of a Grid component in React using MUI

Is there a way to adjust the width of the initial Grid element within Material UI, allowing the remaining 3 elements to evenly occupy the extra space? see visual example Would modifying the grid item's 'xl', 'lg', 'md', ...

Building a custom search modal using RenderPartial in Yii

I'm currently working on developing a modal box that will enable users to filter and search through a grid. The main objective is to allow users to retrieve information from one database while simultaneously completing a form in another database. Alt ...

The output generated by grunt-contrib-handlebars differs from that of the handlebars npm task

Looking for some help with a problem similar to the one mentioned in this Stack Overflow question. Since that question hasn't been answered yet, I decided to create my own post. I'm currently attempting to precompile my handlebars template files ...

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

Is it possible to verify whether a Node Js query is empty or not?

I've been attempting to determine if a result query is empty or not, conducting thorough research in the process. Below is the code illustrating the query I'm executing and the two methods I employed to check if it's empty. The issue at han ...