From 40c5262a9c2fcb8c89d7c464ccfdc3016f933eb3 Mon Sep 17 00:00:00 2001 From: Giuseppe Date: Sat, 21 Dec 2024 14:09:30 +0100 Subject: feature: WYSIWYG markdown for notes. Fixes #701 (#715) * #701 Improve note support : WYSIWYG markdown First implementation with a wysiwyg markdown editor. Update: - Add Lexical markdown editor - consistent rendering between card and preview - removed edit modal, replaced by preview with save action - simple markdown shortcut: underline, bold, italic etc... * #701 Improve note support : WYSIWYG markdown improved performance to not rerender all note card when one is updated * Use markdown shortcuts * Remove the alignment actions * Drop history buttons * Fix code and highlighting buttons * Remove the unneeded update markdown plugin * Remove underline support as it's not markdown native * - added ListPlugin because if absent, there's a bug where you can't escape a list with enter + enter - added codeblock plugin - added prose dark:prose-invert prose-p:m-0 like you said (there's room for improvement I think, don't took the time too deep dive in) and removed theme - Added a switch to show raw markdown - Added back the react markdown for card (SSR) * delete theme.ts * add theme back for code element to be more like prism theme from markdown-readonly * move the new editor back to the edit menu * move the bookmark markdown component into dashboard/bookmark * move the tooltip into its own component * move save button to toolbar * Better raw markdown --------- Co-authored-by: Giuseppe Lapenta Co-authored-by: Mohamed Bassem --- apps/web/components/ui/markdown/theme.ts | 35 ++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 apps/web/components/ui/markdown/theme.ts (limited to 'apps/web/components/ui/markdown/theme.ts') diff --git a/apps/web/components/ui/markdown/theme.ts b/apps/web/components/ui/markdown/theme.ts new file mode 100644 index 00000000..ff088e32 --- /dev/null +++ b/apps/web/components/ui/markdown/theme.ts @@ -0,0 +1,35 @@ +export const MarkdownEditorTheme = { + code: "bg-[#282A36] text-[#F8F8F2] font-mono block px-4 py-2 my-2 text-sm overflow-x-auto relative rounded-md shadow-sm", + codeHighlight: { + atrule: "text-[#8BE9FD]", + attr: "text-[#8BE9FD]", + boolean: "text-[#FF79C6]", + builtin: "text-[#50FA7B]", + cdata: "text-[#6272A4]", + char: "text-[#50FA7B]", + class: "text-[#FF79C6]", + "class-name": "text-[#FF79C6]", + comment: "text-[#6272A4]", + constant: "text-[#FF79C6]", + deleted: "text-[#FF5555]", + doctype: "text-[#6272A4]", + entity: "text-[#FFB86C]", + function: "text-[#50FA7B]", + important: "text-[#F1FA8C]", + inserted: "text-[#50FA7B]", + keyword: "text-[#FF79C6]", + namespace: "text-[#F1FA8C]", + number: "text-[#BD93F9]", + operator: "text-[#FFB86C]", + prolog: "text-[#6272A4]", + property: "text-[#FFB86C]", + punctuation: "text-[#F8F8F2]", + regex: "text-[#FF5555]", + selector: "text-[#50FA7B]", + string: "text-[#F1FA8C]", + symbol: "text-[#FF79C6]", + tag: "text-[#FF79C6]", + url: "text-[#8BE9FD]", + variable: "text-[#F1FA8C]", + }, +}; -- cgit v1.2.3-70-g09d2