---
title: "v1.2.0"
description: "A parallax scroll animation for images and videos across all packages, and custom text states in the Payload Lexical editors."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/changelog/v1.2.0
version: changelog
docs_index: https://docs.systhema.app/fr/llms.txt
---
> This page isn't translated yet. Showing English.


## ✨ Highlights

### Parallax Animation for Images and Videos

A new parallax scroll animation ships across all packages, including controls in the editor for Hero, Feature, and Media blocks. A simple toggle makes it effortless to add depth and motion to images and videos with consistent behavior across the stack.

### Custom Text States in PayloadCMS

Lexical editors now support custom text states with a dedicated `customTextState` configuration. You can define your own formatting rules and render them cleanly on the frontend, with smarter conversion producing tighter, merged markup.

Example `payload.config.ts` usage:

```ts
const userSysthemaConfig = {
  customTextStates: [
    {
      editor: ['root', 'region', 'fragment', 'slot'],
      state: {
        color: {
          // fancy gradients!
          galaxy: {
            label: 'Galaxy',
            css: {
              background: 'linear-gradient(to right, #0000ff, #ff0000)',
              color: 'white',
            },
          },
          sunset: {
            label: 'Sunset',
            css: {
              background: 'linear-gradient(to top, #ff5f6d, #6a3093)',
            },
          },
        },
        // You can have both colored and underlined text at the same time.
        // If you don't want that, group them within the same key.
        // (just like the gradients above)
        underline: {
          solid: {
            label: 'Solid',
            css: {
              'text-decoration': 'underline',
              'text-underline-offset': '4px',
            },
          },
          // You'll probably want to use the CSS light-dark() utility.
          'yellow-dashed': {
            label: 'Yellow Dashed',
            css: {
              'text-decoration': 'underline dashed',
              'text-decoration-color': 'light-dark(#EAB308,yellow)',
              'text-underline-offset': '4px',
            },
          },
        },
      },
    },
  ],
}
```

## List of all changes

### 🚀 Features

#### core,react,next

- feat(core,react,next): add centralized parallax configuration
- feat(core,react,next): add parallax scroll effect module

#### react,next

- feat(react,next): add parallax prop to Image and Video components

#### payload

- feat(payload): add parallax support to hero blocks and feature block
- feat(payload): add whitelabel configuration option
- feat(payload): add parallax toggle to image and video blocks
- feat(payload): added custom TextJSXConverter, so we can convert TextStates from the lexical editors to frontend code
- feat(payload): add support for custom text states in lexical editors
- feat(payload): added 'width' setting for Card, otherwise NestedCard didn't have anything else different from top level version of this block

#### actions

- feat(actions): added internal version publisher workflow

### ♻️ Refactors

#### core

- refactor(core): remove `--ui` flag from CLI in favor of new `--react` flag, adapting from the previous withSysthema helper functions removed modules argument, to the new `systhema.config.js` file's `packages.react` and `packages.payload` configuration objects; while also using the new `@import '@systhemaui/core/tailwind';` in the default files generated by the `--payload` flag

#### payload

- refactor(payload): replace Feature block reversed checkbox with Media Float iconGroup
- refactor(payload): use slotLexicalEditor in hero block
- refactor(payload): optimize text converter to use single tag with merged styles
- refactor(payload): better types for customTextState config
- !refactor(payload): removed "columns" and "blocks" editors, and merged them into the "nested" editor, with configurable arguments to enable columns and cards, avoiding circular dependencies (breaking)
- refactor(payload): remove legacy lexical editor files (basic, full, mini, nested) as part of the transition to new editor structure
- refactor(payload): update lexical editors to use new naming conventions and replace full/nested/basic/mini editors with root/region/fragment/slot editors

### 🐛 Bug fixes

#### core

- fix(core): include parallax css in class generation for tailwind plugin
- fix(core): add `.parallax` and `.parallax-wrapper` classes to the safelist.txt generation
- fix(core): rename comments with systhema cli commands instead of leftover direct calls to src/systhema/core/\*.ts files (legacy code from era before monorepo and npm packages)
- fix(core): higher specificity for `.feature-inversed` class to ensure it overrides base `.feature` styles
- fix(core): add function to remove asterisks from token names and values for token processing, this way we can use asterisk (\*) symbols, to point to certain tokens without actually impacting references in the codebase
- fix(core): normalize decimal values and adjust bracket notation for tailwind theme paths, to be able to find tailwindcss references in tokens where commas are used. for example {tailwindcss.spacing.2,5} turned into theme(spacing[2.5]) which would result in 10px
- fix(core): remove unnecessary marginTop from sections having the same colorSystem next to each other
- fix(core): in a next.js website with unoptimized CSS, two accordions following each other did not have the corect reduced margins that we needed in our conditional spacing logic
- fix(core): better balance header-navigation-item when it has submenu, and header-navigation-item-icon
- fix(core): incorrect color of header-navigation-item-icon-subnavigation when not hovered
- fix(core): move blocks/sections with same colorSystem to a bit closer to each other
- fix(core): `.columns`, `.stack`, `.card-*` and `.accordion-*` inside `.richtext` were having margins when they were :first-child or :last-child, while it should've been removed
- fix(core): add helper function to check token reference values across screen sizes

