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

LetItRock · 2024-10-30T23:00:10Z

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

linear · 2024-10-30T23:00:14Z

NV-4556 Use CodeMirror for the form fields

netlify · 2024-10-30T23:00:23Z

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

Name	Link
🔨 Latest commit	`676990f`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/67255593b6315e000860c0cf
😎 Deploy Preview	https://deploy-preview-6809--novu-stg-vite-dashboard-poc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

LetItRock · 2024-10-30T23:00:57Z

apps/dashboard/package.json

@@ -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",


use the CodeMirror white theme as default; we will adjust it to our needs

LetItRock · 2024-10-30T23:01:44Z

apps/dashboard/package.json

    "@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",


liquid syntax and autocomplete

LetItRock · 2024-10-30T23:03:39Z

apps/dashboard/src/components/primitives/editor.tsx

+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',
+  },
+});


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

LetItRock · 2024-10-30T23:04:10Z

apps/dashboard/src/components/primitives/editor.tsx

+  useEffect(() => {
+    if (editor.current) {
+      setContainer(editor.current);
+    }
+  }, [setContainer]);


this is the recommended way from the docs

LetItRock · 2024-10-30T23:04:25Z

apps/dashboard/src/components/primitives/editor.tsx

+export const Editor = ({ value, placeholder, className, height, size, onChange }: EditorProps) => {
+  const editor = useRef<HTMLDivElement>(null);
+  const { setContainer } = useCodeMirror({
+    extensions: [LiquidHTML({}), EditorView.lineWrapping],


liquid and line wrapping extensions

LetItRock · 2024-10-30T23:07:07Z

apps/dashboard/src/components/primitives/url-input.tsx

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


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.

Maybe I'll move to constants or something.

Are we using code mirror in online inputs to reuse the autocomplete functionality for variables? It's a smart approach to keep it dry, although it feels like an overkill for simple text or email inputs. I wonder if it's more future proof to have the autocomplete CodeMirror offers for code text areas and then implement it again with a popover for regular inputs.

Yes, we use it in all form fields, subject, redirect etc.
The "regular" single-line fields are limited in the number of characters that you can type and also the way it works currently with CodeMirror is not optimal as you can move the text to the next line and in this case the previous line won't be visible. We need to think about the pattern here, the potential solution might be to have "auto" height on the fields, but then you can't build all types of form UI with this approach as you can easily break the UI.

LetItRock · 2024-10-30T23:07:41Z

apps/dashboard/src/components/workflow-editor/action-picker.tsx

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


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

LetItRock · 2024-10-30T23:08:02Z

apps/dashboard/src/components/workflow-editor/steps/in-app-editor.tsx

+  const [subject, setSubject] = useState('');
+  const [body, setBody] = useState('');


just temporarily

pkg-pr-new · 2024-10-30T23:16:16Z

Open in Stackblitz

@novu/client

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

@novu/headless

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

@novu/framework

pnpm add https://pkg.pr.new/novuhq/novu/@novu/framework@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: 676990f

SokratisVidros

Code mirror!!! Yay!!!

SokratisVidros

I approve this one and we will chat about using CodeMirror editor across for all form fields separately.

SokratisVidros · 2024-11-01T12:23:36Z

apps/dashboard/src/components/primitives/url-input.tsx

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


Are we using code mirror in online inputs to reuse the autocomplete functionality for variables? It's a smart approach to keep it dry, although it feels like an overkill for simple text or email inputs. I wonder if it's more future proof to have the autocomplete CodeMirror offers for code text areas and then implement it again with a popover for regular inputs.

LetItRock requested review from SokratisVidros, BiswaViraj and desiprisg October 30, 2024 23:00

LetItRock self-assigned this Oct 30, 2024

LetItRock temporarily deployed to Linting October 30, 2024 23:00 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting October 30, 2024 23:00 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting October 30, 2024 23:00 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting October 30, 2024 23:09 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting October 30, 2024 23:09 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting October 30, 2024 23:09 — with GitHub Actions Inactive

LetItRock commented Oct 30, 2024

View reviewed changes

SokratisVidros approved these changes Oct 31, 2024

View reviewed changes

SokratisVidros approved these changes Nov 1, 2024

View reviewed changes

LetItRock force-pushed the nv-4556-in-app-editor-codemirror-fields branch from c66e756 to 4f7e176 Compare November 1, 2024 21:45

LetItRock temporarily deployed to Linting November 1, 2024 21:45 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting November 1, 2024 21:45 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting November 1, 2024 21:45 — with GitHub Actions Inactive

github-actions bot added @novu/api @novu/dal @novu/shared @novu/worker labels Nov 1, 2024

LetItRock force-pushed the nv-4556-in-app-editor-codemirror-fields branch from 4f7e176 to 840d002 Compare November 1, 2024 21:51

LetItRock temporarily deployed to Linting November 1, 2024 21:52 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting November 1, 2024 21:52 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting November 1, 2024 21:52 — with GitHub Actions Inactive

LetItRock force-pushed the nv-4556-in-app-editor-codemirror-fields branch from 840d002 to 23a001a Compare November 1, 2024 21:54

LetItRock temporarily deployed to Linting November 1, 2024 21:54 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting November 1, 2024 21:54 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting November 1, 2024 21:54 — with GitHub Actions Inactive

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

15aa3de

LetItRock force-pushed the nv-4556-in-app-editor-codemirror-fields branch from 23a001a to 15aa3de Compare November 1, 2024 22:08

github-actions bot removed @novu/api @novu/dal @novu/shared @novu/worker labels Nov 1, 2024

LetItRock had a problem deploying to Linting November 1, 2024 22:09 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting November 1, 2024 22:09 — with GitHub Actions Inactive

chore(dashboard): satisfy cspell

676990f

LetItRock temporarily deployed to Linting November 1, 2024 22:26 — with GitHub Actions Inactive

LetItRock merged commit 96889c1 into next Nov 1, 2024
35 of 40 checks passed

LetItRock deleted the nv-4556-in-app-editor-codemirror-fields branch November 1, 2024 23:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

LetItRock commented Oct 30, 2024

linear bot commented Oct 30, 2024

netlify bot commented Oct 30, 2024 •

edited

Loading

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

SokratisVidros Nov 1, 2024

LetItRock Nov 1, 2024

LetItRock Oct 30, 2024

LetItRock Oct 30, 2024

pkg-pr-new bot commented Oct 30, 2024 •

edited

Loading

SokratisVidros left a comment

SokratisVidros left a comment

SokratisVidros Nov 1, 2024

		const [subject, setSubject] = useState('');
		const [body, setBody] = useState('');

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

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

Conversation

LetItRock commented Oct 30, 2024

What changed? Why was the change needed?

Screenshots

linear bot commented Oct 30, 2024

netlify bot commented Oct 30, 2024 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pkg-pr-new bot commented Oct 30, 2024 • edited Loading

SokratisVidros left a comment

Choose a reason for hiding this comment

SokratisVidros left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Oct 30, 2024 •

edited

Loading

pkg-pr-new bot commented Oct 30, 2024 •

edited

Loading