alineacms · benmerckx · Jan 18, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,5 +1,7 @@
 compressionLevel: mixed
 
+enableGlobalCache: false
+
 logFilters:
   - code: YN0002
     level: discard

diff --git a/apps/dev/src/schema/example/RichTextFields.tsx b/apps/dev/src/schema/example/RichTextFields.tsx
@@ -18,6 +18,7 @@ export const RichTextFields = Config.document('Rich text fields', {
     }),
     makeRO: Field.check('Make read-only'),
     nested: Field.richText('With nested blocks', {
+      enableTables: true,
       schema: {
         Inner: Config.type('Inner', {
           fields: {

diff --git a/build.js b/build.js
@@ -361,7 +361,12 @@ function jsEntry({watch, test, report}) {
                 'lib0/webcrypto': `data:text/javascript,
                   import {crypto} from '@alinea/iso'
                   export const subtle = crypto.subtle
-                  export const getRandomValues = crypto.getRandomValues.bind(crypto)`
+                  export const getRandomValues = crypto.getRandomValues.bind(crypto)`,
+
+                // Used in react-aria-components, not ESM
+                'use-sync-external-store/shim/index.js': `data:text/javascript,
+                  export {useSyncExternalStore} from 'react'
+                `
               },
               define: {
                 // See https://github.com/pmndrs/jotai/blob/2188d7557500e59c10415a9e74bb5cfc8a3f9c31/src/react/useSetAtom.ts#L33

diff --git a/src/dashboard/App.tsx b/src/dashboard/App.tsx
@@ -30,7 +30,6 @@ import {SuspenseBoundary} from './util/SuspenseBoundary.js'
 import {ErrorBoundary} from './view/ErrorBoundary.js'
 import {Modal} from './view/Modal.js'
 import {Sidebar} from './view/Sidebar.js'
-import {Toolbar} from './view/Toolbar.js'
 import {Viewport} from './view/Viewport.js'
 import {SidebarSettings} from './view/sidebar/SidebarSettings.js'
 
@@ -86,61 +85,59 @@ function AppAuthenticated() {
         </Modal>
       )}
       <Statusbar.Provider>
-        <Toolbar.Provider>
-          <Sidebar.Provider>
-            <Head>
-              <FavIcon color={color} />
-            </Head>
-            <div
-              style={{
-                flex: '1',
-                display: 'flex',
-                minHeight: 0,
-                position: 'relative'
-              }}
-            >
-              <Sidebar.Nav>
-                {Object.entries(roots).map(([key, root], i) => {
-                  const isSelected = key === currentRoot
-                  const {id, ...location} = entryLocation
-                  const link =
-                    location.root === key
-                      ? nav.entry(location)
-                      : nav.root({
-                          workspace,
-                          root: key,
-                          locale: preferredLanguage
-                        })
-                  const {label, icon} = Root.data(root)
-                  return (
-                    <Sidebar.Nav.Item
-                      key={key}
-                      selected={isEntry && isSelected}
-                      href={link}
-                      aria-label={label}
-                    >
-                      <Icon icon={icon ?? IcRoundDescription} />
-                    </Sidebar.Nav.Item>
-                  )
-                })}
-                {/*<DraftsButton />*/}
-                <SidebarSettings />
-              </Sidebar.Nav>
-              <ErrorBoundary>
-                <SuspenseBoundary name="main" fallback={<Loader absolute />}>
-                  <RouteView fallback={null} />
-                </SuspenseBoundary>
-              </ErrorBoundary>
-            </div>
-            {alineaDev && (
-              <Statusbar.Root>
-                <Statusbar.Status icon={MaterialSymbolsDatabase}>
-                  {meta.contentHash}
-                </Statusbar.Status>
-              </Statusbar.Root>
-            )}
-          </Sidebar.Provider>
-        </Toolbar.Provider>
+        <Sidebar.Provider>
+          <Head>
+            <FavIcon color={color} />
+          </Head>
+          <div
+            style={{
+              flex: '1',
+              display: 'flex',
+              minHeight: 0,
+              position: 'relative'
+            }}
+          >
+            <Sidebar.Nav>
+              {Object.entries(roots).map(([key, root], i) => {
+                const isSelected = key === currentRoot
+                const {id, ...location} = entryLocation
+                const link =
+                  location.root === key
+                    ? nav.entry(location)
+                    : nav.root({
+                        workspace,
+                        root: key,
+                        locale: preferredLanguage
+                      })
+                const {label, icon} = Root.data(root)
+                return (
+                  <Sidebar.Nav.Item
+                    key={key}
+                    selected={isEntry && isSelected}
+                    href={link}
+                    aria-label={label}
+                  >
+                    <Icon icon={icon ?? IcRoundDescription} />
+                  </Sidebar.Nav.Item>
+                )
+              })}
+              {/*<DraftsButton />*/}
+              <SidebarSettings />
+            </Sidebar.Nav>
+            <ErrorBoundary>
+              <SuspenseBoundary name="main" fallback={<Loader absolute />}>
+                <RouteView fallback={null} />
+              </SuspenseBoundary>
+            </ErrorBoundary>
+          </div>
+          {alineaDev && (
+            <Statusbar.Root>
+              <Statusbar.Status icon={MaterialSymbolsDatabase}>
+                {meta.contentHash}
+              </Statusbar.Status>
+            </Statusbar.Root>
+          )}
+        </Sidebar.Provider>
       </Statusbar.Provider>
     </>
   )

diff --git a/src/dashboard/package.json b/src/dashboard/package.json
@@ -5,7 +5,6 @@
     "@dnd-kit/core": "^3.1.1",
     "@dnd-kit/sortable": "^4.0.0",
     "@dnd-kit/utilities": "^2.0.0",
-    "@floating-ui/react-dom": "^0.7.1",
     "@headless-tree/core": "^0.0.8",
     "@headless-tree/react": "^0.0.7",
     "@headlessui/react": "^2.1.10",
@@ -21,6 +20,7 @@
     "lib0": "^0.2.88",
     "p-limit": "^4.0.0",
     "pretty-bytes": "^6.0.0",
+    "react-aria-components": "^1.0.1",
     "react-query": "^3.39.1",
     "react-tiny-virtual-list": "^2.2.0",
     "smartcrop": "^2.0.5",

diff --git a/src/dashboard/view/EntryEdit.module.scss b/src/dashboard/view/EntryEdit.module.scss
@@ -5,13 +5,21 @@
   flex-direction: column;
 
   &-tabs {
-    margin: auto;
-    padding: 0 calc(var(--alinea-main-padding-x) - 8px);
-    padding-bottom: 2px;
-    max-width: var(--alinea-main-width);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-grow: 1;
+    min-width: 0;
 
-    @include ml {
-      margin-top: -16px;
+    &-header {
+      margin: auto;
+      padding: 0 calc(var(--alinea-main-padding-x) - 8px);
+      padding-bottom: 2px;
+      max-width: var(--alinea-main-width);
+
+      @include ml {
+        margin-top: -16px;
+      }
     }
   }
 }
diff --git a/src/dashboard/view/EntryEdit.tsx b/src/dashboard/view/EntryEdit.tsx
@@ -7,7 +7,7 @@ import {TabsHeader} from 'alinea/field/tabs/Tabs.view'
 import {Button, HStack, Stack, VStack} from 'alinea/ui'
 import {Main} from 'alinea/ui/Main'
 import {Statusbar} from 'alinea/ui/Statusbar'
-import {Tabs} from 'alinea/ui/Tabs'
+import {TabPanel, Tabs} from 'alinea/ui/Tabs'
 import {IcOutlineTableRows} from 'alinea/ui/icons/IcOutlineTableRows'
 import {IcRoundInsertDriveFile} from 'alinea/ui/icons/IcRoundInsertDriveFile'
 import {IcRoundTranslate} from 'alinea/ui/icons/IcRoundTranslate'
@@ -200,63 +200,69 @@ export function EntryEdit({editor}: EntryEditProps) {
         <FieldToolbar.Provider>
           <EntryHeader editor={editor} />
           {showHistory && <EntryHistory editor={editor} />}
-          <Tabs.Root style={{flex: 1}}>
-            <EntryTitle
-              editor={editor}
-              backLink={
-                editor.activeVersion.parentId
-                  ? nav.entry({
-                      id: editor.activeVersion.parentId,
-                      workspace: editor.activeVersion.workspace
-                    })
-                  : nav.entry({id: undefined})
-              }
-            >
-              {hasRootTabs && (
-                <div className={styles.root.tabs()}>
-                  <TabsHeader backdrop={false} section={sections[0]} />
-                </div>
-              )}
-            </EntryTitle>
-            <Main.Container>
-              {untranslated && (
-                <div>
-                  <EntryNotice
-                    icon={IcRoundTranslate}
-                    title="Untranslated"
-                    variant="untranslated"
-                  >
-                    {editor.parentNeedsTranslation
-                      ? 'Translate the parent page first.'
-                      : 'Enter the details below and save to start translating.'}
-                  </EntryNotice>
-                </div>
-              )}
-              <EntryEditorProvider editor={editor}>
-                <SuspenseBoundary name="input form">
-                  {mode === EditMode.Diff ? (
-                    <ShowChanges editor={editor} />
-                  ) : hasRootTabs && visibleTypes ? (
-                    <Tabs.Panels>
-                      {visibleTypes.map((type, i) => {
+          <div className={styles.root.tabs()}>
+            <Tabs>
+              <EntryTitle
+                editor={editor}
+                backLink={
+                  editor.activeVersion.parentId
+                    ? nav.entry({
+                        id: editor.activeVersion.parentId,
+                        workspace: editor.activeVersion.workspace
+                      })
+                    : nav.entry({id: undefined})
+                }
+              >
+                {hasRootTabs && (
+                  <div className={styles.root.tabs.header()}>
+                    <TabsHeader
+                      id="entry"
+                      backdrop={false}
+                      section={sections[0]}
+                    />
+                  </div>
+                )}
+              </EntryTitle>
+              <Main.Container>
+                {untranslated && (
+                  <div>
+                    <EntryNotice
+                      icon={IcRoundTranslate}
+                      title="Untranslated"
+                      variant="untranslated"
+                    >
+                      This page has not yet been translated to this language,
+                      <br />
+                      {editor.parentNeedsTranslation
+                        ? 'Translate the parent page first.'
+                        : 'Enter the details below and save to start translating.'}
+                    </EntryNotice>
+                  </div>
+                )}
+                <EntryEditorProvider editor={editor}>
+                  <SuspenseBoundary name="input form">
+                    {mode === EditMode.Diff ? (
+                      <ShowChanges editor={editor} />
+                    ) : hasRootTabs && visibleTypes ? (
+                      visibleTypes.map((type, i) => {
                         return (
                           <FormProvider form={form} key={i}>
-                            <Tabs.Panel unmount={false} tabIndex={i}>
+                            <TabPanel id={`entry+${i}`}>
                               <InputForm type={type} />
-                            </Tabs.Panel>
+                            </TabPanel>
                           </FormProvider>
                         )
-                      })}
-                    </Tabs.Panels>
-                  ) : (
-                    <VStack gap={18}>
-                      <InputForm form={form} />
-                    </VStack>
-                  )}
-                </SuspenseBoundary>
-              </EntryEditorProvider>
-            </Main.Container>
-          </Tabs.Root>
+                      })
+                    ) : (
+                      <VStack gap={18}>
+                        <InputForm form={form} />
+                      </VStack>
+                    )}
+                  </SuspenseBoundary>
+                </EntryEditorProvider>
+              </Main.Container>
+            </Tabs>
+          </div>
           <FieldToolbar.Root />
         </FieldToolbar.Provider>
       </Main>

diff --git a/src/dashboard/view/SearchBox.tsx b/src/dashboard/view/SearchBox.tsx
@@ -5,7 +5,7 @@ import {HStack, Stack} from 'alinea/ui'
 import {IcOutlineGridView} from 'alinea/ui/icons/IcOutlineGridView'
 import {IcOutlineList} from 'alinea/ui/icons/IcOutlineList'
 import {IcRoundSearch} from 'alinea/ui/icons/IcRoundSearch'
-import {useLayoutEffect, useMemo, useState} from 'react'
+import {memo, useLayoutEffect, useMemo, useState} from 'react'
 import {useFocusList} from '../hook/UseFocusList.js'
 import {useLocale} from '../hook/UseLocale.js'
 import {useNav} from '../hook/UseNav.js'
@@ -17,7 +17,7 @@ import {Explorer, ExporerItemSelect} from './explorer/Explorer.js'
 
 const styles = styler(css)
 
-export function SearchBox() {
+export const SearchBox = memo(function SearchBox() {
   const nav = useNav()
   const navigate = useNavigate()
   const location = useLocation()
@@ -102,4 +102,4 @@ export function SearchBox() {
       </list.Container>
     </div>
   )
-}
+})
diff --git a/src/dashboard/view/Sidebar.module.scss b/src/dashboard/view/Sidebar.module.scss
@@ -174,7 +174,9 @@
     padding: 6px 12px 6px 6px;
 
     &:focus,
+    &:focus-visible,
     &:hover {
+      outline: none;
       background: var(--alinea-highlight);
     }
   }