@patternslib/pat-tiptap
Version:
A pattern for tiptap
164 lines (150 loc) • 4.88 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tiptap demo</title>
<script src="/bundle.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.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;
}
/* 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;
}
.tooltip-container a,
.tooltip-container a:visited {
color: white;
}
</style>
</head>
<body>
<h1>TipTap examples</h1>
<div id="tiptap-toolbar">
<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-paragraph">Normal</button>
<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-unordered-list">Bullet list</button>
<button type="button" class="button-ordered-list">Ordered list</button>
<button type="button" class="button-undo">Undo</button>
<button type="button" class="button-redo">Redo</button>
<a class="button-link pat-modal" href="#modal-link">Link</a>
</div>
<section>
<h2>TipTap -1</h2>
<textarea
class="pat-tiptap pat-autofocus"
data-pat-tiptap="
toolbar-external: #tiptap-toolbar;
link-panel: #pat-modal .link-panel;
link-menu: #context-menu-link"
placeholder="Your poem goes here...">
</textarea>
</section>
<section>
<h2>TipTap -2</h2>
<textarea
class="pat-tiptap pat-autofocus"
data-pat-tiptap="
toolbar-external: #tiptap-toolbar;
link-panel: #pat-modal .link-panel;
link-menu: #context-menu-link"
placeholder="Your poem goes here...">
</textarea>
</section>
<section>
<h2>TipTap -3</h2>
<textarea
class="pat-tiptap pat-autofocus"
data-pat-tiptap="
toolbar-external: #tiptap-toolbar;
link-panel: #pat-modal .link-panel;
link-menu: #context-menu-link"
placeholder="Your poem goes here...">
</textarea>
</section>
<section>
<h2>TipTap -4</h2>
<textarea
class="pat-tiptap pat-autofocus"
data-pat-tiptap="
toolbar-external: #tiptap-toolbar;
link-panel: #pat-modal .link-panel;
link-menu: #context-menu-link"
placeholder="Your poem goes here...">
</textarea>
</section>
<section>
<h2>TipTap -5</h2>
<textarea
class="pat-tiptap pat-autofocus"
data-pat-tiptap="
toolbar-external: #tiptap-toolbar;
link-panel: #pat-modal .link-panel;
link-menu: #context-menu-link"
placeholder="Your poem goes here...">
</textarea>
</section>
<template id="modal-link">
<h1>Add / Edit Link</h1>
<form class="link-panel">
<label>
Link URL:
<input type="text" name="tiptap-href"/>
</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="button" name="tiptap-confirm">submit</button>
<button class="close-panel" type="button" name="tiptap-remove">remove link</button>
</form>
</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>