From 318592ba22b695c2996d9d2e6a793b299a36b274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?= <kontakt@philipp-kuehn.com>
Date: Fri, 17 Dec 2021 13:49:45 +0100
Subject: [PATCH] demos: Add setup for plain js demos (#2288)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add basic js demo

* improve js demos

* change demo button

* fix js demos on build

* add tailwind experiment

* docs: replace tailwind demo

Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>
---
 demos/preview/Demo.vue                       |  2 +-
 demos/setup/js.ts                            | 11 +++
 demos/src/Experiments/Tailwind/JS/index.html | 54 +++++++++++
 demos/vite.config.ts                         | 99 ++++++++++++++++++--
 docs/guide/styling.md                        |  9 +-
 5 files changed, 159 insertions(+), 16 deletions(-)
 create mode 100644 demos/setup/js.ts
 create mode 100644 demos/src/Experiments/Tailwind/JS/index.html

diff --git a/demos/preview/Demo.vue b/demos/preview/Demo.vue
index 453f7cbf..bb587cb8 100644
--- a/demos/preview/Demo.vue
+++ b/demos/preview/Demo.vue
@@ -114,7 +114,7 @@ export default {
       sources: {},
       currentTab: null,
       currentFile: null,
-      tabOrder: ['React', 'Vue'],
+      tabOrder: ['React', 'Vue', 'JS'],
       debugJSON: null,
       showDebug: false,
     }
diff --git a/demos/setup/js.ts b/demos/setup/js.ts
new file mode 100644
index 00000000..5b0fc9d8
--- /dev/null
+++ b/demos/setup/js.ts
@@ -0,0 +1,11 @@
+import 'iframe-resizer/js/iframeResizer.contentWindow'
+import { debug } from './helper'
+import './style.scss'
+
+export default function init(name: string, source: any) {
+  // @ts-ignore
+  window.source = source
+  document.title = name
+
+  debug()
+}
diff --git a/demos/src/Experiments/Tailwind/JS/index.html b/demos/src/Experiments/Tailwind/JS/index.html
new file mode 100644
index 00000000..cfb3280c
--- /dev/null
+++ b/demos/src/Experiments/Tailwind/JS/index.html
@@ -0,0 +1,54 @@
+<!-- load tailwind -->
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/typography/dist/typography.min.css" />
+
+<!-- provide element -->
+<div class="element"></div>
+
+<!-- create editor -->
+<script type="module">
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+
+const editor = new Editor({
+  element: document.querySelector('.element'),
+  extensions: [
+    StarterKit,
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
+    },
+  },
+  content: `
+    <h2>
+      Hi there,
+    </h2>
+    <p>
+      this is a basic <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>
+  `,
+})
+</script>
diff --git a/demos/vite.config.ts b/demos/vite.config.ts
index 81452c3b..f35cf1a6 100644
--- a/demos/vite.config.ts
+++ b/demos/vite.config.ts
@@ -39,6 +39,88 @@ export default defineConfig({
     vue(),
     reactRefresh(),
 
+    {
+      name: 'html-transform',
+      transformIndexHtml: {
+        enforce: 'pre',
+        transform(html: string, context) {
+          const dir = dirname(context.path)
+          const data = dir.split('/')
+          const demoCategory = data[2]
+          const demoName = data[3]
+
+          if (dir.endsWith('/JS')) {
+            return {
+              html: `
+                <!DOCTYPE html>
+                <html lang="en">
+                  <head>
+                    <meta charset="utf-8"/>
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+                  </head>
+                  <body>
+                    ${html}
+                    <script type="module">
+                      import setup from '../../../../setup/js.ts'
+                      import source from '@source'
+                      setup('${demoCategory}/${demoName}', source)
+                    </script>
+                  </body>
+                </html>
+              `,
+              tags: [],
+            }
+          }
+
+          if (dir.endsWith('/Vue')) {
+            return {
+              html: `
+                <!DOCTYPE html>
+                <html lang="en">
+                  <head>
+                    <meta charset="utf-8"/>
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+                  </head>
+                  <body>
+                    <div id="app"></div>
+                    <script type="module">
+                      import setup from '../../../../setup/vue.ts'
+                      import source from '@source'
+                      setup('${demoCategory}/${demoName}', source)
+                    </script>
+                  </body>
+                </html>
+              `,
+              tags: [],
+            }
+          }
+
+          if (dir.endsWith('/React')) {
+            return {
+              html: `
+                <!DOCTYPE html>
+                <html lang="en">
+                  <head>
+                    <meta charset="utf-8"/>
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+                  </head>
+                  <body>
+                    <div id="app"></div>
+                    <script type="module">
+                      import setup from '../../../../setup/react.ts'
+                      import source from '@source'
+                      setup('${demoCategory}/${demoName}', source)
+                    </script>
+                  </body>
+                </html>
+              `,
+              tags: [],
+            }
+          }
+        },
+      },
+    },
+
     {
       name: 'raw',
       resolveId(id, importer) {
@@ -97,13 +179,16 @@ export default defineConfig({
       load(id) {
         if (id.startsWith('source!')) {
           const path = id.split('!!')[0].replace('source!', '')
-          const files = fg.sync(`${path}/**/*`, {
-            ignore: [
-              '**/index.html',
-              '**/*.spec.js',
-              '**/*.spec.ts',
-            ],
-          })
+          const ignore = [
+            '**/*.spec.js',
+            '**/*.spec.ts',
+          ]
+
+          if (!path.endsWith('/JS')) {
+            ignore.push('**/index.html')
+          }
+
+          const files = fg.sync(`${path}/**/*`, { ignore })
             .map(filePath => {
               const name = filePath.replace(`${path}/`, '')
 
diff --git a/docs/guide/styling.md b/docs/guide/styling.md
index 14feab3b..9d20c1c4 100644
--- a/docs/guide/styling.md
+++ b/docs/guide/styling.md
@@ -77,13 +77,7 @@ new Editor({
 ### With Tailwind CSS
 The editor works fine with Tailwind CSS, too. Find an example that’s styled with the `@tailwindcss/typography` plugin below.
 
-<iframe
-  src="https://codesandbox.io/embed/tiptap-demo-tailwind-iqjz0?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.js&theme=dark&view=preview"
-  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  title="tiptap-demo-tailwind"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-></iframe>
+https://embed.tiptap.dev/preview/Experiments/Tailwind
 
 ## Option 3: Customize the HTML
 Or you can customize the markup for extensions. The following example will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag:
@@ -108,4 +102,3 @@ new Editor({
 ```
 
 You should put your custom extensions in separate files, but I think you got the idea.
-