feat: add cssvar style

2025-11-21 11:14:38 +08:00
parent e5661226e5
commit c64bf305fc
14 changed files with 683 additions and 292 deletions
--- a/package.json
+++ b/package.json
@@ -14,8 +14,14 @@
    "@tiptap/core": "^3.11.0",
    "@tiptap/extension-bubble-menu": "^3.11.0",
    "@tiptap/extension-code-block-lowlight": "^3.11.0",
+    "@tiptap/extension-drag-handle": "^3.11.0",
+    "@tiptap/extension-drag-handle-vue-3": "^3.11.0",
    "@tiptap/extension-floating-menu": "^3.11.0",
    "@tiptap/extension-placeholder": "^3.11.0",
+    "@tiptap/extension-table": "^3.11.0",
+    "@tiptap/extension-table-cell": "^3.11.0",
+    "@tiptap/extension-table-header": "^3.11.0",
+    "@tiptap/extension-table-row": "^3.11.0",
    "@tiptap/pm": "^3.11.0",
    "@tiptap/starter-kit": "^3.11.0",
    "@tiptap/suggestion": "^3.11.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,12 +26,30 @@ importers:
      '@tiptap/extension-code-block-lowlight':
        specifier: ^3.11.0
        version: 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/extension-code-block@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(highlight.js@11.11.1)(lowlight@3.3.0)
+      '@tiptap/extension-drag-handle':
+        specifier: ^3.11.0
+        version: 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/extension-collaboration@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))
+      '@tiptap/extension-drag-handle-vue-3':
+        specifier: ^3.11.0
+        version: 3.11.0(@tiptap/extension-drag-handle@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/extension-collaboration@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)))(@tiptap/pm@3.11.0)(@tiptap/vue-3@3.11.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
      '@tiptap/extension-floating-menu':
        specifier: ^3.11.0
        version: 3.11.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
      '@tiptap/extension-placeholder':
        specifier: ^3.11.0
        version: 3.11.0(@tiptap/extensions@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))
+      '@tiptap/extension-table':
+        specifier: ^3.11.0
+        version: 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
+      '@tiptap/extension-table-cell':
+        specifier: ^3.11.0
+        version: 3.11.0(@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))
+      '@tiptap/extension-table-header':
+        specifier: ^3.11.0
+        version: 3.11.0(@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))
+      '@tiptap/extension-table-row':
+        specifier: ^3.11.0
+        version: 3.11.0(@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))
      '@tiptap/pm':
        specifier: ^3.11.0
        version: 3.11.0
@@ -288,11 +306,36 @@ packages:
    peerDependencies:
      '@tiptap/core': ^3.11.0

+  '@tiptap/extension-collaboration@3.11.0':
+    resolution: {integrity: sha512-2eEHHJNycY1B7+siyUtjgZdYm/MTGhFjmhS64au41nHCkvMqO8JwNGP/p5fBMZ08zYlzxYR5yjjI+Li7k8dyYg==}
+    peerDependencies:
+      '@tiptap/core': ^3.11.0
+      '@tiptap/pm': ^3.11.0
+      '@tiptap/y-tiptap': ^3.0.0
+      yjs: ^13
+
  '@tiptap/extension-document@3.11.0':
    resolution: {integrity: sha512-N2G3cwL2Dtur/CgD/byJmFx9T5no6fTO/U462VP3rthQYrRA1AB3TCYqtlwJkmyoxRTNd4qIg4imaPl8ej6Heg==}
    peerDependencies:
      '@tiptap/core': ^3.11.0

