Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: mdx-editor/editor
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v3.11.4
Choose a base ref
...
head repository: mdx-editor/editor
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref

Commits on Sep 18, 2024

  1. fix: address regression from Lexical upgrade

    * fix #585
    
    * return call structuredClone
    Tetragius authored Sep 18, 2024
    Copy the full SHA
    00b70fc View commit details

Commits on Oct 7, 2024

  1. Copy the full SHA
    49e3003 View commit details
  2. Copy the full SHA
    d837a1d View commit details
  3. Copy the full SHA
    dc2bfb3 View commit details

Commits on Nov 1, 2024

  1. feat: korean lang translation (#621)

    * feat : korean lang translation
    
    * chore: few more translated words
    
    ---------
    
    Co-authored-by: Petyo Ivanov <underlog@gmail.com>
    terrinens and petyosi authored Nov 1, 2024
    Copy the full SHA
    7c5372e View commit details

Commits on Nov 5, 2024

  1. Copy the full SHA
    44f461c View commit details
  2. Copy the full SHA
    c6d1067 View commit details

Commits on Nov 6, 2024

  1. Copy the full SHA
    d3ca9e7 View commit details

Commits on Nov 9, 2024

  1. Copy the full SHA
    fa62100 View commit details

Commits on Nov 10, 2024

  1. Copy the full SHA
    d72e836 View commit details
  2. Copy the full SHA
    d14f4f2 View commit details

Commits on Nov 11, 2024

  1. fix: backspace regression

    petyosi committed Nov 11, 2024
    Copy the full SHA
    0910c73 View commit details
  2. Copy the full SHA
    a8d6960 View commit details

Commits on Nov 12, 2024

  1. Copy the full SHA
    483b196 View commit details
  2. feat: add content editable ref

    dks333 authored and petyosi committed Nov 12, 2024
    Copy the full SHA
    083080a View commit details

Commits on Nov 13, 2024

  1. Copy the full SHA
    d85867c View commit details

Commits on Nov 20, 2024

  1. Copy the full SHA
    7b83f15 View commit details
  2. Copy the full SHA
    997c153 View commit details

Commits on Nov 21, 2024

  1. fix: i18n key for delete image

    JohnsonMao committed Nov 21, 2024
    Copy the full SHA
    0dc9667 View commit details

Commits on Nov 24, 2024

  1. Copy the full SHA
    7b9b948 View commit details
  2. Merge pull request #634 from JohnsonMao/fix/i18n-key-for-delete-image…

    …-functionality
    
    fix: i18n key for delete image functionality
    petyosi authored Nov 24, 2024
    Copy the full SHA
    e8baa67 View commit details

Commits on Dec 2, 2024

  1. feat: expose gfm table params through the table plugin (#645)

    * add params and pass them on
    
    * directly reference options
    
    why limit ourselves
    
    * Improve naming
    
    * Add defaults
    moritztim authored Dec 2, 2024
    Copy the full SHA
    da50ea9 View commit details

Commits on Dec 5, 2024

  1. Copy the full SHA
    62441a3 View commit details

Commits on Dec 6, 2024

  1. fix: lint errors

    MishaMgla authored Dec 6, 2024
    Copy the full SHA
    d484a0b View commit details
1 change: 1 addition & 0 deletions docs/customizing-toolbar.md
Original file line number Diff line number Diff line change
@@ -20,6 +20,7 @@ function App() {
markdown="Hello world"
plugins={[
toolbarPlugin({
toolbarClassName: 'my-classname',
toolbarContents: () => (
<>
{' '}
3 changes: 3 additions & 0 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
@@ -69,6 +69,9 @@ export default function InitializedMDXEditor({
```tsx
'use client'
// ForwardRefEditor.tsx
import dynamic from 'next/dynamic'
import { forwardRef } from "react"
import { type MDXEditorMethods, type MDXEditorProps} from '@mdxeditor/editor'

// This is the only place InitializedMDXEditor is imported directly.
const Editor = dynamic(() => import('./InitializedMDXEditor'), {
2 changes: 2 additions & 0 deletions locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -10,13 +10,15 @@
"cancel": "Cancel"
},
"uploadImage": {
"dialogTitle": "Upload an image",
"uploadInstructions": "Upload an image from your device:",
"addViaUrlInstructions": "Or add an image from an URL:",
"autoCompletePlaceholder": "Select or paste an image src",
"alt": "Alt:",
"title": "Title:"
},
"imageEditor": {
"deleteImage": "Delete image",
"editImage": "Edit image"
},
"createLink": {
14 changes: 8 additions & 6 deletions locales/es-es/translation.json
Original file line number Diff line number Diff line change
@@ -10,14 +10,16 @@
"cancel": "Cancelar"
},
"uploadImage": {
"uploadInstructions": "Sube una imágen desde tu dispositivo:",
"addViaUrlInstructions": "O añade una imágen desde una URL:",
"autoCompletePlaceholder": "Selecciona o pega el src de la imágen",
"dialogTitle": "Subir una imagen",
"uploadInstructions": "Sube una imagen desde tu dispositivo:",
"addViaUrlInstructions": "O añade una imagen desde una URL:",
"autoCompletePlaceholder": "Selecciona o pega el src de la imagen",
"alt": "Alt:",
"title": "Título:"
},
"imageEditor": {
"editImage": "Editar image"
"deleteImage": "Borrar imagen",
"editImage": "Editar imagen"
},
"createLink": {
"url": "URL",
@@ -75,7 +77,7 @@
"codeBlock": "Insertar bloque de código",
"editFrontmatter": "Editar frontmatter",
"insertFrontmatter": "Insertar frontmatter",
"image": "Insertar imágen",
"image": "Insertar imagen",
"insertSandpack": "Insertar Sandpack",
"table": "Insertar tabla",
"thematicBreak": "Insertar salto de línea",
@@ -92,7 +94,7 @@
"danger": "Peligro",
"info": "Información",
"caution": "Aviso",
"changeType": "Seleccionar tipo de adminición",
"changeType": "Seleccionar tipo de admonición",
"placeholder": "Tipo de admonición"
},
"codeBlock": {
107 changes: 107 additions & 0 deletions locales/ko-kr/translation.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
{
"frontmatterEditor": {
"title": "문서 frontmatter 편집",
"key": "",
"value": "",
"addEntry": "항목 추가"
},
"dialogControls": {
"save": "저장",
"cancel": "취소"
},
"uploadImage": {
"dialogTitle": "이미지 업로드",
"uploadInstructions": "로컬에서 이미지 업로드:",
"addViaUrlInstructions": "URL로 이미지 가져오기:",
"autoCompletePlaceholder": "이미지 소스를 선택하거나 붙여넣으세요.",
"alt": "Alt:",
"title": "제목:"
},
"imageEditor": {
"deleteImage": "이미지 삭제",
"editImage": "이미지 편집"
},
"createLink": {
"url": "URL",
"urlPlaceholder": "URL을 선택하거나 붙여넣으세요.",
"title": "제목",
"saveTooltip": "URL 설정",
"cancelTooltip": "변경 취소"
},
"linkPreview": {
"open": "새 창에서 {{url}} 열기",
"edit": "링크 URL 수정",
"copyToClipboard": "클립보드에 복사",
"copied": "복사됨!",
"remove": "링크 삭제"
},
"table": {
"deleteTable": "테이블 삭제",
"columnMenu": "열 메뉴",
"textAlignment": "텍스트 정렬",
"alignLeft": "왼쪽 정렬",
"alignCenter": "중심 정렬",
"alignRight": "오른쪽 정렬",
"insertColumnLeft": "왼쪽으로 열 추가",
"insertColumnRight": "오른쪽으로 열 추가",
"deleteColumn": "이 열 삭제",
"rowMenu": "행 메뉴",
"insertRowAbove": "위로 행 추가",
"insertRowBelow": "아래로 행 추가",
"deleteRow": "이 행 삭제"
},
"toolbar": {
"blockTypes": {
"paragraph": "단락",
"quote": "인용구",
"heading": "머릿말 {{level}}"
},
"blockTypeSelect": {
"selectBlockTypeTooltip": "블록 유형 선택",
"placeholder": "블록 유형"
},
"toggleGroup": "그룹 전환",
"removeBold": "굵은 글씨 제거",
"bold": "굵게",
"removeItalic": "기울임 제거",
"italic": "기울임",
"underline": "밑줄 제거",
"removeUnderline": "밑줄",
"removeInlineCode": "코드 형식 제거",
"inlineCode": "인라인 코드 형식",
"link": "링크 삽입",
"richText": "서식있는 텍스트",
"diffMode": "비교 모드",
"source": "소스 모드",
"admonition": "경고 블록 삽입",
"codeBlock": "코드 블록 삽입",
"editFrontmatter": "frontmatter 편집",
"insertFrontmatter": "frontmatter 삽입",
"image": "이미지 삽입",
"insertSandpack": "Sandpack 삽입",
"table": "표 삽입",
"thematicBreak": "수평선 삽입",
"bulletedList": "글머리 기호 목록",
"numberedList": "번호가 매겨진 목록",
"checkList": "체크 리스트",
"deleteSandpack": "이 코드 블록 삭제",
"undo": "취소 {{shortcut}}",
"redo": "다시 {{shortcut}}"
},
"admonitions": {
"note": "메모",
"tip": "",
"danger": "위험",
"info": "정보",
"caution": "주의",
"changeType": "경고 타입을 선택해주세요.",
"placeholder": "경고 타입"
},
"codeBlock": {
"language": "코드 블록 언어",
"selectLanguage": "코드 블록 언어 선택"
},
"contentArea": {
"editableMarkdown": "편집 가능한 마크다운"
}
}
2 changes: 2 additions & 0 deletions locales/pt-br/translation.json
Original file line number Diff line number Diff line change
@@ -10,13 +10,15 @@
"cancel": "Cancelar"
},
"uploadImage": {
"dialogTitle": "Enviar uma imagem",
"uploadInstructions": "Enviar uma imagem do seu dispotivo:",
"addViaUrlInstructions": "Ou adicionar uma imagem a partir de um URL:",
"autoCompletePlaceholder": "Insira um link de imagem",
"alt": "Texto alternativo:",
"title": "Título:"
},
"imageEditor": {
"deleteImage": "Deletar imagem",
"editImage": "Editar imagem"
},
"createLink": {
2 changes: 2 additions & 0 deletions locales/uk-ua/translation.json
Original file line number Diff line number Diff line change
@@ -10,13 +10,15 @@
"cancel": "Скасувати"
},
"uploadImage": {
"dialogTitle": "Завантажити зображення",
"uploadInstructions": "Завантажте зображення з вашого пристрою:",
"addViaUrlInstructions": "Або додайте зображення з URL посилання:",
"autoCompletePlaceholder": "Виберіть або вставте джерело зображення",
"alt": "Альтернативна назва:",
"title": "Назва:"
},
"imageEditor": {
"deleteImage": "Видалити зображення",
"editImage": "Редагувати зображення"
},
"createLink": {
2 changes: 2 additions & 0 deletions locales/zh-cn/translation.json
Original file line number Diff line number Diff line change
@@ -10,13 +10,15 @@
"cancel": "取消"
},
"uploadImage": {
"dialogTitle": "上传图片",
"uploadInstructions": "从您的设备中上传图片:",
"addViaUrlInstructions": "或从网址新增图片:",
"autoCompletePlaceholder": "选择或粘贴图片",
"alt": "替代文本:",
"title": "标题:"
},
"imageEditor": {
"deleteImage": "删除图片",
"editImage": "编辑图片"
},
"createLink": {
2 changes: 2 additions & 0 deletions locales/zh-tw/translation.json
Original file line number Diff line number Diff line change
@@ -10,13 +10,15 @@
"cancel": "取消"
},
"uploadImage": {
"dialogTitle": "上傳圖片",
"uploadInstructions": "從您的裝置上傳圖片:",
"addViaUrlInstructions": "或從網址新增圖片:",
"autoCompletePlaceholder": "選擇或貼上圖片網址",
"alt": "替代文字:",
"title": "標題:"
},
"imageEditor": {
"deleteImage": "刪除圖片",
"editImage": "編輯圖片"
},
"createLink": {
44 changes: 36 additions & 8 deletions src/MDXEditor.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import {
Translation,
composerChildren$,
contentEditableClassName$,
spellCheck$,
corePlugin,
editorRootElementRef$,
editorWrappers$,
@@ -16,7 +17,8 @@ import {
setMarkdown$,
topAreaChildren$,
useTranslation,
viewMode$
viewMode$,
contentEditableRef$
} from './plugins/core'

import { ContentEditable } from '@lexical/react/LexicalContentEditable.js'
@@ -28,7 +30,7 @@ import { lexicalTheme } from './styles/lexicalTheme'
import styles from './styles/ui.module.css'
import { noop } from './utils/fp'
import { createLexicalComposerContext, LexicalComposerContext, LexicalComposerContextType } from '@lexical/react/LexicalComposerContext'
import { LexicalEditor } from 'lexical'
import { EditorThemeClasses, LexicalEditor } from 'lexical'
import { IconKey, defaultSvgIcons } from './defaultSvgIcons'

const LexicalProvider: React.FC<{
@@ -44,8 +46,14 @@ const LexicalProvider: React.FC<{

const RichTextEditor: React.FC = () => {
const t = useTranslation()
const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
const setContentEditableRef = usePublisher(contentEditableRef$)
const onRef = (_contentEditableRef: HTMLDivElement) => {
setContentEditableRef({ current: _contentEditableRef })
}

const [contentEditableClassName, spellCheck, composerChildren, topAreaChildren, editorWrappers, placeholder] = useCellValues(
contentEditableClassName$,
spellCheck$,
composerChildren$,
topAreaChildren$,
editorWrappers$,
@@ -60,10 +68,13 @@ const RichTextEditor: React.FC = () => {
<div className={classNames(styles.rootContentEditableWrapper, 'mdxeditor-root-contenteditable')}>
<RichTextPlugin
contentEditable={
<ContentEditable
className={classNames(styles.contentEditable, contentEditableClassName)}
ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
/>
<div ref={onRef}>
<ContentEditable
className={classNames(styles.contentEditable, contentEditableClassName)}
ariaLabel={t('contentArea.editableMarkdown', 'editable markdown')}
spellCheck={spellCheck}
/>
</div>
}
placeholder={
<div className={classNames(styles.contentEditable, styles.placeholder, contentEditableClassName)}>
@@ -222,6 +233,11 @@ export interface MDXEditorProps {
* Use this to style the various content elements like lists and blockquotes.
*/
contentEditableClassName?: string
/**
* Controls the spellCheck value for the content editable element of the eitor.
* Defaults to true, use false to disable spell checking.
*/
spellCheck?: boolean
/**
* 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.
@@ -279,6 +295,15 @@ export interface MDXEditorProps {
* Pass your own translation function if you want to localize the editor.
*/
translation?: Translation
/**
* Whether to apply trim() to the initial markdown input (default: true)
*/
trim?: boolean

/**
* A custom lexical theme to use for the editor.
*/
lexicalTheme?: EditorThemeClasses
}

/**
@@ -291,6 +316,7 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>((pro
plugins={[
corePlugin({
contentEditableClassName: props.contentEditableClassName ?? '',
spellCheck: props.spellCheck ?? true,
initialMarkdown: props.markdown,
onChange: props.onChange ?? noop,
onBlur: props.onBlur ?? noop,
@@ -301,7 +327,9 @@ export const MDXEditor = React.forwardRef<MDXEditorMethods, MDXEditorProps>((pro
iconComponentFor: props.iconComponentFor ?? defaultIconComponentFor,
suppressHtmlProcessing: props.suppressHtmlProcessing ?? false,
onError: props.onError ?? noop,
translation: props.translation ?? defaultTranslation
translation: props.translation ?? defaultTranslation,
trim: props.trim ?? true,
lexicalTheme: props.lexicalTheme
}),
...(props.plugins ?? [])
]}
10 changes: 9 additions & 1 deletion src/examples/assets/jsx.md
Original file line number Diff line number Diff line change
@@ -5,5 +5,13 @@ A paragraph with inline jsx component <MyLeaf foo="fooValue">Meh more _Leaf_</My
<BlockNode foo="fooValue">
Content *foo*

more Content
more Content
</BlockNode>

something more.

<UnknownJsxNode>What</UnknownJsxNode>

<MyLeaf foo="fooValue">Some content</MyLeaf>

<MyLeaf foo="fooValue" />
3 changes: 3 additions & 0 deletions src/examples/basics.tsx
Original file line number Diff line number Diff line change
@@ -258,6 +258,9 @@ export function Frontmatter() {
return (
<MDXEditor
markdown={frontmatterMarkdown}
onChange={(value) => {
console.log(`new value: ${value}`)
}}
plugins={[frontmatterPlugin(), toolbarPlugin({ toolbarContents: () => <InsertFrontmatter /> })]}
/>
)
3 changes: 3 additions & 0 deletions src/examples/images.tsx
Original file line number Diff line number Diff line change
@@ -26,6 +26,9 @@ some more
<img src="https://picsum.photos/200/300" width="200" height="300" /> some <img src="https://picsum.photos/200/300" /> flow
Image with a class attribute:
<img src="https://picsum.photos/200/300" class="custom" />
some
`

Loading