rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init youtube editor extension

Browse source
This commit is contained in:
swve 2022-12-14 00:08:46 +01:00
parent 5eb9101084
commit 8d0efdb93e
5 changed files with 68 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

22
front/components/Editor/Editor.tsx
View file

@ -16,6 +16,7 @@ import Avvvatars from "avvvatars-react";
import InfoCallout from "./Extensions/Callout/Info/InfoCallout";
import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
import ImageBlock from "./Extensions/Image/ImageBlock";
import Youtube from "@tiptap/extension-youtube";
interface Editor {
content: string;
@ -31,7 +32,7 @@ function Editor(props: Editor) {
const editor: any = useEditor({
editable: true,
extensions: [
StarterKit.configure({
// The Collaboration extension comes with its own history handling
@ -45,7 +46,11 @@ function Editor(props: Editor) {
}),
ImageBlock.configure({
editable: true,
element: props.element
element: props.element,
}),
Youtube.configure({
controls: true,
modestBranding: true,
}),
// Register the document with Tiptap
// Collaboration.configure({
@ -238,7 +243,7 @@ const EditorInfoThumbnail = styled.img`
}
`;
const EditorContentWrapper = styled.div`
export const EditorContentWrapper = styled.div`
margin: 40px;
margin-top: 90px;
background-color: white;
@ -259,6 +264,17 @@ const EditorContentWrapper = styled.div`
box-shadow: none !important;
}
}
iframe {
border-radius: 6px;
border: none;
min-width: 200px;
width: 100%;
height: 440px;
min-height: 200px;
display: block;
outline: 0px solid transparent;
}
`;
export default Editor;