{"version":3,"file":"ngx-t-forms-editor-js-input.component-02HnmInT.mjs","sources":["../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/editor-input-element/core/form-input-rich-text-editor/config.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/editor-input-element/core/editor-full-screen.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/editor-input-element/core/editor-full-screen-toggle/editor-full-screen-toggle.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/editor-input-element/core/editor-full-screen-toggle/editor-full-screen-toggle.component.html","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/editor-input-element/core/editor-js-input/editor-js-input.component.ts","../../../projects/ngx-t-forms/src/lib/components/t-form-input/elements/editor-input-element/core/editor-js-input/editor-js-input.component.html"],"sourcesContent":["/// \r\nimport type { EditorConfig, LogLevels, OutputData, ToolConstructable } from \"@editorjs/editorjs\";\r\n// `@editorjs/editorjs` is CJS — runtime named imports fail under Node ESM (SSR / smoke harness).\r\n// `LogLevels` is a runtime enum with string values; use the string literal cast at the single use site below.\r\n//\r\n// Wave 2 / Trap 16: every Editor.js plugin package below is a browser-only UMD bundle that crashes\r\n// under bare Node SSR (`self`/`document` not defined at module-eval). They are now loaded via\r\n// dynamic `import()` inside `loadEditorConfig()`, which is only invoked from an SSR-gated\r\n// `ngAfterViewInit` (see `editor-js-input.component.ts`). Static top-level imports here are\r\n// type-only and emit zero runtime code.\r\n\r\nexport interface EditorJsPayload {\r\n holderId: string,\r\n imageFetchEndpoint:string,\r\n imageUploadEndpoint: string,\r\n readOnly:boolean,\r\n onChangeFn: () => void,\r\n data:OutputData|undefined\r\n}\r\n\r\n// Third-party Editor.js tool packages ship without typings that line up with\r\n// the host editor's `ToolConstructable`. We narrow at the registration boundary\r\n// via `unknown` rather than leaking `any` through this module.\r\nconst asToolConstructable = (tool: unknown): ToolConstructable =>\r\n tool as ToolConstructable;\r\n\r\n/**\r\n * Dynamically loads every Editor.js plugin bundle and returns a ready-to-use `EditorConfig`.\r\n *\r\n * Browser-only: callers MUST gate this behind `isPlatformBrowser(...)` because each plugin\r\n * package touches `self` / `document` at module-eval time and crashes under bare-Node SSR.\r\n */\r\nexport const loadEditorConfig = async (\r\n payload: EditorJsPayload\r\n): Promise => {\r\n const [\r\n { default: Header },\r\n { default: List },\r\n { default: Paragraph },\r\n { default: Quote },\r\n { default: Table },\r\n { default: ImageTool },\r\n { default: Delimiter },\r\n { default: CodeTool },\r\n { default: Embed },\r\n ] = await Promise.all([\r\n import('@editorjs/header'),\r\n import('@editorjs/list'),\r\n import('@editorjs/paragraph'),\r\n import('@editorjs/quote'),\r\n import('@editorjs/table'),\r\n import('@editorjs/image'),\r\n import('@editorjs/delimiter'),\r\n import('@editorjs/code'),\r\n import('@editorjs/embed'),\r\n ]);\r\n\r\n return ({\r\n holder: payload.holderId,\r\n autofocus: true,\r\n placeholder: 'Let\\'s write something amazing...',\r\n inlineToolbar: true,\r\n tools: {\r\n header: {\r\n class: asToolConstructable(Header),\r\n config: {\r\n levels: [1, 2, 3, 4, 5, 6],\r\n defaultLevel: 1,\r\n placeholder: 'Type your heading here...'\r\n },\r\n inlineToolbar: ['link', 'bold', 'italic', 'marker']\r\n },\r\n list: {\r\n class: asToolConstructable(List),\r\n inlineToolbar: true,\r\n config: {\r\n defaultStyle: 'unordered',\r\n placeholder: 'Enter a list item here...'\r\n }\r\n },\r\n paragraph: {\r\n class: asToolConstructable(Paragraph),\r\n inlineToolbar: true,\r\n config: {\r\n preserveBlank: true,\r\n placeholder: 'Type your paragraph here...'\r\n }\r\n },\r\n quote: {\r\n class: asToolConstructable(Quote),\r\n inlineToolbar: true,\r\n shortcut: 'CMD+SHIFT+Q',\r\n config: {\r\n quotePlaceholder: 'Enter a quote',\r\n captionPlaceholder: 'Quote\\'s author',\r\n alignmentEnabled: true\r\n }\r\n },\r\n delimiter: {\r\n class: asToolConstructable(Delimiter)\r\n },\r\n image: {\r\n class: asToolConstructable(ImageTool),\r\n config: {\r\n endpoints: {\r\n byFile: payload.imageUploadEndpoint,\r\n byUrl: payload.imageFetchEndpoint\r\n },\r\n uploader: {\r\n uploadByFile(file: File) {\r\n // Custom upload logic\r\n }\r\n }\r\n }\r\n },\r\n table: {\r\n class: asToolConstructable(Table),\r\n inlineToolbar: true,\r\n config: {\r\n rows: 2,\r\n cols: 3\r\n }\r\n },\r\n code: {\r\n class: asToolConstructable(CodeTool),\r\n config: {\r\n placeholder: 'Enter code here...'\r\n }\r\n },\r\n\r\n embed: {\r\n class: asToolConstructable(Embed),\r\n config: {\r\n services: {\r\n youtube: true,\r\n codesandbox: true,\r\n codepen: true\r\n }\r\n }\r\n },\r\n\r\n },\r\n defaultBlock: 'paragraph',\r\n hideToolbar: false,\r\n data: payload.data,\r\n readOnly:payload.readOnly,\r\n logLevel: 'ERROR' as LogLevels,\r\n minHeight: 300,\r\n onChange: (api, event) => {\r\n payload.onChangeFn()\r\n },\r\n onReady: () => {},\r\n sanitizer: {\r\n p: true,\r\n b: true,\r\n a: {\r\n href: true,\r\n target: '_blank',\r\n rel: 'nofollow'\r\n }\r\n },\r\n i18n: {\r\n messages: {\r\n ui: {\r\n blockTunes: {\r\n toggler: {\r\n 'Click to tune': 'Click to tune',\r\n 'or drag to move': 'or drag to move'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\r\n","/**\r\n * Element-level \"pop out to full screen\" shared by the rich-text editors in this folder.\r\n *\r\n * A plain `position: fixed` overlay is **not** sufficient here, and that is the whole point of\r\n * this file. The editors render inside a `mat-form-field`, which consumers routinely nest inside\r\n * a Material stepper, tab body, drawer or dialog. `position: fixed` is viewport-relative only\r\n * while **no** ancestor establishes a containing block — any ancestor with `transform`, `filter`,\r\n * `contain`, `will-change`, `backdrop-filter` or `perspective` captures it, and that ancestor's\r\n * `overflow: hidden` then clips it. Which of those a consumer uses is unknowable from in here, so\r\n * the pop-out has to stop depending on the host component altogether.\r\n *\r\n * The browser's **top layer** is what does that: elements promoted into it are painted outside\r\n * the ancestor chain and are immune to ancestor `transform`, `overflow`, `z-index` and stacking\r\n * contexts. Three strategies are tried, best first:\r\n *\r\n * 1. `requestFullscreen()` — top layer **and** drops the browser chrome. Needs a user gesture.\r\n * 2. `showPopover()` — top layer, no gesture required; covers browsers where element full screen\r\n * is unavailable (Safari on iPhone) or blocked by a `fullscreen` permissions policy in an\r\n * iframe.\r\n * 3. `position: fixed` — last resort for browsers with neither API.\r\n *\r\n * The element is promoted **in place** — never re-parented to ``. Top-layer promotion\r\n * changes painting, not inheritance, so the editor keeps inheriting the app's `--mat-sys-*` theme\r\n * variables from its real ancestors; a portal to `` would lose them.\r\n *\r\n * Only the standard, promise-returning `requestFullscreen` is used. The legacy\r\n * `webkitRequestFullscreen` returns `void` and reports failure through a separate event, so a\r\n * rejection could not be observed in time to fall through cleanly — those browsers take path 2/3.\r\n */\r\n\r\n/**\r\n * Class carried by the element while it is popped out. Each editor styles it in its own\r\n * stylesheet, and that rule **must** set a `display` value: it is what keeps the element visible\r\n * during the popover path (see {@link EditorFullScreenHost.enter}).\r\n */\r\nexport const EDITOR_FULL_SCREEN_CLASS = 'is-fullscreen';\r\n\r\n/** Mechanism currently holding the element open. */\r\nexport type EditorFullScreenMode = 'fullscreen' | 'popover' | 'fixed';\r\n\r\n/**\r\n * Owns the pop-out of a single element. One instance per editor; created behind the component's\r\n * `isPlatformBrowser` guard so nothing here runs during SSR.\r\n */\r\nexport class EditorFullScreenHost {\r\n readonly #document: Document;\r\n readonly #onExternalExit: () => void;\r\n\r\n #element: HTMLElement | undefined;\r\n #mode: EditorFullScreenMode | undefined;\r\n\r\n /**\r\n * @param document The owning document, injected via `DOCUMENT` — never the global.\r\n * @param onExternalExit Called when the browser closed the pop-out without going through\r\n * {@link exit} (Escape, F11, another element claiming full screen).\r\n */\r\n constructor(document: Document, onExternalExit: () => void) {\r\n this.#document = document;\r\n this.#onExternalExit = onExternalExit;\r\n this.#document.addEventListener('fullscreenchange', this.#handleFullScreenChange);\r\n }\r\n\r\n /** Whether an element is currently popped out. */\r\n get active(): boolean {\r\n return this.#mode !== undefined;\r\n }\r\n\r\n /**\r\n * Pops `element` out using the best mechanism the browser allows, adding\r\n * {@link EDITOR_FULL_SCREEN_CLASS} for the duration.\r\n *\r\n * Must be called synchronously from a user gesture, otherwise the Fullscreen API rejects and\r\n * the pop-out silently degrades to the popover path.\r\n *\r\n * @param element The element to promote — must be the one carrying the editor chrome.\r\n * @returns The mechanism that ended up being used.\r\n */\r\n async enter(element: HTMLElement): Promise {\r\n if (this.#mode !== undefined) return this.#mode;\r\n\r\n // Added first, and deliberately so: the class sets `display`, which — being author origin —\r\n // beats the UA's `[popover]:not(:popover-open) { display: none }`. Without it the element\r\n // would be display:none for the window between `setAttribute` and `showPopover()` below, and\r\n // a style recalculation inside that window blurs whatever the user was typing in.\r\n this.#element = element;\r\n element.classList.add(EDITOR_FULL_SCREEN_CLASS);\r\n\r\n // `fullscreenEnabled` is false when a permissions policy blocks it (an iframe without\r\n // `allow=\"fullscreen\"`) and where element full screen is unsupported (Safari on iPhone).\r\n if (this.#document.fullscreenEnabled && typeof element.requestFullscreen === 'function') {\r\n try {\r\n await element.requestFullscreen();\r\n this.#mode = 'fullscreen';\r\n return this.#mode;\r\n } catch {\r\n // Rejected — no transient activation, or the UA refused. Fall through to the top-layer\r\n // popover, which needs neither.\r\n }\r\n }\r\n\r\n if (typeof element.showPopover === 'function') {\r\n element.setAttribute('popover', 'manual');\r\n try {\r\n element.showPopover();\r\n this.#mode = 'popover';\r\n return this.#mode;\r\n } catch {\r\n element.removeAttribute('popover');\r\n }\r\n }\r\n\r\n this.#mode = 'fixed';\r\n return this.#mode;\r\n }\r\n\r\n /** Closes the pop-out and returns the element to its place in the document flow. */\r\n async exit(): Promise {\r\n const element = this.#element;\r\n const mode = this.#mode;\r\n this.#element = undefined;\r\n this.#mode = undefined;\r\n if (!element || mode === undefined) return;\r\n\r\n try {\r\n if (mode === 'fullscreen') {\r\n // Leave full screen first: `exitFullscreen()` settles only once the browser's own\r\n // transition has finished, and the class is what styles the surface until then.\r\n if (this.#document.fullscreenElement === element) await this.#document.exitFullscreen();\r\n } else if (mode === 'popover') {\r\n element.hidePopover();\r\n element.removeAttribute('popover');\r\n }\r\n } finally {\r\n element.classList.remove(EDITOR_FULL_SCREEN_CLASS);\r\n }\r\n }\r\n\r\n /** Detaches the document listener and closes any open pop-out. Call from `ngOnDestroy`. */\r\n destroy(): void {\r\n this.#document.removeEventListener('fullscreenchange', this.#handleFullScreenChange);\r\n void this.exit();\r\n }\r\n\r\n /**\r\n * The browser can close a native full screen behind our back — Escape, F11, or another element\r\n * taking the top layer. Reconcile our own state and tell the owner so its toggle follows.\r\n */\r\n readonly #handleFullScreenChange = (): void => {\r\n if (this.#mode !== 'fullscreen') return;\r\n if (this.#document.fullscreenElement === this.#element) return;\r\n\r\n this.#element?.classList.remove(EDITOR_FULL_SCREEN_CLASS);\r\n this.#element = undefined;\r\n this.#mode = undefined;\r\n this.#onExternalExit();\r\n };\r\n}\r\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, output } from '@angular/core';\r\n\r\n/**\r\n * Floating action button that pops a rich-text editor out to full screen and back.\r\n *\r\n * Shared by the Quill and Editor.js inputs so both carry the same affordance, icon and\r\n * accessible naming. It deliberately owns no state: the editor that hosts it drives {@link active}\r\n * and performs the promotion (see `editor-full-screen.ts`).\r\n *\r\n * Positioning belongs to the host — this component styles only the button. Place it by targeting\r\n * the element selector from the host's stylesheet.\r\n *\r\n * @example\r\n * \r\n */\r\n@Component({\r\n selector: 'lib-editor-full-screen-toggle',\r\n templateUrl: './editor-full-screen-toggle.component.html',\r\n styleUrl: './editor-full-screen-toggle.component.css',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.Emulated,\r\n host: {\r\n 'class': 'lib-editor-full-screen-toggle'\r\n },\r\n imports: []\r\n})\r\nexport class EditorFullScreenToggleComponent {\r\n /** Whether the editor this controls is currently popped out. */\r\n readonly active = input.required();\r\n\r\n /** Emitted when the user asks to enter or leave full screen. */\r\n readonly toggled = output();\r\n\r\n /** Serves as both tooltip and accessible name, so the two can never drift apart. */\r\n protected readonly label = computed(() => (this.active() ? 'Exit full screen' : 'Full screen'));\r\n}\r\n","\r\n @if (active()) {\r\n \r\n } @else {\r\n \r\n }\r\n\r\n","import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n Input,\r\n OnDestroy,\r\n PLATFORM_ID,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild\r\n} from '@angular/core';\r\nimport { DOCUMENT, isPlatformBrowser } from '@angular/common';\r\nimport { NgControl } from '@angular/forms';\r\n\r\nimport { ITowerStepColumn } from 'ngx-t-forms-types';\r\n// Wave 2 / Trap 16: `@editorjs/editorjs` is a browser-only UMD bundle that crashes under\r\n// bare-Node SSR at module-eval time. Type-only import at the top keeps the surface intact\r\n// with zero runtime emission; the runtime load happens inside the SSR-gated `ngAfterViewInit`.\r\nimport type EditorJSType from '@editorjs/editorjs';\r\nimport type { OutputData } from '@editorjs/editorjs';\r\nimport { MatFormFieldControl } from '@angular/material/form-field';\r\n\r\nimport { BaseCustomInput, BaseCustomInputConfig } from '../../../../../../services/core/t-input-controller/functions/baseCustomInput';\r\nimport { loadEditorConfig, EditorJsPayload } from '../form-input-rich-text-editor/config';\r\nimport { EditorFullScreenHost } from '../editor-full-screen';\r\nimport { EditorFullScreenToggleComponent } from '../editor-full-screen-toggle/editor-full-screen-toggle.component';\r\nimport { _isEqual } from '../../../../../../shared/functions/isEqual';\r\n\r\nconst customInputConfig: BaseCustomInputConfig = {\r\n controlType: 'lib-editor-js-input',\r\n nextId: 0\r\n};\r\n\r\n/**\r\n * Rich-text input backed by the Editor.js block editor, wired into Angular\r\n * Material's form-field via {@link MatFormFieldControl}.\r\n *\r\n * The Editor.js bundle is browser-only, so it is dynamically imported and\r\n * instantiated inside `ngAfterViewInit` behind an `isPlatformBrowser` guard\r\n * to stay SSR-safe. The editor instance is destroyed on `ngOnDestroy`.\r\n *\r\n * @deprecated Scheduled for removal. Do not use in new code; migrate existing\r\n * usages to the supported rich-text input element. Retained only for backward\r\n * compatibility with forms that still reference `lib-editor-js-input`.\r\n *\r\n * @example\r\n * \r\n */\r\n@Component({\r\n selector: 'lib-editor-js-input',\r\n templateUrl: './editor-js-input.component.html',\r\n styleUrl: './editor-js-input.component.css',\r\n imports: [EditorFullScreenToggleComponent],\r\n host: {\r\n '[class.floating]': 'shouldLabelFloat',\r\n '[id]': 'id',\r\n '(keydown.escape)': 'onEscape($event)'\r\n },\r\n providers: [{ provide: MatFormFieldControl, useExisting: EditorJsInputComponent }],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class EditorJsInputComponent\r\n extends BaseCustomInput\r\n implements AfterViewInit, OnDestroy {\r\n\r\n /** Column definition describing the field's id, read-only state and metadata. */\r\n readonly inputConfig = input.required();\r\n\r\n /** Emits the editor's saved {@link OutputData} whenever its content changes. */\r\n readonly valueChanged = output();\r\n\r\n /** Live Editor.js instance; `undefined` until initialised (or on the server). */\r\n protected editor: EditorJSType | undefined;\r\n\r\n /** Whether the editor is currently popped out to fill the screen. */\r\n protected readonly fullScreen = signal(false);\r\n\r\n /**\r\n * Height the in-flow wrapper holds onto while the editor is popped out. Set from the editor's\r\n * measured height on the way in, cleared on the way out.\r\n */\r\n protected readonly reservedHeight = signal(null);\r\n\r\n /**\r\n * The bordered surface carrying the editor — this is what gets promoted to the browser's top\r\n * layer. (`viewChild` cannot sit on an ES-private field — NG1053.)\r\n */\r\n private readonly editorContainer = viewChild.required>('editorContainer');\r\n\r\n readonly #platformId = inject(PLATFORM_ID);\r\n\r\n readonly #document = inject(DOCUMENT);\r\n\r\n #fullScreenHost: EditorFullScreenHost | undefined;\r\n\r\n /** Guards against overlapping pop-out transitions (see `#toggleFullScreen`). */\r\n #toggling = false;\r\n\r\n constructor() {\r\n super(\r\n inject(NgControl, { optional: true, self: true }) as NgControl,\r\n inject>(ElementRef),\r\n customInputConfig\r\n );\r\n }\r\n\r\n override get empty(): boolean {\r\n const n = this.value;\r\n // Check for null, undefined, or empty string, but allow 0\r\n return n === null || n === undefined || (n as unknown) === '';\r\n }\r\n\r\n override get shouldLabelFloat(): boolean {\r\n return true;\r\n }\r\n\r\n override _value: OutputData | undefined = undefined;\r\n\r\n @Input() override set value(value: OutputData | undefined) {\r\n if (!_isEqual(this._value, value)) {\r\n this._value = value;\r\n this.onChange(value);\r\n this.stateChanges.next();\r\n }\r\n }\r\n\r\n override get value(): OutputData | undefined {\r\n return this._value;\r\n }\r\n\r\n async ngAfterViewInit(): Promise {\r\n if (!isPlatformBrowser(this.#platformId)) return;\r\n\r\n this.#destroyEditor();\r\n\r\n this.#fullScreenHost ??= new EditorFullScreenHost(this.#document, () => this.#setFullScreen(false));\r\n\r\n const payload: EditorJsPayload = {\r\n holderId: this.inputConfig().id,\r\n imageFetchEndpoint: '',\r\n imageUploadEndpoint: '',\r\n readOnly: this.inputConfig().readonly || this.inputConfig().disabled || false,\r\n data: this.value || undefined,\r\n onChangeFn: this.contentChangedSaveValue.bind(this)\r\n };\r\n\r\n // Browser-only dynamic load — see Trap 16 comment at the top of this file and in config.ts.\r\n const [{ default: EditorJS }, config] = await Promise.all([\r\n import('@editorjs/editorjs'),\r\n loadEditorConfig(payload),\r\n ]);\r\n this.editor = new EditorJS(config);\r\n // A `setDisabledState` that arrived before the editor existed is applied here.\r\n void this.#applyReadOnly();\r\n }\r\n\r\n /**\r\n * Keeps Editor.js's own read-only state in step with the control's. The pop-out re-enables\r\n * pointer events on the popped-out surface (Material kills them field-wide when the control is\r\n * disabled), so this is what actually keeps a disabled field uneditable — the CSS no longer\r\n * does it.\r\n */\r\n override setDisabledState(isDisabled: boolean): void {\r\n super.setDisabledState(isDisabled);\r\n void this.#applyReadOnly();\r\n }\r\n\r\n /** Read-only when either the column config or the reactive-form control says so. */\r\n async #applyReadOnly(): Promise {\r\n const editor = this.editor;\r\n if (!editor) return;\r\n const config = this.inputConfig();\r\n const readOnly = this.disabled || config.readonly || config.disabled || false;\r\n try {\r\n await editor.isReady;\r\n if (editor.readOnly.isEnabled !== readOnly) await editor.readOnly.toggle(readOnly);\r\n } catch {\r\n // Editor.js rejects when the configured tool set has no read-only support. The field then\r\n // keeps the state it was constructed with rather than the whole editor failing to load.\r\n }\r\n }\r\n\r\n async contentChangedSaveValue(): Promise {\r\n const value: OutputData | undefined = await this.editor?.save();\r\n this.value = value;\r\n this.onChange(value);\r\n this.valueChanged.emit(value);\r\n }\r\n\r\n /** Toggles the pop-out from the corner button. */\r\n protected toggleFullScreen(): void {\r\n void this.#toggleFullScreen();\r\n }\r\n\r\n /**\r\n * Escape leaves the pop-out. Native full screen is torn down by the browser itself (picked up\r\n * through `fullscreenchange`); this covers the popover and fixed fallbacks. The event is\r\n * stopped so Escape closes the editor rather than an enclosing dialog.\r\n */\r\n protected onEscape(event: Event): void {\r\n if (!this.fullScreen()) return;\r\n event.preventDefault();\r\n event.stopPropagation();\r\n void this.#toggleFullScreen();\r\n }\r\n\r\n /**\r\n * Pops the editor out to fill the screen, or restores it. Runs inside the button's click\r\n * gesture, which the Fullscreen API requires — everything up to the promotion is synchronous\r\n * for that reason.\r\n *\r\n * Unlike the Quill sibling there is no caret to restore: the element is promoted in place, so\r\n * the native selection inside Editor.js's contenteditable blocks survives untouched.\r\n */\r\n async #toggleFullScreen(): Promise {\r\n const fullScreenHost = this.#fullScreenHost;\r\n // Both transitions settle asynchronously; ignore clicks that land mid-flight rather than\r\n // letting a second `requestFullscreen()` race the first.\r\n if (!fullScreenHost || this.#toggling) return;\r\n this.#toggling = true;\r\n\r\n try {\r\n if (this.fullScreen()) {\r\n await fullScreenHost.exit();\r\n } else {\r\n const element = this.editorContainer().nativeElement;\r\n this.reservedHeight.set(element.offsetHeight);\r\n await fullScreenHost.enter(element);\r\n }\r\n } finally {\r\n // `enter()` degrades rather than throwing, but `exit()` can reject if the browser refuses\r\n // to leave full screen. Either way the controller has already settled its own state, so\r\n // read it back instead of assuming the toggle succeeded.\r\n this.#setFullScreen(fullScreenHost.active);\r\n this.#toggling = false;\r\n }\r\n }\r\n\r\n /**\r\n * Single funnel for pop-out state, so the signal and the reserved space always agree —\r\n * including when the browser closed full screen on its own.\r\n */\r\n #setFullScreen(active: boolean): void {\r\n this.fullScreen.set(active);\r\n if (!active) this.reservedHeight.set(null);\r\n }\r\n\r\n /**\r\n * Tears the live editor down, if there is one that can be torn down.\r\n *\r\n * Editor.js attaches its public API — `destroy` included — inside `exportAPI`, which runs\r\n * from `isReady.then(...)`. An editor whose initialisation FAILED (the classic case: the\r\n * holder element left the document before the dynamic `import()` settled, which is routine\r\n * when a dialog or step closes early) is therefore a live instance carrying nothing but a\r\n * rejected `isReady`. `this.editor?.destroy()` guards that the instance exists, not that it\r\n * initialised, so that case threw `destroy is not a function` straight out of `ngOnDestroy`.\r\n * Check the method, not just the instance.\r\n */\r\n #destroyEditor(): void {\r\n const editor = this.editor;\r\n this.editor = undefined;\r\n if (typeof editor?.destroy === 'function') editor.destroy();\r\n }\r\n\r\n override ngOnDestroy(): void {\r\n this.#fullScreenHost?.destroy();\r\n this.#fullScreenHost = undefined;\r\n this.#destroyEditor();\r\n // Tear the editor down first, then let the base complete `stateChanges` / `destroy$` and\r\n // clear the temporary-error timer — none of which happened while this override skipped it.\r\n super.ngOnDestroy();\r\n }\r\n}\r\n","\r\n\r\n