Merge branch 'master' into markdown-paste

examples/Components/Routes/CodeHighlighting/examples.js

@@ -29,7 +29,11 @@ body, .usertext {
 
 
 export const ExplicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript'
+import css from 'highlight.js/lib/languages/css'
 import { Editor } from 'tiptap'
+import {
+  CodeBlockHighlight,
+} from 'tiptap-extensions'
 
 export default {
   components: {
@@ -38,7 +42,7 @@ export default {
   data() {
     return {
       extensions: [
-        new CodeBlockHighlightNode({
+        new CodeBlockHighlight({
           languages: {
             javascript,
             css,

packages/tiptap-commands/src/commands/nodeInputRule.js

@@ -0,0 +1,14 @@
+import { InputRule } from 'prosemirror-inputrules'
+
+export default function (regexp, type, getAttrs) {
+  return new InputRule(regexp, (state, match, start, end) => {
+    const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs
+    const { tr } = state
+
+    if (match[0]) {
+      tr.replaceWith(start - 1, end, type.create(attrs))
+    }
+
+    return tr
+  })
+}

packages/tiptap-commands/src/index.js

@@ -40,6 +40,7 @@ import {
 
 import insertText from './commands/insertText'
 import markInputRule from './commands/markInputRule'
+import nodeInputRule from './commands/nodeInputRule'
 import pasteRule from './commands/pasteRule'
 import markPasteRule from './commands/markPasteRule'
 import removeMark from './commands/removeMark'
@@ -93,6 +94,7 @@ export {
   insertText,
   markInputRule,
   markPasteRule,
+  nodeInputRule,
   pasteRule,
   removeMark,
   replaceText,

packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js

@@ -122,13 +122,16 @@ export default class CodeBlockHighlight extends Node {
           init(_, { doc }) {
             return getDecorations(doc)
           },
-          apply(tr, set) {
+          apply(transaction, decorationSet, oldState) {
             // TODO: find way to cache decorations
             // see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493
-            if (tr.docChanged) {
-              return getDecorations(tr.doc)
+
+            const previousNodeName = oldState.selection.$head.parent.type.name
+            if (transaction.docChanged && previousNodeName === 'code_block') {
+              return getDecorations(transaction.doc)
             }
-            return set.map(tr.mapping, tr.doc)
+
+            return decorationSet.map(transaction.mapping, transaction.doc)
           },
         },
         props: {

packages/tiptap-extensions/src/nodes/HorizontalRule.js

@@ -1,4 +1,5 @@
 import { Node } from 'tiptap'
+import { nodeInputRule } from 'tiptap-commands'
 
 export default class HorizontalRule extends Node {
   get name() {
@@ -16,4 +17,10 @@ export default class HorizontalRule extends Node {
   commands({ type }) {
     return () => (state, dispatch) => dispatch(state.tr.replaceSelectionWith(type.create()))
   }
+
+  inputRules({ type }) {
+    return [
+      nodeInputRule(/^(?:---|___\s|\*\*\*\s)$/, type),
+    ]
+  }
 }