add excalidraw_embed into base repo (#2040)
Co-authored-by: Lipis <lipiridis@gmail.com>pull/2059/head
David Luzar
5 years ago
committed by
GitHub
parent
80cbe13167
commit
ab7073abdb
@ -1,13 +0,0 @@
|
|||||||
/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
|
|
||||||
@font-face {
|
|
||||||
font-family: "Virgil";
|
|
||||||
src: url("FG_Virgil.woff2");
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* https://github.com/microsoft/cascadia-code */
|
|
||||||
@font-face {
|
|
||||||
font-family: "Cascadia";
|
|
||||||
src: url("Cascadia.woff2");
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
@ -1,3 +1,17 @@
|
|||||||
|
/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
|
||||||
|
@font-face {
|
||||||
|
font-family: "Virgil";
|
||||||
|
src: url("/FG_Virgil.woff2");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* https://github.com/microsoft/cascadia-code */
|
||||||
|
@font-face {
|
||||||
|
font-family: "Cascadia";
|
||||||
|
src: url("/Cascadia.woff2");
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
.visually-hidden {
|
.visually-hidden {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
|
import { InitializeApp } from "../components/InitializeApp";
|
||||||
|
import App from "../components/App";
|
||||||
|
|
||||||
|
import "../css/app.scss";
|
||||||
|
import "../css/styles.scss";
|
||||||
|
|
||||||
|
import { ExcalidrawProps } from "../types";
|
||||||
|
import { IsMobileProvider } from "../is-mobile";
|
||||||
|
|
||||||
|
const Excalidraw = React.memo(
|
||||||
|
(props: ExcalidrawProps) => {
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
onChange,
|
||||||
|
initialData,
|
||||||
|
user,
|
||||||
|
onUsernameChange,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Block pinch-zooming on iOS outside of the content area
|
||||||
|
const handleTouchMove = (event: TouchEvent) => {
|
||||||
|
// @ts-ignore
|
||||||
|
if (typeof event.scale === "number" && event.scale !== 1) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("touchmove", handleTouchMove, {
|
||||||
|
passive: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("touchmove", handleTouchMove);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<InitializeApp>
|
||||||
|
<IsMobileProvider>
|
||||||
|
<App
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
onChange={onChange}
|
||||||
|
initialData={initialData}
|
||||||
|
user={user}
|
||||||
|
onUsernameChange={onUsernameChange}
|
||||||
|
/>
|
||||||
|
</IsMobileProvider>
|
||||||
|
</InitializeApp>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
(prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
|
||||||
|
const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps;
|
||||||
|
const { initialData: nextInitialData, user: nextUser, ...next } = nextProps;
|
||||||
|
|
||||||
|
const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[];
|
||||||
|
const nextKeys = Object.keys(nextProps) as (keyof typeof next)[];
|
||||||
|
|
||||||
|
return (
|
||||||
|
prevUser?.name === nextUser?.name &&
|
||||||
|
prevKeys.length === nextKeys.length &&
|
||||||
|
prevKeys.every((key) => prev[key] === next[key])
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Excalidraw;
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,66 @@
|
|||||||
|
{
|
||||||
|
"name": "@excalidraw/excalidraw",
|
||||||
|
"version": "0.7.0",
|
||||||
|
"main": "dist/excalidraw.min.js",
|
||||||
|
"files": [
|
||||||
|
"dist/*"
|
||||||
|
],
|
||||||
|
"description": "Excalidraw as a React component",
|
||||||
|
"license": "MIT",
|
||||||
|
"keywords": [
|
||||||
|
"excalidraw",
|
||||||
|
"excalidraw-embed",
|
||||||
|
"react",
|
||||||
|
"npm",
|
||||||
|
"npm excalidraw"
|
||||||
|
],
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not ie <= 11",
|
||||||
|
"not op_mini all",
|
||||||
|
"not safari < 12",
|
||||||
|
"not kaios <= 2.5",
|
||||||
|
"not edge < 79",
|
||||||
|
"not chrome < 70",
|
||||||
|
"not and_uc < 13",
|
||||||
|
"not samsung < 10"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "16.13.1",
|
||||||
|
"react-dom": "16.13.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "7.9.0",
|
||||||
|
"@babel/plugin-transform-arrow-functions": "7.8.3",
|
||||||
|
"@babel/plugin-transform-async-to-generator": "7.8.3",
|
||||||
|
"@babel/plugin-transform-typescript": "7.9.4",
|
||||||
|
"@babel/preset-env": "7.9.5",
|
||||||
|
"@babel/preset-react": "7.9.4",
|
||||||
|
"@babel/preset-typescript": "7.9.0",
|
||||||
|
"babel-loader": "8.1.0",
|
||||||
|
"babel-plugin-transform-class-properties": "6.24.1",
|
||||||
|
"cross-env": "7.0.2",
|
||||||
|
"css-loader": "3.5.2",
|
||||||
|
"file-loader": "6.0.0",
|
||||||
|
"mini-css-extract-plugin": "0.8.0",
|
||||||
|
"sass-loader": "8.0.2",
|
||||||
|
"terser-webpack-plugin": "2.3.5",
|
||||||
|
"ts-loader": "7.0.0",
|
||||||
|
"webpack": "4.42.0",
|
||||||
|
"webpack-cli": "3.3.11"
|
||||||
|
},
|
||||||
|
"bugs": "https://github.com/excalidraw/excalidraw/issues",
|
||||||
|
"repository": "https://github.com/excalidraw/excalidraw",
|
||||||
|
"scripts": {
|
||||||
|
"build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
|
||||||
|
"pack": "npm run build:umd && npm pack"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"jsx": "react"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,99 @@
|
|||||||
|
const path = require("path");
|
||||||
|
const webpack = require("webpack");
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
const TerserPlugin = require("terser-webpack-plugin");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: "production",
|
||||||
|
entry: {
|
||||||
|
"excalidraw.min": "./index.tsx",
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "dist"),
|
||||||
|
library: "Excalidraw",
|
||||||
|
libraryTarget: "umd",
|
||||||
|
filename: "[name].js",
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(sa|sc|c)ss$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
{ loader: "css-loader" },
|
||||||
|
"sass-loader",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(ts|tsx|js|jsx|mjs)$/,
|
||||||
|
exclude: /node_modules\/(?!(roughjs|socket.io-client|browser-nativefs)\/).*/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: "ts-loader",
|
||||||
|
options: {
|
||||||
|
transpileOnly: true,
|
||||||
|
configFile: path.resolve(__dirname, "tsconfig.prod.json"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: "babel-loader",
|
||||||
|
options: {
|
||||||
|
presets: [
|
||||||
|
"@babel/preset-env",
|
||||||
|
"@babel/preset-react",
|
||||||
|
"@babel/preset-typescript",
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
"@babel/plugin-proposal-object-rest-spread",
|
||||||
|
"@babel/plugin-transform-arrow-functions",
|
||||||
|
"transform-class-properties",
|
||||||
|
"@babel/plugin-transform-async-to-generator",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff|woff2|eot|ttf|otf)$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: "file-loader",
|
||||||
|
options: {
|
||||||
|
name: "[name].[ext]",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
minimize: true,
|
||||||
|
minimizer: [
|
||||||
|
new TerserPlugin({
|
||||||
|
test: /\.js($|\?)/i,
|
||||||
|
}),
|
||||||
|
new webpack.optimize.LimitChunkCountPlugin({
|
||||||
|
maxChunks: 1,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
|
||||||
|
externals: {
|
||||||
|
react: {
|
||||||
|
root: "React",
|
||||||
|
commonjs2: "react",
|
||||||
|
commonjs: "react",
|
||||||
|
amd: "react",
|
||||||
|
},
|
||||||
|
"react-dom": {
|
||||||
|
root: "ReactDOM",
|
||||||
|
commonjs2: "react-dom",
|
||||||
|
commonjs: "react-dom",
|
||||||
|
amd: "react-dom",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue