survey-library (#7846)

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