@uiw/react-md-editor 4.0.3 → 4.0.4

package/README.md

@@ -502,6 +502,27 @@ export default function App() {
 }
 ```
 
+Internationalization Example, You can refer to [`commands-cn`](https://github.com/uiwjs/react-md-editor/blob/b3743ed8302b544f03aed6ed82bdbdf39efb2204/core/src/commands/index.cn.ts#L5-L187) for internationalization.
+
+```jsx mdx:preview
+import React, { useContext } from "react";
+import MDEditor, { commands } from "@uiw/react-md-editor";
+import { getCommands, getExtraCommands } from "@uiw/react-md-editor/commands-cn";
+
+export default function App() {
+  const [value, setValue] = React.useState("**Hello world!!!**");
+  return (
+    <MDEditor
+      value={value}
+      preview="edit"
+      commands={[...getCommands()]}
+      extraCommands={[...getExtraCommands()]}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
 ### Editor Font Size
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-425-2epmgh?fontsize=14&hidenavigation=1&theme=dark)

package/commands-cn.d.ts

@@ -0,0 +1,65 @@
+declare module '@uiw/react-md-editor/commands-cn' {
+  import { type ICommand } from '@uiw/react-md-editor/esm/commands';
+  import { divider } from '@uiw/react-md-editor/esm/commands/divider';
+  import { group } from '@uiw/react-md-editor/esm/commands/group';
+  let bold: ICommand;
+  let code: ICommand;
+  let codeBlock: ICommand;
+  let comment: ICommand;
+  let fullscreen: ICommand;
+  let hr: ICommand;
+  let image: ICommand;
+  let italic: ICommand;
+  let link: ICommand;
+  let checkedListCommand: ICommand;
+  let orderedListCommand: ICommand;
+  let unorderedListCommand: ICommand;
+  let codeEdit: ICommand;
+  let codeLive: ICommand;
+  let codePreview: ICommand;
+  let quote: ICommand;
+  let strikethrough: ICommand;
+  let issue: ICommand;
+  let title: ICommand;
+  let title1: ICommand;
+  let title2: ICommand;
+  let title3: ICommand;
+  let title4: ICommand;
+  let title5: ICommand;
+  let title6: ICommand;
+  let table: ICommand;
+  let help: ICommand;
+  export const getCommands: () => ICommand[];
+  export const getExtraCommands: () => ICommand[];
+  export {
+    title,
+    title1,
+    title2,
+    title3,
+    title4,
+    title5,
+    title6,
+    bold,
+    codeBlock,
+    comment,
+    italic,
+    strikethrough,
+    hr,
+    group,
+    divider,
+    link,
+    quote,
+    code,
+    image,
+    unorderedListCommand,
+    orderedListCommand,
+    checkedListCommand,
+    table,
+    issue,
+    help,
+    codeEdit,
+    codeLive,
+    codePreview,
+    fullscreen,
+  };
+}

package/dist/mdeditor.css

@@ -44,6 +44,7 @@
     --color-accent-emphasis: #1f6feb;
     --color-attention-subtle: rgba(187, 128, 9, 0.15);
     --color-danger-fg: #f85149;
+    --color-copied-active-bg: #2e9b33;
   }
 }
 @media (prefers-color-scheme: light) {
@@ -92,6 +93,7 @@
     --color-accent-emphasis: #0969da;
     --color-attention-subtle: #fff8c5;
     --color-danger-fg: #cf222e;
+    --color-copied-active-bg: #2e9b33;
   }
 }
 [data-color-mode*='dark'] .wmde-markdown,
