feat: Add real-time character limit warning tooltip for tag values

CHANGELOG.md

@@ -49,6 +49,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Don't error on features with a sole `note` tag ([#11522])
 * Warn when two features cross each other on same `layer`, regardless of `bridge` / `tunnel` tags ([#10999], thanks [@homersimpsons])
 #### :bug: Bugfixes
+* Show warning in raw tag editor when tag values exceed 255 characters ([#10241], thanks [@JaiswalShivang])
 * Fix typo: `parking:left:capacity` duplicated in osmSummableTags, missing `parking:right:capacity` ([#11819], thanks [@JaiswalShivang])
 * Fix some gpx/geojson properties not visible, such as numbers or complex data structures ([#11636], thanks [@k-yle])
 * Fix error setting custom background ([#11862], thanks [@Kayd-06])

modules/ui/sections/raw_tag_editor.js

@@ -10,9 +10,10 @@ import { uiTagReference } from '../tag_reference';
 import { prefs } from '../../core/preferences';
 import { t } from '../../core/localizer';
 import { utilArrayDifference, utilArrayIdentical } from '../../util/array';
-import { utilGetSetValue, utilNoAuto, utilRebind, utilTagDiff } from '../../util';
+import { utilGetSetValue, utilNoAuto, utilRebind, utilTagDiff, utilUnicodeCharsCount } from '../../util';
 import { allowUpperCaseTagValues } from '../../osm/tags';
 import { fileFetcher } from '../../core';
+import { uiLengthIndicator } from '../length_indicator';
 
 
 export function uiSectionRawTagEditor(id, context) {
@@ -196,7 +197,20 @@ export function uiSectionRawTagEditor(id, context) {
             .call(utilNoAuto)
             .on('focus', interacted)
             .on('blur', valueChange)
-            .on('change', valueChange);
+            .on('change', valueChange)
+            .on('input', function() {
+                var lengthIndicator = d3_select(this.parentNode).datum().__lengthIndicator;
+                if (lengthIndicator) {
+                    lengthIndicator.update(this.value);
+                }
+            });
+
+        innerWrap.select('.value-wrap')
+            .each(function() {
+                var lengthIndicator = uiLengthIndicator(context.maxCharsForTagValue());
+                d3_select(this).datum().__lengthIndicator = lengthIndicator;
+                d3_select(this).call(lengthIndicator);
+            });
 
         innerWrap
             .append('button')
@@ -257,13 +271,18 @@ export function uiSectionRawTagEditor(id, context) {
                 (_, newKey) => _pendingChange === null || isEmpty(_pendingChange) || _pendingChange[newKey] // if there are pending changes: skip untouched tags
             );
 
+        const maxChars = context.maxCharsForTagValue();
         items.selectAll('input.value')
             .attr('title', function(d) {
                 return Array.isArray(d.value) ? d.value.filter(Boolean).join('\n') : d.value;
             })
             .classed('mixed', function(d) {
                 return Array.isArray(d.value);
             })
+            .classed('warning', function(d) {
+                if (Array.isArray(d.value)) return false;
+                return d.value && utilUnicodeCharsCount(d.value) > maxChars;
+            })
             .attr('placeholder', function(d) {
                 return Array.isArray(d.value) ? t('inspector.multiple_values') : null;
             })
@@ -276,6 +295,15 @@ export function uiSectionRawTagEditor(id, context) {
                     return null;
                 }
                 return Array.isArray(d.value) ? '' : d.value;
+            })
+            .each(function(d) {
+                if (!Array.isArray(d.value)) {
+                    var valueWrap = d3_select(this.parentNode);
+                    var lengthIndicator = valueWrap.datum().__lengthIndicator;
+                    if (lengthIndicator) {
+                        lengthIndicator.update(d.value || '');
+                    }
+                }
             });
 
         items.selectAll('button.remove')