@rcarls/rc-textarea-adapters 0.1.0

package/README.md

@@ -0,0 +1,25 @@
+# @rcarls/rc-textarea-adapters
+
+Adapter factories for lezer, unified, and shiki tokenizers for
+[@rcarls/rc-textarea](../rc-textarea/).
+
+Part of the [rc-webcomponents](https://github.com/richardcarls/rc-webcomponents) library.
+
+## Documentation
+
+Full API, usage examples, and keyboard/accessibility notes are on the
+[rc-webcomponents docs site](https://richardcarls.github.io/rc-webcomponents/).
+
+## Peer dependencies
+
+All adapters are optional. Install only the peer(s) you use:
+
+| Adapter | Peer dependency |
+| --- | --- |
+| Lezer | `@lezer/common` |
+| Unified | `unified` |
+| Shiki | `shiki` |
+
+## License
+
+MIT

package/dist/rc-textarea-adapters.js

@@ -0,0 +1,57 @@
+function p(o, s) {
+  return {
+    update(r, i) {
+      const e = o.parse(r).cursor(), n = [];
+      do {
+        const t = s[e.type.name];
+        t && n.push({ type: "mark", from: e.from, to: e.to, ...t });
+      } while (e.next());
+      i.setDecorations(n);
+    }
+  };
+}
+function l(o, s) {
+  if (s(o), o.children)
+    for (const r of o.children) l(r, s);
+}
+function d(o, s) {
+  return {
+    update(r, i) {
+      const f = o.parse(r), e = [];
+      l(f, (n) => {
+        const t = s[n.type], a = n.position?.start.offset, c = n.position?.end.offset;
+        t && a !== void 0 && c !== void 0 && e.push({ type: "mark", from: a, to: c, ...t });
+      }), i.setDecorations(e);
+    }
+  };
+}
+function h(o, s, r) {
+  return {
+    async update(i, f) {
+      const e = await o.codeToTokens(i, {
+        lang: s,
+        ...r ? { theme: r } : {}
+      }), n = [];
+      let t = 0;
+      for (const a of e.tokens) {
+        for (const c of a) {
+          const u = c.content.length;
+          c.color && n.push({
+            type: "mark",
+            from: t,
+            to: t + u,
+            color: c.color
+          }), t += u;
+        }
+        t += 1;
+      }
+      f.setDecorations(n);
+    }
+  };
+}
+export {
+  p as createLezerPlugin,
+  h as createShikiPlugin,
+  d as createUnifiedPlugin
+};
+//# sourceMappingURL=rc-textarea-adapters.js.map

package/dist/rc-textarea-adapters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-textarea-adapters.js","sources":["../src/lezer.ts","../src/unified.ts","../src/shiki.ts"],"sourcesContent":["import type { RCTextareaPlugin, MarkDecoration, DecorationInput } from '@rcarls/rc-textarea';\n\n/** Minimal structural shape of a lezer `Parser` / language's `.parser`. */\ninterface LezerParser {\n  parse(input: string): {\n    cursor(): LezerCursor;\n  };\n}\n\ninterface LezerCursor {\n  type: { name: string };\n  from: number;\n  to: number;\n  next(): boolean;\n}\n\n/**\n * Create an `rc-textarea` plugin that uses a lezer parser (e.g. any `@codemirror/lang-*` package)\n * to produce syntax decorations.\n *\n * Lezer node offsets (`.from` / `.to`) are already absolute character offsets, identical to\n * rc-textarea's coordinate space — no conversion is needed.\n *\n * ```ts\n * import { javascript } from '@codemirror/lang-javascript';\n * import { createLezerPlugin } from '@rcarls/rc-textarea-adapters';\n *\n * editor.usePlugin(createLezerPlugin(javascript().language.parser, {\n *   VariableDeclaration: { color: 'var(--color-keyword)' },\n *   String:              { color: 'var(--color-string)' },\n *   LineComment:         { italic: true, color: 'var(--color-comment)' },\n * }));\n * ```\n */\nexport function createLezerPlugin(\n  parser: LezerParser,\n  nodeTypeToStyle: Record<string, Omit<MarkDecoration, 'id' | 'type' | 'from' | 'to'>>,\n): RCTextareaPlugin {\n  return {\n    update(value, api) {\n      const tree = parser.parse(value);\n      const cursor = tree.cursor();\n      const decorations: DecorationInput[] = [];\n      do {\n        const style = nodeTypeToStyle[cursor.type.name];\n        if (style) {\n          decorations.push({ type: 'mark', from: cursor.from, to: cursor.to, ...style });\n        }\n      } while (cursor.next());\n      api.setDecorations(decorations);\n    },\n  };\n}\n","import type { RCTextareaPlugin, MarkDecoration, DecorationInput } from '@rcarls/rc-textarea';\n\n/** Minimal structural shape of a unist `Node` (shared by mdast, hast, etc.). */\ninterface UnistNode {\n  type: string;\n  position?: {\n    start: { offset?: number };\n    end: { offset?: number };\n  };\n  children?: UnistNode[];\n}\n\n/** Minimal structural shape of a unified `Processor`. */\ninterface UnifiedProcessor {\n  parse(value: string): UnistNode;\n}\n\nfunction visit(node: UnistNode, visitor: (n: UnistNode) => void): void {\n  visitor(node);\n  if (node.children) {\n    for (const child of node.children) visit(child, visitor);\n  }\n}\n\n/**\n * Create an `rc-textarea` plugin that uses a unified processor (e.g. `remark-parse` for\n * Markdown, `rehype-parse` for HTML) to produce syntax decorations.\n *\n * Node `position.start.offset` / `position.end.offset` values are absolute character offsets,\n * identical to rc-textarea's coordinate space — no conversion is needed.\n *\n * ```ts\n * import { unified } from 'unified';\n * import remarkParse from 'remark-parse';\n * import { createUnifiedPlugin } from '@rcarls/rc-textarea-adapters';\n *\n * const processor = unified().use(remarkParse);\n *\n * editor.usePlugin(createUnifiedPlugin(processor, {\n *   strong:     { bold: true },\n *   emphasis:   { italic: true },\n *   inlineCode: { className: 'md-inline-code' },\n *   heading:    { bold: true, color: 'var(--color-heading)' },\n * }));\n * ```\n */\nexport function createUnifiedPlugin(\n  processor: UnifiedProcessor,\n  nodeTypeToStyle: Record<string, Omit<MarkDecoration, 'id' | 'type' | 'from' | 'to'>>,\n): RCTextareaPlugin {\n  return {\n    update(value, api) {\n      const tree = processor.parse(value);\n      const decorations: DecorationInput[] = [];\n      visit(tree, (node) => {\n        const style = nodeTypeToStyle[node.type];\n        const start = node.position?.start.offset;\n        const end = node.position?.end.offset;\n        if (style && start !== undefined && end !== undefined) {\n          decorations.push({ type: 'mark', from: start, to: end, ...style });\n        }\n      });\n      api.setDecorations(decorations);\n    },\n  };\n}\n","import type { RCTextareaPlugin, DecorationInput } from '@rcarls/rc-textarea';\n\ninterface ShikiToken {\n  content: string;\n  color?: string;\n}\n\n/** Minimal structural shape of a shiki `Highlighter`. */\ninterface ShikiHighlighter {\n  codeToTokens(\n    code: string,\n    opts: { lang: string; theme?: string },\n  ): Promise<{ tokens: ShikiToken[][] }>;\n}\n\n/**\n * Create an `rc-textarea` plugin that uses a [shiki](https://shiki.style/) `Highlighter`\n * to produce syntax decorations.\n *\n * Shiki tokens carry line-relative offsets; this adapter converts them to the absolute\n * character offsets that rc-textarea expects by tracking position across lines.\n *\n * ```ts\n * import { createHighlighter } from 'shiki';\n * import { createShikiPlugin } from '@rcarls/rc-textarea-adapters';\n *\n * const highlighter = await createHighlighter({\n *   themes: ['github-dark'],\n *   langs: ['typescript'],\n * });\n *\n * editor.usePlugin(createShikiPlugin(highlighter, 'typescript', 'github-dark'));\n * ```\n */\nexport function createShikiPlugin(\n  highlighter: ShikiHighlighter,\n  lang: string,\n  theme?: string,\n): RCTextareaPlugin {\n  return {\n    async update(value, api) {\n      const result = await highlighter.codeToTokens(value, {\n        lang,\n        ...(theme ? { theme } : {}),\n      });\n\n      const decorations: DecorationInput[] = [];\n      let offset = 0;\n\n      for (const line of result.tokens) {\n        for (const token of line) {\n          const len = token.content.length;\n          if (token.color) {\n            decorations.push({\n              type: 'mark',\n              from: offset,\n              to: offset + len,\n              color: token.color,\n            });\n          }\n          offset += len;\n        }\n        offset += 1; // '\\n'\n      }\n\n      api.setDecorations(decorations);\n    },\n  };\n}\n"],"names":["createLezerPlugin","parser","nodeTypeToStyle","value","api","cursor","decorations","style","visit","node","visitor","child","createUnifiedPlugin","processor","tree","start","end","createShikiPlugin","highlighter","lang","theme","result","offset","line","token","len"],"mappings":"AAkCO,SAASA,EACdC,GACAC,GACkB;AAClB,SAAO;AAAA,IACL,OAAOC,GAAOC,GAAK;AAEjB,YAAMC,IADOJ,EAAO,MAAME,CAAK,EACX,OAAA,GACdG,IAAiC,CAAA;AACvC,SAAG;AACD,cAAMC,IAAQL,EAAgBG,EAAO,KAAK,IAAI;AAC9C,QAAIE,KACFD,EAAY,KAAK,EAAE,MAAM,QAAQ,MAAMD,EAAO,MAAM,IAAIA,EAAO,IAAI,GAAGE,EAAA,CAAO;AAAA,MAEjF,SAASF,EAAO,KAAA;AAChB,MAAAD,EAAI,eAAeE,CAAW;AAAA,IAChC;AAAA,EAAA;AAEJ;ACnCA,SAASE,EAAMC,GAAiBC,GAAuC;AAErE,MADAA,EAAQD,CAAI,GACRA,EAAK;AACP,eAAWE,KAASF,EAAK,SAAU,CAAAD,EAAMG,GAAOD,CAAO;AAE3D;AAwBO,SAASE,EACdC,GACAX,GACkB;AAClB,SAAO;AAAA,IACL,OAAOC,GAAOC,GAAK;AACjB,YAAMU,IAAOD,EAAU,MAAMV,CAAK,GAC5BG,IAAiC,CAAA;AACvC,MAAAE,EAAMM,GAAM,CAACL,MAAS;AACpB,cAAMF,IAAQL,EAAgBO,EAAK,IAAI,GACjCM,IAAQN,EAAK,UAAU,MAAM,QAC7BO,IAAMP,EAAK,UAAU,IAAI;AAC/B,QAAIF,KAASQ,MAAU,UAAaC,MAAQ,UAC1CV,EAAY,KAAK,EAAE,MAAM,QAAQ,MAAMS,GAAO,IAAIC,GAAK,GAAGT,GAAO;AAAA,MAErE,CAAC,GACDH,EAAI,eAAeE,CAAW;AAAA,IAChC;AAAA,EAAA;AAEJ;AC/BO,SAASW,EACdC,GACAC,GACAC,GACkB;AAClB,SAAO;AAAA,IACL,MAAM,OAAOjB,GAAOC,GAAK;AACvB,YAAMiB,IAAS,MAAMH,EAAY,aAAaf,GAAO;AAAA,QACnD,MAAAgB;AAAA,QACA,GAAIC,IAAQ,EAAE,OAAAA,MAAU,CAAA;AAAA,MAAC,CAC1B,GAEKd,IAAiC,CAAA;AACvC,UAAIgB,IAAS;AAEb,iBAAWC,KAAQF,EAAO,QAAQ;AAChC,mBAAWG,KAASD,GAAM;AACxB,gBAAME,IAAMD,EAAM,QAAQ;AAC1B,UAAIA,EAAM,SACRlB,EAAY,KAAK;AAAA,YACf,MAAM;AAAA,YACN,MAAMgB;AAAA,YACN,IAAIA,IAASG;AAAA,YACb,OAAOD,EAAM;AAAA,UAAA,CACd,GAEHF,KAAUG;AAAA,QACZ;AACA,QAAAH,KAAU;AAAA,MACZ;AAEA,MAAAlB,EAAI,eAAeE,CAAW;AAAA,IAChC;AAAA,EAAA;AAEJ;"}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { createLezerPlugin } from './lezer.ts';
+export { createUnifiedPlugin } from './unified.ts';
+export { createShikiPlugin } from './shiki.ts';

package/dist/types/lezer.d.ts

@@ -0,0 +1,35 @@
+import { RCTextareaPlugin, MarkDecoration } from '@rcarls/rc-textarea';
+/** Minimal structural shape of a lezer `Parser` / language's `.parser`. */
+interface LezerParser {
+    parse(input: string): {
+        cursor(): LezerCursor;
+    };
+}
+interface LezerCursor {
+    type: {
+        name: string;
+    };
+    from: number;
+    to: number;
+    next(): boolean;
+}
+/**
+ * Create an `rc-textarea` plugin that uses a lezer parser (e.g. any `@codemirror/lang-*` package)
+ * to produce syntax decorations.
+ *
+ * Lezer node offsets (`.from` / `.to`) are already absolute character offsets, identical to
+ * rc-textarea's coordinate space — no conversion is needed.
+ *
+ * ```ts
+ * import { javascript } from '@codemirror/lang-javascript';
+ * import { createLezerPlugin } from '@rcarls/rc-textarea-adapters';
+ *
+ * editor.usePlugin(createLezerPlugin(javascript().language.parser, {
+ *   VariableDeclaration: { color: 'var(--color-keyword)' },
+ *   String:              { color: 'var(--color-string)' },
+ *   LineComment:         { italic: true, color: 'var(--color-comment)' },
+ * }));
+ * ```
+ */
+export declare function createLezerPlugin(parser: LezerParser, nodeTypeToStyle: Record<string, Omit<MarkDecoration, 'id' | 'type' | 'from' | 'to'>>): RCTextareaPlugin;
+export {};

package/dist/types/shiki.d.ts

@@ -0,0 +1,35 @@
+import { RCTextareaPlugin } from '@rcarls/rc-textarea';
+interface ShikiToken {
+    content: string;
+    color?: string;
+}
+/** Minimal structural shape of a shiki `Highlighter`. */
+interface ShikiHighlighter {
+    codeToTokens(code: string, opts: {
+        lang: string;
+        theme?: string;
+    }): Promise<{
+        tokens: ShikiToken[][];
+    }>;
+}
+/**
+ * Create an `rc-textarea` plugin that uses a [shiki](https://shiki.style/) `Highlighter`
+ * to produce syntax decorations.
+ *
+ * Shiki tokens carry line-relative offsets; this adapter converts them to the absolute
+ * character offsets that rc-textarea expects by tracking position across lines.
+ *
+ * ```ts
+ * import { createHighlighter } from 'shiki';
+ * import { createShikiPlugin } from '@rcarls/rc-textarea-adapters';
+ *
+ * const highlighter = await createHighlighter({
+ *   themes: ['github-dark'],
+ *   langs: ['typescript'],
+ * });
+ *
+ * editor.usePlugin(createShikiPlugin(highlighter, 'typescript', 'github-dark'));
+ * ```
+ */
+export declare function createShikiPlugin(highlighter: ShikiHighlighter, lang: string, theme?: string): RCTextareaPlugin;
+export {};

package/dist/types/unified.d.ts

@@ -0,0 +1,42 @@
+import { RCTextareaPlugin, MarkDecoration } from '@rcarls/rc-textarea';
+/** Minimal structural shape of a unist `Node` (shared by mdast, hast, etc.). */
+interface UnistNode {
+    type: string;
+    position?: {
+        start: {
+            offset?: number;
+        };
+        end: {
+            offset?: number;
+        };
+    };
+    children?: UnistNode[];
+}
+/** Minimal structural shape of a unified `Processor`. */
+interface UnifiedProcessor {
+    parse(value: string): UnistNode;
+}
+/**
+ * Create an `rc-textarea` plugin that uses a unified processor (e.g. `remark-parse` for
+ * Markdown, `rehype-parse` for HTML) to produce syntax decorations.
+ *
+ * Node `position.start.offset` / `position.end.offset` values are absolute character offsets,
+ * identical to rc-textarea's coordinate space — no conversion is needed.
+ *
+ * ```ts
+ * import { unified } from 'unified';
+ * import remarkParse from 'remark-parse';
+ * import { createUnifiedPlugin } from '@rcarls/rc-textarea-adapters';
+ *
+ * const processor = unified().use(remarkParse);
+ *
+ * editor.usePlugin(createUnifiedPlugin(processor, {
+ *   strong:     { bold: true },
+ *   emphasis:   { italic: true },
+ *   inlineCode: { className: 'md-inline-code' },
+ *   heading:    { bold: true, color: 'var(--color-heading)' },
+ * }));
+ * ```
+ */
+export declare function createUnifiedPlugin(processor: UnifiedProcessor, nodeTypeToStyle: Record<string, Omit<MarkDecoration, 'id' | 'type' | 'from' | 'to'>>): RCTextareaPlugin;
+export {};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@rcarls/rc-textarea-adapters",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Adapter factories for lezer, unified, and shiki tokenizers for rc-textarea",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-textarea-adapters"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-textarea-adapters.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-textarea-adapters/src/index.d.ts",
+        "default": "./dist/rc-textarea-adapters.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-textarea-adapters/src/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "@rcarls/rc-textarea": "workspace:^"
+  },
+  "peerDependencies": {
+    "@lezer/common": ">=1.0.0",
+    "shiki": ">=1.0.0",
+    "unified": ">=11.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lezer/common": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "unified": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}