Replace demo

* Remove codemirror, replace with textarea and starry-night * Update ancient react patterns with hooks
remarkjs · Apr 11, 2023 · 6b25365 · 6b25365
1 parent d341901
commit 6b25365
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -8,11 +8,13 @@
   "contributors": [],
   "type": "module",
   "devDependencies": {
+    "@wooorm/starry-night": "^2.0.0",
     "cssnano": "^6.0.0",
     "esbuild": "^0.17.0",
     "eslint-config-xo-react": "^0.27.0",
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.0.0",
+    "hast-util-to-jsx-runtime": "^1.0.0",
     "postcss-cli": "^10.0.0",
     "prettier": "^2.0.0",
     "react": "^18.0.0",
@@ -66,6 +68,7 @@
       "browser"
     ],
     "rules": {
+      "n/file-extension-in-import": 0,
       "react/state-in-constructor": [
         2,
         "always"

diff --git a/src/codemirror.js b/src/codemirror.js
diff --git a/src/index.css b/src/index.css
@@ -1,46 +1,57 @@
 :root {
-  --ff-sans: system-ui;
-  --ff-mono: 'San Francisco Mono', 'Monaco', 'Consolas', 'Lucida Console',
-    'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
-  --gray-0: #fafbfc;
-  --gray-2: #e1e4e8;
-  --gray-4: #959da5;
-  --gray-6: #586069;
-  --gray-8: #2f363d;
-  --gray-10: #1b1f23;
+  --ff-sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Noto Sans',
+    'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --ff-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas',
+    'Liberation Mono', monospace;
+  --color-canvas-back: #f6f8fa;
+  --color-hl: #0969da;
+  --color-fg: #0d1117;
+
+  color-scheme: light dark;
+  background-color: var(--color-canvas-back);
+  color: var(--color-fg);
+  font-family: var(--ff-sans);
+  font-kerning: normal;
+  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+  text-size-adjust: 100%;
+  word-break: break-word;
 }
 
-* {
-  line-height: calc(1em + 1ex);
-  box-sizing: border-box;
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-canvas-back: #0d1117;
+    --color-hl: #58a6ff;
+    --color-fg: #f6f8fa;
+  }
 }
 
-html {
-  text-size-adjust: 100%;
-  word-wrap: break-word;
-  font-kerning: normal;
-  font-family: var(--ff-sans);
-  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+body {
+  margin: 0;
+
+  /* background-color: var(--color-canvas-back); */
+
+  /* color: var(--color-fg); */
+}
+
+* {
+  line-height: calc(1 * (1em + 1ex));
+  box-sizing: border-box;
 }
 
-textarea,
 code,
+kbd,
 pre,
-kbd {
+textarea,
+.write,
+.draw {
   font-family: var(--ff-mono);
   font-feature-settings: normal;
   font-size: smaller;
 }
 
-body {
-  background-color: var(--gray-10);
-  color: var(--gray-0);
-  margin: 0;
-}
-
 .page-header {
   font-size: inherit;
-  margin: calc(1em + 1ex);
+  margin: calc(1 * (1em + 1ex));
 }
 
 .editor,
@@ -59,30 +70,63 @@ body {
 .result {
   right: 0;
   left: 50%;
-  background-color: var(--gray-0);
   padding: calc(1em + 1ex);
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
-.CodeMirror {
-  width: 100%;
-  height: 100%;
+.editor-inner {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  margin: 8px;
 }
 
-.editor textarea {
+/* .editor textarea {
   display: block;
   min-height: 100vh;
   width: 100%;
   border: 0;
   resize: none;
   padding: calc(1em + 1ex);
-  background-color: var(--gray-10);
-  color: var(--gray-0);
+  background-color: var(--color-canvas-back);
+  color: var(--color-fg);
+} */
+.write,
+.draw {
+  font-size: 14px;
+  tab-size: 4;
+  letter-spacing: normal;
+  line-height: calc(1 * (1em + 1ex));
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background: transparent;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  resize: none;
+}
+
+.write::selection {
+  color: var(--color-fg);
+  background-color: hsl(42.22deg 74.31% 57.25% / 66%);
+}
+
+.write {
+  position: absolute;
+  top: 0;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  color: transparent;
+  caret-color: var(--color-hl);
 }
 
 .controls {
-  color: var(--gray-0);
-  background-color: var(--gray-10);
+  color: var(--color-fg);
+  background-color: var(--color-canvas-back);
   padding: calc(1ex);
   padding-top: 0;
 }
@@ -106,11 +150,6 @@ body {
   display: none;
 }
 
-/* Fix too low contrast on code */
-.cm-s-nord span.cm-comment {
-  color: var(--gray-4) !important;
-}
-
 @keyframes octocat-wave {
   0%,
   100% {

diff --git a/src/index.html b/src/index.html
@@ -6,10 +6,10 @@
 <meta name=viewport content=width=device-width,initial-scale=1>
 <meta name=description content="Markdown component for React">
 <meta property=og:description content="Markdown component for React">
-<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/codemirror.min.css>
-<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/nord.min.css>
-<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css>
-<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css>
+<link rel=stylesheet href=https://esm.sh/@wooorm/starry-night@1/style/both.css>
+<link rel=stylesheet href=https://esm.sh/github-markdown-css@5/github-markdown.css>
+<!-- To do: remove when `react-markdown` supports async plugins and we can use starry-night -->
+<link rel=stylesheet href=https://esm.sh/highlight.js@11/styles/github.min.css>
 <link rel=stylesheet href=index.css>
 <a href=https://github.com/remarkjs/react-markdown class=github-corner aria-label="View project on GitHub">
   <svg
@@ -35,7 +35,5 @@
   <h1 class=page-header>react-markdown</h1>
   <main></main>
 </div>
-<script src=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.min.js></script>
-<script src=https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/mode/markdown/markdown.min.js></script>
 <script type=module src=index.module.js></script>
 <script nomodule src=index.nomodule.js></script>