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 => {