refactor: sticky toolbar

src/components/Accordion/FormAccordion.tsx

@@ -50,6 +50,12 @@ const StyledAccordionItemTrigger = styled(AccordionItemTrigger, {
 const StyledAccordionItemContent = styled(AccordionItemContent, {
   base: {
     overflowX: "visible",
+    // We need to keep overflow unset for our sticky toolbar.
+    // Ark has a bug where data-state is removed when the accordion is open, so we have to check
+    // whether it doesn't exist to know if the accordion is open.
+    "&:not([data-state])": {
+      overflow: "unset",
+    },
   },
   variants: {
     invalid: {

src/components/SlateEditor/RichTextEditor.tsx

@@ -19,7 +19,8 @@
 import { FormikStatus } from "../../interfaces";
 import { nativeOnDragOver, nativeOnDragStart, nativeOnDrop } from "./plugins/DND/nativeDnd";
 import { SlateDndContext } from "./plugins/DND/SlateDndContext";
 import { SlateToolbar } from "./plugins/toolbar";
+import { NewSlateToolbar } from "./plugins/toolbar/NewSlateToolbar";
 import { ArticleFormType } from "../../containers/FormikForm/articleFormHooks";
 
 const StyledSlateWrapper = styled("div", {
@@ -142,7 +143,8 @@
       <ArticleLanguageProvider language={language}>
         <StyledSlateWrapper data-testid={testId} data-slate-wrapper="">
           <Slate editor={editor} initialValue={editor.children} onChange={onChange}>
-            <SlateToolbar hideToolbar={hideToolbar} />
+            {/* <SlateToolbar hideToolbar={hideToolbar} /> */}
+            <NewSlateToolbar />
             {blockPicker}
             <SlateDndContext editor={editor}>
               <StyledEditable

src/components/SlateEditor/plugins/toolbar/NewSlateToolbar.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2025-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Children, isValidElement, ReactNode, useMemo } from "react";
+import { useSlate, useSlateSelection, useSlateSelector } from "slate-react";
+import { styled } from "@ndla/styled-system/jsx";
+import { ToolbarBlockOptions } from "./ToolbarBlockOptions";
+import { ToolbarInlineOptions } from "./ToolbarInlineOptions";
+import { ToolbarLanguageOptions } from "./ToolbarLanguageOptions";
+import { ToolbarMarkOptions } from "./ToolbarMarkOptions";
+import { ToolbarValues } from "./toolbarState";
+import { ToolbarTableOptions } from "./ToolbarTableOptions";
+import { ToolbarTextOptions } from "./ToolbarTextOptions";
+import { ToolbarCategoryProps } from "./types";
+import { AI_ACCESS_SCOPE } from "../../../../constants";
+import { useSession } from "../../../../containers/Session/SessionProvider";
+import { usePrevious } from "@ndla/util";
+
+const StyledToolbar = styled("div", {
+  base: {
+    position: "sticky",
+    width: "100%",
+    top: "0",
+    zIndex: "sticky",
+    border: "1px solid",
+    borderRadius: "xsmall",
+    borderColor: "stroke.subtle",
+    padding: "3xsmall",
+    display: "flex",
+    flexWrap: "wrap",
+    background: "background.default",
+  },
+});
+
+const ToolbarRow = ({ children }: { children: ReactNode }) => {
+  // Do not render categories with only disabled and hidden options
+  const validChildren = Children.toArray(children).filter(
+    (child) =>
+      isValidElement<ToolbarCategoryProps<ToolbarValues>>(child) &&
+      !child.props.options?.every((el) => el.hidden === true),
+  );
+
+  return validChildren;
+};
+
+export const NewSlateToolbar = () => {
+  const editor = useSlate();
+  const selection = useSlateSelection();
+  // const prevState = usePrevious(state);
+  const { userPermissions } = useSession();
+  const options = useMemo(() => {
+    return editor.toolbarState?.({
+      // TODO: This is not really scalable if we're going to introduce more constraints later-on.
+      options: userPermissions?.includes(AI_ACCESS_SCOPE)
+        ? undefined
+        : { inline: { rephrase: { hidden: true, disabled: true } } },
+    });
+  }, [editor, selection, userPermissions]);
+
+  return (
+    <StyledToolbar>
+      <ToolbarRow>
+        <ToolbarTextOptions options={options?.text ?? []} />
+        <ToolbarLanguageOptions options={options?.languages ?? []} />
+        <ToolbarMarkOptions options={options?.mark ?? []} />
+        <ToolbarBlockOptions options={options?.block ?? []} />
+        <ToolbarInlineOptions options={options?.inline ?? []} />
+        <ToolbarTableOptions options={options?.table ?? []} />
+      </ToolbarRow>
+    </StyledToolbar>
+  );
+};