lit-tip-tap 0.0.0

package/README.md

@@ -0,0 +1,90 @@
+# lit-tip-tap
+
+Add a rich text editor easily with this component.
+
+Lit web component wrapping [TipTap 3](https://tiptap.dev).
+
+## Install
+
+```sh
+pnpm add lit-tip-tap lit @tiptap/core @tiptap/pm @tiptap/starter-kit
+```
+
+## `<lit-tip-tap>`
+
+### Properties
+
+- `extensions` (`AnyExtension[]`, default `[]`) — TipTap extensions. Falls back to `StarterKit` when empty. Setting this re-initializes the editor, preserving content.
+- `initialString` (`string`, default `''`) — HTML string used as initial editor content.
+- `tiptap` (`Editor`) — The underlying TipTap `Editor` instance (read-only, available after connect).
+
+### Initial Content
+
+Set content via the `initialString` property, or provide a `<template>` child:
+
+```html
+<lit-tip-tap initial-string="Starting content here."></lit-tip-tap>
+```
+
+```html
+<lit-tip-tap>
+  <template>
+    <p>Starting content here.</p>
+  </template>
+</lit-tip-tap>
+```
+
+A `<template>` child takes precedence over `initialString`.
+
+### Getters
+
+- `html` — Current content as HTML.
+- `json` — Current content as TipTap JSON.
+- `value` — Alias for `html`.
+- `textContent` — Plain text content.
+
+### Events
+
+- `change` — Fires on every content update.
+
+### Slots
+
+- `toolbar` — Slot for a toolbar component. Slotted elements receive the `tiptap` editor instance automatically.
+
+## `<lit-tip-tap-toolbar>`
+
+A batteries-included toolbar. Slot it into `<lit-tip-tap>` and it auto-wires to the editor.
+
+Buttons: heading select, bold, italic, strikethrough, code, bullet list, numbered list, indent left/right, blockquote, horizontal rule, clear formatting.
+
+All buttons expose a `part` attribute for styling with `::part()`.
+
+## Code example
+
+```html
+<script type="module">
+  import 'lit-tip-tap/registered';
+  import Underline from '@tiptap/extension-underline';
+
+  const editor = document.querySelector('lit-tip-tap');
+
+  // Add an extension reactively
+  editor.extensions = [...editor.extensions, Underline];
+
+  // Listen for changes
+  editor.addEventListener('change', () => {
+    console.log('HTML:', editor.html);
+    console.log('HTML (value):', editor.value);
+    console.log('JSON:', editor.json);
+    console.log('Text:', editor.textContent);
+  });
+
+  // Programmatic access to TipTap
+  editor.tiptap.commands.focus();
+  editor.tiptap.commands.toggleBold();
+</script>
+
+<lit-tip-tap initial-string="<p>Hello <strong>world</strong></p>">
+  <lit-tip-tap-toolbar slot="toolbar"></lit-tip-tap-toolbar>
+</lit-tip-tap>
+```

package/dist/lit-tip-tap-toolbar-DlicURCM.js

@@ -0,0 +1,234 @@
+var S = (i) => {
+  throw TypeError(i);
+};
+var g = (i, e, t) => e.has(i) || S("Cannot " + t);
+var h = (i, e, t) => (g(i, e, "read from private field"), t ? t.call(i) : e.get(i)), d = (i, e, t) => e.has(i) ? S("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), C = (i, e, t, s) => (g(i, e, "write to private field"), s ? s.call(i, t) : e.set(i, t), t), p = (i, e, t) => (g(i, e, "access private method"), t);
+import { css as x, LitElement as y, html as L } from "lit";
+import { property as k } from "lit/decorators.js";
+import { Extension as A, Editor as H } from "@tiptap/core";
+import q from "@tiptap/starter-kit";
+import { createRef as I, ref as w } from "lit/directives/ref.js";
+import { classMap as r } from "lit/directives/class-map.js";
+const B = x`
+  code {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 0.25em;
+    padding: 0.15em 0.3em;
+    font-size: 0.9em;
+  }
+
+  pre code {
+    display: block;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 0.375em;
+    padding: 0.75em 1em;
+    font-size: 0.9em;
+  }
+
+  blockquote {
+    border-left: 3px solid rgba(0, 0, 0, 0.2);
+    margin-left: 0.5rem;
+    padding-left: 0.5rem;
+  }
+`;
+var P = Object.defineProperty, _ = (i, e, t, s) => {
+  for (var n = void 0, a = i.length - 1, l; a >= 0; a--)
+    (l = i[a]) && (n = l(e, t, n) || n);
+  return n && P(e, t, n), n;
+}, c, o, f, m;
+const $ = class $ extends y {
+  constructor() {
+    super(...arguments);
+    d(this, o);
+    d(this, c);
+    C(this, c, A.create({
+      onUpdate: () => {
+        this.dispatchEvent(new Event("change"));
+      }
+    })), this.extensions = [], this._tipTapEl = I(), this.initialString = "";
+  }
+  addExtension(...t) {
+    const s = this.tiptap.getJSON(), n = this._tipTapEl.value;
+    this.tiptap.destroy(), this.extensions = [...this.extensions, ...t], this.tiptap = p(this, o, f).call(this, this.extensions), n && (this.tiptap.mount(n), this.tiptap.commands.setContent(s)), p(this, o, m).call(this);
+  }
+  get initialContents() {
+    const t = this.querySelector("template");
+    return t ? (this.initialString = t.innerHTML.trim(), this.initialString) : this.initialString;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.tiptap = p(this, o, f).call(this, this.extensions), p(this, o, m).call(this);
+  }
+  firstUpdated() {
+    if (!this._tipTapEl.value)
+      throw new Error("Lit tip tap mounting div not present!");
+    this.tiptap.mount(this._tipTapEl.value), this.tiptap.commands.setContent(this.initialContents);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.tiptap?.destroy();
+  }
+  get html() {
+    return this.tiptap?.getHTML() ?? "";
+  }
+  get json() {
+    return this.tiptap?.getJSON();
+  }
+  get value() {
+    return this.html;
+  }
+  get textContent() {
+    return this.tiptap?.getText() ?? "";
+  }
+  render() {
+    return L`<div>
+      <slot name="toolbar"></slot>
+      <div ${w(this._tipTapEl)}></div>
+    </div>`;
+  }
+};
+c = new WeakMap(), o = new WeakSet(), f = function(t) {
+  const s = [
+    ...t.length > 0 ? t : [q],
+    h(this, c)
+  ];
+  return new H({ extensions: s, injectCSS: !0 });
+}, m = function() {
+  this.querySelectorAll("[slot]").forEach((s) => {
+    s.tiptap = this.tiptap;
+  });
+}, $.styles = B;
+let b = $;
+_([
+  k({ attribute: !1 })
+], b.prototype, "extensions");
+_([
+  k()
+], b.prototype, "initialString");
+var z = Object.defineProperty, M = (i, e, t, s) => {
+  for (var n = void 0, a = i.length - 1, l; a >= 0; a--)
+    (l = i[a]) && (n = l(e, t, n) || n);
+  return n && z(e, t, n), n;
+}, u;
+const E = class E extends y {
+  constructor() {
+    super(...arguments);
+    d(this, u, () => {
+      this.requestUpdate();
+    });
+  }
+  willUpdate(t) {
+    t.has("tiptap") && (t.get("tiptap")?.off(
+      "transaction",
+      h(this, u)
+    ), this.tiptap?.on("transaction", h(this, u)));
+  }
+  render() {
+    return L`<div part="toolbar">
+      <select
+        part="heading-select"
+        @change=${(t) => {
+      if (t.target instanceof HTMLSelectElement) {
+        const { value: s } = t.target;
+        if (s === "paragraph")
+          this.tiptap?.chain().focus().setParagraph().run();
+        else {
+          const n = Number(s);
+          this.tiptap?.chain().focus().toggleHeading({ level: n }).run();
+        }
+      }
+    }}
+      >
+        <option value="paragraph">Paragraph</option>
+        <option value="1">Heading 1</option>
+        <option value="2">Heading 2</option>
+        <option value="3">Heading 3</option>
+      </select>
+      <button
+        part="button bold-button"
+        class=${r({ "is-active": this.tiptap?.isActive("bold") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleBold().run()}
+      >
+        Bold
+      </button>
+      <button
+        part="button italic-button"
+        class=${r({ "is-active": this.tiptap?.isActive("italic") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleItalic().run()}
+      >
+        Italic
+      </button>
+      <button
+        part="button strike-button"
+        class=${r({ "is-active": this.tiptap?.isActive("strike") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleStrike().run()}
+      >
+        Strikethrough
+      </button>
+      <button
+        part="button code-button"
+        class=${r({ "is-active": this.tiptap?.isActive("code") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleCode().run()}
+      >
+        Code
+      </button>
+      <button
+        part="button bullet-list-button"
+        class=${r({ "is-active": this.tiptap?.isActive("bulletList") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleBulletList().run()}
+      >
+        Bullet List
+      </button>
+      <button
+        part="button ordered-list-button"
+        class=${r({ "is-active": this.tiptap?.isActive("orderedList") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleOrderedList().run()}
+      >
+        Numbered List
+      </button>
+      <button
+        part="button indent-left-button"
+        @click=${() => this.tiptap?.chain().focus().liftListItem("listItem").run()}
+      >
+        Indent Left
+      </button>
+      <button
+        part="button indent-right-button"
+        @click=${() => this.tiptap?.chain().focus().sinkListItem("listItem").run()}
+      >
+        Indent Right
+      </button>
+      <button
+        part="button blockquote-button"
+        class=${r({ "is-active": this.tiptap?.isActive("blockquote") ?? !1 })}
+        @click=${() => this.tiptap?.chain().focus().toggleBlockquote().run()}
+      >
+        Blockquote
+      </button>
+      <button
+        part="button horizontal-rule-button"
+        @click=${() => this.tiptap?.chain().focus().setHorizontalRule().run()}
+      >
+        Horizontal Rule
+      </button>
+      <button
+        part="button clear-formatting-button"
+        @click=${() => this.tiptap?.chain().focus().unsetAllMarks().run()}
+      >
+        Clear Formatting
+      </button>
+    </div>`;
+  }
+};
+u = new WeakMap(), E.styles = x`
+    button.is-active {
+      background-color: rgba(0, 0, 0, 0.1);
+      font-weight: bold;
+    }
+  `;
+let v = E;
+M([
+  k({ attribute: !1 })
+], v.prototype, "tiptap");
+export {
+  b as L,
+  v as a
+};

package/dist/lit-tip-tap.js

@@ -0,0 +1,5 @@
+import { L as T, a as i } from "./lit-tip-tap-toolbar-DlicURCM.js";
+export {
+  T as LitTipTap,
+  i as LitTipTapToolbar
+};

package/dist/lit-tip-tap.registered.js

@@ -0,0 +1,7 @@
+import { L as t, a as i } from "./lit-tip-tap-toolbar-DlicURCM.js";
+customElements.define("lit-tip-tap", t);
+customElements.define("lit-tip-tap-toolbar", i);
+export {
+  t as LitTipTap,
+  i as LitTipTapToolbar
+};

package/dist/src/basic.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { LitTipTap } from './lit-tip-tap.js';
+export { LitTipTapToolbar } from './lit-tip-tap-toolbar.js';

package/dist/src/index.registered.d.ts

@@ -0,0 +1,4 @@
+export { LitTipTap } from './lit-tip-tap.js';
+export { LitTipTapToolbar } from './lit-tip-tap-toolbar.js';
+import './lit-tip-tap.register.js';
+import './lit-tip-tap-toolbar.register.js';

package/dist/src/lit-tip-tap-toolbar.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/core';
+import { LitElement } from 'lit';
+export declare class LitTipTapToolbar extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    tiptap?: Editor;
+    willUpdate(changed: Map<PropertyKey, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/lit-tip-tap-toolbar.register.d.ts

@@ -0,0 +1,6 @@
+import { LitTipTapToolbar } from './lit-tip-tap-toolbar.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-tip-tap-toolbar': LitTipTapToolbar;
+    }
+}

package/dist/src/lit-tip-tap.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+import { Editor, type AnyExtension } from '@tiptap/core';
+export declare class LitTipTap extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    tiptap: Editor;
+    extensions: AnyExtension[];
+    addExtension(...newExtensions: AnyExtension[]): void;
+    _tipTapEl: import("lit/directives/ref.js").Ref<HTMLDivElement>;
+    initialString: string;
+    get initialContents(): string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    get html(): string;
+    get json(): import("@tiptap/core").DocumentType<Record<string, any> | undefined, import("@tiptap/core").NodeType<string, Record<string, any> | undefined, any, (import("@tiptap/core").NodeType<any, any, any, any> | import("@tiptap/core").TextType<import("@tiptap/core").MarkType<any, any>>)[]>[]>;
+    get value(): string;
+    get textContent(): string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/src/lit-tip-tap.register.d.ts

@@ -0,0 +1,6 @@
+import { LitTipTap } from './lit-tip-tap.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'lit-tip-tap': LitTipTap;
+    }
+}

package/dist/tests/lit-tip-tap-toolbar.test.d.ts

@@ -0,0 +1,2 @@
+import '../src/lit-tip-tap.register.js';
+import '../src/lit-tip-tap-toolbar.register.js';

package/dist/tests/lit-tip-tap.test.d.ts

@@ -0,0 +1 @@
+import '../src/lit-tip-tap.register.js';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "lit-tip-tap",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/lit-tip-tap.js",
+  "module": "./dist/lit-tip-tap.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/lit-tip-tap.js"
+    },
+    "./registered": {
+      "types": "./dist/index.registered.d.ts",
+      "import": "./dist/lit-tip-tap.registered.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^3.19.0",
+    "@tiptap/pm": "^3.19.0",
+    "@tiptap/starter-kit": "^3.19.0",
+    "lit": "^3.3.1"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^3.19.0",
+    "@tiptap/pm": "^3.19.0",
+    "@tiptap/starter-kit": "^3.19.0",
+    "@vitest/browser-playwright": "^4.0.18",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-lit": "^2.2.1",
+    "lit": "^3.3.1",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.55.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write src",
+    "format:check": "prettier --check src",
+    "test": "vitest",
+    "test:run": "vitest run"
+  }
+}