wip

CHANGELOG.md

@@ -14,7 +14,7 @@ and this project adheres to
 - 📝Contributing.md #352
 - 🌐(frontend) add localization to editor #268
 - ✨Public and restricted doc editable #357
-
+- Add alert block
 ## Fixed
 
 - 🐛(backend) require right to manage document accesses to see invitations #369

src/frontend/apps/impress/next.config.js

@@ -1,4 +1,5 @@
 const crypto = require('crypto');
+const path = require('path');
 
 const { InjectManifest } = require('workbox-webpack-plugin');
 
@@ -11,6 +12,9 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'src')],
+  },
   compiler: {
     // Enables the styled-components SWC transform
     styledComponents: true,

src/frontend/apps/impress/package.json

@@ -33,6 +33,7 @@
     "react-dom": "*",
     "react-i18next": "15.0.3",
     "react-select": "5.8.1",
+    "sass": "1.80.4",
     "styled-components": "6.1.13",
     "y-protocols": "1.0.6",
     "yjs": "*",

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -19,6 +19,8 @@ const StyledPopover = styled(Popover)`
 
 const StyledButton = styled(Button)`
   cursor: pointer;
+  display: flex;
+
   border: none;
   background: none;
   outline: none;
@@ -29,7 +31,7 @@ const StyledButton = styled(Button)`
   text-wrap: nowrap;
 `;
 
-interface DropButtonProps {
+export interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,70 @@
+import { Button } from '@openfun/cunningham-react';
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+
+import { Box, DropButton, DropButtonProps } from '@/components';
+import { Icon } from '@/components/icons/Icon';
+
+export type DropdownMenuOption = {
+  icon?: string;
+  label: string;
+  callback?: () => void | Promise<unknown>;
+  danger?: boolean;
+};
+
+export type DropdownMenuProps = Omit<DropButtonProps, 'button'> & {
+  options: DropdownMenuOption[];
+  showArrow?: boolean;
+  arrowClassname?: string;
+};
+
+export const DropdownMenu = ({
+  options,
+  children,
+  showArrow = false,
+  arrowClassname,
+  ...dropButtonProps
+}: PropsWithChildren<DropdownMenuProps>) => {
+  const getButton = () => {
+    if (!showArrow) {
+      return children;
+    }
+
+    return (
+      <div className="flex">
+        <div>{children}</div>
+        <Icon
+          className={arrowClassname ?? 'clr-primary-500'}
+          icon={dropButtonProps.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <DropButton {...dropButtonProps} button={getButton()}>
+      <Box>
+        {options.map((option) => (
+          <Button
+            size="small"
+            key={option.label}
+            onClick={() => {
+              dropButtonProps.onOpenChange?.(false);
+              void option.callback?.();
+            }}
+            color="primary-text"
+            icon={
+              option.icon ? (
+                <span className="material-icons" aria-hidden="true">
+                  {option.icon}
+                </span>
+              ) : undefined
+            }
+          >
+            <span>{option.label}</span>
+          </Button>
+        ))}
+      </Box>
+    </DropButton>
+  );
+};

src/frontend/apps/impress/src/components/dropdown-menu/dropdown-menu.module.scss

@@ -0,0 +1,13 @@
+.simpleContent {
+  display: flex;
+  align-items: center;
+  gap: var(--c--theme--spacings--st);
+}
+
+
+.optionsContainer {
+  display: flex;
+  flex-direction: column;
+
+  align-items: flex-start;
+}

src/frontend/apps/impress/src/components/dropdown-menu/useDropdownMenu.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export const useDropdownMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onOpenChange = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  return {
+    isOpen,
+    onOpenChange,
+  };
+};

src/frontend/apps/impress/src/components/icons/Icon.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+type Props = {
+  icon: string;
+  className?: string;
+};
+export const Icon = ({ icon, className }: Props) => {
+  return <span className={`material-icons ${className}`}>{icon}</span>;
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -10,6 +10,8 @@ import { useTranslation } from 'react-i18next';
 import { Box, TextErrors } from '@/components';
 import { mediaUrl } from '@/core';
 import { useAuthStore } from '@/core/auth';
+import { blockNoteSchema } from '@/features/docs';
+import { SuggestionMenuEditor } from '@/features/docs/doc-editor/components/custom-blocks/suggestion-menu/SuggestionMenuEditor';
 import { Doc } from '@/features/docs/doc-management';
 import { Version } from '@/features/docs/doc-versioning/';
 
@@ -135,6 +137,7 @@ export const BlockNoteContent = ({
 
   const editor = useCreateBlockNote(
     {
+      schema: blockNoteSchema,
       collaboration: {
         provider,
         fragment: provider.document.getXmlFragment('document-store'),
@@ -165,26 +168,32 @@ export const BlockNoteContent = ({
     };
   }, [editor, resetHeadings, setHeadings]);
 
-  return (
-    <Box $css={cssEditor(readOnly)}>
-      {isErrorAttachment && (
-        <Box $margin={{ bottom: 'big' }}>
-          <TextErrors
-            causes={errorAttachment.cause}
-            canClose
-            $textAlign="left"
-          />
-        </Box>
-      )}
+  const goodEditor = storedEditor ?? editor;
 
-      <BlockNoteView
-        editor={storedEditor ?? editor}
-        formattingToolbar={false}
-        editable={!readOnly}
-        theme="light"
-      >
-        <BlockNoteToolbar />
-      </BlockNoteView>
-    </Box>
+  return (
+    <>
+      <Box $css={cssEditor(readOnly)}>
+        {isErrorAttachment && (
+          <Box $margin={{ bottom: 'big' }}>
+            <TextErrors
+              causes={errorAttachment.cause}
+              canClose
+              $textAlign="left"
+            />
+          </Box>
+        )}
+
+        <BlockNoteView
+          editor={goodEditor}
+          slashMenu={false}
+          formattingToolbar={false}
+          editable={!readOnly}
+          theme="light"
+        >
+          <SuggestionMenuEditor editor={goodEditor} />
+          <BlockNoteToolbar />
+        </BlockNoteView>
+      </Box>
+    </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/alert/AlertBlock.tsx

@@ -0,0 +1,81 @@
+import { defaultProps } from '@blocknote/core';
+import { createReactBlockSpec } from '@blocknote/react';
+import React from 'react';
+
+import {
+  DropdownMenu,
+  DropdownMenuOption,
+} from '@/components/dropdown-menu/DropdownMenu';
+import { useDropdownMenu } from '@/components/dropdown-menu/useDropdownMenu';
+
+import style from './alert-block.module.scss';
+
+const alertTypes = [
+  { value: 'default', icon: 'info' },
+  { value: 'warning', icon: 'warning' },
+  { value: 'info', icon: 'info' },
+  { value: 'error', icon: 'cancel' },
+  { value: 'success', icon: 'check_circle' },
+];
+
+export const Alert = createReactBlockSpec(
+  {
+    type: 'alert',
+    propSchema: {
+      textAlignment: defaultProps.textAlignment,
+      textColor: defaultProps.textColor,
+      type: {
+        default: 'default',
+        values: alertTypes.map((value) => value.value),
+      },
+    },
+    content: 'inline',
+  },
+  {
+    render: (props) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const dropdown = useDropdownMenu();
+      const aa: DropdownMenuOption[] = alertTypes.map((type) => {
+        return {
+          label: type.value,
+          icon: type.icon,
+          callback: () =>
+            void props.editor.updateBlock(props.block, {
+              type: 'alert',
+              props: { type: type.value },
+            }),
+        };
+      });
+
+      const getIcon = () => {
+        const index = alertTypes.findIndex(
+          (type) => type.value === props.block.props.type,
+        );
+
+        if (index >= 0) {
+          return alertTypes[index].icon;
+        }
+        return 'info';
+      };
+
+      return (
+        <div
+          className={`${style.alertContainer} ${style[props.block.props.type]}`}
+        >
+          <div contentEditable={false} className={style.icon}>
+            <DropdownMenu {...dropdown} options={aa}>
+              <span
+                className={`${style.alertIcon} material-icons`}
+                data-alert-icon-type={props.block.props.type}
+              >
+                {getIcon()}
+              </span>
+            </DropdownMenu>
+          </div>
+
+          <div className={`${style.content}`} ref={props.contentRef} />
+        </div>
+      );
+    },
+  },
+);

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/alert/alert-block.module.scss

@@ -0,0 +1,61 @@
+.alertContainer {
+  display: flex;
+  border-radius: 4px;
+  justify-content: flex-start;
+  align-items: center;
+  padding: var(--c--theme--spacings--s);
+  gap: var(--c--theme--spacings--t);
+  width: 100%;
+
+  &.default {
+    background: #f2f1ee; // To keep default coolor of BlockNote but maybe make a custom theme
+  }
+
+  &.warning {
+    background: #FEF7DA
+  }
+
+  &.error {
+    background: #FEE9E5
+
+  }
+
+  &.info {
+    background: #e6ebff
+  }
+
+  &.success {
+    background: #E3FDEB
+  }
+
+}
+
+.alertIcon {
+  &[data-alert-icon-type="warning"] {
+    color: #FBE769
+  }
+  &[data-alert-icon-type="error"] {
+    color: #E4794A
+  }
+  &[data-alert-icon-type="info"] {
+    color: #507aff
+  }
+  &[data-alert-icon-type="success"] {
+    color: #6FE49D
+  }
+}
+
+
+
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.content {
+  flex-grow: 1;
+}
+
+
+

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/alert/insertMenuAlertBlock.tsx

@@ -0,0 +1,25 @@
+import { insertOrUpdateBlock } from '@blocknote/core';
+
+import { blockNoteSchema } from '@/features/docs';
+
+export const insertMenuAlertBlock = (
+  editor: typeof blockNoteSchema.BlockNoteEditor,
+) => ({
+  title: 'Alert',
+  onItemClick: () => {
+    insertOrUpdateBlock(editor, {
+      type: 'alert',
+    });
+  },
+  aliases: [
+    'alert',
+    'notification',
+    'emphasize',
+    'warning',
+    'error',
+    'info',
+    'success',
+  ],
+  group: 'Other',
+  icon: <span className="material-icons">infos</span>,
+});

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/suggestion-menu/SuggestionMenuEditor.tsx

@@ -0,0 +1,28 @@
+import { filterSuggestionItems } from '@blocknote/core';
+import {
+  SuggestionMenuController,
+  getDefaultReactSlashMenuItems,
+} from '@blocknote/react';
+import * as React from 'react';
+
+import { DocsEditor } from '@/features/docs';
+import { insertMenuAlertBlock } from '@/features/docs/doc-editor/components/custom-blocks/alert/insertMenuAlertBlock';
+
+type Props = {
+  editor: DocsEditor;
+};
+export const SuggestionMenuEditor = ({ editor }: Props) => {
+  const getItem = async (query: string): Promise<never[]> => {
+    return new Promise((resolve) => {
+      const result = filterSuggestionItems(
+        [
+          ...getDefaultReactSlashMenuItems(editor),
+          insertMenuAlertBlock(editor),
+        ],
+        query,
+      );
+      resolve(result as never[]);
+    });
+  };
+  return <SuggestionMenuController triggerCharacter="/" getItems={getItem} />;
+};

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx

@@ -1,16 +1,16 @@
-import { BlockNoteEditor } from '@blocknote/core';
 import { HocuspocusProvider } from '@hocuspocus/provider';
 import * as Y from 'yjs';
 import { create } from 'zustand';
 
 import { providerUrl } from '@/core';
+import { DocsEditor } from '@/features/docs';
 import { Base64, Doc } from '@/features/docs/doc-management';
 
 import { blocksToYDoc } from '../utils';
 
 interface DocStore {
   provider: HocuspocusProvider;
-  editor?: BlockNoteEditor;
+  editor?: DocsEditor;
 }
 
 export interface UseDocStore {

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useHeadingStore.tsx

@@ -1,7 +1,6 @@
-import { BlockNoteEditor } from '@blocknote/core';
 import { create } from 'zustand';
 
-import { HeadingBlock } from '../types';
+import { DocsEditor, HeadingBlock } from '../types';
 
 const recursiveTextContent = (content: HeadingBlock['content']): string => {
   if (!content) {
@@ -21,7 +20,7 @@ const recursiveTextContent = (content: HeadingBlock['content']): string => {
 
 export interface UseHeadingStore {
   headings: HeadingBlock[];
-  setHeadings: (editor: BlockNoteEditor) => void;
+  setHeadings: (editor: DocsEditor) => void;
   resetHeadings: () => void;
 }
 

src/frontend/apps/impress/src/features/docs/doc-editor/types.tsx

@@ -1,3 +1,7 @@
+import { BlockNoteSchema, defaultBlockSpecs } from '@blocknote/core';
+
+import { Alert } from '@/features/docs/doc-editor/components/custom-blocks/alert/AlertBlock';
+
 export interface DocAttachment {
   file: string;
 }
@@ -12,3 +16,14 @@ export type HeadingBlock = {
     level: number;
   };
 };
+
+export const blockNoteSchema = BlockNoteSchema.create({
+  blockSpecs: {
+    // Adds all default blocks.
+    ...defaultBlockSpecs,
+    // Adds the Alert block.
+    alert: Alert,
+  },
+});
+
+export type DocsEditor = typeof blockNoteSchema.BlockNoteEditor;

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -129,7 +129,6 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
               icon={<span className="material-icons">summarize</span>}
               size="small"
             >
-              {t('Table of contents')}
             </Button>
             <Button
               onClick={() => {

src/frontend/yarn.lock

@@ -1007,7 +1007,7 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@blocknote/core@*", "@blocknote/core@0.17.1", "@blocknote/core@^0.17.1":
+"@blocknote/core@*", "@blocknote/core@^0.17.1":
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/@blocknote/core/-/core-0.17.1.tgz#78ba9f31648f32a293e6605cea6c3569cbb28551"
   integrity sha512-wNfdmzCBjghVZMT3Wm7IbAXPm0u2YuPkYxz8YdW8qyvk+6U+Hp60WVcBv/phGiomFfhJ4R+u0tEwD6mXDCyLrg==
@@ -1054,7 +1054,7 @@
     y-protocols "^1.0.6"
     yjs "^13.6.15"
 
-"@blocknote/mantine@*", "@blocknote/mantine@0.17.1":
+"@blocknote/mantine@*":
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/@blocknote/mantine/-/mantine-0.17.1.tgz#f701d4efdba81ab7c1f8cf89d0df013448130c06"
   integrity sha512-K3Y+6uyhO70rBCAZDrW1/D+ZQm2/g6+QeN15XRq2d210IXsSVM051xgNyDEk2vpMYVNf+WJyRXHR3FoN2vc77A==
@@ -1068,7 +1068,7 @@
     react-dom "^18"
     react-icons "^5.2.1"
 
-"@blocknote/react@*", "@blocknote/react@0.17.1", "@blocknote/react@^0.17.1":
+"@blocknote/react@*", "@blocknote/react@^0.17.1":
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/@blocknote/react/-/react-0.17.1.tgz#2e10b3e6f610274995efd8ee6faa779b9bf0b178"
   integrity sha512-9irtckfgxGcTmf+8JZF61l3slu6ET4famWUtPCOXcI7a1M8uSS86bagq19qYmPVutTnUXP6K8T6svOfUn14W7Q==
@@ -1973,6 +1973,89 @@
     figlet "1.7.0"
     ts-node "10.9.2"
 
+"@parcel/watcher-android-arm64@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz#c2c19a3c442313ff007d2d7a9c2c1dd3e1c9ca84"
+  integrity sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==
+
+"@parcel/watcher-darwin-arm64@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz#c817c7a3b4f3a79c1535bfe54a1c2818d9ffdc34"
+  integrity sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==
+
+"@parcel/watcher-darwin-x64@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz#1a3f69d9323eae4f1c61a5f480a59c478d2cb020"
+  integrity sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==
+
+"@parcel/watcher-freebsd-x64@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz#0d67fef1609f90ba6a8a662bc76a55fc93706fc8"
+  integrity sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==
+
+"@parcel/watcher-linux-arm-glibc@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz#ce5b340da5829b8e546bd00f752ae5292e1c702d"
+  integrity sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==
+
+"@parcel/watcher-linux-arm64-glibc@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz#6d7c00dde6d40608f9554e73998db11b2b1ff7c7"
+  integrity sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==
+
+"@parcel/watcher-linux-arm64-musl@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz#bd39bc71015f08a4a31a47cd89c236b9d6a7f635"
+  integrity sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==
+
+"@parcel/watcher-linux-x64-glibc@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz#0ce29966b082fb6cdd3de44f2f74057eef2c9e39"
+  integrity sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==
+
+"@parcel/watcher-linux-x64-musl@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz#d2ebbf60e407170bb647cd6e447f4f2bab19ad16"
+  integrity sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==
+
+"@parcel/watcher-win32-arm64@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz#eb4deef37e80f0b5e2f215dd6d7a6d40a85f8adc"
+  integrity sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==
+
+"@parcel/watcher-win32-ia32@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz#94fbd4b497be39fd5c8c71ba05436927842c9df7"
+  integrity sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==
+
+"@parcel/watcher-win32-x64@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz#4bf920912f67cae5f2d264f58df81abfea68dadf"
+  integrity sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==
+
+"@parcel/watcher@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.4.1.tgz#a50275151a1bb110879c6123589dba90c19f1bf8"
+  integrity sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==
+  dependencies:
+    detect-libc "^1.0.3"
+    is-glob "^4.0.3"
+    micromatch "^4.0.5"
+    node-addon-api "^7.0.0"
+  optionalDependencies:
+    "@parcel/watcher-android-arm64" "2.4.1"
+    "@parcel/watcher-darwin-arm64" "2.4.1"
+    "@parcel/watcher-darwin-x64" "2.4.1"
+    "@parcel/watcher-freebsd-x64" "2.4.1"
+    "@parcel/watcher-linux-arm-glibc" "2.4.1"
+    "@parcel/watcher-linux-arm64-glibc" "2.4.1"
+    "@parcel/watcher-linux-arm64-musl" "2.4.1"
+    "@parcel/watcher-linux-x64-glibc" "2.4.1"
+    "@parcel/watcher-linux-x64-musl" "2.4.1"
+    "@parcel/watcher-win32-arm64" "2.4.1"
+    "@parcel/watcher-win32-ia32" "2.4.1"
+    "@parcel/watcher-win32-x64" "2.4.1"
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -3956,7 +4039,7 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
   integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
 
-"@types/node@*", "@types/node@20.16.13":
+"@types/node@*":
   version "20.16.13"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.16.13.tgz#148c152d757dc73f8d65f0f6f078f39050b85b0c"
   integrity sha512-GjQ7im10B0labo8ZGXDGROUl9k0BNyDgzfGpb4g/cl+4yYDWVKcozANF4FGr4/p0O/rAkQClM6Wiwkije++1Tg==
@@ -3983,7 +4066,7 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
   integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
 
-"@types/react-dom@*", "@types/react-dom@18.3.1":
+"@types/react-dom@*":
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07"
   integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==
@@ -4074,7 +4157,7 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@*", "@typescript-eslint/eslint-plugin@8.10.0", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+"@typescript-eslint/eslint-plugin@*", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.10.0.tgz#9c8218ed62f9a322df10ded7c34990f014df44f2"
   integrity sha512-phuB3hoP7FFKbRXxjl+DRlQDuJqhpOnm5MmtROXyWi3uS/Xg2ZXqiQfcG2BJHiN4QKyzdOJi3NEn/qTnjUlkmQ==
@@ -4089,7 +4172,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^1.3.0"
 
-"@typescript-eslint/parser@*", "@typescript-eslint/parser@8.10.0", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
+"@typescript-eslint/parser@*", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.10.0.tgz#3cbe7206f5e42835878a74a76da533549f977662"
   integrity sha512-E24l90SxuJhytWJ0pTQydFT46Nk0Z+bsLKo/L8rtQSL93rQ6byd1V/QbDpHUTdLPOMsBCcYXZweADNCfOCmOAg==
@@ -5062,6 +5145,13 @@ chokidar@^3.5.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+chokidar@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.1.tgz#4a6dff66798fb0f72a94f616abbd7e1a19f31d41"
+  integrity sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==
+  dependencies:
+    readdirp "^4.0.1"
+
 chromatic@11.7.1:
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.7.1.tgz#9de59dd9d0e2a847627bccd959f05881335b524e"
@@ -5295,7 +5385,7 @@ crelt@^1.0.0:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
-cross-env@*, cross-env@7.0.3:
+cross-env@*:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
   integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
@@ -5570,6 +5660,11 @@ dequal@^2.0.0, dequal@^2.0.3:
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
+detect-libc@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -6176,7 +6271,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@*, eslint@8.57.0:
+eslint@*:
   version "8.57.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
@@ -7248,6 +7343,11 @@ ignore@^6.0.2:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-6.0.2.tgz#77cccb72a55796af1b6d2f9eb14fa326d24f4283"
   integrity sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==
 
+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -8909,7 +9009,7 @@ micromark@^3.0.0:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
-micromatch@^4.0.4, micromatch@^4.0.8:
+micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -9036,6 +9136,11 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-addon-api@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
+  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
+
 node-ensure@^0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
@@ -10082,6 +10187,11 @@ readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readdirp@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.0.2.tgz#388fccb8b75665da3abffe2d8f8ed59fe74c230a"
+  integrity sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -10426,6 +10536,16 @@ safe-regex-test@^1.0.3:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.80.4:
+  version "1.80.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.4.tgz#bc0418fd796cad2f1a1309d8b4d7fe44b7027de0"
+  integrity sha512-rhMQ2tSF5CsuuspvC94nPM9rToiAFw2h3JTrLlgmNw1MH79v8Cr3DH6KF6o6r+8oofY3iYVPUf66KzC8yuVN1w==
+  dependencies:
+    "@parcel/watcher" "^2.4.1"
+    chokidar "^4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 saxes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
@@ -10576,7 +10696,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -11369,7 +11489,7 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@*, typescript@5.6.3, typescript@^5.0.4:
+typescript@*, typescript@^5.0.4:
   version "5.6.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
   integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
@@ -12264,7 +12384,7 @@ yargs@17.7.2, yargs@^17.3.1:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-yjs@*, yjs@13.6.20, yjs@^13.6.15:
+yjs@*, yjs@^13.6.15:
   version "13.6.20"
   resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.6.20.tgz#da878412688f107dc03faa4fc3cff37736fe5dfa"
   integrity sha512-Z2YZI+SYqK7XdWlloI3lhMiKnCdFCVC4PchpdO+mCYwtiTwncjUbnRK9R1JmkNfdmHyDXuWN3ibJAt0wsqTbLQ==