How to implement nesting effect of text annotations in Quill editor?
Apr 04, 2025 pm 05:21 PM
Quill Editor: Cleverly implement text label nesting
When doing text annotation in Quill Editor, it is crucial to handle the nesting effect of overlapping annotations. This article provides a solution to effectively solve the situation where multiple annotation index overlaps.
First, we review common requirements and code snippets:
Sample data:
const response = {
"errorwordlist": [
{
"alertmessage": "It is recommended to use "NPC Standing Committee/NPC Standing Committee Members/NPC Standing Committee Members (please choose according to the actual situation)\" Replace "NPC Standing Committee Members\"",
"replacetext": "National Congress Standing Committee/National Congress Standing Committee Member/National Congress Standing Committee Member (please choose according to actual situation)",
// ... other properties
"start": 9,
"end": 13,
"id": 1
},
{
"alertmessage": "It is recommended to use standardized words\"Provincial People's Congress Standing Committee\"",
"replacetext": "Provincial People's Congress Standing Committee",
// ... other properties
"start": 8,
"end": 13,
"id": 2
}
],
// ... other properties
};
Improved annotation method:
The original annotation method has defects and cannot handle nested annotations. We need to optimize the algorithm to ensure that overlapping annotation areas are handled correctly.
Core idea:
- Sort: Sort
errorwordlistin ascending order according tostartindex. - Iterative processing: Iterate over the sorted array and process each annotation in turn.
- Offset: For non-first labels, the length of the previous label needs to be considered and the correct
startoffset is calculated.
Improved code:
const sortedErrorList = response.errorwordlist.sort((a, b) => a.start - b.start);
sortedErrorList.forEach((item, index) => {
let length = item.end - item.start;
if (length > 0) {
let startOffset = item.start;
if (index > 0) {
// Calculate the offset and avoid repeated labeling startOffset = sortedErrorList[index - 1].end - sortedErrorList[index - 1].start;
}
this.editor.updateContents([
{ retain: startOffset },
{ retain: length, attributes: { click: item } }
]);
}
});
Through this method, we can effectively handle overlapping annotations to achieve the correct nesting effect. This avoids possible label overrides or misalignment problems in the original code. The final rendered annotation results will accurately reflect the start and end positions of each annotation in the data, even if they overlap.
Custom Blot (optional optimization):
For better maintainability and scalability, you can consider using custom Blots to implement label styles. This part of the code can be adjusted and optimized according to actual needs.
Through the above improvements, the Quill Editor can perfectly handle nested text annotations and improve the user experience.
The above is the detailed content of How to implement nesting effect of text annotations in Quill editor?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1794
16
1739
56
1590
29
1467
72
267
587
What is a blockchain browser? How to use it to track on-chain transaction data?
Jul 23, 2025 pm 11:54 PM
Blockchain browser is a must-have on-chain query tool for Web3 users. 1. It serves as a "search engine" in the decentralized world, allowing users to openly and transparently verify all records on the blockchain; 2. The core functions include querying transaction details, viewing account information, exploring block data and tracking smart contracts; 3. When tracking transactions, you need to obtain the transaction hash, select the browser corresponding to the public chain, and enter the hash to view the status, address, amount and fee details; 4. Confirm whether the transaction is successful through the browser is a key step to ensure the security of digital assets. Proficient use can help users better understand and participate in the blockchain ecosystem, thereby operating more safely and stably in the decentralized world.
What is the blockchain confirmation time? How to query the confirmation status of transactions on the blockchain?
Jul 23, 2025 pm 11:48 PM
Blockchain confirmation time refers to the time it takes for a transaction to be broadcasted to be packaged by a block and written to the chain. The confirmation speeds of different chains vary. 1. Bitcoin produces blocks on average in 10 minutes, and it is recommended to confirm 6 times to ensure security; 2. Ethereum produces blocks in about 12 seconds, and 1-3 times can be confirmed, and most transactions are completed within 1 minute; 3. The BSC chain block time is about 3 seconds, suitable for high-frequency trading; 4. The TRON tide block time is 1-3 seconds, suitable for real-time transfer; 5. The Polygon block time is about 2 seconds, with low fees, and is widely used in DeFi and NFT. Trading hash (TxID) is required for query and confirmation status. Recommended platforms include: 1. Ouyi OKX, which supports multi-chain transaction query; 2. Binance, suitable for BSC chain; 3. Huobi HT
2025 Cryptocurrency Market Outlook: How do policies, institutions and technological innovations affect trends?
Jul 23, 2025 pm 10:15 PM
In 2025, the cryptocurrency market will be driven by three major factors: clear policy supervision, in-depth institutional participation and technological innovation. 1. The United States may introduce a comprehensive crypto bill, and global regulatory coordination (such as the EU MiCA) will enhance the legitimacy of the industry; 2. Institutional funds will enter large-scale through compliant products such as Bitcoin and Ethereum ETFs, and exchanges such as Binance, OKX, Huobi, Gate.io and Coinbase will serve as core infrastructure to undertake institutional traffic; 3. The popularization of Layer 2 network will promote the scale of applications, and the tokenization of real-world assets (RWA) is expected to inject trillion-dollar liquidity into DeFi. The integration of AI and crypto will give birth to a new paradigm, jointly driving the growth of the industry's intrinsic value.
Hong Kong legislation supports digital currency! These 6 compliant coins may become the focus of the next bull market
Jul 23, 2025 pm 08:12 PM
The era of compliant crypto trading in Hong Kong has begun, and six potential currencies have attracted attention: 1. Bitcoin (BTC) is a must-have asset as digital gold; 2. Ethereum (ETH) has become the second largest compliance option with its strong ecosystem; 3. Ripple (XRP) has compliance potential due to its cross-border payment application and liquidity advantages; 4. ADA (ADA) meets regulatory preferences with its academic foundation and stability; 5. Litecoin (LTC) is regarded as a security option due to its long history and stable community; 6. Binance Coin (BNB) is likely to be selected based on its high market value and wide ecosystem. Investors can first trade these assets through mainstream platforms such as Binance, Ouyi, Huobi, and Gate.io to prepare for the future opening of the Hong Kong retail market.
What is a more common digital currency
Jul 23, 2025 pm 09:53 PM
Digital currency is a decentralized electronic currency based on blockchain technology. Its value is determined by market supply and demand. It is globally universal, transparent in transactions and has certain anonymity. 1. Binance is the largest platform in the world with transaction volume, providing rich currencies and a strong ecosystem. 2. OkX has a comprehensive product line, supporting derivatives trading and Web3 accounts, suitable for advanced users; 3. Huobi (Huobi/HTX) has a long history, is safe and stable, and is deeply trusted by old users; 4. Gat
The stablecoin market ushers in major changes, and the US dollar stablecoin becomes the biggest winner
Jul 23, 2025 pm 10:27 PM
After experiencing the collapse of algorithmic stablecoins and stricter regulation, the US dollar stablecoin supported by fiat currency reserves has become the biggest winner in the market due to its high transparency and strong compliance, and its dominance has been consolidated. 1. Tether (USDT) has become the core trading pair of mainstream exchanges around the world such as Binance, Ouyi and Huobi with its maximum market value and extensive liquidity; 2. USD Coin (USDC) has won the favor of institutions for its high transparency and regular audits, and has widely supported it on platforms such as Binance, Ouyi and Coinbase; 3. First Digital USD (FDUSD) is an emerging compliant stablecoin, which has developed rapidly under the promotion of Binance and has gradually entered platforms such as Gate.io; 4. Dai (DA
Where can I view Binance Coin trading market? Binance Coin price dynamic website recommendation
Jul 23, 2025 pm 10:51 PM
1. Binance is the most direct platform to view BNB prices, providing real-time prices, in-depth charts, multi-trading pairs and professional K-line charts; 2. OKex and HTX are comprehensive market websites, aggregating global data and providing macro information such as weighted average price, market value, trading volume and off-chain data; 3. TradingView is the first choice for technical analysis, with powerful charting tools, rich indicator libraries and global analyst views, suitable for in-depth market analysis; combined with these platforms according to needs, you can fully grasp the BNB price trends.
What is PFVS coin? What is the value in the future and is there any prospects? Analysis of PFVS Coin Price Trend
Jul 24, 2025 pm 11:48 PM
Directory What is the Puffverse(PFVS) currency? What is the future value of PFVS coins? Does PFVS coins have any prospects? PFVS token Economics and Distribution 1. Total Supply and Distribution Structure 2. Community-centric Distribution 3. Sustainable Attribution Timeline 4. Economic Sustainability Mechanism 5. Team Allocation and Destruction Commitment Functions of PFVS Coin 1. Main Utility and Game Integration 2. Participate in Governance through vePUFF Conversion 3. Pledge Rewards and Revenue Sharing 4. Economic Incentives and Creator Rewards 5. Destruction and Deflation Mechanism Summary PFVS Coin is the native token of Puffverse, and its main function is payment and rewards
