Merge pull request #4 from ttg-wolfhoel/v12

Plugin adaptions for TYPO3 12.4.x

Configuration/JavaScriptModules.php

@@ -0,0 +1,15 @@
+<?php
+
+return [
+    // required import configurations of other extensions,
+    // in case a module imports from another package
+    'dependencies' => ['backend'],
+    'tags' => [
+        'backend.form',
+    ],
+    'imports' => [
+        // recursive definiton, all *.js files in this folder are import-mapped
+        // trailing slash is required per importmap-specification
+        '@studiomitte/rte-ckeditor-abbr/' => 'EXT:rte_ckeditor_abbr/Resources/Public/JavaScript/',
+    ],
+];

Configuration/RTE/Plugin.yaml

@@ -1,4 +1,9 @@
 editor:
-  externalPlugins:
-    abbr:
-      resource: "EXT:rte_ckeditor_abbr/Resources/Public/JavaScript/Plugins/abbr/plugin.js"
+  config:
+    importModules:
+      - '@studiomitte/rte-ckeditor-abbr/abbreviation.js'
+    contentsCss:
+      - "EXT:rte_ckeditor_abbr/Resources/Public/Css/Abbr.css"
+    toolbar:
+      item:
+        - abbreviation

Readme.md

@@ -1,10 +1,10 @@
 # TYPO3 Extension `rte_ckeditor_abbr`
 
-This extension ships a simple plugin for the ckeditor to allow editors setting abbreviations. The plugin itself has been taken from https://ckeditor.com/docs/ckeditor4/latest/examples/abbr.html without any changes
+This extension ships a simple plugin for the ckeditor to allow editors setting abbreviations. The plugin itself has been taken from https://github.com/ckeditor/ckeditor5-tutorials-examples/tree/main/abbreviation-plugin/part-1 without only little changes
 
 ## Installation
 
-Use `composer require studiomitte/rte-ckeditor-abbr` or download the extension from TER.
+Use `ddev composer req studiomitte/rte-ckeditor-abbr:12.4` or download the extension from TER.
 
 ## Usage
 
@@ -13,17 +13,22 @@ All it takes to enable the plugin are the following changes in your `RTE.yaml`:
 1. Import the configuration from the extension:
 
 ```yaml
-imports:
-    - { resource: "EXT:rte_ckeditor_abbr/Configuration/RTE/Plugin.yaml" }
+editor:
+  config:
+    importModules:
+      - '@studiomitte/rte-ckeditor-abbr/abbreviation.js'
+    contentCss:
+      - "EXT:rte_ckeditor_abbr/Resources/Public/Css/Abbr.css"
 ```
 
 2. Enable the plugin:
 
 ```yaml
 editor:
   config:
-    extraPlugins:
-      - abbr
+    toolbar:
+      items:
+        - abbreviation
 ```
 
 

Resources/Public/Css/Abbr.css

@@ -0,0 +1,24 @@
+.ck.ck-abbr-form {
+    padding: var(--ck-spacing-large);
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    grid-column-gap: 0;
+    grid-row-gap: var(--ck-spacing-standard);
+}
+
+.ck.ck-abbr-form .ck.ck-labeled-field-view:nth-of-type(1) {
+    grid-area: 1 / 1 / 2 / 3;
+}
+
+.ck.ck-abbr-form .ck.ck-labeled-field-view:nth-of-type(2) {
+    grid-area: 2 / 1 / 3 / 3;
+}
+
+.ck.ck-abbr-form .ck-button:nth-of-type(1) {
+    grid-area: 3 / 1 / 4 / 2;
+}
+
+.ck.ck-abbr-form .ck-button:nth-of-type(2) {
+    grid-area: 3 / 2 / 4 / 3;
+}

Resources/Public/JavaScript/abbreviation.js

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import { Plugin } from '@ckeditor/ckeditor5-core';
+import AbbreviationEditing from './abbreviationediting.js';
+import AbbreviationUI from './abbreviationui.js';
+
+export default class Abbreviation extends Plugin {
+    static get requires() {
+        return [AbbreviationEditing, AbbreviationUI];
+    }
+}