feat: begin lightweight CSS editor

plugins/inline-css/components/Editor.scss

@@ -0,0 +1,6 @@
+.ceditor {
+  padding: 12px;
+  margin-top: 28px;
+  border-radius: 5px;
+  background: var(--input-background);
+}

plugins/inline-css/components/Editor.tsx

@@ -0,0 +1,46 @@
+import { CodeInput } from '@srsholmes/solid-code-input'
+import hljs from 'highlight.js/lib/core'
+import cssModule from 'highlight.js/lib/languages/css'
+
+import {css, classes} from './Editor.scss'
+
+hljs.registerLanguage('css', cssModule)
+
+const {
+  ui: {
+    injectCss,
+    Header,
+    HeaderTags
+  },
+  plugin: { store },
+  solid: { createSignal },
+} = shelter
+
+let injectedCss = false
+
+export default function () {
+  if (!injectedCss) {
+    injectCss(css)
+    injectedCss = true
+  }
+
+  const [inlineCss, setInlineCss] = createSignal('')
+
+  return (
+    <>
+      <Header tag={HeaderTags.H1}>CSS Editor</Header>
+
+      <div class={classes.ceditor}>
+        <CodeInput
+          highlightjs={hljs}
+          autoHeight={false}
+          resize="none"
+          placeholder="Enter any CSS here..."
+          onChange={setInlineCss}
+          value={inlineCss()}
+          language={'css'}
+        />
+      </div>
+    </>
+  )
+}

plugins/inline-css/index.tsx

@@ -0,0 +1,13 @@
+import Editor from './components/Editor'
+
+const {
+  settings: {
+    registerSection,
+  }
+} = shelter
+
+const unload = registerSection('section', 'inline-css', 'CSS Editor', Editor)
+
+export const onUnload = () => {
+  unload()
+}

plugins/inline-css/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "inline-css",
+  "dependencies": {
+    "@srsholmes/solid-code-input": "^0.0.18",
+    "highlight.js": "^11.9.0"
+  }
+}

plugins/inline-css/plugin.json

@@ -0,0 +1,5 @@
+{
+  "name": "Inline CSS",
+  "author": "SpikeHD",
+  "description": "Dead-simple inline CSS editor with hot-reloading."
+}

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "jsx": "react",
     "types": ["./types.d.ts", "./css.d.ts"],
-    "target": "es6"
-  }
+    "target": "es6",
+  },
+  "include": ["plugins/**/*.ts", "plugins/**/*.tsx", "node_modules/@uwu/shelter-defs/**/*.d.ts"]
 }