fix(lit-components): fix rendering and interaction issues in force-graph, html-table, and draggable-dom

- lit-force-graph: Refactored for instance reuse, better lifecycle management, and added dynamic imports for AR/VR modes. - lit-html-table: Improved visual design, readability of headers, and fixed reactivity in editable mode. - lit-draggable-dom: Fixed clipping issues by switching to relative/absolute positioning and resolved a panning speed bug caused by CSS variable inheritance.
2026-05-17 00:41:14 -07:00
parent bbdbeb9788
commit b9e42c3ef4
253 changed files with 2555 additions and 4471 deletions
@@ -0,0 +1,69 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+@customElement("rich-viewer")
+export class RichViewer extends LitElement {
+  static styles = css`
+    article {
+      padding: var(--rich-padding);
+      width: calc(100% - var(--rich-padding) * 2);
+      height: calc(100% - var(--rich-padding) * 2);
+    }
+
+    article[contenteditable="true"] {
+      border: none;
+      outline: none;
+    }
+  `;
+
+  @query("#content") content!: HTMLDivElement;
+  @property({ type: Boolean }) readonly = false;
+  @property({ type: Object, hasChanged: () => true }) node!: Element;
+
+  render() {
+    const { readonly, node } = this;
+    return html`<article
+      id="content"
+      contenteditable=${readonly ? "false" : "true"}
+      @input=${() => this.updateSelection()}
+    >
+      ${node}
+    </article>`;
+  }
+
+  updateSelection() {
+    // @ts-ignore
+    const shadowSelection = this.shadowRoot?.getSelection
+      ? // @ts-ignore
+        this.shadowRoot!.getSelection()
+      : null;
+    const selection =
+      shadowSelection || document.getSelection() || window.getSelection();
+    this.dispatchEvent(
+      new CustomEvent("selection", {
+        detail: selection,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  firstUpdated() {
+    document.execCommand("defaultParagraphSeparator", false, "br");
+    document.addEventListener("selectionchange", () => {
+      this.updateSelection();
+    });
+    window.addEventListener("selectionchange", () => {
+      this.updateSelection();
+    });
+    document.addEventListener("keydown", () => {
+      this.updateSelection();
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rich-viewer": RichViewer;
+  }
+}