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 pictures extension to editor and canva

Browse source
This commit is contained in:
swve 2022-12-13 18:18:51 +01:00
parent 643d4ae2e7
commit 5eb9101084
11 changed files with 243 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

31
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 { AlertCircle, AlertTriangle, Info } from "lucide-react";
import { AlertCircle, AlertTriangle, ImagePlus, Info } from "lucide-react";
export const ToolbarButtons = ({ editor }: any) => {
if (!editor) {
@ -24,7 +24,15 @@ export const ToolbarButtons = ({ editor }: any) => {
<ToolBtn onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive("strike") ? "is-active" : ""}>
<StrikethroughIcon />
</ToolBtn>
<ToolSelect onChange={(e) => editor.chain().focus().toggleHeading({ level: parseInt(e.target.value) }).run() }>
<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>
@ -33,12 +41,25 @@ 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('calloutWarning').run()} >
<ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutWarning").run()}>
<AlertTriangle size={15} />
</ToolBtn>
<ToolBtn onClick={() => editor.chain().focus().toggleNode('calloutInfo').run()} >
<ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutInfo").run()}>
<AlertCircle size={15} />
</ToolBtn>
<ToolBtn
onClick={() =>
editor
.chain()
.focus()
.insertContent({
type: "blockImage",
})
.run()
}
>
<ImagePlus size={15} />
</ToolBtn>
</ToolButtonsWrapper>
);
};
@ -60,7 +81,7 @@ const ToolBtn = styled.div`
margin-right: 5px;
transition: all 0.2s ease-in-out;
svg{
svg {
padding: 1px;
}