ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

demos: Add setup for plain js demos (#2288)

Browse Source 
* 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>
This commit is contained in:
Philipp Kühn
2021-12-17 13:49:45 +01:00
committed by GitHub
parent c980bb2f5f
commit 318592ba22
5 changed files with 159 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/preview/Demo.vue
View File

@@ -114,7 +114,7 @@ export default {
sources: {}, sources: {},
currentTab: null, currentTab: null,
currentFile: null, currentFile: null,
tabOrder: ['React', 'Vue'], tabOrder: ['React', 'Vue', 'JS'],
debugJSON: null, debugJSON: null,
showDebug: false, showDebug: false,
} }

11
demos/setup/js.ts Normal file
View File

@@ -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()
}

54
demos/src/Experiments/Tailwind/JS/index.html Normal file
View File

@@ -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>

95
demos/vite.config.ts
View File

@@ -39,6 +39,88 @@ export default defineConfig({
vue(), vue(),
reactRefresh(), 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', name: 'raw',
resolveId(id, importer) { resolveId(id, importer) {
@@ -97,13 +179,16 @@ export default defineConfig({
load(id) { load(id) {
if (id.startsWith('source!')) { if (id.startsWith('source!')) {
const path = id.split('!!')[0].replace('source!', '') const path = id.split('!!')[0].replace('source!', '')
const files = fg.sync(`${path}/**/*`, { const ignore = [
ignore: [
'**/index.html',
'**/*.spec.js', '**/*.spec.js',
'**/*.spec.ts', '**/*.spec.ts',
], ]
})
if (!path.endsWith('/JS')) {
ignore.push('**/index.html')
}
const files = fg.sync(`${path}/**/*`, { ignore })
.map(filePath => { .map(filePath => {
const name = filePath.replace(`${path}/`, '') const name = filePath.replace(`${path}/`, '')

9
docs/guide/styling.md
View File

@@ -77,13 +77,7 @@ new Editor({
### With Tailwind CSS ### With Tailwind CSS
The editor works fine with Tailwind CSS, too. Find an example that’s styled with the `@tailwindcss/typography` plugin below. The editor works fine with Tailwind CSS, too. Find an example that’s styled with the `@tailwindcss/typography` plugin below.
<iframe https://embed.tiptap.dev/preview/Experiments/Tailwind
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>
## Option 3: Customize the HTML ## 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: 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. You should put your custom extensions in separate files, but I think you got the idea.