@prosekit/extensions 0.0.7 → 0.0.8

package/dist/prosekit-extensions-code-block.d.ts

@@ -0,0 +1,27 @@
+import * as _prosekit_core from '@prosekit/core';
+import { HLJSApi } from 'highlight.js';
+
+interface CodeBlockAttrs {
+    language?: string;
+}
+
+declare function addCodeBlockSpec(): _prosekit_core.Extension<{
+    NODES: "codeBlock";
+}>;
+declare function addCodeBlockInputRule(): _prosekit_core.Extension<_prosekit_core.ExtensionTyping<string, string, _prosekit_core.CommandArgs>>;
+declare function addCodeBlockCommands(): _prosekit_core.Extension<{
+    COMMAND_ARGS: {
+        setCodeBlockLanguage: [language: string];
+    };
+}>;
+/** @public */
+declare function addCodeBlock(options?: {
+    hljs?: HLJSApi;
+}): _prosekit_core.Extension<{
+    NODES: "codeBlock";
+    COMMAND_ARGS: {
+        setCodeBlockLanguage: [language: string];
+    };
+}>;
+
+export { CodeBlockAttrs, addCodeBlock, addCodeBlockCommands, addCodeBlockInputRule, addCodeBlockSpec };

package/dist/prosekit-extensions-code-block.js

@@ -0,0 +1,123 @@
+// src/code-block/index.ts
+import {
+  addCommands,
+  addInputRule,
+  addNodeSpec,
+  defineExtension,
+  getNodeType
+} from "@prosekit/core";
+import { textblockTypeInputRule } from "@prosekit/pm/inputrules";
+
+// src/code-block/code-block-highlight.ts
+import { addPlugin } from "@prosekit/core";
+import { PluginKey, ProseMirrorPlugin } from "@prosekit/pm/state";
+import { DecorationSet } from "@prosekit/pm/view";
+import { getHighlightDecorations } from "prosemirror-highlightjs";
+function addCodeBlockHighlight(options) {
+  const hljs = options.hljs;
+  const plugin = new ProseMirrorPlugin({
+    key,
+    state: {
+      init(_config, state) {
+        const decorations = hljs ? getHighlightDecorations(
+          state.doc,
+          hljs,
+          blockTypes,
+          languageExtractor
+        ) : [];
+        return DecorationSet.create(state.doc, decorations);
+      },
+      apply(tr, set) {
+        if (!tr.docChanged) {
+          return set.map(tr.mapping, tr.doc);
+        }
+        const decorations = hljs ? getHighlightDecorations(tr.doc, hljs, blockTypes, languageExtractor) : [];
+        return DecorationSet.create(tr.doc, decorations);
+      }
+    },
+    props: {
+      decorations(state) {
+        return key.getState(state);
+      }
+    }
+  });
+  return addPlugin({
+    plugins: () => {
+      return [plugin];
+    }
+  });
+}
+var key = new PluginKey("prosekit-code-block-highlight");
+var blockTypes = ["codeBlock"];
+function languageExtractor(node) {
+  return node.attrs.language || "javascript";
+}
+
+// src/code-block/index.ts
+function addCodeBlockSpec() {
+  return addNodeSpec({
+    name: "codeBlock",
+    content: "text*",
+    group: "block",
+    code: true,
+    defining: true,
+    marks: "",
+    attrs: { language: { default: "" } },
+    parseDOM: [
+      {
+        tag: "pre",
+        preserveWhitespace: "full",
+        getAttrs: (node) => ({
+          language: node.getAttribute("data-language") || ""
+        })
+      }
+    ],
+    toDOM(node) {
+      const attrs = node.attrs;
+      return [
+        "pre",
+        { "data-language": attrs.language, class: "hljs" },
+        ["code", 0]
+      ];
+    }
+  });
+}
+function addCodeBlockInputRule() {
+  return addInputRule(({ schema }) => {
+    const nodeType = getNodeType(schema, "codeBlock");
+    const getAttrs = (match) => {
+      return { language: match[1] || "" };
+    };
+    const inputRule = textblockTypeInputRule(/^```(\S*)\s$/, nodeType, getAttrs);
+    return [inputRule];
+  });
+}
+function addCodeBlockCommands() {
+  return addCommands({
+    setCodeBlockLanguage: (language) => (state, dispatch) => {
+      const pos = state.selection.$from.before();
+      const codeBlock = state.doc.nodeAt(pos);
+      if (!codeBlock || codeBlock.type.name !== "codeBlock") {
+        return false;
+      }
+      const { tr } = state;
+      tr.setNodeMarkup(pos, void 0, { language });
+      dispatch == null ? void 0 : dispatch(tr);
+      return true;
+    }
+  });
+}
+function addCodeBlock(options) {
+  return defineExtension([
+    addCodeBlockSpec(),
+    addCodeBlockInputRule(),
+    addCodeBlockHighlight({ hljs: options == null ? void 0 : options.hljs }),
+    addCodeBlockCommands()
+  ]);
+}
+export {
+  addCodeBlock,
+  addCodeBlockCommands,
+  addCodeBlockInputRule,
+  addCodeBlockSpec
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/extensions",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -50,6 +50,11 @@
       "import": "./dist/prosekit-extensions-code.js",
       "default": "./dist/prosekit-extensions-code.js"
     },
+    "./code-block": {
+      "types": "./dist/prosekit-extensions-code-block.d.ts",
+      "import": "./dist/prosekit-extensions-code-block.js",
+      "default": "./dist/prosekit-extensions-code-block.js"
+    },
     "./heading": {
       "types": "./dist/prosekit-extensions-heading.d.ts",
       "import": "./dist/prosekit-extensions-heading.js",
@@ -98,7 +103,9 @@
   "dependencies": {
     "@prosekit/core": "^0.0.7",
     "@prosekit/pm": "^0.0.3",
-    "prosemirror-flat-list": "^0.4.1"
+    "highlight.js": "^11.8.0",
+    "prosemirror-flat-list": "^0.4.1",
+    "prosemirror-highlightjs": "^0.9.1"
   },
   "devDependencies": {
     "@prosekit/dev": "*",
@@ -128,6 +135,9 @@
       "code": [
         "./dist/prosekit-extensions-code.d.ts"
       ],
+      "code-block": [
+        "./dist/prosekit-extensions-code-block.d.ts"
+      ],
       "heading": [
         "./dist/prosekit-extensions-heading.d.ts"
       ],