Feat/wysiwyg dynamic values

[lloydsamson]

Add dynamic values support to WYSIWYG editor fields

Summary

Extends the dynamic values system to support WYSIWYG editor fields (both ProseMirror and TinyMCE). Previously,
dynamic values were limited to text, color-picker, date-picker, number, and conditional-panel field types. This
is particularly useful for email editing workflows where field content needs to include dynamic tokens like
[[post-title]] or [[author-name]].

Changes

Feature

• Register editor and wysiwyg as allowed dynamic value types (insert mode only, replace mode doesn't apply to
  rich text)
• ProseMirror: wrap editor with BaseWrapper; token is appended to the content value
• TinyMCE: wrap editor with BaseWrapper; token is inserted at cursor position via
  tinyMCE.activeEditor.insertContent(), falling back to string append
• Fix List.updateItem — state update was wrapped in setTimeout, causing the visibility toggle to not reflect
  immediately
• Add live examples for both ProseMirror and TinyMCE editor dynamic value fields on the example page
• Fix npm run test script to quote the path, so it works in environments with spaces (e.g. Local Sites)

Tests

• Jest: use getByRole('button', { name: 'Insert' }) instead of getByText to avoid false matches against
  ProseMirror's own toolbar text
• PHPUnit: add tests for dynamic token rendering inside HTML content and for wysiwyg store/strip behaviour
• PHPUnit: fix enqueue test regex — WP 7.1-alpha appends a sourceURL comment to inline scripts, breaking the
  single-line match
• E2E: fix Tangible Fields plugin basename (tangible-fields/plugin → fields/plugin) so the activation test
  correctly finds and activates the plugin in a fresh environment

[nicolas-jaussaud]

Hi Lloyd!

Thanks for the PR and the tests

I left a few comment, mostly about the ProseMirror implementation as I think we have a small re-render issue. The TinyMCE part looks good to me!

[nicolas-jaussaud]

Suggested change

debounced.current.status = false

Unfortunately I don't think we can add this line here, it prevent the debounced delay to be applied. Did you encounter some issues with it while testing?

If for a reason or another you have a specific case and want the result request to be sent right away you can pass a debounceTime prop and set it to 0

[nicolas-jaussaud]

We might want to move the BaseWrapper here into the child component (ProseMirror.tsx)

Currently the layout would look like this:

By moving it into ProseMirror.tsx, it could look like this instead, which will keep all our action button in the same place:

<BaseWrapper /> will still work if we use it without any children, so we can do something like this:

+import { BaseWrapper } from '../../../dynamic/'
 
 // ...
 
 const ProseMirror = forwardRef(({
   rawView = true,
+  dynamic = false,
   ...props
 }, ref) => {
 
   // ...
 
   return <div className="tf-editor-content">
-    { rawView && <div className="tf-editor-view-toggle">
-      <ButtonGroup
-        label={ 'Switch view' }
-        labelVisuallyHidden={ true }
-        value={ view }
-        onChange={ view => {
-          setView(view)
-          if ( view === 'raw' ) ref.current = null
-        }}
-        choices={{
-          visual : 'Visual',
-          raw    : 'Raw'
-        }}
-      />
+    { ( rawView || dynamic ) && 
+      <div className="tf-editor-view-toggle">
+        { dynamic &&
+          <BaseWrapper
+            config={ dynamic ?? false }
+            onValueSelection={ dynamic => {
+              setValue( value + dynamic )
+              setMountKey(k => k + 1)
+            } }
+            buttonType="outside"
+          /> }
+        { rawView &&
+          <ButtonGroup
+            label={ 'Switch view' }
+            labelVisuallyHidden={ true }
+            value={ view }
+            onChange={ view => {
+              setView(view)
+              if ( view === 'raw' ) ref.current = null
+            }}
+            choices={{
+              visual : 'Visual',
+              raw    : 'Raw'
+            }}
+          /> }

   // ...
})

export default ProseMirror

Which will also require to pass a dynamic props on <ProseMirror />:

 <ProseMirror
     ref={ editorRef }
     value={ value }
     onChange={ setValue }
     rawView={ props.rawView ?? true }
+    dynamic={ props.dynamic ?? false }
   />

[nicolas-jaussaud]

it looks like there is a small issue currently

If I insert a dynamic value, the state will update but it won't show up in the ProseMirror editor

It might be easier to fix if we move the wrapper inside the child component (as suggested in my other comment)