mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: init new editor design
This commit is contained in:
swve
parent
d361e68dc0
commit
f349378ff9
15 changed files with 264 additions and 136 deletions
|
|
@ -4,19 +4,28 @@ import StarterKit from "@tiptap/starter-kit";
|
|||
import Collaboration from "@tiptap/extension-collaboration";
|
||||
import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
|
||||
import { AuthContext } from "../Security/AuthProvider";
|
||||
import learnhouseIcon from "public/learnhouse_icon.png";
|
||||
import { ToolbarButtons } from "./Toolbar/ToolbarButtons";
|
||||
import Image from "next/image";
|
||||
import styled from "styled-components";
|
||||
import { getBackendUrl } from "../../services/config";
|
||||
import { RocketIcon, SlashIcon, TriangleLeftIcon, TriangleRightIcon } from "@radix-ui/react-icons";
|
||||
|
||||
interface Editor {
|
||||
content: string;
|
||||
ydoc: any;
|
||||
provider: any;
|
||||
element: any;
|
||||
course: any;
|
||||
setContent: (content: string) => void;
|
||||
}
|
||||
|
||||
function Editor(props: Editor) {
|
||||
const auth: any = React.useContext(AuthContext);
|
||||
console.log(props.element);
|
||||
console.log(props.course);
|
||||
|
||||
const editor : any = useEditor({
|
||||
const editor: any = useEditor({
|
||||
extensions: [
|
||||
StarterKit.configure({
|
||||
// The Collaboration extension comes with its own history handling
|
||||
|
|
@ -41,12 +50,131 @@ function Editor(props: Editor) {
|
|||
|
||||
return (
|
||||
<div>
|
||||
File <button onClick={() => props.setContent(editor.getJSON())}>save</button>
|
||||
<br /><hr />
|
||||
<ToolbarButtons editor={editor} />
|
||||
<EditorContent editor={editor} style={{ backgroundColor: "white" }} />
|
||||
<EditorTop>
|
||||
<EditorDocSection>
|
||||
<EditorInfoWrapper>
|
||||
<EditorInfoLearnHouseLogo width={23} height={23} src={learnhouseIcon} alt="" />
|
||||
<EditorInfoThumbnail src={`${getBackendUrl()}content/uploads/img/${props.course.course.thumbnail}`} alt=""></EditorInfoThumbnail>
|
||||
<EditorInfoDocName>
|
||||
{" "}
|
||||
<b>{props.course.course.name}</b> <SlashIcon /> {props.element.name}{" "}
|
||||
</EditorInfoDocName>
|
||||
<EditorSaveButton onClick={() => props.setContent(editor.getJSON())}>
|
||||
<RocketIcon></RocketIcon>
|
||||
</EditorSaveButton>
|
||||
</EditorInfoWrapper>
|
||||
<EditorButtonsWrapper>
|
||||
<ToolbarButtons editor={editor} />
|
||||
</EditorButtonsWrapper>
|
||||
</EditorDocSection>
|
||||
<EditorUsersSection></EditorUsersSection>
|
||||
</EditorTop>
|
||||
<EditorContentWrapper>
|
||||
<EditorContent editor={editor} />
|
||||
</EditorContentWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const EditorTop = styled.div`
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
margin: 40px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
// Inside EditorTop
|
||||
const EditorDocSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
const EditorUsersSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
// Inside EditorDocSection
|
||||
const EditorInfoWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
const EditorButtonsWrapper = styled.div``;
|
||||
|
||||
// Inside EditorUsersSection
|
||||
const EditorUserProfileWrapper = styled.div``;
|
||||
|
||||
// Inside EditorInfoWrapper
|
||||
//..todo
|
||||
const EditorInfoLearnHouseLogo = styled(Image)`
|
||||
border-radius: 6px;
|
||||
margin-right: 15px;
|
||||
`;
|
||||
const EditorInfoDocName = styled.div`
|
||||
font-size: 16px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
|
||||
svg {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
color: #909090;
|
||||
}
|
||||
`;
|
||||
|
||||
const EditorSaveButton = styled.div`
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
font-size: 5px;
|
||||
margin-right: 5px;
|
||||
margin-left: 7px;
|
||||
|
||||
&.is-active {
|
||||
background: rgba(176, 176, 176, 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba(139, 139, 139, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(217, 217, 217, 0.48);
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const EditorInfoThumbnail = styled.img`
|
||||
height: 25px;
|
||||
width: 56px;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
border-radius: 7px;
|
||||
margin-left: 5px;
|
||||
`;
|
||||
|
||||
const EditorContentWrapper = styled.div`
|
||||
margin: 40px;
|
||||
background-color: white;
|
||||
|
||||
// disable chrome outline
|
||||
|
||||
|
||||
.ProseMirror {
|
||||
padding: 10px;
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
outline-style: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export default Editor;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { updateElement } from "../../services/courses/elements";
|
|||
interface EditorWrapperProps {
|
||||
content: string;
|
||||
element: any;
|
||||
course:any
|
||||
}
|
||||
|
||||
function EditorWrapper(props: EditorWrapperProps) {
|
||||
|
|
@ -18,7 +19,6 @@ function EditorWrapper(props: EditorWrapperProps) {
|
|||
|
||||
function createRTCProvider() {
|
||||
const provider = new WebrtcProvider(props.element.element_id, ydoc);
|
||||
|
||||
setYdocState(ydoc);
|
||||
setProviderState(provider);
|
||||
setIsLoading(false);
|
||||
|
|
@ -28,12 +28,13 @@ function EditorWrapper(props: EditorWrapperProps) {
|
|||
let element = props.element;
|
||||
element.content = content;
|
||||
const res = await updateElement(element, element.element_id);
|
||||
alert(JSON.stringify(res));
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
createRTCProvider();
|
||||
} else {
|
||||
return <Editor content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
|
||||
return <Editor course={props.course} element={props.element} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,99 +1,82 @@
|
|||
export const ToolbarButtons = ({ editor }: any) => {
|
||||
if (!editor) {
|
||||
return null;
|
||||
}
|
||||
import styled from "styled-components";
|
||||
import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
|
||||
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export const ToolbarButtons = ({ editor }: any) => {
|
||||
if (!editor) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolButtonsWrapper>
|
||||
<ToolBtn onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive("bold") ? "is-active" : ""}>
|
||||
<FontBoldIcon />
|
||||
</ToolBtn>
|
||||
<ToolBtn onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive("italic") ? "is-active" : ""}>
|
||||
<FontItalicIcon />
|
||||
</ToolBtn>
|
||||
<ToolBtn onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}>
|
||||
<StrikethroughIcon />
|
||||
</ToolBtn>
|
||||
|
||||
<ToolBtn onClick={() => editor.chain().focus().undo().run()}>
|
||||
<ArrowLeftIcon />
|
||||
</ToolBtn>
|
||||
<ToolBtn onClick={() => editor.chain().focus().redo().run()}>
|
||||
<ArrowRightIcon />
|
||||
</ToolBtn>
|
||||
<ToolSelect onChange={(e) => editor.chain().focus().toggleHeading({ level: parseInt(e.target.value) }).run() }>
|
||||
<option value="1">Heading 1</option>
|
||||
<option value="2">Heading 2</option>
|
||||
<option value="3">Heading 3</option>
|
||||
<option value="4">Heading 4</option>
|
||||
<option value="5">Heading 5</option>
|
||||
<option value="6">Heading 6</option>
|
||||
</ToolSelect>
|
||||
</ToolButtonsWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
const ToolButtonsWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: left;
|
||||
justify-content: left;
|
||||
`;
|
||||
|
||||
const ToolBtn = styled.div`
|
||||
display: flex;
|
||||
background: rgba(217, 217, 217, 0.24);
|
||||
border-radius: 6px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
font-size: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
&.is-active {
|
||||
background: rgba(176, 176, 176, 0.5);
|
||||
|
||||
&:hover {
|
||||
background: rgba(139, 139, 139, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(217, 217, 217, 0.48);
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const ToolSelect = styled.select`
|
||||
display: flex;
|
||||
background: rgba(217, 217, 217, 0.24);
|
||||
border-radius: 6px;
|
||||
width: 100px;
|
||||
border: none;
|
||||
height: 25px;
|
||||
padding: 5px;
|
||||
font-size: 11px;
|
||||
font-family: "DM Sans";
|
||||
margin-right: 5px;
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue