From 333abd81b44bffbbcfe448c73d3389c793414ffa Mon Sep 17 00:00:00 2001
From: Basile Parent <casou.acc@gmail.com>
Date: Tue, 23 Jul 2024 18:33:10 +0200
Subject: [PATCH 1/6] Export default icons for toolbar customization

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index a7082584..ad148aad 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -33,6 +33,7 @@ import './styles/globals.css'
 export * from '@mdxeditor/gurx'
 // editor component
 export * from './MDXEditor'
+export * from './defaultSvgIcons'
 
 // import/export
 export * from './importMarkdownToLexical'

From aae5ed404e43028abdc0e72d78623f659506c223 Mon Sep 17 00:00:00 2001
From: Basile Parent <casou.acc@gmail.com>
Date: Wed, 24 Jul 2024 09:26:11 +0200
Subject: [PATCH 2/6] Give access to all content editable component props in
 the MDXEditor props

---
 docs/content-styling.md   |  4 +--
 src/MDXEditor.tsx         | 24 ++++++++------
 src/examples/a11y.tsx     | 70 +++++++++++++++++++++++++++++++++++++++
 src/plugins/core/index.ts |  9 ++---
 4 files changed, 91 insertions(+), 16 deletions(-)
 create mode 100644 src/examples/a11y.tsx

diff --git a/docs/content-styling.md b/docs/content-styling.md
index a47bc4d8..8ec4da3f 100644
--- a/docs/content-styling.md
+++ b/docs/content-styling.md
@@ -6,7 +6,7 @@ position: 1
 
 # Content styling
 
-The MDXEditor component exposes a property called `contentEditableClassName` that you can use to style the content of the editor. This is useful if you want to use a different font family, or change the contents of the various blocks inside.
+The MDXEditor component exposes a property called `contentEditableProps` (containing a property `className`) that you can use to style the content of the editor. This is useful if you want to use a different font family, or change the contents of the various blocks inside.
 
 For best results, ensure that you style the editor using the same CSS classes that you use in your application. 
 
@@ -23,7 +23,7 @@ For best results, ensure that you style the editor using the same CSS classes th
 ```tsx
 <MDXEditor 
 markdown="Hello **world**!" 
-contentEditableClassName="prose"
+contentEditableProps={{ className: "prose" }}
 />
 ```
 
diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
index 74bc058a..dda20e6f 100644
--- a/src/MDXEditor.tsx
+++ b/src/MDXEditor.tsx
@@ -4,7 +4,7 @@ import { RealmPlugin, RealmWithPlugins } from './RealmWithPlugins'
 import {
   Translation,
   composerChildren$,
-  contentEditableClassName$,
+  contentEditableProps$,
   corePlugin,
   editorRootElementRef$,
   editorWrappers$,
@@ -19,7 +19,7 @@ import {
   viewMode$
 } from './plugins/core'
 
-import { ContentEditable } from '@lexical/react/LexicalContentEditable.js'
+import { ContentEditable, Props as ContentEditableProps } from '@lexical/react/LexicalContentEditable.js'
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary.js'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin.js'
 import classNames from 'classnames'
@@ -44,13 +44,16 @@ const LexicalProvider: React.FC<{
 
 const RichTextEditor: React.FC = () => {
   const t = useTranslation()
-  const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
-    contentEditableClassName$,
+  const [contentEditableProps, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
+    contentEditableProps$,
     composerChildren$,
     topAreaChildren$,
     editorWrappers$,
     placeholder$
   )
+
+  const { className: contentEditableClassName, ...otherContentEditableProps} = contentEditableProps
+
   return (
     <>
       {topAreaChildren.map((Child, index) => (
@@ -63,10 +66,11 @@ const RichTextEditor: React.FC = () => {
               <ContentEditable
                 className={classNames(styles.contentEditable, contentEditableClassName)}
                 ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
+                { ...otherContentEditableProps }
               />
             }
             placeholder={
-              <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>
+              <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableProps)}>
                 <p>{placeholder}</p>
               </div>
             }
@@ -218,10 +222,10 @@ const Methods: React.FC<{ mdxRef: React.ForwardedRef<MDXEditorMethods> }> = ({ m
  */
 export interface MDXEditorProps {
   /**
-   * the CSS class to apply to the content editable element of the editor.
-   * Use this to style the various content elements like lists and blockquotes.
+   * the props to apply to the content editable element of the editor.
+   * You can use this to style the various content elements like lists and blockquotes, to identify the textbox, etc.
    */
-  contentEditableClassName?: string
+  contentEditableProps?: ContentEditableProps
   /**
    * The markdown to edit. Notice that this is read only when the component is mounted.
    * To change the component content dynamically, use the `MDXEditorMethods.setMarkdown` method.
@@ -247,7 +251,7 @@ export interface MDXEditorProps {
   plugins?: RealmPlugin[]
   /**
    * The class name to apply to the root component element. Use this if you want to change the editor dimensions, maximum height, etc.
-   * For a content-specific styling, Use `contentEditableClassName` property.
+   * For a content-specific styling, Use `contentEditableProps.className` property.
    */
   className?: string
   /**
@@ -290,7 +294,7 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>((pro
     <RealmWithPlugins
       plugins={[
         corePlugin({
-          contentEditableClassName: props.contentEditableClassName ?? '',
+          contentEditableProps: props.contentEditableProps ?? {},
           initialMarkdown: props.markdown,
           onChange: props.onChange ?? noop,
           onBlur: props.onBlur ?? noop,
diff --git a/src/examples/a11y.tsx b/src/examples/a11y.tsx
new file mode 100644
index 00000000..a4d9b721
--- /dev/null
+++ b/src/examples/a11y.tsx
@@ -0,0 +1,70 @@
+import React from 'react'
+import {MDXEditor, Separator, toolbarPlugin, UndoRedo} from '../'
+
+export function AssociateLabelForTextBox() {
+  return (
+      <form>
+          <label id="mdxEditor-label">Form label associated to the textbox</label>
+          <MDXEditor
+              markdown={'MDXEditor has a default `aria-label` (in locale files) so we must use the `aria-labelledBy` prop to link the textbox to the label (cannot use the default `htmlFor` behaviour)'}
+              contentEditableProps={{
+                  ariaLabelledBy: "mdxEditor-label"
+              }}
+              plugins={[
+                  toolbarPlugin({
+                      toolbarContents: () => (
+                          <>
+                              <UndoRedo />
+                              <Separator />
+                          </>
+                      )
+                  }),
+              ]}
+          />
+      </form>
+  )
+}
+
+export function CustomizeAriaLabel() {
+  return (
+      <MDXEditor
+          markdown={'Set an `aria-label` in the props'}
+          contentEditableProps={{
+              ariaLabel: "My custom label"
+          }}
+          plugins={[
+              toolbarPlugin({
+                  toolbarContents: () => (
+                      <>
+                          <UndoRedo />
+                          <Separator />
+                      </>
+                  )
+              }),
+          ]}
+      />
+  )
+}
+
+export function MarkTextboxToRequired() {
+  return (
+      <MDXEditor
+          markdown={'Set the `required` and the `aria-required` props for the field to be identified as "required" '}
+          contentEditableProps={{
+              required: true,
+              ariaRequired: true
+          }}
+          plugins={[
+              toolbarPlugin({
+                  toolbarContents: () => (
+                      <>
+                          <UndoRedo />
+                          <Separator />
+                      </>
+                  )
+              }),
+          ]}
+      />
+  )
+}
+
diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts
index 721f09c2..5c4d527d 100644
--- a/src/plugins/core/index.ts
+++ b/src/plugins/core/index.ts
@@ -1,6 +1,7 @@
 import { realmPlugin } from '../../RealmWithPlugins'
 import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin.js'
 import { $isHeadingNode, HeadingTagType } from '@lexical/rich-text'
+import { Props as ContentEditableProps } from '@lexical/react/LexicalContentEditable'
 import { $setBlocksType } from '@lexical/selection'
 import { $findMatchingParent, $insertNodeToNearestRoot, $wrapNodeInElement } from '@lexical/utils'
 import { Cell, NodeRef, Realm, Signal, filter, map, scan, useCellValue, withLatestFrom } from '@mdxeditor/gurx'
@@ -115,7 +116,7 @@ export const activeEditor$ = Cell<LexicalEditor | null>(null)
  * Holds the CSS class name of the content editable element.
  * @group Core
  */
-export const contentEditableClassName$ = Cell('')
+export const contentEditableProps$ = Cell<ContentEditableProps>({})
 
 /**
  * Holds the readOnly state of the editor.
@@ -839,7 +840,7 @@ export const translation$ = Cell<Translation>(() => {
 /** @internal */
 export const corePlugin = realmPlugin<{
   initialMarkdown: string
-  contentEditableClassName: string
+  contentEditableProps: string
   placeholder?: React.ReactNode
   autoFocus: boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean | undefined }
   onChange: (markdown: string) => void
@@ -869,7 +870,7 @@ export const corePlugin = realmPlugin<{
       ],
 
       [addComposerChild$]: SharedHistoryPlugin,
-      [contentEditableClassName$]: params?.contentEditableClassName,
+      [contentEditableProps$]: params?.contentEditableProps,
       [toMarkdownOptions$]: params?.toMarkdownOptions,
       [autoFocus$]: params?.autoFocus,
       [placeholder$]: params?.placeholder,
@@ -932,7 +933,7 @@ export const corePlugin = realmPlugin<{
 
   update(realm, params) {
     realm.pubIn({
-      [contentEditableClassName$]: params?.contentEditableClassName,
+      [contentEditableProps$]: params?.contentEditableProps,
       [toMarkdownOptions$]: params?.toMarkdownOptions,
       [autoFocus$]: params?.autoFocus,
       [placeholder$]: params?.placeholder,

From 159c0c74edee4164373e33533751cc44673cd6de Mon Sep 17 00:00:00 2001
From: Basile Parent <casou.acc@gmail.com>
Date: Wed, 24 Jul 2024 09:51:03 +0200
Subject: [PATCH 3/6] Fix typo

---
 src/MDXEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
index dda20e6f..acfd39cd 100644
--- a/src/MDXEditor.tsx
+++ b/src/MDXEditor.tsx
@@ -70,7 +70,7 @@ const RichTextEditor: React.FC = () => {
               />
             }
             placeholder={
-              <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableProps)}>
+              <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>
                 <p>{placeholder}</p>
               </div>
             }

From bbf53ff3d5fe6cefb671f9076e4f850f4ddb2196 Mon Sep 17 00:00:00 2001
From: Basile Parent <casou.acc@gmail.com>
Date: Wed, 24 Jul 2024 10:30:43 +0200
Subject: [PATCH 4/6] Type alignment

---
 src/plugins/core/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts
index 5c4d527d..7aff6e17 100644
--- a/src/plugins/core/index.ts
+++ b/src/plugins/core/index.ts
@@ -840,7 +840,7 @@ export const translation$ = Cell<Translation>(() => {
 /** @internal */
 export const corePlugin = realmPlugin<{
   initialMarkdown: string
-  contentEditableProps: string
+  contentEditableProps: ContentEditableProps
   placeholder?: React.ReactNode
   autoFocus: boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean | undefined }
   onChange: (markdown: string) => void

From 8afa61d76dc08325d530250e36566df8c58ba4ce Mon Sep 17 00:00:00 2001
From: Basile Parent <casou.acc@gmail.com>
Date: Wed, 24 Jul 2024 15:07:34 +0200
Subject: [PATCH 5/6] Set the contentEditableClassName prop back to avoid
 breaking change

---
 src/MDXEditor.tsx         | 16 ++++++++++++----
 src/plugins/core/index.ts | 10 ++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
index acfd39cd..580bd112 100644
--- a/src/MDXEditor.tsx
+++ b/src/MDXEditor.tsx
@@ -44,7 +44,8 @@ const LexicalProvider: React.FC<{
 
 const RichTextEditor: React.FC = () => {
   const t = useTranslation()
-  const [contentEditableProps, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
+  const [contentEditableClassName, contentEditableProps, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
+    contentEditableClassName$,
     contentEditableProps$,
     composerChildren$,
     topAreaChildren$,
@@ -52,7 +53,7 @@ const RichTextEditor: React.FC = () => {
     placeholder$
   )
 
-  const { className: contentEditableClassName, ...otherContentEditableProps} = contentEditableProps
+  const { className: contentEditablePropsClassName, ...otherContentEditableProps} = contentEditableProps
 
   return (
     <>
@@ -64,13 +65,13 @@ const RichTextEditor: React.FC = () => {
           <RichTextPlugin
             contentEditable={
               <ContentEditable
-                className={classNames(styles.contentEditable, contentEditableClassName)}
+                className={classNames(styles.contentEditable, contentEditableClassName,  contentEditablePropsClassName)}
                 ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
                 { ...otherContentEditableProps }
               />
             }
             placeholder={
-              <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>
+              <div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName, contentEditablePropsClassName)}>
                 <p>{placeholder}</p>
               </div>
             }
@@ -221,6 +222,12 @@ const Methods: React.FC<{ mdxRef: React.ForwardedRef<MDXEditorMethods> }> = ({ m
  * @group MDXEditor
  */
 export interface MDXEditorProps {
+  /**
+   * the CSS class to apply to the content editable element of the editor.
+   * Use this to style the various content elements like lists and blockquotes.
+   * @deprecated Will be removed in further version. Use contentEditableProps.className instead
+   */
+  contentEditableClassName?: string
   /**
    * the props to apply to the content editable element of the editor.
    * You can use this to style the various content elements like lists and blockquotes, to identify the textbox, etc.
@@ -294,6 +301,7 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>((pro
     <RealmWithPlugins
       plugins={[
         corePlugin({
+          contentEditableClassName: props.contentEditableClassName ?? '',
           contentEditableProps: props.contentEditableProps ?? {},
           initialMarkdown: props.markdown,
           onChange: props.onChange ?? noop,
diff --git a/src/plugins/core/index.ts b/src/plugins/core/index.ts
index 7aff6e17..d49cc161 100644
--- a/src/plugins/core/index.ts
+++ b/src/plugins/core/index.ts
@@ -115,6 +115,13 @@ export const activeEditor$ = Cell<LexicalEditor | null>(null)
 /**
  * Holds the CSS class name of the content editable element.
  * @group Core
+ * @deprecated Will be removed in further version. Use contentEditableProps.className instead
+ */
+export const contentEditableClassName$ = Cell('')
+
+/**
+ * Holds the props to pass to the content editable element.
+ * @group Core
  */
 export const contentEditableProps$ = Cell<ContentEditableProps>({})
 
@@ -840,6 +847,7 @@ export const translation$ = Cell<Translation>(() => {
 /** @internal */
 export const corePlugin = realmPlugin<{
   initialMarkdown: string
+  contentEditableClassName: string
   contentEditableProps: ContentEditableProps
   placeholder?: React.ReactNode
   autoFocus: boolean | { defaultSelection?: 'rootStart' | 'rootEnd'; preventScroll?: boolean | undefined }
@@ -870,6 +878,7 @@ export const corePlugin = realmPlugin<{
       ],
 
       [addComposerChild$]: SharedHistoryPlugin,
+      [contentEditableClassName$]: params?.contentEditableClassName,
       [contentEditableProps$]: params?.contentEditableProps,
       [toMarkdownOptions$]: params?.toMarkdownOptions,
       [autoFocus$]: params?.autoFocus,
@@ -933,6 +942,7 @@ export const corePlugin = realmPlugin<{
 
   update(realm, params) {
     realm.pubIn({
+      [contentEditableClassName$]: params?.contentEditableClassName,
       [contentEditableProps$]: params?.contentEditableProps,
       [toMarkdownOptions$]: params?.toMarkdownOptions,
       [autoFocus$]: params?.autoFocus,

From 68e2bbb01e02044cc374ba08c5b94606d2340071 Mon Sep 17 00:00:00 2001
From: Basile Parent <basile-externe.parent@edf.fr>
Date: Tue, 30 Jul 2024 12:32:53 +0200
Subject: [PATCH 6/6] Remove double space

---
 src/MDXEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MDXEditor.tsx b/src/MDXEditor.tsx
index 580bd112..2de97364 100644
--- a/src/MDXEditor.tsx
+++ b/src/MDXEditor.tsx
@@ -65,7 +65,7 @@ const RichTextEditor: React.FC = () => {
           <RichTextPlugin
             contentEditable={
               <ContentEditable
-                className={classNames(styles.contentEditable, contentEditableClassName,  contentEditablePropsClassName)}
+                className={classNames(styles.contentEditable, contentEditableClassName, contentEditablePropsClassName)}
                 ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
                 { ...otherContentEditableProps }
               />