on-codemerge/dist/main.mjs

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product

/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
/* empty css                */
/* empty css                 */
import { HTMLEditor as r } from "./HTMLEditor.mjs";
import { ToolbarPlugin as s } from "./src/plugins/ToolbarPlugin/index.mjs";
import { ToolbarDividerPlugin as t } from "./src/plugins/ToolbarDividerPlugin/index.mjs";
import { AlignmentPlugin as u } from "./src/plugins/AlignmentPlugin/index.mjs";
import { TablePlugin as c } from "./src/plugins/TablePlugin/index.mjs";
import { ImagePlugin as m } from "./src/plugins/ImagePlugin/index.mjs";
import { BlockPlugin as b } from "./src/plugins/BlockPlugin/index.mjs";
import { HTMLViewerPlugin as v } from "./src/plugins/HTMLViewerPlugin/index.mjs";
import { CodeBlockPlugin as p } from "./src/plugins/CodeBlockPlugin/index.mjs";
import { TemplatesPlugin as w } from "./src/plugins/TemplatesPlugin/index.mjs";
import { ExportPlugin as g } from "./src/plugins/ExportPlugin/index.mjs";
import { HistoryPlugin as f } from "./src/plugins/HistoryPlugin/index.mjs";
import { ChartsPlugin as P } from "./src/plugins/ChartsPlugin/index.mjs";
import { ShortcutsPlugin as C } from "./src/plugins/ShortcutsPlugin/index.mjs";
import { ColorPlugin as h } from "./src/plugins/ColorPlugin/index.mjs";
import { TypographyPlugin as T } from "./src/plugins/TypographyPlugin/index.mjs";
import { ListsPlugin as E } from "./src/plugins/ListsPlugin/index.mjs";
import { CommentsPlugin as L } from "./src/plugins/CommentsPlugin/index.mjs";
import { FootnotesPlugin as y } from "./src/plugins/FootnotesPlugin/index.mjs";
import { FooterPlugin as B } from "./src/plugins/FooterPlugin/index.mjs";
import { ResponsivePlugin as k } from "./src/plugins/ResponsivePlugin/index.mjs";
import { LinkPlugin as F } from "./src/plugins/LinkPlugin/index.mjs";
import { VideoPlugin as M } from "./src/plugins/VideoPlugin/index.mjs";
import { YouTubeVideoPlugin as H } from "./src/plugins/YouTubeVideoPlugin/index.mjs";
import { FileUploadPlugin as S } from "./src/plugins/FileUploadPlugin/index.mjs";
import { FontPlugin as I } from "./src/plugins/FontPlugin/index.mjs";
import { CollaborationPlugin as x } from "./src/plugins/CollaborationPlugin/index.mjs";
import { FormBuilderPlugin as A } from "./src/plugins/FormBuilderPlugin/index.mjs";
import { SpellCheckerPlugin as D } from "./src/plugins/SpellCheckerPlugin/index.mjs";
import { BlockStylePlugin as R } from "./src/plugins/BlockStylePlugin/index.mjs";
import { MathPlugin as V } from "./src/plugins/MathPlugin/index.mjs";
import { AIAssistantPlugin as U } from "./src/plugins/AIAssistantPlugin/index.mjs";
import { LanguagePlugin as z } from "./src/plugins/LanguagePlugin/index.mjs";
import { CalendarPlugin as N } from "./src/plugins/CalendarPlugin/index.mjs";
import { TimerPlugin as O } from "./src/plugins/TimerPlugin/index.mjs";
import { PDFEmbedPlugin as Y } from "./src/plugins/PDFEmbedPlugin/index.mjs";
import { MentionsPlugin as j } from "./src/plugins/MentionsPlugin/index.mjs";
import { TrackChangesPlugin as q } from "./src/plugins/TrackChangesPlugin/index.mjs";
import { AnchorLinkPlugin as G } from "./src/plugins/AnchorLinkPlugin/index.mjs";
document.addEventListener("DOMContentLoaded", async () => {
  var i;
  const l = document.getElementById("app");
  if (l) {
    const e = new r(l, {
      mode: "shadowRoot"
    });
    e.use(new s()), e.use(new f()), e.use(new t()), e.use(new u()), e.use(new t()), e.use(new I()), e.use(new t()), e.use(new c()), e.use(new m()), e.use(new b()), e.use(new v()), e.use(new p()), e.use(new w()), e.use(new g()), e.use(new P()), e.use(new h()), e.use(new T()), e.use(new E()), e.use(new L()), e.use(new y()), e.use(new B()), e.use(new k()), e.use(new F()), e.use(new M()), e.use(new H()), e.use(new C()), e.use(new A()), e.use(new D()), e.use(new R()), e.use(new V()), e.use(new U()), e.use(new N()), e.use(new O()), e.use(new Y()), e.use(new j()), e.use(new q()), e.use(new G()), e.use(
      new x({
        serverUrl: "ws://localhost:8080",
        autoStart: !0
      })
    ), e.use(
      new S({
        // Configure with emulation by default
        useEmulation: !0,
        maxFileSize: 10 * 1024 * 1024,
        // 10MB
        allowedTypes: ["*/*"]
        // Allow all file types
      })
    ), e.use(new z());
    const n = document.createElement("div");
    n.innerHTML = `
      <hr />
      <div>
        <h3>Result:</h3>
        <div id="result" class="result"></div>
      </div>
      <hr />
      <div>
        <h3>Preview:</h3>
        <div id="preview" class="preview"></div>
      </div>
    `, (i = l.parentNode) == null || i.insertBefore(n, l.nextSibling);
    const a = document.getElementById("result"), o = document.getElementById("preview");
    e.subscribeToContentChange((d) => {
      a && (a.textContent = d), o && (o.innerHTML = d);
    }), e.setHtml(
      `<div>1111
</div>
<div class="responsive-table html-editor-table">
  <div class="table-header-row">
    <div class="table-header-cell" contenteditable="true">Заголовок 1</div>
    <div class="table-header-cell" contenteditable="true">Заголовок 2</div>
    <div class="table-header-cell" contenteditable="true">Заголовок 3</div>
    <div class="table-header-cell" contenteditable="true">Заголовок 4</div>
    <div class="table-header-cell" contenteditable="true">Заголовок 5</div>
    <div class="table-header-cell" contenteditable="true">Заголовок 6</div>
  </div>
  <div class="table-row">
    <div class="table-cell" contenteditable="true" data-label="Заголовок 1">Cell 1 - 1</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 2">Cell 1 - 2</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 3">Cell 1 - 3</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 4">Cell 1 - 4</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 5">Cell 1 - 5</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 6">Cell 1 - 6</div>
  </div>
  <div class="table-row">
    <div class="table-cell" contenteditable="true" data-label="Заголовок 1">Cell 2 - 1</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 2">Cell 2 - 2</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 3">Cell 2 - 3</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 4">Cell 2 - 4</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 5">Cell 2 - 5</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 6">Cell 2 - 6</div>
  </div>
  <div class="table-row">
    <div class="table-cell" contenteditable="true" data-label="Заголовок 1">Cell 3 - 1</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 2">Cell 3 - 2</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 3">Cell 3 - 3</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 4">Cell 3 - 4</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 5">Cell 3 - 5</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 6">Cell 3 - 6</div>
  </div>
  <div class="table-row">
    <div class="table-cell" contenteditable="true" data-label="Заголовок 1">Cell 4 - 1</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 2">Cell 4 - 2</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 3">Cell 4 - 3</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 4">Cell 4 - 4</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 5">Cell 4 - 5</div>
    <div class="table-cell" contenteditable="true" data-label="Заголовок 6">Cell 4 - 6</div>
  </div>
</div>
<br>`
    );
  }
});