Evolving KuroEditor! Behind New Features and Implementation vol.3
A follow-up on KuroEditor, picking up new and unique features in the latest version! We explain the features, their implementation reasons, and design philosophy in detail.
Now at the core of Kuro-Boo's products, including open source, the WYSIWYG editor "KuroEditor" continues to pursue ultra-fast operation using vanilla JavaScript without framework dependencies, along with intuitive usability. In our previous "vol.2", we introduced basic text formatting, media placement, and Dropbox Paper-like table operations. However, KuroEditor's evolution does not stop there. In this article, we highlight features added since then, explaining their implementation reasons and background to deliver a story that cannot be found in standard manuals. Let us dive into the full picture of "KuroEditor vol.3," designed to express your world richly and stress-free.
Limit of Table Operation: Excel Paste Support and Pursuit of "Tables Loved by Japanese"
One of the parts that received the most passion in the development of KuroEditor is the "table" function. Anyone who has used many foreign rich text editors will agree that foreign editors treat tables very roughly. In most cases, micro-adjustments that we take for granted in Microsoft Excel or Google Sheets, such as changing cell background colors or merging and splitting cells, cannot be done, or are very difficult to use even if implemented.
Japanese people have traditionally preferred to "enclose and organize" information. This may be a spirit that is also reflected in Japanese housing styles, but even in web articles, expressing complex spec comparisons, price lists, and data comparisons in beautiful tables is extremely important for improving readability. To meet this need, KuroEditor has significantly enhanced its table function.
First of all, the greatest feature is "automatic table generation by copying and pasting from Excel, Google Sheets, or CSV data." Simply paste the range copied on the spreadsheet software directly into the editor, and KuroEditor will analyze the tab-separated (TSV) or comma-separated (CSV) format behind the scenes and instantly reconstruct it into a beautiful HTML table. This frees the writer from the trouble of creating cells from scratch in the editor. You can easily create a table in your familiar Excel and paste it.
Of course, even with KuroEditor alone, you can now freely change the thickness (thin, normal, thick, dotted line, etc.) and color of the outer border, inner gridlines, or "only one specific gridline." Merging cells (connect with right, connect with bottom) or splitting, vertical text alignment (top, middle, bottom), cell background color settings, etc., can all be done intuitively with only mouse operations. Supporting this delicate table representation required by Japanese people perfectly is the biggest reason why KuroEditor stands out from foreign editors.
What Separates "Enter" and "Shift+Enter": Paragraph Design Philosophy Inside the Editor
What is largely described in the KuroEditor operation manual is the "difference between line break and paragraph." In keyboard input, whether you press "Enter" or "Shift + Enter" when you just want to move to the next line makes a completely different HTML structure inside the editor. Understanding this difference is essential for maintaining a clean article layout.
When you press "Enter," the editor generates a new paragraph (<p> tag). This treats it as an independent block (clump) separate from the preceding and succeeding text. KuroEditor's powerful layout functions (indentation, left/right alignment, heading settings, etc.) are applied on a paragraph basis, so if the paragraphs are separated, you can easily perform operations such as right-aligning only a specific line. On the other hand, if you press "Shift + Enter," a simple line break (<br> tag) is inserted within the same paragraph. Since the editor recognizes it as "one clump," multiple lines will move in conjunction when you perform operations such as indentation.
The reason for implementing this behavior is to resolve the stress of "unintentionally widening the line spacing too much" that often occurs during writing, while enabling precise control according to semantic blocks. Use "Shift + Enter" for a few lines that you want to pack tightly together, such as an address or poem, and separate paragraphs with "Enter" for semantic transitions. This clear conceptual design is at the root of KuroEditor's ease of writing.
This function is particularly effective in list display. In many tools like Microsoft Word or Dropbox Paper, numbered or marked lists are naturally possible, but when you try to construct a complex list, it is frustrating that numbers are not attached as you wish, or you cannot insert a plain text block between lists. In such ways, usage that deviates from the format is severely limited to make one method convenient. KuroEditor makes it possible to express complex lists while keeping things as simple as possible.
"Rounded Box" that Creates Contrast in Layout and the Aesthetics of Wrapping
Conventional blog articles and news articles tend to have a "1-column vertical scroll structure" where text and images flow alternately in a monotonous manner from top to bottom. Of course, vertical scrolling has become the basis today with the spread of smartphones, but when viewing on a wide screen such as a PC, a layout that is too monotonous causes reader boredom. Therefore, the "Rounded Box (kuro-roundbox)" function was implemented.
A rounded box can be inserted with a single click from the dedicated icon placed in the lower menu of the editor. Inside the box, you can place not only normal text, but also all elements in the editor, such as images and tables. And from the settings menu that appears only while the cursor is inside the box, you can freely customize the width of the box (30% to 100%) and the alignment (left, center, right).
The greatest commitment here is the behavior of "text wrapping (Wrap)" when aligning to the left or right. For example, if you set the box width to 45% and align it to the "right," the following paragraph text will wrap beautifully to the left of the box. This makes it possible to neatly place columns in magazines or notes and supplementary information that differ from the main text. Also, if you want to end the wrapping at an intended place, just insert one horizontal line (hr), and the subsequent content will be automatically sent to the bottom of the box. This function, which creates a visual rhythm in a vertically long article, has the effect of significantly improving the reader's scroll depth.
"URL Card" that Changes the Concept of Link and "Emoji Shortcode" that Protects Writing Rhythm
In internet articles, links to other sites or past articles are essential elements. However, the conventional "blue text with underline" text links, although smart, had the weakness of being difficult for readers to recognize as "valuable reference information." In particular, when placing links that you want readers to click definitely, such as affiliate links, introductions to your services, or navigation to important related articles, visual appeal was lacking.
Therefore, KuroEditor introduced "URL Card (kuro-url-card)" display. When creating a link, simply check the "Card display (no title)" checkbox, and it will automatically retrieve the metadata (favicon, title, URL) of the target URL and convert it into a beautiful blog card format. This allows readers to intuitively understand what kind of page the link destination is, greatly increasing the click-through rate (CTR). Furthermore, if the target site is down or metadata retrieval fails, instead of outputting a broken image link, it is designed with a safety-first specification that "quietly adjusts the display (making the card itself function as a link while hiding broken assets)." This gets a big hint from Dropbox Paper. However, Paper's links automatically cardify even unintended URLs, occupying a large screen area, and even if a URL is broken and non-existent, there is a problem that the cache works as if it exists. KuroEditor allows you to choose from three options: normal blue link, simple card type (thin), and rich card type (slightly thicker, dynamically retrieving materials such as images).
On the other hand, as a function to protect the "rhythm" during writing, "emoji shortcode input" was also newly implemented. Emojis are useful for rich emotional expressions, but selecting them by opening the palette from the toolbar one by one requires shifting your hand from the keyboard to the mouse, disrupting the typing rhythm. In KuroEditor, simply by typing familiar shortcodes like :smile:, :fire:, or :+1:, they are automatically replaced with corresponding emojis at the moment input is completed. This small function, which allows you to smoothly add rich expressions to sentences without stopping writing, should be felt more comfortable by professional writers.
"Checklist (Todo)" that Extends Practicality and "Recipe Card" of Structured Data
KuroEditor is not just an editor for posting blog articles. Because it is also expected to be embedded in the personal memo tool "KuroNote," which is a sibling project of KuroCMS, it greedily incorporates practical functions that can be used for personal purposes. A prime example is the "Checklist (Todo)."
- Check email
- Make coffee
Simply type [] at the beginning of a line and press space to automatically generate a list with checkboxes. Since the state of the check is saved together with the article as HTML data, the state is maintained even if you press the save button and reload. Note that checkboxes on the public page cannot be "toggled by readers on the spot" (since a mechanism to save the state for each reader in the database is required, it becomes a checkbox display as appearance), but it is highly effective for task management during writing or presenting procedure verification lists in articles.
In addition, as a function specialized for specific business models and site uses, we have newly equipped a "Recipe Card (kuro-recipe)." This is a structured block to strongly support the management of cooking recipe blogs. When you insert a card, it displays the number of people, preparation/cooking time, ingredients, and steps in a beautiful organized table/list format as a single card. The recipe card is designed with SEO (Google's recipe structured markup) in mind, so search engines can recognize it as correct data. Furthermore, from the user's perspective of "readers being confused if there are too many recipes in one article," a strict constraint of "only one recipe can be placed per article" is provided (if it is already placed, the toolbar button turns gray to display the reason why it cannot be inserted). The existence of such specialized cards is an element that explosively increases the content value in specific niche media. For details, please see the KuroCMS recipe article.
Evolution of Code Block to Assist Engineer Writers: Drag Move and Automatic Copy Button
Well, this was a natural feature when writing many technical articles and tutorials, but a "code block" is essential to make the source code look clean. Code blocks existed in the conventional KuroEditor, but there was room for improvement in developers' unique operations such as "reordering the entire block" or "copying code" during writing.
Therefore, we supported "moving the entire block up and down by dragging the line number area" displayed on the left edge of the code block. When writing long commentary articles, the situation "I want to move this code block before the paragraph above" occurs frequently. Cutting and pasting code (Cut & Paste) carries the risk of breaking indentation or leading to unexpected destruction of the HTML structure, but reordering by drag-and-drop allows you to swap block positions safely and intuitively.
Also, to facilitate "copying code," which readers do most frequently on public pages, we also provide a helper script that automatically attaches a "📋 Copy button" to the upper right of the code block. KuroEditor's unique consideration of designing up to the final "reader experience (UX)" instead of completing only inside the editor resides in such details.
Conclusion: "WYSIWYG" that Reflects Exactly What You See Without Any Deviations
What KuroEditor aims for is not just "an editor for arranging characters beautifully." It is the ultimate WYSIWYG experience where complex tables, rounded boxes, and wrapping layouts constructed in the editor are "reflected in the public page with exactly the same appearance." Implementing this in vanilla JavaScript, which does not use any framework and does not compromise loading speed or performance, was a major technical challenge. KuroEditor, which can be embedded in any web system or CMS with a few lines of code due to its loosely coupled design that minimizes connection points, will continue to support the writing experience of many creators and proceed with improvements.