fix: Add CSS rule to make image inline-block (#101)

* fix changelogs

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.0.0-beta.13 (2025-01-06)
+
+### Bug Fixes
+
+* Add CSS rule to make image inline-block ([d137116](https://github.com/Remahy/forsenwiki/commit/d1371162d1a3cb1344c4d981b791e9c9bb44622c))
 ## [1.0.0-beta.12](https://github.com/Remahy/forsenwiki/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2025-01-06)
 
 ### Features
@@ -12,6 +17,7 @@
 * Add simple UI style ([7f82bcd](https://github.com/Remahy/forsenwiki/commit/7f82bcdfdf771ed145f1e14364ba6dd6e1d93b61))
 * Content management ([#30](https://github.com/Remahy/forsenwiki/issues/30)) ([5c8b573](https://github.com/Remahy/forsenwiki/commit/5c8b573736718aa3003cd30c28bdc3d62a8f0dd3))
 * FallbackNode & More QoL ([#38](https://github.com/Remahy/forsenwiki/issues/38)) ([3748c0d](https://github.com/Remahy/forsenwiki/commit/3748c0d8753c32c9f73429cc84e0f9d27459c926))
+* Float Block ([#93](https://github.com/Remahy/forsenwiki/issues/93)) ([4b2f4be](https://github.com/Remahy/forsenwiki/commit/4b2f4be1d985c6817c06c902b49ead246a39648f))
 * Frontpage SSE ([#10](https://github.com/Remahy/forsenwiki/issues/10)) ([7154990](https://github.com/Remahy/forsenwiki/commit/7154990bb7bbe2b78a3776926573dc9a0d26088b))
 * History diff viewer ([#44](https://github.com/Remahy/forsenwiki/issues/44)) ([7fe389c](https://github.com/Remahy/forsenwiki/commit/7fe389c0772499f9a1e74659af3b47652f2c0a7d))
 * HTML cache bust & QoL improvements ([#99](https://github.com/Remahy/forsenwiki/issues/99)) ([5dec771](https://github.com/Remahy/forsenwiki/commit/5dec7716d8e34253527bc7142f0aacff90f4ec5a))

src/lib/components/editor/config/article.js

@@ -24,7 +24,7 @@ import { $createATableCellNode } from '../plugins/Table/ATableCellNode';
 
 export const articleTheme = {
 	paragraph: 'm-0',
-	image: 'm-0',
+	image: 'm-0 image',
 	heading: {
 		h1: 'break-words',
 		h2: 'break-words',
@@ -37,7 +37,7 @@ export const articleTheme = {
 export const editableTheme = {
 	...articleTheme,
 	root: 'editor-shell',
-	image: 'm-0 editor-image',
+	image: 'm-0 image editor-image',
 	tableCell: 'tableCell',
 	tableCellResizer: 'tableCellResizer',
 	tableCellSelected: 'tableCellSelected',

src/lib/components/editor/plugins/FloatBlock/FloatBlockNode.js

@@ -145,6 +145,8 @@ export class FloatBlockNode extends ElementNode {
 		return div;
 	}
 
+	// We don't need to define exportDOM method ourselves here, since Lexical calls createDOM in the super's exportDOM.
+
 	/**
 	 * @param {FloatBlockNode | null} _
 	 * @param {HTMLDivElement} dom

src/lib/components/editor/plugins/Image/Image.css

@@ -1,10 +1,13 @@
+.image {
+	display: inline-block;
+	white-space: nowrap; /* without this, image editor is having extra height (// TODO: see if still required after fully porting lexical) */
+}
+
 .editor-shell span.editor-image {
 	cursor: default;
-	display: inline-block;
 	position: relative;
 	-webkit-user-select: none;
 	user-select: none;
-	white-space: nowrap; /* without this, image editor is having extra height (// TODO: see if still required after fully porting lexical) */
 }
 
 .editor-shell .editor-image * {

src/lib/components/editor/plugins/Image/Image.ts

@@ -154,33 +154,33 @@ export class ImageNode extends DecoratorNode<DecoratorImageType> {
 	// View
 
 	exportDOM(editor: LexicalEditor): DOMExportOutput {
-		const theme = editor._config.theme;
 		const element = document.createElement('img');
 
+		const theme = editor._config.theme;
+		const className = theme?.image;
+		if (className) {
+			element.setAttribute('class', className);
+		}
+
 		const { width, height } = this.getWidthAndHeight();
 
 		element.setAttribute('src', this.getSrc());
 		element.setAttribute('alt', this.getAltText());
 		element.setAttribute('width', width.toString());
 		element.setAttribute('height', height.toString());
 
-		// element.style.width = this.__width.toString()+'px';
-		// element.style.height = this.__height.toString()+'px';
-
-		if (theme.image) {
-			element.setAttribute('class', theme.image);
-		}
-
 		return { element };
 	}
 
 	createDOM(config: EditorConfig): HTMLElement {
 		const span = document.createElement('span');
+
 		const theme = config.theme;
-		const className = theme.image;
+		const className = theme?.image;
 		if (className !== undefined) {
-			span.className = className;
+			span.setAttribute('class', className);
 		}
+
 		return span;
 	}
 

src/routes/changelogs/changelogs.html

@@ -1,3 +1,8 @@
+<h2 id="100-beta13-2025-01-06">1.0.0-beta.13 (2025-01-06)</h2>
+<h3 id="bug-fixes">Bug Fixes</h3>
+<ul>
+<li>Add CSS rule to make image inline-block (<a href="https://github.com/Remahy/forsenwiki/commit/d1371162d1a3cb1344c4d981b791e9c9bb44622c">d137116</a>)</li>
+</ul>
 <h2 id="100-beta12-2025-01-06"><a href="https://github.com/Remahy/forsenwiki/compare/v1.0.0-beta.11...v1.0.0-beta.12">1.0.0-beta.12</a> (2025-01-06)</h2>
 <h3 id="features">Features</h3>
 <ul>
@@ -32,7 +37,7 @@ <h3 id="features-1">Features</h3>
 <li>Tables (<a href="https://github.com/Remahy/forsenwiki/issues/83">#83</a>) (<a href="https://github.com/Remahy/forsenwiki/commit/16bd5e8b3b960f329acc136b01dc15e759626da0">16bd5e8</a>)</li>
 <li>YouTube &amp; Twitch embeds (<a href="https://github.com/Remahy/forsenwiki/issues/35">#35</a>) (<a href="https://github.com/Remahy/forsenwiki/commit/9e7db7b4366bd23ff6eeb2f6df7148d6e987df6e">9e7db7b</a>)</li>
 </ul>
-<h3 id="bug-fixes">Bug Fixes</h3>
+<h3 id="bug-fixes-1">Bug Fixes</h3>
 <ul>
 <li>Add ?random param to the <code>/random</code> endpoint results (<a href="https://github.com/Remahy/forsenwiki/commit/66c2d9d7e92eddd8a91d8a48c4fb94605defd060">66c2d9d</a>)</li>
 <li>Add checks to prevent overeager deletion of ImageComponent (<a href="https://github.com/Remahy/forsenwiki/issues/80">#80</a>) (<a href="https://github.com/Remahy/forsenwiki/commit/c31fdc34b46f88d2972ac881dfd8e6ca9663c237">c31fdc3</a>)</li>