add basic lowlight extension

packages/core/src/Editor.ts

@@ -58,6 +58,7 @@ export class Editor extends EventEmitter {
     parseOptions: {},
     enableInputRules: true,
     enablePasteRules: true,
+    onBeforeCreate: () => null,
     onCreate: () => null,
     onUpdate: () => null,
     onSelectionUpdate: () => null,
@@ -75,6 +76,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)

packages/core/src/Extension.ts

@@ -94,6 +94,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.
      */

packages/core/src/ExtensionManager.ts

@@ -43,6 +43,13 @@ export default class ExtensionManager {
         }
       }
 
+      // console.log(extension.config.onBeforeCreate)
+
+      if (typeof extension.config.onBeforeCreate === 'function') {
+        console.log('JOOO')
+        this.editor.on('beforeCreate', extension.config.onBeforeCreate.bind(context))
+      }
+
       if (typeof extension.config.onCreate === 'function') {
         this.editor.on('create', extension.config.onCreate.bind(context))
       }

packages/core/src/Mark.ts

@@ -104,6 +104,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.
      */

packages/core/src/Node.ts

@@ -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: NodeType,
+    }) => void) | null,
+
     /**
      * The editor is ready.
      */

packages/core/src/types.ts

@@ -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,
   onViewUpdate: (props: { editor: Editor }) => void,

packages/extension-code-block-lowlight/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-code-block-lowlight
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-code-block-lowlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code-block-lowlight.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-code-block-lowlight.svg)](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](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).

packages/extension-code-block-lowlight/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@tiptap/extension-code-block-lowlight",
+  "description": "code block extension for tiptap",
+  "version": "2.0.0-beta.1",
+  "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-lowlight": "^2.0.0-beta.1",
+    "@types/lowlight": "^0.0.1",
+    "lowlight": "^1.20.0",
+    "prosemirror-inputrules": "^1.1.3"
+  }
+}

packages/extension-code-block-lowlight/src/code-block-lowlight.ts

@@ -0,0 +1,35 @@
+import CodeBlock from '@tiptap/extension-code-block'
+import low from 'lowlight/lib/core'
+import { LowlightPlugin } from './lowlight-plugin'
+
+export interface CodeBlockLowlightOptions {
+  languageClassPrefix: string,
+  HTMLAttributes: {
+    [key: string]: any
+  },
+  languages: {
+    [key: string]: Function
+  },
+}
+
+export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
+  name: 'codeBlockLowlight',
+
+  defaultOptions: {
+    languageClassPrefix: 'language-',
+    HTMLAttributes: {},
+    languages: {},
+  },
+
+  onBeforeCreate() {
+    Object.entries(this.options.languages).forEach(([name, mapping]) => {
+      low.registerLanguage(name, mapping)
+    })
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      LowlightPlugin({ name: 'codeBlockLowlight' }),
+    ]
+  },
+})

packages/extension-code-block-lowlight/src/index.ts

@@ -0,0 +1,5 @@
+import { CodeBlockLowlight } from './code-block-lowlight'
+
+export * from './code-block-lowlight'
+
+export default CodeBlockLowlight

packages/extension-code-block-lowlight/src/lowlight-plugin.ts

@@ -0,0 +1,110 @@
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Node as ProsemirrorNode } from 'prosemirror-model'
+import low from 'lowlight/lib/core'
+
+type NodeWithPos = {
+  node: ProsemirrorNode,
+  pos: number,
+}
+
+const findBlockNodes = (doc: ProsemirrorNode) => {
+  const nodes: NodeWithPos[] = []
+
+  doc.descendants((node, pos) => {
+    if (node.isBlock) {
+      nodes.push({
+        node,
+        pos,
+      })
+    }
+  })
+
+  return nodes
+}
+
+function getDecorations({ doc, name }: { doc: ProsemirrorNode, name: string}) {
+  const decorations: Decoration[] = []
+  const blocks = findBlockNodes(doc).filter(block => block.node.type.name === name)
+
+  function parseNodes(nodes: any[], className: string[] = []): any {
+    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,
+      }
+    })
+  }
+
+  blocks.forEach(block => {
+    let startPos = block.pos + 1
+    const nodes = low.highlightAuto(block.node.textContent).value
+
+    parseNodes(nodes)
+      .flat()
+      .map((node: any) => {
+        const from = startPos
+        const to = from + node.text.length
+
+        startPos = to
+
+        return {
+          ...node,
+          from,
+          to,
+        }
+      })
+      .forEach((node: any) => {
+        const decoration = Decoration.inline(node.from, node.to, {
+          class: node.classes.join(' '),
+        })
+        decorations.push(decoration)
+      })
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+export function LowlightPlugin({ name }: { name: string }) {
+  return new Plugin({
+    key: new PluginKey('highlight'),
+
+    state: {
+      init: (_, { doc }) => getDecorations({ doc, name }),
+      apply: (transaction, decorationSet, oldState, newState) => {
+        // TODO: find way to cache decorations
+        // https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493
+        const oldNodeName = oldState.selection.$head.parent.type.name
+        const newNodeName = newState.selection.$head.parent.type.name
+        const oldNodes = findBlockNodes(oldState.doc)
+          .filter(node => node.node.type.name === name)
+        const newNodes = findBlockNodes(newState.doc)
+          .filter(node => node.node.type.name === name)
+
+        // Apply decorations if selection includes named node, or transaction changes named node.
+        if (transaction.docChanged && ([oldNodeName, newNodeName].includes(name)
+          || newNodes.length !== oldNodes.length)) {
+          return getDecorations({ doc: transaction.doc, name })
+        }
+
+        return decorationSet.map(transaction.mapping, transaction.doc)
+      },
+    },
+
+    props: {
+      decorations(state) {
+        return this.getState(state)
+      },
+    },
+  })
+}