From 141c5174edf248df811279ac52401d66be0edde9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?=
 <philippkuehn@MacBook-Pro-von-Philipp.local>
Date: Fri, 17 Dec 2021 10:38:18 +0100
Subject: [PATCH] add tailwind experiment

---
 demos/src/Experiments/All/JS/index.html      | 26 ---------
 demos/src/Experiments/All/JS/styles.scss     | 56 --------------------
 demos/src/Experiments/Tailwind/JS/index.html | 54 +++++++++++++++++++
 3 files changed, 54 insertions(+), 82 deletions(-)
 delete mode 100644 demos/src/Experiments/All/JS/index.html
 delete mode 100644 demos/src/Experiments/All/JS/styles.scss
 create mode 100644 demos/src/Experiments/Tailwind/JS/index.html

diff --git a/demos/src/Experiments/All/JS/index.html b/demos/src/Experiments/All/JS/index.html
deleted file mode 100644
index 536ed9f2288..00000000000
--- a/demos/src/Experiments/All/JS/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<button onclick="editor.chain().focus().toggleHeading({ level: 1 }).run()">
-  h1
-</button>
-
-<div class="element"></div>
-
-<script type="module">
-import { Editor } from '@tiptap/core'
-import StarterKit from '@tiptap/starter-kit'
-import './styles.scss'
-
-window.editor = new Editor({
-  element: document.querySelector('.element'),
-  extensions: [
-    StarterKit,
-  ],
-  content: `
-    <h2>
-      Hi there,
-    </h2>
-    <p>
-      this is a test.
-    </p>
-  `,
-})
-</script>
diff --git a/demos/src/Experiments/All/JS/styles.scss b/demos/src/Experiments/All/JS/styles.scss
deleted file mode 100644
index 9ba5fc022a0..00000000000
--- a/demos/src/Experiments/All/JS/styles.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/* Basic editor styles */
-.ProseMirror {
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  ul,
-  ol {
-    padding: 0 1rem;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-  }
-
-  code {
-    background-color: rgba(#616161, 0.1);
-    color: #616161;
-  }
-
-  pre {
-    background: #0D0D0D;
-    color: #FFF;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
-    }
-  }
-
-  img {
-    max-width: 100%;
-    height: auto;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid rgba(#0D0D0D, 0.1);
-  }
-
-  hr {
-    border: none;
-    border-top: 2px solid rgba(#0D0D0D, 0.1);
-    margin: 2rem 0;
-  }
-}
diff --git a/demos/src/Experiments/Tailwind/JS/index.html b/demos/src/Experiments/Tailwind/JS/index.html
new file mode 100644
index 00000000000..cfb3280c744
--- /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>