survey-library (#7846)

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",

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",

frontend/src/excalidraw-editor.js

@@ -6,7 +6,7 @@ import FileView from './components/file-view/file-view';
 
 const ViewFileExcaliEditor = () => {
   return (
-    <FileView content={<ExcaliEditor />} isOnlyofficeFile={true} isHeaderShown={true} />
+    <FileView content={<ExcaliEditor />} isOnlyofficeFile={true} />
   );
 };
 

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',
+};

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;
+}

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);

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,
+    );
+  }
+}

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)) {