replace markdown editor

frontend/package.json

@@ -18,7 +18,6 @@
  "@types/sinon": "^10.0.6",
  "@typescript-eslint/eslint-plugin": "^6.20.0",
  "@typescript-eslint/parser": "^6.20.0",
- "@wysimark/standalone": "3.0.20",
  "@xstate/fsm": "^1.6.2",
  "@zxcvbn-ts/core": "^3.0.4",
  "@zxcvbn-ts/language-common": "^3.0.4",

frontend/src/components/ui/markdown-editor.ts

@@ -1,8 +1,8 @@
 // cSpell:words wysimark
 
 import { ink, type AwaitableInstance } from "ink-mde";
-import { html, type PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
 
 import { TailwindElement } from "@/classes/TailwindElement";
@@ -16,36 +16,49 @@ export type MarkdownChangeEvent = CustomEvent<MarkdownChangeDetail>;
 /**
  * Edit and preview text in markdown
  *
- * @event on-change MarkdownChangeEvent
+ * @fires btrix-change MarkdownChangeEvent
  */
 @customElement("btrix-markdown-editor")
 export class MarkdownEditor extends TailwindElement {
+ static styles = css`
+ .cm-announced {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+ }
+ `;
+
  @property({ type: String })
  initialValue = "";
 
+ @property({ type: String })
+ value = "";
+
  @property({ type: String })
  name = "markdown";
 
  @property({ type: Number })
  maxlength?: number;
 
- @query('input[type="hidden"]')
- private readonly hiddenInput?: HTMLInputElement | null;
-
  private editor?: AwaitableInstance;
 
- protected updated(changedProperties: PropertyValues<this>) {
- if (changedProperties.has("initialValue") && this.initialValue) {
- this.hiddenInput!.value = this.initialValue;
- if (this.editor) {
- this.editor.update(this.initialValue);
- }
- }
- }
+ // protected updated(changedProperties: PropertyValues<this>) {
+ //  if (changedProperties.has("initialValue") && this.initialValue) {
+ //  this.hiddenInput!.value = this.initialValue;
+ //  if (this.editor) {
+ //  this.editor.update(this.initialValue);
+ //  }
+ //  }
+ // }
 
  render() {
- const value = this.hiddenInput!.value;
- const isInvalid = this.maxlength && value.length > this.maxlength;
+ const isInvalid = this.maxlength && this.value.length > this.maxlength;
  return html`
  <fieldset
  class="markdown-editor-wrapper with-max-help-text"
@@ -59,7 +72,7 @@ export class MarkdownEditor extends TailwindElement {
  ></div>
  ${this.maxlength
  ? html`<div class="form-help-text">
- ${getHelpText(this.maxlength, value.length)}
+ ${getHelpText(this.maxlength, this.value.length)}
  </div>`
  : ""}
  </fieldset>
@@ -72,9 +85,18 @@ export class MarkdownEditor extends TailwindElement {
  this.editor = ink(el, {
  doc: this.initialValue,
  hooks: {
- afterUpdate: (doc: string) => {
- this.hiddenInput!.value = doc;
- console.log("doc:", doc);
+ afterUpdate: async (doc: string) => {
+ this.value = doc;
+
+ await this.updateComplete;
+
+ this.dispatchEvent(
+ new CustomEvent<MarkdownChangeDetail>("btrix-change", {
+ detail: {
+ value: doc,
+ },
+ }),
+ );
  },
  },
  interface: {
@@ -98,26 +120,5 @@ export class MarkdownEditor extends TailwindElement {
  upload: false,
  },
  });
-
- // const editor = createWysimark(this.querySelector(".markdown-editor")!, {
- // initialMarkdown: this.initialValue,
- // minHeight: "12rem",
- // onChange: async () => {
- // const value = editor.getMarkdown();
- // const input = this.querySelector<HTMLTextAreaElement>(
- // `input[name=${this.name}]`,
- // );
- // input!.value = value;
- // this.value = value;
- // await this.updateComplete;
- // this.dispatchEvent(
- // new CustomEvent<MarkdownChangeDetail>("on-change", {
- // detail: {
- // value: value,
- // },
- // }),
- // );
- // },
- // });
  }
 }

frontend/src/features/collections/collection-metadata-dialog.ts

@@ -2,11 +2,18 @@ import { localized, msg, str } from "@lit/localize";
 import { type SlInput } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
 import { html } from "lit";
-import { customElement, property, queryAsync, state } from "lit/decorators.js";
+import {
+ customElement,
+ property,
+ query,
+ queryAsync,
+ state,
+} from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
+import type { MarkdownEditor } from "@/components/ui/markdown-editor";
 import type { Collection } from "@/types/collection";
 import { isApiError } from "@/utils/api";
 import { maxLengthValidator } from "@/utils/form";
@@ -33,6 +40,9 @@ export class CollectionMetadataDialog extends BtrixElement {
  @state()
  private isSubmitting = false;
 
+ @query("btrix-markdown-editor")
+ private readonly descriptionEditor?: MarkdownEditor | null;
+
  @queryAsync("#collectionForm")
  private readonly form!: Promise<HTMLFormElement>;
 
@@ -162,7 +172,9 @@ export class CollectionMetadataDialog extends BtrixElement {
  return;
  }
 
- const { name, description, isPublic } = serialize(form);
+ const { name, isPublic } = serialize(form);
+ const description = this.descriptionEditor?.value;
+
  this.isSubmitting = true;
  try {
  const body = JSON.stringify({

frontend/src/pages/org/collection-detail.ts

@@ -1,7 +1,7 @@
 import { localized, msg, str } from "@lit/localize";
 import type { SlCheckbox } from "@shoelace-style/shoelace";
 import { html, nothing, type PropertyValues, type TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { choose } from "lit/directives/choose.js";
 import { guard } from "lit/directives/guard.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -53,6 +53,12 @@ export class CollectionDetail extends BtrixElement {
  @state()
  private showShareInfo = false;
 
+ @query(".description")
+ private readonly description?: HTMLElement | null;
+
+ @query(".descriptionExpandBtn")
+ private readonly descriptionExpandBtn?: HTMLElement | null;
+
  // Use to cancel requests
  private getArchivedItemsController: AbortController | null = null;
 
@@ -726,16 +732,19 @@ export class CollectionDetail extends BtrixElement {
 
  private async checkTruncateDescription() {
  await this.updateComplete;
+
  window.requestAnimationFrame(() => {
- const description = this.querySelector<HTMLElement>(".description");
- if (description?.scrollHeight ?? 0 > (description?.clientHeight ?? 0)) {
- this.querySelector(".descriptionExpandBtn")?.classList.remove("hidden");
+ if (
+ this.description?.scrollHeight ??
+ 0 > (this.description?.clientHeight ?? 0)
+ ) {
+ this.descriptionExpandBtn?.classList.remove("hidden");
  }
  });
  }
 
  private readonly toggleTruncateDescription = () => {
- const description = this.querySelector<HTMLElement>(".description");
+ const description = this.description;
  if (!description) {
  console.debug("no .description");
  return;

frontend/web-test-runner.config.mjs

@@ -70,9 +70,6 @@ export default {
  "@shoelace-style/shoelace/dist/themes/light.css": fileURLToPath(
  new URL("./src/__mocks__/_empty.js", import.meta.url),
  ),
- "@wysimark/standalone": fileURLToPath(
- new URL("./src/__mocks__/_empty.js", import.meta.url),
- ),
  },
  },
  },