Add support for TYPO3 12.4

Classes/Hooks/ShyGuyHook.php → Classes/EventListener/ShyguyButtonBar.php

@@ -1,55 +1,42 @@
 <?php
 
-namespace WapplerSystems\Shyguy\Hooks;
+namespace WapplerSystems\Shyguy\EventListener;
 
 use TYPO3\CMS\Backend\Template\Components\ButtonBar;
 use TYPO3\CMS\Backend\Template\Components\Buttons\InputButton;
+use TYPO3\CMS\Backend\Template\Components\ModifyButtonBarEvent;
 use TYPO3\CMS\Core\Imaging\Icon;
 use TYPO3\CMS\Core\Imaging\IconFactory;
-use TYPO3\CMS\Core\Localization\LanguageService;
+use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 
-/**
- * Adds visualisation and control over soft hyphens in content elements.
- *
- * Class ShyGuyHook
- * @package WapplerSystems\Shyguy\Hooks
- */
-class ShyGuyHook
-{
-    /**
-     * @param array $params
-     * @param $buttonBar
-     * @return array
-     */
-    public function addSoftHyphenInitial($params, &$buttonBar): array
+class ShyguyButtonBar {
+    public function __invoke(ModifyButtonBarEvent $event): void
     {
-        $buttons = $params['buttons'];
+        /** @var PageRenderer $pageRenderer */
+        $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
+        $pageRenderer->loadJavaScriptModule('@wapplersystems/shyguy/Shyguy.js');
+
+        $buttons = $event->getButtons();
         $saveButton = $buttons[ButtonBar::BUTTON_POSITION_LEFT][2][0] ?? null;
 
         if ($saveButton instanceof InputButton && $saveButton->getName() === '_savedok') {
             $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
 
-            $insertSoftHyphen = $buttonBar->makeLinkButton()
+            $insertSoftHyphen = $event->getButtonBar()->makeLinkButton()
                 ->setHref('#insertSoftHyphen')
-                ->setTitle($this->getLanguageService()->sL('LLL:EXT:shyguy/Resources/Private/Language/locallang.xlf:set_hyphen'))
+                ->setTitle(
+                    $GLOBALS['LANG']->sL(
+                        'LLL:EXT:shyguy/Resources/Private/Language/locallang.xlf:set_hyphen'
+                    )
+                )
                 ->setIcon($iconFactory->getIcon('insert-soft-hyphen', Icon::SIZE_SMALL))
                 ->setShowLabelText(true);
 
             $pos = max(array_keys($buttons[ButtonBar::BUTTON_POSITION_LEFT])) + 1;
             $buttons[ButtonBar::BUTTON_POSITION_LEFT][$pos][] = $insertSoftHyphen;
-
         }
 
-        return $buttons;
-    }
-
-    /**
-     * Returns the language service
-     * @return LanguageService
-     */
-    protected function getLanguageService(): LanguageService
-    {
-        return $GLOBALS['LANG'];
+        $event->setButtons($buttons);
     }
 }

Classes/Hooks/TCEmainHook.php

@@ -2,24 +2,13 @@
 
 namespace WapplerSystems\Shyguy\Hooks;
 
-use TYPO3\CMS\Core\DataHandling\DataHandler;
-
 class TCEmainHook
 {
-
-    /**
-     *
-     * @param array $fieldArray
-     * @param string $table
-     * @param int $id
-     * @param $parentObject DataHandler
-     */
-    public function processDatamap_preProcessFieldArray(&$fieldArray, $table, $id, $parentObject)
-    {
-        array_walk_recursive($fieldArray, [$this, 'makeRealSoftHyphens']);
+    public function processDatamap_preProcessFieldArray(array &$fieldArray): void {
+        array_walk_recursive($fieldArray, $this->makeRealSoftHyphens(...));
     }
 
-    public function makeRealSoftHyphens(&$value, $key)
+    public function makeRealSoftHyphens(&$value): void
     {
         if (is_string($value)) {
             $value = str_replace("↵", "­", $value);

Configuration/Icons.php

@@ -0,0 +1,14 @@
+<?php
+
+use TYPO3\CMS\Core\Imaging\IconProvider\BitmapIconProvider;
+
+$pngIcons = [
+    'insert-soft-hyphen' => 'shy.png',
+];
+
+foreach ($pngIcons as $identifier => $path) {
+    $icons[$identifier] = [
+        'provider' => BitmapIconProvider::class,
+        'source' => 'EXT:shyguy/Resources/Public/Icons/' . $path
+    ];
+}

Configuration/JavaScriptModules.php

@@ -0,0 +1,12 @@
+<?php
+
+return [
+    // required import configurations of other extensions,
+    // in case a module imports from another package
+    'dependencies' => ['backend', 'rte_ckeditor'],
+    'imports' => [
+        // recursive definition, all *.js files in this folder are import-mapped
+        // trailing slash is required per importmap-specification
+        '@wapplersystems/shyguy/' => 'EXT:shyguy/Resources/Public/Javascript/',
+    ],
+];

Configuration/Services.yaml

@@ -0,0 +1,13 @@
+services:
+  _defaults:
+    autowire: true
+    autoconfigure: true
+    public: false
+
+  WapplerSystems\Shyguy\:
+    resource: '../Classes/*'
+
+  WapplerSystems\Shyguy\EventListener\ShyguyButtonBar:
+    tags:
+      - name: event.listener
+        identifier: 'shyguy/button-bar'

Resources/Public/Javascript/Shyguy.js

@@ -1,89 +1,72 @@
-require(["jquery","ckeditor"], function($) {
-    $(document).ready(function() {
-
-        // Insert ↵ glyph to active element by clicking
-        if($('a[href="#insertSoftHyphen"]').length){
-            $('a[href="#insertSoftHyphen"]').on('mousedown', function(e){
-                e.preventDefault();
-
-                let activeElement = document.activeElement;
-                let $activeElement = $(activeElement);
-                let activeCKEDITOR;
-
-                // Get the active CKEditor
-                for (let ckInstance in CKEDITOR.instances){
-                    if($activeElement.closest('.form-wizards-element #' + $(CKEDITOR.instances[ckInstance].container).attr('id')).length){
-                        activeCKEDITOR = CKEDITOR.instances[ckInstance].dataProcessor.editor;
-                    }
-                }
-
-                // CKEditor source mode works native, so get the other(s) or use natvie behavior instead
-                if(activeCKEDITOR && activeCKEDITOR.mode !== "source" && activeCKEDITOR.focusManager.hasFocus === true){
-                    activeCKEDITOR.insertText('↵');
-                }else{
-                    let activeElementRange = getCaretPosition(activeElement);
-
-                    $activeElement.val(replaceRange($activeElement.val(), activeElementRange['start'], activeElementRange['end'], '↵'));
-                    $activeElement.change();
-                    $activeElement.keyup();
-                }
-            });
-        }
-
-        replaceDomGlyphes();
-
-        CKEDITOR.on( 'instanceReady', function( evt ) {
-
-            evt.editor.setData(evt.editor.getData().replace(/(\­|\­)/gi, "↵"));
-
-        });
+class InsertSoftHyphenHandler {
+  constructor() {
+    this.btnInsertShy = document.querySelector("a[href=\"#insertSoftHyphen\"]");
+
+    this.init();
+  }
+
+  /**
+   * @return {InsertSoftHyphenHandler}
+   */
+  init() {
+    if (this.btnInsertShy) {
+      this.btnInsertShy.addEventListener("mousedown", this.handleInsertShyClick.bind(this));
+    }
 
-    });
+    this.replaceDomGlyphes();
 
-    // Replace Existing ↵ with ­ glyph in plain text, input fields and text areas
-    function replaceDomGlyphes(){
+    return this;
+  }
 
-        $('body :not(script,textarea), body textarea[id^="formengine-textarea-"]').contents().filter(function() {
-            return this.nodeType === 3;
-        }).replaceWith(function() {
-            return this.nodeValue.replace(/(\&shy;|\­)/gi, "↵").replace(/[\u00A0-\u9999<>\&]/g, function (i) {
-                return '&#' + i.charCodeAt(0) + ';';
-            });
-        });
+  /**
+   * Handle insert soft-hyphen button click
+   * https://ckeditor.com/docs/ckeditor5/latest/examples/how-tos.html#how-to-get-the-editor-instance-object-from-the-dom-element
+   */
+  handleInsertShyClick(event) {
+    event.preventDefault();
 
-        $('input, .form-wizards-element textarea[id^="formengine-textarea-"]').each(function(){
-            $(this).val($(this).val().replace(/(\&shy;|\­)/gi, "↵"));
-        });
-    }
+    let activeElement = document.activeElement;
+    const domEditableElement = document.querySelector(".ck-editor__editable_inline");
+    const editorInstance = domEditableElement.ckeditorInstance;
 
-});
+    if (editorInstance.editing.view.document.isFocused === true) {
+      editorInstance.execute("insertText", { text: "­" });
+      editorInstance.editing.view.focus();
+    } else if (activeElement.tagName.toLowerCase() === "input" || activeElement.tagName.toLowerCase() === "textarea") {
+      let activeElementRange = this.getCaretPosition(activeElement);
 
-function getCaretPosition(ctrl) {
-    // IE < 9 Support
-    if (document.selection) {
-        ctrl.focus();
-        var range = document.selection.createRange();
-        var rangelen = range.text.length;
-        range.moveStart('character', -ctrl.value.length);
-        var start = range.text.length - rangelen;
-        return {
-            'start': start,
-            'end': start + rangelen
-        };
-    } // IE >=9 and other browsers
-    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
-        return {
-            'start': ctrl.selectionStart,
-            'end': ctrl.selectionEnd
-        };
-    } else {
-        return {
-            'start': 0,
-            'end': 0
-        };
+      activeElement.value = this.replaceRange(activeElement.value, activeElementRange["start"], activeElementRange["end"], "↵");
+      activeElement.dispatchEvent(new Event("change", { "bubbles": true }));
+      activeElement.dispatchEvent(new Event("keyup", { "bubbles": true }));
     }
+  }
+
+  /**
+   * Replace Existing ↵ with &shy; glyph in input fields and text areas
+   */
+  replaceDomGlyphes() {
+    const elements = document.querySelectorAll("input, .form-wizards-element textarea[id^=\"formengine-textarea-\"]");
+    elements.forEach(function(element) {
+      element.value = element.value.replace(/(\&shy;|\­)/gi, "↵");
+    });
+  }
+
+  /**
+   * Get caret position
+   */
+  getCaretPosition(ctrl) {
+    return {
+      "start": ctrl.selectionStart ?? 0,
+      "end": ctrl.selectionEnd ?? 0
+    };
+  }
+
+  /**
+   * @return {InsertSoftHyphenHandler}
+   */
+  replaceRange(s, start, end, substitute) {
+    return s.substring(0, start) + substitute + s.substring(end);
+  }
 }
 
-function replaceRange(s, start, end, substitute) {
-    return s.substring(0, start) + substitute + s.substring(end);
-}
+export default new InsertSoftHyphenHandler();

composer.json

@@ -21,7 +21,7 @@
 		"source": "https://github.com/WapplerSystems/Shyguy"
 	},
 	"require": {
-		"typo3/cms-core": " ^9.5 || ^10.0 || 10.*@dev || ^11.0 || 11.*@dev"
+		"typo3/cms-core": " ^12.4"
 	},
 	"autoload": {
 		"psr-4": {

ext_emconf.php

@@ -7,18 +7,14 @@
     'author' => 'Patrik Tschersich',
     'author_email' => '[email protected]',
     'state' => 'beta',
-    'uploadfolder' => false,
-    'createDirs' => '',
-    'clearCacheOnLoad' => 0,
-    'version' => '1.0.8',
+    'version' => '1.0.9',
     'constraints' => [
         'depends' => [
-            'typo3' => '9.5.0-11.99.0',
+            'typo3' => '12.0-12.99.0',
         ],
         'conflicts' => [],
         'suggests' => [],
     ],
-    'clearcacheonload' => false,
     'author_company' => 'WapplerSystems',
 ];
 

ext_tables.php

@@ -2,9 +2,8 @@
 
 use WapplerSystems\Shyguy\Hooks\TCEmainHook;
 
-if (!defined('TYPO3_MODE')) {
+if (!defined('TYPO3')) {
     die('Access denied.');
 }
 
-$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['Backend\Template\Components\ButtonBar']['getButtonsHook'][] = 'WapplerSystems\Shyguy\Hooks\ShyGuyHook->addSoftHyphenInitial';
 $GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['t3lib/class.t3lib_tcemain.php']['processDatamapClass'][] = TCEmainHook::class;