Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dashboard): in-app editor form fields based on codemirror #6809

Open
wants to merge 2 commits into
base: next
Choose a base branch
from

Conversation

LetItRock
Copy link
Contributor

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:

  • styling
  • autosuggestions

Screenshots

Screenshot 2024-10-30 at 23 56 17

Copy link

linear bot commented Oct 30, 2024

Copy link

netlify bot commented Oct 30, 2024

Deploy Preview for novu-stg-vite-dashboard-poc ready!

Name Link
🔨 Latest commit c66e756
🔍 Latest deploy log https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/6722bc8e4b6fbd000917f1e9
😎 Deploy Preview https://deploy-preview-6809--novu-stg-vite-dashboard-poc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

liquid syntax and autocomplete

Comment on lines +7 to +17
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',
},
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these styles adjust the editor to look good when placed inside the InputField component; basically to have the correct padding from the top

Comment on lines +57 to +61
useEffect(() => {
if (editor.current) {
setContainer(editor.current);
}
}, [setContainer]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

liquid and line wrapping extensions

placeholder={placeholder}
value={value.url}
onChange={(val) => onChange({ ...value, url: val })}
height={size === 'md' ? '38px' : '30px'}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I'll move to constants or something.

@@ -178,7 +179,7 @@ const ConfigureActionPopover = (
}}
>
<PopoverTrigger {...rest} />
<PopoverContent>
<PopoverContent className="max-w-72">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the editor fields expand the popover content, so I had to set the max

Comment on lines +27 to +28
const [subject, setSubject] = useState('');
const [body, setBody] = useState('');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just temporarily

Copy link

pkg-pr-new bot commented Oct 30, 2024

Open in Stackblitz

@novu/client

pnpm add https://pkg.pr.new/novuhq/novu/@novu/client@6809

@novu/framework

pnpm add https://pkg.pr.new/novuhq/novu/@novu/framework@6809

@novu/headless

pnpm add https://pkg.pr.new/novuhq/novu/@novu/headless@6809

@novu/js

pnpm add https://pkg.pr.new/novuhq/novu/@novu/js@6809

@novu/nest

pnpm add https://pkg.pr.new/novuhq/novu/@novu/nest@6809

@novu/nextjs

pnpm add https://pkg.pr.new/novuhq/novu/@novu/nextjs@6809

@novu/node

pnpm add https://pkg.pr.new/novuhq/novu/@novu/node@6809

@novu/notification-center

pnpm add https://pkg.pr.new/novuhq/novu/@novu/notification-center@6809

novu

pnpm add https://pkg.pr.new/novuhq/novu@6809

@novu/providers

pnpm add https://pkg.pr.new/novuhq/novu/@novu/providers@6809

@novu/react

pnpm add https://pkg.pr.new/novuhq/novu/@novu/react@6809

@novu/react-native

pnpm add https://pkg.pr.new/novuhq/novu/@novu/react-native@6809

@novu/shared

pnpm add https://pkg.pr.new/novuhq/novu/@novu/shared@6809

@novu/stateless

pnpm add https://pkg.pr.new/novuhq/novu/@novu/stateless@6809

commit: c66e756

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant