@patternslib/pat-tiptap
Version:
A pattern for tiptap
393 lines (348 loc) • 13.4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>tiptap demo</title>
<script src="/bundle.min.js"></script>
<style type="text/css">
.tiptap-focus {
outline: 2px solid red;
}
.tiptap-editor__content {
border: 1px solid black;
padding: 1em;
}
.ProseMirror:focus {
outline: none;
}
.active {
background-color: green;
}
table, td, th {
border: 1px solid black;
}
th {
background-color: grey;
font-weight: bold;
}
iframe {
border: 1em solid blue;
}
/*
.ProseMirror p.placeholder::before,
.ProseMirror p.placeholder-top::before,
.ProseMirror p.placeholder-bottom::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}*/
/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}
/* Placeholder (on every new line) */
/*.ProseMirror p.is-empty::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}*/
.tooltip-container a,
.tooltip-container a:visited {
color: white;
}
:focus {
outline: 3px solid red;
}
#tiptap-external-toolbar {
position: sticky;
top: 0;
background: white;
z-index: 1000;
}
</style>
</head>
<body>
<h1>TipTap examples</h1>
<section>
<h2>TipTap basic example</h2>
<div id="tiptap-external-toolbar">
<!-- paragraph formating -->
<button type="button" class="button-heading-level-1">Header level 1</button>
<button type="button" class="button-heading-level-2">Header level 2</button>
<button type="button" class="button-heading-level-3">Header level 3</button>
<button type="button" class="button-heading-level-4">Header level 4</button>
<button type="button" class="button-heading-level-5">Header level 5</button>
<button type="button" class="button-heading-level-6">Header level 6</button>
<button type="button" class="button-paragraph">Normal</button>
<button type="button" class="button-blockquote">Quote</button>
<button type="button" class="button-code-block">Code Block</button>
<!-- character formating -->
<button type="button" class="button-bold">Bold</button>
<button type="button" class="button-italic">Italic</button>
<button type="button" class="button-strike">Strike</button>
<button type="button" class="button-code">Code Inline</button>
<!-- lists -->
<button type="button" class="button-unordered-list">Bullet list</button>
<button type="button" class="button-ordered-list">Ordered list</button>
<!-- tables -->
<button type="button" class="button-table-create">Create table</button>
<button type="button" class="button-table-add-row-above">Add row above</button>
<button type="button" class="button-table-add-row-below">Add row below</button>
<button type="button" class="button-table-add-column-left">Add column to the left</button>
<button type="button" class="button-table-add-column-right">Add column to the right</button>
<button type="button" class="button-table-header_cell">Header cell</button>
<button type="button" class="button-table-header_row">Header row</button>
<button type="button" class="button-table-header_column">Header column</button>
<button type="button" class="button-table-merge-cells">Merge cells</button>
<button type="button" class="button-table-remove">Remove table</button>
<button type="button" class="button-table-remove-column">Remove column</button>
<button type="button" class="button-table-remove-row">Remove row</button>
<!-- other -->
<button type="button" class="button-horizontal-rule">Horizontal rule</button>
<!-- functionality -->
<button type="button" class="button-undo">Undo</button>
<button type="button" class="button-redo">Redo</button>
<!-- media/links -->
<a
class="button-link pat-modal"
href="#modal-link">Link</a>
<a
class="button-image pat-modal"
href="#modal-image">Image</a>
<a
class="button-embed pat-modal"
href="#modal-embed">Video</a>
<a
class="button-source pat-modal"
href="#modal-source">Source</a>
</div>
<textarea
class="pat-tiptap pat-autofocus"
data-pat-tiptap="
toolbar-external: #tiptap-external-toolbar;
image-panel: .image-panel;
link-panel: .link-panel;
source-panel: .source-panel;
embed-panel: .embed-panel;
image-menu: #context-menu-image;
embed-menu: #context-menu-embed;
link-menu: #context-menu-link;
mentions-menu: ./index-mentions-results.html?u=;
tags-menu: ./index-tags-results.html?okay=1234&q=;
"
placeholder="Your poem goes here..."
autocomplete="off"
>
<p>Visit <a href="https://github.com/patternslib/pat-tiptap">pat-tiptap on GitHub</a>.</p>
<p>Hello,
<a class="pat-tooltip"
href="https://en.wikipedia.org/wiki/Mary_(name)"
data-mention
contenteditable="false"
data-pat-tooltip="url: ./index-remote-content.html#mary; source: ajax; trigger: click"
data-title="Mary">@Mary</a>, have a nice day!</p>
<p>Yo,
<a class="pat-tooltip"
href="https://en.wikipedia.org/wiki/James_(given_name)"
data-mention
data-pat-tooltip="url: ./index-remote-content.html#james; source: ajax; trigger: click">@James Dean</a>!
</p>
<p>The following should show an image directly on the top-level</p>
<p><img alt="blue image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQavhTIEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnPFse76yukbN6SAAAAAElFTkSuQmCC"
title="this is a blue image"
/></p>
<figure><img alt="green image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQWviSoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnfFrL06ytLHYipAAAAAElFTkSuQmCC"
title="this is a green image"
/><figcaption>Above is a image within a figure/img/figcaption structure.</figcaption></figure>
<p>Here is an inline-image. This image is allowed by our schema, parsed and displayed, but adding a new image will add it as and image within a figure tag.
<img alt="red image"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQZviSIEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnvFp4t6yugc3LNAAAAAElFTkSuQmCC"
title="this is a red image"
/></p>
<figure>
<iframe allowfullscreen
frameborder="0"
height="315"
src="https://www.youtube.com/embed/GO1mRJkGXTA"
width="560"
></iframe>
<figcaption>hello</figcaption>
</figure>
<p>A new paragraph with a table.</p>
<table>
<tbody>
<tr>
<th>
<p>column 1</p>
</th>
<th>
<p>column 2</p>
</th>
<th>
<p>column 3</p>
</th>
</tr>
<tr>
<td>
<p>cell 1.1</p>
</td>
<td>
<p>cell 1.2</p>
</td>
<td>
<p>cell 1.3</p>
</td>
</tr>
<tr>
<td>
<p>cell 2.1</p>
</td>
<td>
<p>next cell is intentionally left blank</p>
</td>
<td>
<p></p>
</td>
</tr>
</tbody>
</table>
</textarea>
</section>
<!--section>
<h2>Collaboration example</h2>
<p>Open this window in another browser to see simultanous editing.</p>
<p>connecting to wss://demos.yjs.dev, document name "patternslib-demo"</p>
<div class="pat-tiptap"
data-pat-tiptap="collaboration-server: wss://demos.yjs.dev; collaboration-document: patternslib-demo">
yo, hello!
</div>
</section-->
<template id="modal-link">
<h1>Add / Edit Link</h1>
<form class="link-panel pat-validation" data-pat-validation="disable-selector: [name=tiptap-confirm]">
<label>
Link URL:
<input type="url" name="tiptap-href" placeholder="https://"/>
</label>
<label>
Link Text:
<input type="text" name="tiptap-text"/>
</label>
<label>
Open in new window:
<input type="checkbox" name="tiptap-target" value="_blank" />
</label>
<button class="close-panel" type="submit" name="tiptap-confirm">submit</button>
<button class="close-panel" type="button" name="tiptap-remove">remove link</button>
</form>
</template>
<template id="modal-image">
<h1>Add Image</h1>
<form class="image-panel pat-validation" data-pat-validation="disable-selector: [name=tiptap-confirm]">
<label>
Image URL:
<input type="url" name="tiptap-src" placeholder="https://"/>
</label>
<label>
Title:
<input type="text" name="tiptap-title"/>
</label>
<label>
Alternative text:
<input type="text" name="tiptap-alt"/>
</label>
<label>
Caption:
<textarea name="tiptap-caption"></textarea>
</label>
<button class="close-panel" type="submit" name="tiptap-confirm">submit</button>
</form>
</template>
<template id="modal-embed">
<h1>Add Video Embed</h1>
<form class="embed-panel pat-validation" data-pat-validation="disable-selector: [name=tiptap-confirm]">
<label>
Video URL:
<input type="url" name="tiptap-src" placeholder="https://"/>
</label>
<label>
Title:
<input type="text" name="tiptap-title"/>
</label>
<label>
Caption:
<textarea name="tiptap-caption"></textarea>
</label>
<button class="close-panel" type="submit" name="tiptap-confirm">submit</button>
</form>
</template>
<template id="modal-source">
<h1>Edit Source</h1>
<form class="source-panel">
<label>
Source:
<textarea name="tiptap-source"></textarea>
</label>
<button class="close-panel" type="submit" name="tiptap-confirm">submit</button>
</form>
</template>
<template id="context-menu-image">
<ul class="tiptap-image-context-menu">
<li>
<button
type="button"
class="close-panel tiptap-edit-image">Edit image</button>
</li>
<li>
<button
type="button"
class="close-panel tiptap-remove-image">Remove image</button>
</li>
</ul>
</template>
<template id="context-menu-embed">
<ul class="tiptap-embed-context-menu">
<li>
<button
type="button"
class="close-panel tiptap-edit-embed">Edit embed</button>
</li>
<li>
<button
type="button"
class="close-panel tiptap-remove-embed">Remove embed</button>
</li>
</ul>
</template>
<template id="context-menu-link">
<ul class="tiptap-link-context-menu">
<li>
<a
class="close-panel tiptap-open-new-link"
target="_blank"
href="">Visit linked web page</a>
</li>
<li>
<button
type="button"
class="close-panel tiptap-edit-link">Edit link</button>
</li>
<li>
<button
type="button"
class="close-panel tiptap-unlink">Unlink</button>
</li>
</ul>
</template>
</body>
</html>