Excalidraw

Die Excalidraw-Komponente ermöglicht das Einbetten von 👉 Excalidraw-Zeichnungen in MDX-Dokumente.

Leerer Editor

Ein leerer Editor zeigt standardmässig das Excalidraw-Logo - erst beim klicken auf "Edit" wird der Editor geladen und ein leeres Dokument wird angezeigt.

<Excalidoc id="f886b1fe-8ac5-4d50-92c1-3b97411f7868"/>

http://localhost:3000

Laden...

Optionen

height

Höhe des Editors als CSS-Property (z.B. 500px, standard: 600px).

Die maximale Höhe (max-height) ist fest auf 70vh gesetzt.

allowImageInsertion

Erlaubt das Einfügen von Bildern.

default: false

useExcalidrawViewer

Verwendet den Excalidraw-Viewer (Read-Only) in der Vorschau anstatt das Vorschau-Bild.

Dies kann nützlich sein, wenn eine Zeichnung gross ist und gezoomt werden können muss.

Einfügen von Bildern allowImageInsertion

Standardmässig können keine Bilder eingefügt werden, um die Dateigrösse möglichst klein zu halten. Mit dem Parameter allowImageInsertion kann das Einfügen von Bildern erlaubt werden.

<Excalidoc id="1bdb72b1-822a-4fc4-9758-eb61e7e20abc" allowImageInsertion/>

http://localhost:3000

Laden...

Vorlagen

Es lassen sich auch die Standardwerte für ein Excalidraw-Dokument festlegen.

defaultElements

Enthält die Szenenelemente beim ersten Laden des Editors.

Am einfachsten wird eine Excalidraw-Zeichnung als .excalidraw exportiert und dessen Elemente dann eingefügt.

require('bild.excalidraw').elements

defaultFiles

Enthält eine vorlage auch Bilder, so müssen diese ebenfalls mitgelifert werden.

require('bild.excalidraw').files

defaultImage

Enthält das Anzeigebild, das standardmässig angezeigt wird.

<Excalidoc 
    id="25d2a32b-6072-4fb4-b8e1-34e5d57056aa"
    defaultElements={require('./assets/haus-des-nikolaus.excalidraw').elements}
    defaultFiles={require('./assets/haus-des-nikolaus.excalidraw').files}
    defaultImage={require('./assets/haus-des-nikolaus.png').default}
/>

http://localhost:3000

Laden...

Excalidraw viewer (useExcalidrawViewer)

Der Excalidraw-Viewer zeigt die Zeichnung im Read-Only-Modus an. Dies kann nützlich sein, wenn eine Zeichnung gross ist und gezoomt werden können muss.

<Excalidoc 
    id="25d2a32b-6072-4fb4-b8e1-34e5d57056aa"
    height="300px"
    useExcalidrawViewer
/>

http://localhost:3000

Laden...

Bibliotheken

Excalidraw bietet die Möglichkeit, Bibliotheken mit vorgegebenen Elementen einzubinden. Die Bibliotheken können wahlweise von 👉 https://libraries.excalidraw.com/ heruntergeladen oder selbst erstellt werden.

Im Beispiel werden 👉 Netzwerk-Topologie-Icons von @dwelle eingebunden - sie sind dann über die Bibliothek verfügbar.

Bibliotheken können aktuell nicht von Usern selber hinzugefügt werden (bzw. nur über einen manuellen upload).

<Excalidoc 
    id="15d5d6b9-0ea8-4cf2-b3a7-31178daa85aa"
    libraryItems={require('./assets/network-topology-icons.excalidrawlib').libraryItems}
/>

http://localhost:3000

Laden...

Installation

Code

• src/models/Excalidoc.ts
• src/components/documents/Excalidoc

NPM

yarn add @excalidraw/excalidraw@^0.17.6

Models

src/api/document.ts

export enum DocumentType {
    /* ... */
    Excalidoc = 'excalidoc'
}

export interface ExcaliData {
    files: BinaryFiles;
    elements: readonly ExcalidrawElement[];
    image: string;
}

export interface TypeDataMapping {
    /* ... */
    [DocumentType.Excalidoc]: ExcaliData;
}

export interface TypeModelMapping {
    /* ... */
    [DocumentType.Excalidoc]: Excalidoc;
}

export type DocumentTypes =
    /* ... */
    | Excalidoc

Stores

src/stores/DocumentStore.ts

export function CreateDocumentModel(data: DocumentProps<DocumentType>, store: DocumentStore): DocumentTypes {
    switch (data.type) {
        /* ... */
        case DocumentType.Excalidoc:
            return new Excalidoc(data as DocumentProps<DocumentType.Excalidoc>, store);
    }
}

docusaurus.config.ts

Damit die .excalidraw und .excalidrawlib Dateien von Webpack/Rspack korrekt als JSON-Dateien behandelt werden, müssen die Dateiendungen in der docusaurus.config.ts hinzugefügt werden.

Zudem erwartet Excalidraw client-seitig die Env-Variable IS_PREACT, die über Webpack/Rspack konfiguriert werden muss.

const config: Config = {
    plugins: [
        () => {
            return {
                name: 'excalidraw-config',
                configureWebpack(config, isServer, {currentBundler}) {
                    return {
                        module: {
                            rules: [
                            {
                                test: /\.excalidraw$/,
                                type: 'json',
                            },
                            {
                                test: /\.excalidrawlib$/,
                                type: 'json',
                            }
                            ]
                        },
                        plugins: [
                            new currentBundler.instance.DefinePlugin({
                            'process.env.IS_PREACT': JSON.stringify('false')
                            }),
                        ]
                    }
                }
            }
        }
    ]
}