diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cc5cfa46cd..a9836e897d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -36,6 +36,7 @@
"i18next": "^17.0.13",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-xhr-backend": "^3.1.2",
+ "idb-keyval": "^6.2.2",
"is-hotkey": "0.2.0",
"MD5": "^1.3.0",
"mdast-util-gfm-autolink-literal": "2.0.0",
@@ -15468,6 +15469,12 @@
"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
"license": "ISC"
},
+ "node_modules/idb-keyval": {
+ "version": "6.2.2",
+ "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
+ "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+ "license": "Apache-2.0"
+ },
"node_modules/identity-obj-proxy": {
"version": "3.0.0",
"resolved": "https://registry.npmmirror.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 62717fa9ef..51eb5997e4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,6 +31,7 @@
"i18next": "^17.0.13",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-xhr-backend": "^3.1.2",
+ "idb-keyval": "^6.2.2",
"is-hotkey": "0.2.0",
"MD5": "^1.3.0",
"mdast-util-gfm-autolink-literal": "2.0.0",
diff --git a/frontend/src/excalidraw-editor.js b/frontend/src/excalidraw-editor.js
index 34d9ef2728..99b6cc8b90 100644
--- a/frontend/src/excalidraw-editor.js
+++ b/frontend/src/excalidraw-editor.js
@@ -6,7 +6,7 @@ import FileView from './components/file-view/file-view';
const ViewFileExcaliEditor = () => {
return (
- } isOnlyofficeFile={true} isHeaderShown={true} />
+ } isOnlyofficeFile={true} />
);
};
diff --git a/frontend/src/pages/excalidraw-editor/constants.js b/frontend/src/pages/excalidraw-editor/constants.js
index 8407f1f02b..2aab0e6017 100644
--- a/frontend/src/pages/excalidraw-editor/constants.js
+++ b/frontend/src/pages/excalidraw-editor/constants.js
@@ -13,3 +13,7 @@ export const langList = {
'de': 'de-DE',
'cs': 'cs-CZ',
};
+
+export const STORAGE_KEYS = {
+ IDB_LIBRARY: 'excalidraw-library',
+};
diff --git a/frontend/src/pages/excalidraw-editor/index.css b/frontend/src/pages/excalidraw-editor/index.css
index 04c8308dd0..24847317e0 100644
--- a/frontend/src/pages/excalidraw-editor/index.css
+++ b/frontend/src/pages/excalidraw-editor/index.css
@@ -15,3 +15,18 @@
.cur-view-detail {
z-index: 7;
}
+
+.excalidraw .context-menu-item-separator {
+ margin: 0;
+}
+
+.excalidraw .context-menu-item .context-menu-item__shortcut {
+ background-color: transparent;
+ color: #000;
+ padding: 0;
+}
+
+.excalidraw .popover {
+ filter: none;
+ --bs-popover-border-color: transparent;
+}
diff --git a/frontend/src/pages/excalidraw-editor/index.js b/frontend/src/pages/excalidraw-editor/index.js
index 2c1bb59912..7a6e0cd267 100644
--- a/frontend/src/pages/excalidraw-editor/index.js
+++ b/frontend/src/pages/excalidraw-editor/index.js
@@ -11,6 +11,7 @@ import ExdrawServerApi from './collab/exdraw-server-api';
import './index.css';
const { docUuid, excalidrawServerUrl } = window.app.pageOptions;
+window.name = `${docUuid}`;
const ExcaliEditor = () => {
const [fileContent, setFileContent] = useState(null);
diff --git a/frontend/src/pages/excalidraw-editor/library-adapter.js b/frontend/src/pages/excalidraw-editor/library-adapter.js
new file mode 100644
index 0000000000..a915b17e78
--- /dev/null
+++ b/frontend/src/pages/excalidraw-editor/library-adapter.js
@@ -0,0 +1,35 @@
+import {
+ createStore,
+ get,
+ set
+} from 'idb-keyval';
+import { STORAGE_KEYS } from './constants';
+
+export class LibraryIndexedDBAdapter {
+ /** IndexedDB database and store name */
+ static idb_name = STORAGE_KEYS.IDB_LIBRARY;
+ /** library data store key */
+ static key = 'libraryData';
+
+ static store = createStore(
+ `${LibraryIndexedDBAdapter.idb_name}-db`,
+ `${LibraryIndexedDBAdapter.idb_name}-store`,
+ );
+
+ static async load() {
+ const IDBData = await get(
+ LibraryIndexedDBAdapter.key,
+ LibraryIndexedDBAdapter.store,
+ );
+
+ return IDBData || null;
+ }
+
+ static save(data) {
+ return set(
+ LibraryIndexedDBAdapter.key,
+ data,
+ LibraryIndexedDBAdapter.store,
+ );
+ }
+}
diff --git a/frontend/src/pages/excalidraw-editor/simple-editor.js b/frontend/src/pages/excalidraw-editor/simple-editor.js
index a8870f09fa..4e109089dc 100644
--- a/frontend/src/pages/excalidraw-editor/simple-editor.js
+++ b/frontend/src/pages/excalidraw-editor/simple-editor.js
@@ -1,8 +1,9 @@
import React, { useEffect, useRef, useState } from 'react';
-import { Excalidraw, MainMenu } from '@excalidraw/excalidraw';
+import { Excalidraw, MainMenu, useHandleLibrary } from '@excalidraw/excalidraw';
import isHotkey from 'is-hotkey';
import CodeMirrorLoading from '../../components/code-mirror-loading';
import { langList } from './constants';
+import { LibraryIndexedDBAdapter } from './library-adapter';
import '@excalidraw/excalidraw/index.css';
@@ -21,6 +22,12 @@ const SimpleEditor = ({
},
tools: { image: false },
};
+
+ useHandleLibrary({
+ excalidrawAPI,
+ adapter: LibraryIndexedDBAdapter
+ });
+
const handleChange = () => {
const elements = excalidrawAPI.getSceneElements();
if (hasChanged(elements, prevElementsRef.current)) {