fixes #9894 . Truncate block editor model title to 100 chars. (#10303)

* fixes #9894 . Truncate block editor model title to 100 chars.

* update to move max into controller logic

* null check name, just in case...

Co-authored-by: Mario Lopez <mario@monkii.com>
Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>

src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js

@@ -192,6 +192,7 @@ Use this directive to construct a header inside the main editor window.
 @param {array=} tabs Array of tabs. See example above.
 @param {array=} navigation Array of sub views. See example above.
 @param {boolean=} nameLocked Set to <code>true</code> to lock the name.
+@param {number=} nameMaxLength Maximum length of the name.
 @param {object=} menu Add a context menu to the editor.
 @param {string=} icon Show and edit the content icon. Opens an overlay to change the icon.
 @param {boolean=} hideIcon Set to <code>true</code> to hide icon.
@@ -210,11 +211,11 @@ Use this directive to construct a header inside the main editor window.
 
     function EditorHeaderDirective(editorService, localizationService, editorState, $rootScope) {
 
-        function link(scope, $injector) {
+        function link(scope) {
 
             scope.vm = {};
             scope.vm.dropdownOpen = false;
-            scope.vm.currentVariant = "";
+            scope.vm.currentVariant = ""; 
             scope.loading = true;
             scope.accessibility = {};
             scope.accessibility.a11yMessage = "";
@@ -222,6 +223,12 @@ Use this directive to construct a header inside the main editor window.
             scope.accessibility.a11yMessageVisible = false;
             scope.accessibility.a11yNameVisible = false;
 
+            // trim the name if required
+            scope.nameMaxLength = scope.nameMaxLength || 255;
+            if (scope.name && scope.name.length > scope.nameMaxLength) {
+                scope.name = scope.name.substring(0, scope.nameMaxLength - 1) + '…';
+            }
+
             // need to call localizationService service outside of routine to set a11y due to promise requirements
             if (editorState.current) {
                 //to do make work for user create/edit
@@ -376,6 +383,7 @@ Use this directive to construct a header inside the main editor window.
                 name: "=",
                 nameLocked: "=",
                 nameRequired: "=?",
+                nameMaxLength: "=?",
                 menu: "=",
                 hideActionsMenu: "<?",
                 icon: "=",

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/blockeditor/blockeditor.html

@@ -6,6 +6,7 @@
 
             <umb-editor-header
                 name="vm.model.title"
+                name-max-length="255"
                 name-required="false"
                 name-locked="true"
                 navigation="vm.tabs"