Fix repo setup

Yarn -> npm Use nix modules Upgrade vite Add demo for HTML document
replit · Sep 7, 2023 · 5867afc · 5867afc
1 parent 9185b06
commit 5867afc
Show file tree

Hide file tree

Showing 8 changed files with 4,186 additions and 1,296 deletions.
diff --git a/.replit b/.replit
@@ -1,12 +1,5 @@
-run="yarn run dev"
+run="npm run dev"
 
-[packager]
-language = "nodejs-yarn"
-[packager.features]
-packageSearch = true
-guessImports = true
+modules = ["nodejs-18:v3-20230608-f4cd419"]
 
-[languages.js]
-pattern = "**/*.ts"
-[languages.js.languageServer]
-start = ["typescript-language-server", "--stdio"]
+channel = "stable-23_05"
diff --git a/dev/index.html b/dev/index.html
@@ -6,7 +6,9 @@
     <title>Vite App</title>
   </head>
   <body>
-    <div id="editor"></div>
+    <div id="editor-css"></div>
+
+    <div id="editor-html"></div>
     <script type="module" src="./index.ts"></script>
   </body>
 </html>
diff --git a/dev/index.ts b/dev/index.ts
@@ -1,10 +1,11 @@
 import { basicSetup } from 'codemirror';
 import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { colorPicker, wrapperClassName } from '../src/';
 
-const doc = `
+const cssDoc = `
 .wow {
   font-family: Helvetica Neue;
   font-size: 17px;
@@ -16,6 +17,7 @@ const doc = `
 #alpha {
   color: #FF00FFAA;
   border-color: rgb(255, 50%, 64, 0.5);
+  border-color: rgba(255, 50%, 64, 0.5);
 }
 
 .hex4 {
@@ -36,9 +38,37 @@ const doc = `
 }
 `;
 
+const htmlDoc = `
+<html>
+  <head>
+    <style>
+      ${cssDoc}
+    </style>
+  </head>
+  <body>
+    <div style="color: red">
+    <div style="color: #ff0000">
+    <div style="color: rgb(0, 255, 0%)">
+    <div style="color: #00f">
+    <div style="color: #FF00FFAA">
+    <div style="color: rgb(255, 50%, 64, 0.5)">
+    <div style="color: #ABCD">
+    
+  
+  </body>
+</html>
+`
+
+const cssParent =  document.querySelector('#editor-css');
+const htmlParent = document.querySelector('#editor-html');
+
+if (!cssParent || !htmlParent) {
+  throw new Error('Could not find #editor-css or #editor-html');
+}
+
 new EditorView({
   state: EditorState.create({
-    doc,
+    doc: cssDoc,
     extensions: [
       colorPicker,
       basicSetup,
@@ -50,5 +80,24 @@ new EditorView({
       }),
     ],
   }),
-  parent: document.querySelector('#editor'),
+  parent: cssParent,
+});
+
+
+new EditorView({
+  state: EditorState.create({
+    doc: htmlDoc,
+    extensions: [
+      colorPicker,
+      basicSetup,
+      html(),
+      EditorView.theme({
+        [`.${wrapperClassName}`]: {
+          outlineColor: '#000',
+        },
+      }),
+    ],
+  }),
+  parent: cssParent,
 });
+
diff --git a/dev/vite.config.js b/dev/vite.config.js
@@ -1,8 +1,9 @@
-export default {
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [],
   server: {
     host: '0.0.0.0',
-    hmr: {
-      port: 443,
-    },
-  },
-};
+  }
+})