+  '@tiptap/extension-drag-handle-vue-3@3.11.0':
+    resolution: {integrity: sha512-pS2PKSs08XF0gB8vg39f2I6R0dYDdkI2/KQF+F1Vke+SUioNElHjdtOHqHqRBkEIj5MuT0ZsEzLEWI0cSAT2wQ==}
+    peerDependencies:
+      '@tiptap/extension-drag-handle': ^3.11.0
+      '@tiptap/pm': ^3.11.0
+      '@tiptap/vue-3': ^3.11.0
+      vue: ^3.0.0
+
+  '@tiptap/extension-drag-handle@3.11.0':
+    resolution: {integrity: sha512-MG6XYhH949FpHZ7uWmZ771ckEsEgw1O8OdoZWM7B5zd8EsUR3ZoAxnnxttVOR4NWohbcNnvX0HA3IvzVOvQIug==}
+    peerDependencies:
+      '@tiptap/core': ^3.11.0
+      '@tiptap/extension-collaboration': ^3.11.0
+      '@tiptap/extension-node-range': ^3.11.0
+      '@tiptap/pm': ^3.11.0
+      '@tiptap/y-tiptap': ^3.0.0
+
  '@tiptap/extension-dropcursor@3.11.0':
    resolution: {integrity: sha512-gW/QMGAyiXGSpO+X/lTeiBQn1Or8T8UVB3y9Cv2Lh6zx0SWU+FA28EH+y6s3fm872reN4dH/9rEvMuJjhU/BEw==}
    peerDependencies:
@@ -353,6 +396,12 @@ packages:
      '@tiptap/core': ^3.11.0
      '@tiptap/pm': ^3.11.0

+  '@tiptap/extension-node-range@3.11.0':
+    resolution: {integrity: sha512-NIly1qdZ+RVMf0Kvm+UUguxzKtsYEBC82j7pMrE9d8dC2ou4IrMfSas7N0O5SNbT+px71VCWza0b5uWJT+tWtw==}
+    peerDependencies:
+      '@tiptap/core': ^3.11.0
+      '@tiptap/pm': ^3.11.0
+
  '@tiptap/extension-ordered-list@3.11.0':
    resolution: {integrity: sha512-kO8GH4w4Xil+qPiHJLAyILdGHF9hCjkhoVtPD8YEfqK6Qx3bZql5FPySCQNs+MU6rLSCCdam8SUPGY/+SCufqA==}
    peerDependencies:
@@ -373,6 +422,27 @@ packages:
    peerDependencies:
      '@tiptap/core': ^3.11.0

+  '@tiptap/extension-table-cell@3.11.0':
+    resolution: {integrity: sha512-ZjL0CU+T3rQ9B1EN8LE4N8eiBTEQlBQehqdsBVzvRR7o7RlYp4JE90vfPsztOmnsqr2dWnsNNhtpWc0+wOLPug==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.11.0
+
+  '@tiptap/extension-table-header@3.11.0':
+    resolution: {integrity: sha512-LJ3Yu7mZKXdoaV3ixjfpcjgC1ab63h2KYFS3bLOmlRqnacmUfFaY0JaHEFAGmywLCVi26YQ5Y9JodadJsgfnIw==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.11.0
+
+  '@tiptap/extension-table-row@3.11.0':
+    resolution: {integrity: sha512-IwN3jiqkpgDnt2kuNf0hn3qM1qSitP3UIl/anxj1gt/OKRzEjNLuHEDr7wmmjMenj5Bhq+q+MpageKZERJzhaQ==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.11.0
+
+  '@tiptap/extension-table@3.11.0':
+    resolution: {integrity: sha512-2yIj3gKkl0nrw20BKHMrGiUvQO9OK3DAu6UWm06Os9+Sdqiq38Or9YBJRpCfHs9SmXnGBbGUuBW1dnNB7/sZUw==}
+    peerDependencies:
+      '@tiptap/core': ^3.11.0
+      '@tiptap/pm': ^3.11.0
+
  '@tiptap/extension-text@3.11.0':
    resolution: {integrity: sha512-ELAYm2BuChzZOqDG9B0k3W6zqM4pwNvXkam28KgHGiT2y7Ni68Rb+NXp16uVR+5zR6hkqnQ/BmJSKzAW59MXpA==}
    peerDependencies:
@@ -409,6 +479,16 @@ packages:
      '@tiptap/pm': ^3.11.0
      vue: ^3.0.0

+  '@tiptap/y-tiptap@3.0.1':
+    resolution: {integrity: sha512-F3hj5X77ckmyIywbCQpKgyX3xKra2/acJPWaV5R9wqp0cUPBmm62FYbkQ6HaqxH1VhCkUhhAZcDSQjbjj7tnWw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      prosemirror-model: ^1.7.1
+      prosemirror-state: ^1.2.3
+      prosemirror-view: ^1.9.10
+      y-protocols: ^1.0.1
+      yjs: ^13.5.38
+
  '@tybys/wasm-util@0.10.1':
    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}

@@ -579,6 +659,14 @@ packages:
  html-void-elements@3.0.0:
    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}

+  isomorphic.js@0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
+  lib0@0.2.114:
+    resolution: {integrity: sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
  lightningcss-android-arm64@1.30.2:
    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
    engines: {node: '>= 12.0.0'}
@@ -927,6 +1015,16 @@ packages:
  w3c-keyname@2.2.8:
    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}

+  y-protocols@1.0.6:
+    resolution: {integrity: sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      yjs: ^13.0.0
+
+  yjs@13.6.27:
+    resolution: {integrity: sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
  zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}

@@ -1111,10 +1209,33 @@ snapshots:
    dependencies:
      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)

+  '@tiptap/extension-collaboration@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)
+      '@tiptap/pm': 3.11.0
+      '@tiptap/y-tiptap': 3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      yjs: 13.6.27
+
  '@tiptap/extension-document@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))':
    dependencies:
      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)

+  '@tiptap/extension-drag-handle-vue-3@3.11.0(@tiptap/extension-drag-handle@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/extension-collaboration@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)))(@tiptap/pm@3.11.0)(@tiptap/vue-3@3.11.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@tiptap/extension-drag-handle': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/extension-collaboration@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))
+      '@tiptap/pm': 3.11.0
+      '@tiptap/vue-3': 3.11.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(vue@3.5.24(typescript@5.9.3))
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@tiptap/extension-drag-handle@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/extension-collaboration@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27))(@tiptap/extension-node-range@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)
+      '@tiptap/extension-collaboration': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)(@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27)
+      '@tiptap/extension-node-range': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
+      '@tiptap/pm': 3.11.0
+      '@tiptap/y-tiptap': 3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+
  '@tiptap/extension-dropcursor@3.11.0(@tiptap/extensions@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))':
    dependencies:
      '@tiptap/extensions': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