#### core,react,next

- fix(core,react,next): look for elements' parent as well, when evaluating `.parallax--big` and `.parallax--noscale` classes

#### payload

- fix(payload): region lexical editor should have NestedColumns block instead of a full section, compared to root lexical editor
- fix(payload): remove module-level applyArticleColorSetting call for Turbopack
- fix(payload): use lazy access for defaultPageTemplate to fix Turbopack TDZ error
- fix(payload): prevent SCSS imports from breaking Node.js CLI commands
- fix(payload): resolve circular dependency breaking Turbopack builds
- fix(payload): enable BalanceTextFeature to work with TextStateFeature
- fix(payload): ignore eslint warnings, the `FeatureProviderServer` type comes from payload's package this way
- fix(payload): columns section to have the same default paddings as a simple section
- fix(payload): comment out CSS zoom from elements in lexical editors
- fix(payload): RichText (Lexical) component was not compatible with client side code, it could only run on the server
- fix(payload): types generated with default tokens

#### react,next

- fix(react,next): added `parallaxNoWrapper` attribute to Media components, so we can prevent the default wrapping methodology when using `parallax, also change default 1280/1280 px sizes for next/image
- fix(react,next): parallax media components className appending, problems caused by fill="true" and unnecessary width, height attributes forcing

#### templates/next

- fix(templates/next): adapted default files to be using properties provided by the default tokens, while also removing the `tailwind.config.ts` file from the template, since that's not the encouraged way of working anymore with v4
- fix(templates/next): correct theme and layoutBackground properties for default tokens

#### templates/payload

- fix(templates/payload): remove leftover legacy @systhema path from tsconfig.json (leftover from era before monorepo and npm packages)
- fix(templates/payload): temporarily supress "critical dependency" errors by adding `config.module.exprContextCritical = false` to the next.config.mjs file
- fix(templates/payload): installing the correct font, and missing @tailwindcss/postcss package
- fix(templates/payload): adapted layout and styles to the default systhema tokens

#### general

- fix: added @parcel/watcher to pnpm.onlyBuiltDependencies in package.json files to approve builds
- fix: updated main .gitignore file to include the root pnpm-lock.yaml, but never include for sub-directories, and added .pnpm-debug.logs

### 💄 Style

- style(core): formatting handleTokens.ts
- style(payload): ran prettier on `payload-types.d.ts`
- style(payload): line break change on customTextStatesStore.ts
- style(templates/payload): formatted README.md with prettier

### 📚 Docs

- docs(templates/\*): updated documentation for next and payload templates, with tailwindcss v4 in mind, and recent changes to CLI usage and config generation

### 🧹 Chores

- chore(\*): cleanup deprecated Group component and block
- chore(deps): updated packages and main pnpm-lock.yaml file
- chore(payload): code cleanup
- chore(payload): cleanup Relationship feature from full editor, 'component' collection now has its own block
- chore(templates/\*): remove tailwind.config.ts from prettierrc files
- chore(templates/\*): delete lock files
- chore(templates/html): updated .gitignore
- chore(templates/payload): generated importMap and payload-types.ts
- chore(templates/payload): updated payload-types.ts with root-level Card's width setting
- chore: added CLAUDE.md for agent guidance
- chore: add CLAUDE.md for AI assistant guidance
- chore: updated pnpm-lock.yaml
- chore: bump version numbers to 1.1.0 across all packages and templates
- chore: update pnpm version in package.json, and generated pnpm-lock.yaml
- chore: update all package versions to 1.0.0, removing canary releases
- chore: bump version to 1.0.0-canary.2 for all packages
- deps(templates/_): update @systhemaui/_ packages to version 1.0.0-canary.2 in all templates
- deps(\*): updated all packages, while also removing unused autoprefixer from `packages/core` and from `templates/payload`