@brightspot/ui 3.0.1-cms-ui-migration.4 → 5.0.0

package/src/legacy/tool-ui/src/Entry.ts

@@ -80,11 +80,29 @@ onVisible('textarea[data-code-type]', (input: HTMLTextAreaElement) => {
   code.placeholderEditable = 'editablePlaceholder' in input.dataset
   code.value = input.value
 
+  // Debounce the bubbled change event so we don't fire 10+ document-level
+  // jQuery change delegates (several with `:has()`) per keystroke.
+  //
+  // Lives here, not in CodeInput: moving it would either debounce the
+  // value-sync (form-submit sees stale data) or split CodeInput's API for
+  // one consumer. Remove when the v3 jQuery delegates are retired.
+  const CHANGE_DEBOUNCE_MS = 200
+  const dispatchChange = debounce(CHANGE_DEBOUNCE_MS, () => {
+    input.dispatchEvent(new Event('change', { bubbles: true }))
+  })
   code.addEventListener('change', () => {
     input.value = code.value
-    input.dispatchEvent(new Event('change', { bubbles: true }))
+    dispatchChange()
   })
 
+  // We decided word count isn't meaningful on code. Opt the external textarea
+  // out of the v3 word-count delegate, which writes to a sibling via jQuery
+  // `.text()` on every keystroke and invalidates layout up the `:has()`
+  // ancestor chain. CM uses `inputStyle: 'contenteditable'` (set in
+  // CodeInput), so there is no internal textarea for the delegate to find —
+  // the delegate's `textarea` selector cannot match CM's editable `<div>`.
+  input.dataset.hideWordCount = 'true'
+
   input.hidden = true
   input.parentNode?.insertBefore(code, input)
 })

package/src/legacy/tool-ui/src/ProseMirror-table.css

@@ -115,7 +115,6 @@
     }
 
     .ProsemirrorEnhancementMenu-container-button:is(
-        .edit,
         .arrow_upward,
         .arrow_downward,
         .open_with
@@ -123,6 +122,27 @@
       @apply hidden;
     }
 
+    .Enhancement.block.readOnly {
+      @apply flex flex-wrap items-center overflow-hidden;
+    }
+
+    .Enhancement-label {
+      @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+    }
+
+    .ProsemirrorEnhancementMenu {
+      @apply ml-auto;
+    }
+
+    .ProsemirrorEnhancementMenu-container.is-block {
+      @apply static;
+    }
+
+    .Enhancement-preview,
+    .Enhancement-initialBody {
+      @apply min-w-0 basis-full;
+    }
+
     .rte2-style-comment {
       .ProseMirror-fullscreen-container & {
         @apply before:pt-0;

package/src/legacy/tool-ui/src/form/CodeInput/index.ts

@@ -55,6 +55,7 @@ export default class CodeInput extends LitElement {
 
     this.#editor = CodeMirror(this, {
       indentUnit: 4,
+      inputStyle: 'contenteditable',
       lineNumbers: true,
       lineWrapping: true,
       mode: this.type || '',