DEV Community: smrifat1411

What Word actually puts on your clipboard

smrifat1411 — Sat, 15 Aug 2026 20:12:52 +0000

I was building an exam authoring tool. Teachers wrote their questions in Word — full of maths — and pasted them into the browser.

The equations came through as pictures. Flat images of what used to be an equation. Nobody could click into one to fix a typo in a denominator; the only option was to delete it and rebuild the whole thing by hand.

I assumed that would take an afternoon to fix.

The thing I got wrong first

My first instinct was the obvious one. Word pastes garbage, so strip the garbage. Kill the mso- styles, kill the XML namespaces, kill the classes, keep the plain tags underneath.

That works. The output is clean. It is also how you throw away the two most valuable things Word gave you.

Because Word does not just send a mess. It sends a mess with the good stuff buried in it, and the naive clean deletes the good stuff along with the noise.

What is actually on your clipboard

Copy something out of Word and you do not get a fragment. You get an entire HTML document, and it announces itself in the first line:

<html xmlns:o="urn:schemas-microsoft-com:office:office"
      xmlns:w="urn:schemas-microsoft-com:office:word"
      xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math">

That third namespace is the one that matters. xmlns:m is the maths namespace, and it is there because Word puts equations on the clipboard as OMML — Office Math Markup Language. The same structured maths that lives inside a .docx. Not a picture. The real thing.

Word also puts a rasterized picture of the equation on the clipboard, tucked inside a conditional comment as a fallback for anything that cannot do better.

So the equation is there twice. Once as an image. Once as actual maths.

And here is the annoying part: the image is a plain <img>, so it survives naive cleaning without a scratch. The OMML is a namespaced element, so it gets swept out with all the other Word noise.

Every paste handler I looked at keeps the picture and deletes the maths. Mine did too. That was the whole bug.

Then I found the lists

I fixed the equations, felt good about myself for roughly a day, and then someone pasted a numbered list.

Word does not paste a list as a list. There is no <ul>. There is no <li>. Every single item is a paragraph:

<p class=MsoListParagraphCxSpFirst style='mso-list:l0 level1 lfo1'>
  <![if !supportLists]>
    <span style='mso-list:Ignore'>1.<span style='font:7.0pt'>&nbsp;&nbsp;</span></span>
  <![endif]>
  First item
</p>

I stared at this for a while before it clicked.

mso-list:l0 level1 lfo1 is the only thing on the entire clipboard that says this paragraph belongs to a list. l0 is which list. level1 is how deep it is nested. That is your entire structure, living in a CSS property.

The 1. is not a marker the browser draws. It is literal text. An actual character sitting in the paragraph.

Which means if you strip the styling and keep the text — the obvious thing to do — you get a paragraph with a number welded onto the front of it. It looks fine. Then the user inserts a new second item and gets 1, 1, 2, 3, and nothing renumbers, because nothing is numbering anything. It is not a list. It is five paragraphs wearing a list costume.

And the span holding that number is labelled mso-list:Ignore.

Word is telling you. Right there in the markup. This is presentation, not content, please do not treat it as text. And every naive cleaner treats it as text.

The bug that took me longest

Here is the one I actually want to write down, because it cost me an evening and it fails in the worst possible way.

I had a pipeline. Convert the maths, strip the conditional comments, strip the styles, done. Sensible order. Each step obviously correct.

The problem is step two. Word wraps those list markers in a conditional comment, and I was deleting every conditional comment I found, because the equation image fallbacks live in conditional comments too and I wanted those gone.

So by the time I got around to thinking about lists, the evidence was already in the bin. The mso-list styles were still there, but the markers — the only record of whether the list was numbered or bulleted, and where it started — were gone.

The correct order turns out to be:

