feat: edit html code

TeamVastsea · Sep 21, 2024 · 1549f78 · 1549f78
1 parent 36da1d8
commit 1549f78
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 14 deletions.
diff --git a/components/ClickToEdit.tsx b/components/ClickToEdit.tsx
@@ -1,14 +1,51 @@
 'use client';
 
-import { RichTextEditor, Link } from '@mantine/tiptap';
+import { Link, RichTextEditor, useRichTextEditorContext } from '@mantine/tiptap';
 import { useEditor } from '@tiptap/react';
 import Highlight from '@tiptap/extension-highlight';
 import StarterKit from '@tiptap/starter-kit';
 import Underline from '@tiptap/extension-underline';
 import TextAlign from '@tiptap/extension-text-align';
 import Superscript from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
-import { useFocusWithin } from '@mantine/hooks';
+import { useDisclosure, useFocusWithin } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useState } from 'react';
+import { Button, Modal, Stack, Textarea } from '@mantine/core';
+
+function EditHtmlControl() {
+    const { editor } = useRichTextEditorContext();
+    const [content, setContent] = useState<string>('');
+    const [opened, { open, close }] = useDisclosure(false);
+
+    function onEdit() {
+        editor?.setEditable(false);
+        setContent(editor?.getHTML() || '');
+        open();
+    }
+
+    function saveEdit() {
+        close();
+        editor?.commands.setContent(content);
+        editor?.setEditable(true);
+    }
+
+    return (
+        <>
+            <RichTextEditor.Control
+              onClick={onEdit}
+            >
+                <IconEdit stroke={1.5} size="1rem" />
+            </RichTextEditor.Control>
+            <Modal title="编辑HTML" opened={opened} onClose={() => { editor?.setEditable(true); close(); }} centered withCloseButton={false}>
+                <Stack>
+                    <Textarea value={content} onChange={(e) => setContent(e.target.value)} resize="vertical" mt="mt" />
+                    <Button onClick={saveEdit}>保存</Button>
+                </Stack>
+            </Modal>
+        </>
+    );
+}
 
 export default function ClickToEdit(props: ClickToEditProps) {
     const { ref, focused } = useFocusWithin({ onBlur: save });
@@ -39,54 +76,52 @@ export default function ClickToEdit(props: ClickToEditProps) {
     return (
         <>
             <RichTextEditor editor={editor} w={props.w} ref={ref}>
-                {shouldShowBar() &&
+                {shouldShowBar() && (
                     <RichTextEditor.Toolbar sticky stickyOffset={60}>
                         <RichTextEditor.ControlsGroup>
                             <RichTextEditor.Bold />
                             <RichTextEditor.Italic />
                             <RichTextEditor.Underline />
                             <RichTextEditor.Strikethrough />
-                            <RichTextEditor.ClearFormatting />
                             <RichTextEditor.Highlight />
-                            <RichTextEditor.Code />
                         </RichTextEditor.ControlsGroup>
 
                         <RichTextEditor.ControlsGroup>
                             <RichTextEditor.H1 />
                             <RichTextEditor.H2 />
                             <RichTextEditor.H3 />
-                            <RichTextEditor.H4 />
                         </RichTextEditor.ControlsGroup>
 
                         <RichTextEditor.ControlsGroup>
                             <RichTextEditor.Blockquote />
                             <RichTextEditor.Hr />
                             <RichTextEditor.BulletList />
                             <RichTextEditor.OrderedList />
-                            <RichTextEditor.Subscript />
-                            <RichTextEditor.Superscript />
                         </RichTextEditor.ControlsGroup>
 
-                        {
-                            props.alwaysShowBar &&
+                        {props.alwaysShowBar && (
                             <RichTextEditor.ControlsGroup>
                                 <RichTextEditor.Link />
                                 <RichTextEditor.Unlink />
                             </RichTextEditor.ControlsGroup>
-                        }
+                        )}
 
                         <RichTextEditor.ControlsGroup>
                             <RichTextEditor.AlignLeft />
                             <RichTextEditor.AlignCenter />
-                            <RichTextEditor.AlignJustify />
                             <RichTextEditor.AlignRight />
                         </RichTextEditor.ControlsGroup>
 
                         <RichTextEditor.ControlsGroup>
                             <RichTextEditor.Undo />
                             <RichTextEditor.Redo />
                         </RichTextEditor.ControlsGroup>
-                    </RichTextEditor.Toolbar>}
+
+                        <RichTextEditor.ControlsGroup>
+                            <EditHtmlControl />
+                        </RichTextEditor.ControlsGroup>
+                    </RichTextEditor.Toolbar>
+                )}
                 <RichTextEditor.Content />
             </RichTextEditor>
         </>

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.