|
@@ -253,20 +253,74 @@ session?.respond("query") // filter results
|
|
|
session?.close() // end the session
|
|
session?.close() // end the session
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-### Custom Extensions
|
|
|
|
|
|
|
+## Extensibility
|
|
|
|
|
|
|
|
-Add inline syntax by creating a `MarkdownPattern`:
|
|
|
|
|
|
|
+The editor exposes three extension points for third-party code.
|
|
|
|
|
|
|
|
-```ts
|
|
|
|
|
-import type { MarkdownPattern } from "@enesis/editor"
|
|
|
|
|
|
|
+### 1. Custom Decoration Rules (MarkdownRuleEngine)
|
|
|
|
|
+
|
|
|
|
|
+Add new inline or block-level syntax by passing extra rules to the engine. Rules are standard Lezer AST visitors — same API as the built-in ones.
|
|
|
|
|
+
|
|
|
|
|
+```typescript
|
|
|
|
|
+import { MarkdownRuleEngine, type BlockRule, type MarkdownRule } from "@enesis/editor"
|
|
|
|
|
|
|
|
-const myPattern: MarkdownPattern = {
|
|
|
|
|
- name: "custom",
|
|
|
|
|
- parseNode: { name: "MyNode", type: "InlineCode" },
|
|
|
|
|
- delimiter: { open: "~~", close: "~~" },
|
|
|
|
|
|
|
+const myInlineRule: MarkdownRule<unknown> = {
|
|
|
|
|
+ name: "my-inline",
|
|
|
|
|
+ nodeTypes: ["MyNodeType"],
|
|
|
|
|
+ match(node) { return node.type.name === "MyNodeType" },
|
|
|
|
|
+ run(node, ctx) {
|
|
|
|
|
+ return [{ type: "content", from: node.from, to: node.to, className: "my-decoration" }]
|
|
|
|
|
+ },
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+const engine = new MarkdownRuleEngine({
|
|
|
|
|
+ extraInlineRules: [myInlineRule],
|
|
|
|
|
+ extraBlockRules: [],
|
|
|
|
|
+})
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### 2. Custom Node Views (registerNodeView)
|
|
|
|
|
+
|
|
|
|
|
+Register ProseMirror `NodeView` factories for custom PM node types without modifying EditorBlock.vue.
|
|
|
|
|
+
|
|
|
|
|
+```typescript
|
|
|
|
|
+import { registerNodeView } from "@enesis/editor"
|
|
|
|
|
+
|
|
|
|
|
+registerNodeView("embed_block", (node, view, getPos) => {
|
|
|
|
|
+ // Return a NodeView instance — see prosemirror-view docs
|
|
|
|
|
+ return new MyEmbedView(node, view, getPos)
|
|
|
|
|
+})
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
|
|
+Factories are merged with the built-in `code_block` and `math_block` views at mount time. The `NodeViewFactory` signature is `(node, view, getPos) => NodeView`.
|
|
|
|
|
+
|
|
|
|
|
+### 3. Custom Pattern Triggers (extraPatterns)
|
|
|
|
|
+
|
|
|
|
|
+Add new suggestion menu triggers (e.g. `@mention`, `:emoji`) by passing extra `PatternSpec` entries to the Editor or EditorBlock component.
|
|
|
|
|
+
|
|
|
|
|
+```vue
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import type { PatternSpec } from "@enesis/editor"
|
|
|
|
|
+
|
|
|
|
|
+const extraPatterns: PatternSpec[] = [
|
|
|
|
|
+ { start: "@", kind: "command" as const, termination: "boundary", priority: 2 },
|
|
|
|
|
+]
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<template>
|
|
|
|
|
+ <Editor :extra-patterns="extraPatterns" />
|
|
|
|
|
+</template>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+Each pattern spec defines:
|
|
|
|
|
+| Field | Type | Description |
|
|
|
|
|
+|---|---|---|
|
|
|
|
|
+| `start` | `string` | Trigger character(s) like `[[`, `@`, `:` |
|
|
|
|
|
+| `end` | `string` (optional) | Closing delimiter for delimiter-terminated patterns |
|
|
|
|
|
+| `kind` | `PatternKind` | Logical group — `reference`, `embed`, `command`, `tag` |
|
|
|
|
|
+| `termination` | `"delimiter" \| "boundary"` | `delimiter` matches until `end` is found; `boundary` matches a single word |
|
|
|
|
|
+| `priority` | `number` (optional) | Higher priority wins when multiple specs match |
|
|
|
|
|
+
|
|
|
## Development
|
|
## Development
|
|
|
|
|
|
|
|
```bash
|
|
```bash
|
|
@@ -299,7 +353,7 @@ pnpm dev # Watch mode rebuild
|
|
|
| `src/lib/formatting.ts` | Formatting handlers — toggle/wrap/insert for bold, link, math, page refs, tags, heading, task |
|
|
| `src/lib/formatting.ts` | Formatting handlers — toggle/wrap/insert for bold, link, math, page refs, tags, heading, task |
|
|
|
| `src/lib/operation-history.ts` | `EditorOperation` types + undo/redo stack |
|
|
| `src/lib/operation-history.ts` | `EditorOperation` types + undo/redo stack |
|
|
|
| `src/lib/theme.ts` | CSS-variable theme system with presets |
|
|
| `src/lib/theme.ts` | CSS-variable theme system with presets |
|
|
|
-| `src/lib/katex.ts` | Dynamic KaTeX import + render helpers |
|
|
|
|
|
|
|
+| `src/lib/node-view-registry.ts` | Global `registerNodeView()` API for custom PM NodeViews |
|
|
|
| `src/lib/auto-close-plugin.ts` | Auto-close for ```, **, _ and bracket pairs |
|
|
| `src/lib/auto-close-plugin.ts` | Auto-close for ```, **, _ and bracket pairs |
|
|
|
| `src/lib/logger.ts` | Namespace-based debug logger |
|
|
| `src/lib/logger.ts` | Namespace-based debug logger |
|
|
|
| `src/lib/schema.ts` | ProseMirror schema |
|
|
| `src/lib/schema.ts` | ProseMirror schema |
|