draftly 0.1.0-alpha.0

package/src/plugins/html-plugin.ts

@@ -0,0 +1,347 @@
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { Extension } from "@codemirror/state";
+import { DecorationContext, DecorationPlugin } from "../plugin";
+import DOMPurify from "dompurify";
+
+/**
+ * Mark decorations for HTML content
+ */
+const htmlMarkDecorations = {
+  "html-tag": Decoration.mark({ class: "cm-draftly-html-tag" }),
+  "html-comment": Decoration.mark({ class: "cm-draftly-html-comment" }),
+};
+
+/**
+ * Line decorations for HTML blocks (when visible)
+ */
+const htmlLineDecorations = {
+  "html-block": Decoration.line({ class: "cm-draftly-line-html-block" }),
+  "hidden-line": Decoration.line({ class: "cm-draftly-hidden-line" }),
+};
+
+/**
+ * Widget to render sanitized HTML (block)
+ */
+class HTMLPreviewWidget extends WidgetType {
+  constructor(readonly html: string) {
+    super();
+  }
+
+  eq(other: HTMLPreviewWidget): boolean {
+    return other.html === this.html;
+  }
+
+  toDOM() {
+    const div = document.createElement("div");
+    div.className = "cm-draftly-html-preview";
+    div.innerHTML = DOMPurify.sanitize(this.html);
+    return div;
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+/**
+ * Widget to render sanitized inline HTML
+ */
+class InlineHTMLPreviewWidget extends WidgetType {
+  constructor(readonly html: string) {
+    super();
+  }
+
+  eq(other: InlineHTMLPreviewWidget): boolean {
+    return other.html === this.html;
+  }
+
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-draftly-inline-html-preview";
+    span.innerHTML = DOMPurify.sanitize(this.html);
+    return span;
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+interface HTMLGroup {
+  from: number;
+  to: number;
+}
+
+interface HTMLTagInfo {
+  from: number;
+  to: number;
+  tagName: string;
+  isClosing: boolean;
+  isSelfClosing: boolean;
+}
+
+interface InlineHTMLElement {
+  from: number;
+  to: number;
+  content: string;
+}
+
+/**
+ * Parse an HTML tag to extract its name and type
+ */
+function parseHTMLTag(content: string): { tagName: string; isClosing: boolean; isSelfClosing: boolean } | null {
+  const match = content.match(/^<\s*(\/?)([a-zA-Z][a-zA-Z0-9-]*)[^>]*(\/?)>$/);
+  if (!match) return null;
+
+  return {
+    tagName: match[2]!.toLowerCase(),
+    isClosing: match[1] === "/",
+    isSelfClosing:
+      match[3] === "/" ||
+      ["br", "hr", "img", "input", "meta", "link", "area", "base", "col", "embed", "source", "track", "wbr"].includes(
+        match[2]!.toLowerCase()
+      ),
+  };
+}
+
+/**
+ * HTMLPlugin - Decorates and Renders HTML in markdown
+ */
+export class HTMLPlugin extends DecorationPlugin {
+  readonly name = "html";
+  readonly version = "1.0.0";
+
+  override get decorationPriority(): number {
+    return 30;
+  }
+
+  override getExtensions(): Extension[] {
+    return [htmlTheme];
+  }
+
+  override buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    // Collect blocks and inline tags
+    const htmlGroups: HTMLGroup[] = [];
+    const htmlTags: HTMLTagInfo[] = [];
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+
+        // Handle HTML Comments
+        if (name === "Comment") {
+          decorations.push(htmlMarkDecorations["html-comment"].range(from, to));
+          return;
+        }
+
+        // Collect inline HTML tags for pairing
+        if (name === "HTMLTag") {
+          const content = view.state.sliceDoc(from, to);
+          const parsed = parseHTMLTag(content);
+          if (parsed) {
+            htmlTags.push({
+              from,
+              to,
+              tagName: parsed.tagName,
+              isClosing: parsed.isClosing,
+              isSelfClosing: parsed.isSelfClosing,
+            });
+          }
+        }
+
+        // Handle HTML Blocks - Collect for grouping
+        if (name === "HTMLBlock") {
+          const last = htmlGroups[htmlGroups.length - 1];
+          if (last) {
+            const gap = view.state.sliceDoc(last.to, from);
+            if (!gap.trim()) {
+              last.to = to;
+              return;
+            }
+          }
+          htmlGroups.push({ from, to });
+        }
+      },
+    });
+
+    // Find complete inline HTML elements (must be on same line)
+    const inlineElements: InlineHTMLElement[] = [];
+    const usedTags = new Set<number>(); // Track used tag indices
+
+    for (let i = 0; i < htmlTags.length; i++) {
+      if (usedTags.has(i)) continue;
+
+      const openTag = htmlTags[i]!;
+      if (openTag.isClosing) continue;
+
+      // Handle self-closing tags
+      if (openTag.isSelfClosing) {
+        inlineElements.push({
+          from: openTag.from,
+          to: openTag.to,
+          content: view.state.sliceDoc(openTag.from, openTag.to),
+        });
+        usedTags.add(i);
+        continue;
+      }
+
+      // Find matching closing tag (must be on same line)
+      const openLine = view.state.doc.lineAt(openTag.from);
+      let depth = 1;
+      let closeTagIndex: number | null = null;
+
+      for (let j = i + 1; j < htmlTags.length && depth > 0; j++) {
+        const tag = htmlTags[j]!;
+
+        // Stop if we've gone past the open tag's line
+        if (tag.from > openLine.to) break;
+
+        if (tag.tagName === openTag.tagName) {
+          if (tag.isClosing) {
+            depth--;
+            if (depth === 0) {
+              closeTagIndex = j;
+            }
+          } else if (!tag.isSelfClosing) {
+            depth++;
+          }
+        }
+      }
+
+      if (closeTagIndex !== null) {
+        const closeTag = htmlTags[closeTagIndex]!;
+        inlineElements.push({
+          from: openTag.from,
+          to: closeTag.to,
+          content: view.state.sliceDoc(openTag.from, closeTag.to),
+        });
+
+        // Mark all tags within this range as used (to handle nesting)
+        for (let k = i; k <= closeTagIndex; k++) {
+          usedTags.add(k);
+        }
+      }
+    }
+
+    // Sort by position and filter out overlapping elements (keep outermost)
+    inlineElements.sort((a, b) => a.from - b.from);
+    const filteredElements: InlineHTMLElement[] = [];
+    let lastEnd = -1;
+
+    for (const elem of inlineElements) {
+      if (elem.from >= lastEnd) {
+        filteredElements.push(elem);
+        lastEnd = elem.to;
+      }
+    }
+
+    // Apply decorations for inline elements
+    for (const elem of filteredElements) {
+      const cursorInRange = ctx.cursorInRange(elem.from, elem.to);
+
+      if (cursorInRange) {
+        // Show source - find and style the tags within this element
+        for (const tag of htmlTags) {
+          if (tag.from >= elem.from && tag.to <= elem.to) {
+            decorations.push(htmlMarkDecorations["html-tag"].range(tag.from, tag.to));
+          }
+        }
+      } else {
+        // Render preview
+        decorations.push(
+          Decoration.replace({
+            widget: new InlineHTMLPreviewWidget(elem.content),
+          }).range(elem.from, elem.to)
+        );
+      }
+    }
+
+    // Style any remaining unprocessed tags (orphan tags)
+    for (let i = 0; i < htmlTags.length; i++) {
+      if (!usedTags.has(i)) {
+        const tag = htmlTags[i]!;
+        decorations.push(htmlMarkDecorations["html-tag"].range(tag.from, tag.to));
+      }
+    }
+
+    // Process gathered HTML block groups
+    for (const group of htmlGroups) {
+      const { from, to } = group;
+
+      const nodeLineStart = view.state.doc.lineAt(from);
+      const nodeLineEnd = view.state.doc.lineAt(to);
+      const cursorInRange = ctx.cursorInRange(nodeLineStart.from, nodeLineEnd.to);
+
+      if (cursorInRange) {
+        for (let i = nodeLineStart.number; i <= nodeLineEnd.number; i++) {
+          const line = view.state.doc.line(i);
+          decorations.push(htmlLineDecorations["html-block"].range(line.from));
+        }
+      } else {
+        const htmlContent = view.state.sliceDoc(from, to);
+
+        decorations.push(
+          Decoration.replace({
+            widget: new HTMLPreviewWidget(htmlContent.trim()),
+          }).range(from, nodeLineStart.to)
+        );
+
+        for (let i = nodeLineStart.number + 1; i <= nodeLineEnd.number; i++) {
+          const line = view.state.doc.line(i);
+          decorations.push(htmlLineDecorations["hidden-line"].range(line.from));
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Theme for HTML styling
+ */
+const htmlTheme = EditorView.theme({
+  ".cm-draftly-html-tag": {
+    color: "#6a737d",
+    fontFamily: "var(--font-jetbrains-mono, monospace)",
+    fontSize: "0.85em",
+  },
+
+  ".cm-draftly-html-comment": {
+    color: "#6a737d",
+    fontStyle: "italic",
+    fontFamily: "var(--font-jetbrains-mono, monospace)",
+    fontSize: "0.85em",
+    opacity: 0.5,
+  },
+
+  ".cm-draftly-line-html-block": {
+    backgroundColor: "rgba(0, 0, 0, 0.02)",
+  },
+
+  ".cm-draftly-hidden-line": {
+    display: "none",
+  },
+
+  ".cm-draftly-html-preview": {
+    display: "inline-block",
+    width: "100%",
+    verticalAlign: "top",
+    margin: "0",
+    whiteSpace: "normal",
+    lineHeight: "1.4",
+  },
+  ".cm-draftly-html-preview > *:first-child": {
+    marginTop: "0",
+  },
+  ".cm-draftly-html-preview > *:last-child": {
+    marginBottom: "0",
+  },
+
+  ".cm-draftly-inline-html-preview": {
+    display: "inline",
+    whiteSpace: "normal",
+  },
+});

package/src/plugins/inline-plugin.ts

@@ -0,0 +1,152 @@
+import { Decoration, EditorView } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { DecorationContext, DecorationPlugin } from "../plugin";
+import { Extension } from "@codemirror/state";
+
+/**
+ * Node types for inline styling in markdown
+ */
+const INLINE_TYPES = {
+  Emphasis: "emphasis",
+  StrongEmphasis: "strong",
+  Strikethrough: "strikethrough",
+  Subscript: "subscript",
+  Superscript: "superscript",
+} as const;
+
+/**
+ * Mark decorations for inline content
+ */
+const inlineMarkDecorations = {
+  emphasis: Decoration.mark({ class: "cm-draftly-emphasis" }),
+  strong: Decoration.mark({ class: "cm-draftly-strong" }),
+  strikethrough: Decoration.mark({ class: "cm-draftly-strikethrough" }),
+  subscript: Decoration.mark({ class: "cm-draftly-subscript" }),
+  superscript: Decoration.mark({ class: "cm-draftly-superscript" }),
+  // Markers (* _ ~~ ^ ~)
+  "inline-mark": Decoration.mark({ class: "cm-draftly-inline-mark" }),
+};
+
+/**
+ * InlinePlugin - Decorates inline markdown formatting
+ *
+ * Adds visual styling to inline elements:
+ * - Emphasis (italic) - *text* or _text_
+ * - Strong (bold) - **text** or __text__
+ * - Strikethrough - ~~text~~
+ * - Subscript - ~text~
+ * - Superscript - ^text^
+ *
+ * Hides formatting markers when cursor is not in the element
+ */
+export class InlinePlugin extends DecorationPlugin {
+  readonly name = "inline";
+  readonly version = "1.0.0";
+
+  /**
+   * Moderate priority for inline styling
+   */
+  override get decorationPriority(): number {
+    return 20;
+  }
+
+  /**
+   * Get the extensions for this plugin (theme)
+   */
+  override getExtensions(): Extension[] {
+    return [inlineTheme];
+  }
+
+  /**
+   * Build inline decorations by iterating the syntax tree
+   */
+  override buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+
+        // Check if this is an inline type we handle
+        const inlineType = INLINE_TYPES[name as keyof typeof INLINE_TYPES];
+        if (!inlineType) {
+          return;
+        }
+
+        // Add mark decoration for the content
+        decorations.push(inlineMarkDecorations[inlineType].range(from, to));
+
+        // Only hide markers when cursor is not in the element
+        const cursorInNode = ctx.selectionOverlapsRange(from, to);
+        if (!cursorInNode) {
+          // Get the appropriate marker children based on type
+          const markerNames = this.getMarkerNames(name);
+          for (const markerName of markerNames) {
+            const marks = node.node.getChildren(markerName);
+            for (const mark of marks) {
+              decorations.push(inlineMarkDecorations["inline-mark"].range(mark.from, mark.to));
+            }
+          }
+        }
+      },
+    });
+  }
+
+  /**
+   * Get the marker node names for a given inline type
+   */
+  private getMarkerNames(nodeType: string): string[] {
+    switch (nodeType) {
+      case "Emphasis":
+      case "StrongEmphasis":
+        return ["EmphasisMark"];
+      case "Strikethrough":
+        return ["StrikethroughMark"];
+      case "Subscript":
+        return ["SubscriptMark"];
+      case "Superscript":
+        return ["SuperscriptMark"];
+      default:
+        return [];
+    }
+  }
+}
+
+/**
+ * Theme for inline styling
+ */
+const inlineTheme = EditorView.theme({
+  // Emphasis (italic)
+  ".cm-draftly-emphasis": {
+    fontStyle: "italic",
+  },
+
+  // Strong (bold)
+  ".cm-draftly-strong": {
+    fontWeight: "bold",
+  },
+
+  // Strikethrough
+  ".cm-draftly-strikethrough": {
+    textDecoration: "line-through",
+    opacity: "0.7",
+  },
+
+  // Subscript
+  ".cm-draftly-subscript": {
+    fontSize: "0.75em",
+    verticalAlign: "sub",
+  },
+
+  // Superscript
+  ".cm-draftly-superscript": {
+    fontSize: "0.75em",
+    verticalAlign: "super",
+  },
+
+  // Inline markers (* _ ~~ ^ ~) - hidden when not focused
+  ".cm-draftly-inline-mark": {
+    display: "none",
+  },
+});