Convert the maths first, on the raw string. The HTML parser lowercases tag names, which quietly breaks anything looking for <m:oMath>.
Do not nuke every conditional comment. Unwrap the list ones, delete the image ones.
Rebuild the lists — group paragraphs by list id, nest by level, read each marker, then drop the marker spans.
Now strip the styling. The structure is safe, so the mso- stuff carries no information any more.

Clean before you reconstruct and step four eats what step three needed.

What makes this genuinely nasty is that it does not throw. You do not get an error. You get clean, valid, perfectly reasonable HTML. It is just the wrong shape, and you will not find out until a user complains that their list will not renumber.

Three traps in the markers

That o is not the letter o. Word's second-level bullet is a hollow circle drawn in Courier New, and it comes through as the character o. Treat markers as ordinals and your bulleted list comes back with stray o's scattered through it. The reliable test is punctuation — ordered markers always end in . or ), bullets never do.

i. is ambiguous, i. ii. iii. is not. A list starting with i. could be roman numerals or the ninth letter of the alphabet. One marker cannot tell you. The run can. So read the whole sequence before you decide the list type.

There are two kinds of conditional comment, and they are not the same thing:

<!--[if gte mso 9]>  ...  <![endif]-->   downlevel-hidden — a real comment
<![if !supportLists]> ...  <![endif]>     downlevel-revealed — content is live

The second one has no --. Its contents are meant to be displayed. Browsers parse it as a bogus comment, so you have to unwrap it as a string before the DOM ever sees it. One missing pair of hyphens is the difference between keeping your list structure and losing it.

Before and after

Naive cleaning:

<p><span>1.</span>First</p>
<p><span>a.</span>Nested</p>
<p><span>2.</span>Second</p>

Reading the markers first:

<ol>
  <li>First
    <ol type="a"><li>Nested</li></ol>
  </li>
  <li>Second</li>
</ol>

The first one looks clean. It is permanently broken. The second one is a list again, and the browser owns the numbering.

I put it in a package

The afternoon turned into rather more than an afternoon, so I pulled it out of the exam builder and published it: wordpaste. MIT, zero dependencies, about 3.5 kB gzipped.

npm install wordpaste

One function in, clean HTML out:

import { transformPastedHTML } from 'wordpaste';

new Editor({
  extensions: [StarterKit],
  editorProps: { transformPastedHTML },
});

That is Tiptap. ProseMirror takes the same prop because Tiptap is built on it. Lexical needs you to claim the paste command, and plain contenteditable takes about three lines. It also handles LibreOffice, Outlook, Excel and Google Docs, and leaves ordinary HTML alone.

If you would rather not take a dependency, honestly, fine — the ordering is the part worth stealing. Read the markers, rebuild, then clean. That is the whole insight, and it is about forty lines of work.

You can paste one of your own documents into the playground and see what your clipboard is really carrying. It runs entirely in your browser, nothing gets uploaded. I would recommend trying it with a document that has equations in it. It is a bit horrifying.

Exploring RxDB: The Concepts It Holds

smrifat1411 — Sun, 20 Aug 2023 00:36:33 +0000

Hello there! Today, we're diving into the exciting world of RxDB – a modern database technology that works like an essential collaborator of web apps. With features like real-time updates and offline use, RxDB makes sure your app's stays working, fresh even without internet. It seamless integration with JavaScript enable you to mastering it with your JS skill. Curious to know more about this cool database tech? Let's explore together!

What is Rxdb?

The first line I would like to say RxDB, short for Reactive Database. Keep in mind "Reactive", we will talk more and more about this later. RxDB is a NoSQL database designed as a JavaScript library for efficient data storage and management in web applications.This means, RxDB is not just a standalone database like MongoDB or traditional SQL databases; rather, it's a library that enables developers to work with a NoSQL database called IndexedDB using JavaScript directly in their web applications. Basically it wrapped IndexedDB or WebSQL or any other supported browser database with a layer of extra functionality.

