CS-10572: ProseMirror WYSIWYG editor for RichMarkdownField

packages/base/rich-markdown.gts

@@ -0,0 +1,118 @@
+import {
+  extractCardReferenceUrls,
+  relativeTo,
+} from '@cardstack/runtime-common';
+
+import {
+  CardDef,
+  Component,
+  FieldDef,
+  MarkdownField,
+  StringField,
+  contains,
+  containsMany,
+  field,
+  linksToMany,
+} from './card-api';
+import MarkdownTemplate from './default-templates/markdown';
+import ProseMirrorEditor from './prosemirror-editor';
+import { CardContextConsumer } from './field-component';
+
+/**
+ * A composite FieldDef that stores markdown content and exposes structured
+ * `linkedCards` relationships for embedded card references.
+ *
+ * Unlike `MarkdownField` (which extends StringField), this field is a
+ * composite FieldDef with sub-fields for content, computed reference URLs,
+ * and query-based linked cards.
+ *
+ * Usage:
+ * ```
+ * import RichMarkdownField from 'https://cardstack.com/base/rich-markdown';
+ *
+ * class MyCard extends CardDef {
+ *   @field body = contains(RichMarkdownField);
+ * }
+ * ```
+ */
+export class RichMarkdownField extends FieldDef {
+  static displayName = 'Rich Markdown';
+
+  /** The raw markdown text. Uses MarkdownField for textarea edit UI. */
+  @field content = contains(MarkdownField);
+
+  /** Resolved absolute URLs of `:card[URL]` and `::card[URL]` references. */
+  @field cardReferenceUrls = containsMany(StringField, {
+    computeVia: function (this: RichMarkdownField) {
+      if (!this.content) {
+        return [];
+      }
+      let baseUrl = this[relativeTo]?.href ?? '';
+      return extractCardReferenceUrls(this.content, baseUrl);
+    },
+  });
+
+  /** Cards referenced in the markdown, loaded via query. */
+  @field linkedCards = linksToMany(CardDef, {
+    query: {
+      filter: {
+        in: { id: '$this.cardReferenceUrls' },
+      },
+    },
+  });
+
+  static embedded = class Embedded extends Component<typeof this> {
+    get content() {
+      return this.args.model?.content ?? null;
+    }
+    get baseUrl(): string | null {
+      return this.args.model?.[relativeTo]?.href ?? null;
+    }
+    <template>
+      <MarkdownTemplate
+        @content={{this.content}}
+        @linkedCards={{@model.linkedCards}}
+        @cardReferenceBaseUrl={{this.baseUrl}}
+      />
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof this> {
+    get content() {
+      return this.args.model?.content ?? null;
+    }
+    <template>
+      <MarkdownTemplate @content={{this.content}} />
+    </template>
+  };
+
+  static edit = class Edit extends Component<typeof this> {
+    updateContent = (markdown: string) => {
+      this.args.model.content = markdown;
+    };
+    get baseUrl(): string | null {
+      return this.args.model?.[relativeTo]?.href ?? null;
+    }
+    get linkedCards(): CardDef[] | null {
+      try {
+        return this.args.model?.linkedCards ?? null;
+      } catch {
+        // linksToMany query may fail in environments without a full card store
+        return null;
+      }
+    }
+    <template>
+      <CardContextConsumer as |context|>
+        <ProseMirrorEditor
+          @content={{@model.content}}
+          @onUpdate={{this.updateContent}}
+          @linkedCards={{this.linkedCards}}
+          @cardReferenceBaseUrl={{this.baseUrl}}
+          @getCards={{context.getCards}}
+        />
+      </CardContextConsumer>
+    </template>
+  };
+}
+
+export default RichMarkdownField;

packages/experiments-realm/RichMarkdownPlayground/playground.json

@@ -0,0 +1,30 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "RichMarkdownPlayground",
+        "module": "../rich-markdown-playground"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "cardInfo": {
+        "notes": null,
+        "name": "Rich Markdown Playground",
+        "summary": "Exercise the RichMarkdownField with its ProseMirror WYSIWYG editor.",
+        "cardThumbnailURL": null
+      },
+      "title": "Rich Markdown Playground",
+      "body": {
+        "content": "# Welcome to the Rich Markdown Playground\n\nThis card uses `RichMarkdownField` which provides a **ProseMirror WYSIWYG editor** in edit mode.\n\n## Features to Try\n\n### Inline Formatting\n\nYou can write **bold text**, *italic text*, and `inline code`.\n\n### Lists\n\n- Bullet list item one\n- Bullet list item two\n- Bullet list item three\n\n1. Ordered list first\n2. Ordered list second\n3. Ordered list third\n\n### Code Block\n\n```typescript\nimport { RichMarkdownField } from 'https://cardstack.com/base/rich-markdown';\n\nclass MyCard extends CardDef {\n  @field body = contains(RichMarkdownField);\n}\n```\n\n### Blockquote\n\n> The ProseMirror editor supports keyboard shortcuts like **Cmd+B** for bold, **Cmd+I** for italic, and **Cmd+Z** for undo.\n\n---\n\n### Card References\n\nInline card atom: :card[../Author/jane-doe]\n\nBlock card:\n\n::card[../Author/jane-doe]\n\nSwitch to **Edit** mode to try the WYSIWYG editor!"
+      }
+    },
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}

