fix: wysiwyg list styling & add source mode for markdown copy & paste (…

…#1819) * fix: wysiwyg list styling & add source mode for markdown copy & paste * Update markdown.css
obot-platform · Feb 21, 2025 · 59bf122 · 59bf122
1 parent b841604
commit 59bf122
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 14 deletions.
diff --git a/ui/admin/app/components/ui/markdown.css b/ui/admin/app/components/ui/markdown.css
@@ -1,13 +1,17 @@
-[class*="_selectTrigger"] {
-	@apply bg-transparent text-foreground;
+[class*="_selectTrigger"],
+.cm-gutters,
+.cm-gutterElement {
+	@apply bg-transparent text-muted-foreground;
 }
 [class*="_linkDialogPopoverContent"],
 [class*="_dialogContent"],
+.mdxeditor-diff-source-wrapper .cm-editor,
 .mdxeditor-select-content {
 	@apply bg-background;
 }
-.mdxeditor-toolbar {
-	@apply bg-background-secondary;
+.mdxeditor-toolbar,
+.cm-activeLineGutter {
+	@apply !bg-background-secondary;
 }
 .mdxeditor-popup-container input {
 	@apply bg-background;
@@ -18,3 +22,12 @@
 [class*="_secondaryButton"] {
 	@apply relative inline-flex h-9 items-center justify-center gap-2 whitespace-nowrap rounded-full border-0 bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-colors hover:bg-secondary/80 hover:shadow-inner focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
 }
+.mdxeditor ul {
+	@apply list-disc px-4;
+}
+.mdxeditor ol {
+	@apply list-decimal px-4;
+}
+.mdxeditor-source-editor {
+	@apply max-h-[300px] overflow-auto;
+}
diff --git a/ui/admin/app/components/ui/markdown.tsx b/ui/admin/app/components/ui/markdown.tsx
@@ -1,16 +1,20 @@
 import {
 	BlockTypeSelect,
 	BoldItalicUnderlineToggles,
-	CodeToggle,
+	ChangeCodeMirrorLanguage,
+	ConditionalContents,
 	CreateLink,
+	DiffSourceToggleWrapper,
+	InsertCodeBlock,
 	InsertImage,
 	ListsToggle,
 	MDXEditor,
 	MDXEditorMethods,
 	Separator,
-	StrikeThroughSupSubToggles,
 	UndoRedo,
 	codeBlockPlugin,
+	codeMirrorPlugin,
+	diffSourcePlugin,
 	headingsPlugin,
 	imagePlugin,
 	linkDialogPlugin,
@@ -94,13 +98,23 @@ export function MarkdownEditor({
 	const [isExpanded, setIsExpanded] = useState(false);
 
 	useEffect(() => {
-		if (ref.current) {
+		if (ref.current && ref.current.getMarkdown() !== markdown) {
 			ref.current.setMarkdown(markdown);
 		}
 	}, [markdown]);
 
+	const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
+		event.stopPropagation();
+		const text = event.clipboardData.getData("text/plain");
+		ref.current?.insertMarkdown(text);
+		onChange(`${markdown}\n${text}`);
+	};
+
 	return (
-		<div onFocusCapture={() => setIsExpanded(true)}>
+		<div
+			onFocusCapture={() => setIsExpanded(true)}
+			onPasteCapture={handlePaste}
+		>
 			<MDXEditor
 				ref={ref}
 				className={cn(
@@ -118,21 +132,34 @@ export function MarkdownEditor({
 				plugins={[
 					toolbarPlugin({
 						toolbarContents: () => (
-							<>
+							<DiffSourceToggleWrapper>
 								<UndoRedo />
 								<Separator />
 								<BoldItalicUnderlineToggles />
-								<CodeToggle />
-								<Separator />
-								<StrikeThroughSupSubToggles />
+								<ConditionalContents
+									options={[
+										{
+											when: (editor) => editor?.editorType === "codeblock",
+											contents: () => <ChangeCodeMirrorLanguage />,
+										},
+										{
+											fallback: () => (
+												<>
+													<InsertCodeBlock />
+												</>
+											),
+										},
+									]}
+								/>
 								<Separator />
 								<ListsToggle />
 								<Separator />
 								<BlockTypeSelect />
 								<Separator />
 								<CreateLink />
 								<InsertImage />
-							</>
+								<Separator />
+							</DiffSourceToggleWrapper>
 						),
 					}),
 					headingsPlugin(),
@@ -143,9 +170,16 @@ export function MarkdownEditor({
 					listsPlugin(),
 					thematicBreakPlugin(),
 					markdownShortcutPlugin(),
-					codeBlockPlugin({ defaultCodeBlockLanguage: "txt" }),
+					codeBlockPlugin({ defaultCodeBlockLanguage: "js" }),
+					codeMirrorPlugin({
+						codeBlockLanguages: { js: "JavaScript", css: "CSS" },
+					}),
 					quotePlugin(),
+					diffSourcePlugin({
+						readOnlyDiff: true,
+					}),
 				]}
+				suppressHtmlProcessing
 			/>
 		</div>
 	);