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 info callout custom extension

Browse source
This commit is contained in:
swve 2022-12-08 10:12:46 +01:00
parent e6ebd195d7
commit fe8fdd1769
10 changed files with 163 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import styled from "styled-components";
import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon } from "@radix-ui/react-icons";
import { AlertTriangle, Info } from "lucide-react";
export const ToolbarButtons = ({ editor }: any) => {
if (!editor) {
@ -31,6 +32,10 @@ export const ToolbarButtons = ({ editor }: any) => {
<option value="5">Heading 5</option>
<option value="6">Heading 6</option>
</ToolSelect>
{/* TODO: fix this : toggling only works one-way */}
<ToolBtn onClick={() => editor.chain().focus().toggleNode('calloutInfo').run()} >
<AlertTriangle size={15} />
</ToolBtn>
</ToolButtonsWrapper>
);
};
@ -49,10 +54,13 @@ const ToolBtn = styled.div`
width: 25px;
height: 25px;
padding: 5px;
font-size: 5px;
margin-right: 5px;
transition: all 0.2s ease-in-out;
svg{
padding: 1px;
}
&.is-active {
background: rgba(176, 176, 176, 0.5);