@wyttime04/react-vditor 1.0.0 → 1.0.1

package/README.md

@@ -230,14 +230,15 @@ const App = () => {
 |---|---|---|
 | 編輯器外框 | vditor `classic` | vditor `dark` |
 | 內容主題 | vditor `light` | vditor `dark` |
-| 程式碼上色 | highlight.js `github` | highlight.js `github-dark` |
+| 程式碼上色 | highlight.js `github`（vditor 整頁載入的樣式） | highlight.js `github-dark` |
+| 預覽的程式碼區塊背景色 | `#f6f8fa` | `#0d1117`（`github-dark`） |
 | `<VditorPreview>` 背景色 | 不設定 | `#2f363d`（與 vditor 深色編輯區相同） |
 
 ### 說明
 
 - 各元件的主題彼此獨立，同一頁面可混用不同主題。vditor 原生以整頁共用的 `<link>` 載入內容主題，
   同一頁面只能使用一種；本套件將主題樣式局部化並併入 `index.css`，改由元件容器上的
-  `react-vditor--light` / `react-vditor--dark` class 套用。
+  `react-vditor--light` / `react-vditor--dark` class 套用。局部化不提高選擇器權重，除上表的預覽程式碼區塊背景色外，套用結果與原生 vditor 相同。
 - 切換主題不會重建編輯器。
 - `theme` prop 取代 vditor 原生的 `theme`（`classic` / `dark`）與 `preview.theme` 設定；ref 亦不提供 `setTheme`。
 
@@ -370,7 +371,7 @@ const html = await md2html(markdown, {transform: sanitize});
 - 網址不合法的連結轉為純文字，僅作用於 `<VditorPreview>`、`md2html()` 與編輯器的預覽區；ir / wysiwyg 模式的編輯區不套用 `transform`，連結仍會顯示
 - `$$ … $$` 區塊會以程式碼區塊呈現（Lute 未提供停用此語法的設定）
 - `:smile:` 等 emoji 代碼會轉為對應字元，YAML front matter 會以程式碼區塊呈現；兩者雖非 GFM 語法，仍予以保留
-- vditor 無論設定為何，都會整頁載入 highlight.js 的 `github.min.css`；`dark` 主題的程式碼樣式以局部化且優先權較高的規則覆寫
+- vditor 無論設定為何，都會整頁載入 highlight.js 的 `github.min.css`；`light` 主題直接沿用，`dark` 主題的程式碼樣式以權重略高的局部化規則覆寫
 - 啟用 `cache` 且未提供 `value` 時，若快取內容包含 `$…$`，初次渲染會嘗試載入未輸出的 katex，產生本機 404
 
 ## 開發

package/dist/index.css

@@ -1904,7 +1904,7 @@
 }
 
 
-/* react-vditor light / dark 主題，只作用在 .react-vditor--light / .react-vditor--dark 容器裡 */
+/* react-vditor：light / dark 主題 */
 /*!
  * Vditor - A markdown editor written in TypeScript.
  *
@@ -1931,7 +1931,7 @@
  * SOFTWARE.
  *
  */