I am clearing more it, Databases like MongoDB (a NoSQL database), IndexedDB, or traditional SQL databases (such as MySQL or PostgreSQL) aren't initially structured as JavaScript libraries. Although they can use within JavaScript applications, they need additional drivers, libraries, or middleware for efficient interaction through JavaScript.

This contrast is where RxDB excels. Built upon familiar web technologies like IndexedDB and WebSockets, RxDB easily integrates with JavaScript. Developers can interact with and manage data using their existing JavaScript skills. Unlike the extra setup required by other databases, RxDB easily integratable with JavaScript, allowing direct utilization in web applications without the need for external connectors or drivers. This frequent integration ensures a friendly experience, simplifying data storage and management within JavaScript-based web applications.
RxDB is designed to provide a more reactive and user-friendly interface for developers.

It leverages the capabilities of IndexedDB database for data storage but also offers features like real-time data synchronization, query optimization, and a more streamable API.

I am sure you are definitely not satisfy with this little explanation, please see their well arranged doc for get a complete overview.

RxDB's Nucleus:

Reactive Programming:

Let's talk about something seriously cool – When you chatted with your friend through whatsapp or any other messaging app and as your friend types, you see their messages pop up in real-time.That's the heartbeat of reactive programming – your app reacts to changes as if it's part of the chat who knows he has to show the updated message to your app screen, when your friend send a new message.

let, clear it more...Suppose you're watching a live event streaming on youtube. As people comment, their thoughts pop up in real-time, creating a dynamic conversation. This is the essence of reactive programming – where apps react to changes as they happen, just like the comments appearing as people post them.

Now, here RxDB comes to play. Imagine you and your team are all working on a shared document. As someone modifies a sentence or adds a new idea, guess what? Those changes instantly pop up on your screen, without any annoying refresh or reload. It's like having a co-author right there beside you, keeping your document updated in real-time. Thanks to reactive programming and RxDB, your app stays in tune and updated with these changes.

Offline-First:

Can you recall the moment when Wi-Fi decides to go on a break. or suddenly you move to a 2g coverage area. That's where the "offline-first approach" swoops in to save the day.

Think of it like you are carrying a unbelievable modern app on your Ipad that lets you note down creative ideas,updating tasks, important meetings and keep working even without Wi-Fi. It's your way of staying productive, regardless of the connection's mood swings. And guess what? When the Wi-Fi fairy returns, here comes RxDB, our app's personal hero,personal friend. It quietly syncs everything up behind the scenes – no fuss, no hassle. It's like having your own data butler, making sure everything's in perfect harmony. With RxDB on your side, you and your app are always on the same track same beat, even when the internet doesn't act friendly.

Importance of Real-Time ,Offline Efficiency in Web Apps:

Assume that you are creating a fantastic online store using React. Let's talk about real-time updates and offline functionality – they're like your secret weapons for a topnotch shopping journey.

Requirements: Your customers are exploring your digital store. With real-time updates, they can instantly see the latest product availability, discounts, and any stock changes.Suppose You've just added a brand-new product to your backend. Now the frontend just have to show the updated product immediately on the product list without any refresh or reload the web app.

Think this:How does this work? Well, you can set up a backend server using technologies like Node.js and Express. Then, integrate web sockets, like Socket.io, into your backend to allow real-time communication between the server and your React frontend. or do this with front-end solution you can use heavy lifting state management with redux or context Api. It's a lot work my friend.

But we can achieve all this magic even more easily with RxDB. This JavaScript library smoothly integrates with your app, making real-time updates and offline functionality a breeze. With RxDB, managing your store's data becomes super handy, allowing you to focus on creating an exceptional shopping experience.

And we all know the internet can be a bit unpredictable. This is where the offline functionality shines. Picture your customers on a train or at a café or with shaky Wi-Fi.or no wifi in while hiking in a mountain... No worries! They can still view products, add items to their cart, and even start the checkout process without a strong or no internet connection. Once they're back online, everything smoothly syncs up with the remote server.

