Task: Create a new component in the shared UI library
The component will be a shared field component named FSFormulaField.
Requirements
- It should be a text-based component with the ability to use variables.
- Variables must be configured through props, just like in
FSRichTextField.
- As in
FSRichTextField, variables should be treated as single characters and visually distinct from normal text.
- The component must support a
modelValue prop and emit updates, where the value is a plain string containing variables inside {}.
Implementation notes
- The
FSFormulaField can be based on the same structure as FSRichTextField, using Lexical, but only with the variable mode enabled.
- The rest of the component should behave and look like a
FSTextField.
- Ensure conversion from the Lexical object to a plain string without style artifacts.
- Avoid code duplication: factorize reusable parts and aim for clean, robust code with clear responsibilities for each piece.
- Reuse existing elements from the library instead of creating new concepts.
Task: Create a new component in the shared UI library
The component will be a shared field component named
FSFormulaField.Requirements
FSRichTextField.FSRichTextField, variables should be treated as single characters and visually distinct from normal text.modelValueprop and emit updates, where the value is a plain string containing variables inside{}.Implementation notes
FSFormulaFieldcan be based on the same structure asFSRichTextField, using Lexical, but only with the variable mode enabled.FSTextField.