use code editor in demo site

Author: ealmloff

Cargo.lock

@@ -1,10 +1,10 @@
 [workspace]
 members = [
     ".",
+    "code-editor",
     "dioxus-code-macro",
     "demo",
     "examples/basic",
-    "examples/content-editable",
     "examples/dioxus-hello",
     "examples/live-input",
     "examples/macro-only",
@@ -16,6 +16,10 @@ version = "0.1.0"
 edition = "2024"
 license = "MIT OR Apache-2.0"
 
+[workspace.dependencies]
+dioxus-code = { path = "." }
+dioxus-code-editor = { path = "code-editor", default-features = false }
+
 [package]
 name = "dioxus-code"
 version.workspace = true
@@ -27,6 +31,7 @@ default = ["macro"]
 macro = ["dep:dioxus-code-macro"]
 runtime = ["arborium/lang-rust"]
 lang-python = ["runtime", "arborium/lang-python"]
+lang-toml = ["runtime", "arborium/lang-toml"]
 all-languages = ["runtime", "arborium/all-languages"]
 
 [dependencies]

Cargo.toml

@@ -0,0 +1,14 @@
+[package]
+name = "dioxus-code-editor"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+
+[dependencies]
+dioxus = { version = "0.7.0", default-features = false, features = ["lib"] }
+dioxus-code = { workspace = true, features = ["runtime"] }
+
+[features]
+default = ["desktop"]
+desktop = ["dioxus/desktop", "dioxus/launch"]
+web = ["dioxus/web", "dioxus/launch"]

code-editor/Cargo.toml

@@ -0,0 +1,46 @@
+html,
+body,
+#main {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  background: #10131a;
+  color: #d9e1ee;
+  font-family: Avenir Next, Gill Sans, Trebuchet MS, sans-serif;
+}
+
+.shell {
+  box-sizing: border-box;
+  display: grid;
+  gap: 16px;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 100vh;
+  padding: 24px;
+}
+
+.toolbar {
+  align-items: end;
+  display: flex;
+  justify-content: space-between;
+}
+
+h1 {
+  font-size: 22px;
+  letter-spacing: 0;
+  margin: 0;
+}
+
+.toolbar span {
+  border: 1px solid rgba(217, 225, 238, 0.28);
+  color: #94a3b8;
+  font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+  padding: 5px 8px;
+  text-transform: uppercase;
+}
+
+.dxc-editor {
+  --dxc-editor-caret: #e8eef7;
+  --dxc-editor-focus-ring: 0 0 0 3px rgba(122, 162, 247, 0.22);
+}

code-editor/assets/demo.css

@@ -0,0 +1,95 @@
+.dxc-editor {
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: grid;
+  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  grid-template-columns: max-content minmax(0, 1fr);
+  min-height: 0;
+  overflow: auto;
+  tab-size: 4;
+}
+
+.dxc-editor *,
+.dxc-editor *::before,
+.dxc-editor *::after {
+  box-sizing: border-box;
+}
+
+.dxc-editor-viewport {
+  min-height: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+.dxc-editor-gutter,
+.dxc-editor-highlight,
+.dxc-editor-input {
+  min-height: 100%;
+}
+
+.dxc-editor-highlight,
+.dxc-editor-input {
+  padding: var(--dxc-editor-padding, 14px 18px 14px 0);
+  white-space: pre;
+}
+
+.dxc-editor-gutter {
+  color: var(--muted, currentColor);
+  padding: var(--dxc-editor-gutter-padding, 14px 0);
+  pointer-events: none;
+  user-select: none;
+}
+
+.dxc-editor-highlight {
+  pointer-events: none;
+}
+
+.dxc-editor-highlight span {
+  font-style: normal !important;
+  font-weight: inherit !important;
+}
+
+.dxc-editor-input {
+  caret-color: var(--dxc-editor-caret, currentColor);
+  color: transparent;
+  inset: 0;
+  outline: none;
+  overflow-wrap: normal;
+  position: absolute;
+  z-index: 1;
+}
+
+.dxc-editor-input::selection {
+  background: var(--dxc-editor-selection, rgba(122, 162, 247, 0.34));
+  color: transparent;
+}
+
+.dxc-editor-input:empty::before {
+  color: var(--muted, currentColor);
+  content: attr(data-placeholder);
+  opacity: 0.72;
+}
+
+.dxc-editor:focus-within {
+  box-shadow: var(--dxc-editor-focus-ring, 0 0 0 3px rgba(122, 162, 247, 0.22));
+}
+
+.dxc-editor-line,
+.dxc-editor-gutter-line {
+  min-height: 1.55em;
+}
+
+.dxc-editor-gutter-line {
+  min-width: var(--dxc-editor-gutter-width, 4ch);
+  padding: var(--dxc-editor-gutter-line-padding, 0 14px);
+  text-align: right;
+}
+
+.dxc-editor-no-gutter {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.dxc-editor-no-gutter .dxc-editor-highlight,
+.dxc-editor-no-gutter .dxc-editor-input {
+  padding-left: var(--dxc-editor-padding-left, 18px);
+}