These remarkable features aren't just about making shopping smoother.They make your website truly stand out. It's like giving your customers a virtual shopping flavor that rivals an in-person experience, all thanks to the magic of real-time updates and offline functionality. Your customers will absolutely love the freedom to shop anytime, anywhere, even if the internet decides to take a break.Also you can push realtime things like giving a live popup notification to your customer. Trust me, RxDB is that friend who want to less your hassle.

Key-Features:

Browser-Storage: RxdB provides a local database that we can use to store data directly in our client browser or any other JavaScript environment. Usually this storage limit depends on client device specs. But you can sure that, you will get at least 50MB according to their doc.

Multiple client Synchronization:
RxDB enables real-time data synchronization between clients(frontend) and servers(backend). This means that one changes made to the database on one client are automatically reflected to other clients connected to the same database. This feature is essential for creating collaborative and multi-user applications where data consistency is vital.

Handling Conflict:
In scenarios where multiple clients make changes to the same data simultaneously, conflicts can arise during synchronization. Not only this case, in time of sync between remote server and client conflict can be arise. RxDB offers built-in conflict resolution mechanisms called replication to help you handle and resolve conflicts smartly.

Reactive Programming:
As I discussed above RxDB offering reactive programming. It will give you a option to do anything when your database's any data changed. Basically In RxDB, each database query, when executed, returns an Observable that represents the ongoing changes to the query result. This Observable emits different data sets over time as the data in the database changes. Then you have to subscribe to an observable means you're expressing your interest in being notified whenever the Observable emits new values. When you subscribe to an Observable, you provide a callback function that will be executed each time the Observable emits a new value. You can learn more about it here RxJx.

Query and Filter:
RxDB giving powerful querying capabilities that allow you to retrieve data from the database based on specific criteria. You can perform complex queries to fetch only the data you need, which can improve performance and reduce unnecessary data transfer. I am not sure but somehow the RxDB's query api is inspired by mongoose which is a widely used ODM for MongoDB

Offline support: Since RxDB use client browser storage for storing data, so obviously it has off line support.

Modularity: RxDB works with various JavaScript applications and frameworks. It can be used with different front-end libraries and back-end technologies like Node js, React, Vue, Angular and many more

Cross Platform: The feature I love most about RxDB is..
Apart from web applications, RxDB can be used in other environments like Electron applications and mobile frameworks such as React Native. This allows you to maintain a consistent data management approach across different platforms.

Extendable:
You can extend RxDB's functionality by creating custom plugins and hooks according to your application's requirements

I think it is quite long for you. Hope that you have gathered the basic idea about RxDB library and also encounter the fundamental that are efficient to start exploring RxDB doc. I had planned to write a complete article about how to integrate RxDB with react. But I am also not a fan of big article. So, I will make a separate article about how to intrigate RxDB with React JS. Happy learning, keep Exploring

Reference VS Value in JavaScript - Part 1

smrifat1411 — Sat, 11 Mar 2023 22:42:09 +0000

এই হ্যান্ডনোটে আমরা জাভাস্ক্রিপ্ট শেখার প্রথম অবস্থায় Data Type সংক্রান্ত যেসকল কুল টার্ম হরহামেশায় শুনি সেগুলো নিয়ে অল্পবিস্তর আলোচনা করবো। কোড করতে করতে নোট তুলবো।
Primitive,Non-Primitive,Value,Reference,Objects,Stack,Heap,Dynamic,Static,pass by value etc...

এই Word গুলো জাভাস্ক্রিপ্ট জানার সুবাদে আমরা অনেকবার শুনে ফেলসি। কিন্তু মাঝেমধ্যেই এগুলোর শানে-নুযূল আমার মতো Beginner জনতার বুঝতে একটু এলোমেলো লেগে যায় আরকি। সেজন্যই আজকের নোট

