From a5d02fbc24d9adb783a28bca869352b692663c5f Mon Sep 17 00:00:00 2001
From: Paulo Ragonha <paulo@ragonha.me>
Date: Tue, 1 Aug 2023 11:51:01 +0200
Subject: [PATCH] Support for Gameface's cohinline attribute

For more information check Gameface's documentation: https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/#experimental-inline-layout-for-paragraph-elements
---
 .vscode/settings.json                         |  2 ++
 .../dom-fiber/src/setupHostConfig.spec.tsx    | 36 +++++++++++++++++++
 .../dom-fiber/src/setupHostConfig.ts          | 13 +++++++
 packages/@react-facet/dom-fiber/src/types.ts  |  7 ++++
 4 files changed, 58 insertions(+)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 87ceffa3..20a7cf58 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,7 @@
 {
     "cSpell.words": [
+        "cohinline",
+        "Gameface",
         "gamepad"
     ],
     "typescript.tsdk": "./node_modules/typescript/lib"
diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
index 87794304..0063da64 100644
--- a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
+++ b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
@@ -77,6 +77,11 @@ describe('mount', () => {
       expect(root?.innerHTML ?? '').toBe('<input disabled="">')
     })
 
+    it('sets cohinline', () => {
+      render(<fast-p cohinline />)
+      expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+    })
+
     it('sets maxlength', () => {
       render(<input type="text" maxLength={10} />)
       expect(root?.innerHTML ?? '').toBe('<input maxlength="10" type="text">')
@@ -370,6 +375,16 @@ describe('mount', () => {
       expect(root?.innerHTML ?? '').toBe('<input>')
     })
 
+    it('sets cohinline', () => {
+      const cohinlineFacet = createFacet({ initialValue: true })
+
+      render(<fast-p cohinline={cohinlineFacet} />)
+      expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+
+      cohinlineFacet.set(false)
+      expect(root?.innerHTML ?? '').toBe('<p></p>')
+    })
+
     it('sets maxlength', () => {
       const maxLengthFacet = createFacet({ initialValue: 10 })
 
@@ -1134,6 +1149,27 @@ describe('update', () => {
     expect(root?.innerHTML ?? '').toBe('<input>')
   })
 
+  it('updates cohinline', () => {
+    const MockComponent = () => {
+      const [cohinline, setCohinline] = useState<boolean | undefined>(true)
+      useEffect(() => {
+        setTimeout(() => setCohinline(false), 1)
+        setTimeout(() => setCohinline(true), 2)
+        setTimeout(() => setCohinline(undefined), 3)
+      }, [])
+      return <fast-p cohinline={cohinline} />
+    }
+
+    render(<MockComponent />)
+    expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+    jest.advanceTimersByTime(1)
+    expect(root?.innerHTML ?? '').toBe('<p></p>')
+    jest.advanceTimersByTime(1)
+    expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+    jest.advanceTimersByTime(1)
+    expect(root?.innerHTML ?? '').toBe('<p></p>')
+  })
+
   it('updates maxLength', () => {
     const MockComponent = () => {
       const [maxLength, setMaxLength] = useState<number | undefined>(1)
diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.ts b/packages/@react-facet/dom-fiber/src/setupHostConfig.ts
index 274b3a43..78eb161e 100644
--- a/packages/@react-facet/dom-fiber/src/setupHostConfig.ts
+++ b/packages/@react-facet/dom-fiber/src/setupHostConfig.ts
@@ -308,6 +308,9 @@ export const setupHostConfig = (): HostConfig<
         newProps['data-x-ray'] != null
           ? setupAttributeUpdate('data-x-ray', newProps['data-x-ray'], element)
           : undefined,
+
+      cohinline:
+        newProps.cohinline != null ? setupAttributeUpdate('cohinline', newProps.cohinline, element) : undefined,
     }
   },
 
@@ -881,6 +884,16 @@ export const setupHostConfig = (): HostConfig<
       }
     }
 
+    if (newProps.cohinline !== oldProps.cohinline) {
+      instance.cohinline?.()
+
+      if (newProps.cohinline == null) {
+        element.removeAttribute('cohinline')
+      } else {
+        instance.cohinline = setupAttributeUpdate('cohinline', newProps.cohinline, element)
+      }
+    }
+
     if (newProps.onClick !== oldProps.onClick) {
       if (oldProps.onClick) element.removeEventListener('click', oldProps.onClick)
       if (newProps.onClick) element.addEventListener('click', newProps.onClick)
diff --git a/packages/@react-facet/dom-fiber/src/types.ts b/packages/@react-facet/dom-fiber/src/types.ts
index 577ae4f9..f3f05d7a 100644
--- a/packages/@react-facet/dom-fiber/src/types.ts
+++ b/packages/@react-facet/dom-fiber/src/types.ts
@@ -175,6 +175,12 @@ export type ElementProps<T> = PointerEvents &
     stopOpacity?: FacetProp<string | undefined>
     fontFamily?: FacetProp<string | undefined>
     fontSize?: FacetProp<string | undefined>
+
+    /**
+     * Support for Gameface's Experimental inline layout for paragraph elements
+     * More info: https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/#experimental-inline-layout-for-paragraph-elements
+     */
+    cohinline?: FacetProp<boolean | undefined>
   }
 
 export type TextProps = {
@@ -242,6 +248,7 @@ export type ElementContainer = {
   stopOpacity?: Unsubscribe
   fontFamily?: Unsubscribe
   fontSize?: Unsubscribe
+  cohinline?: Unsubscribe
 }
 
 export const isElementContainer = (value: ElementContainer | TextContainer): value is ElementContainer => {