CodeContent component

package.json

@@ -32,6 +32,7 @@
     "base64-js": "^1.3.1",
     "bs58": "^4.0.1",
     "classnames": "^2.2.6",
+    "codemirror": "5.49.2",
     "data-urls": "^1.1.0",
     "diff-match-patch": "^1.0.4",
     "discovery-cloud-client": "^0.0.3",

src/renderer/components/Root.tsx

@@ -20,6 +20,7 @@ import './content-types/storage-peer'
 
 // other single-context components
 import './content-types/TextContent'
+import './content-types/CodeContent'
 import './content-types/ThreadContent'
 import './content-types/UrlContent'
 import './content-types/files/ImageContent'

src/renderer/components/content-types/CodeContent.css

@@ -0,0 +1,256 @@
+@import '../../../../node_modules/codemirror/lib/codemirror.css';
+
+.CodeMirrorEditor {
+  cursor: text;
+  text-align: left;
+  color: var(--colorBlack);
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: white;
+  border: solid 1px var(--colorPaleGrey);
+  overflow: auto;
+}
+.CodeMirrorEditor:focus,
+.CodeMirrorEditor:active {
+  outline: none;
+}
+.CodeMirrorEditor::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.CodeMirrorEditor::-webkit-scrollbar-track {
+  background-color: transparent;
+  margin-bottom: 10px;
+}
+
+.CodeMirrorEditor::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+.CodeMirrorEditor:hover::-webkit-scrollbar-track {
+  background-color: #f3f3f3;
+}
+
+.CodeMirrorEditor:hover::-webkit-scrollbar-thumb {
+  background-color: var(--colorPaleGrey);
+}
+
+.CodeMirrorEditor::-webkit-scrollbar-thumb:hover {
+  background-color: #cbd5db;
+}
+.CodeMirrorEditor__editor {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+}
+
+.CodeMirrorEditor div.CodeMirror {
+  height: auto;
+}
+
+.CodeMirrorEditor div.CodeMirror-lines {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 0;
+}
+
+.CodeMirrorEditor pre.CodeMirror-line {
+  padding: 0;
+}
+
+.CodeMirrorEditor__renderer {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px;
+}
+
+.CodeMirrorEditor__renderer a {
+  color: #0645ad;
+  text-decoration: none;
+}
+
+.CodeMirrorEditor__renderer a:visited {
+  color: #0b0080;
+}
+
+.CodeMirrorEditor__renderer a:hover {
+  color: #06e;
+}
+
+.CodeMirrorEditor__renderer a:active {
+  color: #faa700;
+}
+
+.CodeMirrorEditor__renderer a:focus {
+  outline: thin dotted;
+}
+
+.CodeMirrorEditor__renderer a:hover,
+.CodeMirrorEditor__renderer a:active {
+  outline: 0;
+}
+
+.CodeMirrorEditor__renderer h1,
+.CodeMirrorEditor__renderer h2,
+.CodeMirrorEditor__renderer h3,
+.CodeMirrorEditor__renderer h4,
+.CodeMirrorEditor__renderer h5,
+.CodeMirrorEditor__renderer h6 {
+  font-weight: 600;
+  color: var(--colorBlueBlack);
+  margin-bottom: 8px;
+}
+
+.CodeMirrorEditor__renderer h1 {
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+}
+
+.CodeMirrorEditor__renderer h2 {
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.CodeMirrorEditor__renderer h3 {
+  font-size: 12px;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 600;
+}
+
+.CodeMirrorEditor__renderer h4 {
+  color: var(--colorSecondaryGrey);
+
+  font-weight: 600;
+}
+
+.CodeMirrorEditor__renderer h5 {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--colorSecondaryGrey);
+}
+
+.CodeMirrorEditor__renderer h6 {
+  font-weight: 600;
+}
+
+.CodeMirrorEditor__renderer p {
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 8px;
+}
+
+.CodeMirrorEditor__renderer blockquote {
+  color: var(--colorSecondaryGrey);
+  margin: 0;
+  padding-left: 12px;
+  border-left: 1px var(--colorSecondaryGrey) solid;
+}
+
+.CodeMirrorEditor__renderer hr {
+  display: block;
+  border: 0;
+  border-top: 1px solid var(--colorInputGrey);
+  border-bottom: 1px solid var(--colorInputGrey);
+  margin: 1em 0;
+  padding: 0;
+}
+
+.CodeMirrorEditor__renderer pre,
+code,
+kbd,
+samp {
+  color: var(--colorBlack);
+  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier,
+    monospace;
+  font-size: 12px;
+  line-height: 16px;
+  margin-bottom: 8px;
+}
+
+.CodeMirrorEditor__renderer pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  tab-size: 2;
+  color: white;
+  background-color: var(--colorBlueBlack);
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.CodeMirrorEditor__renderer b,
+strong {
+  font-weight: bold;
+}
+
+.CodeMirrorEditor__renderer dfn {
+  font-style: italic;
+}
+
+.CodeMirrorEditor__renderer ins {
+  background: #ff9;
+  color: var(--colorBlack);
+  text-decoration: none;
+}
+
+.CodeMirrorEditor__renderer mark {
+  background: #ff0;
+  color: var(--colorBlack);
+  font-style: italic;
+  font-weight: bold;
+}
+
+.CodeMirrorEditor__renderer sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.CodeMirrorEditor__renderer sup {
+  top: -0.5em;
+}
+
+.CodeMirrorEditor__renderer sub {
+  bottom: -0.25em;
+}
+
+.CodeMirrorEditor__renderer ul,
+ol {
+  list-style-type: disc;
+  margin-left: 12px;
+  padding-left: 8px;
+  margin-bottom: 8px;
+}
+
+.CodeMirrorEditor__renderer li p:last-child {
+  margin: 0;
+}
+
+.CodeMirrorEditor__renderer dd {
+  margin: 0 0 0 2em;
+}
+
+.CodeMirrorEditor__renderer table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.CodeMirrorEditor__renderer td {
+  vertical-align: top;
+}
+
+.CodeMirrorEditor__renderer :first-child {
+  margin-top: 0;
+}
+
+.CodeMirrorEditor__renderer :last-child {
+  margin-bottom: 0;
+}