JavaScript-এ আমরা যাই লিখি না কেনো সেগুলো Run করার জন্য তো Memory তে Save করে রাখতে হবে তাই না? এই Data সংরক্ষণ জাভাস্ক্রিপ্ট দুইভাবে করে। অর্থাৎ আমরা আমাদের কোডে Varriable, Function, Array, Object যায় লেখি না কেনো এগুলো পর্দার পিছনে মেমরিতে Save হয় দুইভাবে। দুইটার আচরণও আলাদা এজন্য।

Data Types:

1. Primitive Types : string, number, bigInt, boolean, undefined, symbol, null.

2. Non-Primitive Types: All Objects(Array,Function)

"string, numb.." এই সাতধরনের ডাটাকে প্রিমিটিভ টাইপ বলে। আমরা এগুলোর ডিটেইলস নিয়ে কথা বলবো না। আপনারা অবশ্যই এগুলো জানেন।

তবে মজার বিষয় হলো নন-প্রিমিটিভ কিন্তু একজনেই। Object, হ্যা জাভাস্ক্রিপ্টে Object ই হলো একমাত্র Non-Primitive ডাটা টাইপ। ওয়েট,অবজেক্ট সম্পর্কে আমাদের সঠিক ধারনা আছে তো? না থাকলে অবশ্যই এই নোটটা আগে দেখে নেই।
যেহেতু Function, Array এগুলাও জাভাস্ক্রিপ্টে দিনশেষে Object ই তাই এগুলাও নন-প্রিমিটিভ।

Stack and Heap :

আমরা ইতিমধ্যে জেনে গেছি জাভাস্ক্রিপ্টে Data টাইপ দুই ধরনের। ধরন অনুযায়ী JavaScricpt
এই দুই টাইপের Data তার মেমোরিতে দুই জায়গায় সেভ করে।

Stack memory (সব primitive types ডাটা সেভ হয়)
Heap memory (সব non-primitive types ডাটা সেভ হয়)

Value:

আমরা যখন Primitive type কোনো ডাটা তৈরি বা স্টোর করবো আমাদের মেমোরিতে তখন এটাকে বলে Value দিয়ে তৈরি বা Pass করা। এখন ভ্যালু দিয়ে কি তৈরি হবে,ভ্যালু দিয়ে তৈরি হবে Variable. অর্থাৎ Variable এর মধ্যে থাকবে Value. বিষয়গুলো মজার না?

ভ্যারিয়েবল নিয়ে আর দুকথা নোট নেয়া যাক:

ভ্যারিয়েবলে আমরা ভ্যালু রাখতে পারি
প্রয়োজনমতো সেই ভ্যারিয়েবলের নাম ধরে কোডে তার ভ্যালুর এক্সেস নিতে পারি।
ভ্যালুটা পরিবর্তন মানে Re-Assign করতে পারি।

Example: let num = 10; let word = "hello";

Reference:

এদিকে যখন Non-Primitive type কোনো ডাটা তৈরি করবো আমাদের মেমরিতে তখন এটাকে বলে রেফারেন্স(Reference) রাখা।

Example: let myObj = {a:5}

এজন্য অনেকেই Primitive কে Value টাইপ ও বলে। অনেকে আবার Non-Primitive কে Reference, Object টাইপ বলে আমাদের এলোমেলো করে দেয়।

টিপসঃ Object মানেই নন-প্রিমিটিভ/রেফারেন্স বাকি সব প্রিমিটিভ/ভ্যালু এভাবে মনে রাখা যেতে পারে।

এখন চলুন একটু Behind The Scene ঘুরে আসি।

জাভাস্ক্রিপ্ট তার V8 ইঞ্জিনে যেখানে আমাদের কোড কম্পাইল,রান হয় সেখানে ডাটা স্টোর করে দুই জায়গায় 1.Stack ও 2. Heap
এগুলো নিয়ে এখন মাথা না ঘামালেও চলবে, চলুন নিচের কোডটা একটু দেখি

let bag = "Book";

let tholi;

