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('')
})
+ it('sets cohinline', () => {
+ render()
+ expect(root?.innerHTML ?? '').toBe('
')
+ })
+
it('sets maxlength', () => {
render()
expect(root?.innerHTML ?? '').toBe('')
@@ -370,6 +375,16 @@ describe('mount', () => {
expect(root?.innerHTML ?? '').toBe('')
})
+ it('sets cohinline', () => {
+ const cohinlineFacet = createFacet({ initialValue: true })
+
+ render()
+ expect(root?.innerHTML ?? '').toBe('')
+
+ cohinlineFacet.set(false)
+ expect(root?.innerHTML ?? '').toBe('')
+ })
+
it('sets maxlength', () => {
const maxLengthFacet = createFacet({ initialValue: 10 })
@@ -1134,6 +1149,27 @@ describe('update', () => {
expect(root?.innerHTML ?? '').toBe('')
})
+ it('updates cohinline', () => {
+ const MockComponent = () => {
+ const [cohinline, setCohinline] = useState(true)
+ useEffect(() => {
+ setTimeout(() => setCohinline(false), 1)
+ setTimeout(() => setCohinline(true), 2)
+ setTimeout(() => setCohinline(undefined), 3)
+ }, [])
+ return
+ }
+
+ render()
+ expect(root?.innerHTML ?? '').toBe('')
+ jest.advanceTimersByTime(1)
+ expect(root?.innerHTML ?? '').toBe('')
+ jest.advanceTimersByTime(1)
+ expect(root?.innerHTML ?? '').toBe('')
+ jest.advanceTimersByTime(1)
+ expect(root?.innerHTML ?? '').toBe('')
+ })
+
it('updates maxLength', () => {
const MockComponent = () => {
const [maxLength, setMaxLength] = useState(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 = PointerEvents &
stopOpacity?: FacetProp
fontFamily?: FacetProp
fontSize?: FacetProp
+
+ /**
+ * 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
}
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 => {