mardora 1.2.0

package/src/plugins/emoji-plugin.ts

@@ -0,0 +1,140 @@
+import { Decoration, WidgetType } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { DecorationContext, DecorationPlugin } from "../editor/plugin";
+import { createTheme } from "../editor";
+import { SyntaxNode } from "@lezer/common";
+import * as emoji from "node-emoji";
+
+function shortcodeToEmoji(raw: string): string | null {
+  const rendered = emoji.emojify(raw);
+  return rendered !== raw ? rendered : null;
+}
+
+class EmojiWidget extends WidgetType {
+  constructor(readonly rendered: string) {
+    super();
+  }
+
+  override eq(other: EmojiWidget): boolean {
+    return other.rendered === this.rendered;
+  }
+
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-mardora-emoji";
+    span.textContent = this.rendered;
+    return span;
+  }
+
+  override ignoreEvent(): boolean {
+    return false;
+  }
+}
+
+/**
+ * Mark decorations for emoji syntax elements
+ */
+const emojiMarkDecorations = {
+  "emoji-source": Decoration.mark({ class: "cm-mardora-emoji-source" }),
+};
+
+/**
+ * EmojiPlugin - Decorates markdown emojis
+ *
+ * Parses and decorates emoji shortcodes like :smile:
+ * - Converts valid shortcodes to Unicode emoji when cursor is outside
+ * - Keeps raw shortcode visible while editing (cursor inside token)
+ */
+export class EmojiPlugin extends DecorationPlugin {
+  readonly name = "emoji";
+  readonly version = "1.0.0";
+  override decorationPriority = 20;
+  override readonly requiredNodes = ["Emoji", "EmojiMark"] as const;
+
+  constructor() {
+    super();
+  }
+
+  /**
+   * Plugin theme
+   */
+  override get theme() {
+    return theme;
+  }
+
+  /**
+   * Build emoji decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+
+        if (name !== "Emoji") {
+          return;
+        }
+
+        const raw = view.state.sliceDoc(from, to);
+        const rendered = shortcodeToEmoji(raw);
+        if (!rendered) {
+          return;
+        }
+
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (cursorInNode) {
+          decorations.push(emojiMarkDecorations["emoji-source"].range(from, to));
+          return;
+        }
+
+        decorations.push(
+          Decoration.replace({
+            widget: new EmojiWidget(rendered),
+          }).range(from, to)
+        );
+      },
+    });
+  }
+
+  override renderToHTML(
+    node: SyntaxNode,
+    children: string,
+    ctx: {
+      sliceDoc(from: number, to: number): string;
+      sanitize(html: string): string;
+      syntaxHighlighters?: readonly import("@lezer/highlight").Highlighter[];
+    }
+  ): string | null {
+    if (node.name === "EmojiMark") {
+      return "";
+    }
+
+    if (node.name !== "Emoji") {
+      return null;
+    }
+
+    const raw = ctx.sliceDoc(node.from, node.to);
+    const rendered = shortcodeToEmoji(raw);
+    if (!rendered) {
+      return `<span class="cm-mardora-emoji-source">${children}</span>`;
+    }
+
+    return `<span class="cm-mardora-emoji">${rendered}</span>`;
+  }
+}
+
+const theme = createTheme({
+  default: {
+    ".cm-mardora-emoji": {
+      fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif',
+      fontVariantEmoji: "emoji",
+      lineHeight: "1.2",
+    },
+    ".cm-mardora-emoji-source": {
+      fontFamily: "inherit",
+      lineHeight: "inherit",
+    },
+  },
+});

package/src/plugins/heading-plugin.ts

@@ -0,0 +1,194 @@
+import { Decoration } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { DecorationContext, DecorationPlugin } from "../editor/plugin";
+import { createTheme } from "../editor";
+import { SyntaxNode } from "@lezer/common";
+import type { PreviewContext } from "../preview/types";
+
+/**
+ * Node types for ATX headings in markdown
+ */
+const HEADING_TYPES = ["ATXHeading1", "ATXHeading2", "ATXHeading3", "ATXHeading4", "ATXHeading5", "ATXHeading6"];
+
+/**
+ * Mark decorations for heading content
+ */
+const headingMarkDecorations = {
+  "heading-1": Decoration.mark({ class: "cm-mardora-h1" }),
+  "heading-2": Decoration.mark({ class: "cm-mardora-h2" }),
+  "heading-3": Decoration.mark({ class: "cm-mardora-h3" }),
+  "heading-4": Decoration.mark({ class: "cm-mardora-h4" }),
+  "heading-5": Decoration.mark({ class: "cm-mardora-h5" }),
+  "heading-6": Decoration.mark({ class: "cm-mardora-h6" }),
+  "header-mark-class": Decoration.mark({ class: "cm-mardora-header-mark" }),
+  "heading-mark": Decoration.replace({}),
+};
+
+/**
+ * Line decorations for heading lines
+ */
+const headingLineDecorations = {
+  "heading-1": Decoration.line({ class: "cm-mardora-line-h1" }),
+  "heading-2": Decoration.line({ class: "cm-mardora-line-h2" }),
+  "heading-3": Decoration.line({ class: "cm-mardora-line-h3" }),
+  "heading-4": Decoration.line({ class: "cm-mardora-line-h4" }),
+  "heading-5": Decoration.line({ class: "cm-mardora-line-h5" }),
+  "heading-6": Decoration.line({ class: "cm-mardora-line-h6" }),
+};
+
+/**
+ * HeadingPlugin - Decorates markdown headings
+ *
+ * Adds visual styling to ATX headings (# through ######)
+ * - Line decorations for the entire heading line
+ * - Mark decorations for heading content
+ * - Hides # markers when cursor is not in the heading
+ */
+export class HeadingPlugin extends DecorationPlugin {
+  readonly name = "heading";
+  readonly version = "1.0.0";
+  override decorationPriority = 10;
+  override readonly requiredNodes = [
+    "ATXHeading1",
+    "ATXHeading2",
+    "ATXHeading3",
+    "ATXHeading4",
+    "ATXHeading5",
+    "ATXHeading6",
+    "HeaderMark",
+  ] as const;
+
+  /**
+   * Constructor - calls super constructor
+   */
+  constructor() {
+    super();
+  }
+
+  /**
+   * Plugin theme
+   */
+  override get theme() {
+    return theme;
+  }
+
+  /**
+   * Build heading decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+
+        if (!HEADING_TYPES.includes(name)) {
+          return;
+        }
+
+        const level = parseInt(name.slice(-1), 10);
+        const headingClass = `heading-${level}` as keyof typeof headingMarkDecorations;
+        const lineClass = `heading-${level}` as keyof typeof headingLineDecorations;
+
+        // Add line decoration
+        const line = view.state.doc.lineAt(from);
+        decorations.push(headingLineDecorations[lineClass].range(line.from));
+
+        // Add mark decoration for the heading content
+        decorations.push(headingMarkDecorations[headingClass].range(from, to));
+
+        // Find and hide the heading marker (#). Heading level changes are handled by the selection toolbar.
+        const headingMark = node.node.getChild("HeaderMark");
+        if (headingMark) {
+          const markEnd = Math.min(headingMark.to + 1, line.to);
+          // Clamp to line end so replace decoration never spans a newline.
+          decorations.push(headingMarkDecorations["heading-mark"].range(headingMark.from, markEnd));
+        }
+      },
+    });
+  }
+
+  override renderToHTML(node: SyntaxNode, children: string, ctx: PreviewContext): string | null {
+    if (node.name === "HeaderMark") {
+      return "";
+    }
+
+    if (!HEADING_TYPES.includes(node.name)) {
+      return null;
+    }
+
+    const level = parseInt(node.name.slice(-1), 10);
+    const lineClass = headingLineDecorations[`heading-${level}` as keyof typeof headingLineDecorations].spec.class;
+    const headingClass = headingMarkDecorations[`heading-${level}` as keyof typeof headingMarkDecorations].spec.class;
+    const id = level >= 2 ? ctx.headingIdForNode?.(node) : null;
+    const idAttr = id ? ` id="${id}"` : "";
+
+    return `<div class="${lineClass}">
+      <h${level}${idAttr} class="${headingClass}">${children}</h${level}>
+    </div>\n`;
+  }
+}
+
+const theme = createTheme({
+  default: {
+    ".cm-mardora-h1": {
+      fontSize: "2em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none",
+    },
+
+    ".cm-mardora-h2": {
+      fontSize: "1.75em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none",
+    },
+
+    ".cm-mardora-h3": {
+      fontSize: "1.5em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none",
+    },
+
+    ".cm-mardora-h4": {
+      fontSize: "1.25em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none",
+    },
+
+    ".cm-mardora-h5": {
+      fontSize: "1em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none",
+    },
+
+    ".cm-mardora-h6": {
+      fontSize: "0.75em",
+      fontWeight: "bold",
+      fontFamily: "sans-serif",
+      textDecoration: "none",
+    },
+
+    // Heading line styles
+    ".cm-mardora-line-h1": {
+      paddingTop: "1.5em",
+      paddingBottom: "0.5em",
+    },
+    ".cm-mardora-line-h2": {
+      paddingTop: "1.25em",
+      paddingBottom: "0.5em",
+    },
+    ".cm-mardora-line-h3, .cm-mardora-line-h4, .cm-mardora-line-h5, .cm-mardora-line-h6": {
+      paddingTop: "1em",
+      paddingBottom: "0.5em",
+    },
+    ".cm-mardora-header-mark": {
+      opacity: 0.5,
+    },
+  },
+});

package/src/plugins/hr-plugin.ts

@@ -0,0 +1,102 @@
+import { Decoration } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { DecorationContext, DecorationPlugin } from "../editor/plugin";
+import { createTheme } from "../editor";
+import { SyntaxNode } from "@lezer/common";
+
+/**
+ * Line decoration for horizontal rule lines
+ */
+const hrLineDecoration = Decoration.line({ class: "cm-mardora-hr-line" });
+
+/**
+ * Mark decoration to hide raw markers (---, ***, ___) when unfocused
+ */
+const hrMarkDecoration = Decoration.replace({});
+
+/**
+ * HRPlugin - Decorates markdown horizontal rules
+ *
+ * Adds visual styling to thematic breaks (---, ***, ___)
+ * - Line decoration that renders a centered horizontal line
+ * - Hides raw marker characters when the cursor is not on the line
+ */
+export class HRPlugin extends DecorationPlugin {
+  readonly name = "hr";
+  readonly version = "1.0.0";
+  override decorationPriority = 10;
+  override readonly requiredNodes = ["HorizontalRule"] as const;
+
+  /**
+   * Constructor - calls super constructor
+   */
+  constructor() {
+    super();
+  }
+
+  /**
+   * Plugin theme
+   */
+  override get theme() {
+    return theme;
+  }
+
+  /**
+   * Build horizontal rule decorations by iterating the syntax tree
+   */
+  buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+
+        if (name !== "HorizontalRule") {
+          return;
+        }
+
+        // Add line decoration for the horizontal rule styling
+        const line = view.state.doc.lineAt(from);
+        decorations.push(hrLineDecoration.range(line.from));
+
+        // Hide the raw markers when cursor is not on the line
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          // Clamp to line end so replace decoration never spans a newline
+          const markEnd = Math.min(to, line.to);
+          decorations.push(hrMarkDecoration.range(from, markEnd));
+        }
+      },
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override renderToHTML(node: SyntaxNode, _children: string): string | null {
+    if (node.name !== "HorizontalRule") {
+      return null;
+    }
+
+    return `<hr class="cm-mardora-hr-line" />\n`;
+  }
+}
+
+const theme = createTheme({
+  default: {
+    // Line styling — displays a centered horizontal line
+    ".cm-mardora-hr-line": {
+      display: "flex",
+      alignItems: "center",
+      paddingTop: "0.75em",
+      paddingBottom: "0.75em",
+      border: "none",
+      "&::after": {
+        content: '""',
+        flex: "1",
+        height: "2px",
+        background: "currentColor",
+        opacity: "0.3",
+      },
+    },
+  },
+});