Applied manually all Alkemio changes to version 0.17.6

README.md

@@ -1,3 +1,117 @@
+
+<p align="center"> <a href="https://alkemio.foundation/" target="blank"><img src="https://alkemio.foundation/uploads/logos/alkemio-logo.svg" width="400" alt="Alkemio Logo" /></a>
+
+</p>
+<p align="center"><i>Enabling society to collaborate. Building a better future, together.</i></p>
+# Alkemio fork of Excalidraw v0.17.0
+
+### Upgrade procedure
+```
+  git fetch --tags upstream
+  git checkout 0.16.1-alkemio-1
+  git merge v0.17.0
+  git push --set-upstream origin 0.17.0-alkemio-1
+```
+
+### List of differences with standard Excalidraw
+- ZoomToFit feature exposed through the external API
+- Added ZoomToFit button to the zoom toolbar
+- Added ZoomToFit flag to initialData to fit items on load
+- Modified the paste functionality to avoid pasting elements (such as images) as JSON when editing text.
+- Added `hideLibraryButton` to the appState to be able to hide the button from outside.
+- Changed the toolbar Lock button behavior. Now it locks/unlocks elements instead of the tool in use
+- Changed the load from file behavior to fix multi-user collaboration bug. Now elements loaded will have version number > currentScene version number
+
+### Testing locally inside Alkemio client
+```
+npm link
+cd ../client-web
+npm link @alkemio/excalidraw --save
+```
+
+### Build and publish the new npm package:
+Find in json files any `'alkemio-XX'` and set the version you want to publish
+```
+yarn
+cd src/packages/excalidraw
+yarn install
+yarn build:umd
+yarn pack
+yarn publish
+```
+
+## Change Log
+
+### Alkemio fork of Excalidraw v0.17.0-alkemio-4
+- Added `hideLibraryButton` to the appState to be able to hide the button from outside.
+- Changed the toolbar Lock button behavior. Now it locks/unlocks elements instead of the tool in use
+
+### Alkemio fork of Excalidraw v0.17.0-alkemio-3-beta
+- Changed behavior. Pasting elements is better handled and now it doesn't end up as a big text node with JSON inside.
+
+### Alkemio fork of Excalidraw v0.17.0
+- Upgraded from Excalidraw v0.16.1 to v0.17.0
+- Applied the new styles of the buttons to Alkemio's ZoomToFit added button.
+
+
+### Alkemio fork of Excalidraw v0.16.1
+
+- Upgraded from Excalidraw v0.15.2 to v0.16.1
+
+  - Sync master branch from github
+  - `git pull`
+  - Sync tags:
+
+  ```
+  $ git fetch --tags upstream
+  ## Assuming upstream is already pointing to the excalidraw repo, if not, just run:
+  $ git remote add upstream [email protected]:excalidraw/excalidraw.git
+  ```
+
+  - Checkout a new Branch pointing to the same commit as the tag:
+
+  ```
+  $ git checkout -b branch-v0.16.1 tags/v0.16.1
+  ```
+
+  - Push the new branch to GitHub and create the PR there or merge localy if there are conflicts
+
+- Fixed merge conflicts and a small issue with the zoomToFit icon, they have added a function with the same name.
+
+### Alkemio fork of Excalidraw v0.15.2
+
+#### Modifications:
+
+- ZoomToFit feature exposed through the external API
+- Added ZoomToFit button to the zoom toolbar
+- Added ZoomToFit flag to initialData to fit items on load
+
+#### Development guidelines
+
+- First of all, Excalidraw uses yarn as package manager, so first thing to do is make sure you have yarn installed in your system. `npm install --global yarn`.
+- Clone the repository to a local folder: `git clone [email protected]:alkem-io/excalidraw.git` and create a feature branch to store your work.
+- Follow the original Excalidraw instructions below to run and debug with the included test application - Just `yarn ; yarn start` should work.
+- To test/debug Excalidraw inside our client-web application:
+  - Execute `npm link` in the root of your cloned repository.
+  - Go to your client-web folder and execute: `npm link @alkemio/excalidraw --save`
+- When you're done with the development commit and push everything, create a Pull Request in the alkem-io/excalidraw repository to merge your branch to develop.
+- Once is merged to `develop`, checkout `develop` branch and see below how to build and publish the package to NPM repository.
+- Make sure you switch back the package in your client-web to use the published @alkemio/excalidraw package's new version instead of the old one or the linked one if you changed it.
+
+#### Build and publish a new npm package:
+
+```
+yarn
+cd src/packages/excalidraw
+yarn install
+yarn build:umd
+yarn pack
+yarn publish
+```
+
+<hr />
+
+
 <a href="https://excalidraw.com/" target="_blank" rel="noopener">
   <picture>
     <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png" />

