feat(dashboard): in-app editor form fields based on codemirror #6809
Conversation
✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -43,10 +43,14 @@ | |||
| "@segment/analytics-next": "^1.73.0", | |||
| "@sentry/react": "^8.35.0", | |||
| "@tanstack/react-query": "^5.59.6", | |||
| "@uiw/codemirror-theme-white": "^4.23.6", | |||
There was a problem hiding this comment.
use the CodeMirror white theme as default; we will adjust it to our needs
| "@xyflow/react": "^12.3.2", | ||
| "class-variance-authority": "^0.7.0", | ||
| "clsx": "^2.1.1", | ||
| "cmdk": "1.0.0", | ||
| "codemirror-lang-liquid": "^1.0.0", |
There was a problem hiding this comment.
liquid syntax and autocomplete
| const editorVariants = cva('-mx-1 -mt-[2px] h-full w-full flex-1 [&_.cm-focused]:outline-none', { | ||
| variants: { | ||
| size: { | ||
| default: 'text-xs [&_.cm-editor]:py-1', | ||
| md: 'text-sm [&_.cm-editor]:py-2', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| size: 'default', | ||
| }, | ||
| }); |
There was a problem hiding this comment.
these styles adjust the editor to look good when placed inside the InputField component; basically to have the correct padding from the top
| useEffect(() => { | ||
| if (editor.current) { | ||
| setContainer(editor.current); | ||
| } | ||
| }, [setContainer]); |
There was a problem hiding this comment.
this is the recommended way from the docs
| export const Editor = ({ value, placeholder, className, height, size, onChange }: EditorProps) => { | ||
| const editor = useRef<HTMLDivElement>(null); | ||
| const { setContainer } = useCodeMirror({ | ||
| extensions: [LiquidHTML({}), EditorView.lineWrapping], |
There was a problem hiding this comment.
liquid and line wrapping extensions
| placeholder={placeholder} | ||
| value={value.url} | ||
| onChange={(val) => onChange({ ...value, url: val })} | ||
| height={size === 'md' ? '38px' : '30px'} |
There was a problem hiding this comment.
I'm not sure how to do this better without hardcoding these values, basically, our inputs heights are md 40px and default 32px. These values exclude border.
And the height should be set if we want to have "single line" input, otherwise the editor will be growing with more content.
There was a problem hiding this comment.
Maybe I'll move to constants or something.
| @@ -178,7 +179,7 @@ const ConfigureActionPopover = ( | |||
| }} | |||
| > | |||
| <PopoverTrigger {...rest} /> | |||
| <PopoverContent> | |||
| <PopoverContent className="max-w-72"> | |||
There was a problem hiding this comment.
the editor fields expand the popover content, so I had to set the max
| const [subject, setSubject] = useState(''); | ||
| const [body, setBody] = useState(''); |
@novu/client
@novu/framework
@novu/headless
@novu/js
@novu/nest
@novu/nextjs
@novu/node
@novu/notification-center
novu
@novu/providers
@novu/react
@novu/react-native
@novu/shared
@novu/stateless
commit: |
What changed? Why was the change needed?
In-App Editor - updated the form fields to be based on the "editor" primitive, which is the CodeMirror component.
TODO:
Screenshots