@uiw/react-md-editor 4.0.3 → 4.0.5

package/README.md

@@ -165,6 +165,29 @@ export default function App() {
 }
 ```
 
+### Placeholder & maxLength
+
+"Below is an example that sets the `placeholder` for the editor and defines the maximum input character length as `10` characters."
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor from '@uiw/react-md-editor';
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+  return (
+      <MDEditor
+        value={value}
+        onChange={setValue}
+        textareaProps={{
+          placeholder: 'Please enter Markdown text',
+          maxLength: 10
+        }}
+      />
+  );
+}
+```
+
 ### Custom Toolbars
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-custom-toolbars-m2n10?fontsize=14&hidenavigation=1&theme=dark)
@@ -502,6 +525,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)
@@ -539,6 +583,30 @@ export default function App() {
 }
 ```
 
+### Disallowed Elements
+
+```jsx mdx:preview
+import React from "react";
+import MDEditor from '@uiw/react-md-editor';
+
+export default function App() {
+  const [value, setValue] = React.useState("**Hello world!!!**  <style>body{display:none;}</style> ");
+  return (
+    <div className="container">
+      <MDEditor
+        value={value}
+        height="100%"
+        previewOptions={{
+          disallowedElements: ['style'],
+        }}
+        visibleDragbar={false}
+        onChange={setValue}
+      />
+    </div>
+  );
+}
+```
+
 ### Preview Markdown
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-md-editor-preview-markdown-vrucl?fontsize=14&hidenavigation=1&theme=dark)
@@ -907,81 +975,31 @@ npm run start
 
 As always, thanks to our amazing contributors!
 
-<!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT--><a href="https://github.com/jaywcjlove" title="小弟调调">
-  <img src="https://avatars.githubusercontent.com/u/1680273?v=4" width="42;" alt="小弟调调"/>
-</a>
-<a href="https://github.com/renovate-bot" title="Mend Renovate">
-  <img src="https://avatars.githubusercontent.com/u/25180681?v=4" width="42;" alt="Mend Renovate"/>
-</a>
-<a href="https://github.com/stevemk14ebr" title="Stephen Eckels">
-  <img src="https://avatars.githubusercontent.com/u/6619205?v=4" width="42;" alt="Stephen Eckels"/>
-</a>
-<a href="https://github.com/avalero" title="Alberto Valero Gómez">
-  <img src="https://avatars.githubusercontent.com/u/1442682?v=4" width="42;" alt="Alberto Valero Gómez"/>
-</a>
-<a href="https://github.com/alphacoma18" title="Alpha Romer Coma">
-  <img src="https://avatars.githubusercontent.com/u/108984668?v=4" width="42;" alt="Alpha Romer Coma"/>
-</a>
-<a href="https://github.com/RARgames" title="RAR">
-  <img src="https://avatars.githubusercontent.com/u/13639766?v=4" width="42;" alt="RAR"/>
-</a>
-<a href="https://github.com/Exmirai" title="UniqueUlysees">
-  <img src="https://avatars.githubusercontent.com/u/6436703?v=4" width="42;" alt="UniqueUlysees"/>
-</a>
-<a href="https://github.com/nuragic" title="Andrea Puddu">
-  <img src="https://avatars.githubusercontent.com/u/1586378?v=4" width="42;" alt="Andrea Puddu"/>
-</a>
-<a href="https://github.com/bramus" title="Bramus">
-  <img src="https://avatars.githubusercontent.com/u/213073?v=4" width="42;" alt="Bramus"/>
-</a>
-<a href="https://github.com/CarleneCannon-Conner" title="Carlene Cannon-Conner">
-  <img src="https://avatars.githubusercontent.com/u/1942791?v=4" width="42;" alt="Carlene Cannon-Conner"/>
-</a>
-<a href="https://github.com/MercierCorentin" title="Corentin Mercier">
-  <img src="https://avatars.githubusercontent.com/u/46066895?v=4" width="42;" alt="Corentin Mercier"/>
-</a>
-<a href="https://github.com/dmitriyyan" title="Dmitrii Ianushkevich">
-  <img src="https://avatars.githubusercontent.com/u/89025862?v=4" width="42;" alt="Dmitrii Ianushkevich"/>
-</a>
-<a href="https://github.com/jnishiyama" title="James Finucane">
-  <img src="https://avatars.githubusercontent.com/u/2048195?v=4" width="42;" alt="James Finucane"/>
-</a>
-<a href="https://github.com/allforabit" title="Kevin Nolan">
-  <img src="https://avatars.githubusercontent.com/u/537189?v=4" width="42;" alt="Kevin Nolan"/>
-</a>
-<a href="https://github.com/kseikyo" title="Lucas Sierota">
-  <img src="https://avatars.githubusercontent.com/u/29212286?v=4" width="42;" alt="Lucas Sierota"/>
-</a>
-<a href="https://github.com/michaelkramer" title="Michael Kramer">
-  <img src="https://avatars.githubusercontent.com/u/6052223?v=4" width="42;" alt="Michael Kramer"/>
-</a>
-<a href="https://github.com/peterj" title="Peter Jausovec">
-  <img src="https://avatars.githubusercontent.com/u/11080940?v=4" width="42;" alt="Peter Jausovec"/>
-</a>
-<a href="https://github.com/phillipb" title="Phillip Burch">
-  <img src="https://avatars.githubusercontent.com/u/1482089?v=4" width="42;" alt="Phillip Burch"/>
-</a>
-<a href="https://github.com/psycho-baller" title="Rami Maalouf">
-  <img src="https://avatars.githubusercontent.com/u/81759594?v=4" width="42;" alt="Rami Maalouf"/>
-</a>
-<a href="https://github.com/toresbe" title="Tore Sinding Bekkedal">
-  <img src="https://avatars.githubusercontent.com/u/1761606?v=4" width="42;" alt="Tore Sinding Bekkedal"/>
-</a>
-<a href="https://github.com/valenfv" title="Valentin">
-  <img src="https://avatars.githubusercontent.com/u/34139820?v=4" width="42;" alt="Valentin"/>
-</a>
-<a href="https://github.com/jmtes" title="juno tesoro">
-  <img src="https://avatars.githubusercontent.com/u/38450133?v=4" width="42;" alt="juno tesoro"/>
-</a>
-<a href="https://github.com/juspky" title="juspky">
-  <img src="https://avatars.githubusercontent.com/u/11074890?v=4" width="42;" alt="juspky"/>
-</a>
-<a href="https://github.com/ryicoh" title="ryicoh">
-  <img src="https://avatars.githubusercontent.com/u/37844673?v=4" width="42;" alt="ryicoh"/>
-</a>
-<a href="https://github.com/wj0990" title="wangjie">
-  <img src="https://avatars.githubusercontent.com/u/8792016?v=4" width="42;" alt="wangjie"/>
-</a><!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT-END-->
+<!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT--><a href="https://github.com/jaywcjlove" title="小弟调调"><img src="https://avatars.githubusercontent.com/u/1680273?v=4" width="42;" alt="小弟调调"/></a>
+<a href="https://github.com/renovate-bot" title="Mend Renovate"><img src="https://avatars.githubusercontent.com/u/25180681?v=4" width="42;" alt="Mend Renovate"/></a>
+<a href="https://github.com/stevemk14ebr" title="Stephen Eckels"><img src="https://avatars.githubusercontent.com/u/6619205?v=4" width="42;" alt="Stephen Eckels"/></a>
+<a href="https://github.com/alpharomercoma" title="Alpha Romer Coma"><img src="https://avatars.githubusercontent.com/u/108984668?v=4" width="42;" alt="Alpha Romer Coma"/></a>
+<a href="https://github.com/RARgames" title="RAR"><img src="https://avatars.githubusercontent.com/u/13639766?v=4" width="42;" alt="RAR"/></a>
+<a href="https://github.com/Exmirai" title="UniqueUlysees"><img src="https://avatars.githubusercontent.com/u/6436703?v=4" width="42;" alt="UniqueUlysees"/></a>
+<a href="https://github.com/nuragic" title="Andrea Puddu"><img src="https://avatars.githubusercontent.com/u/1586378?v=4" width="42;" alt="Andrea Puddu"/></a>
+<a href="https://github.com/AntonR31337" title="Anton"><img src="https://avatars.githubusercontent.com/u/88384647?v=4" width="42;" alt="Anton"/></a>
+<a href="https://github.com/bramus" title="Bramus"><img src="https://avatars.githubusercontent.com/u/213073?v=4" width="42;" alt="Bramus"/></a>
+<a href="https://github.com/CarleneCannon-Conner" title="Carlene Cannon-Conner"><img src="https://avatars.githubusercontent.com/u/1942791?v=4" width="42;" alt="Carlene Cannon-Conner"/></a>
+<a href="https://github.com/MercierCorentin" title="Corentin Mercier"><img src="https://avatars.githubusercontent.com/u/46066895?v=4" width="42;" alt="Corentin Mercier"/></a>
+<a href="https://github.com/dmitriyyan" title="Dmitrii Ianushkevich"><img src="https://avatars.githubusercontent.com/u/89025862?v=4" width="42;" alt="Dmitrii Ianushkevich"/></a>
+<a href="https://github.com/jnishiyama" title="James Finucane"><img src="https://avatars.githubusercontent.com/u/2048195?v=4" width="42;" alt="James Finucane"/></a>
+<a href="https://github.com/allforabit" title="Kevin Nolan"><img src="https://avatars.githubusercontent.com/u/537189?v=4" width="42;" alt="Kevin Nolan"/></a>
+<a href="https://github.com/kseikyo" title="Lucas Sierota"><img src="https://avatars.githubusercontent.com/u/29212286?v=4" width="42;" alt="Lucas Sierota"/></a>
+<a href="https://github.com/michaelkramer" title="Michael Kramer"><img src="https://avatars.githubusercontent.com/u/6052223?v=4" width="42;" alt="Michael Kramer"/></a>
+<a href="https://github.com/peterj" title="Peter Jausovec"><img src="https://avatars.githubusercontent.com/u/11080940?v=4" width="42;" alt="Peter Jausovec"/></a>
+<a href="https://github.com/phillipb" title="Phillip Burch"><img src="https://avatars.githubusercontent.com/u/1482089?v=4" width="42;" alt="Phillip Burch"/></a>
+<a href="https://github.com/psycho-baller" title="Rami Maalouf"><img src="https://avatars.githubusercontent.com/u/81759594?v=4" width="42;" alt="Rami Maalouf"/></a>
+<a href="https://github.com/toresbe" title="Tore Sinding Bekkedal"><img src="https://avatars.githubusercontent.com/u/1761606?v=4" width="42;" alt="Tore Sinding Bekkedal"/></a>
+<a href="https://github.com/valenfv" title="Valentin"><img src="https://avatars.githubusercontent.com/u/34139820?v=4" width="42;" alt="Valentin"/></a>
+<a href="https://github.com/jmtes" title="juno tesoro"><img src="https://avatars.githubusercontent.com/u/38450133?v=4" width="42;" alt="juno tesoro"/></a>
+<a href="https://github.com/juspky" title="juspky"><img src="https://avatars.githubusercontent.com/u/11074890?v=4" width="42;" alt="juspky"/></a>
+<a href="https://github.com/ryicoh" title="ryicoh"><img src="https://avatars.githubusercontent.com/u/37844673?v=4" width="42;" alt="ryicoh"/></a>
+<a href="https://github.com/wj0990" title="wangjie"><img src="https://avatars.githubusercontent.com/u/8792016?v=4" width="42;" alt="wangjie"/></a><!--AUTO_GENERATED_PLEASE_DONT_DELETE_IT-END-->
 
 Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
 

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,14 @@
     --color-accent-emphasis: #1f6feb;
     --color-attention-subtle: rgba(187, 128, 9, 0.15);
     --color-danger-fg: #f85149;
+    --color-danger-emphasis: #da3633;
+    --color-attention-fg: #d29922;
+    --color-attention-emphasis: #9e6a03;
+    --color-done-fg: #a371f7;
+    --color-done-emphasis: #8957e5;
+    --color-success-fg: #3fb950;
+    --color-success-emphasis: #238636;
+    --color-copied-active-bg: #2e9b33;
   }
 }
 @media (prefers-color-scheme: light) {
@@ -91,7 +99,15 @@
     --color-accent-fg: #0969da;
     --color-accent-emphasis: #0969da;
     --color-attention-subtle: #fff8c5;
-    --color-danger-fg: #cf222e;
+    --color-danger-fg: #d1242f;
+    --color-danger-emphasis: #cf222e;
+    --color-attention-fg: #9a6700;
+    --color-attention-emphasis: #9a6700;
+    --color-done-fg: #8250df;
+    --color-done-emphasis: #8250df;
+    --color-success-fg: #1a7f37;
+    --color-success-emphasis: #1f883d;
+    --color-copied-active-bg: #2e9b33;
   }
 }
 [data-color-mode*='dark'] .wmde-markdown,
@@ -194,7 +210,7 @@ body[data-color-mode*='light'] {
 }
 .wmde-markdown {
   -webkit-text-size-adjust: 100%;
-  font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   font-size: 16px;
   line-height: 1.5;
   word-wrap: break-word;
@@ -803,6 +819,15 @@ body[data-color-mode*='light'] {
   overflow: auto;
   display: block;
 }
+.wmde-markdown pre > code::-webkit-scrollbar {
+  background: transparent;
+  width: 8px;
+  height: 8px;
+}
+.wmde-markdown pre > code::-webkit-scrollbar-thumb {
+  background: var(--color-fg-muted);
+  border-radius: 10px;
+}
 .wmde-markdown .csv-data td,
 .wmde-markdown .csv-data th {
   padding: 5px;
@@ -889,7 +914,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 +938,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 +947,71 @@ body[data-color-mode*='light'] {
 .wmde-markdown pre .active .octicon-check {
   display: block;
 }
-.highlight-line {
+.wmde-markdown .markdown-alert {
+  padding: 0.5rem 1em;
+  color: inherit;
+  margin-bottom: 16px;
+  border-left: 0.25em solid var(--color-border-default);
+  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
+}
+.wmde-markdown .markdown-alert > :last-child {
+  margin-bottom: 0 !important;
+}
+.wmde-markdown .markdown-alert .markdown-alert-title {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  font-weight: 500;
+  font-size: 14px;
+}
+.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {
+  margin-right: 8px !important;
+  margin-right: var(--base-size-8, 8px) !important;
+}
+.wmde-markdown .markdown-alert.markdown-alert-note {
+  border-left-color: var(--color-accent-emphasis);
+  border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+}
+.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {
+  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
+}
+.wmde-markdown .markdown-alert.markdown-alert-tip {
+  border-left-color: var(--color-success-emphasis);
+  border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
+}
+.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {
+  color: var(--color-success-fg);
+  color: var(--fgColor-success, var(--color-success-fg));
+}
+.wmde-markdown .markdown-alert.markdown-alert-important {
+  border-left-color: var(--color-done-emphasis);
+  border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
+}
+.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {
+  color: var(--color-done-fg);
+  color: var(--fgColor-done, var(--color-done-fg));
+}
+.wmde-markdown .markdown-alert.markdown-alert-warning {
+  border-left-color: var(--color-attention-emphasis);
+  border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+}
+.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {
+  color: var(--color-attention-fg);
+  color: var(--fgColor-attention, var(--color-attention-fg));
+}
+.wmde-markdown .markdown-alert.markdown-alert-caution {
+  border-left-color: var(--color-danger-emphasis);
+  border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
+}
+.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {
+  color: var(--color-danger-fg);
+  color: var(--fgColor-danger, var(--color-danger-fg));
+}
+.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 +1020,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;
 }