@@ -889,7 +891,7 @@ body[data-color-mode*='light'] {
   display: flex;
   position: absolute;
   cursor: pointer;
-  color: var(--color-fg-defaul);
+  color: var(--color-fg-default);
   top: 6px;
   right: 6px;
   border-radius: 5px;
@@ -913,7 +915,7 @@ body[data-color-mode*='light'] {
 }
 .wmde-markdown pre:hover .copied:active,
 .wmde-markdown pre .copied.active {
-  background: #2e9b33;
+  background: var(--color-copied-active-bg);
   color: var(--color-canvas-default);
 }
 .wmde-markdown pre .active .octicon-copy {
@@ -922,10 +924,10 @@ body[data-color-mode*='light'] {
 .wmde-markdown pre .active .octicon-check {
   display: block;
 }
-.highlight-line {
+.wmde-markdown .highlight-line {
   background-color: var(--color-neutral-muted);
 }
-.code-line.line-number::before {
+.wmde-markdown .code-line.line-number::before {
   display: inline-block;
   width: 1rem;
   text-align: right;
@@ -934,82 +936,82 @@ body[data-color-mode*='light'] {
   content: attr(line);
   white-space: nowrap;
 }
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
+.wmde-markdown .token.comment,
+.wmde-markdown .token.prolog,
+.wmde-markdown .token.doctype,
+.wmde-markdown .token.cdata {
   color: var(--color-prettylights-syntax-comment);
 }
-.token.namespace {
+.wmde-markdown .token.namespace {
   opacity: 0.7;
 }
-.token.property,
-.token.tag,
-.token.selector,
-.token.constant,
-.token.symbol,
-.token.deleted {
+.wmde-markdown .token.property,
+.wmde-markdown .token.tag,
+.wmde-markdown .token.selector,
+.wmde-markdown .token.constant,
+.wmde-markdown .token.symbol,
+.wmde-markdown .token.deleted {
   color: var(--color-prettylights-syntax-entity-tag);
 }
-.token.maybe-class-name {
+.wmde-markdown .token.maybe-class-name {
   color: var(--color-prettylights-syntax-variable);
 }
-.token.property-access,
-.token.operator,
-.token.boolean,
-.token.number,
-.token.selector .token.class,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin {
+.wmde-markdown .token.property-access,
+.wmde-markdown .token.operator,
+.wmde-markdown .token.boolean,
+.wmde-markdown .token.number,
+.wmde-markdown .token.selector .token.class,
+.wmde-markdown .token.attr-name,
+.wmde-markdown .token.string,
+.wmde-markdown .token.char,
+.wmde-markdown .token.builtin {
   color: var(--color-prettylights-syntax-constant);
 }
-.token.deleted {
+.wmde-markdown .token.deleted {
   color: var(--color-prettylights-syntax-markup-deleted-text);
 }
-.code-line .token.deleted {
+.wmde-markdown .code-line .token.deleted {
   background-color: var(--color-prettylights-syntax-markup-deleted-bg);
 }
-.token.inserted {
+.wmde-markdown .token.inserted {
   color: var(--color-prettylights-syntax-markup-inserted-text);
 }
-.code-line .token.inserted {
+.wmde-markdown .code-line .token.inserted {
   background-color: var(--color-prettylights-syntax-markup-inserted-bg);
 }
-.token.variable {
+.wmde-markdown .token.variable {
   color: var(--color-prettylights-syntax-constant);
 }
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
+.wmde-markdown .token.entity,
+.wmde-markdown .token.url,
+.wmde-markdown .language-css .token.string,
+.wmde-markdown .style .token.string {
   color: var(--color-prettylights-syntax-string);
 }
-.token.color,
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
+.wmde-markdown .token.color,
+.wmde-markdown .token.atrule,
+.wmde-markdown .token.attr-value,
+.wmde-markdown .token.function,
+.wmde-markdown .token.class-name {
   color: var(--color-prettylights-syntax-string);
 }
-.token.rule,
-.token.regex,
-.token.important,
-.token.keyword {
+.wmde-markdown .token.rule,
+.wmde-markdown .token.regex,
+.wmde-markdown .token.important,
+.wmde-markdown .token.keyword {
   color: var(--color-prettylights-syntax-keyword);
 }
-.token.coord {
+.wmde-markdown .token.coord {
   color: var(--color-prettylights-syntax-meta-diff-range);
 }
-.token.important,
-.token.bold {
+.wmde-markdown .token.important,
+.wmde-markdown .token.bold {
   font-weight: bold;
 }
-.token.italic {
+.wmde-markdown .token.italic {
   font-style: italic;
 }
-.token.entity {
+.wmde-markdown .token.entity {
   cursor: help;
 }