Content
-{{ content }}
+
+
{{ content }}
+ <>
+
)
}
diff --git a/demos/src/Commands/Cut/React/index.spec.js b/demos/src/Commands/Cut/React/index.spec.js
index b23e72c17..005560dee 100644
--- a/demos/src/Commands/Cut/React/index.spec.js
+++ b/demos/src/Commands/Cut/React/index.spec.js
@@ -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')
})
})
diff --git a/demos/src/Commands/Cut/React/styles.scss b/demos/src/Commands/Cut/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Commands/Cut/React/styles.scss
+++ b/demos/src/Commands/Cut/React/styles.scss
@@ -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;
}
}
diff --git a/demos/src/Commands/InsertContent/React/index.jsx b/demos/src/Commands/InsertContent/React/index.jsx
index e2ffe37d1..2da2ad9bb 100644
--- a/demos/src/Commands/InsertContent/React/index.jsx
+++ b/demos/src/Commands/InsertContent/React/index.jsx
@@ -29,17 +29,19 @@ const MenuBar = () => {
}
return (
- <>
-
-
-
-
+
+
)
}
diff --git a/demos/src/Commands/InsertContent/React/styles.scss b/demos/src/Commands/InsertContent/React/styles.scss
index 4d2b2c81e..7694d7322 100644
--- a/demos/src/Commands/InsertContent/React/styles.scss
+++ b/demos/src/Commands/InsertContent/React/styles.scss
@@ -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;
}
}
diff --git a/demos/src/Commands/InsertContentApplyingRules/React/index.jsx b/demos/src/Commands/InsertContentApplyingRules/React/index.jsx
index 1f8036053..c41d3ade9 100644
--- a/demos/src/Commands/InsertContentApplyingRules/React/index.jsx
+++ b/demos/src/Commands/InsertContentApplyingRules/React/index.jsx
@@ -14,154 +14,152 @@ const MenuBar = () => {
}
return (
- <>
+
+
+
+
+
+
-
-
+
+
- +
+
+
+
-
-
-
+
-
- - - - - - - + + + + + +
+ -
- - - - - - - + + + + + +
-
-
+ <>
+
+
)
}
diff --git a/demos/src/Examples/AutolinkValidation/React/styles.scss b/demos/src/Examples/AutolinkValidation/React/styles.scss
index 01978738f..0fa92804d 100644
--- a/demos/src/Examples/AutolinkValidation/React/styles.scss
+++ b/demos/src/Examples/AutolinkValidation/React/styles.scss
@@ -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);
+ }
}
}
diff --git a/demos/src/Examples/Book/React/index.jsx b/demos/src/Examples/Book/React/index.jsx
index b09b08eeb..89c530bcc 100644
--- a/demos/src/Examples/Book/React/index.jsx
+++ b/demos/src/Examples/Book/React/index.jsx
@@ -12,116 +12,118 @@ const MenuBar = ({ editor }) => {
}
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
@@ -139,9 +141,9 @@ export default () => {
})
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <>
+
)
}
diff --git a/demos/src/Examples/Book/React/styles.scss b/demos/src/Examples/Book/React/styles.scss
index 01978738f..7694d7322 100644
--- a/demos/src/Examples/Book/React/styles.scss
+++ b/demos/src/Examples/Book/React/styles.scss
@@ -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;
}
}
diff --git a/demos/src/Examples/Book/Vue/index.vue b/demos/src/Examples/Book/Vue/index.vue
index e319b9586..4bf6d9d1a 100644
--- a/demos/src/Examples/Book/Vue/index.vue
+++ b/demos/src/Examples/Book/Vue/index.vue
@@ -1,70 +1,74 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
-
+
@@ -97,43 +96,35 @@ export default {
diff --git a/demos/src/Examples/CustomDocument/React/styles.scss b/demos/src/Examples/CustomDocument/React/styles.scss
index 570b0f308..3eb40707e 100644
--- a/demos/src/Examples/CustomDocument/React/styles.scss
+++ b/demos/src/Examples/CustomDocument/React/styles.scss
@@ -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;
-}
diff --git a/demos/src/Examples/CustomDocument/Vue/index.vue b/demos/src/Examples/CustomDocument/Vue/index.vue
index 9532866c0..b26a4760c 100644
--- a/demos/src/Examples/CustomDocument/Vue/index.vue
+++ b/demos/src/Examples/CustomDocument/Vue/index.vue
@@ -60,26 +60,111 @@ export default {
diff --git a/demos/src/Examples/CustomParagraph/React/styles.scss b/demos/src/Examples/CustomParagraph/React/styles.scss
index 570b0f308..7694d7322 100644
--- a/demos/src/Examples/CustomParagraph/React/styles.scss
+++ b/demos/src/Examples/CustomParagraph/React/styles.scss
@@ -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;
-}
diff --git a/demos/src/Examples/Default/React/index.jsx b/demos/src/Examples/Default/React/index.jsx
index 00c9f5754..fddcfd2d3 100644
--- a/demos/src/Examples/Default/React/index.jsx
+++ b/demos/src/Examples/Default/React/index.jsx
@@ -15,168 +15,170 @@ const MenuBar = () => {
}
return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
{{ editor.storage.characterCount.characters() }}/{{ limit }} characters
+ {{ editor.storage.characterCount.characters() }} / {{ limit }} characters
+
)
}
@@ -200,7 +202,7 @@ const content = `
Hi there,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - this is a basic example of tiptap. 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 basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-
@@ -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:
body { -display: none; + display: none; }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. diff --git a/demos/src/Examples/Default/React/index.spec.js b/demos/src/Examples/Default/React/index.spec.js index b23e72c17..005560dee 100644 --- a/demos/src/Examples/Default/React/index.spec.js +++ b/demos/src/Examples/Default/React/index.spec.js @@ -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') }) }) diff --git a/demos/src/Examples/Default/React/styles.scss b/demos/src/Examples/Default/React/styles.scss index 4d2b2c81e..7694d7322 100644 --- a/demos/src/Examples/Default/React/styles.scss +++ b/demos/src/Examples/Default/React/styles.scss @@ -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; } } diff --git a/demos/src/Examples/Default/Svelte/index.spec.js b/demos/src/Examples/Default/Svelte/index.spec.js index 4e2c71b79..dc0e1c0a5 100644 --- a/demos/src/Examples/Default/Svelte/index.spec.js +++ b/demos/src/Examples/Default/Svelte/index.spec.js @@ -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') }) }) diff --git a/demos/src/Examples/Default/Svelte/index.svelte b/demos/src/Examples/Default/Svelte/index.svelte index d43c0f0e3..6e915f09d 100644 --- a/demos/src/Examples/Default/Svelte/index.svelte +++ b/demos/src/Examples/Default/Svelte/index.svelte @@ -1,6 +1,9 @@ {#if editor} -
-++diff --git a/demos/src/Examples/Default/Svelte/styles.scss b/demos/src/Examples/Default/Svelte/styles.scss index 4d2b2c81e..7694d7322 100644 --- a/demos/src/Examples/Default/Svelte/styles.scss +++ b/demos/src/Examples/Default/Svelte/styles.scss @@ -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; } } diff --git a/demos/src/Examples/Default/Vue/index.spec.js b/demos/src/Examples/Default/Vue/index.spec.js index 87600d692..c777d2660 100644 --- a/demos/src/Examples/Default/Vue/index.spec.js +++ b/demos/src/Examples/Default/Vue/index.spec.js @@ -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') }) }) diff --git a/demos/src/Examples/Default/Vue/index.vue b/demos/src/Examples/Default/Vue/index.vue index a01e6ded2..400eba78f 100644 --- a/demos/src/Examples/Default/Vue/index.vue +++ b/demos/src/Examples/Default/Vue/index.vue @@ -1,73 +1,83 @@ -- - - - - - - - - - - - - - - - - - - - - +@@ -83,60 +83,145 @@ export default { diff --git a/demos/src/Examples/NodePos/React/index.jsx b/demos/src/Examples/NodePos/React/index.jsx index cc07c19bd..358f9eae0 100644 --- a/demos/src/Examples/NodePos/React/index.jsx +++ b/demos/src/Examples/NodePos/React/index.jsx @@ -18,7 +18,7 @@ export default () => {+-+ ++diff --git a/demos/src/Examples/InteractivityComponent/Vue/index.vue b/demos/src/Examples/InteractivityComponent/Vue/index.vue index ffdab6d2f..678305b9d 100644 --- a/demos/src/Examples/InteractivityComponent/Vue/index.vue +++ b/demos/src/Examples/InteractivityComponent/Vue/index.vue @@ -46,8 +46,93 @@ export default { diff --git a/demos/src/Examples/InteractivityComponentContent/React/Component.jsx b/demos/src/Examples/InteractivityComponentContent/React/Component.jsx index 153a0a188..36fc95eba 100644 --- a/demos/src/Examples/InteractivityComponentContent/React/Component.jsx +++ b/demos/src/Examples/InteractivityComponentContent/React/Component.jsx @@ -3,10 +3,10 @@ import React from 'react' export default () => { return ( - - React Component + + - ) } diff --git a/demos/src/Examples/InteractivityComponentContent/React/index.spec.js b/demos/src/Examples/InteractivityComponentContent/React/index.spec.js index cfa9af7f9..5ba739f56 100644 --- a/demos/src/Examples/InteractivityComponentContent/React/index.spec.js +++ b/demos/src/Examples/InteractivityComponentContent/React/index.spec.js @@ -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) }) }) diff --git a/demos/src/Examples/InteractivityComponentContent/React/styles.scss b/demos/src/Examples/InteractivityComponentContent/React/styles.scss index 0eb9068d4..db0421b0a 100644 --- a/demos/src/Examples/InteractivityComponentContent/React/styles.scss +++ b/demos/src/Examples/InteractivityComponentContent/React/styles.scss @@ -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; + } + } } } - diff --git a/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue b/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue index 8e29325dd..17ce2da6d 100644 --- a/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue +++ b/demos/src/Examples/InteractivityComponentContent/Vue/Component.vue @@ -1,7 +1,7 @@+ - Vue Component - @@ -19,32 +19,37 @@ export default { diff --git a/demos/src/Examples/InteractivityComponentContent/Vue/index.vue b/demos/src/Examples/InteractivityComponentContent/Vue/index.vue index 57a175c4a..b52539edd 100644 --- a/demos/src/Examples/InteractivityComponentContent/Vue/index.vue +++ b/demos/src/Examples/InteractivityComponentContent/Vue/index.vue @@ -48,8 +48,93 @@ export default { diff --git a/demos/src/Examples/MarkdownShortcuts/React/index.jsx b/demos/src/Examples/MarkdownShortcuts/React/index.jsx index 690b00d3c..976e847f1 100644 --- a/demos/src/Examples/MarkdownShortcuts/React/index.jsx +++ b/demos/src/Examples/MarkdownShortcuts/React/index.jsx @@ -21,7 +21,7 @@ export default () => { To test that, start a new line and type+ + #followed by a space to get a heading. Try#,##,###,####,#####,######for different levels.- Those conventions are called input rules in tiptap. Some of them are enabled by default. Try
>for blockquotes,*,-or+for bullet lists, or\`foobar\`to highlight code,~~tildes~~to strike text, or==equal signs==to highlight text. + Those conventions are called input rules in Tiptap. Some of them are enabled by default. Try>for blockquotes,*,-or+for bullet lists, or\`foobar\`to highlight code,~~tildes~~to strike text, or==equal signs==to highlight text.You can overwrite existing input rules or add your own to nodes, marks and extensions. diff --git a/demos/src/Examples/MarkdownShortcuts/React/styles.scss b/demos/src/Examples/MarkdownShortcuts/React/styles.scss index 6932a405b..d23c43fc9 100644 --- a/demos/src/Examples/MarkdownShortcuts/React/styles.scss +++ b/demos/src/Examples/MarkdownShortcuts/React/styles.scss @@ -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; } } diff --git a/demos/src/Examples/MarkdownShortcuts/Vue/index.vue b/demos/src/Examples/MarkdownShortcuts/Vue/index.vue index c2705ac76..034550d4a 100644 --- a/demos/src/Examples/MarkdownShortcuts/Vue/index.vue +++ b/demos/src/Examples/MarkdownShortcuts/Vue/index.vue @@ -34,7 +34,7 @@ export default { To test that, start a new line and type
#followed by a space to get a heading. Try#,##,###,####,#####,######for different levels.- Those conventions are called input rules in tiptap. Some of them are enabled by default. Try
>for blockquotes,*,-or+for bullet lists, or\`foobar\`to highlight code,~~tildes~~to strike text, or==equal signs==to highlight text. + Those conventions are called input rules in Tiptap. Some of them are enabled by default. Try>for blockquotes,*,-or+for bullet lists, or\`foobar\`to highlight code,~~tildes~~to strike text, or==equal signs==to highlight text.You can overwrite existing input rules or add your own to nodes, marks and extensions. @@ -55,15 +55,23 @@ export default { diff --git a/demos/src/Examples/Menus/React/index.jsx b/demos/src/Examples/Menus/React/index.jsx index c6a86209b..b05c7e1f7 100644 --- a/demos/src/Examples/Menus/React/index.jsx +++ b/demos/src/Examples/Menus/React/index.jsx @@ -64,7 +64,7 @@ export default () => { onClick={() => editor.chain().focus().toggleBulletList().run()} className={editor.isActive('bulletList') ? 'is-active' : ''} > - Bullet List + Bullet list } diff --git a/demos/src/Examples/Menus/React/styles.scss b/demos/src/Examples/Menus/React/styles.scss index d9820d58d..cf6f3bc01 100644 --- a/demos/src/Examples/Menus/React/styles.scss +++ b/demos/src/Examples/Menus/React/styles.scss @@ -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); + } } } } diff --git a/demos/src/Examples/Menus/Vue/index.vue b/demos/src/Examples/Menus/Vue/index.vue index b52941c32..4f4cf9f78 100644 --- a/demos/src/Examples/Menus/Vue/index.vue +++ b/demos/src/Examples/Menus/Vue/index.vue @@ -28,7 +28,7 @@ H2
This is a simple paragraph.
-+
Here is another paragraph inside this document.
@@ -72,11 +72,11 @@ export default () => {
-Here we have another paragraph inside a blockquote.
-
-
+
+
-- - - - - - --- - - - - - --- - - - + <> +++ + + + + + +++ + + + + + +++ + + + +- {foundNodes ? {foundNodes.map(n => ( + {foundNodes ?+ ) } diff --git a/demos/src/Examples/NodePos/React/index.spec.js b/demos/src/Examples/NodePos/React/index.spec.js index a527329db..00259b52b 100644 --- a/demos/src/Examples/NodePos/React/index.spec.js +++ b/demos/src/Examples/NodePos/React/index.spec.js @@ -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') }) }) }) diff --git a/demos/src/Examples/NodePos/React/styles.scss b/demos/src/Examples/NodePos/React/styles.scss index 25ff7049e..86256765c 100644 --- a/demos/src/Examples/NodePos/React/styles.scss +++ b/demos/src/Examples/NodePos/React/styles.scss @@ -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); + } } } diff --git a/demos/src/Examples/Savvy/React/index.jsx b/demos/src/Examples/Savvy/React/index.jsx index 775b1feb8..91674135f 100644 --- a/demos/src/Examples/Savvy/React/index.jsx +++ b/demos/src/Examples/Savvy/React/index.jsx @@ -24,7 +24,7 @@ export default () => { ], content: `{foundNodes.map(n => (: ''} -{mapNodePosToString(n)}))}- → 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.
Try it out and type
(c),->,>>,1/2,!=,--or1x1here: diff --git a/demos/src/Examples/Savvy/React/styles.scss b/demos/src/Examples/Savvy/React/styles.scss index 377369437..feee91627 100644 --- a/demos/src/Examples/Savvy/React/styles.scss +++ b/demos/src/Examples/Savvy/React/styles.scss @@ -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; + } } } diff --git a/demos/src/Examples/Savvy/Vue/index.vue b/demos/src/Examples/Savvy/Vue/index.vue index b296747bd..a824b6097 100644 --- a/demos/src/Examples/Savvy/Vue/index.vue +++ b/demos/src/Examples/Savvy/Vue/index.vue @@ -37,7 +37,7 @@ export default { ], content: `- → 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.
Try it out and type
(c),->,>>,1/2,!=,--or1x1here: @@ -64,40 +64,35 @@ export default { diff --git a/demos/src/Examples/Tables/React/index.jsx b/demos/src/Examples/Tables/React/index.jsx index 7fab59158..acc42ca7b 100644 --- a/demos/src/Examples/Tables/React/index.jsx +++ b/demos/src/Examples/Tables/React/index.jsx @@ -60,69 +60,71 @@ const MenuBar = ({ editor }) => { } return ( - <> - - - - - - - - - - - - - - - - - - - - ++) } @@ -145,9 +147,9 @@ export default () => { Have you seen our tables? They are amazing!+ + + + + + + + + + + + + + + + + + + ++-
-
- tables with rows, cells and headers (optional) -
- support for
colgroupandrowspan
- - and even resizable columns (optional) +
- Tables with rows, cells and headers (optional) +
- Support for
colgroupandrowspan
+ - And even resizable columns (optional)
Here is an example: @@ -160,20 +162,20 @@ export default () => {
Cyndi Lauper -singer -songwriter -actress +Singer +Songwriter +Actress Marie Curie -scientist -chemist -physicist +Scientist +Chemist +Physicist Indira Gandhi -prime minister -politician +Prime minister +Politician + <>+ ) } diff --git a/demos/src/Examples/Tables/React/index.spec.js b/demos/src/Examples/Tables/React/index.spec.js index 8ade8b11d..5202cdfcb 100644 --- a/demos/src/Examples/Tables/React/index.spec.js +++ b/demos/src/Examples/Tables/React/index.spec.js @@ -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') diff --git a/demos/src/Examples/Tables/React/styles.scss b/demos/src/Examples/Tables/React/styles.scss index 878bb4441..b0c6c11b0 100644 --- a/demos/src/Examples/Tables/React/styles.scss +++ b/demos/src/Examples/Tables/React/styles.scss @@ -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; + } } diff --git a/demos/src/Examples/Tables/Vue/index.spec.js b/demos/src/Examples/Tables/Vue/index.spec.js index 9e2f73e0a..5e93e8012 100644 --- a/demos/src/Examples/Tables/Vue/index.spec.js +++ b/demos/src/Examples/Tables/Vue/index.spec.js @@ -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') diff --git a/demos/src/Examples/Tables/Vue/index.vue b/demos/src/Examples/Tables/Vue/index.vue index 973444dbf..45253ca30 100644 --- a/demos/src/Examples/Tables/Vue/index.vue +++ b/demos/src/Examples/Tables/Vue/index.vue @@ -1,61 +1,70 @@ -- - - - - - - - - - - - - - - - - - - ++-+ ++diff --git a/demos/src/Experiments/All/Vue/index.vue b/demos/src/Experiments/All/Vue/index.vue index b08001079..ee93e25aa 100644 --- a/demos/src/Experiments/All/Vue/index.vue +++ b/demos/src/Experiments/All/Vue/index.vue @@ -1,69 +1,71 @@ - -- - - - - - - - - - - - - - - - - - - - - ++@@ -176,7 +178,7 @@ export default { Hi there,+- this is a basic example of tiptap. 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 basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-
@@ -232,26 +234,26 @@ export default {
Cyndi Lauper -singer -songwriter -actress +Singer +Songwriter +Actress Marie Curie -scientist -chemist -physicist +Scientist +Chemist +Physicist Indira Gandhi -prime minister -politician +Prime minister +Politician This is a basic example of implementing images. Drag to re-order.
--
+
+
`, }) }, @@ -263,16 +265,73 @@ export default { diff --git a/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js b/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js index a4c4c907a..e0e7fc2ee 100644 --- a/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js +++ b/demos/src/Experiments/CollaborationAnnotation/Vue/index.spec.js @@ -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') diff --git a/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue b/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue index abff9bbd6..bb71f77f0 100644 --- a/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue +++ b/demos/src/Experiments/CollaborationAnnotation/Vue/index.vue @@ -1,31 +1,38 @@
--- Original Editor -
- ++@@ -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.+Original Editor
+ +- - 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. :-)
`, }) @@ -138,8 +145,44 @@ export default { diff --git a/demos/src/Experiments/Commands/Vue/index.spec.js b/demos/src/Experiments/Commands/Vue/index.spec.js index 1460ee071..8f310f279 100644 --- a/demos/src/Experiments/Commands/Vue/index.spec.js +++ b/demos/src/Experiments/Commands/Vue/index.spec.js @@ -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') }) }) diff --git a/demos/src/Experiments/Commands/Vue/index.vue b/demos/src/Experiments/Commands/Vue/index.vue index ffd760547..74f240b7e 100644 --- a/demos/src/Experiments/Commands/Vue/index.vue +++ b/demos/src/Experiments/Commands/Vue/index.vue @@ -45,16 +45,95 @@ export default { diff --git a/demos/src/Experiments/Commands/Vue/suggestion.js b/demos/src/Experiments/Commands/Vue/suggestion.js index cfc28aad9..a83a81127 100644 --- a/demos/src/Experiments/Commands/Vue/suggestion.js +++ b/demos/src/Experiments/Commands/Vue/suggestion.js @@ -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() diff --git a/demos/src/Experiments/DestroyingEditor/Vue/index.vue b/demos/src/Experiments/DestroyingEditor/Vue/index.vue index a878a34ba..ea54b19ae 100644 --- a/demos/src/Experiments/DestroyingEditor/Vue/index.vue +++ b/demos/src/Experiments/DestroyingEditor/Vue/index.vue @@ -1,9 +1,11 @@ -- - --++@@ -41,9 +43,95 @@ export default { diff --git a/demos/src/Experiments/Embeds/Vue/index.vue b/demos/src/Experiments/Embeds/Vue/index.vue index 1674afed3..390cbf097 100644 --- a/demos/src/Experiments/Embeds/Vue/index.vue +++ b/demos/src/Experiments/Embeds/Vue/index.vue @@ -1,9 +1,12 @@ -+ +- - ++diff --git a/demos/src/Experiments/ExtensionStorage/React/index.jsx b/demos/src/Experiments/ExtensionStorage/React/index.jsx index edb3dcf67..010a88c78 100644 --- a/demos/src/Experiments/ExtensionStorage/React/index.jsx +++ b/demos/src/Experiments/ExtensionStorage/React/index.jsx @@ -18,7 +18,7 @@ export default () => { ], content: `+ +- 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.
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}
+ + Reactive storage: {editor?.storage.custom.foo} +) } diff --git a/demos/src/Experiments/ExtensionStorage/React/styles.scss b/demos/src/Experiments/ExtensionStorage/React/styles.scss index 5e207df49..f42af27b1 100644 --- a/demos/src/Experiments/ExtensionStorage/React/styles.scss +++ b/demos/src/Experiments/ExtensionStorage/React/styles.scss @@ -1,6 +1,6 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } -} +} \ No newline at end of file diff --git a/demos/src/Experiments/ExtensionStorage/Vue/index.vue b/demos/src/Experiments/ExtensionStorage/Vue/index.vue index 85bfcf2fe..bfde3c9c3 100644 --- a/demos/src/Experiments/ExtensionStorage/Vue/index.vue +++ b/demos/src/Experiments/ExtensionStorage/Vue/index.vue @@ -1,6 +1,10 @@ - reactive storage: {{ editor?.storage.custom.foo }} -+ +diff --git a/demos/src/Experiments/GenericFigure/Vue/index.vue b/demos/src/Experiments/GenericFigure/Vue/index.vue index 6568e34dd..88741b885 100644 --- a/demos/src/Experiments/GenericFigure/Vue/index.vue +++ b/demos/src/Experiments/GenericFigure/Vue/index.vue @@ -1,17 +1,21 @@ -+ + Reactive storage: {{ editor?.storage.custom.foo }} ++- - - - ++@@ -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 {+ +Image caption -Some text
-Some text
@@ -189,20 +193,20 @@ export default { Cyndi Lauper -singer -songwriter -actress +Singer +Songwriter +Actress Marie Curie -scientist -chemist -physicist +Scientist +Chemist +Physicist Indira Gandhi -prime minister -politician +Prime minister +Politician Cyndi Lauper -singer -songwriter -actress +Singer +Songwriter +Actress Marie Curie -scientist -chemist -physicist +Scientist +Chemist +Physicist Indira Gandhi -prime minister -politician +Prime minister +Politician -- Title ----- - Tasks ----- - Description ----- - JSON ---{{ json }}+++ +++ +++++ + +++++ + ++++ + +diff --git a/demos/src/Experiments/OnUpdateRerender/React/index.jsx b/demos/src/Experiments/OnUpdateRerender/React/index.jsx index ef9d86693..a7629a8f7 100644 --- a/demos/src/Experiments/OnUpdateRerender/React/index.jsx +++ b/demos/src/Experiments/OnUpdateRerender/React/index.jsx @@ -17,7 +17,7 @@ const TiptapComponent = ({ ], content: `{{ json }}+- 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.
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. @@ -39,9 +39,13 @@ export default () => { } return ( -
- = {index} + <> ++ ) } diff --git a/demos/src/Experiments/OnUpdateRerender/React/styles.scss b/demos/src/Experiments/OnUpdateRerender/React/styles.scss index 5e207df49..afd5ba214 100644 --- a/demos/src/Experiments/OnUpdateRerender/React/styles.scss +++ b/demos/src/Experiments/OnUpdateRerender/React/styles.scss @@ -1,6 +1,6 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } } diff --git a/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue b/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue index 54878f936..5eee4becf 100644 --- a/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue +++ b/demos/src/Experiments/OnUpdateRerender/Vue/TiptapComponent.vue @@ -33,7 +33,7 @@ export default { ], content: `++ = {index} ++- - 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.
The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. diff --git a/demos/src/Experiments/OnUpdateRerender/Vue/index.vue b/demos/src/Experiments/OnUpdateRerender/Vue/index.vue index 12055dee1..6f0505264 100644 --- a/demos/src/Experiments/OnUpdateRerender/Vue/index.vue +++ b/demos/src/Experiments/OnUpdateRerender/Vue/index.vue @@ -1,6 +1,12 @@ -
= {{ count }}-+ ++ + diff --git a/demos/src/Experiments/Tailwind/JS/index.html b/demos/src/Experiments/Tailwind/JS/index.html index 2a8a6785c..c3821dd93 100644 --- a/demos/src/Experiments/Tailwind/JS/index.html +++ b/demos/src/Experiments/Tailwind/JS/index.html @@ -24,7 +24,7 @@ const editor = new Editor({ Hi there,+ +++ - this is a basic basic example of tiptap. 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 basic basic example of Tiptap. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-
diff --git a/demos/src/Experiments/TrailingNode/Vue/index.vue b/demos/src/Experiments/TrailingNode/Vue/index.vue
index 134dd5cee..5576c58df 100644
--- a/demos/src/Experiments/TrailingNode/Vue/index.vue
+++ b/demos/src/Experiments/TrailingNode/Vue/index.vue
@@ -41,24 +41,95 @@ export default {
diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
index 7cb621185..4e2ad1038 100644
--- a/demos/src/Extensions/BubbleMenu/React/index.jsx
+++ b/demos/src/Extensions/BubbleMenu/React/index.jsx
@@ -28,29 +28,35 @@ export default () => {
return (
<>
- - setIsEditable(!isEditable)} /> - Editable + +++ {editor &&
- - - + }+ + + +diff --git a/demos/src/Extensions/BubbleMenu/React/styles.scss b/demos/src/Extensions/BubbleMenu/React/styles.scss index 72b4f078c..3b380512a 100644 --- a/demos/src/Extensions/BubbleMenu/React/styles.scss +++ b/demos/src/Extensions/BubbleMenu/React/styles.scss @@ -1,9 +1,117 @@ +/* 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; } } -input[type="checkbox"] { - margin-right: 8px; +/* Bubble menu */ +.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); + } + + &.is-active { + background-color: var(--purple); + + &:hover { + background-color: var(--purple-contrast); + } + } + } } diff --git a/demos/src/Extensions/BubbleMenu/Vue/index.vue b/demos/src/Extensions/BubbleMenu/Vue/index.vue index 31d68d23b..dd971d6aa 100644 --- a/demos/src/Extensions/BubbleMenu/Vue/index.vue +++ b/demos/src/Extensions/BubbleMenu/Vue/index.vue @@ -1,23 +1,27 @@ - -- - Editable ++@@ -53,7 +57,7 @@ export default { ], content: `+- - - + - Hey, try to select some text here. You’ll see a formatting menu pop up. And as always, you are in full control about content and styling of this menu. + Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
`, }) @@ -68,12 +72,119 @@ export default { diff --git a/demos/src/Extensions/CharacterCount/React/index.jsx b/demos/src/Extensions/CharacterCount/React/index.jsx index c33d235f1..1b25f91bf 100644 --- a/demos/src/Extensions/CharacterCount/React/index.jsx +++ b/demos/src/Extensions/CharacterCount/React/index.jsx @@ -30,15 +30,48 @@ export default () => { return null } + const percentage = editor + ? Math.round((100 / limit) * editor.storage.characterCount.characters()) + : 0 + return ( -+ <>- - {editor.storage.characterCount.characters()}/{limit} characters ++ ) } diff --git a/demos/src/Extensions/CharacterCount/React/styles.scss b/demos/src/Extensions/CharacterCount/React/styles.scss index b5436eebc..26f0f98ee 100644 --- a/demos/src/Extensions/CharacterCount/React/styles.scss +++ b/demos/src/Extensions/CharacterCount/React/styles.scss @@ -1,11 +1,25 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } } +/* Character count */ .character-count { - color: #868e96; - margin-top: 1rem; + align-items: center; + color: var(--gray-5); + display: flex; + font-size: 0.75rem; + gap: .5rem; + margin: 1.5rem; + + svg { + color: var(--purple); + } + + &--warning, + &--warning svg { + color: var(--red); + } } diff --git a/demos/src/Extensions/CharacterCount/Vue/index.vue b/demos/src/Extensions/CharacterCount/Vue/index.vue index 83d6b1ec8..1d0c18734 100644 --- a/demos/src/Extensions/CharacterCount/Vue/index.vue +++ b/demos/src/Extensions/CharacterCount/Vue/index.vue @@ -1,9 +1,38 @@ -+ + + {editor.storage.characterCount.characters()} / {limit} characters-
{editor.storage.characterCount.words()} words+- - {{ editor.storage.characterCount.characters() }}/{{ limit }} characters ++ + + {{ editor.storage.characterCount.characters() }} / {{ limit }} characters@@ -47,6 +76,12 @@ export default { }) }, + computed: { + percentage() { + return Math.round((100 / this.limit) * this.editor.storage.characterCount.characters()) + }, + }, + beforeUnmount() { this.editor.destroy() }, @@ -56,13 +91,27 @@ export default { diff --git a/demos/src/Extensions/Collaboration/React/styles.scss b/demos/src/Extensions/Collaboration/React/styles.scss index c445f1efc..5507b20e8 100644 --- a/demos/src/Extensions/Collaboration/React/styles.scss +++ b/demos/src/Extensions/Collaboration/React/styles.scss @@ -1,15 +1,15 @@ /* Basic editor styles */ -tiptap { - > * + * { - margin-top: 0.75em; +.tiptap { + :first-child { + margin-top: 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 (at the top) */ -tiptap p.is-editor-empty:first-child::before { - color: #adb5bd; - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; -} diff --git a/demos/src/Extensions/Collaboration/Vue/index.vue b/demos/src/Extensions/Collaboration/Vue/index.vue index ed750353b..9f6545451 100644 --- a/demos/src/Extensions/Collaboration/Vue/index.vue +++ b/demos/src/Extensions/Collaboration/Vue/index.vue @@ -53,18 +53,18 @@ export default { diff --git a/demos/src/Extensions/CollaborationCursor/React/styles.scss b/demos/src/Extensions/CollaborationCursor/React/styles.scss index 69851675f..578e350f9 100644 --- a/demos/src/Extensions/CollaborationCursor/React/styles.scss +++ b/demos/src/Extensions/CollaborationCursor/React/styles.scss @@ -1,42 +1,46 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 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; + } + + p { + word-break: break-all; + } + + /* Give a remote user a caret */ + .collaboration-cursor__caret { + border-left: 1px solid #0d0d0d; + border-right: 1px solid #0d0d0d; + margin-left: -1px; + margin-right: -1px; + pointer-events: none; + position: relative; + word-break: normal; + } + + /* Render the username above the caret */ + .collaboration-cursor__label { + border-radius: 3px 3px 3px 0; + color: #0d0d0d; + font-size: 12px; + font-style: normal; + font-weight: 600; + left: -1px; + line-height: normal; + padding: 0.1rem 0.3rem; + position: absolute; + top: -1.4em; + user-select: none; + white-space: nowrap; } } - -/* Placeholder (at the top) */ -.tiptap p.is-editor-empty:first-child::before { - color: #adb5bd; - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; -} - -/* Give a remote user a caret */ -.collaboration-cursor__caret { - border-left: 1px solid #0d0d0d; - border-right: 1px solid #0d0d0d; - margin-left: -1px; - margin-right: -1px; - pointer-events: none; - position: relative; - word-break: normal; -} - -/* Render the username above the caret */ -.collaboration-cursor__label { - border-radius: 3px 3px 3px 0; - color: #0d0d0d; - font-size: 12px; - font-style: normal; - font-weight: 600; - left: -1px; - line-height: normal; - padding: 0.1rem 0.3rem; - position: absolute; - top: -1.4em; - user-select: none; - white-space: nowrap; -} diff --git a/demos/src/Extensions/CollaborationCursor/Vue/index.vue b/demos/src/Extensions/CollaborationCursor/Vue/index.vue index 327de6bc4..e2a5826e3 100644 --- a/demos/src/Extensions/CollaborationCursor/Vue/index.vue +++ b/demos/src/Extensions/CollaborationCursor/Vue/index.vue @@ -62,44 +62,48 @@ export default { diff --git a/demos/src/Extensions/Color/React/index.jsx b/demos/src/Extensions/Color/React/index.jsx index 3a706fa1b..bc4c6c17c 100644 --- a/demos/src/Extensions/Color/React/index.jsx +++ b/demos/src/Extensions/Color/React/index.jsx @@ -1,3 +1,5 @@ +import './styles.scss' + import { Color } from '@tiptap/extension-color' import Document from '@tiptap/extension-document' import Paragraph from '@tiptap/extension-paragraph' @@ -19,70 +21,74 @@ export default () => { } return ( -
{{ editor.storage.characterCount.words() }} words- editor.chain().focus().setColor(event.target.value).run()} - value={editor.getAttributes('textStyle').color} - data-testid="setColor" - /> - - - - - - - - + <> ++ ) } diff --git a/demos/src/GuideNodeViews/TableOfContents/React/styles.scss b/demos/src/Extensions/Color/React/styles.scss similarity index 53% rename from demos/src/GuideNodeViews/TableOfContents/React/styles.scss rename to demos/src/Extensions/Color/React/styles.scss index 5e207df49..afd5ba214 100644 --- a/demos/src/GuideNodeViews/TableOfContents/React/styles.scss +++ b/demos/src/Extensions/Color/React/styles.scss @@ -1,6 +1,6 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } } diff --git a/demos/src/Extensions/Color/Vue/index.vue b/demos/src/Extensions/Color/Vue/index.vue index 3046df05b..dbd592444 100644 --- a/demos/src/Extensions/Color/Vue/index.vue +++ b/demos/src/Extensions/Color/Vue/index.vue @@ -1,35 +1,38 @@ -++ editor.chain().focus().setColor(event.target.value).run()} + value={editor.getAttributes('textStyle').color} + data-testid="setColor" + /> + + + + + + + + ++- - - - - - - - - - - ++@@ -73,3 +76,12 @@ export default { }, } + + diff --git a/demos/src/Extensions/Dropcursor/React/index.jsx b/demos/src/Extensions/Dropcursor/React/index.jsx index 418b27e74..7dc3a4091 100644 --- a/demos/src/Extensions/Dropcursor/React/index.jsx +++ b/demos/src/Extensions/Dropcursor/React/index.jsx @@ -13,7 +13,7 @@ export default () => { extensions: [Document, Paragraph, Text, Image, Dropcursor], content: `+ +Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.
-Try to drag around the image. While you drag, the editor should show a decoration under your cursor. The so called dropcursor.
-- setIsEditable(!isEditable)} /> - Editable ++{editor &&- - - + }+ + + +diff --git a/demos/src/Extensions/FloatingMenu/React/styles.scss b/demos/src/Extensions/FloatingMenu/React/styles.scss index 1c9f0f6cd..bf227c736 100644 --- a/demos/src/Extensions/FloatingMenu/React/styles.scss +++ b/demos/src/Extensions/FloatingMenu/React/styles.scss @@ -1,10 +1,118 @@ +/* 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; + } +} + +/* Floating menu */ +.floating-menu { + display: flex; + background-color: var(--gray-3); + padding: 0.1rem; + border-radius: 0.5rem; + + button { + background-color: unset; + padding: 0.275rem 0.425rem; + border-radius: 0.3rem; + + &:hover { + background-color: var(--gray-3); + } + + &.is-active { + background-color: var(--white); + color: var(--purple); + + &:hover { + color: var(--purple-contrast); + } + } } } diff --git a/demos/src/Extensions/FloatingMenu/Vue/index.vue b/demos/src/Extensions/FloatingMenu/Vue/index.vue index b32dafce6..17f865d1e 100644 --- a/demos/src/Extensions/FloatingMenu/Vue/index.vue +++ b/demos/src/Extensions/FloatingMenu/Vue/index.vue @@ -1,19 +1,23 @@ - -- - Editable ++@@ -65,13 +69,120 @@ export default { diff --git a/demos/src/Extensions/Focus/React/styles.scss b/demos/src/Extensions/Focus/React/styles.scss index c7a751e81..9ec31f8e5 100644 --- a/demos/src/Extensions/Focus/React/styles.scss +++ b/demos/src/Extensions/Focus/React/styles.scss @@ -1,30 +1,33 @@ -.has-focus { - border-radius: 3px; - box-shadow: 0 0 0 3px #68cef8; -} - /* 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; + } } - blockquote { - border-left: 2px solid rgba(#0d0d0d, 0.1); - padding-left: 1rem; - } - + /* Code and preformatted text styles */ code { - background-color: rgba(#616161, 0.1); - border-radius: 0.25em; - box-decoration-break: clone; - color: #616161; - font-size: 0.9rem; - padding: 0.25em; + background-color: var(--purple-light); + border-radius: 0.4rem; + color: var(--black); + font-size: 0.85rem; + padding: 0.25em 0.3em; + } + + // Focus styles + .has-focus { + border-radius: 3px; + box-shadow: 0 0 0 2px var(--purple); } } diff --git a/demos/src/Extensions/Focus/Vue/index.vue b/demos/src/Extensions/Focus/Vue/index.vue index d2c2ef075..37b6fec3c 100644 --- a/demos/src/Extensions/Focus/Vue/index.vue +++ b/demos/src/Extensions/Focus/Vue/index.vue @@ -57,34 +57,37 @@ export default { diff --git a/demos/src/Extensions/FontFamily/React/index.jsx b/demos/src/Extensions/FontFamily/React/index.jsx index 1bbde3e36..41ef25bde 100644 --- a/demos/src/Extensions/FontFamily/React/index.jsx +++ b/demos/src/Extensions/FontFamily/React/index.jsx @@ -26,65 +26,68 @@ export default () => { } return ( -+- - - + - - - - - - - - - + <> ++ ) } diff --git a/demos/src/Extensions/FontFamily/React/styles.scss b/demos/src/Extensions/FontFamily/React/styles.scss index 6a1386a78..bea34fb1c 100644 --- a/demos/src/Extensions/FontFamily/React/styles.scss +++ b/demos/src/Extensions/FontFamily/React/styles.scss @@ -1,15 +1,10 @@ +/* Basic editor styles */ +.tiptap { + :first-child { + margin-top: 0; + } +} html { --title-font-family: 'Helvetica', sans-serif; } - -.tiptap { - > * + * { - margin-top: 0.75em; - } - - ul, - ol { - padding: 0 1rem; - } -} diff --git a/demos/src/Extensions/FontFamily/Vue/index.vue b/demos/src/Extensions/FontFamily/Vue/index.vue index 325a8793c..852cf3fa4 100644 --- a/demos/src/Extensions/FontFamily/Vue/index.vue +++ b/demos/src/Extensions/FontFamily/Vue/index.vue @@ -1,24 +1,27 @@ -++ + + + + + + + ++- - - - - - - - ++@@ -66,3 +69,12 @@ export default { }, } + + diff --git a/demos/src/Extensions/Gapcursor/React/index.jsx b/demos/src/Extensions/Gapcursor/React/index.jsx index b0510c2f1..a9c2e5b44 100644 --- a/demos/src/Extensions/Gapcursor/React/index.jsx +++ b/demos/src/Extensions/Gapcursor/React/index.jsx @@ -13,7 +13,7 @@ export default () => { extensions: [Document, Paragraph, Text, Image, Gapcursor], content: `+ +Try to move the cursor after the image with your arrow keys! You should see a horizontal blinking cursor below the image. This is the gapcursor.
-Try to move the cursor after the image with your arrow keys! You should see a horizontal blinking cursor below the image. This is the gapcursor.
-- - + <> ++ ) } diff --git a/demos/src/Extensions/History/React/styles.scss b/demos/src/Extensions/History/React/styles.scss new file mode 100644 index 000000000..afd5ba214 --- /dev/null +++ b/demos/src/Extensions/History/React/styles.scss @@ -0,0 +1,6 @@ +/* Basic editor styles */ +.tiptap { + :first-child { + margin-top: 0; + } +} diff --git a/demos/src/Extensions/History/Vue/index.vue b/demos/src/Extensions/History/Vue/index.vue index 536db0822..33ec10b18 100644 --- a/demos/src/Extensions/History/Vue/index.vue +++ b/demos/src/Extensions/History/Vue/index.vue @@ -1,18 +1,21 @@ -++ + ++- - - - ++@@ -59,3 +62,12 @@ export default { }, } + + diff --git a/demos/src/Extensions/ListKeymap/React/index.jsx b/demos/src/Extensions/ListKeymap/React/index.jsx index 87a34be1d..b822c28d1 100644 --- a/demos/src/Extensions/ListKeymap/React/index.jsx +++ b/demos/src/Extensions/ListKeymap/React/index.jsx @@ -26,30 +26,34 @@ export default () => { return ( <> - - - - ++ +++ + + + ++diff --git a/demos/src/Extensions/ListKeymap/React/styles.scss b/demos/src/Extensions/ListKeymap/React/styles.scss index bb33a9715..83cabbd9f 100644 --- a/demos/src/Extensions/ListKeymap/React/styles.scss +++ b/demos/src/Extensions/ListKeymap/React/styles.scss @@ -1,11 +1,18 @@ /* 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; + } } } diff --git a/demos/src/Extensions/Placeholder/React/styles.scss b/demos/src/Extensions/Placeholder/React/styles.scss index 5a8b4b37d..879b4954e 100644 --- a/demos/src/Extensions/Placeholder/React/styles.scss +++ b/demos/src/Extensions/Placeholder/React/styles.scss @@ -1,24 +1,109 @@ /* Basic editor styles */ .tiptap { - > * + * { - margin-top: 0.75em; + :first-child { + margin-top: 0; } -} -/* Placeholder (at the top) */ -.tiptap .is-editor-empty:first-child::before { - color: #adb5bd; - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; -} + /* 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; + } + } -/* Placeholder (on every new line) */ -/*.tiptap p.is-empty::before { - color: #adb5bd; - content: attr(data-placeholder); - float: left; - height: 0; - pointer-events: none; -}*/ + /* 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; + } */ +} diff --git a/demos/src/Extensions/Placeholder/Vue/index.vue b/demos/src/Extensions/Placeholder/Vue/index.vue index 6c332ff4b..7e0608ed6 100644 --- a/demos/src/Extensions/Placeholder/Vue/index.vue +++ b/demos/src/Extensions/Placeholder/Vue/index.vue @@ -47,26 +47,111 @@ export default { diff --git a/demos/src/Extensions/TextAlign/React/index.jsx b/demos/src/Extensions/TextAlign/React/index.jsx index bf8d96825..fb31f6869 100644 --- a/demos/src/Extensions/TextAlign/React/index.jsx +++ b/demos/src/Extensions/TextAlign/React/index.jsx @@ -1,3 +1,5 @@ +import './styles.scss' + import Document from '@tiptap/extension-document' import Heading from '@tiptap/extension-heading' import Paragraph from '@tiptap/extension-paragraph' @@ -29,33 +31,37 @@ export default () => { } return ( - - - - - - + <> ++ ) } diff --git a/demos/src/Extensions/TextAlign/React/styles.scss b/demos/src/Extensions/TextAlign/React/styles.scss new file mode 100644 index 000000000..ec1db9057 --- /dev/null +++ b/demos/src/Extensions/TextAlign/React/styles.scss @@ -0,0 +1,42 @@ +/* Basic editor styles */ +.tiptap { + :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; + } +} diff --git a/demos/src/Extensions/TextAlign/Vue/index.vue b/demos/src/Extensions/TextAlign/Vue/index.vue index edd9bbf4f..f339d030f 100644 --- a/demos/src/Extensions/TextAlign/Vue/index.vue +++ b/demos/src/Extensions/TextAlign/Vue/index.vue @@ -1,20 +1,24 @@ -++ + + + + ++- - - - - - ++@@ -62,3 +66,48 @@ export default { }, } + + diff --git a/demos/src/Extensions/Typography/React/index.jsx b/demos/src/Extensions/Typography/React/index.jsx index 002e59854..37c7a6807 100644 --- a/demos/src/Extensions/Typography/React/index.jsx +++ b/demos/src/Extensions/Typography/React/index.jsx @@ -1,3 +1,5 @@ +import './styles.scss' + import Document from '@tiptap/extension-document' import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' diff --git a/demos/src/Extensions/Typography/React/styles.scss b/demos/src/Extensions/Typography/React/styles.scss new file mode 100644 index 000000000..afd5ba214 --- /dev/null +++ b/demos/src/Extensions/Typography/React/styles.scss @@ -0,0 +1,6 @@ +/* Basic editor styles */ +.tiptap { + :first-child { + margin-top: 0; + } +} diff --git a/demos/src/Extensions/Typography/Vue/index.vue b/demos/src/Extensions/Typography/Vue/index.vue index 57eb5ac74..63d585ba7 100644 --- a/demos/src/Extensions/Typography/Vue/index.vue +++ b/demos/src/Extensions/Typography/Vue/index.vue @@ -40,3 +40,12 @@ export default { }, } + + diff --git a/demos/src/GuideContent/ExportHTML/React/index.jsx b/demos/src/GuideContent/ExportHTML/React/index.jsx index aed03881c..05af0d91b 100644 --- a/demos/src/GuideContent/ExportHTML/React/index.jsx +++ b/demos/src/GuideContent/ExportHTML/React/index.jsx @@ -54,31 +54,33 @@ export default () => { return ( <> -+ +- - - - +++ + + + +- -HTML
++{html}-- - - - +++- -@@ -90,40 +92,25 @@ export default { diff --git a/demos/src/GuideContent/ExportJSON/React/index.jsx b/demos/src/GuideContent/ExportJSON/React/index.jsx index 15bd1bf02..c2a0fcd3d 100644 --- a/demos/src/GuideContent/ExportJSON/React/index.jsx +++ b/demos/src/GuideContent/ExportJSON/React/index.jsx @@ -63,31 +63,33 @@ export default () => { return ( <> -HTML
++{{ html }}- - - - +++ + + + +- -JSON
++{JSON.stringify(json, null, 2)}-- - - - +++- -@@ -97,40 +99,25 @@ export default { diff --git a/demos/src/GuideContent/ReadOnly/React/index.jsx b/demos/src/GuideContent/ReadOnly/React/index.jsx index d832aa374..657c33382 100644 --- a/demos/src/GuideContent/ReadOnly/React/index.jsx +++ b/demos/src/GuideContent/ReadOnly/React/index.jsx @@ -33,14 +33,16 @@ export default () => { return ( <> -JSON
++{{ json }}- setEditable(event.target.checked)} - /> - +++ setEditable(event.target.checked)} + /> + +diff --git a/demos/src/GuideContent/ReadOnly/React/styles.scss b/demos/src/GuideContent/ReadOnly/React/styles.scss index cc51aae76..5d986479e 100644 --- a/demos/src/GuideContent/ReadOnly/React/styles.scss +++ b/demos/src/GuideContent/ReadOnly/React/styles.scss @@ -1,19 +1,97 @@ /* 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; + } + + + &[contenteditable="false"] { + cursor: not-allowed; + opacity: 0.6; } } - -.checkbox { - margin-bottom: 1rem; - - input[type="checkbox"] { - margin-right: 0.5rem; - } -} - -[contenteditable="false"] { - color: #999; - cursor: not-allowed; -} diff --git a/demos/src/GuideContent/ReadOnly/Vue/index.vue b/demos/src/GuideContent/ReadOnly/Vue/index.vue index df4976549..d4e185d11 100644 --- a/demos/src/GuideContent/ReadOnly/Vue/index.vue +++ b/demos/src/GuideContent/ReadOnly/Vue/index.vue @@ -1,8 +1,10 @@ - -- - ++@@ -56,21 +58,98 @@ export default { diff --git a/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue b/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue index 02538e03c..ea5d31a2f 100644 --- a/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue +++ b/demos/src/GuideGettingStarted/VModel/Vue/Editor.vue @@ -63,3 +63,97 @@ export default { }, } + + diff --git a/demos/src/GuideGettingStarted/VModel/Vue/index.vue b/demos/src/GuideGettingStarted/VModel/Vue/index.vue index 84249fd86..1596a2f39 100644 --- a/demos/src/GuideGettingStarted/VModel/Vue/index.vue +++ b/demos/src/GuideGettingStarted/VModel/Vue/index.vue @@ -2,9 +2,9 @@+- -@@ -19,44 +19,8 @@ export default { data() { return { - content: 'A Vue.js wrapper component for tiptap to use
', + content: 'v-model.A Vue.js wrapper component for Tiptap to use
', } }, } - - diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/index.vue b/demos/src/GuideNodeViews/DragHandle/Vue/index.vue index 4ef0eda0d..1a63785ed 100644 --- a/demos/src/GuideNodeViews/DragHandle/Vue/index.vue +++ b/demos/src/GuideNodeViews/DragHandle/Vue/index.vue @@ -51,3 +51,97 @@ export default { }, } + + diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js b/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js index 216a7222c..caacda545 100644 --- a/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js +++ b/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js @@ -48,9 +48,8 @@ export default Node.create({ dom.classList.add('node-view') - const label = document.createElement('span') + const label = document.createElement('label') - label.classList.add('label') label.innerHTML = 'Node view' const content = document.createElement('div') diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/index.vue b/demos/src/GuideNodeViews/JavaScript/Vue/index.vue index 75ac7ffd0..fbd0b0e07 100644 --- a/demos/src/GuideNodeViews/JavaScript/Vue/index.vue +++ b/demos/src/GuideNodeViews/JavaScript/Vue/index.vue @@ -46,35 +46,118 @@ export default { diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js b/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js index 35886d39b..b3a6cc676 100644 --- a/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js +++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js @@ -34,15 +34,15 @@ export default Node.create({ dom.classList.add('node-view') - const label = document.createElement('span') + const label = document.createElement('label') - label.classList.add('label') label.innerHTML = 'Node view' label.contentEditable = false const content = document.createElement('div') content.classList.add('content') + content.classList.add('is-editable') dom.append(label, content) diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue index 60cd847db..b4653758e 100644 --- a/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue +++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue @@ -48,37 +48,125 @@ export default { diff --git a/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx b/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx index d2a2b324a..c9183c91d 100644 --- a/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx +++ b/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx @@ -10,7 +10,7 @@ export default props => { return (v-model.- React Component +
-
diff --git a/demos/src/Experiments/TrailingNode/Vue/index.vue b/demos/src/Experiments/TrailingNode/Vue/index.vue
index 134dd5cee..5576c58df 100644
--- a/demos/src/Experiments/TrailingNode/Vue/index.vue
+++ b/demos/src/Experiments/TrailingNode/Vue/index.vue
@@ -41,24 +41,95 @@ export default {
diff --git a/demos/src/Extensions/BubbleMenu/React/index.jsx b/demos/src/Extensions/BubbleMenu/React/index.jsx
index 7cb621185..4e2ad1038 100644
--- a/demos/src/Extensions/BubbleMenu/React/index.jsx
+++ b/demos/src/Extensions/BubbleMenu/React/index.jsx
@@ -28,29 +28,35 @@ export default () => {
return (
<>
-
- Another Editor -
- +Another Editor
+