|
@@ -1,7 +1,182 @@
|
|
-import React from 'react'
|
|
|
|
-const Agent = ({node}) => {
|
|
|
|
|
|
+import { useReducerAtom } from 'jotai/utils'
|
|
|
|
+import { EditorProvider, EditorContent, useCurrentEditor, BubbleMenu, useEditor } from "@tiptap/react";
|
|
|
|
+import StarterKit from "@tiptap/starter-kit";
|
|
|
|
+import React, { useMemo } from 'react'
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const MenuBar = ({ editor }) => {
|
|
return (
|
|
return (
|
|
- <div className="">agent card {JSON.stringify(node)}</div>
|
|
|
|
|
|
+ <div className="join bubble-menu">
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleBold().run()}
|
|
|
|
+ disabled={!editor.can().chain().focus().toggleBold().run()}
|
|
|
|
+ className={editor.isActive("bold") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ bold
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleItalic().run()}
|
|
|
|
+ disabled={!editor.can().chain().focus().toggleItalic().run()}
|
|
|
|
+ className={editor.isActive("italic") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ italic
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleStrike().run()}
|
|
|
|
+ disabled={!editor.can().chain().focus().toggleStrike().run()}
|
|
|
|
+ className={editor.isActive("strike") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ strike
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleCode().run()}
|
|
|
|
+ disabled={!editor.can().chain().focus().toggleCode().run()}
|
|
|
|
+ className={editor.isActive("code") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ code
|
|
|
|
+ </button>
|
|
|
|
+ <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
|
|
|
+ clear marks
|
|
|
|
+ </button>
|
|
|
|
+ <button onClick={() => editor.chain().focus().clearNodes().run()}>
|
|
|
|
+ clear nodes
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().setParagraph().run()}
|
|
|
|
+ className={editor.isActive("paragraph") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ paragraph
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
|
|
|
+ className={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ h1
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
|
|
|
+ className={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ h2
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
|
|
|
+ className={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ h3
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
|
|
|
|
+ className={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ h4
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
|
|
|
|
+ className={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ h5
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
|
|
|
|
+ className={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ h6
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleBulletList().run()}
|
|
|
|
+ className={editor.isActive("bulletList") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ bullet list
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
|
|
|
+ className={editor.isActive("orderedList") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ ordered list
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
|
|
|
+ className={editor.isActive("codeBlock") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ code block
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
|
|
|
+ className={editor.isActive("blockquote") ? "is-active" : ""}
|
|
|
|
+ >
|
|
|
|
+ blockquote
|
|
|
|
+ </button>
|
|
|
|
+ <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
|
|
|
|
+ horizontal rule
|
|
|
|
+ </button>
|
|
|
|
+ <button onClick={() => editor.chain().focus().setHardBreak().run()}>
|
|
|
|
+ hard break
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().undo().run()}
|
|
|
|
+ disabled={!editor.can().chain().focus().undo().run()}
|
|
|
|
+ >
|
|
|
|
+ undo
|
|
|
|
+ </button>
|
|
|
|
+ <button
|
|
|
|
+ onClick={() => editor.chain().focus().redo().run()}
|
|
|
|
+ disabled={!editor.can().chain().focus().redo().run()}
|
|
|
|
+ >
|
|
|
|
+ redo
|
|
|
|
+ </button>
|
|
|
|
+ {/* <button
|
|
|
|
+ onClick={() => editor.chain().focus().setColor("#958DF1").run()}
|
|
|
|
+ className={
|
|
|
|
+ editor.isActive("textStyle", { color: "#958DF1" }) ? "is-active" : ""
|
|
|
|
+ }
|
|
|
|
+ >
|
|
|
|
+ purple
|
|
|
|
+ </button> */}
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const Agent = ({ node, cardInstantAtom }) => {
|
|
|
|
+
|
|
|
|
+ const dataReducer = (prev, payload) => {
|
|
|
|
+ return { ...prev, ...payload }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const [cardInstantData, dispatchCardInstantData] = useReducerAtom(cardInstantAtom, dataReducer)
|
|
|
|
+
|
|
|
|
+ const content = useMemo(() => {
|
|
|
|
+ return cardInstantData?.content
|
|
|
|
+ }, [cardInstantData, cardInstantData?.content])
|
|
|
|
+
|
|
|
|
+ const editor = useEditor({
|
|
|
|
+ extensions: [
|
|
|
|
+ StarterKit,
|
|
|
|
+ ],
|
|
|
|
+ editorProps: {
|
|
|
|
+ attributes: {
|
|
|
|
+ class: 'prose prose-sm sm:prose mx-auto focus:outline-none',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ content,
|
|
|
|
+ onUpdate: () => {
|
|
|
|
+ dispatchCardInstantData({ content: editor?.getHTML() })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ if (!editor) {
|
|
|
|
+ return null;
|
|
|
|
+ }
|
|
|
|
+ return (
|
|
|
|
+ <div>
|
|
|
|
+ {/* {editor && <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
|
|
|
|
+ <MenuBar editor={editor} />
|
|
|
|
+ </BubbleMenu>} */}
|
|
|
|
+ <EditorContent
|
|
|
|
+ editor={editor}
|
|
|
|
+ >
|
|
|
|
+ </EditorContent>
|
|
|
|
+ </div>
|
|
)
|
|
)
|
|
}
|
|
}
|
|
export default React.memo(Agent)
|
|
export default React.memo(Agent)
|