prosemirror-highlight 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 ocavue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# prosemirror-highlight
+
+[![NPM version](https://img.shields.io/npm/v/prosemirror-highlight?color=a1b858&label=)](https://www.npmjs.com/package/prosemirror-highlight)
+
+Highlight your code blocks in ProseMirror, with any syntax highlighter you want.
+
+## Usage
+
+### With [Shiki]
+
+```ts
+import { getHighlighter, setCDN } from 'shiki'
+
+import { createHighlightPlugin } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/shiki'
+
+setCDN('https://unpkg.com/shiki@0.14.6/')
+
+const highlighter = await getHighlighter({
+  theme: 'github-light',
+  langs: ['javascript', 'typescript', 'python'],
+})
+const parser = createParser(highlighter)
+export const shikiPlugin = createHighlightPlugin({ parser })
+```
+
+### With [lowlight] (based on [Highlight.js])
+
+```ts
+import 'highlight.js/styles/default.css'
+
+import { common, createLowlight } from 'lowlight'
+
+import { createHighlightPlugin } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/lowlight'
+
+const lowlight = createLowlight(common)
+const parser = createParser(lowlight)
+export const lowlightPlugin = createHighlightPlugin({ parser })
+```
+
+## Credits
+
+- [prosemirror-highlightjs] - Highlight.js syntax highlighting for ProseMirror
+
+## License
+
+MIT
+
+[prosemirror-highlightjs]: https://github.com/b-kelly/prosemirror-highlightjs
+[lowlight]: https://github.com/wooorm/lowlight
+[Highlight.js]: https://github.com/highlightjs/highlight.js
+[Shiki]: https://github.com/shikijs/shiki

package/dist/chunk-YSQDPG26.js

@@ -0,0 +1,30 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __commonJS,
+  __toESM
+};

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+import { Transaction, Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
+import { P as Parser, L as LanguageExtractor } from './types-wUmJTPF3.js';
+
+/**
+ * Represents a cache of doc positions to the node and decorations at that position
+ */
+declare class DecorationCache {
+    private cache;
+    constructor(cache?: Map<number, {
+        node: Node;
+        decorations: Decoration[];
+    }>);
+    /**
+     * Gets the cache entry at the given doc position, or null if it doesn't exist
+     * @param pos The doc position of the node you want the cache for
+     */
+    get(pos: number): {
+        node: Node;
+        decorations: Decoration[];
+    } | undefined;
+    /**
+     * Sets the cache entry at the given position with the give node/decoration
+     * values
+     * @param pos The doc position of the node to set the cache for
+     * @param node The node to place in cache
+     * @param decorations The decorations to place in cache
+     */
+    set(pos: number, node: Node, decorations: Decoration[]): void;
+    /**
+     * Removes the value at the oldPos (if it exists) and sets the new position to
+     * the given values
+     * @param oldPos The old node position to overwrite
+     * @param newPos The new node position to set the cache for
+     * @param node The new node to place in cache
+     * @param decorations The new decorations to place in cache
+     */
+    private replace;
+    /**
+     * Removes the cache entry at the given position
+     * @param pos The doc position to remove from cache
+     */
+    private remove;
+    /**
+     * Invalidates the cache by removing all decoration entries on nodes that have
+     * changed, updating the positions of the nodes that haven't and removing all
+     * the entries that have been deleted; NOTE: this does not affect the current
+     * cache, but returns an entirely new one
+     * @param tr A transaction to map the current cache to
+     */
+    invalidate(tr: Transaction): DecorationCache;
+}
+
+/**
+ * Describes the current state of the highlightPlugin
+ */
+interface HighlightPluginState {
+    cache: DecorationCache;
+    decorations: DecorationSet;
+}
+/**
+ * Creates a plugin that highlights the contents of all nodes (via Decorations)
+ * with a type passed in blockTypes
+ */
+declare function createHighlightPlugin({ parser, nodeTypes, languageExtractor, }: {
+    /**
+     * A function that returns an array of decorations for the given node text
+     * content, language, and position.
+     */
+    parser: Parser;
+    /**
+     * An array containing all the node type name to target for highlighting.
+     *
+     * @default ['code_block']
+     */
+    nodeTypes?: string[];
+    /**
+     * A function that returns the language string to use when highlighting that
+     * node. By default, it returns `node.attrs.language`.
+     */
+    languageExtractor?: LanguageExtractor;
+}): Plugin<HighlightPluginState>;
+
+export { DecorationCache, type HighlightPluginState, createHighlightPlugin };

package/dist/index.js

@@ -0,0 +1,157 @@
+import "./chunk-YSQDPG26.js";
+
+// src/plugin.ts
+import "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+
+// src/cache.ts
+import "prosemirror-model";
+import "prosemirror-state";
+import "prosemirror-view";
+var DecorationCache = class _DecorationCache {
+  constructor(cache) {
+    this.cache = new Map(cache);
+  }
+  /**
+   * Gets the cache entry at the given doc position, or null if it doesn't exist
+   * @param pos The doc position of the node you want the cache for
+   */
+  get(pos) {
+    return this.cache.get(pos);
+  }
+  /**
+   * Sets the cache entry at the given position with the give node/decoration
+   * values
+   * @param pos The doc position of the node to set the cache for
+   * @param node The node to place in cache
+   * @param decorations The decorations to place in cache
+   */
+  set(pos, node, decorations) {
+    if (pos < 0) {
+      return;
+    }
+    this.cache.set(pos, { node, decorations });
+  }
+  /**
+   * Removes the value at the oldPos (if it exists) and sets the new position to
+   * the given values
+   * @param oldPos The old node position to overwrite
+   * @param newPos The new node position to set the cache for
+   * @param node The new node to place in cache
+   * @param decorations The new decorations to place in cache
+   */
+  replace(oldPos, newPos, node, decorations) {
+    this.remove(oldPos);
+    this.set(newPos, node, decorations);
+  }
+  /**
+   * Removes the cache entry at the given position
+   * @param pos The doc position to remove from cache
+   */
+  remove(pos) {
+    this.cache.delete(pos);
+  }
+  /**
+   * Invalidates the cache by removing all decoration entries on nodes that have
+   * changed, updating the positions of the nodes that haven't and removing all
+   * the entries that have been deleted; NOTE: this does not affect the current
+   * cache, but returns an entirely new one
+   * @param tr A transaction to map the current cache to
+   */
+  invalidate(tr) {
+    const returnCache = new _DecorationCache(this.cache);
+    const mapping = tr.mapping;
+    this.cache.forEach(({ node, decorations }, pos) => {
+      if (pos < 0) {
+        return;
+      }
+      const result = mapping.mapResult(pos);
+      const mappedNode = tr.doc.nodeAt(result.pos);
+      if (result.deleted || !(mappedNode == null ? void 0 : mappedNode.eq(node))) {
+        returnCache.remove(pos);
+      } else if (pos !== result.pos) {
+        const updatedDecorations = decorations.map((d) => {
+          return d.map(mapping, 0, 0);
+        }).filter((d) => d != null);
+        returnCache.replace(pos, result.pos, mappedNode, updatedDecorations);
+      }
+    });
+    return returnCache;
+  }
+};
+
+// src/plugin.ts
+function createHighlightPlugin({
+  parser,
+  nodeTypes = ["code_block"],
+  languageExtractor = (node) => node.attrs.language
+}) {
+  const key = new PluginKey();
+  return new Plugin({
+    key,
+    state: {
+      init(_, instance) {
+        const cache = new DecorationCache();
+        const decorations = getDecorationSet(
+          instance.doc,
+          parser,
+          nodeTypes,
+          languageExtractor,
+          cache
+        );
+        return { cache, decorations };
+      },
+      apply(tr, data) {
+        const cache = data.cache.invalidate(tr);
+        if (!tr.docChanged) {
+          const decorations2 = data.decorations.map(tr.mapping, tr.doc);
+          return { cache, decorations: decorations2 };
+        }
+        const decorations = getDecorationSet(
+          tr.doc,
+          parser,
+          nodeTypes,
+          languageExtractor,
+          cache
+        );
+        return { cache, decorations };
+      }
+    },
+    props: {
+      decorations(state) {
+        var _a;
+        return (_a = this.getState(state)) == null ? void 0 : _a.decorations;
+      }
+    }
+  });
+}
+function getDecorationSet(doc, parser, nodeTypes, languageExtractor, cache) {
+  const result = [];
+  doc.descendants((node, pos) => {
+    if (!node.type.isTextblock) {
+      return true;
+    }
+    if (nodeTypes.includes(node.type.name)) {
+      const language = languageExtractor(node);
+      const cached = cache.get(pos);
+      if (cached) {
+        result.push(...cached.decorations);
+      } else {
+        const decorations = parser({
+          content: node.textContent,
+          language: language || void 0,
+          pos
+        });
+        cache.set(pos, node, decorations);
+        result.push(...decorations);
+      }
+    }
+    return false;
+  });
+  return DecorationSet.create(doc, result);
+}
+export {
+  DecorationCache,
+  createHighlightPlugin
+};

package/dist/lowlight.d.ts

@@ -0,0 +1,12 @@
+import { Root } from 'hast';
+import { P as Parser } from './types-wUmJTPF3.js';
+import 'prosemirror-model';
+import 'prosemirror-view';
+
+type Lowlight = {
+    highlight: (language: string, value: string) => Root;
+    highlightAuto: (value: string) => Root;
+};
+declare function createParser(lowlight: Lowlight): Parser;
+
+export { type Lowlight, createParser };

package/dist/lowlight.js

@@ -0,0 +1,56 @@
+import "./chunk-YSQDPG26.js";
+
+// src/lowlight.ts
+import { Decoration } from "prosemirror-view";
+function createParser(lowlight) {
+  return function highlighter({ content, language, pos }) {
+    const root = language ? lowlight.highlight(language, content) : lowlight.highlightAuto(content);
+    const decorations = [];
+    const from = pos + 1;
+    fillFromRoot(decorations, root, from);
+    return decorations;
+  };
+}
+function fillFromRoot(decorations, node, from) {
+  for (const child of node.children) {
+    from = fillFromRootContent(decorations, child, from);
+  }
+}
+function fillFromRootContent(decorations, node, from) {
+  if (node.type === "element") {
+    const to = from + getElementSize(node);
+    const { className, ...rest } = node.properties;
+    decorations.push(
+      Decoration.inline(from, to, {
+        class: className ? Array.isArray(className) ? className.join(" ") : String(className) : void 0,
+        ...rest,
+        nodeName: node.tagName
+      })
+    );
+    return to;
+  } else if (node.type === "text") {
+    return from + node.value.length;
+  } else {
+    return from;
+  }
+}
+function getElementSize(node) {
+  let size = 0;
+  for (const child of node.children) {
+    size += getElementContentSize(child);
+  }
+  return size;
+}
+function getElementContentSize(node) {
+  switch (node.type) {
+    case "element":
+      return getElementSize(node);
+    case "text":
+      return node.value.length;
+    default:
+      return 0;
+  }
+}
+export {
+  createParser
+};

package/dist/shiki.d.ts

@@ -0,0 +1,8 @@
+import { Highlighter } from 'shiki';
+import { P as Parser } from './types-wUmJTPF3.js';
+import 'prosemirror-model';
+import 'prosemirror-view';
+
+declare function createParser(highlighter: Highlighter): Parser;
+
+export { createParser };