diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 298eeee8..c13522db 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -23,6 +23,10 @@ Please add the latest change on the top under the correct section. - Add `viewModeEnabled` prop which enabled the view mode [#2840](https://github.com/excalidraw/excalidraw/pull/2840). When this prop is used, the view mode will not show up in context menu is so it is fully controlled by host. - Expose `getAppState` on `excalidrawRef` [#2834](https://github.com/excalidraw/excalidraw/pull/2834). +### Build + +- Remove publicPath so host can use `__webpack_public_path__` to host the assets[#2835](https://github.com/excalidraw/excalidraw/pull/2835) + ## Excalidraw Library ### Features diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index 1cb208ba..74d935e0 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -18,7 +18,15 @@ yarn add react react-dom @excalidraw/excalidraw After installation you will see a folder `excalidraw-assets` in `dist` directory which contains the assets needed for this app. -Move the folder `excalidraw-assets` to the path where your assets are served. In the example its served from `public/excalidraw-assets` +Move the folder `excalidraw-assets` to the path where your assets are served. + +By default it will try to load the files from `{rootUrl}/excalidraw-assets/` + +With **Webpack**, if you want to load the files from different path you can use 
`__webpack_public_path__`
. + +With **create-react-app**, the assets can be served from `public/static/js/excalidraw-assets`since CRA tries to load the assets from `{rootUrl}/static/js` path by default. + +You can update the value of `PUBLIC_URL` if you want to serve it from a different URL. ### Demo @@ -26,6 +34,8 @@ Move the folder `excalidraw-assets` to the path where your assets are served. In ### Usage +1. If you are using a Web bundler (for instance, Webpack), you can import it as an ES6 module as shown below + ```js import React, { useEffect, useState, createRef } from "react"; import Excalidraw from "@excalidraw/excalidraw"; @@ -119,6 +129,55 @@ export default function App() { [![Edit excalidraw](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark) +2. To use it in a browser directly: + +You will need to make sure `react`, `react-dom` is available as shown below. + +```html + + + + Excalidraw in browser + + + + + + + +
+

Excalidraw Embed Example

+
+
+ + + + +``` + +```js +import "./styles.css"; + +const excalidrawWrapper = document.getElementById("app"); + +const props = { + onChange: (data, appState) => { + console.log(data, appState); + }, +}; + +/*eslint-disable */ +ReactDOM.render( + React.createElement(Excalidraw.default, props), + excalidrawWrapper, +); +``` + +[![Edit excalidraw-in-browser](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-in-browser-tlqom?fontsize=14&hidenavigation=1&theme=dark) + ### Props | Name | Type | Default | Description | diff --git a/src/packages/excalidraw/webpack.prod.config.js b/src/packages/excalidraw/webpack.prod.config.js index 434c2059..d15ec159 100644 --- a/src/packages/excalidraw/webpack.prod.config.js +++ b/src/packages/excalidraw/webpack.prod.config.js @@ -13,7 +13,6 @@ module.exports = { library: "Excalidraw", libraryTarget: "umd", filename: "[name].js", - publicPath: "/", chunkFilename: "excalidraw-assets/[name].js", }, resolve: {