mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
add styles to examples, add content to the typescript page
This commit is contained in:
Hans Pagel
parent
1f30ea271b
commit
8f00a09b76
@ -124,3 +124,50 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
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;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -281,4 +281,49 @@ export default {
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
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;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -105,6 +105,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Style the export */
|
||||
.export {
|
||||
padding: 1rem 0 0;
|
||||
|
||||
@ -126,4 +127,49 @@ export default {
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
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;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -64,3 +64,17 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
|
||||
import Strike from '@tiptap/extension-strike'
|
||||
import Highlight from '@tiptap/extension-highlight'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -28,10 +30,16 @@ export default {
|
||||
To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
|
||||
</p>
|
||||
<p>
|
||||
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code. You can add your own input rules to existing extensions, and to your custom nodes and marks.
|
||||
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
|
||||
</p>
|
||||
<p>
|
||||
You can overwrite existing input rules or add your own to new nodes and marks.
|
||||
</p>
|
||||
`,
|
||||
extensions: defaultExtensions(),
|
||||
extensions: [
|
||||
...defaultExtensions(),
|
||||
Highlight(),
|
||||
],
|
||||
})
|
||||
},
|
||||
|
||||
@ -40,3 +48,50 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
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;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -42,3 +42,12 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -53,6 +53,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
|
||||
@ -3,10 +3,49 @@
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
The whole tiptap is code base is written in TypeScript. If you haven’t heard of it or never used it, no worries. You don’t have to.
|
||||
|
||||
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesn’t exist in plain JavaScript. It’s actually removed before running in the browser, but this step – the compilation – is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, that’s very valuable. It means we’ll get notified of lot of bugs, before shipping code to you.
|
||||
|
||||
Anyway, if you don’t use TypeScript in your project, that’s fine. You’ll still be able to use tiptap and even get a really nice autocomplete for the tiptap API (if your editor supports it, but most do).
|
||||
|
||||
If you’re using TypeScript in your project and want to extend tiptap, there are two things that are good to know.
|
||||
|
||||
## Options type
|
||||
To extend or create default options for an extension, you’ll need to define a custom type, here is an example:
|
||||
|
||||
```js
|
||||
import { createExtension } from '@tiptap/core'
|
||||
|
||||
## Create a command
|
||||
export interface CustomExtensionOptions {
|
||||
awesomeness: number,
|
||||
}
|
||||
|
||||
const CustomExtension = createExtension({
|
||||
defaultOptions: <CustomExtensionOptions>{
|
||||
awesomeness: 100,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Command type
|
||||
The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example:
|
||||
|
||||
```js
|
||||
import { Command, createExtension } from '@tiptap/core'
|
||||
|
||||
const CustomExtension = createExtension({
|
||||
addCommands() {
|
||||
return {
|
||||
/**
|
||||
* Comments will be added to the autocomplete.
|
||||
*/
|
||||
yourCommand: (): Command => ({ commands }) => {
|
||||
// …
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
That’s basically it. We’re doing all the rest automatically.
|
||||
|
||||
@ -90,45 +90,45 @@ code {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
// TODO: Move to examples
|
||||
// .ProseMirror {
|
||||
// > * + * {
|
||||
// margin-top: 0.75em;
|
||||
// }
|
||||
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
// ul,
|
||||
// ol {
|
||||
// padding: 0 1rem;
|
||||
// }
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
// pre {
|
||||
// background: $colorBlack;
|
||||
// color: $colorWhite;
|
||||
// font-family: 'JetBrainsMono', monospace;
|
||||
// padding: 0.75rem 1rem;
|
||||
// border-radius: 0.5rem;
|
||||
|
||||
pre {
|
||||
background: $colorBlack;
|
||||
color: $colorWhite;
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
// code {
|
||||
// color: inherit;
|
||||
// background: none;
|
||||
// font-size: 0.8rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
// img {
|
||||
// max-width: 100%;
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
// hr {
|
||||
// margin: 1rem 0;
|
||||
// }
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba($colorBlack, 0.1);
|
||||
}
|
||||
}
|
||||
// blockquote {
|
||||
// padding-left: 1rem;
|
||||
// border-left: 2px solid rgba($colorBlack, 0.1);
|
||||
// }
|
||||
// }
|
||||
|
||||
.DocSearch {
|
||||
filter: saturate(0);
|
||||
|
||||
@ -62,7 +62,6 @@
|
||||
draft: true
|
||||
- title: Working with TypeScript
|
||||
link: /guide/working-with-typescript
|
||||
draft: true
|
||||
|
||||
- title: API
|
||||
items:
|
||||
|
||||
Loading…
Reference in New Issue
Block a user