chore: post publish docs & examples changes (#9217)

packages/excalidraw/CHANGELOG.md

@@ -64,14 +64,20 @@ We've transitioned from `UMD` to `ESM` bundle format. Our new `dist` bundles ins
 │   └── types/
 ```
 
-##### JavaScript: required `"type": "module"` in package.json
-
-Make sure that your JavaScript environment supports ES modules, as it might be required to define `"type": "module"` in your `package.json` file or as part of the `<script type="module" />` attribute.
+Make sure that your JavaScript environment supports ES modules. You _may_ need to define `"type": "module"` in your `package.json` file or as part of the `<script type="module" />` attribute.
 
 ##### Typescript: deprecated "moduleResolution": `"node"` or `"node10"`
 
 Since `"node"` and `"node10"` do not support `package.json` `"exports"` fields, having these values in your `tsconfig.json` will not work. Instead, use `"bundler"`, `"node16"` or `"nodenext"` values. For more information, see [Typescript's documentation](https://www.typescriptlang.org/tsconfig/#moduleResolution).
 
+##### ESM strict resolution
+
+Due to ESM strict resolution, if you're using Webpack or other bundler that expects import paths to be fully specified, you'll need to explicitly disable this feature.
+
+For example in Webpack, you should set [`resolve.fullySpecified`](https://webpack.js.org/configuration/resolve/#resolvefullyspecified) to `false`.
+
+For this reason, CRA will no longer work unless you eject or use a workaround such as [craco](https://stackoverflow.com/a/75109686).
+
 ##### New structure of the imports
 
 Dependening on the environment, this is how imports should look like with the `ESM`:

packages/excalidraw/README.md

@@ -30,7 +30,7 @@ Excalidraw takes _100%_ of `width` and `height` of the containing block so make
 
 ## Demo
 
-Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/mrazator/release-v18/examples/with-script-in-browser) example.
+Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.
 
 ## Integration
 

packages/excalidraw/components/Actions.tsx

@@ -353,25 +353,6 @@ export const ShapesSwitcher = ({
           title={t("toolBar.extraTools")}
         >
           {extraToolsIcon}
-          {app.props.aiEnabled !== false && (
-            <div
-              style={{
-                display: "inline-flex",
-                marginLeft: "auto",
-                padding: "2px 4px",
-                borderRadius: 6,
-                fontSize: 8,
-                fontFamily: "Cascadia, monospace",
-                position: "absolute",
-                background: "var(--color-promo)",
-                color: "var(--color-surface-lowest)",
-                bottom: 3,
-                right: 4,
-              }}
-            >
-              AI
-            </div>
-          )}
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           onClickOutside={() => setIsExtraToolsMenuOpen(false)}

packages/excalidraw/components/SearchMenu.scss

@@ -52,7 +52,7 @@
           background-color: var(--color-surface-high);
         }
 
-        &:first {
+        &:first-child {
           margin-right: 4px;
         }
       }

packages/excalidraw/components/welcome-screen/WelcomeScreen.scss

@@ -222,16 +222,6 @@
     .welcome-screen-menu-item__text {
       color: var(--color-gray-100);
     }
-
-    &--promo {
-      color: var(--color-promo) !important;
-
-      &:hover {
-        .welcome-screen-menu-item__text {
-          color: var(--color-promo) !important;
-        }
-      }
-    }
   }
 
   &.theme--dark {

packages/excalidraw/env.cjs

@@ -9,9 +9,10 @@ const parseEnvVariables = (filepath) => {
     },
     {},
   );
-  envVars.VITE_PKG_NAME = pkg.name;
-  envVars.VITE_PKG_VERSION = pkg.version;
-  envVars.VITE_IS_EXCALIDRAW_NPM_PACKAGE = true;
+
+  envVars.PKG_NAME = pkg.name;
+  envVars.PKG_VERSION = pkg.version;
+
   return envVars;
 };
 

packages/excalidraw/fonts/ExcalidrawFontFace.ts

@@ -9,9 +9,9 @@ export class ExcalidrawFontFace {
   public readonly fontFace: FontFace;
 
   private static readonly ASSETS_FALLBACK_URL = `https://esm.sh/${
-    import.meta.env.VITE_PKG_NAME
-      ? `${import.meta.env.VITE_PKG_NAME}@${import.meta.env.VITE_PKG_VERSION}` // should be provided by vite during package build
-      : "@excalidraw/excalidraw" // fallback to latest package version (i.e. for app)
+    import.meta.env.PKG_NAME
+      ? `${import.meta.env.PKG_NAME}@${import.meta.env.PKG_VERSION}` // is provided during package build
+      : "@excalidraw/excalidraw" // fallback to the latest package version (i.e. for app)
   }/dist/prod/`;
 
   constructor(family: string, uri: string, descriptors?: FontFaceDescriptors) {

packages/excalidraw/vite-env.d.ts

@@ -43,9 +43,8 @@ interface ImportMetaEnv {
   VITE_APP_ENABLE_ESLINT: string;
   VITE_APP_ENABLE_TRACKING: string;
 
-  VITE_PKG_NAME: string;
-  VITE_PKG_VERSION: string;
-  VITE_IS_EXCALIDRAW_NPM_PACKAGE: string;
+  PKG_NAME: string;
+  PKG_VERSION: string;
 
   VITE_APP_PLUS_LP: string;
   VITE_APP_PLUS_APP: string;