Merge branch 'main' of github.com:ueberdosis/tiptap-next into main
This commit is contained in:
@@ -138,6 +138,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<node-view-wrapper class="code-block">
|
||||
<select contenteditable="false" v-model="selectedLanguage">
|
||||
<option :value="null">
|
||||
auto
|
||||
</option>
|
||||
<option disabled>
|
||||
—
|
||||
</option>
|
||||
<option v-for="(language, index) in languages" :value="language" :key="index">
|
||||
{{ language }}
|
||||
</option>
|
||||
</select>
|
||||
<pre><node-view-content as="code" /></pre>
|
||||
</node-view-wrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-2'
|
||||
import lowlight from 'lowlight/lib/core'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NodeViewWrapper,
|
||||
NodeViewContent,
|
||||
},
|
||||
|
||||
props: nodeViewProps,
|
||||
|
||||
data() {
|
||||
return {
|
||||
languages: lowlight.listLanguages(),
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
selectedLanguage: {
|
||||
get() {
|
||||
return this.node.attrs.language
|
||||
},
|
||||
set(language) {
|
||||
this.updateAttributes({ language })
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.code-block {
|
||||
position: relative;
|
||||
|
||||
select {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
docs/src/demos/Examples/CodeBlockLanguage/index.vue
Normal file
152
docs/src/demos/Examples/CodeBlockLanguage/index.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||
code block
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-2'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||||
import CodeBlockComponent from './CodeBlockComponent'
|
||||
|
||||
// install all highlight.js languages
|
||||
import 'lowlight'
|
||||
|
||||
// or install specific languages only
|
||||
// import lowlight from 'lowlight/lib/core'
|
||||
// import javascript from 'highlight.js/lib/languages/javascript'
|
||||
// lowlight.registerLanguage('javascript', javascript)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
CodeBlockLowlight.extend({
|
||||
addNodeView() {
|
||||
return VueNodeViewRenderer(CodeBlockComponent)
|
||||
},
|
||||
}),
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
That’s a boring paragraph followed by a fenced code block:
|
||||
</p>
|
||||
<pre><code>for (var i=1; i <= 20; i++)
|
||||
{
|
||||
if (i % 15 == 0)
|
||||
console.log("FizzBuzz");
|
||||
else if (i % 3 == 0)
|
||||
console.log("Fizz");
|
||||
else if (i % 5 == 0)
|
||||
console.log("Buzz");
|
||||
else
|
||||
console.log(i);
|
||||
}</code></pre>
|
||||
<p>
|
||||
Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-attribute,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-regexp,
|
||||
.hljs-link,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #F98181;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-meta,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params {
|
||||
color: #FBBC88;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #B9F18D;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #FAF594;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
color: #70CFF8;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -285,6 +285,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -163,6 +163,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -138,6 +138,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -89,6 +89,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -176,6 +176,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -105,6 +105,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -203,6 +203,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -145,6 +145,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -152,6 +152,7 @@ export default {
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -61,3 +61,27 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
147
docs/src/demos/Nodes/CodeBlockLowlight/index.vue
Normal file
147
docs/src/demos/Nodes/CodeBlockLowlight/index.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||
code block
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-2'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||||
|
||||
// install all highlight.js languages
|
||||
import 'lowlight'
|
||||
|
||||
// or install specific languages only
|
||||
// import lowlight from 'lowlight/lib/core'
|
||||
// import javascript from 'highlight.js/lib/languages/javascript'
|
||||
// lowlight.registerLanguage('javascript', javascript)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
CodeBlockLowlight,
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
That’s a boring paragraph followed by a fenced code block:
|
||||
</p>
|
||||
<pre><code>for (var i=1; i <= 20; i++)
|
||||
{
|
||||
if (i % 15 == 0)
|
||||
console.log("FizzBuzz");
|
||||
else if (i % 3 == 0)
|
||||
console.log("Fizz");
|
||||
else if (i % 5 == 0)
|
||||
console.log("Buzz");
|
||||
else
|
||||
console.log(i);
|
||||
}</code></pre>
|
||||
<p>
|
||||
Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
|
||||
</p>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-attribute,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-regexp,
|
||||
.hljs-link,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #F98181;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-meta,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params {
|
||||
color: #FBBC88;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #B9F18D;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #FAF594;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
color: #70CFF8;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,37 @@
|
||||
# CodeBlockLowlight
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-code-block-lowlight?minimal=true)
|
||||
|
||||
:::pro Fund the development ♥
|
||||
We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor).
|
||||
:::
|
||||
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
|
||||
|
||||
TODO
|
||||
Type <code>``` </code> (three backticks and a space) or <code>∼∼∼ </code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>```css </code>. That should add a `language-css` class to the `<code>`-tag.
|
||||
|
||||
## Installation
|
||||
```bash
|
||||
# with npm
|
||||
npm install @tiptap/extension-code-block-lowlight
|
||||
|
||||
# with Yarn
|
||||
yarn add @tiptap/extension-code-block-lowlight
|
||||
```
|
||||
|
||||
## Settings
|
||||
| Option | Type | Default | Description |
|
||||
| ------------------- | -------- | ------------- | --------------------------------------------------------------------- |
|
||||
| HTMLAttributes | `Object` | `{}` | Custom HTML attributes that should be added to the rendered HTML tag. |
|
||||
| languageClassPrefix | `String` | `'language-'` | Adds a prefix to language classes that are applied to code tags. |
|
||||
|
||||
## Commands
|
||||
| Command | Parameters | Description |
|
||||
| --------- | ---------- | ----------------------------- |
|
||||
| codeBlock | — | Wrap content in a code block. |
|
||||
|
||||
## Keyboard shortcuts
|
||||
* Windows/Linux: `Control` `Alt` `C`
|
||||
* macOS: `Cmd` `Alt` `C`
|
||||
|
||||
## Source code
|
||||
[packages/extension-code-block-lowlight/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block-lowlight/)
|
||||
|
||||
## Usage
|
||||
<demo name="Nodes/CodeBlockLowlight" />
|
||||
|
||||
3
docs/src/docPages/examples/code-block-language.md
Normal file
3
docs/src/docPages/examples/code-block-language.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Code block language
|
||||
|
||||
<demo name="Examples/CodeBlockLanguage" />
|
||||
@@ -86,6 +86,9 @@
|
||||
link: /examples/savvy
|
||||
- title: Interactivity
|
||||
link: /examples/interactivity
|
||||
- title: Code block language
|
||||
link: /examples/code-block-language
|
||||
type: new
|
||||
|
||||
- title: Guide
|
||||
items:
|
||||
@@ -155,7 +158,7 @@
|
||||
link: /api/nodes/code-block
|
||||
- title: CodeBlockLowlight
|
||||
link: /api/nodes/code-block-lowlight
|
||||
type: draft
|
||||
type: new
|
||||
- title: Document
|
||||
link: /api/nodes/document
|
||||
- title: Emoji
|
||||
|
||||
@@ -57,6 +57,7 @@ export class Editor extends EventEmitter {
|
||||
parseOptions: {},
|
||||
enableInputRules: true,
|
||||
enablePasteRules: true,
|
||||
onBeforeCreate: () => null,
|
||||
onCreate: () => null,
|
||||
onUpdate: () => null,
|
||||
onSelectionUpdate: () => null,
|
||||
@@ -73,6 +74,8 @@ export class Editor extends EventEmitter {
|
||||
this.createExtensionManager()
|
||||
this.createCommandManager()
|
||||
this.createSchema()
|
||||
this.on('beforeCreate', this.options.onCreate)
|
||||
this.emit('beforeCreate', { editor: this })
|
||||
this.createView()
|
||||
this.injectCSS()
|
||||
this.on('create', this.options.onCreate)
|
||||
|
||||
@@ -99,6 +99,14 @@ declare module '@tiptap/core' {
|
||||
[key: string]: any,
|
||||
}) | null,
|
||||
|
||||
/**
|
||||
* The editor is not ready yet.
|
||||
*/
|
||||
onBeforeCreate?: ((this: {
|
||||
options: Options,
|
||||
editor: Editor,
|
||||
}) => void) | null,
|
||||
|
||||
/**
|
||||
* The editor is ready.
|
||||
*/
|
||||
|
||||
@@ -43,6 +43,10 @@ export default class ExtensionManager {
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof extension.config.onBeforeCreate === 'function') {
|
||||
this.editor.on('beforeCreate', extension.config.onBeforeCreate.bind(context))
|
||||
}
|
||||
|
||||
if (typeof extension.config.onCreate === 'function') {
|
||||
this.editor.on('create', extension.config.onCreate.bind(context))
|
||||
}
|
||||
|
||||
@@ -109,6 +109,15 @@ declare module '@tiptap/core' {
|
||||
[key: string]: any,
|
||||
}) | null,
|
||||
|
||||
/**
|
||||
* The editor is not ready yet.
|
||||
*/
|
||||
onBeforeCreate?: ((this: {
|
||||
options: Options,
|
||||
editor: Editor,
|
||||
type: MarkType,
|
||||
}) => void) | null,
|
||||
|
||||
/**
|
||||
* The editor is ready.
|
||||
*/
|
||||
|
||||
@@ -114,6 +114,15 @@ declare module '@tiptap/core' {
|
||||
[key: string]: any,
|
||||
}) | null,
|
||||
|
||||
/**
|
||||
* The editor is not ready yet.
|
||||
*/
|
||||
onBeforeCreate?: ((this: {
|
||||
options: Options,
|
||||
editor: Editor,
|
||||
type: NodeType,
|
||||
}) => void) | null,
|
||||
|
||||
/**
|
||||
* The editor is ready.
|
||||
*/
|
||||
|
||||
22
packages/core/src/helpers/findChildren.ts
Normal file
22
packages/core/src/helpers/findChildren.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { Node as ProseMirrorNode } from 'prosemirror-model'
|
||||
import { Predicate } from '../types'
|
||||
|
||||
type NodeWithPos = {
|
||||
node: ProseMirrorNode,
|
||||
pos: number,
|
||||
}
|
||||
|
||||
export default function findChildren(node: ProseMirrorNode, predicate: Predicate): NodeWithPos[] {
|
||||
const nodesWithPos: NodeWithPos[] = []
|
||||
|
||||
node.descendants((child, pos) => {
|
||||
if (predicate(child)) {
|
||||
nodesWithPos.push({
|
||||
node: child,
|
||||
pos,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return nodesWithPos
|
||||
}
|
||||
@@ -12,6 +12,9 @@ export { default as markPasteRule } from './pasteRules/markPasteRule'
|
||||
export { default as callOrReturn } from './utilities/callOrReturn'
|
||||
export { default as mergeAttributes } from './utilities/mergeAttributes'
|
||||
|
||||
export { default as findChildren } from './helpers/findChildren'
|
||||
export { default as findParentNode } from './helpers/findParentNode'
|
||||
export { default as findParentNodeClosestToPos } from './helpers/findParentNodeClosestToPos'
|
||||
export { default as generateHTML } from './helpers/generateHTML'
|
||||
export { default as getSchema } from './helpers/getSchema'
|
||||
export { default as getHTMLFromFragment } from './helpers/getHTMLFromFragment'
|
||||
@@ -22,7 +25,6 @@ export { default as isNodeActive } from './helpers/isNodeActive'
|
||||
export { default as isNodeEmpty } from './helpers/isNodeEmpty'
|
||||
export { default as isNodeSelection } from './helpers/isNodeSelection'
|
||||
export { default as isTextSelection } from './helpers/isTextSelection'
|
||||
export { default as findParentNodeClosestToPos } from './helpers/findParentNodeClosestToPos'
|
||||
|
||||
export interface Commands {}
|
||||
|
||||
|
||||
@@ -29,6 +29,7 @@ export interface EditorOptions {
|
||||
parseOptions: ParseOptions,
|
||||
enableInputRules: boolean,
|
||||
enablePasteRules: boolean,
|
||||
onBeforeCreate: (props: { editor: Editor }) => void,
|
||||
onCreate: (props: { editor: Editor }) => void,
|
||||
onUpdate: (props: { editor: Editor }) => void,
|
||||
onSelectionUpdate: (props: { editor: Editor }) => void,
|
||||
|
||||
14
packages/extension-code-block-lowlight/README.md
Normal file
14
packages/extension-code-block-lowlight/README.md
Normal file
@@ -0,0 +1,14 @@
|
||||
# @tiptap/extension-code-block-lowlight
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
|
||||
[](https://npmcharts.com/compare/tiptap?minimal=true)
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
|
||||
[](https://github.com/sponsors/ueberdosis)
|
||||
|
||||
## Introduction
|
||||
tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
|
||||
|
||||
## Offical Documentation
|
||||
Documentation can be found on the [tiptap website](https://tiptap.dev).
|
||||
|
||||
## License
|
||||
tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).
|
||||
35
packages/extension-code-block-lowlight/package.json
Normal file
35
packages/extension-code-block-lowlight/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "@tiptap/extension-code-block-lowlight",
|
||||
"description": "code block extension for tiptap",
|
||||
"version": "2.0.0-beta.0",
|
||||
"homepage": "https://tiptap.dev",
|
||||
"keywords": [
|
||||
"tiptap",
|
||||
"tiptap extension"
|
||||
],
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ueberdosis"
|
||||
},
|
||||
"main": "dist/tiptap-extension-code-block-lowlight.cjs.js",
|
||||
"umd": "dist/tiptap-extension-code-block-lowlight.umd.js",
|
||||
"module": "dist/tiptap-extension-code-block-lowlight.esm.js",
|
||||
"unpkg": "dist/tiptap-extension-code-block-lowlight.bundle.umd.min.js",
|
||||
"types": "dist/packages/extension-code-block-lowlight/src/index.d.ts",
|
||||
"files": [
|
||||
"src",
|
||||
"dist"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.0.0-beta.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tiptap/extension-code-block": "^2.0.0-beta.1",
|
||||
"@types/lowlight": "^0.0.1",
|
||||
"lowlight": "^1.20.0",
|
||||
"prosemirror-model": "^1.14.0",
|
||||
"prosemirror-state": "^1.3.4",
|
||||
"prosemirror-view": "^1.18.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import CodeBlock from '@tiptap/extension-code-block'
|
||||
import { LowlightPlugin } from './lowlight-plugin'
|
||||
|
||||
export const CodeBlockLowlight = CodeBlock.extend({
|
||||
addProseMirrorPlugins() {
|
||||
return [
|
||||
LowlightPlugin({ name: 'codeBlock' }),
|
||||
]
|
||||
},
|
||||
})
|
||||
5
packages/extension-code-block-lowlight/src/index.ts
Normal file
5
packages/extension-code-block-lowlight/src/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { CodeBlockLowlight } from './code-block-lowlight'
|
||||
|
||||
export * from './code-block-lowlight'
|
||||
|
||||
export default CodeBlockLowlight
|
||||
111
packages/extension-code-block-lowlight/src/lowlight-plugin.ts
Normal file
111
packages/extension-code-block-lowlight/src/lowlight-plugin.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { Plugin, PluginKey } from 'prosemirror-state'
|
||||
import { Decoration, DecorationSet } from 'prosemirror-view'
|
||||
import { Node as ProsemirrorNode } from 'prosemirror-model'
|
||||
import { findChildren } from '@tiptap/core'
|
||||
import lowlight from 'lowlight/lib/core'
|
||||
|
||||
function parseNodes(nodes: any[], className: string[] = []): { text: string, classes: string[] }[] {
|
||||
return nodes
|
||||
.map(node => {
|
||||
const classes = [
|
||||
...className,
|
||||
...node.properties
|
||||
? node.properties.className
|
||||
: [],
|
||||
]
|
||||
|
||||
if (node.children) {
|
||||
return parseNodes(node.children, classes)
|
||||
}
|
||||
|
||||
return {
|
||||
text: node.value,
|
||||
classes,
|
||||
}
|
||||
})
|
||||
.flat()
|
||||
}
|
||||
|
||||
function getDecorations({ doc, name }: { doc: ProsemirrorNode, name: string}) {
|
||||
const decorations: Decoration[] = []
|
||||
|
||||
findChildren(doc, node => node.type.name === name)
|
||||
.forEach(block => {
|
||||
let from = block.pos + 1
|
||||
const { language } = block.node.attrs
|
||||
// TODO: add missing type for `listLanguages`
|
||||
// @ts-ignore
|
||||
const languages = lowlight.listLanguages() as string[]
|
||||
const nodes = language && languages.includes(language)
|
||||
? lowlight.highlight(language, block.node.textContent).value
|
||||
: lowlight.highlightAuto(block.node.textContent).value
|
||||
|
||||
parseNodes(nodes).forEach(node => {
|
||||
const to = from + node.text.length
|
||||
|
||||
if (node.classes.length) {
|
||||
const decoration = Decoration.inline(from, to, {
|
||||
class: node.classes.join(' '),
|
||||
})
|
||||
|
||||
decorations.push(decoration)
|
||||
}
|
||||
|
||||
from = to
|
||||
})
|
||||
})
|
||||
|
||||
return DecorationSet.create(doc, decorations)
|
||||
}
|
||||
|
||||
export function LowlightPlugin({ name }: { name: string }) {
|
||||
return new Plugin({
|
||||
key: new PluginKey('lowlight'),
|
||||
|
||||
state: {
|
||||
init: (_, { doc }) => getDecorations({ doc, name }),
|
||||
apply: (transaction, decorationSet, oldState, newState) => {
|
||||
const oldNodeName = oldState.selection.$head.parent.type.name
|
||||
const newNodeName = newState.selection.$head.parent.type.name
|
||||
const oldNodes = findChildren(oldState.doc, node => node.type.name === name)
|
||||
const newNodes = findChildren(newState.doc, node => node.type.name === name)
|
||||
|
||||
if (
|
||||
transaction.docChanged
|
||||
// Apply decorations if:
|
||||
&& (
|
||||
// selection includes named node,
|
||||
[oldNodeName, newNodeName].includes(name)
|
||||
// OR transaction adds/removes named node,
|
||||
|| newNodes.length !== oldNodes.length
|
||||
// OR transaction has changes that completely encapsulte a node
|
||||
// (for example, a transaction that affects the entire document).
|
||||
// Such transactions can happen during collab syncing via y-prosemirror, for example.
|
||||
|| transaction.steps.some(step => {
|
||||
// @ts-ignore
|
||||
return step.from !== undefined
|
||||
// @ts-ignore
|
||||
&& step.to !== undefined
|
||||
&& oldNodes.some(node => {
|
||||
// @ts-ignore
|
||||
return node.pos >= step.from
|
||||
// @ts-ignore
|
||||
&& node.pos + node.node.nodeSize <= step.to
|
||||
})
|
||||
})
|
||||
)
|
||||
) {
|
||||
return getDecorations({ doc: transaction.doc, name })
|
||||
}
|
||||
|
||||
return decorationSet.map(transaction.mapping, transaction.doc)
|
||||
},
|
||||
},
|
||||
|
||||
props: {
|
||||
decorations(state) {
|
||||
return this.getState(state)
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
30
yarn.lock
30
yarn.lock
@@ -2184,6 +2184,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
|
||||
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
|
||||
|
||||
"@types/lowlight@^0.0.1":
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/lowlight/-/lowlight-0.0.1.tgz#221bc67a6c517bae71e6f200fa1cad0feaeeb965"
|
||||
integrity sha512-yPpbpV1KfpFOZ0ZZbsgwWumraiAKoX7/Ng75Ah//w+ZBt4j0xwrQ2aHSlk2kPzQVK4LiPbNFE1LjC00IL4nl/A==
|
||||
|
||||
"@types/mdast@^3.0.3":
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
|
||||
@@ -6545,6 +6550,13 @@ fastq@^1.6.0:
|
||||
dependencies:
|
||||
reusify "^1.0.4"
|
||||
|
||||
fault@^1.0.0:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
|
||||
integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
|
||||
dependencies:
|
||||
format "^0.2.0"
|
||||
|
||||
faye-websocket@^0.11.3:
|
||||
version "0.11.3"
|
||||
resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
|
||||
@@ -6780,6 +6792,11 @@ form-data@~2.3.2:
|
||||
combined-stream "^1.0.6"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
format@^0.2.0:
|
||||
version "0.2.2"
|
||||
resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
|
||||
integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
|
||||
|
||||
forwarded@~0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
|
||||
@@ -7674,6 +7691,11 @@ hex-color-regex@^1.1.0:
|
||||
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
|
||||
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
|
||||
|
||||
highlight.js@~10.7.0:
|
||||
version "10.7.1"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955"
|
||||
integrity sha512-S6G97tHGqJ/U8DsXcEdnACbirtbx58Bx9CzIVeYli8OuswCfYI/LsXH2EiGcoGio1KAC3x4mmUwulOllJ2ZyRA==
|
||||
|
||||
hirestime@^3.2.1:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/hirestime/-/hirestime-3.2.2.tgz#1b5ff4c796b6b70586fa6efa4850952c6e1be484"
|
||||
@@ -9406,6 +9428,14 @@ lowercase-keys@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
|
||||
integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
|
||||
|
||||
lowlight@^1.20.0:
|
||||
version "1.20.0"
|
||||
resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
|
||||
integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
|
||||
dependencies:
|
||||
fault "^1.0.0"
|
||||
highlight.js "~10.7.0"
|
||||
|
||||
lpad-align@^1.0.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/lpad-align/-/lpad-align-1.1.2.tgz#21f600ac1c3095c3c6e497ee67271ee08481fe9e"
|
||||
|
||||
Reference in New Issue
Block a user