Category: javascript

HTML content:

<p>This is a heading</p>
<ul><li><p>This is a bullet point</p><ul><li>
<p>This is a sub bullet point</p>
</li></ul></li></ul>

Converted markdown content:

 'This is a headingn' +
     'n' +
     '* This is a bullet pointn' +
     '   * This is a sub bullet point'

Converted content from markdown back to HTML:

n’ +
‘
• This is a bullet point

n’ +
‘

• This is a sub bullet point

n’ +
‘

My Question:

• Why is the conversion back to HTML from Markdown resulting in inconsistent formatting?
• How can I preserve the original bullet point structure when converting between HTML and Markdown?
• Are there any libraries or methods that handle this conversion more reliably?

Any guidance on how to maintain a consistent structure through these conversions would be greatly appreciated!

I am using Java 1.8 and Jackson v2.11.4 library to serialize a class which has String properties that represent Linux paths. The problem manifests itself when I am using a Windows 10 machine but not when using a Linux one.

e.g. the property to be serialized has the value “/Results_Store/VM_Results” and what actually gets stored in the JSON file is the value “\Results_Store\VM_Results”

I imagine that Jackson performs some platform sensitive interpretation of the string value correlating it with a File or Path object and performs an automatic conversion using the java.io.File.separator.

I tried using the @JsonSerialize(using = ToStringSerializer.class) annotation before the property but does not work.

Im trying to create a multiline graphic whith D3, in body I have this Line:

<svg id="lineChart1" width="600" height="400"></svg>

this is the js code:

  function getRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
  }

 

  function createChartD3(selector, labels, datasets) {
      const svg = d3.select(selector);
      const margin = { top: 20, right: 30, bottom: 30, left: 40 };
      const width = +svg.attr('width') - margin.left - margin.right;
      const height = +svg.attr('height') - margin.top - margin.bottom;

      const x = d3.scaleTime()
          .domain(d3.extent(labels))
          .range([0, width]);
     

      const y = d3.scaleLinear()
          .domain([0, d3.max(datasets, d => d3.max(d.values))])
          .nice()
          .range([height, 0]);

      const line = d3.line()
          .x((d, i) => x(labels[i]))
          .y(d => y(d));

      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);

      
      g.append('g')
          .attr('transform', `translate(0,${height})`)
          .call(d3.axisBottom(x));

      
      g.append('g')
          .call(d3.axisLeft(y));

      
      datasets.forEach(dataset => {
          g.append('path')
              .datum(dataset.values)
              .attr('class', 'line')
              .attr('d', line)
              .attr('stroke', getRandomColor())
              .attr('fill', 'none');
      });
  }

this is what I’m passing to function:
selector:’lineChart1′

label is an array of dates
[‘2024-10-13T09:40:06’,
‘2024-10-13T09:40:21’,
‘2024-10-13T09:40:36]

datasest is an array of object whith this props {label:’string’, value:’Array’}

