feat: add warning custom extension

front/components/Canva/Canva.tsx

@@ -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,

front/components/Editor/Editor.tsx

@@ -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,

front/components/Editor/Extensions/Callout/Info/InfoCalloutComponent.tsx

@@ -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: #1f3a8a;
-  color: #713f11;
+    background-color: #dbe9fe;
-  border: 1px solid #fff103;
+  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;
   }
 `;

front/components/Editor/Extensions/Callout/Warning/WarningCallout.ts

@@ -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);
+  },
+});

front/components/Editor/Extensions/Callout/Warning/WarningCalloutComponent.tsx

@@ -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;

front/components/Editor/Toolbar/ToolbarButtons.tsx

@@ -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>
   );
 };