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: add warning custom extension

Browse source
This commit is contained in:
swve 2022-12-08 10:31:43 +01:00
parent fe8fdd1769
commit 88644ad902
6 changed files with 99 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

5
front/components/Canva/Canva.tsx
View file

@ -3,6 +3,7 @@ import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
// Custom Extensions
import InfoCallout from "../Editor/Extensions/Callout/Info/InfoCallout";
import WarningCallout from "../Editor/Extensions/Callout/Warning/WarningCallout";
interface Editor {
content: string;
@ -16,11 +17,13 @@ function Canva(props: Editor) {
editable: isEditable,
extensions: [
StarterKit,
// Custom Extensions
InfoCallout.configure({
editable: isEditable,
}),
WarningCallout.configure({
editable: isEditable,
}),
],
content: props.content,

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

@ -14,6 +14,7 @@ import { SlashIcon } from "@radix-ui/react-icons";
import Avvvatars from "avvvatars-react";
// extensions
import InfoCallout from "./Extensions/Callout/Info/InfoCallout";
import WarningCallout from "./Extensions/Callout/Warning/WarningCallout";
interface Editor {
content: string;
@ -37,6 +38,9 @@ function Editor(props: Editor) {
InfoCallout.configure({
editable: true,
}),
WarningCallout.configure({
editable: true,
}),
// Register the document with Tiptap
// Collaboration.configure({
// document: props.ydoc,

14
front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx
View file

@ -1,4 +1,5 @@
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { AlertCircle } from "lucide-react";
import React from "react";
import styled from "styled-components";
@ -6,7 +7,7 @@ function InfoCalloutComponent(props: any) {
return (
<NodeViewWrapper>
<InfoCalloutWrapper contentEditable={props.extension.options.editable}>
<div>⚠️ </div> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
<AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
</InfoCalloutWrapper>
</NodeViewWrapper>
);
@ -15,19 +16,22 @@ function InfoCalloutComponent(props: any) {
const InfoCalloutWrapper = styled.div`
display: flex;
flex-direction: row;
background: #fefce8;
color: #713f11;
border: 1px solid #fff103;
color: #1f3a8a;
background-color: #dbe9fe;
border: 1px solid #c1d9fb;
border-radius: 16px;
margin: 1rem 0;
align-items: center;
padding-left: 15px;
svg{
padding: 3px;
}
.content {
margin: 5px;
padding: 0.5rem;
border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
border: ${(props) => (props.contentEditable ? "2px dashed #1f3a8a12" : "none")};
border-radius: 0.5rem;
}
`;

27
front/components/Editor/Extensions/Callout/Warning/WarningCallout.ts Normal file
View file

@ -0,0 +1,27 @@
import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import WarningCalloutComponent from "./WarningCalloutComponent";
export default Node.create({
name: "calloutWarning",
group: "block",
draggable: true,
content: "inline*",
parseHTML() {
return [
{
tag: "callout-warning",
},
];
},
renderHTML({ HTMLAttributes }) {
return ["callout-info", mergeAttributes(HTMLAttributes), 0];
},
addNodeView() {
return ReactNodeViewRenderer(WarningCalloutComponent);
},
});

49
front/components/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx Normal file
View file

@ -0,0 +1,49 @@
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { AlertTriangle } from "lucide-react";
import React from "react";
import styled from "styled-components";
function WarningCalloutComponent(props: any) {
return (
<NodeViewWrapper>
<CalloutWrapper contentEditable={props.extension.options.editable}>
<AlertTriangle/> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
</CalloutWrapper>
</NodeViewWrapper>
);
}
const CalloutWrapper = styled.div`
display: flex;
flex-direction: row;
background: #fefce8;
color: #713f11;
border: 1px solid #fff103;
border-radius: 16px;
margin: 1rem 0;
align-items: center;
padding-left: 15px;
svg {
padding: 3px;
}
.content {
margin: 5px;
padding: 0.5rem;
border: ${(props) => (props.contentEditable ? "2px dashed #713f1117" : "none")};
border-radius: 0.5rem;
}
`;
const DragHandle = styled.div`
position: absolute;
top: 0;
left: 0;
width: 1rem;
height: 100%;
cursor: move;
z-index: 1;
`;
export default WarningCalloutComponent;

7
front/components/Editor/Toolbar/ToolbarButtons.tsx
View file

@ -1,6 +1,6 @@
import styled from "styled-components";
import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon } from "@radix-ui/react-icons";
import { AlertTriangle, Info } from "lucide-react";
import { AlertCircle, AlertTriangle, Info } from "lucide-react";
export const ToolbarButtons = ({ editor }: any) => {
if (!editor) {
@ -33,9 +33,12 @@ export const ToolbarButtons = ({ editor }: any) => {
<option value="6">Heading 6</option>
</ToolSelect>
{/* TODO: fix this : toggling only works one-way */}
<ToolBtn onClick={() => editor.chain().focus().toggleNode('calloutInfo').run()} >
<ToolBtn onClick={() => editor.chain().focus().toggleNode('calloutWarning').run()} >
<AlertTriangle size={15} />
</ToolBtn>
<ToolBtn onClick={() => editor.chain().focus().toggleNode('calloutInfo').run()} >
<AlertCircle size={15} />
</ToolBtn>
</ToolButtonsWrapper>
);
};