mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
4f0a2a9593
* move the existing example to with-script-in-browser * Add example with next js app router * disable ssr for excalidraw client comp * typo * update output dir * don't include nextjs example in tsconfig * remove meta.json * lint * remove example.ts * port * move the examples outside packages and use the deps as workspaces in examples * update gitignore * fix example * update path of build dir * fix * fix scripts * try local path * fix * update commands * fix * fix * fix script * skip ts * disable ts * add vercel.json * install * update tsconfig * fix lint * remove console.log * lets see if this works * revert * remove ts nocheck * add types and some utils in nextjs example * fix types * updatw example and remove nextjs dynamic syntax so we don't import excal twice * move both examples to workspaces and create generic example to be used by browser and next js both * copy the static assets to nextjs * fix ts config * render custom menu items * fix custom footer * fix types in browser example * use regular imports for importing excal and import it using dynamic next js in app router instead * Add example for pages router * fix css discrepancies * fix css * configure output dir * fix * fix css * rename to with-nextjs * move components to examples/excalidraw/components
72 lines
2 KiB
TypeScript
72 lines
2 KiB
TypeScript
import type * as TExcalidraw from "@excalidraw/excalidraw";
|
|
import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
|
|
|
|
const COMMENT_SVG = (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="feather feather-message-circle"
|
|
>
|
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
|
</svg>
|
|
);
|
|
|
|
const CustomFooter = ({
|
|
excalidrawAPI,
|
|
excalidrawLib,
|
|
}: {
|
|
excalidrawAPI: ExcalidrawImperativeAPI;
|
|
excalidrawLib: typeof TExcalidraw;
|
|
}) => {
|
|
const { Button, MIME_TYPES } = excalidrawLib;
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
onSelect={() => alert("General Kenobi!")}
|
|
style={{ marginLeft: "1rem", width: "auto" }}
|
|
title="Hello there!"
|
|
>
|
|
Hit me
|
|
</Button>
|
|
<Button
|
|
className="custom-element"
|
|
onSelect={() => {
|
|
excalidrawAPI?.setActiveTool({
|
|
type: "custom",
|
|
customType: "comment",
|
|
});
|
|
const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
|
|
`<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="feather feather-message-circle"
|
|
>
|
|
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
|
|
</svg>`,
|
|
)}`;
|
|
excalidrawAPI?.setCursor(`url(${url}), auto`);
|
|
}}
|
|
title="Comments!"
|
|
>
|
|
{COMMENT_SVG}
|
|
</Button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default CustomFooter;
|