package.json

@@ -1,5 +1,5 @@
 {
-  "private": true,
+  "private": false,
   "name": "excalidraw-monorepo",
   "workspaces": [
     "excalidraw-app",
@@ -56,7 +56,7 @@
   "engines": {
     "node": "18.0.0 - 20.x.x"
   },
-  "homepage": ".",
+  "homepage": "https://github.com/alkem-io/excalidraw-fork",
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",

packages/excalidraw/CHANGELOG.md

@@ -77,6 +77,18 @@ Please add the latest change on the top under the correct section.
 
 - `appState.openDialog` type was changed from `null | string` to `null | { name: string }`. [#7336](https://github.com/excalidraw/excalidraw/pull/7336)
 
+
+## Alkemio Fork
+- First version of Alkemio forked Excalidraw
+- ZoomToFit feature exposed through the external API
+- Added ZoomToFit button to the zoom toolbar
+- Added ZoomToFit flag to initialData to fit items on load
+- [Alkemio Fork of Excalidraw: Expose Zoom to fit feature #1](todo)
+- Added `hideLibraryButton` to the appState to be able to hide the button from outside.
+- Changed the toolbar Lock button behavior. Now it locks/unlocks elements instead of the tool in use
+- Changed behavior. Pasting elements is better handled and now it doesn't end up as a big text node with JSON inside.
+
+
 ## 0.17.3 (2024-02-09)
 
 ### Fixes

packages/excalidraw/actions/actionCanvas.tsx

@@ -7,6 +7,7 @@ import {
   zoomAreaIcon,
   ZoomInIcon,
   ZoomOutIcon,
+  ZoomToFitIcon,
   ZoomResetIcon,
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
@@ -438,6 +439,18 @@ export const actionZoomToFit = register({
     event.shiftKey &&
     !event.altKey &&
     !event[KEYS.CTRL_OR_CMD],
+  PanelComponent: ({ updateData, data }) => (
+    <ToolButton
+      type="button"
+      className="zoom-to-fit-button zoom-button"
+      icon={ZoomToFitIcon}
+      title={`${t("toolBar.zoomToFit")} — ${getShortcutKey("Shift+1")}`}
+      aria-label={t("toolBar.zoomToFit")}
+      onClick={() => {
+        updateData(null);
+      }}
+    />
+  ),
 });
 
 export const actionToggleTheme = register({

packages/excalidraw/appState.ts

@@ -94,6 +94,7 @@ export const getDefaultAppState = (): Omit<
       value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
+    hideLibraryButton: false,
     pendingImageElementId: null,
     showHyperlinkPopup: false,
     selectedLinearElement: null,
@@ -209,6 +210,7 @@ const APP_STATE_STORAGE_CONF = (<
   zenModeEnabled: { browser: true, export: false, server: false },
   zoom: { browser: true, export: false, server: false },
   viewModeEnabled: { browser: false, export: false, server: false },
+  hideLibraryButton: { browser: false, export: false, server: false },
   pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },

packages/excalidraw/clipboard.test.ts

@@ -6,39 +6,39 @@ import {
 import { API } from "./tests/helpers/api";
 
 describe("parseClipboard()", () => {
-  it("should parse JSON as plaintext if not excalidraw-api/clipboard data", async () => {
+  it("should parse JSON as plaintext if not excalidraw-api/clipboard data", () => {
     let text;
     let clipboardData;
     // -------------------------------------------------------------------------
 
     text = "123";
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({ types: { "text/plain": text } }),
     );
     expect(clipboardData.text).toBe(text);
 
     // -------------------------------------------------------------------------
 
     text = "[123]";
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({ types: { "text/plain": text } }),
     );
     expect(clipboardData.text).toBe(text);
 
     // -------------------------------------------------------------------------
 
     text = JSON.stringify({ val: 42 });
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({ types: { "text/plain": text } }),
     );
     expect(clipboardData.text).toBe(text);
   });
 
-  it("should parse valid excalidraw JSON if inside text/plain", async () => {
+  it("should parse valid excalidraw JSON if inside text/plain", () => {
     const rect = API.createElement({ type: "rectangle" });
 
     const json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    const clipboardData = await parseClipboard(
+    const clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/plain": json,
@@ -48,14 +48,14 @@ describe("parseClipboard()", () => {
     expect(clipboardData.elements).toEqual([rect]);
   });
 
-  it("should parse valid excalidraw JSON if inside text/html", async () => {
+  it("should parse valid excalidraw JSON if inside text/html", () => {
     const rect = API.createElement({ type: "rectangle" });
 
     let json;
     let clipboardData;
     // -------------------------------------------------------------------------
     json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": json,
@@ -65,7 +65,7 @@ describe("parseClipboard()", () => {
     expect(clipboardData.elements).toEqual([rect]);
     // -------------------------------------------------------------------------
     json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": `<div> ${json}</div>`,
@@ -76,10 +76,10 @@ describe("parseClipboard()", () => {
     // -------------------------------------------------------------------------
   });
 
-  it("should parse <image> `src` urls out of text/html", async () => {
+  it("should parse <image> `src` urls out of text/html", () => {
     let clipboardData;
     // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": `<img src="https://example.com/image.png" />`,
@@ -93,7 +93,7 @@ describe("parseClipboard()", () => {
       },
     ]);
     // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": `<div><img src="https://example.com/image.png" /></div><a><img src="https://example.com/image2.png" /></a>`,
@@ -112,8 +112,8 @@ describe("parseClipboard()", () => {
     ]);
   });
 
-  it("should parse text content alongside <image> `src` urls out of text/html", async () => {
-    const clipboardData = await parseClipboard(
+  it("should parse text content alongside <image> `src` urls out of text/html", () => {
+    const clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": `<a href="https://example.com">hello </a><div><img src="https://example.com/image.png" /></div><b>my friend!</b>`,
@@ -137,10 +137,10 @@ describe("parseClipboard()", () => {
     ]);
   });
 
-  it("should parse spreadsheet from either text/plain and text/html", async () => {
+  it("should parse spreadsheet from either text/plain and text/html", () => {
     let clipboardData;
     // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/plain": `a	b
@@ -156,7 +156,7 @@ describe("parseClipboard()", () => {
       values: [2, 5, 10],
     });
     // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": `a	b
@@ -172,7 +172,7 @@ describe("parseClipboard()", () => {
       values: [2, 5, 10],
     });
     // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
+    clipboardData = parseClipboard(
       createPasteEvent({
         types: {
           "text/html": `<html>

packages/excalidraw/clipboard.ts

@@ -295,10 +295,10 @@ export const readSystemClipboard = async () => {
 /**
  * Parses "paste" ClipboardEvent.
  */
-const parseClipboardEvent = async (
+const parseClipboardEvent = (
   event: ClipboardEvent,
   isPlainPaste = false,
-): Promise<ParsedClipboardEvent> => {
+): ParsedClipboardEvent => {
   try {
     const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
 
@@ -329,11 +329,11 @@ const parseClipboardEvent = async (
 /**
  * Attempts to parse clipboard. Prefers system clipboard.
  */
-export const parseClipboard = async (
+export const parseClipboard = (
   event: ClipboardEvent,
   isPlainPaste = false,
-): Promise<ClipboardData> => {
-  const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
+): ClipboardData => {
+  const parsedEventData = parseClipboardEvent(event, isPlainPaste);
 
   if (parsedEventData.type === "mixedContent") {
     return {

packages/excalidraw/components/Actions.scss

@@ -48,6 +48,22 @@
 }
 
 .zoom-in-button {
+  /*
+    Added zoom-to-fit button, so this button is no longer the last button, removed the rounded border:
+    border-top-right-radius: var(--border-radius-lg) !important;
+    border-bottom-right-radius: var(--border-radius-lg) !important;
+    */
+    :root[dir="rtl"] & {
+      transform: scaleX(-1);
+    }
+
+    .ToolIcon__icon {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+  }
+
+  .zoom-to-fit-button {
   border-top-right-radius: var(--border-radius-lg) !important;
   border-bottom-right-radius: var(--border-radius-lg) !important;
 

packages/excalidraw/components/Actions.tsx

@@ -429,6 +429,7 @@ export const ZoomActions = ({
       {renderAction("zoomOut")}
       {renderAction("resetZoom")}
       {renderAction("zoomIn")}
+      {renderAction("zoomToFit")}
     </Stack.Row>
   </Stack.Col>
 );