es:
[{label:’CH_01′, values:[7287.385, 7510.846, 7590.083, 7544.071, 7681.146, 7467.861, 7432.631, 7392.977]},
[{label:’CH_02′, values: [3871.76, 4000.862, 4106.523, 4124.878, 4145, 3944.293, 4054.519, 4048.956, 3970.813, 4017.163, 4116.421]}]
I have a lot of data two minutes contains approx 5600 record so 5600 dates as label and 5600 values in each array(values) in dataset multiplied 14 times (there are 14 objetcts in datasets)

I tryied to change some values but I don’t understand what is wrong

I have A site. and I want to open the page of B site using window.open.
B site is posting message.

var win = window.open('https://www.someotherdomain.com?param1=b&param2=c&param3=d');
win.addEventListener("message",callback);

or

var win = window.open('https://www.someotherdomain.com?param1=b&param2=c&param3=d');
win.addEventListener("load",callback);

above all don’t work at all. callback never executed.
How can I get the messages from B site?

Thank you for help!

“So happy with the performance of this object (Review 30, 2, 1)”

Desired Output: [‘(Review 30, 2, 1)’, 30, 2, 1]

“So happy with the performance of this object (Review 30)”

Desired Output: [‘(Review 30)’, 30]

I am trying to get above desired output using regex but I am unable to get desired result.

1. I want to get string inside parenthesis as well as all numbers inside parenthesis.

2. I want to get parenthesis removed from string and get remaining string.

Desired output: “So happy with the performance of this object”

console.log("So happy with the performance of this object (Review 30, 2, 1)".match(/((.*?))/)[0].match(/([([0-9]+))/));

I’m working on a JavaFX application where I want to integrate pdf.js to display PDF files. However, I’m looking for a way to do this without having to include a large number of files from the pdf.js repository directly into my project.

So far, I’ve found this following ways to do it:

1. PDFBox: this way renders only pdf to image so the interaction with my pdf will be limited so I don’t prefer it
2. Using system’s default PDF viewer: there is no problem with this approach but i want to integrate viewer into my app so i will consider it later.
3. iText: It’s too complicated for my app, i just want to use some basics features like render, zoom in, zoom out, hightlight, etc.

4. PDF.js: This is the example about on how to use pdf.js on JavaFX 11 https://github.com/Searen1984/pdfjs4JFX (I like this way but there are some problems with me, so hope you guys can help me to configure it. By the way, I’m currently using JavaFX 21.0.4 with JDK 17)

This approach (4) needs to include many files into resources folder, and it will make my project become larger, which I’d prefer to avoid. I am thinking about using the following ways to do it:

1. Using WebJars or other Maven dependencies: I’m have never used Webjars so I’m unsure how to configure it properly to work with my JavaFX’s WebView.

2. Using a CDN for pdf.js and pdf.worker.js: I have never used this one before too.

I’d appreciate some guidance on: Is there any another way to set up pdf.js in a JavaFX project without including all the files from the pdf.js repository, or how to configure my 2 above ways to work seamlessly with my JavaFX WebView.

Thank you very much for reading and helping me.

I have implemented coreui library for multi-select. I have read the docs but I couldn’t reset from the selected field. here is my code

document.addEventListener('DOMContentLoaded', function() {
  const resetButton = document.getElementById('resetButton');
  const multiSelects = document.querySelectorAll('.form-multi-select');

  resetButton.addEventListener('click', function() {
    // Loop through each multi-select and reset its value

    multiSelects.forEach(select => {

      // Deselect all options
      for (let i = 0; i < select.options.length; i++) {
        select.options[i].selected = false; //Deselect
      }

      const coreUISelect = select.CoreUISelect; // Access the CoreUI instance
      if (coreUISelect) {
        coreUISelect.setValue([]); // Clear selected values using CoreUI API
      }
      // Update the placeholder (first disabled option)
      select.selectedIndex = 0; // Resets to the first option which is disabled
    });

    // Optionally reset the date fields
    document.getElementById('date-from').value = '';
    document.getElementById('date-to').value = '';
  });
});

<script src="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




<form id="filterForm" class="form-inline gap-2">
  <div class="form-group mb-2">
    <select id="sales-director-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="Sales Director">
      <option value="" disabled selected>Sales Director</option>
      <option value="Jayson Cheves">Jayson Cheves</option>
      <option value="Ahmed Mohamed">Ahmed Mohamed</option>
      <option value="Rajesh Sankaran">Rajesh Sankaran</option>
      <option value="Ashley Philips">Ashley Philips</option>
    </select>
  </div>
  <div class="form-group mb-2">
    <select id="rsm-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="RSM's">
      <option value="" disabled selected>RSM's</option>
      <option value="Karim Dhanani">Karim Dhanani</option>
      <option value="Anayeli Valle">Anayeli Valle</option>
      <option value="Joel Ramirez">Joel Ramirez</option>
    </select>
  </div>
  <div class="form-group mb-2">
    <select id="dsm-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="DSM's">
      <option value="" disabled selected>DSM's</option>
      <option value="Karim Dhanani">Karim Dhanani</option>
      <option value="Anayeli Valle">Anayeli Valle</option>
      <option value="Joel Ramirez">Joel Ramirez</option>
    </select>
  </div>
  <div class="form-group mb-2">
    <select id="location-filter" class="form-multi-select" multiple data-coreui-search="true" data-coreui-selection-type="counter" data-coreui-placeholder="Location">
      <option value="" disabled selected>Locations</option>
      <option value="10th Street">10th Street</option>
      <option value="13th Street">13th Street</option>
      <option value="1st Street">1st Street</option>
      <option value="28th Street">28th Street</option>
    </select>
  </div>

  <div class="form-group mb-2">
    <input type="date" class="form-control" id="date-from">
  </div>
  <div class="form-group mb-2">
    <input type="date" class="form-control" id="date-to">
  </div>
  <div class="ml-auto d-flex gap-2">
    <button type="button" class="btn btn-primary">Search</button>
    <button id="resetButton" type="reset" class="btn btn-primary">Reset</button>
    <button type="button" class="btn btn-primary">Export</button>
  </div>
</form>

I’m developing a browser extension using Plasmo and React, and I’m facing an issue with internationalization (i18n). Currently, the extension only uses the browser’s language setting, but I want to allow users to change the language within the extension, regardless of the browser’s language.

For example, if the browser language is set to English, the extension initially loads in English. However, I want to provide an option for users to switch to any other language that my extension supports (e.g., Vietnamese, Chinese, French) while using the extension, without changing the browser’s language setting.

I’ve searched through various documentation, but I couldn’t find a straightforward way to achieve this. I noticed that chrome.i18n doesn’t seem to have an API for changing the language dynamically.

1. I’ve implemented basic i18n using Plasmo recommended approach, which works fine for the initial load based on the browser’s language.

2. I tried looking into chrome.i18n API, hoping to find a method to change the language programmatically, but couldn’t find anything suitable.

3. I considered using a React i18n library like react-i18next, but I’m unsure how to integrate it properly with Plasmo and make it work in a browser extension context.

4. I expected to find a way to call a function or update a state that would trigger a language change throughout the extension, something like:

   function changeLanguage(newLang) {
     // Some code to change the language
     // and update all translated strings in the UI
   }
   

5. I also thought about storing the user’s language preference in extension storage and applying it on load, but I’m not sure how to implement this effectively with Plasmo and React.

I’m looking for a solution that allows me to change the language dynamically within the extension, updates all translated strings immediately, and persists the user’s language choice across extension restarts.

I have a text and it looks like in pic. I want to make like that. I tired textshadow and box shadow. but i can’t achieve that design. Can someone help me with this.

Code i tried:

<div style={{boxShadow: "0px 0px 285px 150px rgba(119,45,239,0.6)",}}>Javascript</div>

Required Output:

<div class='topnav' id='myTopnav'>
  <div class='dropdown'>
    <button class=' dropbtn'>Adobe &#x25BC;</button>
    <div class='dropdown-content'>
        <a href='index'>Photoshop</a>
    </div>
  </div>
</div>
<script>
    jQuery(function($) {
        var path = window.location.href;
        $('#myTopnav a').each(function() {
            if (this.href === path) {
            $(this).addClass('active');
            $(this).parent().parent('first-child').addClass('active');
            }
        });
    });
</script>

I am not very good at jQuery or even Javascript, but I would like to give the button the same class as the anchor tag when the url the anchor is pointing to is correct.

I have this following HTML(mentioned below). Using jQuery, I’m having some issue moving the child element bottomExcerpt , to wrapperTwo.

On mobile, I want to move bottomExcerpt element and place it underneath smallhyperlinks and before picture.
So basically bottomExcerpt will be the middle element between smallhyperlinks and picture.

But for some reason on mobile, bottomExcerpt is getting moved underneath the picture but it should move underneath smallhyperlinks. The picture should be the last element, not bottomExcerpt.

On Mobile:
what it is currently displaying as : smallhyperlinks -> picture -> bottomExcerpt

But it should display as: smallhyperlinks -> bottomExcerpt -> picture

I have shared my JS code below. Am I missing something in the code?

Original HTML:

<div class="wrapper">
    <div id="wrapperItems" class="container">
        <div class="row belowContent">
            <div class="favoriteContainer"></div>
            <div class="bottomExcerpt">
                <p>HTML links are hyperlinks. You can click on a link and jump to another document.</p>
             </div>
        </div>
    </div>
</div>

  
<div class="wrapperTwo">
    <div id="wrapperItemsTwo" class="container">
        <div class="row belowContent">
            <div class="picture">
                <div class="symbol"></div>
             </div>
             <div class="smallhyperlinks">
                <h2 class="hidden">H2 Text</h2>
             </div>
        </div>
    </div>
</div>

JS

$(window).resize(function () {
    if ($(window).width() < 580) {
        $('.wrapperTwo .picture').insertAfter('.wrapperTwo .smallhyperlinks');
        $('.smallhyperlinks h2').removeClass('hidden');
        if ($('.wrapper .bottomExcerpt').length > 0) {
            $('.wrapper .bottomExcerpt').insertAfter('.wrapperTwo .smallhyperlinks');
        }
    } 
    else 
    {
        $('.wrapperTwo .smallhyperlinks').insertAfter('.wrapperTwo .picture');
        $('.smallhyperlinks h2').addClass('hidden'); 
    }
});

Could anyone suggest a way to compare two JSON objects in React.js?

We are looking for a solution similar to how GitHub displays commit differences—highlighting the changes between two objects side by side. Any libraries or code suggestions would be greatly appreciated.

tried with react-diff-viewer but it’s not working as expected and not comparing properly

I am trying to use auth0 for authentication on my frontend but facing some problems with fetching tokens

useGetAuthToken.ts

import { useAuth0 } from '@auth0/auth0-react';
import { useEffect, useState } from 'react';
const useGetAuthToken = () => {
  const { getIdTokenClaims } = useAuth0();
  const [token, setToken] = useState<string|null>(null);
  useEffect(() => {
    async function fetchToken() {
        try {
            console.log("Fetching token from Auth0");
            getIdTokenClaims().then((tokens) => {
                setToken(tokens ? tokens.__raw : null);
            }).then(() => {
                console.log("Token Set:", token);
            });
        } catch (error) {
            console.error("Error fetching token:", error);
        }
    }
    fetchToken();
  })
  return token;
}
export default useGetAuthToken;

I am using this hook to return an auth token which i can send to my backend like this

  const MODEL_API = import.meta.env.VITE_MODEL_API;
  const [tweets, setTweets] = useState<Tweet[]>([]);
  const token: string | null = useGetAuthToken();

  // Fetch tweets after the token is available
  useEffect(() => {
    const fetchTweets = async () => {
      if (token===null||token==="") return;
      console.log("Fetching tweets");

      try {
        const response = await axios.get(MODEL_API + "/api/twitter/tweets", {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });

        if (response.status === 200) {
          const recievedTweets = response.data;
          recievedTweets.forEach((tweet: Tweet) => {
            tweet.isDraft = tweet.status !== "published";
          });
          setTweets(recievedTweets);
        } else {
          throw new Error("Failed to fetch tweets");
        }
      } catch (error) {
        console.error("Error fetching tweets: ", error);
      }
    };
    if(token){
      fetchTweets();
    }
  }, [MODEL_API, token]);

Problem

I have no idea why but this request is being sent like 4 times.( I have removed react StrictMode). I am trying to understand why this is happening.

I also tried to do things like.

const [token,setToken]=useState<string|null>(null);
const { getIdTokenClaims } = useAuth0();
getIdTokenClaims().then((thistoken)=>{
setToken(thistoken);
console.log(token);//prints undefined but token is actually set after some time
})

OR

useEffect(()=>{
//code here
//token is undefined but set later on
},[token,MODEL_API])

but I am still facing this undefined problem and cant get through this.

What I want to achieve

The fetchtweets function should be called only when token is set, and there must not be so many requests to get the token like I can see in the console.This must happen in order.

fetch token > use token to send to backend

I came across developer tool

that shows the middle path of an SVG font glyph being identified.

I have tried through different library but seems not accurate.

Is this can be achieved through js to identify skeleton of font from glyph?

Any logic suggestion would be greatly appreciated

I am currently trying to create a script in ServiceDeskPlus that creates a three-field dependency between division, district, and subdistrict as shown below,

Example of image

whereby if the user selects a division, it would showcase the various districts in said area, and after selecting the district, it would showcase the various subdistricts in that area (if any).

The issue is that I am currently getting the error:

“ReferenceError: $CS is not defined at eval”

And I am unsure on what the issue is on my script.

Guide 1

Guide 2

I have followed the scripts based on the guides given by ManageEngine as shown in the hyperlinks above. During the first few tries when it did not work, I created a test template and tried to replicate the contents of Guide 2, with the sample code also being written in Guide 1 ($CS.setFieldDependency(dependencyObject)). I am unsure if I missed a step, but I was met with the same error as mentioned earlier whereby:

“ReferenceError: $CS is not defined at eval”

Here’s an example snippet below, it is using Javascript, and “$CS” is proprietary to ServiceDeskPlus

    var dependencyObj = {
      "FIELDS": [
        "Division",
        "District",
        "Sub-District"
      ],
      "VALUES": {
        "Kuching": {
          "Kuching": ["Padawan"],
          "Bau": [],
          "Lundu": ["Sematan"]
        },
        "Samarahan": {
          "Samarahan": [],
          "Asajaya": [],
          "Simunjan": [],
          "Sebuyau": [],
          "Gedong": []
        }
      }
    };
$CS.setFieldDependency(dependencyObj);

I hope to get a solution to this issue.