draftly 1.0.0-alpha.2 → 2.0.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-draftly-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-draftly-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-draftly-emoji-source">${children}</span>`;
+    }
+
+    return `<span class="cm-draftly-emoji">${rendered}</span>`;
+  }
+}
+
+const theme = createTheme({
+  default: {
+    ".cm-draftly-emoji": {
+      fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif',
+      fontVariantEmoji: "emoji",
+      lineHeight: "1.2",
+    },
+    ".cm-draftly-emoji-source": {
+      fontFamily: "inherit",
+      lineHeight: "inherit",
+    },
+  },
+});

package/src/plugins/index.ts

@@ -1,57 +1,63 @@
-// Re-export individual plugins
-export { ParagraphPlugin } from "./paragraph-plugin";
-export { HeadingPlugin } from "./heading-plugin";
-export { InlinePlugin } from "./inline-plugin";
-export { LinkPlugin } from "./link-plugin";
-export { ListPlugin } from "./list-plugin";
-export { HTMLPlugin } from "./html-plugin";
-export { ImagePlugin } from "./image-plugin";
-export { MathPlugin } from "./math-plugin";
-export { MermaidPlugin } from "./mermaid-plugin";
-export { CodePlugin } from "./code-plugin";
-export { QuotePlugin } from "./quote-plugin";
-export { HRPlugin } from "./hr-plugin";
-
-// Plugin collections
-import { DraftlyPlugin } from "../editor/plugin";
-import { ParagraphPlugin } from "./paragraph-plugin";
-import { HeadingPlugin } from "./heading-plugin";
-import { InlinePlugin } from "./inline-plugin";
-import { LinkPlugin } from "./link-plugin";
-import { ListPlugin } from "./list-plugin";
-import { HTMLPlugin } from "./html-plugin";
-import { ImagePlugin } from "./image-plugin";
-import { MathPlugin } from "./math-plugin";
-import { MermaidPlugin } from "./mermaid-plugin";
-import { CodePlugin } from "./code-plugin";
-import { QuotePlugin } from "./quote-plugin";
-import { HRPlugin } from "./hr-plugin";
-
-/**
- * Default plugins
- *
- * This is the set of essential plugins
- */
-const essentialPlugins: DraftlyPlugin[] = [
-  new ParagraphPlugin(),
-  new HeadingPlugin(),
-  new InlinePlugin(),
-  new LinkPlugin(),
-  new ListPlugin(),
-  new HTMLPlugin(),
-  new ImagePlugin(),
-  new MathPlugin(),
-  new MermaidPlugin(),
-  new CodePlugin(),
-  new QuotePlugin(),
-  new HRPlugin(),
-];
-
-/**
- * All plugins
- *
- * This is the set of all plugins available with draftly
- */
-const allPlugins: DraftlyPlugin[] = [...essentialPlugins];
-
-export { essentialPlugins, allPlugins };
+// Re-export individual plugins
+export { ParagraphPlugin } from "./paragraph-plugin";
+export { HeadingPlugin } from "./heading-plugin";
+export { InlinePlugin } from "./inline-plugin";
+export { LinkPlugin } from "./link-plugin";
+export { ListPlugin } from "./list-plugin";
+export { TablePlugin } from "./table-plugin";
+export { HTMLPlugin } from "./html-plugin";
+export { ImagePlugin } from "./image-plugin";
+export { MathPlugin } from "./math-plugin";
+export { MermaidPlugin } from "./mermaid-plugin";
+export { CodePlugin } from "./code-plugin";
+export { QuotePlugin } from "./quote-plugin";
+export { HRPlugin } from "./hr-plugin";
+export { EmojiPlugin } from "./emoji-plugin";
+
+// Plugin collections
+import { DraftlyPlugin } from "../editor/plugin";
+import { ParagraphPlugin } from "./paragraph-plugin";
+import { HeadingPlugin } from "./heading-plugin";
+import { InlinePlugin } from "./inline-plugin";
+import { LinkPlugin } from "./link-plugin";
+import { ListPlugin } from "./list-plugin";
+import { TablePlugin } from "./table-plugin";
+import { HTMLPlugin } from "./html-plugin";
+import { ImagePlugin } from "./image-plugin";
+import { MathPlugin } from "./math-plugin";
+import { MermaidPlugin } from "./mermaid-plugin";
+import { CodePlugin } from "./code-plugin";
+import { QuotePlugin } from "./quote-plugin";
+import { HRPlugin } from "./hr-plugin";
+import { EmojiPlugin } from "./emoji-plugin";
+
+/**
+ * Default plugins
+ *
+ * This is the set of essential plugins
+ */
+const essentialPlugins: DraftlyPlugin[] = [
+  new ParagraphPlugin(),
+  new HeadingPlugin(),
+  new InlinePlugin(),
+  new LinkPlugin(),
+  new ListPlugin(),
+  new TablePlugin(),
+  new HTMLPlugin(),
+  new ImagePlugin(),
+  new MathPlugin(),
+  new MermaidPlugin(),
+  new CodePlugin(),
+  new QuotePlugin(),
+  new HRPlugin(),
+  new EmojiPlugin(),
+];
+
+/**
+ * All plugins
+ *
+ * This is the set of all plugins available with draftly
+ */
+const allPlugins: DraftlyPlugin[] = [...essentialPlugins];
+
+export { essentialPlugins, allPlugins };