-.react-vditor--light .vditor-reset {
+:where(.react-vditor--light) .vditor-reset {
     --callout-note-color: #0969da;
     --callout-note-background-color: rgba(9, 105, 218, 0.08);
     --callout-tip-color: #1a7f37;
@@ -1944,93 +1944,82 @@
     --callout-caution-background-color: rgba(207, 34, 46, 0.08);
 }
 
-.react-vditor--light .vditor-reset h1, .react-vditor--light .vditor-reset h2 {
+:where(.react-vditor--light) .vditor-reset h1, :where(.react-vditor--light) .vditor-reset h2 {
     padding-bottom: 0.3em;
     border-bottom: 1px solid #eaecef;
 }
 
-.react-vditor--light .vditor-reset hr {
+:where(.react-vditor--light) .vditor-reset hr {
     background-color: #eaecef;
 }
 
-.react-vditor--light .vditor-reset blockquote {
+:where(.react-vditor--light) .vditor-reset blockquote {
     color: #6a737d;
     border-left: .25em solid #eaecef
 }
 
-.react-vditor--light .vditor-reset iframe {
+:where(.react-vditor--light) .vditor-reset iframe {
     border: 1px solid #d1d5da
 }
 
-.react-vditor--light .vditor-reset table tr {
+:where(.react-vditor--light) .vditor-reset table tr {
     border-top: 1px solid #c6cbd1;
     background-color: #fafbfc
 }
 
-.react-vditor--light .vditor-reset table td, .react-vditor--light .vditor-reset table th {
+:where(.react-vditor--light) .vditor-reset table td, :where(.react-vditor--light) .vditor-reset table th {
     border: 1px solid #dfe2e5
 }
 
-.react-vditor--light .vditor-reset table tbody tr:nth-child(2n) {
+:where(.react-vditor--light) .vditor-reset table tbody tr:nth-child(2n) {
     background-color: #fff
 }
 
-.react-vditor--light .vditor-reset code:not(.hljs):not(.highlight-chroma) {
+:where(.react-vditor--light) .vditor-reset code:not(.hljs):not(.highlight-chroma) {
     background-color: rgba(27, 31, 35, .05);
 }
 
-.react-vditor--light .vditor-reset kbd {
+:where(.react-vditor--light) .vditor-reset kbd {
     color: #24292e;
     background-color: #fafbfc;
     border: solid 1px #d1d5da;
     box-shadow: inset 0 -1px 0 #d1d5da;
 }
 
-.react-vditor--light .vditor-speech {
+:where(.react-vditor--light) .vditor-speech {
     background-color: #f6f8fa;
     border: 1px solid #d1d5da;
     color: #586069;
 }
 
-.react-vditor--light .vditor-speech--current, .react-vditor--light .vditor-speech:hover {
+:where(.react-vditor--light) .vditor-speech--current, :where(.react-vditor--light) .vditor-speech:hover {
     color: #4285f4;
 }
 
-.react-vditor--light .vditor-linkcard a {
+:where(.react-vditor--light) .vditor-linkcard a {
     background-color: #f6f8fa;
 }
 
-.react-vditor--light .vditor-linkcard a:visited .vditor-linkcard__abstract {
+:where(.react-vditor--light) .vditor-linkcard a:visited .vditor-linkcard__abstract {
     color: rgba(88, 96, 105, 0.36);
 }
 
-.react-vditor--light .vditor-linkcard__title {
+:where(.react-vditor--light) .vditor-linkcard__title {
     color: #24292e;
 }
 
-.react-vditor--light .vditor-linkcard__abstract {
+:where(.react-vditor--light) .vditor-linkcard__abstract {
     color: #586069;
 }
 
-.react-vditor--light .vditor-linkcard__site {
+:where(.react-vditor--light) .vditor-linkcard__site {
     color: #4285f4;
 }
 
-.react-vditor--light .vditor-linkcard__image {
+:where(.react-vditor--light) .vditor-linkcard__image {
     background-color: rgba(88, 96, 105, 0.36);
 }
 
-.react-vditor--light pre code.hljs{display:block;overflow-x:auto;padding:1em}.react-vditor--light code.hljs{padding:3px 5px}/*!
-  Theme: GitHub
-  Description: Light theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-light
-  Current colors taken from GitHub's CSS
-*/.react-vditor--light .hljs{color:#24292e;background:#fff}.react-vditor--light .hljs-doctag,.react-vditor--light .hljs-keyword,.react-vditor--light .hljs-meta .hljs-keyword,.react-vditor--light .hljs-template-tag,.react-vditor--light .hljs-template-variable,.react-vditor--light .hljs-type,.react-vditor--light .hljs-variable.language_{color:#d73a49}.react-vditor--light .hljs-title,.react-vditor--light .hljs-title.class_,.react-vditor--light .hljs-title.class_.inherited__,.react-vditor--light .hljs-title.function_{color:#6f42c1}.react-vditor--light .hljs-attr,.react-vditor--light .hljs-attribute,.react-vditor--light .hljs-literal,.react-vditor--light .hljs-meta,.react-vditor--light .hljs-number,.react-vditor--light .hljs-operator,.react-vditor--light .hljs-selector-attr,.react-vditor--light .hljs-selector-class,.react-vditor--light .hljs-selector-id,.react-vditor--light .hljs-variable{color:#005cc5}.react-vditor--light .hljs-meta .hljs-string,.react-vditor--light .hljs-regexp,.react-vditor--light .hljs-string{color:#032f62}.react-vditor--light .hljs-built_in,.react-vditor--light .hljs-symbol{color:#e36209}.react-vditor--light .hljs-code,.react-vditor--light .hljs-comment,.react-vditor--light .hljs-formula{color:#6a737d}.react-vditor--light .hljs-name,.react-vditor--light .hljs-quote,.react-vditor--light .hljs-selector-pseudo,.react-vditor--light .hljs-selector-tag{color:#22863a}.react-vditor--light .hljs-subst{color:#24292e}.react-vditor--light .hljs-section{color:#005cc5;font-weight:700}.react-vditor--light .hljs-bullet{color:#735c0f}.react-vditor--light .hljs-emphasis{color:#24292e;font-style:italic}.react-vditor--light .hljs-strong{color:#24292e;font-weight:700}.react-vditor--light .hljs-addition{color:#22863a;background-color:#f0fff4}.react-vditor--light .hljs-deletion{color:#b31d28;background-color:#ffeef0}
-
 /*!
  * Vditor - A markdown editor written in TypeScript.
  *
@@ -2057,7 +2046,7 @@
  * SOFTWARE.
  *
  */
-.react-vditor--dark .vditor-reset {
+:where(.react-vditor--dark) .vditor-reset {
     color: #d1d5da;
     --callout-note-color: #58a6ff;
     --callout-note-background-color: rgba(56, 139, 253, 0.15);
@@ -2071,101 +2060,101 @@
     --callout-caution-background-color: rgba(248, 81, 73, 0.15);
 }
 
-.react-vditor--dark .vditor-reset a, .react-vditor--dark .vditor-ir__link {
+:where(.react-vditor--dark) .vditor-reset a, :where(.react-vditor--dark) .vditor-ir__link {
     color: #4285f4;
 }
 
-.react-vditor--dark .vditor-reset h1, .react-vditor--dark .vditor-reset h2 {
+:where(.react-vditor--dark) .vditor-reset h1, :where(.react-vditor--dark) .vditor-reset h2 {
     padding-bottom: 0.3em;
     border-bottom: 1px solid #d1d5da
 }
 
-.react-vditor--dark .vditor-reset hr {
+:where(.react-vditor--dark) .vditor-reset hr {
     background-color: #d1d5da
 }
 
-.react-vditor--dark .vditor-reset blockquote {
+:where(.react-vditor--dark) .vditor-reset blockquote {
     padding: 0 1em;
     color: #b9b9b9;
     border-left: .25em solid #d1d5da
 }
 
-.react-vditor--dark .vditor-reset iframe {
+:where(.react-vditor--dark) .vditor-reset iframe {
     border: 1px solid #141414
 }
 
-.react-vditor--dark .vditor-reset table tr {
+:where(.react-vditor--dark) .vditor-reset table tr {
     background-color: #2f363d
 }
 
-.react-vditor--dark .vditor-reset table td, .react-vditor--dark .vditor-reset table th {
+:where(.react-vditor--dark) .vditor-reset table td, :where(.react-vditor--dark) .vditor-reset table th {
     border: 1px solid #dfe2e5
 }
 
-.react-vditor--dark .vditor-reset table tbody tr:nth-child(2n) {
+:where(.react-vditor--dark) .vditor-reset table tbody tr:nth-child(2n) {
     background-color: #24292e
 }
 
-.react-vditor--dark .vditor-reset code:not(.hljs):not(.highlight-chroma) {
+:where(.react-vditor--dark) .vditor-reset code:not(.hljs):not(.highlight-chroma) {
     background-color: rgba(66, 133, 244, .36);
 }
 
-.react-vditor--dark .vditor-reset .language-abc svg,
-.react-vditor--dark .vditor-reset .language-abc path {
+:where(.react-vditor--dark) .vditor-reset .language-abc svg,
+:where(.react-vditor--dark) .vditor-reset .language-abc path {
     fill: currentColor;
     color: #d1d5da;
 }
 
-.react-vditor--dark .language-graphviz polygon {
+:where(.react-vditor--dark) .language-graphviz polygon {
     fill: rgba(66, 133, 244, .36);
 }
 
-.react-vditor--dark .vditor-reset kbd {
+:where(.react-vditor--dark) .vditor-reset kbd {
     color: #d1d5da;
     background-color: #2f363d;
     border: 1px solid #141414;
     box-shadow: inset 0 -1px 0 #141414
 }
 
-.react-vditor--dark .vditor-copy svg {
+:where(.react-vditor--dark) .vditor-copy svg {
     color: #b9b9b9
 }
 
-.react-vditor--dark .vditor-speech {
+:where(.react-vditor--dark) .vditor-speech {
     background-color: #1d2125;
     border: 1px solid #141414;
     color: #b9b9b9
 }
 
-.react-vditor--dark .vditor-speech--current, .react-vditor--dark .vditor-speech:hover {
+:where(.react-vditor--dark) .vditor-speech--current, :where(.react-vditor--dark) .vditor-speech:hover {
     color: #fff
 }
 
-.react-vditor--dark .vditor-linkcard a {
+:where(.react-vditor--dark) .vditor-linkcard a {
     background-color: #1d2125;
 }
 
-.react-vditor--dark .vditor-linkcard a:visited .vditor-linkcard__abstract {
+:where(.react-vditor--dark) .vditor-linkcard a:visited .vditor-linkcard__abstract {
     color: hsla(0, 0%, 72.5%, .36)
 }
 
-.react-vditor--dark .vditor-linkcard__title {
+:where(.react-vditor--dark) .vditor-linkcard__title {
     color: #d1d5da
 }
 
-.react-vditor--dark .vditor-linkcard__abstract {
+:where(.react-vditor--dark) .vditor-linkcard__abstract {
     color: #b9b9b9
 }
 
-.react-vditor--dark .vditor-linkcard__site {
+:where(.react-vditor--dark) .vditor-linkcard__site {
     color: #fff
 }
 
-.react-vditor--dark .vditor-linkcard__image {
+:where(.react-vditor--dark) .vditor-linkcard__image {
     background-color: hsla(0, 0%, 72.5%, .36)
 }
 
-.react-vditor--dark pre code.hljs{display:block;overflow-x:auto;padding:1em}.react-vditor--dark code.hljs{padding:3px 5px}/*!
+div:where(.react-vditor--dark) pre code.hljs{display:block;overflow-x:auto;padding:1em}div:where(.react-vditor--dark) code.hljs{padding:3px 5px}/*!
   Theme: GitHub Dark
   Description: Dark theme as seen on github.com
   Author: github.com
@@ -2174,6 +2163,7 @@
 
   Outdated base version: https://github.com/primer/github-syntax-dark
   Current colors taken from GitHub's CSS
-*/.react-vditor--dark .hljs{color:#c9d1d9;background:#0d1117}.react-vditor--dark .hljs-doctag,.react-vditor--dark .hljs-keyword,.react-vditor--dark .hljs-meta .hljs-keyword,.react-vditor--dark .hljs-template-tag,.react-vditor--dark .hljs-template-variable,.react-vditor--dark .hljs-type,.react-vditor--dark .hljs-variable.language_{color:#ff7b72}.react-vditor--dark .hljs-title,.react-vditor--dark .hljs-title.class_,.react-vditor--dark .hljs-title.class_.inherited__,.react-vditor--dark .hljs-title.function_{color:#d2a8ff}.react-vditor--dark .hljs-attr,.react-vditor--dark .hljs-attribute,.react-vditor--dark .hljs-literal,.react-vditor--dark .hljs-meta,.react-vditor--dark .hljs-number,.react-vditor--dark .hljs-operator,.react-vditor--dark .hljs-selector-attr,.react-vditor--dark .hljs-selector-class,.react-vditor--dark .hljs-selector-id,.react-vditor--dark .hljs-variable{color:#79c0ff}.react-vditor--dark .hljs-meta .hljs-string,.react-vditor--dark .hljs-regexp,.react-vditor--dark .hljs-string{color:#a5d6ff}.react-vditor--dark .hljs-built_in,.react-vditor--dark .hljs-symbol{color:#ffa657}.react-vditor--dark .hljs-code,.react-vditor--dark .hljs-comment,.react-vditor--dark .hljs-formula{color:#8b949e}.react-vditor--dark .hljs-name,.react-vditor--dark .hljs-quote,.react-vditor--dark .hljs-selector-pseudo,.react-vditor--dark .hljs-selector-tag{color:#7ee787}.react-vditor--dark .hljs-subst{color:#c9d1d9}.react-vditor--dark .hljs-section{color:#1f6feb;font-weight:700}.react-vditor--dark .hljs-bullet{color:#f2cc60}.react-vditor--dark .hljs-emphasis{color:#c9d1d9;font-style:italic}.react-vditor--dark .hljs-strong{color:#c9d1d9;font-weight:700}.react-vditor--dark .hljs-addition{color:#aff5b4;background-color:#033a16}.react-vditor--dark .hljs-deletion{color:#ffdcd7;background-color:#67060c}
+*/div:where(.react-vditor--dark) .hljs{color:#c9d1d9;background:#0d1117}div:where(.react-vditor--dark) .hljs-doctag,div:where(.react-vditor--dark) .hljs-keyword,div:where(.react-vditor--dark) .hljs-meta .hljs-keyword,div:where(.react-vditor--dark) .hljs-template-tag,div:where(.react-vditor--dark) .hljs-template-variable,div:where(.react-vditor--dark) .hljs-type,div:where(.react-vditor--dark) .hljs-variable.language_{color:#ff7b72}div:where(.react-vditor--dark) .hljs-title,div:where(.react-vditor--dark) .hljs-title.class_,div:where(.react-vditor--dark) .hljs-title.class_.inherited__,div:where(.react-vditor--dark) .hljs-title.function_{color:#d2a8ff}div:where(.react-vditor--dark) .hljs-attr,div:where(.react-vditor--dark) .hljs-attribute,div:where(.react-vditor--dark) .hljs-literal,div:where(.react-vditor--dark) .hljs-meta,div:where(.react-vditor--dark) .hljs-number,div:where(.react-vditor--dark) .hljs-operator,div:where(.react-vditor--dark) .hljs-selector-attr,div:where(.react-vditor--dark) .hljs-selector-class,div:where(.react-vditor--dark) .hljs-selector-id,div:where(.react-vditor--dark) .hljs-variable{color:#79c0ff}div:where(.react-vditor--dark) .hljs-meta .hljs-string,div:where(.react-vditor--dark) .hljs-regexp,div:where(.react-vditor--dark) .hljs-string{color:#a5d6ff}div:where(.react-vditor--dark) .hljs-built_in,div:where(.react-vditor--dark) .hljs-symbol{color:#ffa657}div:where(.react-vditor--dark) .hljs-code,div:where(.react-vditor--dark) .hljs-comment,div:where(.react-vditor--dark) .hljs-formula{color:#8b949e}div:where(.react-vditor--dark) .hljs-name,div:where(.react-vditor--dark) .hljs-quote,div:where(.react-vditor--dark) .hljs-selector-pseudo,div:where(.react-vditor--dark) .hljs-selector-tag{color:#7ee787}div:where(.react-vditor--dark) .hljs-subst{color:#c9d1d9}div:where(.react-vditor--dark) .hljs-section{color:#1f6feb;font-weight:700}div:where(.react-vditor--dark) .hljs-bullet{color:#f2cc60}div:where(.react-vditor--dark) .hljs-emphasis{color:#c9d1d9;font-style:italic}div:where(.react-vditor--dark) .hljs-strong{color:#c9d1d9;font-weight:700}div:where(.react-vditor--dark) .hljs-addition{color:#aff5b4;background-color:#033a16}div:where(.react-vditor--dark) .hljs-deletion{color:#ffdcd7;background-color:#67060c}
 
+:where(.react-vditor--light) .vditor-reset pre > code.hljs { background-color: #f6f8fa; }
 .react-vditor-preview.react-vditor--dark { background-color: #2f363d; }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wyttime04/react-vditor",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "React component for the Vditor Markdown editor, limited to GFM and fully offline",
     "keywords": [
         "react",