tholi = bag;

bag = "Vegetables";

console.log(`I am inside bag - ${bag}`);
console.log(`I am inside Tholi - ${tholi}`);


// I am inside bag - Book
// I am inside Tholi - Vegetables

এখানে প্রথমে আমি bag নামে একটা Variable-এ "Book" String Value রাখসি। সব primitive ব্যাপার-স্যাপার। এরপরে আরেকটা variable তৈরি করসি tholi নামে। এখন tholi-এর ভ্যালু হিসেবে পাস করছি bag কে। এটুকু আমাদের স্ট্যকে(Memory) কিভাবে জমা হলো চলুন সেটা আগে দেখে আসি

১. দ্বিতীয় লাইনে আমি tholi ভ্যারিয়েবলটা তৈরি করলাম কিন্তু এর কোনো ভ্যালু দেই নি,তাই দ্বিতীয় লাইনে যখন কম্পাইলার আসবে সে এর ভ্যালু undefined সেট করবে।

২. এরপরে যখন আমি tholi = bag স্ট্যাটমেন্ট রান করলাম আমার tholi ভ্যারিয়েবলটিতে bagএর যে ভ্যালু সেটার একটা কপি তৈরি করে নিলো।
আমরা জানি ভ্যারিয়েবল ডিক্লেয়ার করার পরে এর নাম ধরে ডাকলে আমরা তার ভ্যালুটার এক্সেস পাই। bag এর ভ্যালু এখানে "Book". যেটাকে আমরা এসাইন করেছি tholi ভ্যারিয়েবলে। তাই এখন tholi এর ভ্যালুও "Book" ।

এখন যদি আমি bag বা থলি যে কোনো একটার ভ্যালু এর পরে কোডে কোথাও পরিবর্তন বা Re-assign করি, তাহলে কি হবে? চলুন নিচের কোডটি রান করি।

let bag = "Book";

let tholi;

tholi = bag;

bag = "Vegetables";

console.log(`I am inside bag - ${bag}`);
console.log(`I am inside Tholi - ${tholi}`);


//I am inside bag - Vegetables
//I am inside Tholi - Book

আউটপুটে আমরা দেখতে পাচ্ছি যে চতুর্থ লাইনে আমি bag এর Value পরিবর্তন করলেও সেটা আমার tholi ভ্যারিয়েবলের কোনো পরিবর্তন ঘটাচ্ছে না। কারন কি?

উপরের বর্ণনাটুকু পড়লে আপনারা নিশ্চয় তা বুঝে গেছেন। এখানে bag আর tholi দুইটা স্বাধীন variable. যদিও তারা একি value হোল্ড করে (তৃতীয় লাইনে আমরা সেই কাজ করসি) কিন্তু মেমরিতে তাদের আলাদা আলাদা ঠিকানা আছে। তাই আমরা যদি তৃতীয় লাইনের পরে একটার ভ্যালু পরিবর্তন করি তাহলে আরেকটার উপরে কোনো প্রভাব পরবে না

চলুন স্ট্যাক দেখে আসি

কুইজঃ নিচের কোডটি দেখে এর আউটপুট অনুমান করুন এবং Stack এ Behind the Scene কি হচ্ছে সেটাও চিন্তা করুন।

`
let bag = "Book";
let tholi;

bag = "Vegetables";

tholi = bag;

console.log(I am inside bag - ${bag});
console.log(I am inside Tholi - ${tholi});
`

হিন্টসঃ এখানে আমি tholi ভ্যারিয়েবলে bag এর ভ্যালু এসাইন করেছি, চতুর্থ লাইনে কিন্তু তার আগে আমি bag এর ভ্যালু পরিবর্তন করেছি। তাই চতুর্থ লাইনে এসে যখন আমার কোড রান করবে তখন সে থলির মধ্যে আমার ব্যাগের পরিবর্তিত ভ্যালুটা কপি করে রেখে দিবে।