packages/experiments-realm/rich-markdown-playground.gts

@@ -0,0 +1,89 @@
+import {
+  contains,
+  field,
+  CardDef,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import { RichMarkdownField } from 'https://cardstack.com/base/rich-markdown';
+
+export class RichMarkdownPlayground extends CardDef {
+  static displayName = 'Rich Markdown Playground';
+
+  @field title = contains(StringField);
+  @field body = contains(RichMarkdownField);
+
+  static isolated = class Isolated extends Component<typeof this> {
+    <template>
+      <article class='playground'>
+        <header>
+          <h1>{{@model.title}}</h1>
+          <p class='subtitle'>
+            This playground exercises the
+            <code>RichMarkdownField</code>
+            with its ProseMirror WYSIWYG editor. Switch to
+            <strong>Edit</strong>
+            mode to see the editor, or view the rendered markdown below.
+          </p>
+        </header>
+
+        <section class='content'>
+          <h2>Content</h2>
+          <div class='rendered-markdown'>
+            <@fields.body />
+          </div>
+        </section>
+      </article>
+
+      <style scoped>
+        .playground {
+          max-width: 800px;
+          margin: 0 auto;
+          padding: var(--boxel-sp-lg, 24px);
+          font-family: var(--boxel-font-family, sans-serif);
+        }
+
+        .playground header {
+          margin-bottom: var(--boxel-sp-lg, 24px);
+          padding-bottom: var(--boxel-sp, 16px);
+          border-bottom: 1px solid var(--boxel-border-color, #e0e0e0);
+        }
+
+        .playground h1 {
+          margin: 0 0 var(--boxel-sp-xs, 4px);
+          font-size: 1.75rem;
+          font-weight: 700;
+        }
+
+        .subtitle {
+          color: var(--boxel-400, #666);
+          margin: 0;
+          line-height: 1.5;
+        }
+
+        .subtitle code {
+          background: var(--boxel-100, #f5f5f5);
+          padding: 0.1em 0.4em;
+          border-radius: 3px;
+          font-size: 0.9em;
+        }
+
+        .content h2 {
+          font-size: 1.1rem;
+          font-weight: 600;
+          margin-bottom: var(--boxel-sp-sm, 8px);
+          color: var(--boxel-400, #666);
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+
+        .rendered-markdown {
+          border: 1px solid var(--boxel-border-color, #e0e0e0);
+          border-radius: var(--boxel-border-radius, 4px);
+          padding: var(--boxel-sp, 16px);
+          min-height: 200px;
+        }
+      </style>
+    </template>
+  };
+}