@@ -1165,6 +1286,11 @@ snapshots:
      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)
      '@tiptap/pm': 3.11.0

+  '@tiptap/extension-node-range@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)':
+    dependencies:
+      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)
+      '@tiptap/pm': 3.11.0
+
  '@tiptap/extension-ordered-list@3.11.0(@tiptap/extension-list@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))':
    dependencies:
      '@tiptap/extension-list': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
@@ -1181,6 +1307,23 @@ snapshots:
    dependencies:
      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)

+  '@tiptap/extension-table-cell@3.11.0(@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))':
+    dependencies:
+      '@tiptap/extension-table': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
+
+  '@tiptap/extension-table-header@3.11.0(@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))':
+    dependencies:
+      '@tiptap/extension-table': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
+
+  '@tiptap/extension-table-row@3.11.0(@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0))':
+    dependencies:
+      '@tiptap/extension-table': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
+
+  '@tiptap/extension-table@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)':
+    dependencies:
+      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)
+      '@tiptap/pm': 3.11.0
+
  '@tiptap/extension-text@3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))':
    dependencies:
      '@tiptap/core': 3.11.0(@tiptap/pm@3.11.0)
@@ -1257,6 +1400,15 @@ snapshots:
      '@tiptap/extension-bubble-menu': 3.11.0(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)
      '@tiptap/extension-floating-menu': 3.11.0(@floating-ui/dom@1.7.4)(@tiptap/core@3.11.0(@tiptap/pm@3.11.0))(@tiptap/pm@3.11.0)

+  '@tiptap/y-tiptap@3.0.1(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.3)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      lib0: 0.2.114
+      prosemirror-model: 1.25.4
+      prosemirror-state: 1.4.4
+      prosemirror-view: 1.41.3
+      y-protocols: 1.0.6(yjs@13.6.27)
+      yjs: 13.6.27
+
  '@tybys/wasm-util@0.10.1':
    dependencies:
      tslib: 2.8.1
@@ -1442,6 +1594,12 @@ snapshots:

  html-void-elements@3.0.0: {}

+  isomorphic.js@0.2.5: {}
+
+  lib0@0.2.114:
+    dependencies:
+      isomorphic.js: 0.2.5
+
  lightningcss-android-arm64@1.30.2:
    optional: true