package/src/plugins/list-plugin.ts

@@ -0,0 +1,211 @@
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { Extension } from "@codemirror/state";
+import { DecorationContext, DecorationPlugin } from "../plugin";
+
+/**
+ * Mark decorations for list items
+ */
+const listMarkDecorations = {
+  "list-mark-ul": Decoration.mark({ class: "cm-draftly-list-mark-ul" }),
+  "list-mark-ol": Decoration.mark({ class: "cm-draftly-list-mark-ol" }),
+  "task-marker": Decoration.mark({ class: "cm-draftly-task-marker" }),
+};
+
+/**
+ * Task checkbox widget
+ */
+export class TaskCheckboxWidget extends WidgetType {
+  constructor(readonly checked: boolean) {
+    super();
+  }
+
+  eq(other: TaskCheckboxWidget): boolean {
+    return other.checked === this.checked;
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const wrap = document.createElement("span");
+    wrap.className = `cm-draftly-task-checkbox ${this.checked ? "checked" : ""}`;
+    wrap.setAttribute("aria-hidden", "true");
+
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = this.checked;
+    checkbox.tabIndex = -1;
+
+    checkbox.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      const pos = view.posAtDOM(wrap);
+      // Find the task marker in the document and toggle it
+      const line = view.state.doc.lineAt(pos);
+      const match = line.text.match(/^(\s*[-*+]\s*)\[([ xX])\]/);
+      if (match) {
+        const markerStart = line.from + match[1]!.length + 1;
+        const newChar = this.checked ? " " : "x";
+        view.dispatch({
+          changes: { from: markerStart, to: markerStart + 1, insert: newChar },
+        });
+      }
+    });
+
+    wrap.appendChild(checkbox);
+
+    // Add a label for better accessibility and click area
+    // const label = document.createElement("span");
+    // wrap.appendChild(label);
+
+    return wrap;
+  }
+
+  ignoreEvent(): boolean {
+    return false;
+  }
+}
+
+/**
+ * ListPlugin - Decorates markdown lists
+ *
+ * Handles:
+ * - Unordered lists (bullet points) - Auto-styles markers (*, -, +)
+ * - Ordered lists (numbered) - Auto-styles numbers (1., 2.)
+ * - Task lists (checkboxes) - Replaces [ ]/[x] with interactive widget when not editing
+ */
+export class ListPlugin extends DecorationPlugin {
+  readonly name = "list";
+  readonly version = "1.0.0";
+
+  /**
+   * Moderate priority
+   */
+  override get decorationPriority(): number {
+    return 20;
+  }
+
+  /**
+   * Get the extensions for this plugin (theme)
+   */
+  override getExtensions(): Extension[] {
+    return [listTheme];
+  }
+
+  /**
+   * Build list decorations by iterating the syntax tree
+   */
+  override buildDecorations(ctx: DecorationContext): void {
+    const { view, decorations } = ctx;
+    const tree = syntaxTree(view.state);
+
+    tree.iterate({
+      enter: (node) => {
+        const { from, to, name } = node;
+        const line = view.state.doc.lineAt(from);
+        const cursorInLine = ctx.cursorInRange(line.from, line.to);
+
+        // Handle list markers (bullets, numbers)
+        if (name === "ListMark") {
+          // Determine list type by checking grandparent (BulletList vs OrderedList)
+          // Parent is ListItem, Grandparent is the list container
+          const parent = node.node.parent;
+          const grandparent = parent?.parent;
+          const listType = grandparent?.name;
+
+          if (!cursorInLine) {
+            if (listType === "OrderedList") {
+              decorations.push(listMarkDecorations["list-mark-ol"].range(from, to));
+            } else {
+              // Default to generic/unordered for BulletList or others
+              decorations.push(listMarkDecorations["list-mark-ul"].range(from, to));
+            }
+          }
+        }
+
+        // Handle task lists
+        if (name === "TaskMarker") {
+          const text = view.state.sliceDoc(from, to);
+          const isChecked = text.includes("x") || text.includes("X");
+
+          if (cursorInLine) {
+            // If editing the line, just style the marker text
+            decorations.push(listMarkDecorations["task-marker"].range(from, to));
+          } else {
+            // If not editing, REPLACE the marker text with the widget
+            decorations.push(
+              Decoration.replace({
+                widget: new TaskCheckboxWidget(isChecked),
+              }).range(from, to)
+            );
+          }
+        }
+      },
+    });
+  }
+}
+
+/**
+ * Theme for list styling
+ */
+const listTheme = EditorView.theme({
+  // Unordered List markers (*, -, +)
+  ".cm-draftly-list-mark-ul": {
+    position: "relative",
+  },
+
+  ".cm-draftly-list-mark-ul > span": {
+    visibility: "hidden",
+  },
+
+  ".cm-draftly-list-mark-ul::after": {
+    content: '"•"',
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "var(--color-link)",
+    fontWeight: "bold",
+    pointerEvents: "none",
+  },
+
+  // Ordered List markers (1., 2.)
+  ".cm-draftly-list-mark-ol": {
+    color: "var(--draftly-highlight, #a4a4a4)",
+    fontFamily: "monospace",
+    marginRight: "2px",
+  },
+
+  // Task markers text ([ ] or [x]) - visible only when editing
+  ".cm-draftly-task-marker": {
+    color: "var(--draftly-highlight, #a4a4a4)",
+    fontFamily: "monospace",
+  },
+
+  // Task Checkbox Widget
+  ".cm-draftly-task-checkbox": {
+    display: "inline-flex",
+    verticalAlign: "middle",
+    marginRight: "0.3em",
+    cursor: "pointer",
+    userSelect: "none",
+    alignItems: "center",
+    height: "1.2em",
+  },
+
+  ".cm-draftly-task-checkbox input": {
+    cursor: "pointer",
+    margin: 0,
+    width: "1.1em",
+    height: "1.1em",
+    appearance: "none",
+    border: "1px solid",
+    borderRadius: "0.25em",
+    backgroundColor: "transparent",
+    position: "relative",
+  },
+
+  ".cm-draftly-task-checkbox.checked input::after": {
+    content: '"✓"',
+    position: "absolute",
+    left: "1px",
+    top: "-3px",
+  },
+});

package/src/plugins/plugins.ts

@@ -0,0 +1,9 @@
+import { DraftlyPlugin } from "../plugin";
+import { HeadingPlugin } from "./heading-plugin";
+import { InlinePlugin } from "./inline-plugin";
+import { ListPlugin } from "./list-plugin";
+import { HTMLPlugin } from "./html-plugin";
+
+const defaultPlugins: DraftlyPlugin[] = [new HeadingPlugin(), new InlinePlugin(), new ListPlugin(), new HTMLPlugin()];
+
+export { defaultPlugins };