Show content-link in toolbar in image caption field

src/components/SlateEditor/plugins/image/ImageEmbedForm.tsx

@@ -148,6 +148,12 @@ const InputWrapper = styled("div", {
   },
 });
 
+const toolbarOptions = {
+  inline: {
+    "content-link": { hidden: false },
+  },
+};
+
 const EmbedForm = ({
   onClose,
   language,
@@ -180,6 +186,7 @@ const EmbedForm = ({
                 </ContentEditableFieldLabel>
                 <InlineField
                   {...field}
+                  toolbarOptions={toolbarOptions}
                   placeholder={t("form.image.caption.placeholder")}
                   submitted={isSubmitting}
                   onChange={helpers.setValue}

src/components/SlateEditor/plugins/link/Link.tsx

@@ -65,10 +65,17 @@ export interface Model {
 
 const Link = ({ attributes, editor, element, children }: Props) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const editorWrapperRef = useRef<HTMLElement>(null);
   const [editMode, setEditMode] = useState(false);
   const language = useArticleLanguage();
   const { t } = useTranslation();
 
+  useEffect(() => {
+    if (linkRef.current) {
+      editorWrapperRef.current = linkRef.current.closest("[data-slate-wrapper]");
+    }
+  }, []);
+
   useEffect(() => {
     setEditMode(!!element.isFirstEdit);
   }, [element]);
@@ -161,7 +168,7 @@ const Link = ({ attributes, editor, element, children }: Props) => {
             <InlineBugfix />
           </a>
         </PopoverTrigger>
-        <Portal>
+        <Portal container={{ current: editorWrapperRef.current }}>
           <StyledPopoverContent>
             <DialogTrigger asChild>
               <Button variant="link">{t("form.content.link.change")}</Button>
@@ -172,7 +179,7 @@ const Link = ({ attributes, editor, element, children }: Props) => {
           </StyledPopoverContent>
         </Portal>
       </PopoverRoot>
-      <Portal>
+      <Portal container={{ current: editorWrapperRef.current }}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t(`form.content.link.${element.data ? "changeTitle" : "addTitle"}`)}</DialogTitle>

src/components/SlateEditor/plugins/noop/index.tsx

@@ -16,3 +16,5 @@ export const noopPlugin = _noopPlugin.configure({
     inlineBlocks: inlineElements,
   },
 });
+
+export const inlineNoopPlugin = _noopPlugin.configure({ options: { inlineBlocks: { value: [], override: true } } });

src/containers/FormikForm/InlineField.tsx

@@ -6,14 +6,18 @@
  *
  */
 
+import { merge } from "lodash-es";
+import { useMemo } from "react";
 import { Text, TextArea } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { SlatePlugin } from "../../components/SlateEditor/interfaces";
 import { breakPlugin } from "../../components/SlateEditor/plugins/break";
 import { breakRenderer } from "../../components/SlateEditor/plugins/break/render";
+import { contentLinkPlugin, linkPlugin } from "../../components/SlateEditor/plugins/link";
+import { linkRenderer } from "../../components/SlateEditor/plugins/link/render";
 import { markPlugin } from "../../components/SlateEditor/plugins/mark";
 import { markRenderer } from "../../components/SlateEditor/plugins/mark/render";
-import { noopPlugin } from "../../components/SlateEditor/plugins/noop";
+import { inlineNoopPlugin } from "../../components/SlateEditor/plugins/noop";
 import { noopRenderer } from "../../components/SlateEditor/plugins/noop/render";
 import { paragraphPlugin } from "../../components/SlateEditor/plugins/paragraph";
 import { paragraphRenderer } from "../../components/SlateEditor/plugins/paragraph/render";
@@ -23,6 +27,8 @@ import { spanRenderer } from "../../components/SlateEditor/plugins/span/render";
 import { textTransformPlugin } from "../../components/SlateEditor/plugins/textTransform";
 import { toolbarPlugin } from "../../components/SlateEditor/plugins/toolbar";
 import {
+  AreaFilters,
+  CategoryFilters,
   createToolbarAreaOptions,
   createToolbarDefaultValues,
 } from "../../components/SlateEditor/plugins/toolbar/toolbarState";
@@ -31,22 +37,14 @@ import { unsupportedElementRenderer } from "../../components/SlateEditor/plugins
 import { unsupportedPlugin } from "../../components/SlateEditor/plugins/unsupported/unsupportedPlugin";
 import RichTextEditor, { RichTextEditorProps } from "../../components/SlateEditor/RichTextEditor";
 
-interface Props extends Omit<RichTextEditorProps, "toolbarOptions" | "toolbarAreaFilters"> {}
-
-const toolbarOptions = createToolbarDefaultValues({
-  text: {
-    hidden: true,
-  },
-  mark: {
-    code: {
-      hidden: true,
-    },
-  },
-  block: { hidden: true },
-  inline: {
-    hidden: true,
-  },
-});
+interface Props
+  extends Omit<
+    RichTextEditorProps,
+    "hideBlockPicker" | "plugins" | "toolbarOptions" | "toolbarAreaFilters" | "renderPlaceholder"
+  > {
+  toolbarOptions?: CategoryFilters;
+  toolbarAreaFilters?: AreaFilters;
+}
 
 const StyledText = styled(Text, {
   base: {
@@ -55,39 +53,64 @@ const StyledText = styled(Text, {
   },
 });
 
-const toolbarAreaFilters = createToolbarAreaOptions();
-
-const inlinePlugins: SlatePlugin[] = [
-  spanPlugin,
-  paragraphPlugin,
-  toolbarPlugin(toolbarOptions, toolbarAreaFilters),
-  textTransformPlugin,
-  breakPlugin,
-  saveHotkeyPlugin,
-  markPlugin,
-  noopPlugin,
-  unsupportedPlugin,
-];
-
 const StyledTextArea = styled(TextArea, {
   base: {
     minHeight: "unset",
     height: "unset",
   },
 });
 
+const defaultToolbarOptions = createToolbarDefaultValues({
+  text: {
+    hidden: true,
+  },
+  mark: {
+    code: {
+      hidden: true,
+    },
+  },
+  block: { hidden: true },
+  inline: {
+    hidden: true,
+  },
+});
+
 const renderers: SlatePlugin[] = [
   noopRenderer,
   paragraphRenderer,
   markRenderer,
   breakRenderer,
   spanRenderer,
+  linkRenderer,
   unsupportedElementRenderer,
 ];
 
-const plugins = inlinePlugins.concat(renderers);
+export const InlineField = ({
+  toolbarOptions: toolbarOptionsProp,
+  toolbarAreaFilters: toolbarAreaFiltersProp,
+  ...rest
+}: Props) => {
+  const { toolbarOptions, toolbarAreaFilters, plugins } = useMemo(() => {
+    const toolbarOptions = merge({}, defaultToolbarOptions, toolbarOptionsProp);
+    const toolbarAreaFilters = createToolbarAreaOptions(toolbarAreaFiltersProp);
+
+    const inlinePlugins: SlatePlugin[] = [
+      spanPlugin,
+      paragraphPlugin,
+      toolbarPlugin(toolbarOptions, toolbarAreaFilters),
+      textTransformPlugin,
+      breakPlugin,
+      saveHotkeyPlugin,
+      markPlugin,
+      inlineNoopPlugin,
+      linkPlugin,
+      contentLinkPlugin,
+      unsupportedPlugin,
+    ];
+
+    return { toolbarOptions, toolbarAreaFilters, plugins: inlinePlugins.concat(renderers) };
+  }, [toolbarOptionsProp, toolbarAreaFiltersProp]);
 
-export const InlineField = ({ ...rest }: Props) => {
   return (
     <StyledTextArea asChild>
       <RichTextEditor