@lofcz/platejs-excalidraw 52.0.11

package/LICENSE

@@ -0,0 +1,24 @@
+The MIT License (MIT)
+
+Copyright (c) Ziad Beyens, Dylan Schiemann, Joe Anderson, Felix Feng
+
+Unless otherwise specified in a LICENSE file within an individual package directory,
+this license applies to all files in this repository outside of those package directories.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# Plate excalidraw plugin
+
+This package implements the excalidraw plugin for Plate.
+
+## Documentation
+
+Check out
+[Excalidraw](https://platejs.org/docs/excalidraw).
+
+## License
+
+[MIT](../../LICENSE)

package/dist/BaseExcalidrawPlugin-oKI6R2oh.js

@@ -0,0 +1,15 @@
+import { KEYS, createSlatePlugin } from "platejs";
+
+//#region src/lib/BaseExcalidrawPlugin.ts
+/** Enables support for Excalidraw drawing tool within a Slate document */
+const BaseExcalidrawPlugin = createSlatePlugin({
+	key: KEYS.excalidraw,
+	node: {
+		isElement: true,
+		isVoid: true
+	}
+});
+
+//#endregion
+export { BaseExcalidrawPlugin as t };
+//# sourceMappingURL=BaseExcalidrawPlugin-oKI6R2oh.js.map

package/dist/BaseExcalidrawPlugin-oKI6R2oh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseExcalidrawPlugin-oKI6R2oh.js","names":["TElement","createSlatePlugin","KEYS","ExcalidrawDataState","TExcalidrawElement","data","elements","state","BaseExcalidrawPlugin","key","excalidraw","node","isElement","isVoid"],"sources":["../src/lib/BaseExcalidrawPlugin.ts"],"sourcesContent":["import { type TElement, createSlatePlugin, KEYS } from 'platejs';\n\nimport type { ExcalidrawDataState } from './types';\n\nexport interface TExcalidrawElement extends TElement {\n  data?: {\n    elements: ExcalidrawDataState['elements'];\n    state: ExcalidrawDataState['appState'];\n  } | null;\n}\n\n/** Enables support for Excalidraw drawing tool within a Slate document */\nexport const BaseExcalidrawPlugin = createSlatePlugin({\n  key: KEYS.excalidraw,\n  node: { isElement: true, isVoid: true },\n});\n"],"mappings":";;;;AAYA,MAAaQ,uBAAuBP,kBAAkB;CACpDQ,KAAKP,KAAKQ;CACVC,MAAM;EAAEC,WAAW;EAAMC,QAAQ;EAAK;CACvC,CAAC"}

package/dist/index-B5LkMtZs.d.ts

@@ -0,0 +1,24 @@
+import { InsertNodesOptions, NodeProps, SlateEditor, TElement } from "platejs";
+import { ImportedDataState } from "@excalidraw/excalidraw/data/types";
+import { ExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+
+//#region src/lib/types.d.ts
+interface ExcalidrawDataState extends Omit<ImportedDataState, 'elements'> {
+  elements?: readonly Partial<ExcalidrawElement>[] | null;
+}
+//#endregion
+//#region src/lib/BaseExcalidrawPlugin.d.ts
+interface TExcalidrawElement extends TElement {
+  data?: {
+    elements: ExcalidrawDataState['elements'];
+    state: ExcalidrawDataState['appState'];
+  } | null;
+}
+/** Enables support for Excalidraw drawing tool within a Slate document */
+declare const BaseExcalidrawPlugin: any;
+//#endregion
+//#region src/lib/transforms/insertExcalidraw.d.ts
+declare const insertExcalidraw: (editor: SlateEditor, props?: NodeProps<TExcalidrawElement>, options?: InsertNodesOptions) => void;
+//#endregion
+export { ExcalidrawDataState as i, BaseExcalidrawPlugin as n, TExcalidrawElement as r, insertExcalidraw as t };
+//# sourceMappingURL=index-B5LkMtZs.d.ts.map

package/dist/index-B5LkMtZs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-B5LkMtZs.d.ts","names":[],"sources":["../src/lib/types.ts","../src/lib/BaseExcalidrawPlugin.ts","../src/lib/transforms/insertExcalidraw.ts"],"sourcesContent":[],"mappings":";;;;;UAGiB,mBAAA,SACP,KAAK;sBACO,QAAQ;;;;UCDb,kBAAA,SAA2B;;cAE9B;IDHG,KAAA,ECIN,mBDHT,CAAA,UAAA,CAAA;EAAa,CAAA,GAAA,IAAA;;;AAAL,cCQG,oBDRH,EAAA,GAAA;;;cEEG,2BACH,qBACD,UAAU,+BACR"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { i as ExcalidrawDataState, n as BaseExcalidrawPlugin, r as TExcalidrawElement, t as insertExcalidraw } from "./index-B5LkMtZs";
+export { BaseExcalidrawPlugin, ExcalidrawDataState, TExcalidrawElement, insertExcalidraw };

package/dist/index.js

@@ -0,0 +1,23 @@
+import { t as BaseExcalidrawPlugin } from "./BaseExcalidrawPlugin-oKI6R2oh.js";
+import { KEYS } from "platejs";
+
+//#region src/lib/transforms/insertExcalidraw.ts
+const insertExcalidraw = (editor, props = {}, options = {}) => {
+	if (!editor.selection) return;
+	const selectionParentEntry = editor.api.parent(editor.selection);
+	if (!selectionParentEntry) return;
+	const [, path] = selectionParentEntry;
+	editor.tf.insertNodes({
+		children: [{ text: "" }],
+		type: editor.getType(KEYS.excalidraw),
+		...props
+	}, {
+		at: path,
+		nextBlock: true,
+		...options
+	});
+};
+
+//#endregion
+export { BaseExcalidrawPlugin, insertExcalidraw };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["InsertNodesOptions","NodeProps","SlateEditor","KEYS","TExcalidrawElement","insertExcalidraw","editor","props","options","selection","selectionParentEntry","api","parent","path","tf","insertNodes","children","text","type","getType","excalidraw","at","nextBlock"],"sources":["../src/lib/transforms/insertExcalidraw.ts"],"sourcesContent":["import type { InsertNodesOptions, NodeProps, SlateEditor } from 'platejs';\n\nimport { KEYS } from 'platejs';\n\nimport type { TExcalidrawElement } from '../BaseExcalidrawPlugin';\n\nexport const insertExcalidraw = (\n  editor: SlateEditor,\n  props: NodeProps<TExcalidrawElement> = {},\n  options: InsertNodesOptions = {}\n): void => {\n  if (!editor.selection) return;\n\n  const selectionParentEntry = editor.api.parent(editor.selection);\n\n  if (!selectionParentEntry) return;\n\n  const [, path] = selectionParentEntry;\n\n  editor.tf.insertNodes<TExcalidrawElement>(\n    {\n      children: [{ text: '' }],\n      type: editor.getType(KEYS.excalidraw),\n      ...props,\n    },\n    { at: path, nextBlock: true, ...(options as any) }\n  );\n};\n"],"mappings":";;;;AAMA,MAAaK,oBACXC,QACAC,QAAuC,EAAE,EACzCC,UAA8B,EAAE,KACvB;AACT,KAAI,CAACF,OAAOG,UAAW;CAEvB,MAAMC,uBAAuBJ,OAAOK,IAAIC,OAAON,OAAOG,UAAU;AAEhE,KAAI,CAACC,qBAAsB;CAE3B,MAAM,GAAGG,QAAQH;AAEjBJ,QAAOQ,GAAGC,YACR;EACEC,UAAU,CAAC,EAAEC,MAAM,IAAI,CAAC;EACxBC,MAAMZ,OAAOa,QAAQhB,KAAKiB,WAAW;EACrC,GAAGb;EACJ,EACD;EAAEc,IAAIR;EAAMS,WAAW;EAAM,GAAId;EACnC,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,27 @@
+import { i as ExcalidrawDataState, r as TExcalidrawElement } from "../index-B5LkMtZs";
+import { ExcalidrawProps, LibraryItems } from "@excalidraw/excalidraw/types";
+
+//#region src/react/ExcalidrawPlugin.d.ts
+declare const ExcalidrawPlugin: any;
+//#endregion
+//#region src/react/types.d.ts
+interface TExcalidrawProps extends Omit<ExcalidrawProps, 'initialData'> {
+  initialData: ExcalidrawDataState | Promise<ExcalidrawDataState | null> | null;
+}
+//#endregion
+//#region src/react/hooks/useExcalidrawElement.d.ts
+declare const useExcalidrawElement: ({
+  element,
+  libraryItems,
+  scrollToContent
+}: {
+  element: TExcalidrawElement;
+  libraryItems?: LibraryItems;
+  scrollToContent?: boolean;
+}) => {
+  Excalidraw: any;
+  excalidrawProps: TExcalidrawProps;
+};
+//#endregion
+export { ExcalidrawPlugin, TExcalidrawProps, useExcalidrawElement };
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/react/ExcalidrawPlugin.tsx","../../src/react/types.ts","../../src/react/hooks/useExcalidrawElement.ts"],"sourcesContent":[],"mappings":";;;;cAIa;;;UCCI,gBAAA,SAAyB,KAAK;eAChC,sBAAsB,QAAQ;ADF7C;;;cEWa;;;;;EFXA,OAAA,EEgBF,kBFhBwD;iBEiBlD;;;EDhBA,UAAA,EAAA,GAAA;EAA8B,eAAA,kBAAA;CAChC"}

package/dist/react/index.js

@@ -0,0 +1,66 @@
+import { t as BaseExcalidrawPlugin } from "../BaseExcalidrawPlugin-oKI6R2oh.js";
+import { toPlatePlugin, useEditorRef, useReadOnly } from "platejs/react";
+import React from "react";
+import { cloneDeep, isEqual } from "lodash";
+
+//#region src/react/ExcalidrawPlugin.tsx
+const ExcalidrawPlugin = toPlatePlugin(BaseExcalidrawPlugin);
+
+//#endregion
+//#region src/react/hooks/useExcalidrawElement.ts
+const useExcalidrawElement = ({ element, libraryItems = [], scrollToContent = true }) => {
+	const [Excalidraw, setExcalidraw] = React.useState(null);
+	const editor = useEditorRef();
+	const readOnly = useReadOnly();
+	const lastSavedDataRef = React.useRef(null);
+	React.useEffect(() => {
+		import("@excalidraw/excalidraw").then((comp) => setExcalidraw(comp.Excalidraw));
+	});
+	const _excalidrawRef = React.useRef(null);
+	const handleChange = React.useCallback((elements, state) => {
+		if (readOnly) return;
+		const newData = {
+			elements: cloneDeep(elements),
+			state: cloneDeep(state)
+		};
+		if (lastSavedDataRef.current && isEqual(lastSavedDataRef.current, newData)) return;
+		try {
+			const path = editor.api.findPath(element);
+			if (path) {
+				lastSavedDataRef.current = newData;
+				editor.tf.setNodes({ data: newData }, { at: path });
+			}
+		} catch (error) {
+			console.error("Failed to save Excalidraw data:", error);
+		}
+	}, [
+		editor,
+		element,
+		readOnly
+	]);
+	return {
+		Excalidraw,
+		excalidrawProps: {
+			autoFocus: false,
+			initialData: React.useMemo(() => ({
+				appState: element.data?.state ? cloneDeep(element.data.state) : void 0,
+				elements: element.data?.elements ? cloneDeep(element.data.elements) : [],
+				libraryItems: cloneDeep(libraryItems),
+				scrollToContent
+			}), [
+				element.data?.state,
+				element.data?.elements,
+				libraryItems,
+				scrollToContent
+			]),
+			excalidrawAPI: (api) => {
+				_excalidrawRef.current = api;
+			},
+			onChange: readOnly ? void 0 : handleChange
+		}
+	};
+};
+
+//#endregion
+export { ExcalidrawPlugin, useExcalidrawElement };
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["toPlatePlugin","BaseExcalidrawPlugin","ExcalidrawPlugin","React","OrderedExcalidrawElement","AppState","ExcalidrawImperativeAPI","LibraryItems","cloneDeep","isEqual","useEditorRef","useReadOnly","TExcalidrawElement","TExcalidrawProps","useExcalidrawElement","element","libraryItems","scrollToContent","Excalidraw","setExcalidraw","useState","editor","readOnly","lastSavedDataRef","useRef","elements","state","useEffect","then","comp","_excalidrawRef","handleChange","useCallback","newData","current","path","api","findPath","tf","setNodes","data","at","error","console","initialData","useMemo","appState","undefined","excalidrawProps","autoFocus","excalidrawAPI","onChange"],"sources":["../../src/react/ExcalidrawPlugin.tsx","../../src/react/hooks/useExcalidrawElement.ts"],"sourcesContent":["import { toPlatePlugin } from 'platejs/react';\n\nimport { BaseExcalidrawPlugin } from '../lib';\n\nexport const ExcalidrawPlugin = toPlatePlugin(BaseExcalidrawPlugin);\n","import React from 'react';\n\nimport type { OrderedExcalidrawElement } from '@excalidraw/excalidraw/element/types';\nimport type {\n  AppState,\n  ExcalidrawImperativeAPI,\n  LibraryItems,\n} from '@excalidraw/excalidraw/types';\n\nimport { cloneDeep, isEqual } from 'lodash';\nimport { useEditorRef, useReadOnly } from 'platejs/react';\n\nimport type { TExcalidrawElement } from '../../lib';\nimport type { TExcalidrawProps } from '../types';\n\nexport const useExcalidrawElement = ({\n  element,\n  libraryItems = [],\n  scrollToContent = true,\n}: {\n  element: TExcalidrawElement;\n  libraryItems?: LibraryItems;\n  scrollToContent?: boolean;\n}) => {\n  const [Excalidraw, setExcalidraw] = React.useState<any>(null);\n  const editor = useEditorRef();\n  const readOnly = useReadOnly();\n\n  // Store last saved data for deduplication\n  const lastSavedDataRef = React.useRef<{ elements: any; state: any } | null>(\n    null\n  );\n\n  React.useEffect(() => {\n    void import('@excalidraw/excalidraw').then((comp) =>\n      setExcalidraw(comp.Excalidraw)\n    );\n  });\n\n  const _excalidrawRef = React.useRef<ExcalidrawImperativeAPI>(null);\n\n  // Create save function with deduplication only\n  const handleChange = React.useCallback(\n    (elements: readonly OrderedExcalidrawElement[], state: AppState) => {\n      if (readOnly) return;\n\n      // Create deep copies to avoid read-only property errors\n      const newData = {\n        elements: cloneDeep(elements),\n        state: cloneDeep(state),\n      };\n\n      // Use lodash isEqual for deep comparison and deduplication\n      if (\n        lastSavedDataRef.current &&\n        isEqual(lastSavedDataRef.current, newData)\n      ) {\n        return;\n      }\n\n      try {\n        const path = editor.api.findPath(element);\n        if (path) {\n          lastSavedDataRef.current = newData;\n          editor.tf.setNodes({ data: newData }, { at: path });\n        }\n      } catch (error) {\n        console.error('Failed to save Excalidraw data:', error);\n      }\n    },\n    [editor, element, readOnly]\n  );\n\n  // Create mutable copies of initial data to ensure Excalidraw can modify them\n  const initialData = React.useMemo(\n    () => ({\n      appState: element.data?.state ? cloneDeep(element.data.state) : undefined,\n      elements: element.data?.elements ? cloneDeep(element.data.elements) : [],\n      libraryItems: cloneDeep(libraryItems),\n      scrollToContent,\n    }),\n    [element.data?.state, element.data?.elements, libraryItems, scrollToContent]\n  );\n\n  const excalidrawProps: TExcalidrawProps = {\n    autoFocus: false,\n    initialData,\n    excalidrawAPI: (api) => {\n      _excalidrawRef.current = api;\n    },\n    // Use deduplicated onChange handler without debouncing\n    onChange: readOnly ? undefined : handleChange,\n  };\n\n  return {\n    Excalidraw,\n    excalidrawProps,\n  };\n};\n"],"mappings":";;;;;;AAIA,MAAaE,mBAAmBF,cAAcC,qBAAqB;;;;ACWnE,MAAaa,wBAAwB,EACnCC,SACAC,eAAe,EAAE,EACjBC,kBAAkB,WAKd;CACJ,MAAM,CAACC,YAAYC,iBAAiBhB,MAAMiB,SAAc,KAAK;CAC7D,MAAMC,SAASX,cAAc;CAC7B,MAAMY,WAAWX,aAAa;CAG9B,MAAMY,mBAAmBpB,MAAMqB,OAC7B,KACD;AAEDrB,OAAMwB,gBAAgB;AACpB,EAAK,OAAO,0BAA0BC,MAAMC,SAC1CV,cAAcU,KAAKX,WACrB,CAAC;GACD;CAEF,MAAMY,iBAAiB3B,MAAMqB,OAAgC,KAAK;CAGlE,MAAMO,eAAe5B,MAAM6B,aACxBP,UAA+CC,UAAoB;AAClE,MAAIJ,SAAU;EAGd,MAAMW,UAAU;GACdR,UAAUjB,UAAUiB,SAAS;GAC7BC,OAAOlB,UAAUkB,MAAK;GACvB;AAGD,MACEH,iBAAiBW,WACjBzB,QAAQc,iBAAiBW,SAASD,QAAQ,CAE1C;AAGF,MAAI;GACF,MAAME,OAAOd,OAAOe,IAAIC,SAAStB,QAAQ;AACzC,OAAIoB,MAAM;AACRZ,qBAAiBW,UAAUD;AAC3BZ,WAAOiB,GAAGC,SAAS,EAAEC,MAAMP,SAAS,EAAE,EAAEQ,IAAIN,MAAM,CAAC;;WAE9CO,OAAO;AACdC,WAAQD,MAAM,mCAAmCA,MAAM;;IAG3D;EAACrB;EAAQN;EAASO;EACpB,CAAC;AAuBD,QAAO;EACLJ;EACA8B,iBAZwC;GACxCC,WAAW;GACXL,aAZkBzC,MAAM0C,eACjB;IACLC,UAAU/B,QAAQyB,MAAMd,QAAQlB,UAAUO,QAAQyB,KAAKd,MAAM,GAAGqB;IAChEtB,UAAUV,QAAQyB,MAAMf,WAAWjB,UAAUO,QAAQyB,KAAKf,SAAS,GAAG,EAAE;IACxET,cAAcR,UAAUQ,aAAa;IACrCC;IACD,GACD;IAACF,QAAQyB,MAAMd;IAAOX,QAAQyB,MAAMf;IAAUT;IAAcC;IAC9D,CAAC;GAKCiC,gBAAgBd,QAAQ;AACtBN,mBAAeI,UAAUE;;GAG3Be,UAAU7B,WAAWyB,SAAYhB;GAClC;EAKA"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@lofcz/platejs-excalidraw",
+  "version": "52.0.11",
+  "description": "Excalidraw plugin for Plate",
+  "keywords": [
+    "plate",
+    "plugin",
+    "slate"
+  ],
+  "homepage": "https://platejs.org",
+  "bugs": {
+    "url": "https://github.com/udecode/plate/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lofcz/plate.git",
+    "directory": "packages/excalidraw"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./react": "./dist/react/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.18.0",
+    "lodash": "^4.17.21",
+    "react-compiler-runtime": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.13",
+    "@plate/scripts": "1.0.0"
+  },
+  "peerDependencies": {
+    "platejs": ">=52.0.11",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "module": "./dist/index.js",
+  "scripts": {
+    "brl": "plate-pkg p:brl",
+    "build": "plate-pkg p:build",
+    "build:watch": "plate-pkg p:build:watch",
+    "clean": "plate-pkg p:clean",
+    "lint": "plate-pkg p:lint",
+    "lint:fix": "plate-pkg p:lint:fix",
+    "test": "plate-pkg p:test",
+    "test:watch": "plate-pkg p:test:watch",
+    "typecheck": "plate-pkg p:typecheck"
+  }
+}