Merge branch 'main' into feature/live-demo

packages/core/index.ts

@@ -12,6 +12,7 @@ export { default as nodeInputRule } from './src/inputRules/nodeInputRule'
 export { default as markInputRule } from './src/inputRules/markInputRule'
 export { default as markPasteRule } from './src/pasteRules/markPasteRule'
 
+export { default as capitalize } from './src/utils/capitalize'
 export { default as getSchema } from './src/utils/getSchema'
 export { default as generateHtml } from './src/utils/generateHtml'
 export { default as getHtmlFromFragment } from './src/utils/getHtmlFromFragment'

packages/core/src/Editor.ts

@@ -10,6 +10,7 @@ import getMarkAttrs from './utils/getMarkAttrs'
 import removeElement from './utils/removeElement'
 import getSchemaTypeByName from './utils/getSchemaTypeByName'
 import getHtmlFromFragment from './utils/getHtmlFromFragment'
+import createStyleTag from './utils/createStyleTag'
 import CommandManager from './CommandManager'
 import ExtensionManager from './ExtensionManager'
 import EventEmitter from './EventEmitter'
@@ -18,6 +19,7 @@ import Node from './Node'
 import Mark from './Mark'
 import defaultPlugins from './plugins'
 import * as coreCommands from './commands'
+import style from './style'
 
 export type Command = (props: {
   editor: Editor,
@@ -118,10 +120,7 @@ export class Editor extends EventEmitter {
     this.extensionManager.resolveConfigs()
     this.createView()
     this.registerCommands(coreCommands)
-
-    if (this.options.injectCSS) {
-      require('./style.css')
-    }
+    this.injectCSS()
 
     this.proxy.focus(this.options.autoFocus)
   }
@@ -143,6 +142,15 @@ export class Editor extends EventEmitter {
     return this.commandManager.createChain()
   }
 
+  /**
+   * Inject CSS styles.
+   */
+  private injectCSS() {
+    if (this.options.injectCSS && document) {
+      this.css = createStyleTag(style)
+    }
+  }
+
   /**
    * Update editor options.
    *

packages/core/src/style.ts

@@ -1,4 +1,4 @@
-.ProseMirror {
+const style = `.ProseMirror {
   position: relative;
 }
 
@@ -49,4 +49,6 @@
 
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
-}
+}`
+
+export default style

packages/core/src/utils/createStyleTag.ts

@@ -0,0 +1,8 @@
+export default function createStyleTag(style: string): HTMLStyleElement {
+  const styleNode = document.createElement('style')
+
+  styleNode.innerHTML = style
+  document.getElementsByTagName('head')[0].appendChild(styleNode)
+
+  return styleNode
+}

packages/extension-code-block/index.ts

@@ -1,6 +1,10 @@
 import { Command, Node } from '@tiptap/core'
 import { textblockTypeInputRule } from 'prosemirror-inputrules'
 
+export interface CodeBlockOptions {
+  languageClassPrefix: string,
+}
+
 export type CodeBlockCommand = () => Command
 
 declare module '@tiptap/core/src/Editor' {
@@ -11,9 +15,12 @@ declare module '@tiptap/core/src/Editor' {
 
 export const inputRegex = /^```(?<language>[a-z]*)? $/
 
-export default new Node()
+export default new Node<CodeBlockOptions>()
   .name('code_block')
-  .schema(() => ({
+  .defaults({
+    languageClassPrefix: 'language-',
+  })
+  .schema(({ options }) => ({
     attrs: {
       language: {
         default: null,
@@ -26,9 +33,25 @@ export default new Node()
     defining: true,
     draggable: false,
     parseDOM: [
-      { tag: 'pre', preserveWhitespace: 'full' },
+      {
+        tag: 'pre',
+        preserveWhitespace: 'full',
+        getAttrs(node) {
+          const classAttribute = (node as Element).firstElementChild?.getAttribute('class')
+
+          if (!classAttribute) {
+            return null
+          }
+
+          const regexLanguageClassPrefix = new RegExp(`^(${options.languageClassPrefix})`)
+
+          return { language: classAttribute.replace(regexLanguageClassPrefix, '') }
+        },
+      },
     ],
-    toDOM: node => ['pre', ['code', { class: node.attrs.language && `language-${node.attrs.language}` }, 0]],
+    toDOM: node => ['pre', ['code', {
+      class: node.attrs.language && options.languageClassPrefix + node.attrs.language,
+    }, 0]],
   }))
   .commands(({ name }) => ({
     codeBlock: attrs => ({ commands }) => {