@@ -1825,4 +1983,13 @@ snapshots:

  w3c-keyname@2.2.8: {}

+  y-protocols@1.0.6(yjs@13.6.27):
+    dependencies:
+      lib0: 0.2.114
+      yjs: 13.6.27
+
+  yjs@13.6.27:
+    dependencies:
+      lib0: 0.2.114
+
  zwitch@2.0.4: {}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,52 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import Editor from './components/Editor.vue'
+import { Moon, Sun } from 'lucide-vue-next'
+
+const theme = ref('light')
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light'
+  if (theme.value === 'dark') {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
 </script>

 <template>
-  <Editor />
+  <button @click="toggleTheme" class="theme-toggle" :title="theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'">
+    <Moon v-if="theme === 'light'" class="icon" />
+    <Sun v-else class="icon" />
+  </button>
+  <Editor :theme="theme" />
 </template>

 <style>
-body {
-  margin: 0;
-  font-family: 'Inter', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.theme-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1000;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle:hover {
+  background-color: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.theme-toggle .icon {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 </style>
--- a/src/components/CodeBlockComponent.vue
+++ b/src/components/CodeBlockComponent.vue
@@ -120,9 +120,21 @@ const initMonaco = async () => {
    fontFamily: 'JetBrains Mono, monospace',
    lineNumbers: 'off',
    padding: { top: 16, bottom: 16 },
-    readOnly: false
+    readOnly: false,
+    tabSize: 2,
  })

+  // Auto-focus if the node is currently selected (e.g. just created)
+  const pos = props.getPos()
+  if (typeof pos === 'number') {
+    const { from, to } = props.editor.state.selection
+    if (from >= pos && to <= pos + props.node.nodeSize) {
+        setTimeout(()=>{
+            editor?.focus?.()
+        },50)
+    }
+  }
+
  editor.onDidChangeModelContent(() => {
    if (!isEditorEditable.value) return
    
@@ -201,85 +213,5 @@ const copyCode = () => {
 </script>

 <style scoped>
-.code-block-wrapper {
-  background-color: #0d1117;
-  border-radius: 0.5rem;
-  margin: 1rem 0;
-  overflow: hidden;
-  position: relative;
-}
-
-.code-block-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: #161b22;
-  border-bottom: 1px solid #30363d;
-}
-
-.language-select {
-  background: transparent;
-  color: #c9d1d9;
-  border: none;
-  font-size: 0.875rem;
-  cursor: pointer;
-  outline: none;
-}
-
-.language-select:disabled {
-  opacity: 0.7;
-  cursor: default;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.action-btn {
-  background: transparent;
-  border: none;
-  color: #8b949e;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.action-btn:hover {
-  background-color: #30363d;
-  color: #c9d1d9;
-}
-
-.icon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.code-block-content {
-  padding: 1rem;
-  overflow-x: auto;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  cursor: text;
-}
-
-.monaco-container {
-  height: 200px; /* Or auto-grow? Monaco needs explicit height usually. */
-  /* Let's start with fixed height or resizeable */
-  min-height: 100px;
-}
-
-/* Shiki styles */
-.shiki-container {
-  margin: 0;
-}
-:deep(.shiki) {
-  background-color: transparent !important;
-  margin: 0;
-}
+/* Styles moved to src/styles/components.css */
 </style>
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -1,5 +1,14 @@
 <template>
-  <div class="editor-container" v-if="editor">
+  <div class="editor-container" :class="{ dark: theme === 'dark' }" v-if="editor">
+    <drag-handle
+      class="drag-handle"
+      :editor="editor"
+    >
+      <div class="drag-handle-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"></circle><circle cx="9" cy="5" r="1"></circle><circle cx="9" cy="19" r="1"></circle><circle cx="15" cy="12" r="1"></circle><circle cx="15" cy="5" r="1"></circle><circle cx="15" cy="19" r="1"></circle></svg>
+      </div>
+    </drag-handle>
+
    <bubble-menu
      class="bubble-menu"
      :tippy-options="{ duration: 100 }"
@@ -45,6 +54,12 @@ import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { Table } from '@tiptap/extension-table'
+import { TableCell } from '@tiptap/extension-table-cell'
+import { TableHeader } from '@tiptap/extension-table-header'
+import { TableRow } from '@tiptap/extension-table-row'
+import { DragHandle } from '@tiptap/extension-drag-handle-vue-3'
+import DragHandleExtension from '@tiptap/extension-drag-handle'
 import SlashCommand from '../extensions/SlashCommand'
 import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom'
 import {
@@ -59,12 +74,20 @@ import {
  List,
  ListOrdered,
  Code2,
-  Quote
+  Quote,
+  Table as TableIcon
 } from 'lucide-vue-next'
 import SlashCommandList from './SlashCommandList.vue'
 import CodeBlockComponent from './CodeBlockComponent.vue'
 import { all, createLowlight } from 'lowlight'

+const props = defineProps({
+  theme: {
+    type: String,
+    default: 'light',
+  },
+})
+
 const lowlight = createLowlight(all)

 const getSuggestionItems = ({ query }: { query: string }) => {
@@ -133,6 +156,14 @@ const getSuggestionItems = ({ query }: { query: string }) => {
        editor.chain().focus().deleteRange(range).toggleBlockquote().run()
      },
    },
+    {
+      title: 'Table',
+      description: 'Insert a simple table.',
+      icon: TableIcon,
+      command: ({ editor, range }: any) => {
+        editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+      },
+    },
  ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase()))
 }

@@ -212,6 +243,13 @@ const editor = useEditor({
    StarterKit.configure({
      codeBlock: false, // Disable default code block to use custom one
    }),
+    DragHandleExtension,
+    Table.configure({
+      resizable: true,
+    }),
+    TableRow,
+    TableHeader,
+    TableCell,
    CodeBlockLowlight.extend({
      addNodeView() {
        return VueNodeViewRenderer(CodeBlockComponent)
@@ -227,165 +265,10 @@ const editor = useEditor({
      },
    }),
  ],
-  content: `
-    <h2>
-      Hi there,
-    </h2>
-    <p>
-      this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-    </p>
-    <ul>
-      <li>
-        That’s a bullet list with one …
-      </li>
-      <li>
-        … or two list items.
-      </li>
-    </ul>
-    <p>
-      Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-    </p>
-    <pre><code class="language-css">body {
-  display: none;
-}</code></pre>
-    <p>
-      I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
-    </p>
-    <blockquote>
-      Wow, that's amazing. Good work, boy! 👏
-      <br />
-      — Mom
-    </blockquote>
-  `,
+  content: '<p>Hello World!</p>',
 })
 </script>

 <style>
-/* Basic Editor Styles */
-.editor-container {
-  max-width: 800px;
-  margin: 4rem auto;
-  padding: 0 1rem;
-}
-
-.ProseMirror {
-  outline: none;
-}
-
-.ProseMirror p.is-editor-empty:first-child::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-
-/* Typography */
-h1 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-top: 2.5rem;
-  margin-bottom: 1rem;
-  line-height: 1.2;
-}
-
-h2 {
-  font-size: 1.75rem;
-  font-weight: 600;
-  margin-top: 2rem;
-  margin-bottom: 0.75rem;
-  line-height: 1.3;
-}
-
-h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-  line-height: 1.4;
-}
-
-p {
-  margin-bottom: 1rem;
-  line-height: 1.6;
-  color: #334155;
-}
-
-ul, ol {
-  padding-left: 1.5rem;
-  margin-bottom: 1rem;
-}
-
-li {
-  margin-bottom: 0.25rem;
-}
-
-blockquote {
-  border-left: 3px solid #e2e8f0;
-  padding-left: 1rem;
-  margin-left: 0;
-  margin-bottom: 1rem;
-  font-style: italic;
-  color: #64748b;
-}
-
-pre {
-  background: #0d0d0d;
-  color: #fff;
-  font-family: 'JetBrainsMono', monospace;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-code {
-  color: #616161;
-  background: none;
-  font-size: 0.8em;
-}
-
-pre code {
-  color: inherit;
-  padding: 0;
-  background: none;
-  font-size: 0.8rem;
-}
-
-/* Bubble Menu & Floating Menu */
-.bubble-menu,
-.floating-menu {
-  display: flex;
-  background-color: #fff;
-  padding: 0.2rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  border: 1px solid #e2e8f0;
-}
-
-.bubble-menu button,
-.floating-menu button {
-  border: none;
-  background: none;
-  color: #64748b;
-  font-size: 0.875rem;
-  font-weight: 500;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  border-radius: 0.25rem;
-  display: flex;
-  align-items: center;
-}
-
-.bubble-menu button:hover,
-.floating-menu button:hover,
-.bubble-menu button.is-active,
-.floating-menu button.is-active {
-  color: #000;
-  background-color: #f1f5f9;
-}
-
-.bubble-menu .icon {
-  width: 1rem;
-  height: 1rem;
-}
+@import '../styles/index.css';
 </style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import './monacoWorker'
 import App from './App.vue'

 createApp(App).mount('#app')
--- a/src/monacoWorker.ts
+++ b/src/monacoWorker.ts
@@ -0,0 +1,26 @@
+
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+self.MonacoEnvironment = {
+    getWorker(_: any, label: string) {
+        if (label === 'json') {
+            return new jsonWorker()
+        }
+        if (label === 'css' || label === 'scss' || label === 'less') {
+            return new cssWorker()
+        }
+        if (label === 'html' || label === 'handlebars' || label === 'razor') {
+            return new htmlWorker()
+        }
+        if (label === 'typescript' || label === 'javascript') {
+            return new tsWorker()
+        }
+        return new editorWorker()
+    },
+}
+
+
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -0,0 +1,143 @@
+/* Bubble Menu & Floating Menu */
+.bubble-menu,
+.floating-menu {
+    display: flex;
+    background-color: var(--bg-primary);
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--border-color);
+}
+
+.bubble-menu button,
+.floating-menu button {
+    border: none;
+    background: none;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+}
+
+.bubble-menu button:hover,
+.floating-menu button:hover,
+.bubble-menu button.is-active,
+.floating-menu button.is-active {
+    color: var(--text-heading);
+    background-color: var(--bg-hover);
+}
+
+.bubble-menu .icon {
+    width: 1rem;
+    height: 1rem;
+}
+
+/* Drag Handle */
+.drag-handle {
+    position: fixed;
+    opacity: 1;
+    transition: opacity 0.2s;
+    border-radius: 0.25rem;
+    cursor: grab;
+    background-image: none;
+}
+
+.drag-handle:hover {
+    background-color: var(--bg-hover);
+}
+
+.drag-handle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--text-secondary);
+}
+
+/* Code Block Component */
+.code-block-wrapper {
+    background-color: var(--bg-code-block);
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.code-block-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: var(--bg-code-header);
+    border-bottom: 1px solid var(--border-code);
+}
+
+.language-select {
+    background: transparent;
+    color: var(--text-code-primary);
+    border: none;
+    font-size: 0.875rem;
+    cursor: pointer;
+    outline: none;
+}
+
+.language-select:disabled {
+    opacity: 0.7;
+    cursor: default;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.action-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-code-secondary);
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.action-btn:hover {
+    background-color: var(--bg-code-hover);
+    color: var(--text-code-primary);
+}
+
+.icon {
+    width: 1rem;
+    height: 1rem;
+}
+
+.code-block-content {
+    padding: 1rem;
+    overflow-x: auto;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    cursor: text;
+}
+
+.monaco-container {
+    height: 300px;
+    min-height: 200px;
+}
+
+/* Shiki styles */
+.shiki-container {
+    margin: 0;
+}
+
+:deep(.shiki) {
+    background-color: transparent !important;
+    margin: 0;
+}
--- a/src/styles/editor.css
+++ b/src/styles/editor.css
@@ -0,0 +1,80 @@
+/* Basic Editor Styles */
+.editor-container {
+    max-width: 800px;
+    margin: 4rem auto;
+    padding: 0 1rem;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.ProseMirror {
+    outline: none;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+    color: var(--text-placeholder);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+}
+
+.ProseMirror p {
+    margin: 0;
+}
+
+/* Table Styles */
+.ProseMirror table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+.ProseMirror td,
+.ProseMirror th {
+    min-width: 1em;
+    border: 2px solid var(--border-table);
+    padding: 3px 5px;
+    vertical-align: top;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.ProseMirror th {
+    font-weight: bold;
+    text-align: left;
+    background-color: var(--bg-table-header);
+}
+
+.ProseMirror .selectedCell:after {
+    z-index: 2;
+    position: absolute;
+    content: "";
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: var(--selection-color);
+    pointer-events: none;
+}
+
+.ProseMirror .column-resize-handle {
+    position: absolute;
+    right: -2px;
+    top: 0;
+    bottom: -2px;
+    width: 4px;
+    background-color: var(--resize-handle-color);
+    pointer-events: none;
+}
+
+.tableWrapper {
+    overflow-x: auto;
+}
+
+.resize-cursor {
+    cursor: col-resize;
+}
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -0,0 +1,12 @@
+@import './variables.css';
+@import './typography.css';
+@import './editor.css';
+@import './components.css';
+
+body {
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color 0.3s, color 0.3s;
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+}
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@@ -0,0 +1,75 @@
+/* Typography */
+h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+    color: var(--text-heading);
+}
+
+h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 0.75rem;
+    line-height: 1.3;
+    color: var(--text-heading);
+}
+
+h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    line-height: 1.4;
+    color: var(--text-heading);
+}
+
+p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+    color: var(--text-primary);
+}
+
+ul,
+ol {
+    padding-left: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+li {
+    margin-bottom: 0.25rem;
+}
+
+blockquote {
+    border-left: 3px solid var(--border-color);
+    padding-left: 1rem;
+    margin-left: 0;
+    margin-bottom: 1rem;
+    font-style: italic;
+    color: var(--text-secondary);
+}
+
+pre {
+    background: var(--bg-code);
+    color: var(--text-code);
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+code {
+    color: var(--text-secondary);
+    background: none;
+    font-size: 0.8em;
+}
+
+pre code {
+    color: inherit;
+    padding: 0;
+    background: none;
+    font-size: 0.8rem;
+}
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -0,0 +1,66 @@
+:root {
+    /* Colors - Light Mode */
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-hover: #f1f5f9;
+    --bg-code: #0d0d0d;
+    --bg-table-header: #f1f3f5;
+
+    --text-primary: #334155;
+    --text-secondary: #64748b;
+    --text-heading: #0f172a;
+    --text-code: #ffffff;
+    --text-placeholder: #adb5bd;
+
+    --border-color: #e2e8f0;
+    --border-table: #ced4da;
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+    --accent-color: #000000;
+    --selection-color: rgba(200, 200, 255, 0.4);
+    --resize-handle-color: #adf;
+
+    /* Code Block - Light (using dark theme by default for code) */
+    --bg-code-block: #0d1117;
+    --bg-code-header: #161b22;
+    --border-code: #30363d;
+    --text-code-primary: #c9d1d9;
+    --text-code-secondary: #8b949e;
+    --bg-code-hover: #30363d;
+}
+
+.dark {
+    /* Colors - Dark Mode */
+    --bg-primary: #1e1e1e;
+    --bg-secondary: #252526;
+    --bg-hover: #2d2d2d;
+    --bg-code: #0d0d0d;
+    /* Keep code blocks dark for now or adjust */
+    --bg-table-header: #2d2d2d;
+
+    --text-primary: #d4d4d4;
+    --text-secondary: #a3a3a3;
+    --text-heading: #ffffff;
+    --text-code: #ffffff;
+    --text-placeholder: #6e6e6e;
+
+    --border-color: #3e3e42;
+    --border-table: #4a4a4a;
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+
+    --accent-color: #ffffff;
+    --selection-color: rgba(100, 100, 255, 0.3);
+    --resize-handle-color: #61afef;
+
+    /* Code Block - Dark */
+    --bg-code-block: #0d1117;
+    --bg-code-header: #161b22;
+    --border-code: #30363d;
+    --text-code-primary: #c9d1d9;
+    --text-code-secondary: #8b949e;
+    --bg-code-hover: #30363d;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -2,8 +2,9 @@
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types": ["vite/client"],
-
+    "types": [
+      "vite/client"
+    ],
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
@@ -12,5 +13,9 @@
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
 }