118 |
145 | {pagesAfterFilter.map((page) => (
146 |
155 | {editorInfo.show && editorInfo.pageName && (
156 |
166 |
119 |
139 |
120 | setFilterInput(e.target.value)}
123 | placeholder="Filter drawings..."
124 | />
125 |
138 |
157 | setEditorInfo({ show: false })}
162 | />
163 |
164 | )}
165 |
32 |
38 | logseq.hideMainUI()}
35 | >
36 |
20 |
26 | );
27 | };
28 |
29 | export default PreviewApp;
30 |
--------------------------------------------------------------------------------
/src/bootstrap/command.ts:
--------------------------------------------------------------------------------
1 | import { createDrawing } from '@/lib/utils'
2 | import getI18N from '@/locales'
3 |
4 | const bootCommand = () => {
5 | const { createDrawing: i18nCreateDrawing } = getI18N()
6 | // slash command: create excalidraw
7 | logseq.Editor.registerSlashCommand(i18nCreateDrawing.tag, async ({ uuid }) => {
8 | const drawingPage = await createDrawing()
9 | if (!drawingPage) return
10 | logseq.Editor.updateBlock(uuid, `{{renderer excalidraw, ${drawingPage.fileName}}}`)
11 | })
12 | }
13 |
14 | export default bootCommand
15 |
--------------------------------------------------------------------------------
/src/bootstrap/excalidrawLibraryItems.ts:
--------------------------------------------------------------------------------
1 | import type { LibraryItems } from '@excalidraw/excalidraw/types/types'
2 |
3 | import { DEFAULT_EXCALIDRAW_LIBRARY_ITEMS, EXCALIDRAW_FILE_PROMPT } from '@/lib/constants'
4 | import { genBlockData, getExcalidrawData } from '@/lib/utils'
5 |
6 | const PAGE_NAME = 'excalidraw-library-items-storage'
7 | /**
8 | * initialize the page sorted in the excalidraw library items
9 | */
10 | const bootExcalidrawLibraryItems = async () => {
11 | const page = await logseq.Editor.getPage(PAGE_NAME)
12 | if (page) return
13 |
14 | await logseq.Editor.createPage(
15 | PAGE_NAME,
16 | { 'excalidraw-plugin-library': 'true' },
17 | { format: 'markdown', redirect: false },
18 | )
19 | await logseq.Editor.appendBlockInPage(PAGE_NAME, EXCALIDRAW_FILE_PROMPT)
20 | await logseq.Editor.appendBlockInPage(PAGE_NAME, genBlockData(DEFAULT_EXCALIDRAW_LIBRARY_ITEMS))
21 | }
22 |
23 | export const getExcalidrawLibraryItems = async () => {
24 | const pageBlocks = await logseq.Editor.getPageBlocksTree(PAGE_NAME)
25 | const codeBlock = pageBlocks?.[2]
26 | const libraryItems = getExcalidrawData(codeBlock?.content) as LibraryItems
27 | return libraryItems
28 | }
29 |
30 | export const updateExcalidrawLibraryItems = async (items: LibraryItems) => {
31 | const pageBlocks = await logseq.Editor.getPageBlocksTree(PAGE_NAME)
32 | const codeBlock = pageBlocks?.[2]
33 | return logseq.Editor.updateBlock(codeBlock.uuid, genBlockData(items))
34 | }
35 |
36 | export default bootExcalidrawLibraryItems
37 |
--------------------------------------------------------------------------------
/src/bootstrap/model.ts:
--------------------------------------------------------------------------------
1 | import { getExcalidrawInfoFromPage } from "@/lib/utils";
2 | import { RenderAppProps } from "@/main";
3 | import { insertSVG } from "./renderBlockImage";
4 | import getI18N from "@/locales";
5 |
6 | const bootModels = (renderApp: (props: RenderAppProps) => void) => {
7 | const { common: i18nCommon } = getI18N();
8 | logseq.provideModel({
9 | edit(e) {
10 | const pageName = e.dataset.pageName;
11 | const containerId = e.dataset.containerId;
12 | if (!pageName) return logseq.UI.showMsg(i18nCommon.pageNotFound);
13 | renderApp({ mode: "edit", pageName, renderSlotId: containerId });
14 | logseq.showMainUI();
15 | },
16 | fullscreen(e) {
17 | const pageName = e.dataset.pageName;
18 | if (!pageName) return logseq.UI.showMsg(i18nCommon.pageNotFound);
19 | renderApp({ mode: "preview", pageName });
20 | logseq.showMainUI();
21 | },
22 | async refresh(e) {
23 | const pageName = e.dataset.pageName;
24 | const containerId = e.dataset.containerId;
25 | if (!pageName) return logseq.UI.showMsg(i18nCommon.pageNotFound);
26 | const { excalidrawData } = await getExcalidrawInfoFromPage(pageName);
27 | insertSVG(containerId, undefined, excalidrawData);
28 | },
29 | async delete(e) {
30 | const pageName = e.dataset.pageName;
31 | if (!pageName) return logseq.UI.showMsg(i18nCommon.pageNotFound);
32 | await logseq.Editor.deletePage(pageName);
33 | logseq.UI.showMsg("Delete excalidraw file success", "success");
34 | const uuid = e.dataset.blockId;
35 | logseq.Editor.removeBlock(uuid);
36 | },
37 | async navPage(e) {
38 | const pageName = e.dataset.pageName;
39 | if (!pageName) return logseq.UI.showMsg(i18nCommon.pageNotFound);
40 | logseq.App.pushState("page", { name: pageName });
41 | },
42 | showDashboard() {
43 | // @ts-ignore do not need pageName
44 | renderApp({ mode: "dashboard" });
45 | logseq.showMainUI();
46 | },
47 | });
48 | };
49 |
50 | export default bootModels;
51 |
--------------------------------------------------------------------------------
/src/bootstrap/renderBlockImage.ts:
--------------------------------------------------------------------------------
1 | import { exportToSvg } from '@excalidraw/excalidraw'
2 |
3 | import type { Theme } from '@/components/Editor'
4 | import { NEW_FILE_EXCALIDRAW_DATA } from '@/lib/constants'
5 | import { getExcalidrawInfoFromPage } from '@/lib/utils'
6 | import getI18N from '@/locales'
7 | import type { ExcalidrawData } from '@/type'
8 |
9 | // const DEMO_FILE_ORIGINAL_NAME = "excalidraw-2023-04-24-16-39-01";
10 |
11 | export const insertSVG = async (containerId: string, svg?: SVGSVGElement, excalidrawData?: ExcalidrawData) => {
12 | const theme = await logseq.App.getStateFromStore logseq.hideMainUI()}
23 | >
24 |
97 |
114 |
`,
115 | })
116 |
117 | insertSVG(id, svg)
118 | } else if (slotType === 'excalidraw-menu') {
119 | logseq.provideUI({
120 | key: `excalidraw-${slot}`,
121 | slot,
122 | reset: true,
123 | template: `WIP`,
124 | })
125 | }
126 | })
127 |
128 | logseq.provideStyle(`
129 | .excalidraw-container {
130 | position: relative;
131 | line-height: 0;
132 | }
133 | .excalidraw-container:hover .excalidraw-toolbar-container {
134 | opacity: 1;
135 | }
136 | .excalidraw-toolbar-container {
137 | display: flex;
138 | justify-content: space-between;
139 | opacity: 0;
140 | transition: opacity 0.3s ease-in-out;
141 | position: absolute;
142 | top: 0;
143 | left: 0;
144 | width: 100%;
145 | height: 100%;
146 | padding: 10px 6px;
147 | background-image: linear-gradient(var(--ls-primary-background-color),transparent);
148 | }
149 | .excalidraw-title {
150 | line-height: 16px;
151 | white-space: nowrap;
152 | overflow: hidden;
153 | text-overflow: ellipsis;
154 | }
155 | .excalidraw-toolbar {
156 | display: flex;
157 | justify-content: flex-end;
158 | gap: 10px;
159 | }
160 | .excalidraw-toolbar a {
161 | width: 18px;
162 | height: 18px;
163 | line-height: 0;
164 | }
165 | `)
166 | }
167 |
168 | export default bootRenderBlockImage
169 |
--------------------------------------------------------------------------------
/src/components/DrawingCard.tsx:
--------------------------------------------------------------------------------
1 | import type { BlockEntity, PageEntity } from '@logseq/libs/dist/LSPlugin'
2 | import { Trash2, Edit3, Tag, Image } from 'lucide-react'
3 | import React, { useState } from 'react'
4 |
5 | import SVGComponent from '@/components/SVGComponent'
6 | import {
7 | ContextMenu,
8 | ContextMenuContent,
9 | ContextMenuItem,
10 | ContextMenuSeparator,
11 | ContextMenuTrigger,
12 | } from '@/components/ui/context-menu'
13 | import { copyToClipboard } from '@/lib/utils'
14 |
15 | import EditDrawingInfoModal, { EditTypeEnum } from './EditDrawingInfoModal'
16 | import {
17 | AlertDialog,
18 | AlertDialogAction,
19 | AlertDialogCancel,
20 | AlertDialogContent,
21 | AlertDialogDescription,
22 | AlertDialogFooter,
23 | AlertDialogHeader,
24 | AlertDialogTitle,
25 | AlertDialogTrigger,
26 | } from './ui/alert-dialog'
27 | import { useToast } from './ui/use-toast'
28 |
29 | export const PREVIEW_WINDOW = {
30 | width: 280,
31 | height: 180,
32 | }
33 | const TITLE_HEIGHT = 50
34 | export type IPageWithDrawing = PageEntity & {
35 | drawSvg: SVGSVGElement
36 | drawAlias?: string
37 | drawTag?: string
38 | drawRawBlocks: BlockEntity[]
39 | }
40 |
41 | const DrawingCard: React.FC<{
42 | page: IPageWithDrawing
43 | onClickDrawing: (page: IPageWithDrawing) => void
44 | onDelete: (page: IPageWithDrawing) => void
45 | onChange?: () => void
46 | }> = ({ page, onClickDrawing, onDelete, onChange }) => {
47 | const [editModalData, setEditModalData] = useState<{
48 | type?: EditTypeEnum
49 | open: boolean
50 | }>()
51 | const { toast } = useToast()
52 |
53 | const openEditDialog = (type: EditTypeEnum) => {
54 | setEditModalData({
55 | type,
56 | open: true,
57 | })
58 | }
59 | const onClickCopyRendererText = () => {
60 | // The reason for delay in execution is that the copying action can only be performed after shadcn's layer disappears.
61 | setTimeout(() => {
62 | copyToClipboard(`{{renderer excalidraw, ${page.originalName}}}`)
63 | toast({
64 | title: 'Copied',
65 | description: 'Renderer text copied to clipboard successfully',
66 | })
67 | }, 1000)
68 | }
69 | const deleteDrawing = async () => {
70 | await logseq.Editor.deletePage(page.originalName)
71 | toast({
72 | title: 'Deleted',
73 | description: 'Page deleted successfully',
74 | })
75 | onDelete(page)
76 | }
77 | return (
78 | <>
79 |
84 | setEditModalData({ open: _open })}
146 | onOk={onChange}
147 | />
148 |
149 |
150 | )
151 | }
152 |
153 | export default DrawingCard
154 |
--------------------------------------------------------------------------------
/src/components/EditDrawingInfoModal.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | Dialog,
4 | DialogContent,
5 | DialogFooter,
6 | DialogHeader,
7 | DialogTitle,
8 | DialogTrigger,
9 | } from "@/components/ui/dialog";
10 | import { Button } from "./ui/button";
11 | import { Input } from "./ui/input";
12 | import { Label } from "./ui/label";
13 | import { IPageWithDrawing } from "./DrawingCard";
14 | import TagSelector from "./TagSelector";
15 | import { useToast } from "./ui/use-toast";
16 | import { createDrawing } from "@/lib/utils";
17 |
18 | export enum EditTypeEnum {
19 | Name,
20 | Tag,
21 | Create,
22 | }
23 |
24 | const TITLE = {
25 | [EditTypeEnum.Name]: "Edit drawing alias name",
26 | [EditTypeEnum.Tag]: "Edit drawing tag",
27 | [EditTypeEnum.Create]: "Create new drawing",
28 | };
29 |
30 | const EditDrawingInfoModal: React.FC<{
31 | type: EditTypeEnum;
32 | drawingData?: IPageWithDrawing;
33 | open: boolean;
34 | onOpenChange: (open: boolean) => void;
35 | onOk?: () => void;
36 | }> = ({ type, drawingData, open, onOpenChange, onOk }) => {
37 | const [name, setName] = useState(drawingData?.drawAlias || "");
38 | const [tag, setTag] = useState(drawingData?.drawTag || "");
39 | const [isOpen, setIsOpen] = useState(false);
40 |
41 | const { toast } = useToast();
42 |
43 | const onClickSave = async () => {
44 | const _name = name?.trim() ?? "";
45 | const _tag = tag?.trim() ?? "";
46 | if (type === EditTypeEnum.Create) {
47 | if (!_name) {
48 | return toast({ title: "Name is required", variant: "destructive" });
49 | }
50 | let params: Record
88 |
89 |
90 |
94 |
95 | openEditDialog(EditTypeEnum.Name)}>
96 |
98 | openEditDialog(EditTypeEnum.Tag)}>
99 |
101 |
102 |
104 |
106 |
107 |
108 |
112 |
113 |
114 | Are you sure absolutely sure?
115 |
116 | This action cannot be undone. This will permanently delete your drawing.
117 |
118 |
119 |
120 | Cancel
121 | Continue
122 |
123 |
124 |
125 |
126 |
127 |
128 | {page.drawTag && (
129 |
134 | onClickDrawing(page)}>
91 | {page.drawSvg &&
93 |
109 |
111 |
130 | {page.drawTag}
131 |
132 | )}
133 | onClickDrawing(page)}
138 | >
139 | {page.drawAlias || page.name}
140 |
141 |
161 | {excalidrawData && libraryItems && (
162 | setExcalidrawAPI(api)}
164 | langCode={getLangCode((logseq.settings as unknown as PluginSettings)?.langCode)}
165 | initialData={{
166 | elements: excalidrawData.elements || [],
167 | appState: excalidrawData.appState
168 | ? Object.assign({ theme }, getMinimalAppState(excalidrawData.appState))
169 | : { theme },
170 | files: excalidrawData?.files || undefined,
171 | libraryItems,
172 | }}
173 | onChange={onExcalidrawChange}
174 | onLibraryChange={onLibraryChange}
175 | renderTopRightUI={() => (
176 |
201 |
213 |
214 |
216 | Logseq Excalidraw Plugin
218 |
219 |
220 |
262 |
263 | )}
264 | {slidesModeEnabled && showSlidesPreview ? setShowSlidesOverview(false)}
270 | api={excalidrawAPI}
271 | />
272 |
273 | )
274 | }
275 |
276 | export default Editor
277 |
--------------------------------------------------------------------------------
/src/components/Preview.tsx:
--------------------------------------------------------------------------------
1 | import { exportToSvg } from '@excalidraw/excalidraw'
2 | import React, { useEffect, useRef } from 'react'
3 | import { AiFillCloseCircle } from 'react-icons/ai'
4 |
5 | import { getExcalidrawInfoFromPage } from '@/lib/utils'
6 |
7 | import type { Theme } from './Editor'
8 |
9 | const Preview: React.FC
177 | onAliasNameChange(e.target.value)} />
178 |
198 | )}
199 | >
200 |
48 | logseq.hideMainUI()} />
49 |
50 |
51 | )
52 | }
53 |
54 | export default Preview
55 |
--------------------------------------------------------------------------------
/src/components/PreviewImage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 |
3 | const PreviewImage = ({ blobPromise }: { blobPromise: Promise{imageSrc ? 
:
30 | }
31 |
32 | export default PreviewImage
33 |
--------------------------------------------------------------------------------
/src/components/SVGComponent.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react";
2 |
3 | interface SVGComponentProps {
4 | svgElement: SVGSVGElement;
5 | }
6 |
7 | const SVGComponent: FCLoading image...
}
33 | {frames.length > 0 ? (
34 |
75 | ) : null
76 | }
77 |
78 | export default SlidesOverview
79 |
--------------------------------------------------------------------------------
/src/components/SlidesPreview.tsx:
--------------------------------------------------------------------------------
1 | import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
2 |
3 | import useSlides from '@/hook/useSlides'
4 | import { cn } from '@/lib/utils'
5 | import getI18N from '@/locales'
6 |
7 | import { type Theme } from './Editor'
8 | import PreviewImage from './PreviewImage'
9 |
10 | const SlidesPreview = ({ api, theme }: { api: ExcalidrawImperativeAPI | null; theme?: Theme }) => {
11 | const { editor: i18nEditor } = getI18N()
12 | const { frames, activeFrameId, scrollToFrame } = useSlides(api)
13 |
14 | const onClickFrame = (frame) => {
15 | scrollToFrame(frame)
16 | }
17 | return (
18 |
41 | {frames?.map(({ frameElement: frame, blobPromise }, index) => (
42 |
68 | ) : (
69 |
43 |
66 | ))}
67 | onClickFrame(frame)}
49 | >
50 |
62 |
51 |
53 |
59 | {frame.name || frame.id}
60 |
61 |
63 | {index + 1}
64 |
65 | {i18nEditor.frameNotFound}
70 | )}
71 |
72 |
74 |
24 | {frames.length > 0 ? (
25 | frames?.map(({ frameElement: frame, blobPromise }) => (
26 |
49 | )
50 | }
51 |
52 | export default SlidesPreview
53 |
--------------------------------------------------------------------------------
/src/components/TagSelector.tsx:
--------------------------------------------------------------------------------
1 | import { Check, ChevronsUpDown, PlusCircle } from "lucide-react";
2 | import { cn } from "@/lib/utils";
3 | import { Button } from "@/components/ui/button";
4 | import {
5 | Command,
6 | CommandEmpty,
7 | CommandGroup,
8 | CommandInput,
9 | CommandItem,
10 | } from "@/components/ui/command";
11 | import {
12 | Popover,
13 | PopoverContent,
14 | PopoverTrigger,
15 | } from "@/components/ui/popover";
16 | import { useState } from "react";
17 | import { tagsAtom } from "@/model/tags";
18 | import { useAtom } from "jotai";
19 | import { Input } from "./ui/input";
20 | import { useToast } from "./ui/use-toast";
21 | import { Separator } from "./ui/separator";
22 | import { Badge } from "./ui/badge";
23 |
24 | const TagSelector: React.FC<{
25 | value?: string;
26 | showAdd?: boolean;
27 | onChange: (value: string) => void;
28 | asFilter?: boolean;
29 | className?: string;
30 | }> = ({ value, onChange, showAdd = false, asFilter = false, className }) => {
31 | const [open, setOpen] = useState(false);
32 | const [tags = [], setTags] = useAtom(tagsAtom);
33 | const tagOptions = tags?.map((tag) => ({
34 | value: tag?.toLowerCase(),
35 | label: tag,
36 | }));
37 |
38 | const [newTag, setNewTag] = useState("");
39 |
40 | const { toast } = useToast();
41 |
42 | const onClickAddTag = () => {
43 | if (!newTag) {
44 | return toast({
45 | variant: "destructive",
46 | title: "Tag cannot be empty",
47 | });
48 | }
49 | if (tags?.map((tag) => tag.toLowerCase()).includes(newTag?.toLowerCase())) {
50 | return toast({
51 | variant: "destructive",
52 | title: "Tag already exists",
53 | });
54 | }
55 | setTags([...tags, newTag]);
56 | setNewTag("");
57 | onChange(newTag);
58 | setOpen(false);
59 | };
60 |
61 | return (
62 | onClickFrame(frame)}
33 | >
34 |
44 | ))
45 | ) : (
46 |
41 | {frame.name || frame.id}
42 |
43 | {i18nEditor.frameNotFound}
47 | )}
48 |
122 | setNewTag(e.target.value)}
127 | />
128 |
131 |
132 | )}
133 |
20 | {children}
21 |
22 |
45 |
55 | ))
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef
20 | {children}
21 |
22 |
23 | {title && {title} }
24 | {description && (
25 | {description}
26 | )}
27 |
28 | {action}
29 |