trusty-cms 7.0.44 → 7.0.45

data/app/assets/stylesheets/admin/assets.scss

@@ -1,3 +1,19 @@
+.ck-content .asset-image-tag {
+  background-color: #dcdcdc;
+  display: inline-flex;
+  align-items: center;
+  padding: 1em;
+  border: 1px dashed #c3c3c3;
+  opacity: 0.85;
+  user-select: none;
+}
+
+.ck-content  .asset-image-tag__label {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+
 .search {
   display: grid;
   grid-template-columns: 1fr 1fr;

data/app/javascript/plugins/asset_tags/asset_tag_builder.js

@@ -1,11 +1,16 @@
-import { Plugin } from 'ckeditor5';
+import { Plugin, Widget, toWidget } from 'ckeditor5';
 
 export default class AssetTagBuilder extends Plugin {
+      static get requires() {
+        return [ Widget ];
+      }
+
     init() {
         console.log( 'AssetTagBuilder plugin initialized' );
         // Plugin logic goes here
         this._defineSchema();
         this._defineConverters();
+        this._defineDataNormalization();
     }
 
     _defineSchema() {
@@ -48,6 +53,7 @@ export default class AssetTagBuilder extends Plugin {
             }
         } );
 
+    
         // Data downcast: ensure no inner whitespace like   gets serialized.
         dataDowncast.elementToElement( {
             model: 'assetImage',
@@ -65,7 +71,7 @@ export default class AssetTagBuilder extends Plugin {
                 if ( height ) attrs.height = height;
                 if ( width ) attrs.width = width;
 
-                return writer.createEmptyElement( 'r:asset:image', attrs );
+                return writer.createContainerElement( 'r:asset:image', attrs );
             }
         } );
 
@@ -86,8 +92,78 @@ export default class AssetTagBuilder extends Plugin {
                 if ( height ) attrs.height = height;
                 if ( width ) attrs.width = width;
 
-                return writer.createContainerElement( 'r:asset:image', attrs );
-            }
-        } );
+                const container = writer.createContainerElement('span', {
+                    class: 'asset-image-tag',
+                    'data-asset-id': id,
+                    'data-asset-size': size
+                });
+
+                const label = writer.createUIElement(
+                    'span',
+                    { class: 'asset-image-tag__label' },
+                    function (domDocument) {
+                        const domEl = this.toDomElement(domDocument);
+                        const parts = [
+                        'Asset image',
+                        id ? `#${id}` : '',
+                        size ? `(${size})` : '',
+                        alt ? `— ${alt}` : '',
+                        height ? `height: ${height}` : '',
+                        width ? `width: ${width}` : ''
+                        ].filter(Boolean);
+
+                        domEl.textContent = parts.join(' ');
+                        return domEl;
+                    }
+                );
+
+                writer.insert(writer.createPositionAt(container, 0), label);
+                return toWidget(container, writer, { label: `Asset image ${id ? `#${id}` : ''}` });
+            }            
+        } );       
+
+    }
+
+      _defineDataNormalization() {
+        const editor = this.editor;
+        const processor = editor.data.processor;
+
+        const originalToView = processor.toView.bind( processor );
+        const originalToData = processor.toData.bind( processor );
+
+        // 1) Incoming: <r:asset:image ... /> -> <r:asset:image ...></r:asset:image>
+       processor.toView = (data) => {
+            let normalized = data;
+
+            // 1) Self-closing -> paired
+            normalized = normalized.replace(
+                /<r:asset:image\b([^>]*?)\/>/gi,
+                '<r:asset:image$1></r:asset:image>'
+            );
+
+            // 2) Bare open tag (rare, but happens) -> paired
+            normalized = normalized.replace(
+                /<r:asset:image\b([^>]*?)>(?!\s*<\/r:asset:image>)/gi,
+                '<r:asset:image$1></r:asset:image>'
+            );
+
+            return originalToView(normalized);
+            };
+
+
+        processor.toData = (viewFragment) => {
+            const html = originalToData(viewFragment);
+
+            return html.replace(
+                /<r:asset:image\b([^>]*?)>([\s\S]*?)<\/r:asset:image>/gi,
+                (match, attrs, inner) => {
+                const cleanedInner = inner.replace(
+                    /^(?:\s|&nbsp;|&#160;)+|(?:\s|&nbsp;|&#160;)+$/g,
+                    ''
+                );
+                return `<r:asset:image${attrs} />${cleanedInner}`;
+                }
+            );
+        };
     }
 }

data/app/javascript/trusty_cms/ckeditor5.js

@@ -145,7 +145,6 @@ const editorConfig = {
             'code',
             'removeFormat',
             '|',
-            'specialCharacters',
             'horizontalLine',
             'link',
             'bookmark',

data/lib/trusty_cms/version.rb

@@ -1,3 +1,3 @@
 module TrustyCms
-  VERSION = '7.0.44'.freeze
+  VERSION = '7.0.45'.freeze
 end

data/package.json

@@ -33,7 +33,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "esbuild app/javascript/trusty_cms/ckeditor5.js --bundle --sourcemap --outdir=app/assets/builds/trusty_cms --public-path=/assets",
+    "build": "esbuild app/javascript/trusty_cms/ckeditor5.js --bundle --sourcemap --outdir=app/assets/builds/trusty_cms --public-path=/assets --loader:.svg=text",
     "build:watch": "npm run build -- --watch"
   },
   "keywords": [],

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: trusty-cms
 version: !ruby/object:Gem::Version
-  version: 7.0.44
+  version: 7.0.45
 platform: ruby
 authors:
 - TrustyCms CMS dev team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-08 00:00:00.000000000 Z
+date: 2026-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage-validator