mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-24 03:39:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into develop

Browse Source
This commit is contained in:
Nick the Sick 2024-06-13 07:05:09 +02:00
commit ca2a2284f0
No known key found for this signature in database
GPG Key ID: F575992F156E5BCC
310 changed files with 11474 additions and 5716 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demos/preview/Demo.vue
View File

@ -17,6 +17,7 @@
<div class="overflow-hidden">
<div
class="bg-white"
:class="[hidePreview ? 'hidden' : '']"
>
<demo-frame
:src="currentIframeUrl"
@ -140,6 +141,10 @@ export default {
return this.query.hideSource || false
},
hidePreview() {
return this.query.hidePreview || false
},
githubUrl() {
return `https://github.com/ueberdosis/tiptap/tree/main/demos/src/${this.name}`
},

320
demos/setup/style.scss
View File

@ -1,4 +1,23 @@
$colorBlack: #000;
/* Base HTML and global element styles*/
:root {
--white: #FFF;
--black: #2E2B29;
--black-contrast: #110F0E;
--gray-1: rgba(61, 37, 20, 0.05);
--gray-2: rgba(61, 37, 20, 0.08);
--gray-3: rgba(61, 37, 20, 0.12);
--gray-4: rgba(53, 38, 28, 0.30);
--gray-5: rgba(28, 25, 23, 0.60);
--purple: #6A00F5;
--purple-contrast: #5800CC;
--purple-light: rgba(88, 5, 255, 0.05);
--yellow-contrast: #FACC15;
--yellow: rgba(250, 204, 21, 0.4);
--yellow-light: #FFFAE5;
--red: #FF5C33;
--red-light: #FFEBE5;
--shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
}
*,
*::before,
@ -9,32 +28,46 @@ $colorBlack: #000;
html {
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
body {
margin: 1rem;
min-height: 10rem;
margin: 0;
}
:first-child {
margin-top: 0;
}
.tiptap {
caret-color: var(--purple);
margin: 1.5rem;
&:focus {
outline: none;
}
}
/* Custom scrollbar styles */
::-webkit-scrollbar {
width: 14px;
height: 14px;
width: 14px;
}
::-webkit-scrollbar-track {
border: 4px solid transparent;
background-clip: padding-box;
border-radius: 8px;
background-color: transparent;
border: 4px solid transparent;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0);
border: 4px solid rgba(0, 0, 0, 0);
border-radius: 8px;
}
:hover::-webkit-scrollbar-thumb {
@ -47,37 +80,276 @@ body {
::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
width: 0;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
/* Specific element and component styles */
button,
input,
select {
font-size: inherit;
select,
textarea {
background: var(--gray-2);
border-radius: 0.5rem;
border: none;
color: var(--black);
font-family: inherit;
color: black;
margin: 0.1rem;
border: 1px solid black;
border-radius: 0.3rem;
padding: 0.1rem 0.4rem;
background: white;
accent-color: black;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.15;
margin: none;
padding: 0.375rem 0.625rem;
transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
&:hover {
background-color: var(--gray-3);
color: var(--black-contrast);
}
&[disabled] {
opacity: 0.3;
background: var(--gray-1);
color: var(--gray-4);
}
&:checked {
accent-color: var(--purple);
}
&.primary {
background: var(--black);
color: var(--white);
&:hover {
background-color: var(--black-contrast);
}
&[disabled] {
background: var(--gray-1);
color: var(--gray-4);
}
}
&.is-active {
background: var(--purple);
color: var(--white);
&:hover {
background-color: var(--purple-contrast);
color: var(--white);
}
}
}
.tiptap:focus {
outline: none;
button:not([disabled]),
select:not([disabled]) {
cursor: pointer;
}
.is-active {
background: black;
color: white;
input[type="text"],
textarea {
background-color: unset;
border: 1px solid var(--gray-3);
border-radius: 0.5rem;
color: var(--black);
&::placeholder {
color: var(--gray-4);
}
&:hover {
background-color: unset;
border-color: var(--gray-4);
}
&:focus-visible, &:focus {
border-color: var(--purple);
outline: none;
}
}
select {
/* reset */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Gray" d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.1rem center;
background-size: 1.25rem 1.25rem;
padding-right: 1.25rem;
&:focus {
outline: 0;
}
}
form {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hint {
align-items: center;
background-color: var(--yellow-light);
border-radius: 0.5rem;
border: 1px solid var(--gray-2);
display: flex;
flex-direction: row;
font-size: 0.75rem;
gap: 0.5rem;
line-height: 1.15;
min-height: 1.75rem;
padding: 0.25rem 0.5rem;
&.purple-spinner,
&.error {
justify-content: center;
text-align: center;
width: 100%;
}
&.purple-spinner {
background-color: var(--purple-light);
&::after {
content: "";
background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='28px' height='30px' viewBox='0 0 24 30' style='enable-background:new 0 0 50 50;' xml:space='preserve'><rect x='0' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0' dur='0.6s' repeatCount='indefinite'/></rect><rect x='10' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0.2s' dur='0.6s' repeatCount='indefinite'/></rect><rect x='20' y='10' width='6' height='10' fill='%236A00F5' rx='3' ry='3'><animateTransform attributeType='xml' attributeName='transform' type='translate' values='0 0; 0 5; 0 -5; 0 0' begin='0.4s' dur='0.6s' repeatCount='indefinite'/></rect></svg>");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 1rem;
width: 1rem;
}
}
&.error {
background-color: var(--red-light);
}
}
.label,
.label-small,
.label-large {
color: var(--black);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.15;
}
.label-small {
color: var(--gray-5);
font-size: 0.75rem;
font-weight: 400;
}
.label-large {
font-size: 0.875rem;
font-weight: 700;
}
hr {
border: none;
border-top: 1px solid var(--gray-3);
margin: 0;
width: 100%;
}
/* Layout and structure */
#app,
.container {
display: flex;
flex-direction: column;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.control-group {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1.5rem;
}
[data-node-view-wrapper] > .control-group {
margin: 1.5rem 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
width: 100%;
}
.switch-group {
align-items: center;
background: var(--gray-2);
border-radius: 0.5rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 1 auto;
justify-content: flex-start;
padding: 0.125rem;
label {
align-items: center;
border-radius: 0.375rem;
color: var(--gray-5);
cursor: pointer;
display: flex;
flex-direction: row;
font-size: 0.75rem;
font-weight: 500;
gap: 0.25rem;
line-height: 1.15;
min-height: 1.5rem;
padding: 0 0.375rem;
transition: all 0.2s cubic-bezier(0.65,0.05,0.36,1);
&:has(input:checked) {
background-color: var(--white);
color: var(--black-contrast);
}
&:hover {
color: var(--black);
}
input {
display: none;
margin: unset;
}
}
}
.output-group {
background-color: var(--gray-1);
display: flex;
flex-direction: column;
font-family: 'JetBrainsMono', monospace;
font-size: 0.75rem;
gap: 1rem;
margin-top: 2.5rem;
padding: 1.5rem;
label {
color: var(--black);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.15;
}
}

16
demos/src/Commands/Cut/React/index.jsx
View File

@ -21,10 +21,12 @@ const MenuBar = ({ editor }) => {
}, [editor])
return (
<>
<button onClick={onCutToStart}>Cut content to start of document</button>
<button onClick={onCutToEnd}>Cut content to end of document</button>
</>
<div className="control-group">
<div className="button-group">
<button onClick={onCutToStart}>Cut content to start of document</button>
<button onClick={onCutToEnd}>Cut content to end of document</button>
</div>
</div>
)
}
@ -49,7 +51,7 @@ export default () => {
Hi there,
</h2>
<p>
this is a <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:
this is a <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>
@ -77,9 +79,9 @@ export default () => {
})
return (
<div>
<>
<MenuBar editor={editor} />
<EditorContent editor={editor} />
</div>
</>
)
}

64
demos/src/Commands/Cut/React/index.spec.js
View File

@ -21,41 +21,41 @@ context('/src/Examples/Default/React/', () => {
})
const buttonMarks = [
{ label: 'bold', tag: 'strong' },
{ label: 'italic', tag: 'em' },
{ label: 'strike', tag: 's' },
{ label: 'Bold', tag: 'strong' },
{ label: 'Italic', tag: 'em' },
{ label: 'Strike', tag: 's' },
]
buttonMarks.forEach(m => {
it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('be.disabled')
})
it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('code').click()
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('not.be.disabled')
})
it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('be.disabled')
})
it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains('code').click()
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('not.be.disabled')
})
it(`should apply ${m.label} when the button is pressed`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains(m.label).click()
cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@ -64,40 +64,40 @@ context('/src/Examples/Default/React/', () => {
it('should clear marks when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains('bold').click()
cy.get('button').contains('Bold').click()
cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
cy.get('button').contains('clear marks').click()
cy.get('button').contains('Clear marks').click()
cy.get('.tiptap strong').should('not.exist')
})
it('should clear nodes when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('bullet list').click()
cy.get('button').contains('Bullet list').click()
cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
cy.get('button').contains('clear nodes').click()
cy.get('button').contains('Clear nodes').click()
cy.get('.tiptap ul').should('not.exist')
cy.get('.tiptap p').should('have.length', 3)
})
const buttonNodes = [
{ label: 'h1', tag: 'h1' },
{ label: 'h2', tag: 'h2' },
{ label: 'h3', tag: 'h3' },
{ label: 'h4', tag: 'h4' },
{ label: 'h5', tag: 'h5' },
{ label: 'h6', tag: 'h6' },
{ label: 'bullet list', tag: 'ul' },
{ label: 'ordered list', tag: 'ol' },
{ label: 'code block', tag: 'pre code' },
{ label: 'blockquote', tag: 'blockquote' },
{ label: 'H1', tag: 'h1' },
{ label: 'H2', tag: 'h2' },
{ label: 'H3', tag: 'h3' },
{ label: 'H4', tag: 'h4' },
{ label: 'H5', tag: 'h5' },
{ label: 'H6', tag: 'h6' },
{ label: 'Bullet list', tag: 'ul' },
{ label: 'Ordered list', tag: 'ol' },
{ label: 'Code block', tag: 'pre code' },
{ label: 'Blockquote', tag: 'blockquote' },
]
buttonNodes.forEach(n => {
it(`should set ${n.label} when the button is pressed`, () => {
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains(n.label).click()
@ -109,35 +109,35 @@ context('/src/Examples/Default/React/', () => {
it('should add a hr when on the same line as a node', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a hr when on a new line', () => {
cy.get('.tiptap').type('{rightArrow}{enter}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a br', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('hard break').click()
cy.get('button').contains('Hard break').click()
cy.get('.tiptap h1 br').should('exist')
})
it('should undo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
})
it('should redo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
cy.get('button').contains('redo').click()
cy.get('button').contains('Redo').click()
cy.get('.tiptap').should('not.contain', 'Hello world')
})
})

107
demos/src/Commands/Cut/React/styles.scss
View File

@ -1,56 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

24
demos/src/Commands/InsertContent/React/index.jsx
View File

@ -29,17 +29,19 @@ const MenuBar = () => {
}
return (
<>
<button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
Insert html content
</button>
<button data-test-id="html-content-spans" onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}>
Insert html with span tags content
</button>
<button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
Insert text content
</button>
</>
<div className="control-group">
<div className="button-group">
<button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
Insert HTML content
</button>
<button data-test-id="html-content-spans" onClick={() => editor.chain().insertContent('<p><b>Hello</b> <i>World</i></p>').focus().run()}>
Insert HTML with span tags content
</button>
<button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
Insert text content
</button>
</div>
</div>
)
}

107
demos/src/Commands/InsertContent/React/styles.scss
View File

@ -1,56 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

284
demos/src/Commands/InsertContentApplyingRules/React/index.jsx
View File

@ -14,154 +14,152 @@ const MenuBar = () => {
}
return (
<>
<div className="control-group">
<div>
<button
onClick={() => setUseInputRules(prev => !prev)}
style={{
color: useInputRules ? 'white' : 'inherit',
backgroundColor: useInputRules ? 'black' : 'transparent',
}}
>
Apply Input Rules
</button>
<button
onClick={() => setUsePasteRules(prev => !prev)}
style={{
color: usePasteRules ? 'white' : 'inherit',
backgroundColor: usePasteRules ? 'black' : 'transparent',
}}
>
Apply Paste Rules
</button>
<label>
<input
type="checkbox"
checked={useInputRules}
onChange={() => setUseInputRules(prev => !prev)}
/>
Apply input rules
</label>
<label>
<input
type="checkbox"
checked={usePasteRules}
onChange={() => setUsePasteRules(prev => !prev)}
/>
Apply paste rules
</label>
</div>
<br />
<div className="button-group">
<button
onClick={() => {
editor
.chain()
.insertContent('-', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-1
>
Insert "-"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent(' ', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-2
>
Insert " "
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('A', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-3
>
Insert "A"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('-', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-1
>
Insert "-"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent(' ', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-2
>
Insert " "
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('A', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-3
>
Insert "A"
</button>
<br />
<br />
<button
onClick={() => {
editor
.chain()
.insertContent('*this is', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-4
>
Insert "*this is"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent(' a test*', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-5
>
Insert " a test*"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent(' a test*, whooho', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-6
>
Insert " a test*, whooho."
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('*this is a test*, whooho.', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-7
>
Insert "*this is a test*, whooho."
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('*this is a test*', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-8
>
Insert "*this is a test*"
</button>
</>
<button
onClick={() => {
editor
.chain()
.insertContent('*this is', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-4
>
Insert "*this is"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent(' a test*', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-5
>
Insert " a test*"
</button>
<button
onClick={() => {
editor
.chain()
.insertContent(' a test*, whooho', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-6
>
Insert " a test*, whooho."
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('*this is a test*, whooho.', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-7
>
Insert "*this is a test*, whooho."
</button>
<button
onClick={() => {
editor
.chain()
.insertContent('*this is a test*', {
applyInputRules: useInputRules,
applyPasteRules: usePasteRules,
})
.focus()
.run()
}}
data-test-8
>
Insert "*this is a test*"
</button>
</div>
</div>
)
}

107
demos/src/Commands/InsertContentApplyingRules/React/styles.scss
View File

@ -1,56 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

36
demos/src/Examples/AutolinkValidation/React/index.jsx
View File

@ -50,22 +50,26 @@ export default () => {
}
return (
<div>
<button
onClick={setLink}
className={editor.isActive('link') ? 'is-active' : ''}
data-testid="setLink"
>
setLink
</button>
<button
onClick={() => editor.chain().focus().unsetLink().run()}
disabled={!editor.isActive('link')}
data-testid="unsetLink"
>
unsetLink
</button>
<>
<div className="control-group">
<div className="button-group">
<button
onClick={setLink}
className={editor.isActive('link') ? 'is-active' : ''}
data-testid="setLink"
>
Set link
</button>
<button
onClick={() => editor.chain().focus().unsetLink().run()}
disabled={!editor.isActive('link')}
data-testid="unsetLink"
>
Unset link
</button>
</div>
</div>
<EditorContent editor={editor} />
</div>
</>
)
}

121
demos/src/Examples/AutolinkValidation/React/styles.scss
View File

@ -1,54 +1,101 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
hr {
margin: 1rem 0;
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
/* Link styles */
a {
color: var(--purple);
cursor: pointer;
&:hover {
color: var(--purple-contrast);
}
}
}

226
demos/src/Examples/Book/React/index.jsx
View File

@ -12,116 +12,118 @@ const MenuBar = ({ editor }) => {
}
return (
<>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'is-active' : ''}
>
italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive('strike') ? 'is-active' : ''}
>
strike
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
className={editor.isActive('code') ? 'is-active' : ''}
>
code
</button>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
clear marks
</button>
<button onClick={() => editor.chain().focus().clearNodes().run()}>
clear nodes
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
paragraph
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
h1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
h2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
>
h3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
>
h4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
>
h5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
>
h6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
bullet list
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
ordered list
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
code block
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
blockquote
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
horizontal rule
</button>
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
hard break
</button>
<button onClick={() => editor.chain().focus().undo().run()}>
undo
</button>
<button onClick={() => editor.chain().focus().redo().run()}>
redo
</button>
</>
<div className="control-group">
<div className="button-group">
<button
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
Bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'is-active' : ''}
>
Italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive('strike') ? 'is-active' : ''}
>
Strike
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
className={editor.isActive('code') ? 'is-active' : ''}
>
Code
</button>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
Clear marks
</button>
<button onClick={() => editor.chain().focus().clearNodes().run()}>
Clear nodes
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
Paragraph
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
H1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
H2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
>
H3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
>
H4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
>
H5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
>
H6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
Bullet list
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
Ordered list
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
Code block
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
Blockquote
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
Horizontal rule
</button>
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
Hard break
</button>
<button onClick={() => editor.chain().focus().undo().run()}>
Undo
</button>
<button onClick={() => editor.chain().focus().redo().run()}>
Redo
</button>
</div>
</div>
)
}
@ -139,9 +141,9 @@ export default () => {
})
return (
<div>
<>
<MenuBar editor={editor} />
<EditorContent editor={editor} />
</div>
</>
)
}

111
demos/src/Examples/Book/React/styles.scss
View File

@ -1,54 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
hr {
margin: 1rem 0;
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

209
demos/src/Examples/Book/Vue/index.vue
View File

@ -1,70 +1,74 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
Strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
Code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
Clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
Clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
Paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
H1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
H2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
H3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
H4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
H5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
H6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
Bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
Ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
Code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
Blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
Horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
Hard break
</button>
<button @click="editor.chain().focus().undo().run()">
Undo
</button>
<button @click="editor.chain().focus().redo().run()">
Redo
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>
@ -107,15 +111,23 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -123,40 +135,69 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
img {
max-width: 100%;
height: auto;
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
</style>

48
demos/src/Examples/CSSModules/React/index.jsx
View File

@ -17,109 +17,109 @@ const MenuBar = ({ editor }) => {
onClick={() => editor.chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
bold
Bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'is-active' : ''}
>
italic
Italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
className={editor.isActive('strike') ? 'is-active' : ''}
>
strike
Strike
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
className={editor.isActive('code') ? 'is-active' : ''}
>
code
Code
</button>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
clear marks
Clear marks
</button>
<button onClick={() => editor.chain().focus().clearNodes().run()}>
clear nodes
Clear nodes
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
paragraph
Paragraph
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
h1
H1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
h2
H2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
>
h3
H3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
>
h4
H4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
>
h5
H5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
>
h6
H6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
bullet list
Bullet list
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
ordered list
Ordered list
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
code block
Code block
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
blockquote
Blockquote
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
horizontal rule
Horizontal rule
</button>
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
hard break
Hard break
</button>
<button onClick={() => editor.chain().focus().undo().run()}>
undo
Undo
</button>
<button onClick={() => editor.chain().focus().redo().run()}>
redo
Redo
</button>
</div>
)
@ -135,7 +135,7 @@ export default () => {
Hi there,
</h2>
<p>
this is a <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:
this is a <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>
@ -163,9 +163,9 @@ export default () => {
})
return (
<div>
<>
<MenuBar editor={editor} />
<EditorContent editor={editor} />
</div>
</>
)
}

107
demos/src/Examples/CSSModules/React/styles.scss
View File

@ -1,56 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

113
demos/src/Examples/CSSModules/Vue/index.vue
View File

@ -1,67 +1,67 @@
<template>
<div v-if="editor" class="toolbar" :class="styles.toolbar">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
Bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
Italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
Strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
Code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
Clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
Clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
Paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
H1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
H2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
H3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
H4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
H5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
H6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
Bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
Ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
Code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
Blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
Horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
Hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
Undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
Redo
</button>
</div>
<editor-content :editor="editor" />
@ -95,7 +95,7 @@ export default {
This is a red headline
</h1>
<p>
this is a <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:
this is a <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>
@ -132,15 +132,23 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -148,41 +156,68 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
img {
max-width: 100%;
height: auto;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

20
demos/src/Examples/CodeBlockLanguage/React/CodeBlockComponent.scss
View File

@ -1,9 +1,13 @@
.code-block {
position: relative;
select {
position: absolute;
right: 0.5rem;
top: 0.5rem;
.tiptap {
.code-block {
position: relative;
select {
position: absolute;
background-color: var(--white);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
right: 0.5rem;
top: 0.5rem;
}
}
}
}

14
demos/src/Examples/CodeBlockLanguage/React/index.jsx
View File

@ -30,9 +30,13 @@ const MenuBar = ({ editor }) => {
}
return (
<button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
code block
</button>
<div className="control-group">
<div className="button-group">
<button onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={editor.isActive('codeBlock') ? 'is-active' : ''}>
Toggle code block
</button>
</div>
</div>
)
}
@ -72,9 +76,9 @@ export default () => {
})
return (
<div>
<>
<MenuBar editor={editor} />
<EditorContent editor={editor} />
</div>
</>
)
}

18
demos/src/Examples/CodeBlockLanguage/React/styles.scss
View File

@ -1,23 +1,25 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
pre {
background: #0d0d0d;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
/* Code styling */
.hljs-comment,
.hljs-quote {
color: #616161;

16
demos/src/Examples/CodeBlockLanguage/Vue/CodeBlockComponent.vue
View File

@ -46,13 +46,17 @@ export default {
</script>
<style lang="scss">
.code-block {
position: relative;
.tiptap {
.code-block {
position: relative;
select {
position: absolute;
top: 0.5rem;
right: 0.5rem;
select {
position: absolute;
background-color: var(--white);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
right: 0.5rem;
top: 0.5rem;
}
}
}
</style>

40
demos/src/Examples/CodeBlockLanguage/Vue/index.vue
View File

@ -1,8 +1,12 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
Toggle code block
</button>
</div>
</div>
</div>
<editor-content :editor="editor" />
</template>
@ -88,24 +92,26 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
/* Code styling */
.hljs-comment,
.hljs-quote {
color: #616161;
@ -121,7 +127,7 @@ export default {
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #F98181;
color: #f98181;
}
.hljs-number,
@ -131,23 +137,23 @@ export default {
.hljs-literal,
.hljs-type,
.hljs-params {
color: #FBBC88;
color: #fbbc88;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #B9F18D;
color: #b9f18d;
}
.hljs-title,
.hljs-section {
color: #FAF594;
color: #faf594;
}
.hljs-keyword,
.hljs-selector-tag {
color: #70CFF8;
color: #70cff8;
}
.hljs-emphasis {

14
demos/src/Examples/CollaborativeEditing/React/MenuBar.jsx
View File

@ -59,25 +59,25 @@ export default ({ editor }) => {
},
{
icon: 'list-unordered',
title: 'Bullet List',
title: 'Bullet list',
action: () => editor.chain().focus().toggleBulletList().run(),
isActive: () => editor.isActive('bulletList'),
},
{
icon: 'list-ordered',
title: 'Ordered List',
title: 'Ordered list',
action: () => editor.chain().focus().toggleOrderedList().run(),
isActive: () => editor.isActive('orderedList'),
},
{
icon: 'list-check-2',
title: 'Task List',
title: 'Task list',
action: () => editor.chain().focus().toggleTaskList().run(),
isActive: () => editor.isActive('taskList'),
},
{
icon: 'code-box-line',
title: 'Code Block',
title: 'Code block',
action: () => editor.chain().focus().toggleCodeBlock().run(),
isActive: () => editor.isActive('codeBlock'),
},
@ -92,7 +92,7 @@ export default ({ editor }) => {
},
{
icon: 'separator',
title: 'Horizontal Rule',
title: 'Horizontal rule',
action: () => editor.chain().focus().setHorizontalRule().run(),
},
{
@ -100,12 +100,12 @@ export default ({ editor }) => {
},
{
icon: 'text-wrap',
title: 'Hard Break',
title: 'Hard break',
action: () => editor.chain().focus().setHardBreak().run(),
},
{
icon: 'format-clear',
title: 'Clear Format',
title: 'Clear format',
action: () => editor.chain().focus().clearNodes().unsetAllMarks()
.run(),
},

14
demos/src/Examples/CollaborativeEditing/Vue/MenuBar.vue
View File

@ -78,25 +78,25 @@ export default {
},
{
icon: 'list-unordered',
title: 'Bullet List',
title: 'Bullet list',
action: () => this.editor.chain().focus().toggleBulletList().run(),
isActive: () => this.editor.isActive('bulletList'),
},
{
icon: 'list-ordered',
title: 'Ordered List',
title: 'Ordered list',
action: () => this.editor.chain().focus().toggleOrderedList().run(),
isActive: () => this.editor.isActive('orderedList'),
},
{
icon: 'list-check-2',
title: 'Task List',
title: 'Task list',
action: () => this.editor.chain().focus().toggleTaskList().run(),
isActive: () => this.editor.isActive('taskList'),
},
{
icon: 'code-box-line',
title: 'Code Block',
title: 'Code block',
action: () => this.editor.chain().focus().toggleCodeBlock().run(),
isActive: () => this.editor.isActive('codeBlock'),
},
@ -111,7 +111,7 @@ export default {
},
{
icon: 'separator',
title: 'Horizontal Rule',
title: 'Horizontal rule',
action: () => this.editor.chain().focus().setHorizontalRule().run(),
},
{
@ -119,12 +119,12 @@ export default {
},
{
icon: 'text-wrap',
title: 'Hard Break',
title: 'Hard break',
action: () => this.editor.chain().focus().setHardBreak().run(),
},
{
icon: 'format-clear',
title: 'Clear Format',
title: 'Clear format',
action: () => this.editor.chain()
.focus()
.clearNodes()

4
demos/src/Examples/Community/React/MentionList.jsx
View File

@ -54,11 +54,11 @@ export const MentionList = forwardRef((props, ref) => {
}))
return (
<div className="items">
<div className="dropdown-menu">
{props.items.length
? props.items.map((item, index) => (
<button
className={`item ${index === selectedIndex ? 'is-selected' : ''}`}
className={index === selectedIndex ? 'is-selected' : ''}
key={index}
onClick={() => selectItem(index)}
>

49
demos/src/Examples/Community/React/MentionList.scss
View File

@ -1,28 +1,31 @@
.items {
padding: 0.2rem;
/* Dropdown menu */
.dropdown-menu {
background: var(--white);
border: 1px solid var(--gray-1);
border-radius: 0.7rem;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 0.1rem;
overflow: auto;
padding: 0.4rem;
position: relative;
border-radius: 0.5rem;
background: #FFF;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
font-size: 0.9rem;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05),
0px 10px 20px rgba(0, 0, 0, 0.1),
;
}
.item {
display: block;
margin: 0;
width: 100%;
text-align: left;
background: transparent;
border-radius: 0.4rem;
border: 1px solid transparent;
padding: 0.2rem 0.4rem;
button {
align-items: center;
background-color: transparent;
display: flex;
gap: 0.25rem;
text-align: left;
width: 100%;
&:hover,
&:hover.is-selected {
background-color: var(--gray-3);
}
&.is-selected {
border-color: #000;
&.is-selected {
background-color: var(--gray-2);
}
}
}

9
demos/src/Examples/Community/React/index.jsx
View File

@ -40,7 +40,7 @@ export default () => {
: 0
return (
<div>
<>
<EditorContent editor={editor} />
{editor
&& <div className={`character-count ${editor.storage.characterCount.characters() === limit ? 'character-count--warning' : ''}`}>
@ -48,7 +48,6 @@ export default () => {
height="20"
width="20"
viewBox="0 0 20 20"
className="character-count__graph"
>
<circle
r="10"
@ -74,11 +73,9 @@ export default () => {
/>
</svg>
<div className="character-count__text">
{editor.storage.characterCount.characters()}/{limit} characters
</div>
{editor.storage.characterCount.characters()} / {limit} characters
</div>
}
</div>
</>
)
}

14
demos/src/Examples/Community/React/index.spec.js
View File

@ -4,33 +4,33 @@ context('/src/Examples/Community/React/', () => {
})
it('should count the characters correctly', () => {
// check if count text is "44/280 characters"
cy.get('.character-count__text').should('have.text', '44/280 characters')
// check if count text is "44 / 280 characters"
cy.get('.character-count').should('contain', '44 / 280 characters')
// type in .tiptap
cy.get('.tiptap').type(' Hello World')
cy.get('.character-count__text').should('have.text', '56/280 characters')
cy.get('.character-count').should('contain', '56 / 280 characters')
// remove content from .tiptap and enter text
cy.get('.tiptap').type('{selectall}{backspace}Hello World')
cy.get('.character-count__text').should('have.text', '11/280 characters')
cy.get('.character-count').should('contain', '11 / 280 characters')
})
it('should mention a user', () => {
cy.get('.tiptap').type('{selectall}{backspace}@')
// check if the mention autocomplete is visible
cy.get('.tippy-content .items').should('be.visible')
cy.get('.tippy-content .dropdown-menu').should('be.visible')
// select the first user
cy.get('.tippy-content .items .item').first().then($el => {
cy.get('.tippy-content .dropdown-menu button').first().then($el => {
const name = $el.text()
$el.click()
// check if the user is mentioned
cy.get('.tiptap').should('have.text', `@${name} `)
cy.get('.character-count__text').should('have.text', '2/280 characters')
cy.get('.character-count').should('contain', '2 / 280 characters')
})
})

48
demos/src/Examples/Community/React/styles.scss
View File

@ -1,41 +1,33 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
.mention {
background-color: var(--purple-light);
border-radius: 0.4rem;
box-decoration-break: clone;
color: var(--purple);
padding: 0.1rem 0.3rem;
}
}
.mention {
border: 1px solid #000;
border-radius: 0.4rem;
padding: 0.1rem 0.3rem;
box-decoration-break: clone;
}
/* Character count */
.character-count {
margin-top: 1rem;
display: flex;
align-items: center;
color: #68CEF8;
color: var(--gray-5);
display: flex;
font-size: 0.75rem;
gap: .5rem;
margin: 1.5rem;
&--warning {
color: #FB5151;
svg {
color: var(--purple);
}
&__graph {
margin-right: 0.5rem;
}
&__text {
color: #868e96;
&--warning,
&--warning svg {
color: var(--red);
}
}

52
demos/src/Examples/Community/Vue/MentionList.vue
View File

@ -1,8 +1,7 @@
<template>
<div class="items">
<div class="dropdown-menu">
<template v-if="items.length">
<button
class="item"
:class="{ 'is-selected': index === selectedIndex }"
v-for="(item, index) in items"
:key="index"
@ -87,32 +86,35 @@ export default {
</script>
<style lang="scss">
.items {
padding: 0.2rem;
/* Dropdown menu */
.dropdown-menu {
background: var(--white);
border: 1px solid var(--gray-1);
border-radius: 0.7rem;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 0.1rem;
overflow: auto;
padding: 0.4rem;
position: relative;
border-radius: 0.5rem;
background: #FFF;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
font-size: 0.9rem;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05),
0px 10px 20px rgba(0, 0, 0, 0.1),
;
}
.item {
display: block;
margin: 0;
width: 100%;
text-align: left;
background: transparent;
border-radius: 0.4rem;
border: 1px solid transparent;
padding: 0.2rem 0.4rem;
button {
align-items: center;
background-color: transparent;
display: flex;
gap: 0.25rem;
text-align: left;
width: 100%;
&.is-selected {
border-color: #000;
&:hover,
&:hover.is-selected {
background-color: var(--gray-3);
}
&.is-selected {
background-color: var(--gray-2);
}
}
}
</style>

14
demos/src/Examples/Community/Vue/index.spec.js
View File

@ -4,33 +4,33 @@ context('/src/Examples/Community/Vue/', () => {
})
it('should count the characters correctly', () => {
// check if count text is "44/280 characters"
cy.get('.character-count__text').should('have.text', '44/280 characters')
// check if count text is "44 / 280 characters"
cy.get('.character-count').should('contain', '44 / 280 characters')
// type in .tiptap
cy.get('.tiptap').type(' Hello World')
cy.get('.character-count__text').should('have.text', '56/280 characters')
cy.get('.character-count').should('contain', '56 / 280 characters')
// remove content from .tiptap and enter text
cy.get('.tiptap').type('{selectall}{backspace}Hello World')
cy.get('.character-count__text').should('have.text', '11/280 characters')
cy.get('.character-count').should('contain', '11 / 280 characters')
})
it('should mention a user', () => {
cy.get('.tiptap').type('{selectall}{backspace}@')
// check if the mention autocomplete is visible
cy.get('.tippy-content .items').should('be.visible')
cy.get('.tippy-content .dropdown-menu').should('be.visible')
// select the first user
cy.get('.tippy-content .items .item').first().then($el => {
cy.get('.tippy-content .dropdown-menu button').first().then($el => {
const name = $el.text()
$el.click()
// check if the user is mentioned
cy.get('.tiptap').should('have.text', `@${name} `)
cy.get('.character-count__text').should('have.text', '2/280 characters')
cy.get('.character-count').should('contain', '2 / 280 characters')
})
})

49
demos/src/Examples/Community/Vue/index.vue
View File

@ -6,7 +6,6 @@
height="20"
width="20"
viewBox="0 0 20 20"
class="character-count__graph"
>
<circle
r="10"
@ -32,7 +31,7 @@
/>
</svg>
<div class="character-count__text">{{ editor.storage.characterCount.characters() }}/{{ limit }} characters</div>
{{ editor.storage.characterCount.characters() }} / {{ limit }} characters
</div>
</template>
@ -97,43 +96,35 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
.mention {
background-color: var(--purple-light);
border-radius: 0.4rem;
box-decoration-break: clone;
color: var(--purple);
padding: 0.1rem 0.3rem;
}
}
.mention {
border: 1px solid #000;
border-radius: 0.4rem;
padding: 0.1rem 0.3rem;
box-decoration-break: clone;
}
/* Character count */
.character-count {
margin-top: 1rem;
display: flex;
align-items: center;
color: #68CEF8;
color: var(--gray-5);
display: flex;
font-size: 0.75rem;
gap: .5rem;
margin: 1.5rem;
&--warning {
color: #FB5151;
svg {
color: var(--purple);
}
&__graph {
margin-right: 0.5rem;
}
&__text {
color: #868e96;
&--warning,
&--warning svg {
color: var(--red);
}
}
</style>

125
demos/src/Examples/CustomDocument/React/styles.scss
View File

@ -1,24 +1,109 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
/* Placeholder (at the top) */
/* p.is-editor-empty:first-child::before {
color: var(--gray-4);
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}*/
/* Placeholder (on every new line) */
.is-empty::before {
color: var(--gray-4);
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
}
/* Placeholder (at the top) */
/*.tiptap 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) */
.tiptap .is-empty::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}

125
demos/src/Examples/CustomDocument/Vue/index.vue
View File

@ -60,26 +60,111 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
/* Placeholder (at the top) */
/* p.is-editor-empty:first-child::before {
color: var(--gray-4);
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}*/
/* Placeholder (on every new line) */
.is-empty::before {
color: var(--gray-4);
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
}
/* Placeholder (at the top) */
/*.tiptap 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) */
.tiptap .is-empty::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}
</style>

107
demos/src/Examples/CustomParagraph/React/styles.scss
View File

@ -1,24 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
/* Placeholder (at the top) */
/*.tiptap 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) */
.tiptap .is-empty::before {
content: attr(data-placeholder);
float: left;
color: #ced4da;
pointer-events: none;
height: 0;
}

330
demos/src/Examples/Default/React/index.jsx
View File

@ -15,168 +15,170 @@ const MenuBar = () => {
}
return (
<>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleBold()
.run()
}
className={editor.isActive('bold') ? 'is-active' : ''}
>
bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleItalic()
.run()
}
className={editor.isActive('italic') ? 'is-active' : ''}
>
italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleStrike()
.run()
}
className={editor.isActive('strike') ? 'is-active' : ''}
>
strike
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleCode()
.run()
}
className={editor.isActive('code') ? 'is-active' : ''}
>
code
</button>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
clear marks
</button>
<button onClick={() => editor.chain().focus().clearNodes().run()}>
clear nodes
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
paragraph
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
h1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
h2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
>
h3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
>
h4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
>
h5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
>
h6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
bullet list
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
ordered list
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
code block
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
blockquote
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
horizontal rule
</button>
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
hard break
</button>
<button
onClick={() => editor.chain().focus().undo().run()}
disabled={
!editor.can()
.chain()
.focus()
.undo()
.run()
}
>
undo
</button>
<button
onClick={() => editor.chain().focus().redo().run()}
disabled={
!editor.can()
.chain()
.focus()
.redo()
.run()
}
>
redo
</button>
<button
onClick={() => editor.chain().focus().setColor('#958DF1').run()}
className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
>
purple
</button>
</>
<div className="control-group">
<div className="button-group">
<button
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleBold()
.run()
}
className={editor.isActive('bold') ? 'is-active' : ''}
>
Bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleItalic()
.run()
}
className={editor.isActive('italic') ? 'is-active' : ''}
>
Italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleStrike()
.run()
}
className={editor.isActive('strike') ? 'is-active' : ''}
>
Strike
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleCode()
.run()
}
className={editor.isActive('code') ? 'is-active' : ''}
>
Code
</button>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
Clear marks
</button>
<button onClick={() => editor.chain().focus().clearNodes().run()}>
Clear nodes
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
Paragraph
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
H1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
H2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
>
H3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
>
H4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
>
H5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
>
H6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
Bullet list
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
Ordered list
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
Code block
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
Blockquote
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
Horizontal rule
</button>
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
Hard break
</button>
<button
onClick={() => editor.chain().focus().undo().run()}
disabled={
!editor.can()
.chain()
.focus()
.undo()
.run()
}
>
Undo
</button>
<button
onClick={() => editor.chain().focus().redo().run()}
disabled={
!editor.can()
.chain()
.focus()
.redo()
.run()
}
>
Redo
</button>
<button
onClick={() => editor.chain().focus().setColor('#958DF1').run()}
className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
>
Purple
</button>
</div>
</div>
)
}
@ -200,7 +202,7 @@ const content = `
Hi there,
</h2>
<p>
this is a <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:
this is a <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>
@ -214,7 +216,7 @@ const content = `
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;
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.

64
demos/src/Examples/Default/React/index.spec.js
View File

@ -21,41 +21,41 @@ context('/src/Examples/Default/React/', () => {
})
const buttonMarks = [
{ label: 'bold', tag: 'strong' },
{ label: 'italic', tag: 'em' },
{ label: 'strike', tag: 's' },
{ label: 'Bold', tag: 'strong' },
{ label: 'Italic', tag: 'em' },
{ label: 'Strike', tag: 's' },
]
buttonMarks.forEach(m => {
it(`should disable ${m.label} when the code tag is enabled for cursor`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('be.disabled')
})
it(`should enable ${m.label} when the code tag is disabled for cursor`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('code').click()
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('not.be.disabled')
})
it(`should disable ${m.label} when the code tag is enabled for selection`, () => {
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('be.disabled')
})
it(`should enable ${m.label} when the code tag is disabled for selection`, () => {
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains('code').click()
cy.get('button').contains('code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains('Code').click()
cy.get('button').contains(m.label).should('not.be.disabled')
})
it(`should apply ${m.label} when the button is pressed`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains(m.label).click()
cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@ -64,40 +64,40 @@ context('/src/Examples/Default/React/', () => {
it('should clear marks when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains('bold').click()
cy.get('button').contains('Bold').click()
cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
cy.get('button').contains('clear marks').click()
cy.get('button').contains('Clear marks').click()
cy.get('.tiptap strong').should('not.exist')
})
it('should clear nodes when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('bullet list').click()
cy.get('button').contains('Bullet list').click()
cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
cy.get('button').contains('clear nodes').click()
cy.get('button').contains('Clear nodes').click()
cy.get('.tiptap ul').should('not.exist')
cy.get('.tiptap p').should('have.length', 3)
})
const buttonNodes = [
{ label: 'h1', tag: 'h1' },
{ label: 'h2', tag: 'h2' },
{ label: 'h3', tag: 'h3' },
{ label: 'h4', tag: 'h4' },
{ label: 'h5', tag: 'h5' },
{ label: 'h6', tag: 'h6' },
{ label: 'bullet list', tag: 'ul' },
{ label: 'ordered list', tag: 'ol' },
{ label: 'code block', tag: 'pre code' },
{ label: 'blockquote', tag: 'blockquote' },
{ label: 'H1', tag: 'h1' },
{ label: 'H2', tag: 'h2' },
{ label: 'H3', tag: 'h3' },
{ label: 'H4', tag: 'h4' },
{ label: 'H5', tag: 'h5' },
{ label: 'H6', tag: 'h6' },
{ label: 'Bullet list', tag: 'ul' },
{ label: 'Ordered list', tag: 'ol' },
{ label: 'Code block', tag: 'pre code' },
{ label: 'Blockquote', tag: 'blockquote' },
]
buttonNodes.forEach(n => {
it(`should set ${n.label} when the button is pressed`, () => {
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains(n.label).click()
@ -109,35 +109,35 @@ context('/src/Examples/Default/React/', () => {
it('should add a hr when on the same line as a node', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a hr when on a new line', () => {
cy.get('.tiptap').type('{rightArrow}{enter}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a br', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('hard break').click()
cy.get('button').contains('Hard break').click()
cy.get('.tiptap h1 br').should('exist')
})
it('should undo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
})
it('should redo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
cy.get('button').contains('redo').click()
cy.get('button').contains('Redo').click()
cy.get('.tiptap').should('not.contain', 'Hello world')
})
})

107
demos/src/Examples/Default/React/styles.scss
View File

@ -1,56 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

52
demos/src/Examples/Default/Svelte/index.spec.js
View File

@ -21,15 +21,15 @@ context('/src/Examples/Default/React/', () => {
})
const buttonMarks = [
{ label: 'bold', tag: 'strong' },
{ label: 'italic', tag: 'em' },
{ label: 'strike', tag: 's' },
{ label: 'Bold', tag: 'strong' },
{ label: 'Italic', tag: 'em' },
{ label: 'Strike', tag: 's' },
]
buttonMarks.forEach(m => {
it(`should apply ${m.label} when the button is pressed`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains(m.label).click()
cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@ -38,40 +38,40 @@ context('/src/Examples/Default/React/', () => {
it('should clear marks when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains('bold').click()
cy.get('button').contains('Bold').click()
cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
cy.get('button').contains('clear marks').click()
cy.get('button').contains('Clear marks').click()
cy.get('.tiptap strong').should('not.exist')
})
it('should clear nodes when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('bullet list').click()
cy.get('button').contains('Bullet list').click()
cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
cy.get('button').contains('clear nodes').click()
cy.get('button').contains('Clear nodes').click()
cy.get('.tiptap ul').should('not.exist')
cy.get('.tiptap p').should('have.length', 3)
})
const buttonNodes = [
{ label: 'h1', tag: 'h1' },
{ label: 'h2', tag: 'h2' },
{ label: 'h3', tag: 'h3' },
{ label: 'h4', tag: 'h4' },
{ label: 'h5', tag: 'h5' },
{ label: 'h6', tag: 'h6' },
{ label: 'bullet list', tag: 'ul' },
{ label: 'ordered list', tag: 'ol' },
{ label: 'code block', tag: 'pre code' },
{ label: 'blockquote', tag: 'blockquote' },
{ label: 'H1', tag: 'h1' },
{ label: 'H2', tag: 'h2' },
{ label: 'H3', tag: 'h3' },
{ label: 'H4', tag: 'h4' },
{ label: 'H5', tag: 'h5' },
{ label: 'H6', tag: 'h6' },
{ label: 'Bullet list', tag: 'ul' },
{ label: 'Ordered list', tag: 'ol' },
{ label: 'Code block', tag: 'pre code' },
{ label: 'Blockquote', tag: 'blockquote' },
]
buttonNodes.forEach(n => {
it(`should set ${n.label} when the button is pressed`, () => {
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains(n.label).click()
@ -83,35 +83,35 @@ context('/src/Examples/Default/React/', () => {
it('should add a hr when on the same line as a node', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a hr when on a new line', () => {
cy.get('.tiptap').type('{rightArrow}{enter}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a br', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('hard break').click()
cy.get('button').contains('Hard break').click()
cy.get('.tiptap h1 br').should('exist')
})
it('should undo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
})
it('should redo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
cy.get('button').contains('redo').click()
cy.get('button').contains('Redo').click()
cy.get('.tiptap').should('not.contain', 'Hello world')
})
})

67
demos/src/Examples/Default/Svelte/index.svelte
View File

@ -1,6 +1,9 @@
<script>
import "./styles.scss";
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import StarterKit from "@tiptap/starter-kit";
import { Editor } from "@tiptap/core";
import { onMount } from "svelte";
@ -11,13 +14,17 @@
onMount(() => {
editor = new Editor({
element: element,
extensions: [StarterKit],
extensions: [
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure({ types: [ListItem.name] }),
StarterKit,
],
content: `
<h2>
Hi there,
</h2>
<p>
this is a <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:
this is a <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>
@ -31,8 +38,8 @@
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>
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>
@ -51,119 +58,125 @@
</script>
{#if editor}
<div>
<div>
<div class="control-group">
<div class="button-group">
<button
on:click={() => console.log && editor.chain().focus().toggleBold().run()}
disabled={!editor.can().chain().focus().toggleBold().run()}
class={editor.isActive("bold") ? "is-active" : ""}
>
bold
Bold
</button>
<button
on:click={() => editor.chain().focus().toggleItalic().run()}
disabled={!editor.can().chain().focus().toggleItalic().run()}
class={editor.isActive("italic") ? "is-active" : ""}
>
italic
Italic
</button>
<button
on:click={() => editor.chain().focus().toggleStrike().run()}
disabled={!editor.can().chain().focus().toggleStrike().run()}
class={editor.isActive("strike") ? "is-active" : ""}
>
strike
Strike
</button>
<button
on:click={() => editor.chain().focus().toggleCode().run()}
disabled={!editor.can().chain().focus().toggleCode().run()}
class={editor.isActive("code") ? "is-active" : ""}
>
code
Code
</button>
<button on:click={() => editor.chain().focus().unsetAllMarks().run()}> clear marks </button>
<button on:click={() => editor.chain().focus().clearNodes().run()}> clear nodes </button>
<button on:click={() => editor.chain().focus().unsetAllMarks().run()}>Clear marks</button>
<button on:click={() => editor.chain().focus().clearNodes().run()}>Clear nodes</button>
<button
on:click={() => editor.chain().focus().setParagraph().run()}
class={editor.isActive("paragraph") ? "is-active" : ""}
>
paragraph
Paragraph
</button>
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
class={editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
>
h1
H1
</button>
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
class={editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
>
h2
H2
</button>
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
class={editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
>
h3
H3
</button>
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
class={editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
>
h4
H4
</button>
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
class={editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
>
h5
H5
</button>
<button
on:click={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
class={editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
>
h6
H6
</button>
<button
on:click={() => editor.chain().focus().toggleBulletList().run()}
class={editor.isActive("bulletList") ? "is-active" : ""}
>
bullet list
Bullet list
</button>
<button
on:click={() => editor.chain().focus().toggleOrderedList().run()}
class={editor.isActive("orderedList") ? "is-active" : ""}
>
ordered list
Ordered list
</button>
<button
on:click={() => editor.chain().focus().toggleCodeBlock().run()}
class={editor.isActive("codeBlock") ? "is-active" : ""}
>
code block
Code block
</button>
<button
on:click={() => editor.chain().focus().toggleBlockquote().run()}
class={editor.isActive("blockquote") ? "is-active" : ""}
>
blockquote
Blockquote
</button>
<button on:click={() => editor.chain().focus().setHorizontalRule().run()}>
horizontal rule
Horizontal rule
</button>
<button on:click={() => editor.chain().focus().setHardBreak().run()}> hard break </button>
<button on:click={() => editor.chain().focus().setHardBreak().run()}>Hard break</button>
<button
on:click={() => editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
>
undo
Undo
</button>
<button
on:click={() => editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()}
>
redo
Redo
</button>
<button
on:click={() => editor.chain().focus().setColor('#958DF1').run()}
class={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
>
Purple
</button>
</div>
</div>

107
demos/src/Examples/Default/Svelte/styles.scss
View File

@ -1,56 +1,91 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

52
demos/src/Examples/Default/Vue/index.spec.js
View File

@ -21,15 +21,15 @@ context('/src/Examples/Default/Vue/', () => {
})
const buttonMarks = [
{ label: 'bold', tag: 'strong' },
{ label: 'italic', tag: 'em' },
{ label: 'strike', tag: 's' },
{ label: 'Bold', tag: 'strong' },
{ label: 'Italic', tag: 'em' },
{ label: 'Strike', tag: 's' },
]
buttonMarks.forEach(m => {
it(`should apply ${m.label} when the button is pressed`, () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains(m.label).click()
cy.get(`.tiptap ${m.tag}`).should('exist').should('have.text', 'Hello world')
@ -38,40 +38,40 @@ context('/src/Examples/Default/Vue/', () => {
it('should clear marks when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}')
cy.get('button').contains('bold').click()
cy.get('button').contains('Bold').click()
cy.get('.tiptap strong').should('exist').should('have.text', 'Hello world')
cy.get('button').contains('clear marks').click()
cy.get('button').contains('Clear marks').click()
cy.get('.tiptap strong').should('not.exist')
})
it('should clear nodes when the button is pressed', () => {
cy.get('.tiptap').type('{selectall}Hello world')
cy.get('button').contains('bullet list').click()
cy.get('button').contains('Bullet list').click()
cy.get('.tiptap ul').should('exist').should('have.text', 'Hello world')
cy.get('.tiptap').type('{enter}A second item{enter}A third item{selectall}')
cy.get('button').contains('clear nodes').click()
cy.get('button').contains('Clear nodes').click()
cy.get('.tiptap ul').should('not.exist')
cy.get('.tiptap p').should('have.length', 3)
})
const buttonNodes = [
{ label: 'h1', tag: 'h1' },
{ label: 'h2', tag: 'h2' },
{ label: 'h3', tag: 'h3' },
{ label: 'h4', tag: 'h4' },
{ label: 'h5', tag: 'h5' },
{ label: 'h6', tag: 'h6' },
{ label: 'bullet list', tag: 'ul' },
{ label: 'ordered list', tag: 'ol' },
{ label: 'code block', tag: 'pre code' },
{ label: 'blockquote', tag: 'blockquote' },
{ label: 'H1', tag: 'h1' },
{ label: 'H2', tag: 'h2' },
{ label: 'H3', tag: 'h3' },
{ label: 'H4', tag: 'h4' },
{ label: 'H5', tag: 'h5' },
{ label: 'H6', tag: 'h6' },
{ label: 'Bullet list', tag: 'ul' },
{ label: 'Ordered list', tag: 'ol' },
{ label: 'Code block', tag: 'pre code' },
{ label: 'Blockquote', tag: 'blockquote' },
]
buttonNodes.forEach(n => {
it(`should set ${n.label} when the button is pressed`, () => {
cy.get('button').contains('paragraph').click()
cy.get('button').contains('Paragraph').click()
cy.get('.tiptap').type('{selectall}Hello world{selectall}')
cy.get('button').contains(n.label).click()
@ -83,35 +83,35 @@ context('/src/Examples/Default/Vue/', () => {
it('should add a hr when on the same line as a node', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a hr when on a new line', () => {
cy.get('.tiptap').type('{rightArrow}{enter}')
cy.get('button').contains('horizontal rule').click()
cy.get('button').contains('Horizontal rule').click()
cy.get('.tiptap hr').should('exist')
cy.get('.tiptap h1').should('exist')
})
it('should add a br', () => {
cy.get('.tiptap').type('{rightArrow}')
cy.get('button').contains('hard break').click()
cy.get('button').contains('Hard break').click()
cy.get('.tiptap h1 br').should('exist')
})
it('should undo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
})
it('should redo', () => {
cy.get('.tiptap').type('{selectall}{backspace}')
cy.get('button').contains('undo').click()
cy.get('button').contains('Undo').click()
cy.get('.tiptap').should('contain', 'Hello world')
cy.get('button').contains('redo').click()
cy.get('button').contains('Redo').click()
cy.get('.tiptap').should('not.contain', 'Hello world')
})
})

213
demos/src/Examples/Default/Vue/index.vue
View File

@ -1,73 +1,83 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()">
redo
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="editor.chain().focus().toggleBold().run()" :disabled="!editor.can().chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :disabled="!editor.can().chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :disabled="!editor.can().chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
Strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :disabled="!editor.can().chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
Code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
Clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
Clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
Paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
H1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
H2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
H3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
H4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
H5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
H6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
Bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
Ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
Code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
Blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
Horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
Hard break
</button>
<button @click="editor.chain().focus().undo().run()" :disabled="!editor.can().chain().focus().undo().run()">
Undo
</button>
<button @click="editor.chain().focus().redo().run()" :disabled="!editor.can().chain().focus().redo().run()">
Redo
</button>
<button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' }) }">
Purple
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import StarterKit from '@tiptap/starter-kit'
import { Editor, EditorContent } from '@tiptap/vue-3'
@ -85,6 +95,8 @@ export default {
mounted() {
this.editor = new Editor({
extensions: [
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure({ types: [ListItem.name] }),
StarterKit,
],
content: `
@ -92,7 +104,7 @@ export default {
Hi there,
</h2>
<p>
this is a <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:
this is a <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>
@ -129,15 +141,23 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -145,41 +165,68 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
img {
max-width: 100%;
height: auto;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

48
demos/src/Examples/Drawing/Vue/Component.vue
View File

@ -1,27 +1,31 @@
<template>
<node-view-wrapper class="draw">
<input type="color" v-model="color">
<input
type="number"
min="1"
max="10"
v-model="size"
>
<button @click="clear">
clear
</button>
<svg viewBox="0 0 500 250" ref="canvas">
<template v-for="item in node.attrs.lines">
<path
v-if="item.id !== id"
:key="item.id"
:d="item.path"
:id="`id-${item.id}`"
:stroke="item.color"
:stroke-width="item.size"
/>
</template>
</svg>
<div class="control-group">
<div class="button-group">
<input type="color" v-model="color">
<input
type="number"
min="1"
max="10"
v-model="size"
>
<button @click="clear">
Clear
</button>
</div>
<svg viewBox="0 0 500 250" ref="canvas">
<template v-for="item in node.attrs.lines">
<path
v-if="item.id !== id"
:key="item.id"
:d="item.path"
:id="`id-${item.id}`"
:stroke="item.color"
:stroke-width="item.size"
/>
</template>
</svg>
</div>
</node-view-wrapper>
</template>

82
demos/src/Examples/Formatting/React/index.jsx
View File

@ -12,44 +12,46 @@ const MenuBar = ({ editor }) => {
}
return (
<>
<button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}>
h1
</button>
<button onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}>
h2
</button>
<button onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}>
h3
</button>
<button onClick={() => editor.chain().focus().setParagraph().run()} className={editor.isActive('paragraph') ? 'is-active' : ''}>
paragraph
</button>
<button onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'is-active' : ''}>
bold
</button>
<button onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'is-active' : ''}>
italic
</button>
<button onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive('strike') ? 'is-active' : ''}>
strike
</button>
<button onClick={() => editor.chain().focus().toggleHighlight().run()} className={editor.isActive('highlight') ? 'is-active' : ''}>
highlight
</button>
<button onClick={() => editor.chain().focus().setTextAlign('left').run()} className={editor.isActive({ textAlign: 'left' }) ? 'is-active' : ''}>
left
</button>
<button onClick={() => editor.chain().focus().setTextAlign('center').run()} className={editor.isActive({ textAlign: 'center' }) ? 'is-active' : ''}>
center
</button>
<button onClick={() => editor.chain().focus().setTextAlign('right').run()} className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}>
right
</button>
<button onClick={() => editor.chain().focus().setTextAlign('justify').run()} className={editor.isActive({ textAlign: 'justify' }) ? 'is-active' : ''}>
justify
</button>
</>
<div className="control-group">
<div className="button-group">
<button onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}>
H1
</button>
<button onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}>
H2
</button>
<button onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}>
H3
</button>
<button onClick={() => editor.chain().focus().setParagraph().run()} className={editor.isActive('paragraph') ? 'is-active' : ''}>
Paragraph
</button>
<button onClick={() => editor.chain().focus().toggleBold().run()} className={editor.isActive('bold') ? 'is-active' : ''}>
Bold
</button>
<button onClick={() => editor.chain().focus().toggleItalic().run()} className={editor.isActive('italic') ? 'is-active' : ''}>
Italic
</button>
<button onClick={() => editor.chain().focus().toggleStrike().run()} className={editor.isActive('strike') ? 'is-active' : ''}>
Strike
</button>
<button onClick={() => editor.chain().focus().toggleHighlight().run()} className={editor.isActive('highlight') ? 'is-active' : ''}>
Highlight
</button>
<button onClick={() => editor.chain().focus().setTextAlign('left').run()} className={editor.isActive({ textAlign: 'left' }) ? 'is-active' : ''}>
Left
</button>
<button onClick={() => editor.chain().focus().setTextAlign('center').run()} className={editor.isActive({ textAlign: 'center' }) ? 'is-active' : ''}>
Center
</button>
<button onClick={() => editor.chain().focus().setTextAlign('right').run()} className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}>
Right
</button>
<button onClick={() => editor.chain().focus().setTextAlign('justify').run()} className={editor.isActive({ textAlign: 'justify' }) ? 'is-active' : ''}>
Justify
</button>
</div>
</div>
)
}
@ -91,9 +93,9 @@ export default () => {
})
return (
<div>
<>
<MenuBar editor={editor} />
<EditorContent editor={editor} />
</div>
</>
)
}

10
demos/src/Examples/Formatting/React/index.spec.js
View File

@ -8,7 +8,7 @@ context('/src/Examples/Formatting/React/', () => {
})
const marks = [
{ label: 'highlight', mark: 'mark' },
{ label: 'Highlight', mark: 'mark' },
]
marks.forEach(m => {
@ -20,10 +20,10 @@ context('/src/Examples/Formatting/React/', () => {
})
const alignments = [
{ label: 'left', alignment: 'left' },
{ label: 'center', alignment: 'center' },
{ label: 'right', alignment: 'right' },
{ label: 'justify', alignment: 'justify' },
{ label: 'Left', alignment: 'left' },
{ label: 'Center', alignment: 'center' },
{ label: 'Right', alignment: 'right' },
{ label: 'Justify', alignment: 'justify' },
]
alignments.forEach(a => {

86
demos/src/Examples/Formatting/React/styles.scss
View File

@ -1,62 +1,98 @@
/* Basic editor styles */
.tiptap {
margin-top: 1rem;
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
h1,
h2,
h3,
h4,
h5,
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
mark {
background-color: #FAF594;
}
img {
max-width: 100%;
height: auto;
border-radius: 0.4rem;
box-decoration-break: clone;
padding: 0.1rem 0.3rem;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

10
demos/src/Examples/Formatting/Vue/index.spec.js
View File

@ -8,7 +8,7 @@ context('/src/Examples/Formatting/Vue/', () => {
})
const marks = [
{ label: 'highlight', mark: 'mark' },
{ label: 'Highlight', mark: 'mark' },
]
marks.forEach(m => {
@ -20,10 +20,10 @@ context('/src/Examples/Formatting/Vue/', () => {
})
const alignments = [
{ label: 'left', alignment: 'left' },
{ label: 'center', alignment: 'center' },
{ label: 'right', alignment: 'right' },
{ label: 'justify', alignment: 'justify' },
{ label: 'Left', alignment: 'left' },
{ label: 'Center', alignment: 'center' },
{ label: 'Right', alignment: 'right' },
{ label: 'Justify', alignment: 'justify' },
]
alignments.forEach(a => {

154
demos/src/Examples/Formatting/Vue/index.vue
View File

@ -1,43 +1,47 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
highlight
</button>
<button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
left
</button>
<button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
center
</button>
<button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
right
</button>
<button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
justify
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
H1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
H2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
H3
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
Paragraph
</button>
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
Strike
</button>
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
Highlight
</button>
<button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
Left
</button>
<button @click="editor.chain().focus().setTextAlign('center').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }">
Center
</button>
<button @click="editor.chain().focus().setTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
Right
</button>
<button @click="editor.chain().focus().setTextAlign('justify').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'justify' }) }">
Justify
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>
@ -104,17 +108,23 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
margin-top: 1rem;
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -122,45 +132,75 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
mark {
background-color: #FAF594;
}
img {
max-width: 100%;
height: auto;
border-radius: 0.4rem;
box-decoration-break: clone;
padding: 0.1rem 0.3rem;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

10
demos/src/Examples/Images/React/index.jsx
View File

@ -37,9 +37,13 @@ export default () => {
}
return (
<div>
<button onClick={addImage}>add image from URL</button>
<>
<div className="control-group">
<div className="button-group">
<button onClick={addImage}>Add image from URL</button>
</div>
</div>
<EditorContent editor={editor} />
</div>
</>
)
}

2
demos/src/Examples/Images/React/index.spec.js
View File

@ -19,7 +19,7 @@ context('/src/Examples/Images/React/', () => {
cy.stub(win, 'prompt').returns('https://placehold.co/400x400')
cy.wait(1000)
cy.get('button').contains('add image from URL').click({ force: false })
cy.get('button').contains('Add image from URL').click({ force: false })
cy.wait(1000)
cy.get('.tiptap img').should('have.length', 3)
})

10
demos/src/Examples/Images/React/styles.scss
View File

@ -1,15 +1,17 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 1.5rem 0;
max-width: 100%;
&.ProseMirror-selectednode {
outline: 3px solid #68CEF8;
outline: 3px solid var(--purple);
}
}
}

2
demos/src/Examples/Images/Vue/index.spec.js
View File

@ -20,7 +20,7 @@ context('/src/Examples/Images/Vue/', () => {
cy.stub(win, 'prompt').returns('https://placehold.co/400x400')
cy.wait(1000)
cy.get('button').contains('add image from URL').click({ force: false })
cy.get('button').contains('Add image from URL').click({ force: false })
cy.wait(1000)
cy.get('.tiptap img').should('have.length', 3)
})

20
demos/src/Examples/Images/Vue/index.vue
View File

@ -1,8 +1,12 @@
<template>
<div v-if="editor">
<button @click="addImage">add image from URL</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="addImage">Add image from URL</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>
@ -60,16 +64,18 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 1.5rem 0;
max-width: 100%;
&.ProseMirror-selectednode {
outline: 3px solid #68CEF8;
outline: 3px solid var(--purple);
}
}
}

2
demos/src/Examples/InteractivityComponent/React/Component.jsx
View File

@ -10,7 +10,7 @@ export default props => {
return (
<NodeViewWrapper className="react-component">
<span className="label">React Component</span>
<label>React Component</label>
<div className="content">
<button onClick={increase}>

141
demos/src/Examples/InteractivityComponent/React/styles.scss
View File

@ -1,33 +1,116 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
}
}
.react-component {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
/* React component */
.react-component {
background-color: var(--purple-light);
border: 2px solid var(--purple);
border-radius: 0.5rem;
margin: 2rem 0;
position: relative;
label {
background-color: var(--purple);
border-radius: 0 0 0.5rem 0;
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
padding: 0.25rem 0.5rem;
position: absolute;
top: 0;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
}
}
}

48
demos/src/Examples/InteractivityComponent/Vue/Component.vue
View File

@ -1,6 +1,6 @@
<template>
<node-view-wrapper class="vue-component">
<span class="label">Vue Component</span>
<label>Vue Component</label>
<div class="content">
<button @click="increase">This button has been clicked {{ node.attrs.count }} times.</button>
@ -29,30 +29,30 @@ export default {
</script>
<style lang="scss">
.vue-component {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
}
.tiptap {
/* Vue component */
.vue-component {
background-color: var(--purple-light);
border: 2px solid var(--purple);
border-radius: 0.5rem;
margin: 2rem 0;
position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
label {
background-color: var(--purple);
border-radius: 0 0 0.5rem 0;
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
padding: 0.25rem 0.5rem;
position: absolute;
top: 0;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
.content {
margin-top: 1.5rem;
padding: 1rem;
}
}
}
</style>

89
demos/src/Examples/InteractivityComponent/Vue/index.vue
View File

@ -46,8 +46,93 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
</style>

6
demos/src/Examples/InteractivityComponentContent/React/Component.jsx
View File

@ -3,10 +3,10 @@ import React from 'react'
export default () => {
return (
<NodeViewWrapper className="react-component-with-content">
<span className="label" contentEditable={false}>React Component</span>
<NodeViewWrapper className="react-component">
<label contentEditable={false}>React Component</label>
<NodeViewContent className="content" />
<NodeViewContent className="content is-editable" />
</NodeViewWrapper>
)
}

12
demos/src/Examples/InteractivityComponentContent/React/index.spec.js
View File

@ -11,12 +11,12 @@ context('/src/Examples/InteractivityComponentContent/React/', () => {
})
it('should render a custom node', () => {
cy.get('.ProseMirror .react-component-with-content')
cy.get('.ProseMirror .react-component')
.should('have.length', 1)
})
it('should allow text editing inside component', () => {
cy.get('.ProseMirror .react-component-with-content .content div')
cy.get('.ProseMirror .react-component .content div')
.invoke('attr', 'contentEditable', true)
.invoke('text', '')
.type('Hello World!')
@ -24,24 +24,24 @@ context('/src/Examples/InteractivityComponentContent/React/', () => {
})
it('should allow text editing inside component with markdown text', () => {
cy.get('.ProseMirror .react-component-with-content .content div')
cy.get('.ProseMirror .react-component .content div')
.invoke('attr', 'contentEditable', true)
.invoke('text', '')
.type('Hello World! This is **bold**.')
.should('have.text', 'Hello World! This is bold.')
cy.get('.ProseMirror .react-component-with-content .content strong')
cy.get('.ProseMirror .react-component .content strong')
.should('exist')
})
it('should remove node via selectall', () => {
cy.get('.ProseMirror .react-component-with-content')
cy.get('.ProseMirror .react-component')
.should('have.length', 1)
cy.get('.ProseMirror')
.type('{selectall}{backspace}')
cy.get('.ProseMirror .react-component-with-content')
cy.get('.ProseMirror .react-component')
.should('have.length', 0)
})
})

145
demos/src/Examples/InteractivityComponentContent/React/styles.scss
View File

@ -1,36 +1,123 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
}
}
.react-component-with-content {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
:first-child {
margin-top: 0;
}
.content {
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
/* React component */
.react-component {
background-color: var(--purple-light);
border: 2px solid var(--purple);
border-radius: 0.5rem;
margin: 2rem 0;
position: relative;
label {
background-color: var(--purple);
border-radius: 0 0 0.5rem 0;
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
padding: 0.25rem 0.5rem;
position: absolute;
top: 0;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
&.is-editable {
border: 2px dashed var(--gray-3);
border-radius: 0.5rem;
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
}
}
}
}

59
demos/src/Examples/InteractivityComponentContent/Vue/Component.vue
View File

@ -1,7 +1,7 @@
<template>
<node-view-wrapper class="vue-component">
<span class="label" contenteditable="false">Vue Component</span>
<node-view-content class="content" />
<label contenteditable="false">Vue Component</label>
<node-view-content class="content is-editable" />
</node-view-wrapper>
</template>
@ -19,32 +19,37 @@ export default {
</script>
<style lang="scss">
.vue-component {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
}
.tiptap {
/* Vue component */
.vue-component {
background-color: var(--purple-light);
border: 2px solid var(--purple);
border-radius: 0.5rem;
margin: 2rem 0;
position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
label {
background-color: var(--purple);
border-radius: 0 0 0.5rem 0;
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
padding: 0.25rem 0.5rem;
position: absolute;
top: 0;
}
.content {
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
border-radius: 0.5rem;
.content {
margin-top: 1.5rem;
padding: 1rem;
&.is-editable {
border: 2px dashed var(--gray-3);
border-radius: 0.5rem;
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
}
}
}
}
</style>

89
demos/src/Examples/InteractivityComponentContent/Vue/index.vue
View File

@ -48,8 +48,93 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
</style>

2
demos/src/Examples/MarkdownShortcuts/React/index.jsx
View File

@ -21,7 +21,7 @@ export default () => {
To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
</p>
<p>
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
Those conventions are called input rules in Tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
</p>
<p>
You can overwrite existing input rules or add your own to nodes, marks and extensions.

119
demos/src/Examples/MarkdownShortcuts/React/styles.scss
View File

@ -1,53 +1,98 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
hr {
margin: 1rem 0;
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
mark {
background-color: #FAF594;
border-radius: 0.4rem;
box-decoration-break: clone;
padding: 0.1rem 0.3rem;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}

82
demos/src/Examples/MarkdownShortcuts/Vue/index.vue
View File

@ -34,7 +34,7 @@ export default {
To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
</p>
<p>
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
Those conventions are called input rules in Tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
</p>
<p>
You can overwrite existing input rules or add your own to nodes, marks and extensions.
@ -55,15 +55,23 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -71,40 +79,76 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
img {
max-width: 100%;
height: auto;
}
hr {
margin: 1rem 0;
mark {
background-color: #FAF594;
border-radius: 0.4rem;
box-decoration-break: clone;
padding: 0.1rem 0.3rem;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
</style>

2
demos/src/Examples/Menus/React/index.jsx
View File

@ -64,7 +64,7 @@ export default () => {
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
Bullet List
Bullet list
</button>
</FloatingMenu>}

139
demos/src/Examples/Menus/React/styles.scss
View File

@ -1,53 +1,144 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
/* Bubble menu */
.bubble-menu {
background-color: var(--white);
border: 1px solid var(--gray-1);
border-radius: 0.7rem;
box-shadow: var(--shadow);
display: flex;
background-color: #0D0D0D;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
color: #FFF;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
background-color: unset;
&:hover {
background-color: var(--gray-3);
}
&:hover,
&.is-active {
opacity: 1;
background-color: var(--purple);
&:hover {
background-color: var(--purple-contrast);
}
}
}
}
/* Floating menu */
.floating-menu {
display: flex;
background-color: #0D0D0D10;
padding: 0.2rem;
background-color: var(--gray-3);
padding: 0.1rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
background-color: unset;
padding: 0.275rem 0.425rem;
border-radius: 0.3rem;
&:hover {
background-color: var(--gray-3);
}
&:hover,
&.is-active {
opacity: 1;
background-color: var(--white);
color: var(--purple);
&:hover {
color: var(--purple-contrast);
}
}
}
}

135
demos/src/Examples/Menus/Vue/index.vue
View File

@ -28,7 +28,7 @@
H2
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
Bullet List
Bullet list
</button>
</floating-menu>
</div>
@ -83,60 +83,145 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
/* Bubble menu */
.bubble-menu {
background-color: var(--white);
border: 1px solid var(--gray-1);
border-radius: 0.7rem;
box-shadow: var(--shadow);
display: flex;
background-color: #0D0D0D;
padding: 0.2rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
color: #FFF;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
background-color: unset;
&:hover {
background-color: var(--gray-3);
}
&:hover,
&.is-active {
opacity: 1;
background-color: var(--purple);
&:hover {
background-color: var(--purple-contrast);
}
}
}
}
/* Floating menu */
.floating-menu {
display: flex;
background-color: #0D0D0D10;
padding: 0.2rem;
background-color: var(--gray-3);
padding: 0.1rem;
border-radius: 0.5rem;
button {
border: none;
background: none;
font-size: 0.85rem;
font-weight: 500;
padding: 0 0.2rem;
opacity: 0.6;
background-color: unset;
padding: 0.275rem 0.425rem;
border-radius: 0.3rem;
&:hover {
background-color: var(--gray-3);
}
&:hover,
&.is-active {
opacity: 1;
background-color: var(--white);
color: var(--purple);
&:hover {
color: var(--purple-contrast);
}
}
}
}

2
demos/src/Examples/Minimal/React/index.jsx
View File

@ -15,7 +15,7 @@ export default () => {
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.

4
demos/src/Examples/Minimal/React/styles.scss
View File

@ -1,6 +1,6 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
}

6
demos/src/Examples/Minimal/Vue/index.vue
View File

@ -28,7 +28,7 @@ export default {
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@ -46,8 +46,8 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
}
</style>

68
demos/src/Examples/NodePos/React/index.jsx
View File

@ -18,7 +18,7 @@ export default () => {
<p>
This is a <strong>simple</strong> paragraph.
</p>
<img src="https://unsplash.it/200/200" alt="A 200x200 square thumbnail from unsplash." />
<img src="https://placehold.co/200x200" alt="A 200x200 square thumbnail from placehold.co." />
<p>
Here is another paragraph inside this document.
</p>
@ -72,11 +72,11 @@ export default () => {
<blockquote>
<p>Here we have another paragraph inside a blockquote.</p>
<blockquote>
<img src="https://unsplash.it/260/200" alt="A 260x200 landscape thumbnail from unsplash." />
<img src="https://unsplash.it/100/200" alt="A 100x200 portrait thumbnail from unsplash." />
<img src="https://placehold.co/260x200" alt="A 260x200 landscape thumbnail from placehold.co." />
<img src="https://placehold.co/100x200" alt="A 100x200 portrait thumbnail from placehold.co." />
</blockquote>
</blockquote>
<img src="https://unsplash.it/260/200" alt="A 260x200 landscape thumbnail from unsplash." />
<img src="https://placehold.co/260x200" alt="A 260x200 landscape thumbnail from placehold.co." />
`,
})
@ -160,7 +160,7 @@ export default () => {
}, [editor])
const findSquaredImage = useCallback(() => {
const nodePosition = editor.$doc.querySelector('image', { src: 'https://unsplash.it/200/200' })
const nodePosition = editor.$doc.querySelector('image', { src: 'https://placehold.co/200x200' })
if (!nodePosition) {
setFoundNodes(null)
@ -171,7 +171,7 @@ export default () => {
}, [editor])
const findLandscapeImage = useCallback(() => {
const nodePosition = editor.$doc.querySelector('image', { src: 'https://unsplash.it/260/200' })
const nodePosition = editor.$doc.querySelector('image', { src: 'https://placehold.co/260x200' })
if (!nodePosition) {
setFoundNodes(null)
@ -182,7 +182,7 @@ export default () => {
}, [editor])
const findAllLandscapeImages = useCallback(() => {
const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://unsplash.it/260/200' })
const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://placehold.co/260x200' })
if (!nodePosition) {
setFoundNodes(null)
@ -193,7 +193,7 @@ export default () => {
}, [editor])
const findFirstLandscapeImageWithAllQuery = useCallback(() => {
const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://unsplash.it/260/200' }, true)
const nodePosition = editor.$doc.querySelectorAll('image', { src: 'https://placehold.co/260x200' }, true)
if (!nodePosition) {
setFoundNodes(null)
@ -204,7 +204,7 @@ export default () => {
}, [editor])
const findPortraitImageInBlockquote = useCallback(() => {
const nodePosition = editor.$doc.querySelector('image', { src: 'https://unsplash.it/100/200' })
const nodePosition = editor.$doc.querySelector('image', { src: 'https://placehold.co/100x200' })
if (!nodePosition) {
setFoundNodes(null)
@ -259,33 +259,35 @@ export default () => {
}, [editor])
return (
<div>
<div>
<button data-testid="find-paragraphs" onClick={findParagraphs}>Find paragraphs</button>
<button data-testid="find-listitems" onClick={findListItems}>Find list items</button>
<button data-testid="find-bulletlists" onClick={findBulletList}>Find bullet lists</button>
<button data-testid="find-orderedlists" onClick={findOrderedList}>Find ordered lists</button>
<button data-testid="find-blockquotes" onClick={findBlockquote}>Find blockquotes</button>
<button data-testid="find-images" onClick={findImages}>Find images</button>
</div>
<div>
<button data-testid="find-first-blockquote" onClick={findFirstBlockquote}>Find first blockquote</button>
<button data-testid="find-squared-image" onClick={findSquaredImage}>Find squared image</button>
<button data-testid="find-landscape-image" onClick={findLandscapeImage}>Find landscape image</button>
<button data-testid="find-all-landscape-images" onClick={findAllLandscapeImages}>Find all landscape images</button>
<button data-testid="find-first-landscape-image-with-all-query" onClick={findFirstLandscapeImageWithAllQuery}>Find first landscape image with all query</button>
<button data-testid="find-portrait-image-inside-blockquote" onClick={findPortraitImageInBlockquote}>Find portrait image in blockquote</button>
</div>
<div>
<button data-testid="find-first-node" onClick={findFirstNode}>Find first node</button>
<button data-testid="find-last-node" onClick={findLastNode}>Find last node</button>
<button data-testid="find-last-node-of-first-bullet-list" onClick={findLastNodeOfFirstBulletList}>Find last node of first bullet list</button>
<button data-testid="find-nonexistent-node" onClick={findNonexistentNode}>Find nonexistent node</button>
<>
<div className="control-group">
<div className="button-group">
<button data-testid="find-paragraphs" onClick={findParagraphs}>Find paragraphs</button>
<button data-testid="find-listitems" onClick={findListItems}>Find list items</button>
<button data-testid="find-bulletlists" onClick={findBulletList}>Find bullet lists</button>
<button data-testid="find-orderedlists" onClick={findOrderedList}>Find ordered lists</button>
<button data-testid="find-blockquotes" onClick={findBlockquote}>Find blockquotes</button>
<button data-testid="find-images" onClick={findImages}>Find images</button>
</div>
<div className="button-group">
<button data-testid="find-first-blockquote" onClick={findFirstBlockquote}>Find first blockquote</button>
<button data-testid="find-squared-image" onClick={findSquaredImage}>Find squared image</button>
<button data-testid="find-landscape-image" onClick={findLandscapeImage}>Find landscape image</button>
<button data-testid="find-all-landscape-images" onClick={findAllLandscapeImages}>Find all landscape images</button>
<button data-testid="find-first-landscape-image-with-all-query" onClick={findFirstLandscapeImageWithAllQuery}>Find first landscape image with all query</button>
<button data-testid="find-portrait-image-inside-blockquote" onClick={findPortraitImageInBlockquote}>Find portrait image in blockquote</button>
</div>
<div className="button-group">
<button data-testid="find-first-node" onClick={findFirstNode}>Find first node</button>
<button data-testid="find-last-node" onClick={findLastNode}>Find last node</button>
<button data-testid="find-last-node-of-first-bullet-list" onClick={findLastNodeOfFirstBulletList}>Find last node of first bullet list</button>
<button data-testid="find-nonexistent-node" onClick={findNonexistentNode}>Find nonexistent node</button>
</div>
</div>
<EditorContent editor={editor} />
{foundNodes ? <div data-testid="found-nodes">{foundNodes.map(n => (
{foundNodes ? <div className="output-group" data-testid="found-nodes">{foundNodes.map(n => (
<div data-testid="found-node" key={n.pos}>{mapNodePosToString(n)}</div>
))}</div> : ''}
</div>
</>
)
}

12
demos/src/Examples/NodePos/React/index.spec.js
View File

@ -66,7 +66,7 @@ context('/src/Examples/NodePos/React/', () => {
cy.get('button[data-testid="find-squared-image"]').click()
cy.get('div[data-testid="found-nodes"]').should('exist')
cy.get('div[data-testid="found-node"]').should('have.length', 1)
cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/200/200')
cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/200x200')
})
})
@ -75,7 +75,7 @@ context('/src/Examples/NodePos/React/', () => {
cy.get('button[data-testid="find-landscape-image"]').click()
cy.get('div[data-testid="found-nodes"]').should('exist')
cy.get('div[data-testid="found-node"]').should('have.length', 1)
cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/260/200')
cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/260x200')
})
})
@ -84,8 +84,8 @@ context('/src/Examples/NodePos/React/', () => {
cy.get('button[data-testid="find-all-landscape-images"]').click()
cy.get('div[data-testid="found-nodes"]').should('exist')
cy.get('div[data-testid="found-node"]').should('have.length', 2)
cy.get('div[data-testid="found-node"]').eq(0).should('contain', 'https://unsplash.it/260/200')
cy.get('div[data-testid="found-node"]').eq(1).should('contain', 'https://unsplash.it/260/200')
cy.get('div[data-testid="found-node"]').eq(0).should('contain', 'https://placehold.co/260x200')
cy.get('div[data-testid="found-node"]').eq(1).should('contain', 'https://placehold.co/260x200')
})
})
@ -94,7 +94,7 @@ context('/src/Examples/NodePos/React/', () => {
cy.get('button[data-testid="find-first-landscape-image-with-all-query"]').click()
cy.get('div[data-testid="found-nodes"]').should('exist')
cy.get('div[data-testid="found-node"]').should('have.length', 1)
cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/260/200')
cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/260x200')
})
})
@ -103,7 +103,7 @@ context('/src/Examples/NodePos/React/', () => {
cy.get('button[data-testid="find-portrait-image-inside-blockquote"]').click()
cy.get('div[data-testid="found-nodes"]').should('exist')
cy.get('div[data-testid="found-node"]').should('have.length', 1)
cy.get('div[data-testid="found-node"]').should('contain', 'https://unsplash.it/100/200')
cy.get('div[data-testid="found-node"]').should('contain', 'https://placehold.co/100x200')
})
})
})

102
demos/src/Examples/NodePos/React/styles.scss
View File

@ -1,15 +1,103 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
/* Image styles */
img {
display: block;
height: auto;
margin: 1.5rem 0;
max-width: 100%;
&.ProseMirror-selectednode {
outline: 3px solid var(--purple);
}
}
}

2
demos/src/Examples/Savvy/React/index.jsx
View File

@ -24,7 +24,7 @@ export default () => {
],
content: `
<p>
→ With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
→ With the Typography extension, Tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
</p>
<p>
Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:

57
demos/src/Examples/Savvy/React/styles.scss
View File

@ -1,38 +1,33 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
:first-child {
margin-top: 0;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
}
/* Color swatches */
.color {
white-space: nowrap;
&::before {
background-color: var(--color);
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 2px;
content: " ";
display: inline-block;
height: 1em;
margin-bottom: 0.15em;
margin-right: 0.1em;
vertical-align: middle;
width: 1em;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
/* Color swatches */
.color {
white-space: nowrap;
&::before {
background-color: var(--color);
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 2px;
content: " ";
display: inline-block;
height: 1em;
margin-bottom: 0.15em;
margin-right: 0.1em;
vertical-align: middle;
width: 1em;
}
}
}

53
demos/src/Examples/Savvy/Vue/index.vue
View File

@ -37,7 +37,7 @@ export default {
],
content: `
<p>
→ With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
→ With the Typography extension, Tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
</p>
<p>
Try it out and type <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
@ -64,40 +64,35 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
:first-child {
margin-top: 0;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
}
/* Color swatches */
.color {
white-space: nowrap;
/* Color swatches */
.color {
white-space: nowrap;
&::before {
content: ' ';
display: inline-block;
width: 1em;
height: 1em;
border: 1px solid rgba(128, 128, 128, 0.3);
vertical-align: middle;
margin-right: 0.1em;
margin-bottom: 0.15em;
border-radius: 2px;
background-color: var(--color);
&::before {
background-color: var(--color);
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 2px;
content: " ";
display: inline-block;
height: 1em;
margin-bottom: 0.15em;
margin-right: 0.1em;
vertical-align: middle;
width: 1em;
}
}
}
</style>

154
demos/src/Examples/Tables/React/index.jsx
View File

@ -60,69 +60,71 @@ const MenuBar = ({ editor }) => {
}
return (
<>
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
insertTable
</button>
<button onClick={() => editor.chain().focus().insertContent(tableHTML, {
parseOptions: {
preserveWhitespace: false,
},
}).run()}>
insertHTMLTable
</button>
<button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
addColumnBefore
</button>
<button onClick={() => editor.chain().focus().addColumnAfter().run()} disabled={!editor.can().addColumnAfter()}>
addColumnAfter
</button>
<button onClick={() => editor.chain().focus().deleteColumn().run()} disabled={!editor.can().deleteColumn()}>
deleteColumn
</button>
<button onClick={() => editor.chain().focus().addRowBefore().run()} disabled={!editor.can().addRowBefore()}>
addRowBefore
</button>
<button onClick={() => editor.chain().focus().addRowAfter().run()} disabled={!editor.can().addRowAfter()}>
addRowAfter
</button>
<button onClick={() => editor.chain().focus().deleteRow().run()} disabled={!editor.can().deleteRow()}>
deleteRow
</button>
<button onClick={() => editor.chain().focus().deleteTable().run()} disabled={!editor.can().deleteTable()}>
deleteTable
</button>
<button onClick={() => editor.chain().focus().mergeCells().run()} disabled={!editor.can().mergeCells()}>
mergeCells
</button>
<button onClick={() => editor.chain().focus().splitCell().run()} disabled={!editor.can().splitCell()}>
splitCell
</button>
<button onClick={() => editor.chain().focus().toggleHeaderColumn().run()} disabled={!editor.can().toggleHeaderColumn()}>
toggleHeaderColumn
</button>
<button onClick={() => editor.chain().focus().toggleHeaderRow().run()} disabled={!editor.can().toggleHeaderRow()}>
toggleHeaderRow
</button>
<button onClick={() => editor.chain().focus().toggleHeaderCell().run()} disabled={!editor.can().toggleHeaderCell()}>
toggleHeaderCell
</button>
<button onClick={() => editor.chain().focus().mergeOrSplit().run()} disabled={!editor.can().mergeOrSplit()}>
mergeOrSplit
</button>
<button onClick={() => editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()} disabled={!editor.can().setCellAttribute('backgroundColor', '#FAF594')}>
setCellAttribute
</button>
<button onClick={() => editor.chain().focus().fixTables().run()} disabled={!editor.can().fixTables()}>
fixTables
</button>
<button onClick={() => editor.chain().focus().goToNextCell().run()} disabled={!editor.can().goToNextCell()}>
goToNextCell
</button>
<button onClick={() => editor.chain().focus().goToPreviousCell().run()} disabled={!editor.can().goToPreviousCell()}>
goToPreviousCell
</button>
</>
<div className="control-group">
<div className="button-group">
<button onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}>
Insert table
</button>
<button onClick={() => editor.chain().focus().insertContent(tableHTML, {
parseOptions: {
preserveWhitespace: false,
},
}).run()}>
Insert HTML table
</button>
<button onClick={() => editor.chain().focus().addColumnBefore().run()} disabled={!editor.can().addColumnBefore()}>
Add column before
</button>
<button onClick={() => editor.chain().focus().addColumnAfter().run()} disabled={!editor.can().addColumnAfter()}>
Add column after
</button>
<button onClick={() => editor.chain().focus().deleteColumn().run()} disabled={!editor.can().deleteColumn()}>
Delete column
</button>
<button onClick={() => editor.chain().focus().addRowBefore().run()} disabled={!editor.can().addRowBefore()}>
Add row before
</button>
<button onClick={() => editor.chain().focus().addRowAfter().run()} disabled={!editor.can().addRowAfter()}>
Add row after
</button>
<button onClick={() => editor.chain().focus().deleteRow().run()} disabled={!editor.can().deleteRow()}>
Delete row
</button>
<button onClick={() => editor.chain().focus().deleteTable().run()} disabled={!editor.can().deleteTable()}>
Delete table
</button>
<button onClick={() => editor.chain().focus().mergeCells().run()} disabled={!editor.can().mergeCells()}>
Merge cells
</button>
<button onClick={() => editor.chain().focus().splitCell().run()} disabled={!editor.can().splitCell()}>
Split cell
</button>
<button onClick={() => editor.chain().focus().toggleHeaderColumn().run()} disabled={!editor.can().toggleHeaderColumn()}>
ToggleHeaderColumn
</button>
<button onClick={() => editor.chain().focus().toggleHeaderRow().run()} disabled={!editor.can().toggleHeaderRow()}>
Toggle header row
</button>
<button onClick={() => editor.chain().focus().toggleHeaderCell().run()} disabled={!editor.can().toggleHeaderCell()}>
Toggle header cell
</button>
<button onClick={() => editor.chain().focus().mergeOrSplit().run()} disabled={!editor.can().mergeOrSplit()}>
Merge or split
</button>
<button onClick={() => editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()} disabled={!editor.can().setCellAttribute('backgroundColor', '#FAF594')}>
Set cell attribute
</button>
<button onClick={() => editor.chain().focus().fixTables().run()} disabled={!editor.can().fixTables()}>
Fix tables
</button>
<button onClick={() => editor.chain().focus().goToNextCell().run()} disabled={!editor.can().goToNextCell()}>
Go to next cell
</button>
<button onClick={() => editor.chain().focus().goToPreviousCell().run()} disabled={!editor.can().goToPreviousCell()}>
Go to previous cell
</button>
</div>
</div>
)
}
@ -145,9 +147,9 @@ export default () => {
Have you seen our tables? They are amazing!
</h3>
<ul>
<li>tables with rows, cells and headers (optional)</li>
<li>support for <code>colgroup</code> and <code>rowspan</code></li>
<li>and even resizable columns (optional)</li>
<li>Tables with rows, cells and headers (optional)</li>
<li>Support for <code>colgroup</code> and <code>rowspan</code></li>
<li>And even resizable columns (optional)</li>
</ul>
<p>
Here is an example:
@ -160,20 +162,20 @@ export default () => {
</tr>
<tr>
<td>Cyndi Lauper</td>
<td>singer</td>
<td>songwriter</td>
<td>actress</td>
<td>Singer</td>
<td>Songwriter</td>
<td>Actress</td>
</tr>
<tr>
<td>Marie Curie</td>
<td>scientist</td>
<td>chemist</td>
<td>physicist</td>
<td>Scientist</td>
<td>Chemist</td>
<td>Physicist</td>
</tr>
<tr>
<td>Indira Gandhi</td>
<td>prime minister</td>
<td colspan="2">politician</td>
<td>Prime minister</td>
<td colspan="2">Politician</td>
</tr>
</tbody>
</table>
@ -181,9 +183,9 @@ export default () => {
})
return (
<div>
<>
<MenuBar editor={editor} />
<EditorContent editor={editor} />
</div>
</>
)
}

32
demos/src/Examples/Tables/React/index.spec.js
View File

@ -6,7 +6,7 @@ context('/src/Examples/Tables/React/', () => {
beforeEach(() => {
cy.get('.tiptap').then(([{ editor }]) => {
editor.commands.clearContent()
cy.get('button').contains('insertTable').click()
cy.get('button').contains('Insert table').click()
})
})
@ -28,15 +28,15 @@ context('/src/Examples/Tables/React/', () => {
})
it('adds & delete columns', () => {
cy.get('button').contains('addColumnBefore').click()
cy.get('button').contains('Add column before').click()
cy.get('.tiptap table th')
.should('have.length', 4)
cy.get('button').contains('addColumnAfter').click()
cy.get('button').contains('Add column after').click()
cy.get('.tiptap table th')
.should('have.length', 5)
cy.get('button').contains('deleteColumn')
cy.get('button').contains('Delete column')
.click()
.click()
cy.get('.tiptap table th')
@ -44,15 +44,15 @@ context('/src/Examples/Tables/React/', () => {
})
it('adds & delete rows', () => {
cy.get('button').contains('addRowBefore').click()
cy.get('button').contains('Add row before').click()
cy.get('.tiptap table tr')
.should('have.length', 4)
cy.get('button').contains('addRowAfter').click()
cy.get('button').contains('Add row after').click()
cy.get('.tiptap table tr')
.should('have.length', 5)
cy.get('button').contains('deleteRow')
cy.get('button').contains('Delete row')
.click()
.click()
cy.get('.tiptap table tr')
@ -60,21 +60,21 @@ context('/src/Examples/Tables/React/', () => {
})
it('should delete table', () => {
cy.get('button').contains('deleteTable').click()
cy.get('button').contains('Delete table').click()
cy.get('.tiptap table').should('not.exist')
})
it('should merge cells', () => {
cy.get('.tiptap').type('{shift}{rightArrow}')
cy.get('button').contains('mergeCells').click()
cy.get('button').contains('Merge cells').click()
cy.get('.tiptap table th').should('have.length', 2)
})
it('should split cells', () => {
cy.get('.tiptap').type('{shift}{rightArrow}')
cy.get('button').contains('mergeCells').click()
cy.get('button').contains('Merge cells').click()
cy.get('.tiptap table th').should('have.length', 2)
cy.get('button').contains('splitCell').click()
cy.get('button').contains('Split cell').click()
cy.get('.tiptap table th').should('have.length', 3)
})
@ -94,11 +94,11 @@ context('/src/Examples/Tables/React/', () => {
it('should merge split', () => {
cy.get('.tiptap').type('{shift}{rightArrow}')
cy.get('button').contains('mergeCells').click()
cy.get('button').contains('Merge cells').click()
cy.get('.tiptap th[colspan="2"]')
.should('exist')
cy.get('button')
.contains('mergeOrSplit')
.contains('Merge or split')
.click()
cy.get('.tiptap th[colspan="2"]')
.should('not.exist')
@ -106,15 +106,15 @@ context('/src/Examples/Tables/React/', () => {
it('should set cell attribute', () => {
cy.get('.tiptap').type('{downArrow}')
cy.get('button').contains('setCellAttribute').click()
cy.get('button').contains('Set cell attribute').click()
cy.get('.tiptap table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
})
it('should move focus to next or prev cell', () => {
cy.get('.tiptap').type('Column 1')
cy.get('button').contains('goToNextCell').click()
cy.get('button').contains('Go to next cell').click()
cy.get('.tiptap').type('Column 2')
cy.get('button').contains('goToPreviousCell').click()
cy.get('button').contains('Go to previous cell').click()
cy.get('.tiptap th').then(elements => {
expect(elements[0].innerText).to.equal('Column 1')

154
demos/src/Examples/Tables/React/styles.scss
View File

@ -1,79 +1,110 @@
/* Basic editor styles */
.tiptap {
margin: 1rem 0;
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
ul,
/* List styles */
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;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
img {
max-width: 100%;
height: auto;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
/* Table-specific styling */
.tiptap {
/* Table-specific styling */
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
td,
th {
min-width: 1em;
border: 2px solid #ced4da;
padding: 3px 5px;
vertical-align: top;
border: 1px solid var(--gray-3);
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
position: relative;
vertical-align: top;
> * {
margin-bottom: 0;
@ -81,37 +112,38 @@
}
th {
background-color: var(--gray-1);
font-weight: bold;
text-align: left;
background-color: #f1f3f5;
}
.selectedCell:after {
z-index: 2;
position: absolute;
background: var(--gray-2);
content: "";
left: 0; right: 0; top: 0; bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
position: absolute;
z-index: 2;
}
.column-resize-handle {
background-color: var(--purple);
bottom: -2px;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 4px;
background-color: #adf;
pointer-events: none;
}
}
}
.tableWrapper {
overflow-x: auto;
}
.tableWrapper {
margin: 1.5rem 0;
overflow-x: auto;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
}

32
demos/src/Examples/Tables/Vue/index.spec.js
View File

@ -6,7 +6,7 @@ context('/src/Examples/Tables/Vue/', () => {
beforeEach(() => {
cy.get('.tiptap').then(([{ editor }]) => {
editor.commands.clearContent()
cy.get('button').contains('insertTable').click()
cy.get('button').contains('Insert table').click()
})
})
@ -28,15 +28,15 @@ context('/src/Examples/Tables/Vue/', () => {
})
it('adds & delete columns', () => {
cy.get('button').contains('addColumnBefore').click()
cy.get('button').contains('Add column before').click()
cy.get('.tiptap table th')
.should('have.length', 4)
cy.get('button').contains('addColumnAfter').click()
cy.get('button').contains('Add column after').click()
cy.get('.tiptap table th')
.should('have.length', 5)
cy.get('button').contains('deleteColumn')
cy.get('button').contains('Delete column')
.click()
.click()
cy.get('.tiptap table th')
@ -44,15 +44,15 @@ context('/src/Examples/Tables/Vue/', () => {
})
it('adds & delete rows', () => {
cy.get('button').contains('addRowBefore').click()
cy.get('button').contains('Add row before').click()
cy.get('.tiptap table tr')
.should('have.length', 4)
cy.get('button').contains('addRowAfter').click()
cy.get('button').contains('Add row after').click()
cy.get('.tiptap table tr')
.should('have.length', 5)
cy.get('button').contains('deleteRow')
cy.get('button').contains('Delete row')
.click()
.click()
cy.get('.tiptap table tr')
@ -60,21 +60,21 @@ context('/src/Examples/Tables/Vue/', () => {
})
it('should delete table', () => {
cy.get('button').contains('deleteTable').click()
cy.get('button').contains('Delete table').click()
cy.get('.tiptap table').should('not.exist')
})
it('should merge cells', () => {
cy.get('.tiptap').type('{shift}{rightArrow}')
cy.get('button').contains('mergeCells').click()
cy.get('button').contains('Merge cells').click()
cy.get('.tiptap table th').should('have.length', 2)
})
it('should split cells', () => {
cy.get('.tiptap').type('{shift}{rightArrow}')
cy.get('button').contains('mergeCells').click()
cy.get('button').contains('Merge cells').click()
cy.get('.tiptap table th').should('have.length', 2)
cy.get('button').contains('splitCell').click()
cy.get('button').contains('Split cell').click()
cy.get('.tiptap table th').should('have.length', 3)
})
@ -94,11 +94,11 @@ context('/src/Examples/Tables/Vue/', () => {
it('should merge split', () => {
cy.get('.tiptap').type('{shift}{rightArrow}')
cy.get('button').contains('mergeCells').click()
cy.get('button').contains('Merge cells').click()
cy.get('.tiptap th[colspan="2"]')
.should('exist')
cy.get('button')
.contains('mergeOrSplit')
.contains('Merge or split')
.click()
cy.get('.tiptap th[colspan="2"]')
.should('not.exist')
@ -106,15 +106,15 @@ context('/src/Examples/Tables/Vue/', () => {
it('should set cell attribute', () => {
cy.get('.tiptap').type('{downArrow}')
cy.get('button').contains('setCellAttribute').click()
cy.get('button').contains('Set cell attribute').click()
cy.get('.tiptap table td[style]').should('have.attr', 'style', 'background-color: #FAF594')
})
it('should move focus to next or prev cell', () => {
cy.get('.tiptap').type('Column 1')
cy.get('button').contains('goToNextCell').click()
cy.get('button').contains('Go to next cell').click()
cy.get('.tiptap').type('Column 2')
cy.get('button').contains('goToPreviousCell').click()
cy.get('button').contains('Go to previous cell').click()
cy.get('.tiptap th').then(elements => {
expect(elements[0].innerText).to.equal('Column 1')

286
demos/src/Examples/Tables/Vue/index.vue
View File

@ -1,61 +1,70 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
insertTable
</button>
<button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
addColumnBefore
</button>
<button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
addColumnAfter
</button>
<button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
deleteColumn
</button>
<button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
addRowBefore
</button>
<button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
addRowAfter
</button>
<button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
deleteRow
</button>
<button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
deleteTable
</button>
<button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
mergeCells
</button>
<button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
splitCell
</button>
<button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
toggleHeaderColumn
</button>
<button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
toggleHeaderRow
</button>
<button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
toggleHeaderCell
</button>
<button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
mergeOrSplit
</button>
<button @click="editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()" :disabled="!editor.can().setCellAttribute('backgroundColor', '#FAF594')">
setCellAttribute
</button>
<button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
fixTables
</button>
<button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
goToNextCell
</button>
<button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
goToPreviousCell
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
Insert table
</button>
<button
@click="editor.chain().focus().insertContent(tableHTML, { parseOptions: { preserveWhitespace: false }}).run()"
>
Insert HTML table
</button>
<button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
Add column before
</button>
<button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
Add column after
</button>
<button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
Delete column
</button>
<button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
Add row before
</button>
<button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
Add row after
</button>
<button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
Delete row
</button>
<button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
Delete table
</button>
<button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
Merge cells
</button>
<button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
Split cell
</button>
<button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
Toggle header column
</button>
<button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
Toggle header row
</button>
<button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
Toggle header cell
</button>
<button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
Merge or split
</button>
<button @click="editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()" :disabled="!editor.can().setCellAttribute('backgroundColor', '#FAF594')">
Set cell attribute
</button>
<button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
Fix tables
</button>
<button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
Go to next cell
</button>
<button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
Go to previous cell
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
<editor-content :editor="editor" />
</template>
<script>
@ -95,6 +104,29 @@ export default {
data() {
return {
editor: null,
tableHTML: `
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>`,
}
},
@ -117,9 +149,9 @@ export default {
Have you seen our tables? They are amazing!
</h3>
<ul>
<li>tables with rows, cells and headers (optional)</li>
<li>support for <code>colgroup</code> and <code>rowspan</code></li>
<li>and even resizable columns (optional)</li>
<li>Tables with rows, cells and headers (optional)</li>
<li>Support for <code>colgroup</code> and <code>rowspan</code></li>
<li>And even resizable columns (optional)</li>
</ul>
<p>
Here is an example:
@ -132,20 +164,20 @@ export default {
</tr>
<tr>
<td>Cyndi Lauper</td>
<td>singer</td>
<td>songwriter</td>
<td>actress</td>
<td>Singer</td>
<td>Songwriter</td>
<td>Actress</td>
</tr>
<tr>
<td>Marie Curie</td>
<td>scientist</td>
<td>chemist</td>
<td>physicist</td>
<td>Scientist</td>
<td>Chemist</td>
<td>Physicist</td>
</tr>
<tr>
<td>Indira Gandhi</td>
<td>prime minister</td>
<td colspan="2">politician</td>
<td>Prime minister</td>
<td colspan="2">Politician</td>
</tr>
</tbody>
</table>
@ -162,17 +194,23 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
margin: 1rem 0;
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -180,62 +218,87 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
img {
max-width: 100%;
height: auto;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
/* Table-specific styling */
.tiptap {
/* Table-specific styling */
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
td,
th {
min-width: 1em;
border: 2px solid #ced4da;
padding: 3px 5px;
vertical-align: top;
border: 1px solid var(--gray-3);
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
position: relative;
vertical-align: top;
> * {
margin-bottom: 0;
@ -243,42 +306,39 @@ export default {
}
th {
background-color: var(--gray-1);
font-weight: bold;
text-align: left;
background-color: #f1f3f5;
}
.selectedCell:after {
z-index: 2;
position: absolute;
background: var(--gray-2);
content: "";
left: 0; right: 0; top: 0; bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
position: absolute;
z-index: 2;
}
.column-resize-handle {
background-color: var(--purple);
bottom: -2px;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 4px;
background-color: #adf;
pointer-events: none;
}
p {
margin: 0;
}
}
}
.tableWrapper {
overflow-x: auto;
}
.tableWrapper {
margin: 1.5rem 0;
overflow-x: auto;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
}
</style>

53
demos/src/Examples/Tasks/React/styles.scss
View File

@ -1,23 +1,44 @@
ul[data-type="taskList"] {
list-style: none;
padding: 0;
/* Basic editor styles */
.tiptap {
:first-child {
margin-top: 0;
}
li {
display: flex;
align-items: center;
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
input[type="checkbox"] {
cursor: pointer;
/* Task list specific styles */
ul[data-type="taskList"] {
list-style: none;
margin-left: 0;
padding: 0;
li {
align-items: center;
display: flex;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
}
}
input[type="checkbox"] {
cursor: pointer;
}
}
}

53
demos/src/Examples/Tasks/Vue/index.vue
View File

@ -59,27 +59,48 @@ export default {
</script>
<style lang="scss">
ul[data-type="taskList"] {
list-style: none;
padding: 0;
/* Basic editor styles */
.tiptap {
:first-child {
margin-top: 0;
}
li {
display: flex;
align-items: center;
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
input[type="checkbox"] {
cursor: pointer;
/* Task list specific styles */
ul[data-type="taskList"] {
list-style: none;
margin-left: 0;
padding: 0;
li {
align-items: center;
display: flex;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
}
}
input[type="checkbox"] {
cursor: pointer;
}
}
}
</style>

456
demos/src/Experiments/All/Vue/index.vue
View File

@ -1,69 +1,71 @@
<template>
<div>
<div v-if="editor" class="menu">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.chain().focus().redo().run()">
redo
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
Bold
</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
Italic
</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
Strike
</button>
<button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
Code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
Clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
Clear nodes
</button>
<button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
Paragraph
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
H1
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
H2
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
H3
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
H4
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
H5
</button>
<button @click="editor.chain().focus().toggleHeading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
Bullet list
</button>
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
Ordered list
</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
Code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
Blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
Horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
Hard break
</button>
<button @click="editor.chain().focus().undo().run()">
Undo
</button>
<button @click="editor.chain().focus().redo().run()">
Redo
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
@ -176,7 +178,7 @@ export default {
Hi there,
</h2>
<p>
this is a <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:
this is a <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>
@ -232,26 +234,26 @@ export default {
</tr>
<tr>
<td>Cyndi Lauper</td>
<td>singer</td>
<td>songwriter</td>
<td>actress</td>
<td>Singer</td>
<td>Songwriter</td>
<td>Actress</td>
</tr>
<tr>
<td>Marie Curie</td>
<td>scientist</td>
<td>chemist</td>
<td>physicist</td>
<td>Scientist</td>
<td>Chemist</td>
<td>Physicist</td>
</tr>
<tr>
<td>Indira Gandhi</td>
<td>prime minister</td>
<td colspan="2">politician</td>
<td>Prime minister</td>
<td colspan="2">Politician</td>
</tr>
</tbody>
</table>
<p>This is a basic example of implementing images. Drag to re-order.</p>
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
<img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
<img src="https://placehold.co/800x400" />
<img src="https://placehold.co/800x400/6A00F5/white" />
`,
})
},
@ -263,16 +265,73 @@ export default {
</script>
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* Placeholder (on every new line) */
.is-empty::before {
color: var(--gray-4);
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}
a {
color: var(--purple);
cursor: pointer;
&:hover {
color: var(--purple-contrast);
}
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Task list specific styles */
ul[data-type="taskList"] {
list-style: none;
margin-left: 0;
padding: 0;
li {
align-items: flex-start;
display: flex;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
}
}
input[type="checkbox"] {
cursor: pointer;
}
ul[data-type="taskList"] {
margin: 0;
}
}
/* Heading styles */
h1,
h2,
h3,
@ -280,27 +339,64 @@ export default {
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Display empty p */
p:empty::before {
content: '\00a0';
}
/* Code and preformatted text styles */
code {
background-color: rgba(#616161, 0.1);
color: #616161;
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
color: inherit;
padding: 0;
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
/* Code styling */
.hljs-comment,
.hljs-quote {
color: #616161;
@ -316,7 +412,7 @@ export default {
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #F98181;
color: #f98181;
}
.hljs-number,
@ -326,23 +422,23 @@ export default {
.hljs-literal,
.hljs-type,
.hljs-params {
color: #FBBC88;
color: #fbbc88;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #B9F18D;
color: #b9f18d;
}
.hljs-title,
.hljs-section {
color: #FAF594;
color: #faf594;
}
.hljs-keyword,
.hljs-selector-tag {
color: #70CFF8;
color: #70cff8;
}
.hljs-emphasis {
@ -354,37 +450,91 @@ export default {
}
}
.code-block {
position: relative;
select {
position: absolute;
background-color: var(--white);
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="Black" d="M7 10l5 5 5-5z"/></svg>');
right: 0.5rem;
top: 0.5rem;
}
}
mark {
background-color: #FAF594;
border-radius: 0.4rem;
box-decoration-break: clone;
padding: 0.1rem 0.3rem;
}
img {
max-width: 100%;
display: block;
height: auto;
margin: 1.5rem 0;
max-width: 100%;
&.ProseMirror-selectednode {
outline: 3px solid var(--purple);
transition: outline 0.15s;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
.mention {
background-color: var(--purple-light);
border-radius: 0.4rem;
box-decoration-break: clone;
color: var(--purple);
padding: 0.1rem 0.3rem;
}
/* Color swatches */
.color {
white-space: nowrap;
&::before {
background-color: var(--color);
border: 1px solid rgba(128, 128, 128, 0.3);
border-radius: 2px;
content: " ";
display: inline-block;
height: 1em;
margin-bottom: 0.15em;
margin-right: 0.1em;
vertical-align: middle;
width: 1em;
}
}
/* Table-specific styling */
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
td,
th {
min-width: 1em;
border: 2px solid #ced4da;
padding: 3px 5px;
vertical-align: top;
border: 1px solid var(--gray-3);
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
position: relative;
vertical-align: top;
> * {
margin-bottom: 0;
@ -392,87 +542,91 @@ export default {
}
th {
background-color: var(--gray-1);
font-weight: bold;
text-align: left;
background-color: #f1f3f5;
}
.selectedCell:after {
z-index: 2;
position: absolute;
background: var(--gray-2);
content: "";
left: 0; right: 0; top: 0; bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
position: absolute;
z-index: 2;
}
.column-resize-handle {
background-color: var(--purple);
bottom: -2px;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 4px;
background-color: #adf;
pointer-events: none;
}
p {
margin: 0;
}
}
ul[data-type="taskList"] {
list-style: none;
padding: 0;
.tableWrapper {
margin: 1.5rem 0;
overflow-x: auto;
}
p {
margin: 0;
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
}
/* Floating/Bubble Menus */
.bubble-menu {
background-color: var(--white);
border: 1px solid var(--gray-1);
border-radius: 0.7rem;
box-shadow: var(--shadow);
display: flex;
padding: 0.2rem;
button {
background-color: unset;
&:hover {
background-color: var(--gray-3);
}
li {
display: flex;
&.is-active {
background-color: var(--purple);
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
&:hover {
background-color: var(--purple-contrast);
}
}
}
}
.tiptap p.is-empty::before {
content: attr(data-placeholder);
float: left;
color: #adb5bd;
pointer-events: none;
height: 0;
}
.floating-menu {
display: flex;
background-color: var(--gray-3);
padding: 0.1rem;
border-radius: 0.5rem;
.tableWrapper {
overflow-x: auto;
}
button {
background-color: unset;
padding: 0.275rem 0.425rem;
border-radius: 0.3rem;
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
&:hover {
background-color: var(--gray-3);
}
.mention {
border: 1px solid #000;
border-radius: 0.4rem;
padding: 0.1rem 0.3rem;
box-decoration-break: clone;
}
&.is-active {
background-color: var(--white);
color: var(--purple);
.menu {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
&:hover {
color: var(--purple-contrast);
}
}
}
}
</style>

10
demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js
View File

@ -15,7 +15,7 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
cy.window().then(win => {
cy.stub(win, 'prompt', () => 'This is a test comment')
cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
cy.get('button').contains('comment').eq(0).click()
cy.get('button').contains('Comment').eq(0).click()
cy.get('.editor-1 .tiptap').type('{end}')
cy.get('.tiptap .annotation').should('have.length', 2)
cy.get('.comment').should('exist').contains('This is a test comment')
@ -42,11 +42,11 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
})
cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
cy.get('button').contains('comment').eq(0).click()
cy.get('button').contains('Comment').eq(0).click()
cy.wait(1000)
cy.get('.editor-1 .tiptap').find('.annotation').click()
cy.get('.comment').should('exist').contains('This is a test comment')
cy.get('button').contains('update').click()
cy.get('button').contains('Update').click()
cy.wait(1000)
cy.get('.comment').should('exist').contains('This is the new comment')
})
@ -57,11 +57,11 @@ context('/src/Experiments/CollaborationAnnotation/Vue/', () => {
cy.stub(win, 'prompt', () => 'This is a test comment')
cy.get('.editor-1 .tiptap').type('{selectall}{backspace}Hello world{selectall}')
cy.get('button').contains('comment').eq(0).click()
cy.get('button').contains('Comment').eq(0).click()
cy.wait(1000)
cy.get('.editor-1 .tiptap').find('.annotation').click()
cy.get('.comment').should('exist').contains('This is a test comment')
cy.get('button').contains('remove').click()
cy.get('button').contains('Remove').click()
cy.get('.tiptap .annotation').should('not.exist')
cy.wait(1000)
cy.get('.comment').should('not.exist')

89
demos/src/Experiments/CollaborationAnnotation/Vue/index.vue
View File

@ -1,31 +1,38 @@
<template>
<div>
<div v-if="editor">
<h2>
Original Editor
</h2>
<button @click="addComment" :disabled="!editor.can().addAnnotation()">
comment
</button>
<div v-if="editor" class="container">
<div class="control-group">
<h2>Original Editor</h2>
<div class="button-group">
<button @click="addComment" :disabled="!editor.can().addAnnotation()">
Comment
</button>
</div>
</div>
<editor-content class="editor-1" :editor="editor" />
<div class="comment" v-for="comment in comments" :key="comment.id">
<div class="output-group" v-for="comment in comments" :key="comment.id">
{{ comment }}
<button @click="updateComment(comment.id)">
update
</button>
<div class="button-group">
<button @click="updateComment(comment.id)">
Update
</button>
<button @click="deleteComment(comment.id)">
remove
</button>
<button @click="deleteComment(comment.id)">
Remove
</button>
</div>
</div>
<h2>
Another Editor
</h2>
<button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
comment
</button>
<div class="control-group">
<h2>Another Editor</h2>
<div class="button-group">
<button @click="addAnotherComment" :disabled="!anotherEditor.can().addAnnotation()">
Comment
</button>
</div>
</div>
<editor-content class="editor-2" :editor="anotherEditor" />
</div>
</div>
@ -80,7 +87,7 @@ export default {
Annotations can be used to add additional information to the content, for example comments. They live on a different level than the actual editor content.
</p>
<p>
This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another tiptap instance. :-)
This example allows you to add plain text, but you’re free to add more complex data, for example JSON from another Tiptap instance. :-)
</p>
`,
})
@ -138,8 +145,44 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
}

54
demos/src/Experiments/Commands/Vue/CommandsList.vue
View File

@ -1,14 +1,13 @@
<template>
<div class="items">
<div class="dropdown-menu">
<template v-if="items.length">
<button
class="item"
:class="{ 'is-selected': index === selectedIndex }"
v-for="(item, index) in items"
:key="index"
@click="selectItem(index)"
>
{{ item }}
{{ item.title }}
</button>
</template>
<div class="item" v-else>
@ -87,32 +86,35 @@ export default {
</script>
<style lang="scss">
.items {
padding: 0.2rem;
/* Dropdown menu */
.dropdown-menu {
background: var(--white);
border: 1px solid var(--gray-1);
border-radius: 0.7rem;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 0.1rem;
overflow: auto;
padding: 0.4rem;
position: relative;
border-radius: 0.5rem;
background: #FFF;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
font-size: 0.9rem;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05),
0px 10px 20px rgba(0, 0, 0, 0.1),
;
}
.item {
display: block;
margin: 0;
width: 100%;
text-align: left;
background: transparent;
border-radius: 0.4rem;
border: 1px solid transparent;
padding: 0.2rem 0.4rem;
button {
align-items: center;
background-color: transparent;
display: flex;
gap: 0.25rem;
text-align: left;
width: 100%;
&.is-selected {
border-color: #000;
&:hover,
&:hover.is-selected {
background-color: var(--gray-3);
}
&.is-selected {
background-color: var(--gray-2);
}
}
}
</style>

14
demos/src/Experiments/Commands/Vue/index.spec.js
View File

@ -19,8 +19,8 @@ context('/src/Experiments/Commands/Vue/', () => {
items.forEach((item, i) => {
cy.get('.tiptap').type('{selectall}{backspace}/')
cy.get('.tippy-content .items').should('exist')
cy.get('.tippy-content .items .item').eq(i).click()
cy.get('.tippy-content .dropdown-menu').should('exist')
cy.get('.tippy-content .dropdown-menu button').eq(i).click()
cy.get('.tiptap').type(`I am a ${item.tag}`)
cy.get(`.tiptap ${item.tag}`).should('exist').should('have.text', `I am a ${item.tag}`)
})
@ -28,17 +28,17 @@ context('/src/Experiments/Commands/Vue/', () => {
it('should close the popup without any command via esc', () => {
cy.get('.tiptap').type('{selectall}{backspace}/')
cy.get('.tippy-content .items').should('exist')
cy.get('.tippy-content .dropdown-menu').should('exist')
cy.get('.tiptap').type('{esc}')
cy.get('.tippy-content .items').should('not.exist')
cy.get('.tippy-content .dropdown-menu').should('not.exist')
})
it('should open the popup when the cursor is after a slash', () => {
cy.get('.tiptap').type('{selectall}{backspace}/')
cy.get('.tippy-content .items').should('exist')
cy.get('.tippy-content .dropdown-menu').should('exist')
cy.get('.tiptap').type('{leftArrow}')
cy.get('.tippy-content .items').should('not.exist')
cy.get('.tippy-content .dropdown-menu').should('not.exist')
cy.get('.tiptap').type('{rightArrow}')
cy.get('.tippy-content .items').should('exist')
cy.get('.tippy-content .dropdown-menu').should('exist')
})
})

97
demos/src/Experiments/Commands/Vue/index.vue
View File

@ -45,16 +45,95 @@ export default {
</script>
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
.mention {
border: 1px solid #000;
border-radius: 0.4rem;
padding: 0.1rem 0.3rem;
box-decoration-break: clone;
}
</style>

8
demos/src/Experiments/Commands/Vue/suggestion.js
View File

@ -7,7 +7,7 @@ export default {
items: ({ query }) => {
return [
{
title: 'H1',
title: 'Heading 1',
command: ({ editor, range }) => {
editor
.chain()
@ -18,7 +18,7 @@ export default {
},
},
{
title: 'H2',
title: 'Heading 2',
command: ({ editor, range }) => {
editor
.chain()
@ -29,7 +29,7 @@ export default {
},
},
{
title: 'bold',
title: 'Bold',
command: ({ editor, range }) => {
editor
.chain()
@ -40,7 +40,7 @@ export default {
},
},
{
title: 'italic',
title: 'Italic',
command: ({ editor, range }) => {
editor
.chain()

102
demos/src/Experiments/DestroyingEditor/Vue/index.vue
View File

@ -1,9 +1,11 @@
<template>
<div v-if="editor">
<button @click="() => editor.chain().toggleBold().focus().run()">Make bold</button>
<button @click="() => editor.destroy()">Destroy editor</button>
</div>
<div v-if="editor">
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="() => editor.chain().toggleBold().focus().run()">Make bold</button>
<button @click="() => editor.destroy()">Destroy editor</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
</template>
@ -41,9 +43,95 @@ export default {
</script>
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
}
</style>

13
demos/src/Experiments/Embeds/Vue/index.vue
View File

@ -1,9 +1,12 @@
<template>
<div v-if="editor">
<button @click="addIframe">
add iframe
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="addIframe">
Add iFrame
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
</template>

6
demos/src/Experiments/ExtensionStorage/React/index.jsx
View File

@ -18,7 +18,7 @@ export default () => {
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@ -28,8 +28,10 @@ export default () => {
return (
<>
reactive storage: {editor?.storage.custom.foo}
<EditorContent editor={editor} />
<div className="output-group">
Reactive storage: {editor?.storage.custom.foo}
</div>
</>
)
}

6
demos/src/Experiments/ExtensionStorage/React/styles.scss
View File

@ -1,6 +1,6 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
}
}

14
demos/src/Experiments/ExtensionStorage/Vue/index.vue
View File

@ -1,6 +1,10 @@
<template>
reactive storage: {{ editor?.storage.custom.foo }}
<editor-content :editor="editor" />
<div class="container">
<editor-content :editor="editor" />
<div class="output-group">
Reactive storage: {{ editor?.storage.custom.foo }}
</div>
</div>
</template>
<script>
@ -32,7 +36,7 @@ export default {
],
content: `
<p>
This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
This is a radically reduced version of Tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
</p>
<p>
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
@ -50,8 +54,8 @@ export default {
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
}
</style>

182
demos/src/Experiments/Figure/Vue/index.vue
View File

@ -1,24 +1,30 @@
<template>
<div v-if="editor">
<button @click="addFigure">
figure
</button>
<button
@click="editor.chain().focus().imageToFigure().run()"
:disabled="!editor.can().imageToFigure()"
>
image to figure
</button>
<button
@click="editor.chain().focus().figureToImage().run()"
:disabled="!editor.can().figureToImage()"
>
figure to image
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="addFigure">
Add image with caption
</button>
<button
@click="editor.chain().focus().imageToFigure().run()"
:disabled="!editor.can().imageToFigure()"
>
Add caption to image
</button>
<button
@click="editor.chain().focus().figureToImage().run()"
:disabled="!editor.can().figureToImage()"
>
Remove caption from image
</button>
</div>
</div>
<editor-content :editor="editor" />
<h2>HTML</h2>
{{ editor.getHTML() }}
<div class="output-group">
<label>HTML</label>
<code>{{ editor.getHTML() }}</code>
</div>
</div>
</template>
@ -65,14 +71,14 @@ export default {
content: `
<p>Figure + Figcaption</p>
<figure>
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="Random photo of something" title="Who’s dat?">
<img src="https://placehold.co/800x400/orange/white" alt="Random photo of something" title="Who’s dat?">
<figcaption>
<p>Amazing caption</p>
</figcaption>
</figure>
<img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400">
<img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
<img src="https://placehold.co/800x400/green/white">
<img src="https://placehold.co/800x400/blue/white">
<img src="https://placehold.co/800x400/black/white">
<p>That’s it.</p>
`,
})
@ -85,32 +91,136 @@ export default {
</script>
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
figure {
max-width: 25rem;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
figcaption {
margin-top: 0.25rem;
text-align: center;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
img {
display: block;
max-width: min(100%, 25rem);
height: auto;
margin: 1.5rem 0;
max-width: 100%;
&.ProseMirror-selectednode {
outline: 3px solid var(--purple);
}
}
/* Figure */
figure {
align-items: start;
border: 2px solid var(--black);
border-radius: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
width: fit-content;
> *:not(figcaption) {
margin: 0;
max-width: 100%;
}
&:has(figcaption:active) {
border-color: var(--purple);
}
figcaption {
border-radius: 0.5rem;
border: 2px dashed #0D0D0D20;
padding: 0.5rem;
text-align: center;
width: 100%;
}
}
}
</style>

248
demos/src/Experiments/GenericFigure/Vue/index.vue
View File

@ -1,17 +1,21 @@
<template>
<div v-if="editor">
<button @click="addCapturedTable">
add table
</button>
<button @click="addCapturedImage">
add image
</button>
<button @click="removeCapturedTable">
remove table
</button>
<button @click="removeCapturedImage">
remove image
</button>
<div v-if="editor" class="container">
<div class="control-group">
<div class="button-group">
<button @click="addCapturedTable">
Add table with caption
</button>
<button @click="addCapturedImage">
Add image with caption
</button>
<button @click="removeCapturedTable">
Remove table with caption
</button>
<button @click="removeCapturedImage">
Remove image with caption
</button>
</div>
</div>
<editor-content :editor="editor" />
</div>
</template>
@ -62,14 +66,14 @@ export default {
content: [
{
type: 'text',
text: 'image caption',
text: 'Image caption',
},
],
},
{
type: 'image',
attrs: {
src: 'https://source.unsplash.com/K9QHL52rE2k/800x400',
src: 'https://placehold.co/800x400/orange/white',
},
},
],
@ -89,7 +93,7 @@ export default {
content: [
{
type: 'text',
text: 'table caption',
text: 'Table caption',
},
],
},
@ -107,7 +111,7 @@ export default {
content: [
{
type: 'text',
text: 'cell 1',
text: 'Cell 1',
},
],
},
@ -121,7 +125,7 @@ export default {
content: [
{
type: 'text',
text: 'cell 2',
text: 'Cell 2',
},
],
},
@ -172,10 +176,10 @@ export default {
<figcaption>
Image caption
</figcaption>
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="Random photo of something" title="Who’s dat?">
<img src="https://placehold.co/800x400/black/white" alt="Random photo of something" title="Who’s dat?">
</figure>
<p>Some text</p>
<img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
<img src="https://placehold.co/800x400">
<p>Some text</p>
<figure data-type="capturedTable">
<figcaption>
@ -189,20 +193,20 @@ export default {
</tr>
<tr>
<td>Cyndi Lauper</td>
<td>singer</td>
<td>songwriter</td>
<td>actress</td>
<td>Singer</td>
<td>Songwriter</td>
<td>Actress</td>
</tr>
<tr>
<td>Marie Curie</td>
<td>scientist</td>
<td>chemist</td>
<td>physicist</td>
<td>Scientist</td>
<td>Chemist</td>
<td>Physicist</td>
</tr>
<tr>
<td>Indira Gandhi</td>
<td>prime minister</td>
<td colspan="2">politician</td>
<td>Prime minister</td>
<td colspan="2">Politician</td>
</tr>
</tbody>
</table>
@ -216,20 +220,20 @@ export default {
</tr>
<tr>
<td>Cyndi Lauper</td>
<td>singer</td>
<td>songwriter</td>
<td>actress</td>
<td>Singer</td>
<td>Songwriter</td>
<td>Actress</td>
</tr>
<tr>
<td>Marie Curie</td>
<td>scientist</td>
<td>chemist</td>
<td>physicist</td>
<td>Scientist</td>
<td>Chemist</td>
<td>Physicist</td>
</tr>
<tr>
<td>Indira Gandhi</td>
<td>prime minister</td>
<td colspan="2">politician</td>
<td>Prime minister</td>
<td colspan="2">Politician</td>
</tr>
</tbody>
</table>
@ -244,57 +248,123 @@ export default {
</script>
<style lang="scss">
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
:first-child {
margin-top: 0;
}
figure {
max-width: 25rem;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;
li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}
figcaption {
margin: 0.25rem 0;
text-align: center;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}
h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4,
h5,
h6 {
font-size: 1rem;
}
/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}
pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: 'JetBrainsMono', monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;
&:first-child {
margin-top: 0;
code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}
&:last-child {
margin-bottom: 0;
}
blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}
hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}
img {
display: block;
max-width: min(100%, 25rem);
height: auto;
border-radius: 0.5rem;
margin: 1.5rem 0;
max-width: 100%;
&.ProseMirror-selectednode {
outline: 3px solid var(--purple);
}
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
table-layout: fixed;
width: 100%;
td,
th {
min-width: 1em;
border: 2px solid #ced4da;
padding: 3px 5px;
vertical-align: top;
border: 1px solid var(--gray-3);
box-sizing: border-box;
min-width: 1em;
padding: 6px 8px;
position: relative;
vertical-align: top;
> * {
margin-bottom: 0;
@ -302,28 +372,68 @@ export default {
}
th {
background-color: var(--gray-1);
font-weight: bold;
text-align: left;
background-color: #f1f3f5;
}
.selectedCell:after {
z-index: 2;
position: absolute;
background: var(--gray-2);
content: "";
left: 0; right: 0; top: 0; bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
position: absolute;
z-index: 2;
}
.column-resize-handle {
background-color: var(--purple);
bottom: -2px;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 4px;
background-color: #adf;
pointer-events: none;
}
}
.tableWrapper {
margin: 1.5rem 0;
overflow-x: auto;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
/* Figure */
figure {
align-items: start;
border: 2px solid var(--black);
border-radius: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
width: fit-content;
> *:not(figcaption) {
margin: 0;
max-width: 100%;
}
&:has(figcaption:active) {
border-color: var(--purple);
}
figcaption {
border-radius: 0.5rem;
border: 2px dashed #0D0D0D20;
padding: 0.5rem;
text-align: center;
width: 100%;
}
}
}

12
demos/src/Experiments/GlobalDragHandle/Vue/index.vue
View File

@ -28,14 +28,14 @@ export default {
DragHandle,
],
content: `
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<pre>code</pre>
<pre>Code</pre>
`,
onUpdate: () => {
// eslint-disable-next-line

Some files were not shown because too many files have changed in this diff Show More