npm - jodit-pro - Versions diffs - 4.9.4 → 4.9.15 - Mend

jodit-pro 4.9.4 → 4.9.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (329) hide show

package/examples/style-plugin.html ADDED Viewed

@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<!--
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+-->
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+		/>
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<title>Jodit Pro — Style Plugin</title>
+		<link rel="icon" type="image/png" href="assets/icon.png" />
+		<style>
+			/* ===== Custom style definitions CSS ===== */
+			/* --- Block styles --- */
+			.document-title {
+				font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
+				font-size: 2.8em;
+				font-weight: 700;
+				line-height: 1.1;
+				text-transform: uppercase;
+				color: #1a1a2e;
+				margin: 0 0 0.2em;
+				padding: 0;
+			}
+			.document-subtitle {
+				font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif;
+				font-size: 1.35em;
+				font-weight: 300;
+				line-height: 1.4;
+				color: #6c757d;
+				margin: 0 0 0.8em;
+				padding: 0;
+			}
+			.category-header {
+				font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
+				font-size: 0.75em;
+				font-weight: 400;
+				letter-spacing: 0.3em;
+				text-transform: uppercase;
+				color: #999;
+				margin: 0 0 0.4em;
+				padding: 0;
+			}
+			.info-box {
+				position: relative;
+				padding: 1.2em 1.5em;
+				border-left: 5px solid #e8436a;
+				border-radius: 0 8px 8px 0;
+				background: linear-gradient(135deg, #fef8f9 0%, #fff5f7 100%);
+				margin: 1.5em 0;
+			}
+			.info-box::before {
+				content: '';
+				position: absolute;
+				top: -6px;
+				right: -6px;
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: 0 24px 24px 0;
+				border-color: transparent #e8436a transparent transparent;
+				border-radius: 0 8px 0 0;
+			}
+			.side-quote {
+				position: relative;
+				padding: 1.5em 2em;
+				border: none;
+				background: none;
+				margin: 1.5em 0;
+				font-style: normal;
+			}
+			.side-quote::before {
+				content: '\201C';
+				position: absolute;
+				top: -0.2em;
+				left: 0;
+				font-family: Georgia, serif;
+				font-size: 5em;
+				font-weight: 700;
+				line-height: 1;
+				color: #e8436a;
+				opacity: 0.3;
+			}
+			.side-quote p:first-child {
+				font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
+				font-size: 1.4em;
+				font-weight: 700;
+				line-height: 1.3;
+				text-transform: uppercase;
+				color: #1a1a2e;
+			}
+			.side-quote p:last-child {
+				font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
+				font-size: 0.75em;
+				font-weight: 400;
+				letter-spacing: 0.2em;
+				text-align: right;
+				text-transform: uppercase;
+				color: #999;
+				margin-top: 0.5em;
+			}
+			.fancy-code {
+				position: relative;
+				padding: 2em 1.5em 1.5em;
+				border-radius: 12px;
+				margin: 1.5em 0;
+				font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
+				font-size: 0.9em;
+				line-height: 1.6;
+				overflow-x: auto;
+			}
+			.fancy-code::before {
+				content: '';
+				position: absolute;
+				top: 12px;
+				left: 16px;
+				width: 12px;
+				height: 12px;
+				border-radius: 50%;
+				background: #ff5f57;
+				box-shadow:
+					20px 0 0 #ffbd2e,
+					40px 0 0 #28c840;
+			}
+			.fancy-code-bright {
+				background: #f5f5f5;
+				border: 1px solid #e0e0e0;
+				color: #333;
+			}
+			.fancy-code-bright::after {
+				content: 'JavaScript';
+				position: absolute;
+				top: 8px;
+				right: 16px;
+				font-family: 'Source Sans Pro', sans-serif;
+				font-size: 0.75em;
+				color: #999;
+			}
+			.fancy-code-dark {
+				background: #1e1e2e;
+				color: #cdd6f4;
+			}
+			.fancy-code-dark::after {
+				content: 'JavaScript';
+				position: absolute;
+				top: 8px;
+				right: 16px;
+				font-family: 'Source Sans Pro', sans-serif;
+				font-size: 0.75em;
+				color: #585b70;
+			}
+			/* --- Text / Inline styles --- */
+			.marker {
+				background-color: #fdfd77;
+				padding: 0.05em 0.2em;
+			}
+			.marker-green {
+				background-color: #62f962;
+				padding: 0.05em 0.2em;
+			}
+			.marker-pink {
+				background-color: #fc7999;
+				padding: 0.05em 0.2em;
+				color: #fff;
+			}
+			.pen-red {
+				color: #e8436a;
+			}
+			.pen-green {
+				color: #118c4f;
+			}
+			.spoiler {
+				background-color: #1a1a2e;
+				color: #1a1a2e;
+				padding: 0.05em 0.2em;
+				border-radius: 3px;
+				transition: color 0.3s;
+				cursor: pointer;
+			}
+			.spoiler:hover {
+				color: #fff;
+			}
+			.typewriter {
+				font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
+				font-size: 0.92em;
+				background: #f0f0f0;
+				padding: 0.1em 0.4em;
+				border-radius: 4px;
+				border: 1px solid #ddd;
+			}
+			.uppercase-badge {
+				font-family: 'Oswald', 'Impact', Arial Narrow, sans-serif;
+				font-size: 0.7em;
+				font-weight: 600;
+				letter-spacing: 0.15em;
+				text-transform: uppercase;
+				background: #1a1a2e;
+				color: #fff;
+				padding: 0.2em 0.6em;
+				border-radius: 3px;
+				vertical-align: middle;
+			}
+		</style>
+	</head>
+	<body>
+		<header>
+			<nav>
+				<ul class="container">
+					<li>
+						<a href="https://xdsoft.net/jodit/">Jodit homepage</a>
+					</li>
+					<li>
+						<a href="https://xdsoft.net/jodit/play.html">Playground</a>
+					</li>
+					<li>
+						<a href="https://xdsoft.net/jodit/docs/">Documentation</a>
+					</li>
+					<li><a href="https://github.com/xdan/jodit/">Github</a></li>
+					<li>
+						<a href="https://github.com/xdan/jodit/blob/main/CHANGELOG.md">Changelog</a>
+					</li>
+					<li>
+						<a href="#examples">Examples</a>
+						<ul id="examples">
+							<!-- see app.js-->
+						</ul>
+					</li>
+					<li style="float: right">
+						<a href="https://github.com/xdan/jodit/releases/latest">Download</a>
+					</li>
+				</ul>
+			</nav>
+		</header>
+		<div id="main_container" class="container">
+			<h1>Style Plugin Demo</h1>
+			<p>
+				The <strong>Style</strong> plugin lets you apply predefined CSS
+				classes to block and inline elements. Click the
+				<strong>Styles</strong> button in the toolbar to see all
+				available styles grouped by type.
+			</p>
+			<div id="introduction">
+				<h3>JavaScript</h3>
+				<pre><code class="language-javascript">
+Jodit.make('#editor', {
+    customStyles: {
+        definitions: [
+            // Block styles
+            { name: 'Document title',   element: 'h2',         classes: ['document-title'] },
+            { name: 'Subtitle',         element: 'h3',         classes: ['document-subtitle'] },
+            { name: 'Category header',  element: 'p',          classes: ['category-header'] },
+            { name: 'Info box',         element: 'p',          classes: ['info-box'] },
+            { name: 'Side quote',       element: 'blockquote', classes: ['side-quote'] },
+            { name: 'Code (bright)',    element: 'pre',        classes: ['fancy-code', 'fancy-code-bright'] },
+            { name: 'Code (dark)',      element: 'pre',        classes: ['fancy-code', 'fancy-code-dark'] },
+            // Text styles
+            { name: 'Marker',           element: 'span', classes: ['marker'] },
+            { name: 'Marker (green)',   element: 'span', classes: ['marker-green'] },
+            { name: 'Marker (pink)',    element: 'span', classes: ['marker-pink'] },
+            { name: 'Pen (red)',        element: 'span', classes: ['pen-red'] },
+            { name: 'Pen (green)',      element: 'span', classes: ['pen-green'] },
+            { name: 'Spoiler',          element: 'span', classes: ['spoiler'] },
+            { name: 'Typewriter',       element: 'span', classes: ['typewriter'] },
+            { name: 'Badge',            element: 'span', classes: ['uppercase-badge'] },
+        ]
+    }
+});
+				</code></pre>
+			</div>
+			<div class="result">
+				<textarea id="area_editor"></textarea>
+			</div>
+		</div>
+		<footer>
+			<nav>
+				<ul class="container">
+					<li>
+						<a href="https://xdsoft.net/jodit/">Jodit homepage</a>
+					</li>
+					<li>
+						<a href="https://xdsoft.net/jodit/play.html">Playground</a>
+					</li>
+					<li>
+						<a href="https://xdsoft.net/jodit/docs/">Documentation</a>
+					</li>
+					<li><a href="https://github.com/xdan/jodit/">Github</a></li>
+					<li>
+						<a href="https://github.com/xdan/jodit/blob/main/CHANGELOG.md">Changelog</a>
+					</li>
+					<li style="float: right">
+						<a href="https://github.com/xdan/jodit/releases/latest">Download</a>
+					</li>
+				</ul>
+			</nav>
+		</footer>
+	</body>
+	<link rel="stylesheet" href="./es2021/jodit.fat.min.css" />
+	<link rel="stylesheet" href="assets/app.css" />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Source+Sans+Pro:wght@300;400;700&display=swap"
+		rel="stylesheet"
+	/>
+	<script src="./es2021/jodit.fat.min.js"></script>
+	<script src="assets/prism.js"></script>
+	<script src="assets/app.js"></script>
+	<script>
+		const editor = Jodit.make('#area_editor', {
+			height: 600,
+			buttons: [
+				'source',
+				'|',
+				'bold',
+				'italic',
+				'underline',
+				'strikethrough',
+				'|',
+				'style',
+				'|',
+				'ul',
+				'ol',
+				'|',
+				'font',
+				'fontsize',
+				'brush',
+				'paragraph',
+				'|',
+				'image',
+				'table',
+				'link',
+				'|',
+				'align',
+				'|',
+				'undo',
+				'redo',
+				'|',
+				'hr',
+				'eraser',
+				'fullsize'
+			],
+			customStyles: {
+				definitions: [
+					// Block styles
+					{
+						name: 'Document title',
+						element: 'h2',
+						classes: ['document-title']
+					},
+					{
+						name: 'Subtitle',
+						element: 'h3',
+						classes: ['document-subtitle']
+					},
+					{
+						name: 'Category header',
+						element: 'p',
+						classes: ['category-header']
+					},
+					{
+						name: 'Info box',
+						element: 'p',
+						classes: ['info-box']
+					},
+					{
+						name: 'Side quote',
+						element: 'blockquote',
+						classes: ['side-quote']
+					},
+					{
+						name: 'Code (bright)',
+						element: 'pre',
+						classes: ['fancy-code', 'fancy-code-bright']
+					},
+					{
+						name: 'Code (dark)',
+						element: 'pre',
+						classes: ['fancy-code', 'fancy-code-dark']
+					},
+					// Text styles
+					{
+						name: 'Marker',
+						element: 'span',
+						classes: ['marker']
+					},
+					{
+						name: 'Marker (green)',
+						element: 'span',
+						classes: ['marker-green']
+					},
+					{
+						name: 'Marker (pink)',
+						element: 'span',
+						classes: ['marker-pink']
+					},
+					{
+						name: 'Pen (red)',
+						element: 'span',
+						classes: ['pen-red']
+					},
+					{
+						name: 'Pen (green)',
+						element: 'span',
+						classes: ['pen-green']
+					},
+					{
+						name: 'Spoiler',
+						element: 'span',
+						classes: ['spoiler']
+					},
+					{
+						name: 'Typewriter',
+						element: 'span',
+						classes: ['typewriter']
+					},
+					{
+						name: 'Badge',
+						element: 'span',
+						classes: ['uppercase-badge']
+					}
+				]
+			}
+		});
+		editor.value = `
+<p class="category-header">Deep Dive</p>
+<h2 class="document-title">The lost art of slow reading</h2>
+<h3 class="document-subtitle">Why the way we consume text has fundamentally changed — and what we can do about it</h3>
+<hr>
+<blockquote class="side-quote">
+	<p>We are drowning in information but starving for knowledge.</p>
+	<p>Rutherford D. Rogers</p>
+</blockquote>
+<p>There was a time when reading a book meant <span class="marker">sitting with it for hours</span>, letting sentences settle into the mind like tea steeping in hot water. Today, most of us read the way we drive on a highway — scanning signs, changing lanes, barely noticing the scenery.</p>
+<p>The average person now spends roughly <span class="pen-red">eight hours a day</span> looking at screens. That's more time than most of us sleep. And the vast majority of that time is spent skimming: headlines, notifications, feeds, threads. We scroll past ten thousand words before lunch and remember <span class="spoiler">almost none of them</span>.</p>
+<p class="info-box">A 2023 study at the University of Valencia found that people who read long-form text on screens comprehend 29% less than those who read the same text on paper. The effect was strongest for <strong>informational</strong> texts and nearly disappeared for narrative fiction.</p>
+<hr>
+<h4>The F-shaped pattern</h4>
+<p>Eye-tracking research by the Nielsen Norman Group revealed something called the <span class="typewriter">F-shaped reading pattern</span>. Users read the first few lines almost fully, then scan progressively less and less as they move down the page, creating a shape that looks like the letter F.</p>
+<p>This isn't laziness — it's <span class="pen-green">adaptation</span>. When you encounter hundreds of articles per day, your brain develops shortcuts. The problem is that these shortcuts are <span class="marker-pink">terrible</span> for deep comprehension.</p>
+<pre class="fancy-code fancy-code-bright"><code>// How your brain reads the web:
+read(firstLine);        // 100% attention
+read(secondLine);       // 80% attention
+scan(thirdLine);        // 40% attention
+skip(everythingElse);   // 5% attention
+scrollToComments();     // 200% attention</code></pre>
+<h4>Three techniques for deeper reading</h4>
+<p><span class="uppercase-badge">First</span> Try the <strong>Pomodoro method</strong> for reading: 25 minutes of focused reading, then a 5-minute break. No phone, no tabs, no multitasking. Just you and the text.</p>
+<p><span class="uppercase-badge">Second</span> Annotate as you go. <span class="marker-green">Highlighting passages</span> forces your brain to evaluate what's important, creating a secondary layer of engagement with the material.</p>
+<p><span class="uppercase-badge">Third</span> After finishing a chapter or article, close your eyes and try to summarize what you just read in three sentences. If you can't, go back. This is called <span class="typewriter">retrieval practice</span> and it's one of the most effective learning strategies known to cognitive science.</p>
+<pre class="fancy-code fancy-code-dark"><code>// A simple reading tracker
+const session = {
+    started: new Date(),
+    pages: 0,
+    notes: [],
+    addNote(text) {
+        this.notes.push({
+            text,
+            time: new Date(),
+            page: this.pages
+        });
+    },
+    summary() {
+        const mins = (Date.now() - this.started) / 60000;
+        return \`Read \${this.pages} pages in \${mins.toFixed(0)} min\`;
+    }
+};</code></pre>
+<h4>The paradox of choice</h4>
+<p>We have access to more written material than any generation in history. The Library of Alexandria held roughly <span class="pen-red">400,000 scrolls</span>. Today, the internet adds an estimated 2.5 million new blog posts <em>every single day</em>.</p>
+<p>Yet for all this abundance, most people read <span class="marker">fewer books per year</span> than their grandparents did. The sheer volume of available content creates a kind of paralysis — there's always something <span class="spoiler">newer, shorter, more urgent</span> competing for attention.</p>
+<blockquote class="side-quote">
+	<p>A reader lives a thousand lives before he dies. The man who never reads lives only one.</p>
+	<p>George R.R. Martin</p>
+</blockquote>
+<p>The solution isn't to read <em>more</em> — it's to read <span class="pen-green">better</span>. Choose fewer things, read them more carefully, and give yourself permission to <span class="marker-pink">sit with an idea</span> before rushing to the next one.</p>
+`;
+	</script>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "jodit-pro",
-	"version": "4.9.4",
+	"version": "4.9.15",
 	"author": "Chupurnov Valerii <chupurnov@gmail.com>",
 	"homepage": "https://xdsoft.net/jodit/pro/",
 	"bugs": {

package/types/config.d.ts CHANGED Viewed

@@ -19,6 +19,7 @@ import type { ButtonGroup } from "jodit/esm/types/index";
 import type { ILayoutKeys } from "./plugins/keyboard/interface";
 import type { CanPromise } from "jodit/esm/types/index";
 import type { IUIOption } from "jodit/esm/types/index";
+import type { IStyleDefinition } from "./plugins/style/interface";
 import type { ITranslateProviderFactory } from "./plugins/translate/interface";
 import type { IGoogleTranslateProviderOptions } from "./plugins/translate/interface";
 import type { IControlType } from "jodit/esm/types/index";
@@ -192,6 +193,11 @@ interface Config {
         tagList: string[];
     };
 }
+interface Config {
+    customStyles: {
+        definitions: IStyleDefinition[];
+    };
+}
 interface Config {
     todoList: {
         className: string;

package/types/plugins/style/config.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { IStyleDefinition } from "./interface";
+declare module 'jodit/esm/config' {
+    interface Config {
+        customStyles: {
+            definitions: IStyleDefinition[];
+        };
+    }
+}

package/types/plugins/style/helpers/apply-style.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { IJodit } from "jodit/esm/types/index";
+import type { IStyleDefinition } from "../interface";
+export declare function applyStyle(editor: IJodit, def: IStyleDefinition, definitions: IStyleDefinition[]): void;

package/types/plugins/style/helpers/classify-definitions.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { IStyleDefinition, IStyleGroup } from "../interface";
+export declare function classifyDefinitions(definitions: IStyleDefinition[]): IStyleGroup[];

package/types/plugins/style/helpers/detect-active-style.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { IJodit } from "jodit/esm/types/index";
+import type { IStyleDefinition } from "../interface";
+export declare function detectActiveStyle(editor: IJodit, definitions: IStyleDefinition[]): IStyleDefinition | null;

package/types/plugins/style/interface.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { HTMLTagNames } from "jodit/esm/types/index";
+export interface IStyleDefinition {
+    name: string;
+    element: HTMLTagNames;
+    classes: string[];
+}
+export interface IStyleGroup {
+    title: string;
+    definitions: IStyleDefinition[];
+}

package/types/plugins/style/style.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { IJodit } from "jodit/esm/types/index";
+import "./config";
+import { Plugin } from "jodit/esm/core/plugin/index";
+export declare class style extends Plugin {
+    /** @override */
+    static requires: string[];
+    /** @override */
+    buttons: Plugin['buttons'];
+    /** @override */
+    protected afterInit(_jodit: IJodit): void;
+    /** @override */
+    protected beforeDestruct(_jodit: IJodit): void;
+}

package/types/plugins/style/ui/style-popup.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/*!
+ * Jodit Editor PRO (https://xdsoft.net/jodit/)
+ * See LICENSE.md in the project root for license information.
+ * Copyright (c) 2013-2026 Valerii Chupurnov. All rights reserved. https://xdsoft.net/jodit/pro/
+ */
+import type { IJodit } from "jodit/esm/types/index";
+import type { IStyleDefinition } from "../interface";
+export declare function buildStylePopup(editor: IJodit, definitions: IStyleDefinition[], close: () => void): HTMLElement;