add basic vite setup

demos/setup/helper.ts

@@ -0,0 +1,38 @@
+const waitUntilElementExists = (selector: any, callback: (element: Element) => void) => {
+  const element = document.querySelector(selector)
+
+  if (element) {
+    return callback(element)
+  }
+
+  setTimeout(() => waitUntilElementExists(selector, callback), 500)
+}
+
+const sendData = (eventName: string, data: any) => {
+  const event = new CustomEvent(eventName, { detail: data })
+
+  window.parent.document.dispatchEvent(event)
+}
+
+export function splitName(name: string) {
+  const parts = name.split('/')
+
+  if (parts.length !== 2) {
+    throw Error('Demos must always be within exactly one category. Nested categories are not supported.')
+  }
+
+  return parts
+}
+
+export function debug() {
+  sendData('editor', null)
+  // @ts-ignore
+  sendData('source', window.source)
+
+  waitUntilElementExists('.ProseMirror', element => {
+    // @ts-ignore
+    const editor = element.editor
+
+    sendData('editor', editor)
+  })
+}

demos/setup/react.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import { debug, splitName } from './helper'
+import './style.scss'
+
+export default function init(name: string, source: any) {
+  // @ts-ignore
+  window.source = source
+  document.title = name
+
+  const [demoCategory, demoName] = splitName(name)
+
+  import(`../src/${demoCategory}/${demoName}/React/index.jsx`)
+    .then(module => {
+      ReactDOM.render(<module.default />, document.getElementById('app'))
+      debug()
+    })
+}

demos/setup/style.scss

@@ -0,0 +1,59 @@
+$colorBlack: #000;
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 1rem;
+}
+
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  border: 4px solid transparent;
+  background-clip: padding-box;
+  border-radius: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+.ProseMirror:focus {
+  outline: none;
+}

demos/setup/vue.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import { debug, splitName } from './helper'
+import './style.scss'
+
+export default function init(name: string, source: any) {
+  // @ts-ignore
+  window.source = source
+  document.title = name
+
+  const [demoCategory, demoName] = splitName(name)
+
+  import(`../src/${demoCategory}/${demoName}/Vue/index.vue`)
+    .then(module => {
+      createApp(module.default).mount('#app')
+      debug()
+    })
+}