@kerebron/extension-menu 0.3.2 → 0.4.1

package/assets/menu.css

@@ -1,32 +1,79 @@
-/* Base menu and toolbar styles */
+/* Base menu and toolbar styles - Google Docs style with overflow */
 .kb-menu {
   margin: 0;
   line-height: 1;
-  font-size: var(--kb-text-sm);
-}
-
-/* Mobile-first toolbar */
-.kb-menu {
+  font-size: 14px;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
   position: sticky;
   top: 0;
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--kb-space-xs);
-  padding: var(--kb-space-sm);
-  background: var(--kb-color-surface);
-  border-bottom: 1px solid var(--kb-color-border);
-  z-index: var(--kb-z-dropdown);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0;
+  padding: 4px 8px;
+  background: #f9f9f9;
+  border-bottom: 1px solid #dadce0;
+  z-index: var(--kb-z-dropdown, 1000);
+  overflow: visible;
 }
 
-.kb-menu::-webkit-scrollbar {
+/* Content host - main toolbar items */
+.kb-menu__content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 0;
+  overflow: hidden;
+}
+
+/* Overflow toggle button (3-dot menu) */
+.kb-overflow-toggle {
+  display: none; /* shown by JS when needed */
+  min-width: 30px;
+  min-height: 30px;
+  padding: 6px;
+  border: none;
+  background: transparent;
+  color: #3c4043;
+  cursor: pointer;
+  border-radius: 2px;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.kb-overflow-toggle:hover {
+  background: rgba(60, 64, 67, 0.08);
+}
+
+.kb-overflow-toggle svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/* Overflow row - second row for overflowed items */
+.kb-menu__overflow-row {
   display: none;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px;
+  background: #f9f9f9;
+  border-bottom: 1px solid #dadce0;
 }
 
-/* Mobile: bottom-anchored toolbar for one-handed use */
+.kb-menu--overflow-open .kb-menu__overflow-row {
+  display: flex;
+  position: absolute;
+}
+
+/* When narrow, show overflow toggle */
+.kb-menu--narrow .kb-overflow-toggle {
+  display: inline-flex;
+}
+
+/* Mobile: bottom-anchored toolbar */
 @media (max-width: 767px) {
   .kb-menu {
     position: fixed;
@@ -35,17 +82,33 @@
     right: 0;
     top: auto;
     border-bottom: none;
-    border-top: 1px solid var(--kb-color-border);
-    box-shadow: var(--kb-shadow-lg);
+    border-top: 1px solid #dadce0;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(249, 249, 249, 0.95);
+    padding: 8px;
+  }
+
+  .kb-menu__overflow-row {
+    position: fixed;
+    bottom: 60px;
+    left: 0;
+    right: 0;
+    border-top: 1px solid #dadce0;
+    border-bottom: none;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
   }
 
   /* Add bottom padding to editor content to prevent overlap */
-  .kb-component {
-    padding-bottom: calc(
-      var(--kb-touch-target-comfortable) + var(--kb-space-md) * 2
-    );
+  .kb-component,
+  .ProseMirror {
+    padding-bottom: 60px !important;
+  }
+
+  .kb-overflow-toggle {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 10px;
   }
 }
 
@@ -229,7 +292,7 @@
 }
 
 /* Accessibility: High contrast mode support */
-@media (prefers-contrast: high) {
+@media (prefers-contrast: more) {
   .kb-dropdown__item,
   .kb-dropdown__item:focus {
     outline-width: 3px;
@@ -537,3 +600,267 @@
     border-color: var(--kb-color-primary);
   }
 }
+
+/* ===========================
+   Google-Docs–style toolbar for kb-menu
+   (main look + overflow behavior)
+   =========================== */
+
+:root {
+  --kb-bg: #fff;
+  --kb-fg: #1f1f1f;
+  --kb-subtle: #5f6368;
+  --kb-border: #e0e0e0;
+  --kb-hover: #f1f3f4;
+  --kb-active: #e8f0fe;
+  --kb-focus: #1a73e8;
+  --kb-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  --kb-height: 48px;
+  --kb-btn-h: 34px;
+  --kb-radius: 10px;
+
+  --kb-gap: 8px;
+  --kb-icon: 18px;
+  --kb-font: 13px;
+}
+
+/* Keep light toolbar even for dark pages (like Google Docs) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --kb-bg: #ffffff;
+    --kb-fg: #1f1f1f;
+    --kb-subtle: #5f6368;
+    --kb-border: #e6e7e8;
+    --kb-hover: #f3f4f5;
+    --kb-active: #e8f0fe;
+  }
+}
+
+/* Wrapper around toolbar + editor (plugin inserts this) */
+.kb-menu__wrapper {
+  z-index: 50;
+  padding: 8px 12px; /* spacing around the pill */
+  background: transparent;
+}
+
+/* The toolbar element */
+.kb-menu {
+  background: var(--kb-bg);
+  border: 1px solid var(--kb-border);
+  border-radius: var(--kb-radius);
+  box-shadow: var(--kb-shadow);
+
+  min-height: var(--kb-height);
+  display: flex;
+  align-items: center;
+  gap: var(--kb-gap);
+  padding: 0 8px;
+
+  container-type: inline-size;
+}
+
+/* Spacer used when floating */
+.kb-menu__spacer {
+  height: var(--kb-height);
+}
+
+/* Items and separators from renderGrouped */
+.kb-menu__item {
+  display: inline-flex;
+  align-items: center;
+}
+.kb-menu__separator {
+  width: 1px;
+  height: 22px;
+  background: var(--kb-border);
+  flex: 0 0 auto;
+  margin: 0 2px;
+}
+
+/* Buttons */
+.kb-menu__button {
+  height: var(--kb-btn-h);
+  min-width: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--kb-fg);
+  font:
+    500 var(--kb-font)/1.2 system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    Arial;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.kb-menu__button svg,
+.kb-menu__button .kb-icon {
+  width: var(--kb-icon);
+  height: var(--kb-icon);
+  fill: currentColor;
+}
+.kb-menu__button:hover {
+  background: var(--kb-hover);
+}
+.kb-menu__button:focus-visible {
+  outline: 2px solid var(--kb-focus);
+  outline-offset: 2px;
+  background: var(--kb-hover);
+}
+.kb-menu__button--active,
+.kb-menu__button[aria-pressed='true'] {
+  background: var(--kb-active);
+  border-color: #d2e3fc;
+}
+.kb-menu__button--disabled,
+.kb-menu__button[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+.kb-menu__button--icon-only > span {
+  display: none;
+}
+
+/* Dropdowns */
+.kb-dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.kb-dropdown__label {
+  height: var(--kb-btn-h);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--kb-fg);
+  font:
+    500 var(--kb-font)/1.2 system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    Arial;
+  cursor: pointer;
+}
+.kb-dropdown__label:hover {
+  background: var(--kb-hover);
+}
+.kb-dropdown--open .kb-dropdown__label {
+  background: var(--kb-active);
+  border-color: #d2e3fc;
+}
+.kb-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 240px;
+  max-height: 60vh;
+  overflow: auto;
+  background: var(--kb-bg);
+  color: var(--kb-fg);
+  border: 1px solid var(--kb-border);
+  border-radius: 10px;
+  box-shadow: var(--kb-shadow);
+  padding: 6px;
+  display: grid;
+  gap: 2px;
+  z-index: 100;
+}
+.kb-dropdown__item {
+  display: contents;
+}
+.kb-dropdown__item .kb-menu__button {
+  justify-content: flex-start;
+  width: 100%;
+  border-radius: 8px;
+}
+
+/* Submenus */
+.kb-submenu {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.kb-submenu__label {
+  height: var(--kb-btn-h);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+}
+.kb-submenu__label:hover {
+  background: var(--kb-hover);
+}
+.kb-submenu__content {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 220px;
+  max-height: 60vh;
+  overflow: auto;
+  background: var(--kb-bg);
+  border: 1px solid var(--kb-border);
+  border-radius: 10px;
+  box-shadow: var(--kb-shadow);
+  padding: 6px;
+  display: none;
+  z-index: 100;
+}
+.kb-submenu--open .kb-submenu__content {
+  display: block;
+}
+
+/* --------- Overflow behavior --------- */
+
+/* Hidden until narrow AND there is overflow (JS toggles display) */
+.kb-overflow-toggle {
+  display: none;
+}
+
+/* Second row container (hidden until toggled open) */
+.kb-menu__overflow-row {
+  display: none;
+  margin: 6px 12px 0; /* align with wrapper padding */
+  padding: 6px;
+  background: var(--kb-bg);
+  border: 1px solid var(--kb-border);
+  border-radius: 10px;
+  box-shadow: var(--kb-shadow);
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* When narrow, show 3-dots (JS may still hide if empty) */
+.kb-menu--narrow .kb-overflow-toggle {
+  display: inline-flex;
+}
+
+/* When toggled open, show the overflow row */
+.kb-menu--overflow-open .kb-menu__overflow-row {
+  display: flex;
+}
+
+/* On very small/mobile, put overflow row ABOVE the main bar */
+@media (max-width: 600px) {
+  .kb-menu__wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .kb-menu--overflow-open .kb-menu__overflow-row {
+    order: -1;
+  }
+}

package/esm/_dnt.shims.d.ts

@@ -0,0 +1,6 @@
+import { Deno } from "@deno/shim-deno";
+export { Deno } from "@deno/shim-deno";
+export declare const dntGlobalThis: Omit<typeof globalThis, "Deno"> & {
+    Deno: typeof Deno;
+};
+//# sourceMappingURL=_dnt.shims.d.ts.map

package/esm/_dnt.shims.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_dnt.shims.d.ts","sourceRoot":"","sources":["../src/_dnt.shims.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAKvC,eAAO,MAAM,aAAa;;CAA2C,CAAC"}

package/esm/_dnt.shims.js

@@ -0,0 +1,61 @@
+import { Deno } from "@deno/shim-deno";
+export { Deno } from "@deno/shim-deno";
+const dntGlobals = {
+    Deno,
+};
+export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
+function createMergeProxy(baseObj, extObj) {
+    return new Proxy(baseObj, {
+        get(_target, prop, _receiver) {
+            if (prop in extObj) {
+                return extObj[prop];
+            }
+            else {
+                return baseObj[prop];
+            }
+        },
+        set(_target, prop, value) {
+            if (prop in extObj) {
+                delete extObj[prop];
+            }
+            baseObj[prop] = value;
+            return true;
+        },
+        deleteProperty(_target, prop) {
+            let success = false;
+            if (prop in extObj) {
+                delete extObj[prop];
+                success = true;
+            }
+            if (prop in baseObj) {
+                delete baseObj[prop];
+                success = true;
+            }
+            return success;
+        },
+        ownKeys(_target) {
+            const baseKeys = Reflect.ownKeys(baseObj);
+            const extKeys = Reflect.ownKeys(extObj);
+            const extKeysSet = new Set(extKeys);
+            return [...baseKeys.filter((k) => !extKeysSet.has(k)), ...extKeys];
+        },
+        defineProperty(_target, prop, desc) {
+            if (prop in extObj) {
+                delete extObj[prop];
+            }
+            Reflect.defineProperty(baseObj, prop, desc);
+            return true;
+        },
+        getOwnPropertyDescriptor(_target, prop) {
+            if (prop in extObj) {
+                return Reflect.getOwnPropertyDescriptor(extObj, prop);
+            }
+            else {
+                return Reflect.getOwnPropertyDescriptor(baseObj, prop);
+            }
+        },
+        has(_target, prop) {
+            return prop in extObj || prop in baseObj;
+        },
+    });
+}

package/esm/editor/src/CoreEditor.d.ts

@@ -1,19 +1,27 @@
 import { EditorView } from 'prosemirror-view';
 import { Node as ProseMirrorNode, Schema } from 'prosemirror-model';
-import type { EditorOptions, JSONContent } from './types.js';
+import type { EditorConfig, JSONContent } from './types.js';
 import { EditorState, Transaction } from 'prosemirror-state';
 import { DummyEditorView } from './DummyEditorView.js';
 import { ChainedCommands } from './commands/mod.js';
 import { Extension } from './Extension.js';
+import { EditorUi } from './ui.js';
 export declare class CoreEditor extends EventTarget {
-    readonly options: Partial<EditorOptions>;
+    readonly config: Partial<EditorConfig>;
     private extensionManager;
     private commandManager;
     view: EditorView | DummyEditorView;
     state: EditorState;
-    constructor(options?: Partial<EditorOptions>);
+    ui: EditorUi;
+    constructor(config?: Partial<EditorConfig>);
     getExtension<T extends Extension>(name: string): T | undefined;
     get schema(): Schema<any, any>;
+    get run(): {
+        [key: string]: (...args: any[]) => boolean;
+    };
+    get commandFactories(): {
+        [key: string]: import("./commands/types.js").CommandFactory;
+    };
     chain(): ChainedCommands;
     can(): ChainedCommands;
     private createView;
@@ -25,7 +33,8 @@ export declare class CoreEditor extends EventTarget {
     loadDocument(mediaType: string, content: Uint8Array): Promise<void>;
     saveDocument(mediaType: string): Promise<Uint8Array>;
     getJSON(): JSONContent;
-    clone(options?: Partial<EditorOptions>): CoreEditor;
+    clone(options?: Partial<EditorConfig>): CoreEditor;
     debug(doc?: ProseMirrorNode): void;
+    destroy(): void;
 }
 //# sourceMappingURL=CoreEditor.d.ts.map

package/esm/editor/src/CoreEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoreEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/src/CoreEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAc3C,qBAAa,UAAW,SAAQ,WAAW;IACzC,SAAgB,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,CAG7C;IACF,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,cAAc,CAAiB;IAChC,IAAI,EAAG,UAAU,GAAG,eAAe,CAAC;IACpC,KAAK,EAAG,WAAW,CAAC;gBAEf,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM;IA4BhD,YAAY,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;IAI9D,IAAW,MAAM,qBAEhB;IAEM,KAAK,IAAI,eAAe;IAIxB,GAAG,IAAI,eAAe;IAI7B,OAAO,CAAC,UAAU;IAqBX,mBAAmB,CAAC,WAAW,EAAE,WAAW;IAcnD,OAAO,CAAC,YAAY;IAcb,aAAa;IASb,WAAW,CAAC,OAAO,EAAE,GAAG;IAyBxB,WAAW;IAIL,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;IA0BnD,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;IAY1D,OAAO,IAAI,WAAW;IAItB,KAAK,CAAC,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,UAAU;IAOvD,KAAK,CAAC,GAAG,CAAC,EAAE,eAAe;CAMnC"}
+{"version":3,"file":"CoreEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/src/CoreEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAc9C,qBAAa,UAAW,SAAQ,WAAW;IACzC,SAAgB,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,CAG3C;IACF,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,cAAc,CAAiB;IAChC,IAAI,EAAG,UAAU,GAAG,eAAe,CAAC;IACpC,KAAK,EAAG,WAAW,CAAC;IACpB,EAAE,EAAE,QAAQ,CAAmB;gBAE1B,MAAM,GAAE,OAAO,CAAC,YAAY,CAAM;IA+B9C,YAAY,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS;IAI9D,IAAW,MAAM,qBAEhB;IAED,IAAW,GAAG;;MAEb;IAED,IAAW,gBAAgB;;MAE1B;IAEM,KAAK,IAAI,eAAe;IAIxB,GAAG,IAAI,eAAe;IAI7B,OAAO,CAAC,UAAU;IA8CX,mBAAmB,CAAC,WAAW,EAAE,WAAW;IAsBnD,OAAO,CAAC,YAAY;IAcb,aAAa;IASb,WAAW,CAAC,OAAO,EAAE,GAAG;IAyBxB,WAAW;IAIL,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU;IA0BnD,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC;IAY1D,OAAO,IAAI,WAAW;IAItB,KAAK,CAAC,OAAO,GAAE,OAAO,CAAC,YAAY,CAAM,GAAG,UAAU;IAOtD,KAAK,CAAC,GAAG,CAAC,EAAE,eAAe;IAO3B,OAAO;CAOf"}

package/esm/editor/src/CoreEditor.js

@@ -6,6 +6,7 @@ import { CommandManager } from './commands/CommandManager.js';
 import { nodeToTreeString } from './nodeToTreeString.js';
 import { DummyEditorView } from './DummyEditorView.js';
 import { createNodeFromObject } from './utilities/createNodeFromContent.js';
+import { defaultUi } from './ui.js';
 function ensureDocSchema(doc, schema) {
     if (doc.type.schema === schema) {
         return doc;
@@ -14,9 +15,9 @@ function ensureDocSchema(doc, schema) {
     return ProseMirrorNode.fromJSON(schema, json);
 }
 export class CoreEditor extends EventTarget {
-    constructor(options = {}) {
+    constructor(config = {}) {
         super();
-        Object.defineProperty(this, "options", {
+        Object.defineProperty(this, "config", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -49,20 +50,27 @@ export class CoreEditor extends EventTarget {
             writable: true,
             value: void 0
         });
-        this.options = {
-            ...this.options,
-            ...options,
+        Object.defineProperty(this, "ui", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: defaultUi(this)
+        });
+        this.config = {
+            ...this.config,
+            ...config,
         };
-        this.extensionManager = new ExtensionManager(this.options.extensions || [], this);
+        this.commandManager = new CommandManager(this);
+        this.extensionManager = new ExtensionManager(this.config.extensions || [], this, this.commandManager);
+        this.extensionManager.created();
         // const content = this.options.content ? this.options.content : {
         //   type: this.extensionManager.schema.topNodeType.name,
         //   content: this.extensionManager.schema.topNodeType.spec.EMPTY_DOC,
         // };
-        const content = this.options.content
-            ? this.options.content
+        const content = this.config.content
+            ? this.config.content
             : this.extensionManager.schema.topNodeType.spec.EMPTY_DOC;
         this.createView(content);
-        this.commandManager = new CommandManager(this, this.extensionManager.commandFactories);
         this.setupPlugins();
     }
     getExtension(name) {
@@ -71,6 +79,12 @@ export class CoreEditor extends EventTarget {
     get schema() {
         return this.extensionManager.schema;
     }
+    get run() {
+        return this.commandManager.run;
+    }
+    get commandFactories() {
+        return this.commandManager.commandFactories;
+    }
     chain() {
         return this.commandManager.createChain();
     }
@@ -80,14 +94,30 @@ export class CoreEditor extends EventTarget {
     createView(content) {
         const doc = createNodeFromObject(content, this.schema);
         this.state = EditorState.create({ doc });
-        if (this.options.element) {
-            this.view = new EditorView(this.options.element, {
+        if (this.config.element) {
+            const view = new EditorView(this.config.element, {
                 state: this.state,
                 attributes: {
                     class: 'kb-editor',
                 },
                 dispatchTransaction: (tx) => this.dispatchTransaction(tx),
             });
+            this.view = view;
+            const parent = this.config.element.parentNode;
+            if (parent) {
+                const observer = new MutationObserver((mutations) => {
+                    for (const mutation of mutations) {
+                        for (const removedNode of mutation.removedNodes) {
+                            if (removedNode.contains(view.dom)) {
+                                // Editor DOM was removed
+                                observer.disconnect(); // Prevent multiple calls
+                                view.destroy();
+                                return;
+                            }
+                        }
+                    }
+                });
+            }
         }
         else {
             this.view = new DummyEditorView({
@@ -95,6 +125,13 @@ export class CoreEditor extends EventTarget {
                 dispatchTransaction: (tx) => this.dispatchTransaction(tx),
             });
         }
+        const event = new CustomEvent('doc:loaded', {
+            detail: {
+                editor: this,
+                doc,
+            },
+        });
+        this.dispatchEvent(event);
     }
     dispatchTransaction(transaction) {
         this.state = this.state.apply(transaction);
@@ -108,6 +145,14 @@ export class CoreEditor extends EventTarget {
             });
             this.dispatchEvent(event);
         }
+        if (transaction.docChanged) {
+            const event = new CustomEvent('changed', {
+                detail: {
+                    editor: this,
+                },
+            });
+            this.dispatchEvent(event);
+        }
     }
     setupPlugins() {
         this.state = this.state.reconfigure({
@@ -188,7 +233,7 @@ export class CoreEditor extends EventTarget {
     clone(options = {}) {
         return new CoreEditor({
             ...options,
-            extensions: [...(this.options.extensions || [])],
+            extensions: [...(this.config.extensions || [])],
         });
     }
     debug(doc) {
@@ -197,4 +242,11 @@ export class CoreEditor extends EventTarget {
         }
         console.debug(nodeToTreeString(doc));
     }
+    destroy() {
+        const event = new CustomEvent('beforeDestroy', {
+            detail: {},
+        });
+        this.dispatchEvent(event);
+        this.view.destroy();
+    }
 }

package/esm/editor/src/Extension.d.ts

@@ -15,9 +15,14 @@ export declare abstract class Extension {
     protected config: Partial<ExtensionConfig>;
     readonly type = "extension";
     abstract name: string;
+    protected editor: CoreEditor;
+    readonly conflicts?: Array<string>;
     constructor(config?: Partial<ExtensionConfig>);
+    setEditor(editor: CoreEditor): void;
+    getEditor(): CoreEditor;
+    created(): void;
     getInputRules(): InputRule[];
-    getProseMirrorPlugins(editor: CoreEditor, schema: Schema): Plugin[];
+    getProseMirrorPlugins(): Plugin[];
     getCommandFactories(editor: CoreEditor): Partial<CommandFactories>;
     getKeyboardShortcuts(editor: CoreEditor): Partial<CommandShortcuts>;
     getConverters(editor: CoreEditor, schema: Schema): Record<string, Converter>;